@axos-web-dev/shared-components 0.0.147 → 0.0.148

package/dist/Forms/MortgageRate/MortgageRateForm.js

@@ -0,0 +1,735 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import "../../IconBillboard/IconBillboard.css.js";
+import SvgArrowIcon from "../../icons/ArrowIcon/index.js";
+import SvgAxosX from "../../icons/AxosX/index.js";
+import SvgComponent from "../../icons/AxosX/Blue.js";
+import "../../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                                                       */
+/* empty css                                                   */
+import { associatedEmail } from "../../utils/EverestValidity.js";
+import "../../utils/allowedAxosDomains.js";
+import { getVariant } from "../../utils/getVariant.js";
+/* empty css                                             */
+/* empty css                                             */
+import "../../Accordion/Accordion.js";
+import "../../Accordion/Accordion.css.js";
+import "../../AlertBanner/AlertBanner.css.js";
+import "../../Article/Article.css.js";
+import "../../ArticlesSet/ArticlesSet.css.js";
+import clsx from "clsx";
+import { useState, useEffect } from "react";
+import "../../Calculators/calculator.css.js";
+import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
+import { button } from "../../Button/Button.css.js";
+import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
+import "../../Table/Table.css.js";
+import "../../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
+import "../../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import "../../Input/Checkbox.js";
+import "../../Input/CurrencyInput.js";
+import { Dropdown } from "../../Input/Dropdown.js";
+import "../../Input/Dropdown.css.js";
+import { Input } from "../../Input/Input.js";
+import "../../Input/Input.css.js";
+import "../../Input/InputAmount.js";
+import { InputPhone } from "../../Input/InputPhone.js";
+import "../../Input/InputTextArea.js";
+import { DownPaymentInput } from "../../Input/DownPaymentInput.js";
+import { useForm, FormProvider } from "react-hook-form";
+import * as z from "zod";
+import { modalMobile, formContainer, iconForm, headerContainer, headerForm, form, descriptionField, fullRowSelect, formWrapper, centerSelect, mt2rem, fullRowForm, disclosureForm, actions, formBtns, na_cursor } from "../Forms.css.js";
+import { SalesforceSchema } from "../SalesforceFieldsForm.js";
+import "../../Input/RadioButton.css.js";
+import "../../Input/Checkbox.css.js";
+import { LoadingIndicator } from "../../LoadingIndicator/index.js";
+import "react-use";
+import "../../Input/RadioButton.js";
+import { RateWatchForm } from "./MortgageRateWatch.js";
+import { marketing_tile } from "../../Interstitial/Interstitial-variants.css.js";
+import css from "../../Interstitial/Interstitial.module.js";
+import "iframe-resizer";
+/* empty css                                                                                   */
+import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+/* empty css                                                 */
+/* empty css                                             */
+/* empty css                                                       */
+import "../../Carousel/index.js";
+import "../../Hyperlink/Hyperlink.css.js";
+/* empty css                                                                       */
+import "../../Comparison/Comparison.css.js";
+import "../../HeroBanner/HeroBanner.css.js";
+import "../../HeroBanner/LargeBanner.css.js";
+import "../../HeroBanner/SelectionBanner.css.js";
+import "../../SetContainer/SetContainer.css.js";
+import "../../Tab/Tab.css.js";
+import "../../icons/Star/Star.css.js";
+import "../../ContentBanner/ContentBanner.css.js";
+/* empty css                                                 */
+import "../../ExecutiveBio/ExecutiveBio.css.js";
+import "../../FaqAccordion/index.js";
+import "../../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                            */
+import "../../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                           */
+import "react-wrap-balancer";
+/* empty css                                                 */
+/* empty css                                                         */
+/* empty css                                       */
+import "../../LandingPageHeader/LandingPageHeader.css.js";
+import { chevron_wrapper, chevron } from "../../Chevron/Chevron.css.js";
+/* empty css                                   */
+import "../../Modal/contextApi/store.js";
+/* empty css                                                         */
+/* empty css                                                            */
+/* empty css                                                                 */
+/* empty css                                                                    */
+/* empty css                                                      */
+import "../../NavigationMenu/AxosBank/NavData.js";
+import "next/navigation.js";
+import "next/image.js";
+import "next/link.js";
+/* empty css                                                         */
+/* empty css                                                          */
+import "../../PageNavItem/PageNavItem.css.js";
+import "react-slick";
+/* empty css                                                    */
+/* empty css                                                       */
+/* empty css                                                     */
+import "../../StepItem/StepItem.css.js";
+import "../../StepItemSet/StepItemSet.css.js";
+/* empty css                                           */
+/* empty css                                                     */
+/* empty css                                                   */
+import "next/script.js";
+/* empty css                                           */
+/* empty css                                                 */
+const MortgageRate = ({
+  icon = false,
+  children,
+  onSubmit = (values) => {
+    console.log(values);
+  },
+  disclosure,
+  variant: fullVariant = "primary",
+  validateEmail,
+  id,
+  rateWatchOnSubmit
+}) => {
+  const [loanPurpose, setLoanPurpose] = useState(1);
+  const [rateType, setRateType] = useState("Purchase");
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [hasOpenedModal, setHasOpenedModal] = useState(false);
+  const [hideModal, setHideModal] = useState(false);
+  const [downPaymentPercentage, setDownPaymentPercentage] = useState(10);
+  const [_downPayment, setDownPayment] = useState(0);
+  const [isTypingDownPayment, setIsTypingDownPayment] = useState(false);
+  const [salesPriceVal, setSalesPriceVal] = useState(0);
+  const schema = z.object({
+    firstName: z.string({ message: "First Name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
+      message: "First Name is required."
+    }).trim().min(1, { message: "First Name is required." }),
+    lastName: z.string({ message: "Last Name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
+      message: "Last Name is required."
+    }).trim().min(1, { message: "Last Name is required." }),
+    email: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
+    phone: z.string({ message: "Phone is required." }).regex(/[\d-]{10}/, { message: "Phone is required." }).min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
+      const removeDashes = val.replace(/-/gi, "");
+      if (removeDashes.length !== 10) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Phone must have 10 characters."
+        });
+        return z.NEVER;
+      }
+      return removeDashes;
+    }),
+    propertyType: z.number({ message: "Property Type is required." }).positive({ message: "Property Type is required." }),
+    occupancy: z.number({ message: "Property Usage is required." }).positive({ message: "Property Usage is required." }),
+    salesPrice: z.number({ message: "Purchase Price is required." }).optional().refine((val) => loanPurpose === 1 ? val != null : true, {
+      message: "Sales Price is required for purchase"
+    }).refine(
+      (val) => {
+        if (loanPurpose === 1) {
+          return val != null && val >= 5e4 && val <= 25e6;
+        }
+        return true;
+      },
+      { message: "Value must be between $50,000 and $25,000,000." }
+    ),
+    downPayment: z.number({ message: "Down Payment is required." }).optional().refine((val) => loanPurpose === 1 ? val != null : true, {
+      message: "Down Payment is required."
+    }).refine(
+      (val) => {
+        if (loanPurpose === 1) {
+          return val != null && val >= salesPriceVal * 0.01 && val <= salesPriceVal;
+        }
+        return true;
+      },
+      {
+        message: `Value must be between ${salesPriceVal * 0.01} and ${salesPriceVal}.`
+      }
+    ),
+    creditScore: z.number({ message: "Credit Score is required." }).positive({ message: "Credit Score is required." }),
+    zipCode: z.number({ message: "Zip Code is required." }).positive({ message: "Zip Code is required." }),
+    appraisedValue: z.number({ message: "Home Price is required." }).optional().refine(
+      (val) => {
+        if (loanPurpose === 2 && val == null) {
+          return false;
+        }
+        return true;
+      },
+      { message: "Appraised Value is required for refinance" }
+    ),
+    mortgageBalance: z.number({ message: "Mortgage Balance is required." }).optional().refine(
+      (val) => {
+        if (loanPurpose === 2 && val == null) {
+          return false;
+        }
+        return true;
+      },
+      { message: "Mortgage Balance is required for refinance" }
+    ),
+    cashOut: z.number({ message: "Cash Out is required." }).optional(),
+    loanPurpose: z.number({ message: "Loan Purpose is required." })
+  });
+  const methods = useForm({
+    resolver: zodResolver(schema.merge(SalesforceSchema), {
+      async: true
+    }),
+    mode: "all"
+  });
+  useEffect(() => {
+    if (loanPurpose === 1) {
+      methods.reset();
+      methods.setValue("appraisedValue", 0);
+      methods.setValue("mortgageBalance", 0);
+    } else if (loanPurpose === 2) {
+      methods.reset();
+      methods.setValue("salesPrice", 0);
+      methods.setValue("downPayment", 0);
+    }
+  }, [loanPurpose, methods]);
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isValid, isSubmitting },
+    watch
+  } = methods;
+  const salesPrice = watch("salesPrice");
+  useEffect(() => {
+    setSalesPriceVal(salesPrice);
+  });
+  useEffect(() => {
+    if (salesPrice > 0 && !isTypingDownPayment) {
+      const calculatedDownPayment = Math.round(
+        salesPrice * downPaymentPercentage / 100
+      );
+      if (!isTypingDownPayment) setDownPayment(calculatedDownPayment);
+      methods.setValue("downPayment", calculatedDownPayment);
+    }
+  }, [salesPrice, downPaymentPercentage]);
+  const submitForm = async (data) => {
+    const processData = {
+      ...data
+    };
+    await onSubmit(processData);
+    setHideModal(true);
+  };
+  const variant = getVariant(fullVariant);
+  const toggleModal = () => {
+    if (!hasOpenedModal) {
+      setModalOpen(true);
+      setHasOpenedModal(true);
+    } else {
+      setHideModal(true);
+    }
+  };
+  const rateWatchModal = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${marketing_tile} ${css.overlay} ${css.white_modal} active interstitial`,
+      onClick: toggleModal,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${css.modal} active ${modalMobile}`,
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: css.close_button,
+                onClick: toggleModal,
+                "aria-label": "Close modal",
+                children: "×"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: `${css.modal_content} text_center`, children: [
+              /* @__PURE__ */ jsx("h2", { className: `header_3`, children: "Set Up Rate Watch" }),
+              /* @__PURE__ */ jsx("div", { className: css.body_copy, children: "We have assumed you will use the same criteria you used for your rate search." }),
+              /* @__PURE__ */ jsx(
+                RateWatchForm,
+                {
+                  email: methods.getValues("email"),
+                  lastName: methods.getValues("lastName"),
+                  rateWatchOnSubmit,
+                  toggleModal
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+  const formatCurrency = (value) => {
+    return `$${value.toLocaleString()}`;
+  };
+  const parseCurrency = (value) => {
+    if (typeof value === "string") {
+      const cleanedValue = value?.replace(/[^0-9.-]+/g, "");
+      return cleanedValue ? Number(cleanedValue) : 0;
+    }
+    return value;
+  };
+  return !hideModal && /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id: "MortgageRateQuoteForm",
+      className: clsx(formContainer({ variant })),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+          icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
+          /* @__PURE__ */ jsxs("div", { className: clsx(headerContainer, "text_center"), children: [
+            /* @__PURE__ */ jsxs("h1", { className: clsx("header_1", headerForm({ variant })), children: [
+              "Today’s Mortgage Rates:",
+              " ",
+              /* @__PURE__ */ jsx("span", { id: "dynamic-rate-type", children: rateType })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  form,
+                  descriptionField({ variant }),
+                  "text_center"
+                ),
+                children: "Select Purchase or Refinance to get started"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: form, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${fullRowSelect} ${formWrapper({ variant: "primary" })} ${centerSelect}`,
+              children: /* @__PURE__ */ jsxs(
+                Dropdown,
+                {
+                  id: "loanPurpose",
+                  ...register("loanPurpose", {
+                    required: true,
+                    setValueAs: (value) => Number(value)
+                  }),
+                  label: "Select Loan Type",
+                  sizes: "medium",
+                  required: true,
+                  error: !!errors.loanPurpose,
+                  helperText: errors.loanPurpose?.message,
+                  variant,
+                  defaultValue: "Select Loan Type",
+                  onChange: (e) => {
+                    const selectedValue = Number(e.target.value);
+                    setLoanPurpose(selectedValue);
+                    setRateType(selectedValue === 1 ? "Purchase" : "Refinance");
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "1", children: "Purchase Rates" }),
+                    /* @__PURE__ */ jsx("option", { value: "2", children: "Refinance Rates" })
+                  ]
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: clsx(headerContainer, "text_center"), children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                form,
+                descriptionField({ variant }),
+                "text_center",
+                mt2rem
+              ),
+              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", {
+                      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, "");
+                  }
+                }
+              ) }) }) : 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
+                    }
+                  }),
+                  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__ */ jsx(
+                  "a",
+                  {
+                    id,
+                    className: `${chevron({ variant })} ${!isValid ? na_cursor : ""}`,
+                    onClick: isValid ? handleSubmit(async (data) => {
+                      await onSubmit(data);
+                      toggleModal();
+                    }) : (e) => {
+                      e.preventDefault();
+                    },
+                    children: "Sign Up For Ratewatch"
+                  }
+                ),
+                /* @__PURE__ */ jsx(SvgArrowIcon, { className: "arrow", variant: "tertiary" })
+              ] })
+            ] }) })
+          ] })
+        ] }) }),
+        isModalOpen && rateWatchModal
+      ]
+    },
+    id
+  );
+};
+export {
+  MortgageRate
+};