@axos-web-dev/shared-components 1.0.77-patch.6 → 1.0.77-patch.61

package/dist/Forms/QuickPricer/QuickPricerForm.js

@@ -20,20 +20,23 @@ import "../../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../../icons/AxosX/index.js";
 import SvgComponent from "../../icons/AxosX/Blue.js";
 import "../../icons/CheckIcon/CheckIcon.css.js";
-import '../../assets/icons/FollowIcon/FollowIcon.css';import '../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+import '../../assets/icons/FollowIcon/FollowIcon.css';import '../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
+/* empty css                                  */
 /* empty css                                       */
 /* empty css                                                       */
 /* empty css                                                   */
 import "../../utils/allowedAxosDomains.js";
+import * as z from "zod";
 import { associatedEmail } from "../../utils/EverestValidity.js";
 import { getVariant } from "../../utils/getVariant.js";
+import { useCachedEmailValidator, useCachedNMLSValidator } from "../../utils/useCachedValidators.js";
 import { format } from "@react-input/number-format";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
-import * as z from "zod";
 import { BrokerConpensation, PrepaymentPenalty, NumberOfUnits, Occupancy, PropertyType, BankruptcySeasoning, BankruptcyType, HousingEventHistory, HousingEventType, MortgageLates24, MortgageLates12, Citizenship, DocType, RepresentativesFico, Purposes } from "../FormEnums.js";
 import { iconForm, headerContainer, headerForm, form, descriptionField, one_row, section_title, checkbox_group, formWrapper, disclosureForm, actions, formContainer } from "../Forms.css.js";
