@axos-web-dev/shared-components 1.0.99-dev.1 → 1.0.99-dev.3

package/dist/Forms/MortgageRate/MortgageRateForm.js

@@ -44,6 +44,7 @@ import "../../Input/RadioButton.js";
 import { useForm, FormProvider } from "react-hook-form";
 import * as z from "zod";
 import { iconForm, headerForm, form, descriptionField, headerContainer, fullRowSelect, formWrapper, centerSelect, mt2rem, fullRowForm, disclosureForm, actions, formBtns, na_cursor, formContainer } from "../Forms.css.js";
+import { HoneyPot } from "../HoneyPot/index.js";
 import { SalesforceSchema } from "../SalesforceFieldsForm.js";
 import "../../Input/RadioButton.css.js";
 import "../../Input/Checkbox.css.js";
@@ -140,7 +141,8 @@ const MortgageRate = ({
   rateWatchOnSubmit,
   setRateWatchSubmitted,
   hideModalValue,
-  showingTables
+  showingTables,
+  onValidate
 }) => {
   const [loanPurpose, setLoanPurpose] = useState(1);
   const [rateType, setRateType] = useState("Purchase");
@@ -407,361 +409,380 @@ const MortgageRate = ({
               children: "Tell us about your property and loan to personalize your rate."
             }
           ) }),
