feat(IBAN): Automatic Bank Name identification and controlled form inputs

app/components/formElements/SchemaComponents.tsx

@@ -1,4 +1,3 @@
-import { type SchemaObject } from "~/domains/userData";
 import { type StrapiFormComponent } from "~/services/cms/models/formElements/StrapiFormComponent";
 import { getNestedSchema } from "../formElements/schemaToForm/getNestedSchema";
 import {
@@ -28,22 +27,23 @@ import {
   isZodNumber,
   renderZodNumber,
 } from "~/components/formElements/schemaToForm/renderZodNumber";
+import { type ArrayPage, type PageConfig } from "~/domains/pageSchemas";
 
 type Props = {
-  pageSchema: SchemaObject;
+  pageConfig?: ArrayPage | PageConfig;
   formComponents?: StrapiFormComponent[];
   className?: string;
   readOnlyFieldNames: string[];
 };
 
 export const SchemaComponents = ({
-  pageSchema,
+  pageConfig,
   formComponents,
   className,
   readOnlyFieldNames,
 }: Props) => {
   const sortedFieldsSchema = sortSchemaByFormComponents(
-    pageSchema,
+    pageConfig?.pageSchema ?? {},
     formComponents,
   );
 
@@ -73,6 +73,7 @@ export const SchemaComponents = ({
           return renderSpecialMetaDescriptions(
             fieldName,
             description,
+            pageConfig,
             matchingElement,
           );
         }

app/components/formElements/ValidatedFormFlow.tsx

@@ -1,6 +1,6 @@
 import { ValidatedForm } from "@rvf/react-router";
 import { useLocation } from "react-router";
-import { getPageSchema } from "~/domains/pageSchemas";
+import { getPageConfigOrArrayPageByPathname } from "~/domains/pageSchemas";
 import type { UserData } from "~/domains/userData";
 import type { StrapiFormComponent } from "~/services/cms/models/formElements/StrapiFormComponent";
 import { buildStepSchemaWithPageSchema } from "~/services/validation/stepValidator/buildStepSchemaWithPageSchema";
@@ -24,8 +24,11 @@ function ValidatedFlowForm({
   buttonNavigationProps: { back, next },
 }: Readonly<ValidatedFlowFormProps>) {
   const { pathname } = useLocation();
-  const pageSchema = getPageSchema(pathname);
-  const formSchema = buildStepSchemaWithPageSchema(pathname, pageSchema);
+  const pageConfig = getPageConfigOrArrayPageByPathname(pathname);
+  const formSchema = buildStepSchemaWithPageSchema(
+    pathname,
+    pageConfig?.pageSchema,
+  );
   const readOnlyFieldNames = getReadOnlyFieldNames(pathname, stepData);
 
   return (
@@ -41,9 +44,9 @@ function ValidatedFlowForm({
         <>
           <CsrfInput />
           <div className="flex flex-col">
-            {pageSchema && (
+            {pageConfig && (
               <SchemaComponents
-                pageSchema={pageSchema}
+                pageConfig={pageConfig}
                 formComponents={formElements}
                 className="mb-kern-space-x-large"
                 readOnlyFieldNames={readOnlyFieldNames}

app/components/formElements/__test__/SchemaComponents.test.tsx

@@ -25,7 +25,7 @@ describe("SchemaComponents", () => {
     props: Readonly<Parameters<typeof SchemaComponents>[0]>,
   ) {
     const form = useForm({
-      schema: z.object(props.pageSchema),
+      schema: z.object(props.pageConfig?.pageSchema),
       defaultValues: {},
     });
 
@@ -47,7 +47,7 @@ describe("SchemaComponents", () => {
     const pageSchema = { field1: z.string() };
     const { getByRole } = render(
       <WrappedSchemaComponents
-        pageSchema={pageSchema}
+        pageConfig={{ pageSchema }}
         readOnlyFieldNames={[]}
       />,
     );
@@ -58,7 +58,7 @@ describe("SchemaComponents", () => {
   it("should render textarea", () => {
     const { getByRole } = render(
       <WrappedSchemaComponents
-        pageSchema={{ field1: z.string() }}
+        pageConfig={{ pageSchema: { field1: z.string() } }}
         readOnlyFieldNames={[]}
         formComponents={[
           {
@@ -78,7 +78,7 @@ describe("SchemaComponents", () => {
     const pageSchema = { field1: z.enum(["option1", "option2"]) };
     const { getAllByRole } = render(
       <WrappedSchemaComponents
-        pageSchema={pageSchema}
+        pageConfig={{ pageSchema }}
         readOnlyFieldNames={[]}
       />,
     );
@@ -96,7 +96,7 @@ describe("SchemaComponents", () => {
     };
     const { getAllByRole } = render(
       <WrappedSchemaComponents
-        pageSchema={pageSchema}
+        pageConfig={{ pageSchema }}
         readOnlyFieldNames={[]}
       />,
     );
@@ -111,7 +111,7 @@ describe("SchemaComponents", () => {
     const pageSchema = { [fieldName]: z.enum(["option1"]) };
     const { getByRole } = render(
       <WrappedSchemaComponents
-        pageSchema={pageSchema}
+        pageConfig={{ pageSchema }}
         readOnlyFieldNames={[]}
         formComponents={[
           {
@@ -148,7 +148,7 @@ describe("SchemaComponents", () => {
     const pageSchema = { [fieldName]: checkedRequired };
     const { getByRole } = render(
       <WrappedSchemaComponents
-        pageSchema={pageSchema}
+        pageConfig={{ pageSchema }}
         readOnlyFieldNames={[]}
         formComponents={[
           {
@@ -173,7 +173,7 @@ describe("SchemaComponents", () => {
     const pageSchema = { field: exclusiveCheckboxesSchema(["option", "none"]) };
     const { getAllByRole } = render(
       <WrappedSchemaComponents
-        pageSchema={pageSchema}
+        pageConfig={{ pageSchema }}
         readOnlyFieldNames={[]}
         formComponents={[
           {
@@ -203,12 +203,14 @@ describe("SchemaComponents", () => {
     const { getByRole, getAllByRole } = render(
       <WrappedSchemaComponents
         readOnlyFieldNames={[]}
-        pageSchema={{
-          field1: z
-            .string()
-            .min(1)
-            .transform((val) => val.toUpperCase()),
-          field2: z.enum(["option1", "option2"]),
+        pageConfig={{
+          pageSchema: {
+            field1: z
+              .string()
+              .min(1)
+              .transform((val) => val.toUpperCase()),
+            field2: z.enum(["option1", "option2"]),
+          },
         }}
       />,
     );
@@ -226,7 +228,7 @@ describe("SchemaComponents", () => {
   it("should attach correct labels to inputs", () => {
     const { getByRole, getByLabelText, getByText } = render(
       <WrappedSchemaComponents
-        pageSchema={{ field1: z.string() }}
+        pageConfig={{ pageSchema: { field1: z.string() } }}
         readOnlyFieldNames={[]}
         formComponents={[
           {
@@ -264,7 +266,7 @@ describe("SchemaComponents", () => {
 
     const { getByRole } = render(
       <WrappedSchemaComponents
-        pageSchema={pageSchema}
+        pageConfig={{ pageSchema }}
         readOnlyFieldNames={[]}
         formComponents={[]}
       />,
@@ -277,7 +279,7 @@ describe("SchemaComponents", () => {
     const pageSchema = { [fieldName]: createNumberIncrementSchema(-2, 18) };
     const { getByRole } = render(
       <WrappedSchemaComponents
-        pageSchema={pageSchema}
+        pageConfig={{ pageSchema }}
         readOnlyFieldNames={[]}
         formComponents={[
           {
@@ -336,7 +338,7 @@ describe("SchemaComponents", () => {
     const { getAllByRole, getByText } = render(
       <WrappedSchemaComponents
         readOnlyFieldNames={[]}
-        pageSchema={mockPageSchema}
+        pageConfig={{ pageSchema: mockPageSchema }}
         formComponents={mockFormComponentsWithFieldSet}
       />,
     );
@@ -351,7 +353,7 @@ describe("SchemaComponents", () => {
     const pageSchema = { field1: z.string(), field2: z.string() };
     const { getAllByRole } = render(
       <WrappedSchemaComponents
-        pageSchema={pageSchema}
+        pageConfig={{ pageSchema }}
         readOnlyFieldNames={["field1"]}
       />,
     );
@@ -371,17 +373,27 @@ describe("SchemaComponents", () => {
     const pageSchema = {
       field1: ibanSchema,
     };
-    const { getByRole } = render(
+    const { getByLabelText } = render(
       <WrappedSchemaComponents
-        pageSchema={pageSchema}
+        pageConfig={{
+          pageSchema,
+        }}
         readOnlyFieldNames={[]}
+        formComponents={[
+          {
+            name: "field1",
+            label: "label",
+            errorMessages: undefined,
+            type: "text",
+            width: "10",
+            id: 76,
+            __component: "form-elements.input",
+          },
+        ]}
       />,
     );
-    const ibanInput = getByRole("textbox");
+    const ibanInput = getByLabelText("label");
     expect(ibanInput).toHaveAttribute("name", "field1");
-    expect(ibanInput.getAttribute("aria-describedby")).toContain(
-      "bank-name-badge",
-    );
   });
 
   it("should render a telephone input when the schema is phoneNumberSchema", () => {
@@ -390,7 +402,7 @@ describe("SchemaComponents", () => {
     };
     const { getByRole } = render(
       <WrappedSchemaComponents
-        pageSchema={pageSchema}
+        pageConfig={{ pageSchema }}
         readOnlyFieldNames={[]}
       />,
     );

app/components/formElements/__test__/ValidatedFlowForm.test.tsx

@@ -12,7 +12,7 @@ import { checkedRequired } from "~/services/validation/checkedCheckbox";
 import { configureZod } from "~/services/validation/configureZod";
 import { createDateSchema } from "~/services/validation/dateString";
 import { integerSchema } from "~/services/validation/integer";
-import { getPageSchema } from "~/domains/pageSchemas";
+import { getPageConfigOrArrayPageByPathname } from "~/domains/pageSchemas";
 import { stringRequiredSchema } from "~/services/validation/stringRequired";
 import { timeSchema } from "~/services/validation/time";
 import { YesNoAnswer } from "~/services/validation/YesNoAnswer";
@@ -38,8 +38,10 @@ vi.mock("~/services/params", () => ({
 
 vi.mock("~/domains/pageSchemas");
 
-const mockGetPageSchema = (pageSchema: SchemaObject | undefined) => {
-  vi.mocked(getPageSchema).mockReturnValue(pageSchema);
+const mockGetPageConfigOrArrayPageByPathname = (
+  pageSchema: SchemaObject | undefined,
+) => {
+  vi.mocked(getPageConfigOrArrayPageByPathname).mockReturnValue({ pageSchema });
 };
 
 vi.spyOn(parsePathname, "parsePathname").mockResolvedValue({
@@ -54,14 +56,14 @@ describe("ValidatedFlowForm", () => {
   });
 
   it("should render", () => {
-    mockGetPageSchema(undefined);
+    mockGetPageConfigOrArrayPageByPathname(undefined);
     const { getByText } = renderValidatedFlowForm([]);
     expect(getByText("NEXT")).toBeInTheDocument();
   });
 
   describe("Input Component", () => {
     beforeAll(() => {
-      mockGetPageSchema({ inputName: integerSchema });
+      mockGetPageConfigOrArrayPageByPathname({ inputName: integerSchema });
     });
     const { component, expectInputErrorToExist } = getStrapiInputComponent({
       code: "invalidInteger",
@@ -108,7 +110,7 @@ describe("ValidatedFlowForm", () => {
 
   describe("Date Input Component", () => {
     beforeAll(() => {
-      mockGetPageSchema({ inputName: createDateSchema() });
+      mockGetPageConfigOrArrayPageByPathname({ inputName: createDateSchema() });
     });
     const { component, expectInputErrorToExist } = getStrapiInputComponent(
       {
@@ -158,7 +160,7 @@ describe("ValidatedFlowForm", () => {
 
   describe("Time Input Component", () => {
     beforeAll(() => {
-      mockGetPageSchema({ inputName: timeSchema });
+      mockGetPageConfigOrArrayPageByPathname({ inputName: timeSchema });
     });
     const { component, expectInputErrorToExist } = getStrapiInputComponent(
       {
@@ -208,7 +210,9 @@ describe("ValidatedFlowForm", () => {
 
   describe("Textarea Component", () => {
     beforeAll(() => {
-      mockGetPageSchema({ myTextarea: stringRequiredSchema });
+      mockGetPageConfigOrArrayPageByPathname({
+        myTextarea: stringRequiredSchema,
+      });
     });
     const { component, expectTextareaErrorToExist } =
       getStrapiTextareaComponent({
@@ -253,7 +257,7 @@ describe("ValidatedFlowForm", () => {
 
   describe("Select Component (Radio)", () => {
     beforeAll(() => {
-      mockGetPageSchema({ mySelect: YesNoAnswer });
+      mockGetPageConfigOrArrayPageByPathname({ mySelect: YesNoAnswer });
     });
     const { component, expectSelectErrorToExist } = getStrapiSelectComponent({
       code: "required",
@@ -298,7 +302,7 @@ describe("ValidatedFlowForm", () => {
 
   describe("Dropdown Component", () => {
     beforeAll(() => {
-      mockGetPageSchema({
+      mockGetPageConfigOrArrayPageByPathname({
         myDropdown: z.enum(["option1", "option2", "option3"]),
       });
     });
@@ -338,7 +342,7 @@ describe("ValidatedFlowForm", () => {
 
   describe("Checkbox Component", () => {
     beforeAll(() => {
-      mockGetPageSchema({
+      mockGetPageConfigOrArrayPageByPathname({
         checkbox1: checkedRequired,
         checkbox2: checkedRequired,
       });
@@ -402,7 +406,7 @@ describe("ValidatedFlowForm", () => {
 
   describe("TileGroup Component", () => {
     beforeAll(() => {
-      mockGetPageSchema({
+      mockGetPageConfigOrArrayPageByPathname({
         myTileGroup: z.enum(["firstTile", "secondTile"]),
       });
     });

app/components/formElements/inputs/fieldset/Fieldset.tsx

@@ -84,7 +84,7 @@ export const Fieldset = ({
       )}
       <div className="kern-fieldset__body">
         <SchemaComponents
-          pageSchema={pageSchema}
+          pageConfig={{ pageSchema }}
           formComponents={formComponents}
           className={classNames("pt-16", { "md:pl-32": image })}
           readOnlyFieldNames={readOnlyFieldNames}

app/components/formElements/inputs/iban/BankNameBadge.tsx

@@ -0,0 +1,19 @@
+import { Icon } from "~/components/common/Icon";
+
+export const BankNameBadge = ({
+  bankNameBadgeId,
+  bankName,
+}: {
+  bankNameBadgeId: string;
+  bankName?: string;
+}) => {
+  return bankName ? (
+    <output
+      id={bankNameBadgeId}
+      className="kern-badge kern-badge-info border-2 border-kern-feedback-info bg-kern-feedback-info-background min-w-fit w-min"
+    >
+      <Icon name="info" className="fill-kern-feedback-info" />
+      <span className="kern-label kern-label--small">{bankName}</span>
+    </output>
+  ) : null;
+};