+import { honeyPotSchema, isValidHoneyPot, HoneyPot } from "../HoneyPot/index.js";
 import { SalesforceSchema } from "../SalesforceFieldsForm.js";
 const QuickPricer = ({
   icon = false,
@@ -50,7 +53,8 @@ const QuickPricer = ({
   validateEmail,
   validateNMLS = async () => {
     return false;
-  }
+  },
+  onValidate
 }) => {
   const [refiCashOut, setRefiCashOut] = useState(false);
   const [DSCR_Ratio, setDSCR_Ratio] = useState(false);
@@ -58,6 +62,8 @@ const QuickPricer = ({
   const [bankruptcySeasoning, setBankruptcySeasoning] = useState(false);
   const [numberOfUnits, setNumberOfUnits] = useState(false);
   const [prepaymentPenalty, setPrepaymentPenalty] = useState(false);
+  const cachedEmailValidator = useCachedEmailValidator(validateEmail);
+  const cachedNMLSValidator = useCachedNMLSValidator(validateNMLS);
   const schema = z.object({
     Base_Loan_Amount__c: z.string({
       message: "Please provide a valid base loan amount"
@@ -131,12 +137,9 @@ const QuickPricer = ({
         message: "Housing event history is required"
       }
     ),
-    bankruptcyType__c: z.string().min(1, { message: "Bankruptcy type is required" }).refine(
-      (val) => BankruptcyType.map((item) => item.value).includes(val),
-      {
-        message: "Bankruptcy type is required"
-      }
-    ),
+    bankruptcyType__c: z.string().min(1, { message: "Bankruptcy type is required" }).refine((val) => BankruptcyType.map((item) => item.value).includes(val), {
+      message: "Bankruptcy type is required"
+    }),
     Number_of_Properties_Financed__c: z.coerce.number({ message: "Please provide a valid # of Properties" }).min(0, {
       message: "Please provide a valid # of Properties"
     }).max(100, {
@@ -155,12 +158,9 @@ const QuickPricer = ({
     Occupance__c: z.string().min(1, { message: "Occupancy is required" }).refine((val) => Occupancy.map((item) => item.value).includes(val), {
       message: "Occupancy is required"
     }),
-    Units__c: z.string().min(1, { message: "# of Units is required" }).refine(
-      (val) => NumberOfUnits.map((item) => item.value).includes(val),
-      {
-        message: "# of Units is required"
-      }
-    ),
+    Units__c: z.string().min(1, { message: "# of Units is required" }).refine((val) => NumberOfUnits.map((item) => item.value).includes(val), {
+      message: "# of Units is required"
+    }),
     Prepayment_Penalty__c: z.string().min(1, { message: "Prepayment penalty is required" }).refine(
       (val) => PrepaymentPenalty.map((field) => field.value).includes(val),
       {
@@ -173,11 +173,8 @@ const QuickPricer = ({
         message: "Broker compensation is required"
       }
     ),
-    NMLS__c: z.string().min(4, "Valid NMLS should have at least 4 characters").max(15, "Valid NMLS should have at most 15 characters").refine(async (val) => {
-      const res = await validateNMLS(val);
-      return res?.body?.data?.records?.length > 0;
-    }, "NMLS ID is not valid"),
-    Email_Address__c: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
+    NMLS__c: z.string().min(4, "Valid NMLS should have at least 4 characters").max(15, "Valid NMLS should have at most 15 characters").refine(cachedNMLSValidator, "NMLS ID is not valid"),
+    Email_Address__c: z.string().email({ message: "Email is required." }).refine(cachedEmailValidator, { message: "Invalid email address." }),
     Cell_Phone__c: z.string().regex(/[\d-]{10}/).min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
       const removeDashes = val.replace(/-/gi, "");
       if (removeDashes.length !== 10) {
@@ -189,7 +186,8 @@ const QuickPricer = ({
       }
       return removeDashes;
     })
-  }).superRefine((values, ctx) => {
+  });
+  const gen_schema = schema.merge(SalesforceSchema).merge(honeyPotSchema).superRefine((values, ctx) => {
     if (values.Base_Loan_Amount__c < 149999) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
@@ -211,12 +209,22 @@ const QuickPricer = ({
         message: "Loan amount should be lower than property value"
       });
     }
+    if (!isValidHoneyPot(values)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "fields are not valid."
+      });
+    }
   });
   const methods = useForm({
-    resolver: zodResolver(z.intersection(schema, SalesforceSchema), {
-      async: true
-    }),
-    mode: "all",
+    resolver: zodResolver(
+      gen_schema,
+      {
+        async: true
+      },
+      { mode: "async" }
+    ),
+    mode: "onChange",
     reValidateMode: "onChange",
     defaultValues: {
       Cash_Out_Amount__c: format(0),
@@ -233,7 +241,7 @@ const QuickPricer = ({
   const {
     handleSubmit,
     register,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isValidating },
     setValue
   } = methods;
   const submitForm = async (data) => {
@@ -261,612 +269,624 @@ const QuickPricer = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
-          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
-            /* @__PURE__ */ jsx("div", { className: clsx(one_row, section_title({ variant })), children: /* @__PURE__ */ jsx("h4", { className: "header_4", children: "Loan Details" }) }),
-            /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
-              CurrencyInput,
-              {
-                id: "Base_Loan_Amount__c",
-                ...register("Base_Loan_Amount__c", {
-                  required: true
-                }),
-                label: "Loan Amount",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Base_Loan_Amount__c,
-                helperText: errors.Base_Loan_Amount__c?.message,
-                variant,
-                maxfractiondigits: 0,
-                minfractiondigits: 0
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              CurrencyInput,
-              {
-                id: "Appraised_Value__c",
-                ...register("Appraised_Value__c", {
-                  required: true,
-                  deps: ["Base_Loan_Amount__c"]
-                }),
-                label: "Property Value",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Appraised_Value__c,
-                helperText: errors.Appraised_Value__c?.message,
-                variant,
-                maxfractiondigits: 0,
-                minfractiondigits: 0
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-              Dropdown,
-              {
-                id: "Loan_Purpose__c",
-                ...register("Loan_Purpose__c", {
-                  required: true
-                }),
-                label: "Purpose",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Loan_Purpose__c,
-                helperText: errors.Loan_Purpose__c?.message,
-                variant,
-                defaultValue: "",
-                onChange: (event) => {
-                  if (event.target.value === "RefiCashout") {
-                    setRefiCashOut(true);
-                  } else {
-                    setRefiCashOut(false);
-                    setValue("Cash_Out_Amount__c", format(0));
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: form,
+            onSubmit: async (e) => {
+              onValidate && onValidate(e);
+              await handleSubmit(submitForm)(e);
+              e.preventDefault();
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
+                /* @__PURE__ */ jsx("div", { className: clsx(one_row, section_title({ variant })), children: /* @__PURE__ */ jsx("h4", { className: "header_4", children: "Loan Details" }) }),
+                /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
+                  CurrencyInput,
+                  {
+                    id: "Base_Loan_Amount__c",
+                    ...register("Base_Loan_Amount__c", {
+                      required: true
+                    }),
+                    label: "Loan Amount",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Base_Loan_Amount__c,
+                    helperText: errors.Base_Loan_Amount__c?.message,
+                    variant,
+                    maxfractiondigits: 0,
+                    minfractiondigits: 0
                   }
-                },
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select option" }),
-                  Purposes.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-                ]
-              }
-            ) }),
-            refiCashOut && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              CurrencyInput,
-              {
-                id: "Cash_Out_Amount__c",
-                ...register("Cash_Out_Amount__c", {
-                  required: true
-                }),
-                label: "Cash Out",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Cash_Out_Amount__c,
-                helperText: errors.Cash_Out_Amount__c?.message,
-                variant,
-                maxfractiondigits: 0,
-                minfractiondigits: 0
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { className: clsx(one_row, checkbox_group), children: [
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: "Interest_Only__c",
-                  ...register("Interest_Only__c"),
-                  sizes: "medium",
-                  error: !!errors.Interest_Only__c,
-                  helperText: errors.Interest_Only__c?.message,
-                  variant,
-                  value: 1,
-                  children: "Interest Only"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: "Self_Employed__c",
-                  ...register("Self_Employed__c"),
-                  sizes: "medium",
-                  error: !!errors.Self_Employed__c,
-                  helperText: errors.Self_Employed__c?.message,
-                  variant,
-                  value: 1,
-                  children: "Self Employed"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: "Pledged_Assets__c",
-                  ...register("Pledged_Assets__c"),
-                  sizes: "medium",
-                  error: !!errors.Pledged_Assets__c,
-                  helperText: errors.Pledged_Assets__c?.message,
-                  variant,
-                  value: 1,
-                  children: "Pledget Assets"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: "Cross_Collateralization__c",
-                  ...register("Cross_Collateralization__c"),
-                  sizes: "medium",
-                  error: !!errors.Cross_Collateralization__c,
-                  helperText: errors.Cross_Collateralization__c?.message,
-                  variant,
-                  value: 1,
-                  children: "Cross Collateralization"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-              Dropdown,
-              {
-                id: "Representative_FICO__c",
-                ...register("Representative_FICO__c", {
-                  required: true
-                }),
-                label: "FICO",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Representative_FICO__c,
-                helperText: errors.Representative_FICO__c?.message,
-                variant,
-                defaultValue: "default",
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "default", disabled: true, children: "Select option" }),
-                  RepresentativesFico.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "Months_Reserves__c",
-                ...register("Months_Reserves__c", {
-                  required: true,
-                  max: 100,
-                  min: 0
-                }),
-                label: "Months of Reserves",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Months_Reserves__c,
-                helperText: errors.Months_Reserves__c?.message,
-                variant,
-                type: "number",
-                max: 100,
-                min: 0
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-              Dropdown,
-              {
-                id: "Underwriting_Document_Type__c",
-                ...register("Underwriting_Document_Type__c", {
-                  required: true
-                }),
-                label: "Underwriting / Doc Type",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Underwriting_Document_Type__c,
-                helperText: errors.Underwriting_Document_Type__c?.message,
-                variant,
-                defaultValue: "default",
-                onChange: (event) => {
-                  if (event.target.value === "InvestorDscr") {
-                    setDSCR_Ratio(true);
-                  } else {
-                    setDSCR_Ratio(false);
-                    setValue("Debt_To_Income_Ratio__c", 0);
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  CurrencyInput,
+                  {
+                    id: "Appraised_Value__c",
+                    ...register("Appraised_Value__c", {
+                      required: true,
+                      deps: ["Base_Loan_Amount__c"]
+                    }),
+                    label: "Property Value",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Appraised_Value__c,
+                    helperText: errors.Appraised_Value__c?.message,
+                    variant,
+                    maxfractiondigits: 0,
+                    minfractiondigits: 0
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                  Dropdown,
+                  {
+                    id: "Loan_Purpose__c",
+                    ...register("Loan_Purpose__c", {
+                      required: true
+                    }),
+                    label: "Purpose",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Loan_Purpose__c,
+                    helperText: errors.Loan_Purpose__c?.message,
+                    variant,
+                    defaultValue: "",
+                    onChange: (event) => {
+                      if (event.target.value === "RefiCashout") {
+                        setRefiCashOut(true);
+                      } else {
+                        setRefiCashOut(false);
+                        setValue("Cash_Out_Amount__c", format(0));
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select option" }),
+                      Purposes.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
+                    ]
+                  }
+                ) }),
+                refiCashOut && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  CurrencyInput,
+                  {
+                    id: "Cash_Out_Amount__c",
+                    ...register("Cash_Out_Amount__c", {
+                      required: true
+                    }),
+                    label: "Cash Out",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Cash_Out_Amount__c,
+                    helperText: errors.Cash_Out_Amount__c?.message,
+                    variant,
+                    maxfractiondigits: 0,
+                    minfractiondigits: 0
                   }
-                },
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "default", disabled: true, children: "Select option" }),
-                  DocType.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-                ]
-              }
-            ) }),
-            DSCR_Ratio && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "Debt_To_Income_Ratio__c",
-                ...register("Debt_To_Income_Ratio__c", {
-                  required: true
-                }),
-                label: "DSCR Ratio",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Debt_To_Income_Ratio__c,
-                helperText: errors.Debt_To_Income_Ratio__c?.message,
-                variant,
-                type: "number",
-                step: 0.1
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-              Dropdown,
-              {
-                id: "Citizenship__c",
-                ...register("Citizenship__c", {
-                  required: true
-                }),
-                label: "Citizenship",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Citizenship__c,
-                helperText: errors.Citizenship__c?.message,
-                variant,
-                defaultValue: "default",
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "default", disabled: true, children: "Select option" }),
-                  Citizenship.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Dropdown,
-              {
-                id: "Mortgage_Lates_12",
-                ...register("Mortgage_Lates_12", {
-                  required: true
-                }),
-                label: "12 Month Mortgage History",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Mortgage_Lates_12,
-                helperText: errors.Mortgage_Lates_12?.message,
-                variant,
-                defaultValue: "0x30",
-                children: MortgageLates12.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, `${item.value}_12`))
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Dropdown,
-              {
-                id: "Mortgage_Lates_24",
-                ...register("Mortgage_Lates_24", {
-                  required: true
-                }),
-                label: "24 Month Mortgage History",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Mortgage_Lates_24,
-                helperText: errors.Mortgage_Lates_24?.message,
-                variant,
-                defaultValue: "0x30",
-                children: MortgageLates24.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, `${item.value}_24`))
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Dropdown,
-              {
-                id: "HousingEventType__c",
-                ...register("HousingEventType__c", {
-                  required: true
-                }),
-                label: "Housing Event Type",
-                sizes: "medium",
-                required: true,
-                error: !!errors.HousingEventType__c,
-                helperText: errors.HousingEventType__c?.message,
-                variant,
-                onChange: (event) => {
-                  if (event.target.value !== "None") {
-                    setHouseEventHistory(true);
-                  } else {
-                    setHouseEventHistory(false);
-                    setValue("housingEventSeasoning__c", "NotApplicable");
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: clsx(one_row, checkbox_group), children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "Interest_Only__c",
+                      ...register("Interest_Only__c"),
+                      sizes: "medium",
+                      error: !!errors.Interest_Only__c,
+                      helperText: errors.Interest_Only__c?.message,
+                      variant,
+                      value: 1,
+                      children: "Interest Only"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "Self_Employed__c",
+                      ...register("Self_Employed__c"),
+                      sizes: "medium",
+                      error: !!errors.Self_Employed__c,
+                      helperText: errors.Self_Employed__c?.message,
+                      variant,
+                      value: 1,
+                      children: "Self Employed"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "Pledged_Assets__c",
+                      ...register("Pledged_Assets__c"),
+                      sizes: "medium",
+                      error: !!errors.Pledged_Assets__c,
+                      helperText: errors.Pledged_Assets__c?.message,
+                      variant,
+                      value: 1,
+                      children: "Pledged Assets"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "Cross_Collateralization__c",
+                      ...register("Cross_Collateralization__c"),
+                      sizes: "medium",
+                      error: !!errors.Cross_Collateralization__c,
+                      helperText: errors.Cross_Collateralization__c?.message,
+                      variant,
+                      value: 1,
+                      children: "Cross Collateralization"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                  Dropdown,
+                  {
+                    id: "Representative_FICO__c",
+                    ...register("Representative_FICO__c", {
+                      required: true
+                    }),
+                    label: "FICO",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Representative_FICO__c,
+                    helperText: errors.Representative_FICO__c?.message,
+                    variant,
+                    defaultValue: "default",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "default", disabled: true, children: "Select option" }),
+                      RepresentativesFico.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
+                    ]
                   }
-                },
-                defaultValue: "None",
-                children: HousingEventType.map((item) => /* @__PURE__ */ jsx(
-                  "option",
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
                   {
-                    value: item.value,
-                    children: item.text
-                  },
-                  `${item.value}_Housing_Event_Type`
-                ))
-              }
-            ) }),
-            houseEventHistory && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Dropdown,
-              {
-                id: "housingEventSeasoning__c",
-                ...register("housingEventSeasoning__c", {
-                  required: true
-                }),
-                label: "Housing Event History",
-                sizes: "medium",
-                required: true,
-                error: !!errors.housingEventSeasoning__c,
-                helperText: errors.housingEventSeasoning__c?.message,
-                variant,
-                defaultValue: "NotApplicable",
-                children: HousingEventHistory.map((item) => /* @__PURE__ */ jsx(
-                  "option",
+                    id: "Months_Reserves__c",
+                    ...register("Months_Reserves__c", {
+                      required: true,
+                      max: 100,
+                      min: 0
+                    }),
+                    label: "Months of Reserves",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Months_Reserves__c,
+                    helperText: errors.Months_Reserves__c?.message,
+                    variant,
+                    type: "number",
+                    max: 100,
+                    min: 0
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                  Dropdown,
                   {
-                    value: item.value,
-                    children: item.text
-                  },
-                  `${item.value}_Housing_Event_Seasoning`
-                ))
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Dropdown,
-              {
-                id: "bankruptcyType__c",
-                ...register("bankruptcyType__c", {
-                  required: true
-                }),
-                label: "Bankruptcy Type",
-                sizes: "medium",
-                required: true,
-                error: !!errors.bankruptcyType__c,
-                helperText: errors.bankruptcyType__c?.message,
-                variant,
-                defaultValue: "None",
-                onChange: (event) => {
-                  if (event.target.value !== "None") {
-                    setBankruptcySeasoning(true);
-                  } else {
-                    setBankruptcySeasoning(false);
-                    setValue("bankruptcySeasoning__c", "NotApplicable");
+                    id: "Underwriting_Document_Type__c",
+                    ...register("Underwriting_Document_Type__c", {
+                      required: true
+                    }),
+                    label: "Underwriting / Doc Type",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Underwriting_Document_Type__c,
+                    helperText: errors.Underwriting_Document_Type__c?.message,
+                    variant,
+                    defaultValue: "default",
+                    onChange: (event) => {
+                      if (event.target.value === "InvestorDscr") {
+                        setDSCR_Ratio(true);
+                      } else {
+                        setDSCR_Ratio(false);
+                        setValue("Debt_To_Income_Ratio__c", 0);
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "default", disabled: true, children: "Select option" }),
+                      DocType.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
+                    ]
                   }
-                },
-                children: BankruptcyType.map((item) => /* @__PURE__ */ jsx(
-                  "option",
+                ) }),
+                DSCR_Ratio && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
                   {
-                    value: item.value,
-                    children: item.text
-                  },
-                  `${item.value}_Bankruptcy_Type`
-                ))
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "Number_of_Properties_Financed__c",
-                ...register("Number_of_Properties_Financed__c", {
-                  required: true,
-                  max: 100,
-                  min: 0
-                }),
-                label: "# of Properties Financed",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Number_of_Properties_Financed__c,
-                helperText: errors.Number_of_Properties_Financed__c?.message,
-                variant,
-                type: "number",
-                max: 100,
-                min: 0
-              }
-            ) }),
-            bankruptcySeasoning && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Dropdown,
-              {
-                id: "bankruptcySeasoning__c",
-                ...register("bankruptcySeasoning__c", {
-                  required: true
-                }),
-                label: "Bankruptcy Seasoning",
-                sizes: "medium",
-                required: true,
-                error: !!errors.bankruptcySeasoning__c,
-                helperText: errors.bankruptcySeasoning__c?.message,
-                variant,
-                defaultValue: "NotApplicable",
-                children: BankruptcySeasoning.map((item) => /* @__PURE__ */ jsx(
-                  "option",
+                    id: "Debt_To_Income_Ratio__c",
+                    ...register("Debt_To_Income_Ratio__c", {
+                      required: true
+                    }),
+                    label: "DSCR Ratio",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Debt_To_Income_Ratio__c,
+                    helperText: errors.Debt_To_Income_Ratio__c?.message,
+                    variant,
+                    type: "number",
+                    step: 0.1
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                  Dropdown,
                   {
-                    value: item.value,
-                    children: item.text
-                  },
-                  `${item.value}_Bankruptcy_Seasoning`
-                ))
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: clsx(one_row, section_title({ variant })), children: /* @__PURE__ */ jsx("h4", { className: "header_4", children: "Property Information" }) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "Zip__c",
-                ...register("Zip__c", { required: true }),
-                label: "Zip Code",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Zip__c,
-                helperText: errors.Zip__c?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-              Dropdown,
-              {
-                id: "Property_Type__c",
-                ...register("Property_Type__c", {
-                  required: true
-                }),
-                label: "Property Type",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Property_Type__c,
-                helperText: errors.Property_Type__c?.message,
-                variant,
-                defaultValue: "Default",
-                onChange: (event) => {
-                  if (event.target.value === "SingleFamily") {
-                    setNumberOfUnits(true);
-                  } else {
-                    setNumberOfUnits(false);
-                    setValue("Units__c", "OneUnit");
+                    id: "Citizenship__c",
+                    ...register("Citizenship__c", {
+                      required: true
+                    }),
+                    label: "Citizenship",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Citizenship__c,
+                    helperText: errors.Citizenship__c?.message,
+                    variant,
+                    defaultValue: "default",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "default", disabled: true, children: "Select option" }),
+                      Citizenship.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
+                    ]
                   }