-          /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
-            /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-                Dropdown,
-                {
-                  id: "propertyType",
-                  ...register("propertyType", {
-                    required: true,
-                    setValueAs: (value) => Number(value)
-                  }),
-                  label: "Property Type",
-                  sizes: "medium",
-                  required: true,
-                  error: !!errors.propertyType,
-                  helperText: errors.propertyType?.message,
-                  variant,
-                  defaultValue: "Select option",
-                  children: [
-                    /* @__PURE__ */ jsx("option", { disabled: true, value: "Select option", children: "Select Option" }),
-                    /* @__PURE__ */ jsx("option", { value: "1", children: "Single Family Home" }),
-                    /* @__PURE__ */ jsx("option", { value: "3", children: "Condo" }),
-                    /* @__PURE__ */ jsx("option", { value: "5", children: "Hi-Rise Condo" }),
-                    /* @__PURE__ */ jsx("option", { value: "2", children: "Co-op" }),
-                    /* @__PURE__ */ jsx("option", { value: "4", children: "2-4 Unit" }),
-                    /* @__PURE__ */ jsx("option", { value: "6", children: "Manufactured" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-                Dropdown,
-                {
-                  id: "occupancy",
-                  ...register("occupancy", {
-                    required: true,
-                    setValueAs: (value) => Number(value)
-                  }),
-                  label: "Property Usage",
-                  sizes: "medium",
-                  required: true,
-                  error: !!errors.occupancy,
-                  helperText: errors.occupancy?.message,
-                  variant,
-                  defaultValue: "Select option",
-                  children: [
-                    /* @__PURE__ */ jsx("option", { disabled: true, value: "Select option", children: "Select Option" }),
-                    /* @__PURE__ */ jsx("option", { value: "1", children: "Primary Residence" }),
-                    /* @__PURE__ */ jsx("option", { value: "2", children: "Vacation Home" }),
-                    /* @__PURE__ */ jsx("option", { value: "3", children: "Investment" })
-                  ]
-                }
-              ) }),
-              loanPurpose === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    id: "salesPrice",
-                    type: "text",
-                    ...register("salesPrice", {
+          /* @__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", { children: /* @__PURE__ */ jsxs(
+                    Dropdown,
+                    {
+                      id: "propertyType",
+                      ...register("propertyType", {
+                        required: true,
+                        setValueAs: (value) => Number(value)
+                      }),
+                      label: "Property Type",
+                      sizes: "medium",
                       required: true,
-                      setValueAs: (value) => parseCurrency(value)
-                    }),
-                    label: "Purchase Price",
-                    sizes: "medium",
-                    required: true,
-                    error: !!errors.salesPrice,
-                    helperText: errors.salesPrice?.message,
-                    variant,
-                    onBlur: (e) => {
-                      setIsTypingDownPayment(false);
-                      const rawValue = e.target.value;
-                      const parsedValue = parseCurrency(rawValue);
-                      if (parsedValue === 0) {
-                        methods.setError("salesPrice", {
-                          type: "manual",
-                          message: "Purchase Price is required."
-                        });
-                      } else {
-                        methods.setValue("salesPrice", parsedValue);
+                      error: !!errors.propertyType,
+                      helperText: errors.propertyType?.message,
+                      variant,
+                      defaultValue: "Select option",
+                      children: [
+                        /* @__PURE__ */ jsx("option", { disabled: true, value: "Select option", children: "Select Option" }),
+                        /* @__PURE__ */ jsx("option", { value: "1", children: "Single Family Home" }),
+                        /* @__PURE__ */ jsx("option", { value: "3", children: "Condo" }),
+                        /* @__PURE__ */ jsx("option", { value: "5", children: "Hi-Rise Condo" }),
+                        /* @__PURE__ */ jsx("option", { value: "2", children: "Co-op" }),
+                        /* @__PURE__ */ jsx("option", { value: "4", children: "2-4 Unit" }),
+                        /* @__PURE__ */ jsx("option", { value: "6", children: "Manufactured" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                    Dropdown,
+                    {
+                      id: "occupancy",
+                      ...register("occupancy", {
+                        required: true,
+                        setValueAs: (value) => Number(value)
+                      }),
+                      label: "Property Usage",
+                      sizes: "medium",
+                      required: true,
+                      error: !!errors.occupancy,
+                      helperText: errors.occupancy?.message,
+                      variant,
+                      defaultValue: "Select option",
+                      children: [
+                        /* @__PURE__ */ jsx("option", { disabled: true, value: "Select option", children: "Select Option" }),
+                        /* @__PURE__ */ jsx("option", { value: "1", children: "Primary Residence" }),
+                        /* @__PURE__ */ jsx("option", { value: "2", children: "Vacation Home" }),
+                        /* @__PURE__ */ jsx("option", { value: "3", children: "Investment" })
+                      ]
+                    }
+                  ) }),
+                  loanPurpose === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: "salesPrice",
+                        type: "text",
+                        ...register("salesPrice", {
+                          required: true,
+                          setValueAs: (value) => parseCurrency(value)
+                        }),
+                        label: "Purchase Price",
+                        sizes: "medium",
+                        required: true,
+                        error: !!errors.salesPrice,
+                        helperText: errors.salesPrice?.message,
+                        variant,
+                        onBlur: (e) => {
+                          setIsTypingDownPayment(false);
+                          const rawValue = e.target.value;
+                          const parsedValue = parseCurrency(rawValue);
+                          if (parsedValue === 0) {
+                            methods.setError("salesPrice", {
+                              type: "manual",
+                              message: "Purchase Price is required."
+                            });
+                          } else {
+                            methods.setValue("salesPrice", parsedValue);
+                            e.target.value = formatCurrency(parsedValue);
+                          }
+                          methods.trigger("downPayment");
+                        },
+                        onFocus: (e) => {
+                          const currentValue = e.target.value;
+                          e.target.value = currentValue.replace(/[$,]/g, "");
+                        }
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                      DownPaymentInput,
+                      {
+                        id: "downPayment",
+                        type: "text",
+                        ...register("downPayment", {
+                          required: true,
+                          setValueAs: (value) => parseCurrency(value)
+                        }),
+                        salesPrice: watch("salesPrice"),
+                        downPaymentPercentage,
+                        setDownPaymentPercentage,
+                        label: "Down Payment",
+                        sizes: "medium",
+                        error: !!errors.downPayment,
+                        helperText: errors.downPayment?.message,
+                        onChange: (e) => {
+                          const value = parseCurrency(e.target.value);
+                          methods.setValue("downPayment", value);
+                        },
+                        variant,
+                        isTypingDownPayment,
+                        setIsTypingDownPayment,
+                        methods
+                      }
+                    ) })
+                  ] }),
+                  loanPurpose === 2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: "appraisedValue",
+                        type: "text",
+                        ...register("appraisedValue", {
+                          required: true,
+                          setValueAs: (value) => parseCurrency(value)
+                        }),
+                        label: "Home Value",
+                        sizes: "medium",
+                        required: true,
+                        error: !!errors.appraisedValue,
+                        helperText: errors.appraisedValue?.message,
+                        variant,
+                        onBlur: (e) => {
+                          const rawValue = e.target.value;
+                          const parsedValue = parseCurrency(rawValue);
+                          methods.setValue("appraisedValue", parsedValue);
+                          e.target.value = formatCurrency(parsedValue);
+                        },
+                        onFocus: (e) => {
+                          const currentValue = e.target.value;
+                          e.target.value = currentValue.replace(/[$,]/g, "");
+                        }
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: "mortgageBalance",
+                        type: "text",
+                        ...register("mortgageBalance", {
+                          required: true,
+                          setValueAs: (value) => parseCurrency(value)
+                        }),
+                        label: "Mortgage Balance",
+                        sizes: "medium",
+                        required: true,
+                        error: !!errors.mortgageBalance,
+                        helperText: errors.mortgageBalance?.message,
+                        variant,
+                        onBlur: (e) => {
+                          const rawValue = e.target.value;
+                          const parsedValue = parseCurrency(rawValue);
+                          methods.setValue("mortgageBalance", parsedValue);
+                          e.target.value = formatCurrency(parsedValue);
+                        },
+                        onFocus: (e) => {
+                          const currentValue = e.target.value;
+                          e.target.value = currentValue.replace(/[$,]/g, "");
+                        }
+                      }
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                    Dropdown,
+                    {
+                      id: "creditScore",
+                      ...register("creditScore", {
+                        required: true,
+                        setValueAs: (value) => value === "" ? void 0 : Number(value)
+                      }),
+                      label: "Credit Score",
+                      sizes: "medium",
+                      required: true,
+                      error: !!errors.creditScore,
+                      helperText: errors.creditScore?.message,
+                      variant,
+                      defaultValue: "Select option",
+                      children: [
+                        /* @__PURE__ */ jsx("option", { disabled: true, value: "Select option", children: "Select Option" }),
+                        /* @__PURE__ */ jsx("option", { value: "740", children: "740+" }),
+                        /* @__PURE__ */ jsx("option", { value: "720", children: "739-720" }),
+                        /* @__PURE__ */ jsx("option", { value: "700", children: "719-700" }),
+                        /* @__PURE__ */ jsx("option", { value: "680", children: "699-680" }),
+                        /* @__PURE__ */ jsx("option", { value: "660", children: "679-660" }),
+                        /* @__PURE__ */ jsx("option", { value: "640", children: "659-640" }),
+                        /* @__PURE__ */ jsx("option", { value: "620", children: "639-620" }),
+                        /* @__PURE__ */ jsx("option", { value: "600", children: "Below 620" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "zipCode",
+                      type: "number",
+                      ...register("zipCode", {
+                        required: true,
+                        setValueAs: (value) => Number(value)
+                      }),
+                      label: "Zip Code",
+                      sizes: "medium",
+                      required: true,
+                      error: !!errors.zipCode,
+                      helperText: errors.zipCode?.message,
+                      variant
+                    }
+                  ) }),
+                  loanPurpose === 2 ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "cashOut",
+                      type: "text",
+                      ...register("cashOut", {
+                        required: true,
+                        setValueAs: (value) => parseCurrency(value)
+                      }),
+                      label: "Cash Out (Optional)",
+                      sizes: "medium",
+                      error: !!errors.cashOut,
+                      helperText: errors.cashOut?.message,
+                      variant,
+                      onBlur: (e) => {
+                        const rawValue = e.target.value;
+                        const parsedValue = parseCurrency(rawValue);
+                        methods.setValue("cashOut", parsedValue);
                         e.target.value = formatCurrency(parsedValue);
+                      },
+                      onFocus: (e) => {
+                        const currentValue = e.target.value;
+                        e.target.value = currentValue.replace(/[$,]/g, "");
                       }
