public form

apps/prs/react/src/app/app.tsx

@@ -89,6 +89,7 @@ export function App() {
               <Link to="/features/v2-icons">v2 header icons</Link>
               <Link to="/features/3137">3137 Work Side Menu Group</Link>
               <Link to="/features/3306">3306 Custom slug value for tabs</Link>
+              <Link to="/features/public-form">Public form</Link>
             </GoabSideMenuGroup>
             <GoabSideMenuGroup heading="Everything">
               <Link to="/everything">A</Link>

apps/prs/react/src/main.tsx

@@ -68,6 +68,7 @@ import { Feat3241Route } from "./routes/features/feat3241";
 import { FeatV2IconsRoute } from "./routes/features/featV2Icons";
 import { Feat3137Route } from "./routes/features/feat3137";
 import Feat3306Route from "./routes/features/feat3306";
+import { PublicFormRoute } from "./routes/features/public-form";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
@@ -144,6 +145,7 @@ root.render(
           <Route path="features/3137" element={<Feat3137Route />} />
           <Route path="features/1908" element={<Feat1908Route />} />
           <Route path="features/3306" element={<Feat3306Route />} />
+          <Route path="features/public-form" element={<PublicFormRoute />} />
         </Route>
       </Routes>
     </BrowserRouter>

apps/prs/react/src/routes/everything.tsx

@@ -26,7 +26,6 @@ import {
   GoabDrawer,
   GoabDropdown,
   GoabDropdownItem,
-  GoabFieldset,
   GoabFileUploadCard,
   GoabFileUploadInput,
   GoabFilterChip,
@@ -50,13 +49,6 @@ import {
   GoabPages,
   GoabPagination,
   GoabPopover,
-  GoabPublicForm,
-  GoabPublicFormPage,
-  GoabPublicFormSummary,
-  GoabPublicFormTask,
-  GoabPublicFormTaskList,
-  GoabPublicSubform,
-  GoabPublicSubformIndex,
   GoabRadioGroup,
   GoabRadioItem,
   GoabSideMenu,
@@ -103,7 +95,6 @@ import {
   GoabFileUploadInputOnSelectFileDetail,
   GoabFileUploadOnCancelDetail,
   GoabFileUploadOnDeleteDetail,
-  GoabFormState,
   GoabFormStepStatus,
   GoabFormStepperOnChangeDetail,
   GoabIconButtonVariant,
@@ -351,11 +342,6 @@ export function EverythingRoute(): JSX.Element {
   const [inputTrailingClicks, setInputTrailingClicks] = useState(0);
   const [numberInputTrailingClicks, setNumberInputTrailingClicks] = useState(0);
   const [menuAction, setMenuAction] = useState<string | undefined>();
-  const [publicFormEvents, setPublicFormEvents] = useState<string[]>([]);
-  const [fieldsetContinueEvents, setFieldsetContinueEvents] = useState<
-    GoabFieldsetOnContinueDetail[]
-  >([]);
-  const [publicSubformEvents, setPublicSubformEvents] = useState<string[]>([]);
   const logEvent = (name: string, detail: unknown) => {
     console.log(`[everything][react] ${name}`, detail);
     const entry: EventLogEntry = { name, detail, timestamp: new Date().toISOString() };

apps/prs/react/src/routes/features/public-form.tsx

@@ -0,0 +1,218 @@
+import { GoabFormItem, GoabInput, GoabPublicForm, GoabPublicFormPage, GoabPublicFormSummary, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
+import { LengthValidator, NumericValidator, PFState, PFOutline, PFPage, RequiredValidator, SINValidator } from "@abgov/ui-components-common";
+import React, { useState } from "react";
+
+const outline: PFOutline = {
+  role: {
+    subform: false,
+    props: {
+      heading: "What is your role in the court order?",
+      "section-title": "Support order details",
+    },
+    fields: {
+      role: {
+        label: "What is your role?",
+        formatter: (val: string) => val.toUpperCase(),
+        hideInSummary: "never",
+      },
+    },
+    next: (state: PFState) => {
+      const role = state.dataBuffer["role"];
+      return role === "Payor" ? "salary" : "identification";
+    },
+    validators: {
+      role: [RequiredValidator("Role is required")],
+    },
+  },
+
+  salary: {
+    subform: false,
+    props: {
+      heading: "Payor salary",
+    },
+    fields: {
+      salary: { label: "Yearly income", hideInSummary: "never" },
+    },
+    next: "summary",
+    validators: {
+      salary: [NumericValidator({ min: 0 })],
+    },
+  },
+
+  identification: {
+    subform: false,
+    props: {
+      "section-title": "Support order details",
+      heading: "Do you know any of the identifiers about the other party?",
+    },
+    fields: {
+      sin: {
+        label: "Social Insurance #",
+        formatter: (val: string) => val.match(/(.{3})/g)?.join(" ") || val,
+        hideInSummary: "never",
+      },
+      ahcn: {
+        label: "Alberta Health Care #",
+        formatter: (val: string) => val.match(/(.{4})/g)?.join("-") || val,
+        hideInSummary: "never",
+      },
+      info: { label: "Additional information", hideInSummary: "never" },
+    },
+    next: (state: PFState): string => {
+      const sin = state.dataBuffer["sin"];
+      const ahcn = state.dataBuffer["ahcn"];
+
+      if (!sin && !ahcn) {
+        throw "Either sin or ahcn is required";
+      }
+
+      return "address";
+    },
+    validators: {
+      sin: [SINValidator()],
+      ahcn: [LengthValidator({ min: 8 })],
+    },
+  },
+
+  payor: {
+    subform: false,
+    props: {
+      heading: "Payor Name",
+    },
+    fields: {
+      firstName: { label: "First name", hideInSummary: "never" },
+      lastName: { label: "Last name", hideInSummary: "never" },
+    },
+    summarize: (page: PFPage) => ({
+      "Full name": `${page["firstName"]} ${page["lastName"]}`.trim(),
+    }),
+    next: "address",
+    validators: {},
+  },
+
+  address: {
+    subform: false,
+    props: {
+      "section-title": "Support order details",
+      heading: "Your current address",
+    },
+    fields: {
+      city: { label: "City/Town", hideInSummary: "never" },
+      street: { label: "Street #", hideInSummary: "never" },
+      "postal-code": { label: "Postal code", hideInSummary: "never" },
+    },
+    next: "summary",
+    validators: {},
+  },
+
+  summary: {
+    subform: false,
+    props: {
+      "section-title": "Support order details",
+      heading: "Summary",
+    },
+    fields: {},
+    next: (state: PFState): string => {
+      console.log("submit to backend here", state);
+      return "";
+    },
+    validators: {},
+  },
+};
+
+export function PublicFormRoute() {
+  const [state, setState] = useState<PFState | undefined>(undefined);
+
+  const handleInit = (initFn: any) => {
+    // Initialize with restored state
+    const initialState = initFn(null, { outline });
+    setState(initialState);
+  };
+
+  const handleChange = (detail: any) => {
+    console.log("onChange", detail);
+  };
+
+  const handleNext = (newState: PFState) => {
+    setState(newState);
+    console.log("onNext", newState);
+  };
+
+  const handleSubformChange = (newState: PFState) => {
+    setState({ ...newState });
+    console.log("onSubformChange", newState);
+  };
+
+  const getPage = (pageId: string, defaultValue: unknown) => {
+    return state?.data?.[pageId] || defaultValue;
+  };
+
+  return (
+    <div style={{ margin: "5rem auto", width: "90ch" }}>
+      <GoabPublicForm
+        onInit={handleInit}
+        onChange={handleChange}
+        onSubformChange={handleSubformChange}
+        onNext={handleNext}
+      >
+        <GoabPublicFormPage id="role">
+          <GoabFormItem helpText="some help text">
+            <GoabRadioGroup name="role" data-pf-item="">
+              <GoabRadioItem value="Recipient" label="Recipient" />
+              <GoabRadioItem value="Payor" label="Payor" />
+            </GoabRadioGroup>
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="identification">
+          <GoabFormItem
+            label="What is the Social Insurance Number?"
+            requirement="optional"
+            helpText="9-digit number, such as 123 456 789."
+          >
+            <GoabInput data-pf-item="" name="sin" />
+          </GoabFormItem>
+
+          <GoabFormItem label="What is the AHCN">
+            <GoabInput data-pf-item="" name="ahcn" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="payor">
+          <GoabFormItem label="First name">
+            <GoabInput data-pf-item="" name="firstName" />
+          </GoabFormItem>
+          <GoabFormItem label="Last name">
+            <GoabInput data-pf-item="" name="lastName" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="salary">
+          <GoabFormItem label="Salary">
+            <GoabInput data-pf-item="" name="salary" type="number" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="address">
+          <GoabFormItem label="City" helpText="Where you live">
+            <GoabInput data-pf-item="" name="city" />
+          </GoabFormItem>
+          <GoabFormItem label="Address">
+            <GoabInput data-pf-item="" name="street" />
+          </GoabFormItem>
+          <GoabFormItem label="Postal Code">
+            <GoabInput data-pf-item="" name="postal-code" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage
+          id="summary"
+          buttonText="Submit"
+          backVisibility="hidden"
+        >
+          <GoabPublicFormSummary />
+        </GoabPublicFormPage>
+      </GoabPublicForm>
+    </div>
+  )
+}

apps/prs/web/src/app/App.svelte

@@ -3,6 +3,7 @@
   import { Router, Route } from "svelte-routing";
   import Issue2333 from "../routes/2333.svelte";
   import Issue3279 from "../routes/3279.svelte";
+  import PublicFormExample from "../routes/public-form.svelte";
 </script>
 
 <svelte:head>
@@ -12,4 +13,5 @@
 <Router>
   <Route path="/issues/2333" component={Issue2333} />
   <Route path="/issues/3279" component={Issue3279} />
+  <Route path="/issues/public-form" component={PublicFormExample} />
 </Router>