-                },
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "Default", disabled: true, children: "Select option" }),
-                  PropertyType.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-              Dropdown,
-              {
-                id: "Occupance__c",
-                ...register("Occupance__c", {
-                  required: true
-                }),
-                label: "Occupancy",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Occupance__c,
-                helperText: errors.Occupance__c?.message,
-                variant,
-                defaultValue: "",
-                onChange: (event) => {
-                  if (event.target.value === "InvestmentProperty") {
-                    setPrepaymentPenalty(true);
-                  } else {
-                    setPrepaymentPenalty(false);
-                    setValue("Prepayment_Penalty__c", "None");
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Dropdown,
+                  {
+                    id: "Mortgage_Lates_12",
+                    ...register("Mortgage_Lates_12", {
+                      required: true
+                    }),
+                    label: "12 Month Mortgage History",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Mortgage_Lates_12,
+                    helperText: errors.Mortgage_Lates_12?.message,
+                    variant,
+                    defaultValue: "0x30",
+                    children: MortgageLates12.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, `${item.value}_12`))
                   }
-                },
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select option" }),
-                  Occupancy.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-                ]
-              }
-            ) }),
-            numberOfUnits && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Dropdown,
-              {
-                id: "Units__c",
-                ...register("Units__c", {
-                  required: true
-                }),
-                label: "# of Units",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Units__c,
-                helperText: errors.Units__c?.message,
-                variant,
-                defaultValue: "OneUnit",
-                children: NumberOfUnits.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-              }
-            ) }),
-            prepaymentPenalty && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Dropdown,
-              {
-                id: "Prepayment_Penalty__c",
-                ...register("Prepayment_Penalty__c", {
-                  required: true
-                }),
-                label: "Prepayment Penalty",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Prepayment_Penalty__c,
-                helperText: errors.Prepayment_Penalty__c?.message,
-                variant,
-                defaultValue: "None",
-                children: PrepaymentPenalty.map((item) => /* @__PURE__ */ jsx(
-                  "option",
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Dropdown,
                   {
-                    value: item.value,
-                    children: item.text
-                  },
-                  `${item.value}_Prepayment_Penalty`
-                ))
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: clsx(one_row, section_title({ variant })), children: /* @__PURE__ */ jsx("h4", { className: "header_4", children: "Broker Information" }) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-              Dropdown,
-              {
-                id: "Broker_Compensation__c",
-                ...register("Broker_Compensation__c", {
-                  required: true
-                }),
-                label: "Broker Compensation",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Broker_Compensation__c,
-                helperText: errors.Broker_Compensation__c?.message,
-                variant,
-                defaultValue: "Default",
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "Default", disabled: true, children: "Select option" }),
-                  BrokerConpensation.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "NMLS__c",
-                ...register("NMLS__c", {
-                  required: true,
-                  min: 4,
-                  max: 15
-                }),
-                label: "Individual NMLS ID",
-                sizes: "medium",
-                required: true,
-                error: !!errors.NMLS__c,
-                helperText: errors.NMLS__c?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "Email_Address__c",
-                ...register("Email_Address__c", {
-                  required: true,
-                  validate: {
-                    isValid: associatedEmail
+                    id: "Mortgage_Lates_24",
+                    ...register("Mortgage_Lates_24", {
+                      required: true
+                    }),
+                    label: "24 Month Mortgage History",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Mortgage_Lates_24,
+                    helperText: errors.Mortgage_Lates_24?.message,
+                    variant,
+                    defaultValue: "0x30",
+                    children: MortgageLates24.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, `${item.value}_24`))
                   }