-                      methods.trigger("downPayment");
-                    },
-                    onFocus: (e) => {
-                      const currentValue = e.target.value;
-                      e.target.value = currentValue.replace(/[$,]/g, "");
                     }
-                  }
-                ) }),
-                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                  DownPaymentInput,
-                  {
-                    id: "downPayment",
-                    type: "text",
-                    ...register("downPayment", {
+                  ) }) }) : null,
+                  /* @__PURE__ */ jsx("div", { className: clsx(fullRowForm, "text_center"), children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: clsx(
+                        descriptionField({ variant }),
+                        "text_center"
+                      ),
+                      children: "Almost there! Please provide your contact information to view rates and sign up for Rate Watch."
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "firstName",
+                      ...register("firstName", {
+                        required: "First Name is required"
+                      }),
+                      label: "First Name",
+                      sizes: "medium",
                       required: true,
-                      setValueAs: (value) => parseCurrency(value)
-                    }),
-                    salesPrice: watch("salesPrice"),
-                    downPaymentPercentage,
-                    setDownPaymentPercentage,
-                    label: "Down Payment",
-                    sizes: "medium",
-                    error: !!errors.downPayment,
-                    helperText: errors.downPayment?.message,
-                    onChange: (e) => {
-                      const value = parseCurrency(e.target.value);
-                      methods.setValue("downPayment", value);
-                    },
-                    variant,
-                    isTypingDownPayment,
-                    setIsTypingDownPayment,
-                    methods
-                  }
-                ) })
-              ] }),
-              loanPurpose === 2 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    id: "appraisedValue",
-                    type: "text",
-                    ...register("appraisedValue", {
+                      error: !!errors.firstName,
+                      helperText: errors.firstName?.message,
+                      variant
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "lastName",
+                      ...register("lastName", { required: true }),
+                      label: "Last Name",
+                      sizes: "medium",
                       required: true,
-                      setValueAs: (value) => parseCurrency(value)
-                    }),
-                    label: "Home Value",
-                    sizes: "medium",
-                    required: true,
-                    error: !!errors.appraisedValue,
-                    helperText: errors.appraisedValue?.message,
-                    variant,
-                    onBlur: (e) => {
-                      const rawValue = e.target.value;
-                      const parsedValue = parseCurrency(rawValue);
-                      methods.setValue("appraisedValue", parsedValue);
-                      e.target.value = formatCurrency(parsedValue);
-                    },
-                    onFocus: (e) => {
-                      const currentValue = e.target.value;
-                      e.target.value = currentValue.replace(/[$,]/g, "");
+                      error: !!errors.lastName,
+                      helperText: errors.lastName?.message,
+                      variant
                     }
-                  }
-                ) }),
-                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    id: "mortgageBalance",
-                    type: "text",
-                    ...register("mortgageBalance", {
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "email",
+                      ...register("email", {
+                        required: true,
+                        validate: {
+                          isValid: associatedEmail
+                        }
+                      }),
+                      label: "Email",
+                      sizes: "medium",
                       required: true,
-                      setValueAs: (value) => parseCurrency(value)
-                    }),
-                    label: "Mortgage Balance",
-                    sizes: "medium",
-                    required: true,
-                    error: !!errors.mortgageBalance,
-                    helperText: errors.mortgageBalance?.message,
-                    variant,
-                    onBlur: (e) => {
-                      const rawValue = e.target.value;
-                      const parsedValue = parseCurrency(rawValue);
-                      methods.setValue("mortgageBalance", parsedValue);
-                      e.target.value = formatCurrency(parsedValue);
-                    },
-                    onFocus: (e) => {
-                      const currentValue = e.target.value;
-                      e.target.value = currentValue.replace(/[$,]/g, "");
+                      error: !!errors.email,
+                      helperText: errors.email?.message,
+                      variant
                     }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    InputPhone,
+                    {
+                      id: "phone",
+                      ...register("phone", { required: true, maxLength: 12 }),
+                      label: "Phone Number",
+                      sizes: "medium",
+                      required: true,
+                      error: !!errors.phone,
+                      helperText: errors.phone?.message,
+                      variant
+                    }
+                  ) })
+                ] }),
+                children,
+                /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+                /* @__PURE__ */ jsx("div", { className: actions, children: isSubmitting ? /* @__PURE__ */ jsx(
+                  LoadingIndicator,
+                  {
+                    style: { marginInline: "auto" },
+                    variant
                   }
-                ) })
-              ] }),
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-                Dropdown,
-                {
-                  id: "creditScore",
-                  ...register("creditScore", {
-                    required: true,
-                    setValueAs: (value) => value === "" ? void 0 : Number(value)
-                  }),
-                  label: "Credit Score",
-                  sizes: "medium",
-                  required: true,
-                  error: !!errors.creditScore,
-                  helperText: errors.creditScore?.message,
-                  variant,
-                  defaultValue: "Select option",
-                  children: [
-                    /* @__PURE__ */ jsx("option", { disabled: true, value: "Select option", children: "Select Option" }),
-                    /* @__PURE__ */ jsx("option", { value: "740", children: "740+" }),
-                    /* @__PURE__ */ jsx("option", { value: "720", children: "739-720" }),
-                    /* @__PURE__ */ jsx("option", { value: "700", children: "719-700" }),
-                    /* @__PURE__ */ jsx("option", { value: "680", children: "699-680" }),
-                    /* @__PURE__ */ jsx("option", { value: "660", children: "679-660" }),
-                    /* @__PURE__ */ jsx("option", { value: "640", children: "659-640" }),
-                    /* @__PURE__ */ jsx("option", { value: "620", children: "639-620" }),
-                    /* @__PURE__ */ jsx("option", { value: "600", children: "Below 620" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  id: "zipCode",
-                  type: "number",
-                  ...register("zipCode", {
-                    required: true,
-                    setValueAs: (value) => Number(value)
-                  }),
-                  label: "Zip Code",
-                  sizes: "medium",
-                  required: true,
-                  error: !!errors.zipCode,
-                  helperText: errors.zipCode?.message,
-                  variant
-                }
-              ) }),
-              loanPurpose === 2 ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  id: "cashOut",
-                  type: "text",
-                  ...register("cashOut", {
-                    required: true,
-                    setValueAs: (value) => parseCurrency(value)
-                  }),
-                  label: "Cash Out (Optional)",
-                  sizes: "medium",
-                  error: !!errors.cashOut,
-                  helperText: errors.cashOut?.message,
-                  variant,
-                  onBlur: (e) => {
-                    const rawValue = e.target.value;
-                    const parsedValue = parseCurrency(rawValue);
-                    methods.setValue("cashOut", parsedValue);
-                    e.target.value = formatCurrency(parsedValue);
-                  },
-                  onFocus: (e) => {
-                    const currentValue = e.target.value;
-                    e.target.value = currentValue.replace(/[$,]/g, "");
-                  }
-                }
-              ) }) }) : null,
-              /* @__PURE__ */ jsx("div", { className: clsx(fullRowForm, "text_center"), children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: clsx(
-                    descriptionField({ variant }),
-                    "text_center"
-                  ),
-                  children: "Almost there! Please provide your contact information to view rates and sign up for Rate Watch."
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  id: "firstName",
-                  ...register("firstName", {
-                    required: "First Name is required"
-                  }),
-                  label: "First Name",
-                  sizes: "medium",
-                  required: true,
-                  error: !!errors.firstName,
-                  helperText: errors.firstName?.message,
-                  variant
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  id: "lastName",
-                  ...register("lastName", { required: true }),
-                  label: "Last Name",
-                  sizes: "medium",
-                  required: true,
-                  error: !!errors.lastName,
-                  helperText: errors.lastName?.message,
-                  variant
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  id: "email",
-                  ...register("email", {
-                    required: true,
-                    validate: {
-                      isValid: associatedEmail
+                ) : /* @__PURE__ */ jsxs("div", { className: formBtns, children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "submit",
+                      disabled: !isValid,
+                      className: button({
+                        color: "secondary",
+                        size: "large",
+                        rounded: "medium",
+                        disabled: !isValid
+                      }),
+                      children: "Get My Rate"
                     }
-                  }),
-                  label: "Email",
-                  sizes: "medium",
-                  required: true,
-                  error: !!errors.email,
-                  helperText: errors.email?.message,
-                  variant
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                InputPhone,
-                {
-                  id: "phone",
-                  ...register("phone", { required: true, maxLength: 12 }),
-                  label: "Phone Number",
-                  sizes: "medium",
-                  required: true,
-                  error: !!errors.phone,
-                  helperText: errors.phone?.message,
-                  variant
-                }
-              ) })
-            ] }),
-            children,
-            /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
-            /* @__PURE__ */ jsx("div", { className: actions, children: isSubmitting ? /* @__PURE__ */ jsx(
-              LoadingIndicator,
-              {
-                style: { marginInline: "auto" },
-                variant
-              }
-            ) : /* @__PURE__ */ jsxs("div", { className: formBtns, children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "submit",
-                  disabled: !isValid,
-                  className: button({
-                    color: "secondary",
-                    size: "large",
-                    rounded: "medium",
-                    disabled: !isValid
-                  }),
-                  children: "Get My Rate"
-                }
-              ),
-              /* @__PURE__ */ jsxs("span", { className: `sc__btn ${chevron_wrapper}`, children: [
+                  ),
+                  /* @__PURE__ */ jsxs("span", { className: `sc__btn ${chevron_wrapper}`, children: [
+                    /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        id,
+                        className: `${chevron({ variant })} ${!isValid ? na_cursor : ""}`,
+                        onClick: isValid ? handleSubmit(async (data) => {
+                          await onSubmit(data);
+                          toggleModal();
+                          setHideModal(false);
+                        }) : (e) => {
+                          e.preventDefault();
+                        },
+                        children: "Sign Up For Ratewatch"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(SvgArrowIcon, { className: "arrow", variant: "tertiary" })
+                  ] })
+                ] }) }),
                 /* @__PURE__ */ jsx(
-                  "a",
+                  HoneyPot,
                   {
-                    id,
-                    className: `${chevron({ variant })} ${!isValid ? na_cursor : ""}`,
-                    onClick: isValid ? handleSubmit(async (data) => {
-                      await onSubmit(data);
-                      toggleModal();
-                      setHideModal(false);
-                    }) : (e) => {
-                      e.preventDefault();
-                    },
-                    children: "Sign Up For Ratewatch"
+                    register,
+                    errors,
+                    variant
                   }
-                ),
-                /* @__PURE__ */ jsx(SvgArrowIcon, { className: "arrow", variant: "tertiary" })
-              ] })
-            ] }) })
-          ] })
+                )
+              ]
+            }
+          )
         ] }) })
       },
       id