-                }),
-                label: "Email Address",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Email_Address__c,
-                helperText: errors.Email_Address__c?.message,
-                variant,
-                type: "email"
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              InputPhone,
-              {
-                id: "Cell_Phone__c",
-                ...register("Cell_Phone__c", {
-                  required: true,
-                  maxLength: 12
-                }),
-                label: "Phone",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Cell_Phone__c,
-                helperText: errors.Cell_Phone__c?.message,
-                variant
-              }
-            ) })
-          ] }),
-          children,
-          /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
-          /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              color: getVariant(callToAction?.variant),
-              as: "button",
-              type: "submit",
-              disabled: !isValid,
-              children: callToAction?.displayText
-            }
-          ) })
-        ] })
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Dropdown,
+                  {
+                    id: "HousingEventType__c",
+                    ...register("HousingEventType__c", {
+                      required: true
+                    }),
+                    label: "Housing Event Type",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.HousingEventType__c,
+                    helperText: errors.HousingEventType__c?.message,
+                    variant,
+                    onChange: (event) => {
+                      if (event.target.value !== "None") {
+                        setHouseEventHistory(true);
+                      } else {
+                        setHouseEventHistory(false);
+                        setValue("housingEventSeasoning__c", "NotApplicable");
+                      }
+                    },
+                    defaultValue: "None",
+                    children: HousingEventType.map((item) => /* @__PURE__ */ jsx(
+                      "option",
+                      {
+                        value: item.value,
+                        children: item.text
+                      },
+                      `${item.value}_Housing_Event_Type`
+                    ))
+                  }
+                ) }),
+                houseEventHistory && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Dropdown,
+                  {
+                    id: "housingEventSeasoning__c",
+                    ...register("housingEventSeasoning__c", {
+                      required: true
+                    }),
+                    label: "Housing Event History",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.housingEventSeasoning__c,
+                    helperText: errors.housingEventSeasoning__c?.message,
+                    variant,
+                    defaultValue: "NotApplicable",
+                    children: HousingEventHistory.map((item) => /* @__PURE__ */ jsx(
+                      "option",
+                      {
+                        value: item.value,
+                        children: item.text
+                      },
+                      `${item.value}_Housing_Event_Seasoning`
+                    ))
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Dropdown,
+                  {
+                    id: "bankruptcyType__c",
+                    ...register("bankruptcyType__c", {
+                      required: true
+                    }),
+                    label: "Bankruptcy Type",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.bankruptcyType__c,
+                    helperText: errors.bankruptcyType__c?.message,
+                    variant,
+                    defaultValue: "None",
+                    onChange: (event) => {
+                      if (event.target.value !== "None") {
+                        setBankruptcySeasoning(true);
+                      } else {
+                        setBankruptcySeasoning(false);
+                        setValue("bankruptcySeasoning__c", "NotApplicable");
+                      }
+                    },
+                    children: BankruptcyType.map((item) => /* @__PURE__ */ jsx(
+                      "option",
+                      {
+                        value: item.value,
+                        children: item.text
+                      },
+                      `${item.value}_Bankruptcy_Type`
+                    ))
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "Number_of_Properties_Financed__c",
+                    ...register("Number_of_Properties_Financed__c", {
+                      required: true,
+                      max: 100,
+                      min: 0
+                    }),
+                    label: "# of Properties Financed",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Number_of_Properties_Financed__c,
+                    helperText: errors.Number_of_Properties_Financed__c?.message,
+                    variant,
+                    type: "number",
+                    max: 100,
+                    min: 0
+                  }
+                ) }),
+                bankruptcySeasoning && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Dropdown,
+                  {
+                    id: "bankruptcySeasoning__c",
+                    ...register("bankruptcySeasoning__c", {
+                      required: true
+                    }),
+                    label: "Bankruptcy Seasoning",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.bankruptcySeasoning__c,
+                    helperText: errors.bankruptcySeasoning__c?.message,
+                    variant,
+                    defaultValue: "NotApplicable",
+                    children: BankruptcySeasoning.map((item) => /* @__PURE__ */ jsx(
+                      "option",
+                      {
+                        value: item.value,
+                        children: item.text
+                      },
+                      `${item.value}_Bankruptcy_Seasoning`
+                    ))
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: clsx(one_row, section_title({ variant })), children: /* @__PURE__ */ jsx("h4", { className: "header_4", children: "Property Information" }) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "Zip__c",
+                    ...register("Zip__c", { required: true }),
+                    label: "Zip Code",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Zip__c,
+                    helperText: errors.Zip__c?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                  Dropdown,
+                  {
+                    id: "Property_Type__c",
+                    ...register("Property_Type__c", {
+                      required: true
+                    }),
+                    label: "Property Type",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Property_Type__c,
+                    helperText: errors.Property_Type__c?.message,
+                    variant,
+                    defaultValue: "Default",
+                    onChange: (event) => {
+                      if (event.target.value === "SingleFamily") {
+                        setNumberOfUnits(true);
+                      } else {
+                        setNumberOfUnits(false);
+                        setValue("Units__c", "OneUnit");
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "Default", disabled: true, children: "Select option" }),
+                      PropertyType.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                  Dropdown,
+                  {
+                    id: "Occupance__c",
+                    ...register("Occupance__c", {
+                      required: true
+                    }),
+                    label: "Occupancy",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Occupance__c,
+                    helperText: errors.Occupance__c?.message,
+                    variant,
+                    defaultValue: "",
+                    onChange: (event) => {
+                      if (event.target.value === "InvestmentProperty") {
+                        setPrepaymentPenalty(true);
+                      } else {
+                        setPrepaymentPenalty(false);
+                        setValue("Prepayment_Penalty__c", "None");
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select option" }),
+                      Occupancy.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
+                    ]
+                  }
+                ) }),
+                numberOfUnits && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Dropdown,
+                  {
+                    id: "Units__c",
+                    ...register("Units__c", {
+                      required: true
+                    }),
+                    label: "# of Units",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Units__c,
+                    helperText: errors.Units__c?.message,
+                    variant,
+                    defaultValue: "OneUnit",
+                    children: NumberOfUnits.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
+                  }
+                ) }),
+                prepaymentPenalty && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Dropdown,
+                  {
+                    id: "Prepayment_Penalty__c",
+                    ...register("Prepayment_Penalty__c", {
+                      required: true
+                    }),
+                    label: "Prepayment Penalty",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Prepayment_Penalty__c,
+                    helperText: errors.Prepayment_Penalty__c?.message,
+                    variant,
+                    defaultValue: "None",
+                    children: PrepaymentPenalty.map((item) => /* @__PURE__ */ jsx(
+                      "option",
+                      {
+                        value: item.value,
+                        children: item.text
+                      },
+                      `${item.value}_Prepayment_Penalty`
+                    ))
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: clsx(one_row, section_title({ variant })), children: /* @__PURE__ */ jsx("h4", { className: "header_4", children: "Broker Information" }) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                  Dropdown,
+                  {
+                    id: "Broker_Compensation__c",
+                    ...register("Broker_Compensation__c", {
+                      required: true
+                    }),
+                    label: "Broker Compensation",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Broker_Compensation__c,
+                    helperText: errors.Broker_Compensation__c?.message,
+                    variant,
+                    defaultValue: "Default",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "Default", disabled: true, children: "Select option" }),
+                      BrokerConpensation.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "NMLS__c",
+                    ...register("NMLS__c", {
+                      required: true,
+                      min: 4,
+                      max: 15
+                    }),
+                    label: "Individual NMLS ID",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.NMLS__c,
+                    helperText: errors.NMLS__c?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "Email_Address__c",
+                    ...register("Email_Address__c", {
+                      required: true,
+                      validate: {
+                        isValid: associatedEmail
+                      }
+                    }),
+                    label: "Email Address",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Email_Address__c,
+                    helperText: errors.Email_Address__c?.message,
+                    variant,
+                    type: "email"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  InputPhone,
+                  {
+                    id: "Cell_Phone__c",
+                    ...register("Cell_Phone__c", {
+                      required: true,
+                      maxLength: 12
+                    }),
+                    label: "Phone",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Cell_Phone__c,
+                    helperText: errors.Cell_Phone__c?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(HoneyPot, { register, variant })
+              ] }),
+              children,
+              /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+              /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  color: getVariant(callToAction?.variant),
+                  as: "button",
+                  type: "submit",
+                  disabled: !isValid || isValidating,
+                  children: callToAction?.displayText
+                }
+              ) })
+            ]
+          }
+        )
       ] }) })
     },
     id