@axos-web-dev/shared-components 2.0.0-dev.13-stepForm.4 → 2.0.0-dev.14-modal-iFrame

package/dist/Forms/MortgageRate/MortgageRateStep.js

@@ -1,911 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef, useMemo, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { Button, Field, Label, Input, RadioGroup, Radio } from "@headlessui/react";
-import { section, formShell, successWrap, successTitle, successText, disclosure, disclosureTitle, disclosureText, mainTitle, mainDescription, progressWrap, progressRow, progressLabel, progressTrack, progressFill, stepPanel, title, description, actions, secondaryButton, primaryButton, disclosureTextSm, overlayOpacity, inputGrid, inputRowTwo, fieldBlock, fieldLabel, input, errorText, optionalText, radioOption, radioOptionChecked, radioText, autoAdvanceHint, sliderWrap, sliderHeader, sliderValue, slider, helperText, amountPreview, amountPreviewLabel, amountPreviewValue, radioGrid, autoAdvanceStatus, autoAdvanceText, autoAdvanceTrack, autoAdvanceBar } from "./MortgageRateStep.css.js";
-import { fixedLoanTermOptions, armLoanTermOptions, fixedLoanTypeOptions, amortizationTypeOptions, creditScoreOptions, propertyUseOptions, propertyTypeOptions, mortgageTypeOptions } from "./mortgageLeadForm.config.js";
-import { parseCurrencyInput, formatCurrency, formatPhoneInput, formatPercentInput, formatCurrencyInput, calculatePercentAmount, validateZipCode, validateEmail, validatePhone } from "./mortgageLeadForm.utils.js";
-import "../../icons/ArrowIcon/ArrowIcon.css.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/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 { AlertBellIcon } from "../../icons/AlertBell/index.js";
-import { Overlay } from "../../ExecutiveBio/Overlay.js";
-import { overlay } from "../../ExecutiveBio/ExecutiveBio.css.js";
-const AUTO_ADVANCE_DELAY = 1e3;
-const initialValues = {
-  mortgageType: "",
-  propertyType: "",
-  propertyUse: "",
-  creditScore: "",
-  purchasePrice: "",
-  downPaymentPercent: 10,
-  downPaymentAmount: "",
-  estimatedHomeValue: "",
-  currentLoanBalance: "",
-  cashOutAmount: "",
-  zipCode: "",
-  amortizationType: "",
-  fixedLoanType: "",
-  loanTerm: "",
-  desiredRate: "",
-  discountPoints: "",
-  firstName: "",
-  lastName: "",
-  email: "",
-  phoneNumber: ""
-};
-function MortgageRateStep() {
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const [values, setValues] = useState(initialValues);
-  const [errors, setErrors] = useState({});
-  const [submitted, setSubmitted] = useState(false);
-  const [isAutoAdvancing, setIsAutoAdvancing] = useState(false);
-  const [lastInteractedRadioStep, setLastInteractedRadioStep] = useState(null);
-  const [radioSelectionVersion, setRadioSelectionVersion] = useState(0);
-  const autoAdvanceTimeout = useRef(null);
-  const isPurchase = values.mortgageType === "purchase-rates";
-  const isRefinance = values.mortgageType === "refinance-rates";
-  const showFixedLoanTypeStep = values.amortizationType === "fixed";
-  const steps = useMemo(() => {
-    const base = [
-      "mortgageType",
-      "propertyType",
-      "propertyUse",
-      "creditScore",
-      "propertyDetails",
-      "amortizationType"
-    ];
-    if (showFixedLoanTypeStep) {
-      base.push("fixedLoanType");
-    }
-    base.push("loanTerm", "finalDetails", "contact");
-    return base;
-  }, [showFixedLoanTypeStep]);
-  const totalSteps = steps.length;
-  const stepKey = steps[currentStepIndex];
-  const progress = (currentStepIndex + 1) / totalSteps * 100;
-  const purchaseDownPaymentPreview = useMemo(() => {
-    const raw = parseCurrencyInput(values.downPaymentAmount);
-    return formatCurrency(raw);
-  }, [values.downPaymentAmount]);
-  const clearAutoAdvance = () => {
-    if (autoAdvanceTimeout.current) {
-      clearTimeout(autoAdvanceTimeout.current);
-      autoAdvanceTimeout.current = null;
-    }
-    setIsAutoAdvancing(false);
-  };
-  useEffect(() => {
-    return () => clearAutoAdvance();
-  }, []);
-  const updateValue = (key, value) => {
-    setValues((prev) => {
-      const next = { ...prev, [key]: value };
-      if (key === "purchasePrice") {
-        next.downPaymentAmount = calculatePercentAmount(
-          String(value),
-          next.downPaymentPercent
-        );
-      }
-      if (key === "downPaymentPercent") {
-        next.downPaymentAmount = calculatePercentAmount(
-          next.purchasePrice,
-          Number(value)
-        );
-      }
-      if (key === "amortizationType") {
-        next.fixedLoanType = "";
-        next.loanTerm = "";
-      }
-      return next;
-    });
-    setErrors((prev) => {
-      const next = { ...prev };
-      delete next[String(key)];
-      return next;
-    });
-  };
-  const validateStep = (step) => {
-    const nextErrors = {};
-    if (step === "mortgageType" && !values.mortgageType) {
-      nextErrors.mortgageType = "Please select a mortgage type.";
-    }
-    if (step === "propertyType" && !values.propertyType) {
-      nextErrors.propertyType = "Please select a property type.";
-    }
-    if (step === "propertyUse" && !values.propertyUse) {
-      nextErrors.propertyUse = "Please select how the property will be used.";
-    }
-    if (step === "creditScore" && !values.creditScore) {
-      nextErrors.creditScore = "Please select your estimated credit score.";
-    }
-    if (step === "propertyDetails") {
-      if (isPurchase) {
-        if (!values.purchasePrice.trim()) {
-          nextErrors.purchasePrice = "Please enter a purchase price.";
-        }
-        if (!values.zipCode.trim()) {
-          nextErrors.zipCode = "Please enter a ZIP Code.";
-        } else if (!validateZipCode(values.zipCode)) {
-          nextErrors.zipCode = "Please enter a valid 5-digit ZIP Code.";
-        }
-      }
-      if (isRefinance) {
-        if (!values.estimatedHomeValue.trim()) {
-          nextErrors.estimatedHomeValue = "Please enter an estimated home value.";
-        }
-        if (!values.currentLoanBalance.trim()) {
-          nextErrors.currentLoanBalance = "Please enter your current loan balance.";
-        }
-        if (!values.zipCode.trim()) {
-          nextErrors.zipCode = "Please enter a ZIP Code.";
-        } else if (!validateZipCode(values.zipCode)) {
-          nextErrors.zipCode = "Please enter a valid 5-digit ZIP Code.";
-        }
-      }
-    }
-    if (step === "amortizationType" && !values.amortizationType) {
-      nextErrors.amortizationType = "Please select an amortization type.";
-    }
-    if (step === "fixedLoanType" && !values.fixedLoanType) {
-      nextErrors.fixedLoanType = "Please select a loan type.";
-    }
-    if (step === "loanTerm" && !values.loanTerm) {
-      nextErrors.loanTerm = "Please select a desired loan term.";
-    }
-    if (step === "finalDetails") {
-      if (!values.desiredRate.trim()) {
-        nextErrors.desiredRate = "Please enter your desired rate.";
-      }
-    }
-    if (step === "contact") {
-      if (!values.firstName.trim()) {
-        nextErrors.firstName = "Please enter your first name.";
-      }
-      if (!values.lastName.trim()) {
-        nextErrors.lastName = "Please enter your last name.";
-      }
-      if (!values.email.trim()) {
-        nextErrors.email = "Please enter your email address.";
-      } else if (!validateEmail(values.email)) {
-        nextErrors.email = "Please enter a valid email address.";
-      }
-      if (!values.phoneNumber.trim()) {
-        nextErrors.phoneNumber = "Please enter your phone number.";
-      } else if (!validatePhone(values.phoneNumber)) {
-        nextErrors.phoneNumber = "Please enter a valid 10-digit phone number.";
-      }
-    }
-    setErrors(nextErrors);
-    return Object.keys(nextErrors).length === 0;
-  };
-  const goNext = () => {
-    clearAutoAdvance();
-    if (!validateStep(stepKey)) return;
-    if (currentStepIndex === totalSteps - 1) {
-      console.log("Mortgage lead form submitted:", values);
-      setSubmitted(true);
-      return;
-    }
-    setLastInteractedRadioStep(null);
-    setCurrentStepIndex((prev) => prev + 1);
-  };
-  const goBack = () => {
-    clearAutoAdvance();
-    setErrors({});
-    setIsAutoAdvancing(false);
-    setLastInteractedRadioStep(null);
-    setCurrentStepIndex((prev) => Math.max(0, prev - 1));
-  };
-  const getAutoAdvanceValue = () => {
-    switch (stepKey) {
-      case "mortgageType":
-        return values.mortgageType;
-      case "propertyType":
-        return values.propertyType;
-      case "propertyUse":
-        return values.propertyUse;
-      case "creditScore":
-        return values.creditScore;
-      case "amortizationType":
-        return values.amortizationType;
-      case "fixedLoanType":
-        return values.fixedLoanType;
-      case "loanTerm":
-        return values.loanTerm;
-      default:
-        return "";
-    }
-  };
-  const isAutoAdvanceStep = (key) => {
-    return [
-      "mortgageType",
-      "propertyType",
-      "propertyUse",
-      "creditScore",
-      "amortizationType",
-      "fixedLoanType",
-      "loanTerm"
-    ].includes(key);
-  };
-  const registerRadioInteraction = (step) => {
-    setLastInteractedRadioStep(step);
-    setRadioSelectionVersion((prev) => prev + 1);
-  };
-  useEffect(() => {
-    clearAutoAdvance();
-    if (!isAutoAdvanceStep(stepKey)) return;
-    const selectedValue = getAutoAdvanceValue();
-    if (!selectedValue) return;
-    if (lastInteractedRadioStep !== stepKey) return;
-    setIsAutoAdvancing(true);
-    autoAdvanceTimeout.current = setTimeout(() => {
-      if (currentStepIndex === totalSteps - 1) return;
-      setCurrentStepIndex((prev) => prev + 1);
-      setIsAutoAdvancing(false);
-    }, AUTO_ADVANCE_DELAY);
-    return () => clearAutoAdvance();
-  }, [
-    currentStepIndex,
-    totalSteps,
-    stepKey,
-    lastInteractedRadioStep,
-    radioSelectionVersion,
-    values.mortgageType,
-    values.propertyType,
-    values.propertyUse,
-    values.creditScore,
-    values.amortizationType,
-    values.fixedLoanType,
-    values.loanTerm
-  ]);
-  const getStepTitle = () => {
-    switch (stepKey) {
-      case "mortgageType":
-        return "What type of mortgage are you interested in?";
-      case "propertyType":
-        return "What type of property are you interested in financing?";
-      case "propertyUse":
-        return "How do you plan to utilize this property?";
-      case "creditScore":
-        return "What is your estimated credit score?";
-      case "propertyDetails":
-        return "Please share more details about the property.";
-      case "amortizationType":
-        return "What type of amortization do you prefer for the loan?";
-      case "fixedLoanType":
-        return "Which type of loan are you interested in?";
-      case "loanTerm":
-        return "What is your desired loan term?";
-      case "finalDetails":
-        return "Some final details...";
-      case "contact":
-        return "Tell us how we can get in touch with you.";
-      default:
-        return "";
-    }
-  };
-  const getStepDescription = () => {
-    switch (stepKey) {
-      case "mortgageType":
-        return "Select the option that best matches your needs.";
-      case "propertyUse":
-        return "Select how you intend to utilize the property so we can assist you in discovering the most suitable mortgage options available for you.";
-      case "propertyDetails":
-        return "Kindly share these extra details so we can better grasp your mortgage requirements.";
-      case "amortizationType":
-        return "Choosing an amortization type allows us to customize loan options that align with your financial objectives.";
-      case "fixedLoanType":
-        return "Select the loan type that most accurately reflects the mortgage you are looking for.";
-      case "loanTerm":
-        return "Choose the duration for your loan term.";
-      case "finalDetails":
-        return "You're almost done! Just share these last details so we can help you discover the best rates available.";
-      default:
-        return "";
-    }
-  };
-  const renderAutoAdvanceStatus = () => {
-    if (!isAutoAdvancing || !isAutoAdvanceStep(stepKey)) return null;
-    return /* @__PURE__ */ jsxs("div", { className: autoAdvanceStatus, "aria-live": "polite", children: [
-      /* @__PURE__ */ jsx("span", { className: autoAdvanceText, children: "Continuing…" }),
-      /* @__PURE__ */ jsx("div", { className: autoAdvanceTrack, children: /* @__PURE__ */ jsx("div", { className: autoAdvanceBar }) })
-    ] });
-  };
-  const renderStep = () => {
-    switch (stepKey) {
-      case "mortgageType":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.mortgageType,
-              onChange: (value) => {
-                updateValue("mortgageType", value);
-                registerRadioInteraction("mortgageType");
-              },
-              className: radioGrid,
-              children: mortgageTypeOptions.map((option) => {
-                const checked = values.mortgageType === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.mortgageType ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.mortgageType }) : null
-        ] });
-      case "propertyType":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, style: { marginTop: "24px" }, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.propertyType,
-              onChange: (value) => {
-                updateValue("propertyType", value);
-                registerRadioInteraction("propertyType");
-              },
-              className: radioGrid,
-              style: {
-                gridTemplateColumns: "repeat(auto-fit,minmax(258px,1fr))"
-              },
-              children: propertyTypeOptions.map((option) => {
-                const checked = values.propertyType === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.propertyType ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.propertyType }) : null
-        ] });
-      case "propertyUse":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.propertyUse,
-              onChange: (value) => {
-                updateValue("propertyUse", value);
-                registerRadioInteraction("propertyUse");
-              },
-              className: radioGrid,
-              style: {
-                gridTemplateColumns: "repeat(auto-fit,minmax(258px,1fr))"
-              },
-              children: propertyUseOptions.map((option) => {
-                const checked = values.propertyUse === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.propertyUse ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.propertyUse }) : null
-        ] });
-      case "creditScore":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, style: { marginTop: "24px" }, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.creditScore,
-              onChange: (value) => {
-                updateValue("creditScore", value);
-                registerRadioInteraction("creditScore");
-              },
-              className: radioGrid,
-              children: creditScoreOptions.map((option) => {
-                const checked = values.creditScore === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.creditScore ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.creditScore }) : null
-        ] });
-      case "propertyDetails":
-        if (isPurchase) {
-          return /* @__PURE__ */ jsxs("div", { className: inputGrid, children: [
-            /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-              /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Purchase Price" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  className: input,
-                  inputMode: "numeric",
-                  placeholder: "Enter your purchase price",
-                  value: values.purchasePrice ? `$${values.purchasePrice}` : "",
-                  onChange: (e) => updateValue(
-                    "purchasePrice",
-                    formatCurrencyInput(e.target.value)
-                  )
-                }
-              ),
-              errors.purchasePrice ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.purchasePrice }) : null
-            ] }),
-            /* @__PURE__ */ jsxs(Field, { className: sliderWrap, children: [
-              /* @__PURE__ */ jsxs("div", { className: sliderHeader, children: [
-                /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Down Payment" }),
-                /* @__PURE__ */ jsxs("span", { className: sliderValue, children: [
-                  values.downPaymentPercent,
-                  "%"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  className: slider,
-                  type: "range",
-                  min: 0,
-                  max: 100,
-                  step: 1,
-                  value: values.downPaymentPercent,
-                  onChange: (e) => updateValue("downPaymentPercent", Number(e.target.value)),
-                  "aria-label": "Down payment percentage"
-                }
-              ),
-              /* @__PURE__ */ jsx("p", { className: helperText, children: "Move the slider to estimate your down payment amount instantly." }),
-              /* @__PURE__ */ jsxs("div", { className: amountPreview, children: [
-                /* @__PURE__ */ jsx("span", { className: amountPreviewLabel, children: "Estimated down payment amount" }),
-                /* @__PURE__ */ jsx("div", { className: amountPreviewValue, children: purchaseDownPaymentPreview })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-              /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "ZIP Code" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  className: input,
-                  inputMode: "numeric",
-                  placeholder: "Enter ZIP Code",
-                  value: values.zipCode,
-                  onChange: (e) => updateValue(
-                    "zipCode",
-                    e.target.value.replace(/[^\d]/g, "").slice(0, 5)
-                  )
-                }
-              ),
-              errors.zipCode ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.zipCode }) : null
-            ] })
-          ] });
-        }
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: inputGrid,
-            style: {
-              gridTemplateColumns: "repeat(auto-fit,minmax(258px,1fr))"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-                /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Estimated Home Value" }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    className: input,
-                    inputMode: "numeric",
-                    placeholder: "Enter your home value",
-                    value: values.estimatedHomeValue ? `$${values.estimatedHomeValue}` : "",
-                    onChange: (e) => updateValue(
-                      "estimatedHomeValue",
-                      formatCurrencyInput(e.target.value)
-                    )
-                  }
-                ),
-                errors.estimatedHomeValue ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.estimatedHomeValue }) : null
-              ] }),
-              /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-                /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Current Loan Balance" }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    className: input,
-                    inputMode: "numeric",
-                    placeholder: "Enter your loan balance",
-                    value: values.currentLoanBalance ? `$${values.currentLoanBalance}` : "",
-                    onChange: (e) => updateValue(
-                      "currentLoanBalance",
-                      formatCurrencyInput(e.target.value)
-                    )
-                  }
-                ),
-                errors.currentLoanBalance ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.currentLoanBalance }) : null
-              ] }),
-              /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-                /* @__PURE__ */ jsxs(Label, { className: fieldLabel, children: [
-                  "Cash Out Amount",
-                  " ",
-                  /* @__PURE__ */ jsx("span", { className: optionalText, children: "(Optional)" })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    className: input,
-                    inputMode: "numeric",
-                    placeholder: "Enter cash out amount",
-                    value: values.cashOutAmount ? `$${values.cashOutAmount}` : "",
-                    onChange: (e) => updateValue(
-                      "cashOutAmount",
-                      formatCurrencyInput(e.target.value)
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-                /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "ZIP Code" }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    className: input,
-                    inputMode: "numeric",
-                    placeholder: "Enter ZIP Code",
-                    value: values.zipCode,
-                    onChange: (e) => updateValue(
-                      "zipCode",
-                      e.target.value.replace(/[^\d]/g, "").slice(0, 5)
-                    )
-                  }
-                ),
-                errors.zipCode ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.zipCode }) : null
-              ] })
-            ]
-          }
-        );
-      case "amortizationType":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.amortizationType,
-              onChange: (value) => {
-                updateValue("amortizationType", value);
-                registerRadioInteraction("amortizationType");
-              },
-              className: inputRowTwo,
-              children: amortizationTypeOptions.map((option) => {
-                const checked = values.amortizationType === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.amortizationType ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.amortizationType }) : null
-        ] });
-      case "fixedLoanType":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.fixedLoanType,
-              onChange: (value) => {
-                updateValue("fixedLoanType", value);
-                registerRadioInteraction("fixedLoanType");
-              },
-              className: inputRowTwo,
-              children: fixedLoanTypeOptions.map((option) => {
-                const checked = values.fixedLoanType === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.fixedLoanType ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.fixedLoanType }) : null
-        ] });
-      case "loanTerm":
-        const loanTermOptions = values.amortizationType === "fixed" ? fixedLoanTermOptions : armLoanTermOptions;
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.loanTerm,
-              onChange: (value) => {
-                updateValue("loanTerm", value);
-                registerRadioInteraction("loanTerm");
-              },
-              className: inputRowTwo,
-              children: loanTermOptions.map((option) => {
-                const checked = values.loanTerm === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.loanTerm ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.loanTerm }) : null
-        ] });
-      case "finalDetails":
-        return /* @__PURE__ */ jsxs("div", { className: inputGrid, children: [
-          /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-            /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Desired Rate" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                className: input,
-                type: "text",
-                inputMode: "decimal",
-                placeholder: "6.25%",
-                value: values.desiredRate ? `${values.desiredRate}%` : "",
-                onChange: (e) => updateValue("desiredRate", formatPercentInput(e.target.value))
-              }
-            ),
-            errors.desiredRate ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.desiredRate }) : null
-          ] }),
-          /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-            /* @__PURE__ */ jsxs(Label, { className: fieldLabel, children: [
-              "Discount Points",
-              " ",
-              /* @__PURE__ */ jsx("span", { className: optionalText, children: "(Optional)" })
-            ] }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                className: input,
-                type: "text",
-                inputMode: "decimal",
-                placeholder: "1.0",
-                value: values.discountPoints,
-                onChange: (e) => updateValue("discountPoints", e.target.value)
-              }
-            )
-          ] })
-        ] });
-      case "contact":
-        return /* @__PURE__ */ jsxs("div", { className: inputGrid, style: { marginTop: "24px" }, children: [
-          /* @__PURE__ */ jsxs("div", { className: inputRowTwo, children: [
-            /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-              /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "First Name" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  className: input,
-                  type: "text",
-                  placeholder: "Enter your first name",
-                  value: values.firstName,
-                  onChange: (e) => updateValue("firstName", e.target.value)
-                }
-              ),
-              errors.firstName ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.firstName }) : null
-            ] }),
-            /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-              /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Last Name" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  className: input,
-                  type: "text",
-                  placeholder: "Enter your last name",
-                  value: values.lastName,
-                  onChange: (e) => updateValue("lastName", e.target.value)
-                }
-              ),
-              errors.lastName ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.lastName }) : null
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-            /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Email" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                className: input,
-                type: "email",
-                placeholder: "Enter your email",
-                value: values.email,
-                onChange: (e) => updateValue("email", e.target.value)
-              }
-            ),
-            errors.email ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.email }) : null
-          ] }),
-          /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-            /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Phone Number" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                className: input,
-                type: "tel",
-                inputMode: "tel",
-                placeholder: "(XXX) XXX-XXXX",
-                value: values.phoneNumber,
-                onChange: (e) => updateValue("phoneNumber", formatPhoneInput(e.target.value))
-              }
-            ),
-            errors.phoneNumber ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.phoneNumber }) : null
-          ] })
-        ] });
-      default:
-        return null;
-    }
-  };
-  if (submitted) {
-    return /* @__PURE__ */ jsx("section", { className: section, children: /* @__PURE__ */ jsxs("div", { className: formShell, children: [
-      /* @__PURE__ */ jsxs("div", { className: successWrap, children: [
-        /* @__PURE__ */ jsx("h2", { className: successTitle, children: "Thanks for your submission" }),
-        /* @__PURE__ */ jsx("p", { className: successText, children: "Your information has been received. An Axos team member may follow up with next steps based on your inquiry." })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: disclosure, children: [
-        /* @__PURE__ */ jsx("p", { className: disclosureTitle, children: "Important information" }),
-        /* @__PURE__ */ jsx("p", { className: disclosureText, children: "Mortgage products are offered by Axos Bank. All loan applications are subject to credit and property approval. Terms, conditions, and program availability are subject to change without notice. This is not a commitment to lend. Additional disclosures may apply. NMLS #524995." })
-      ] })
-    ] }) });
-  }
-  const isCurrentStepAutoAdvanceStep = isAutoAdvanceStep(stepKey);
-  const continueButtonLabel = isCurrentStepAutoAdvanceStep && isAutoAdvancing ? "Continuing…" : currentStepIndex === totalSteps - 1 ? "Start Watching Rates" : "Continue";
-  const continueButtonDisabled = isCurrentStepAutoAdvanceStep && isAutoAdvancing;
-  return /* @__PURE__ */ jsxs("section", { className: section, children: [
-    stepKey === "mortgageType" && /* @__PURE__ */ jsxs("div", { className: "text_center", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex middle center", style: { gap: "16px" }, children: [
-        /* @__PURE__ */ jsx("h1", { className: mainTitle, children: "Rate Watch" }),
-        /* @__PURE__ */ jsx(AlertBellIcon, {})
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: mainDescription, children: "Receive alerts for a customized rate tailored to your requirements. It only takes a couple of minutes." })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: formShell, children: [
-      /* @__PURE__ */ jsxs("div", { className: progressWrap, children: [
-        /* @__PURE__ */ jsxs("div", { className: progressRow, children: [
-          /* @__PURE__ */ jsxs("span", { className: progressLabel, children: [
-            "Step ",
-            currentStepIndex + 1,
-            " of ",
-            totalSteps
-          ] }),
-          /* @__PURE__ */ jsxs("span", { className: progressLabel, children: [
-            Math.round(progress),
-            "%"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: progressTrack, children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: progressFill,
-            style: { width: `${progress}%` }
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
-        motion.div,
-        {
-          className: stepPanel,
-          initial: { opacity: 0, x: 15 },
-          animate: { opacity: 1, x: 0 },
-          exit: { opacity: 0, x: -15 },
-          transition: { duration: 0.24, ease: "easeOut" },
-          children: [
-            /* @__PURE__ */ jsx("h2", { className: title, children: getStepTitle() }),
-            getStepDescription() ? /* @__PURE__ */ jsx("p", { className: description, children: getStepDescription() }) : null,
-            renderStep(),
-            /* @__PURE__ */ jsxs("div", { className: actions, children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  className: secondaryButton,
-                  onClick: goBack,
-                  disabled: currentStepIndex === 0,
-                  children: "Back"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  className: primaryButton,
-                  onClick: goNext,
-                  disabled: continueButtonDisabled,
-                  children: continueButtonLabel
-                }
-              )
-            ] }),
-            stepKey === "mortgageType" && /* @__PURE__ */ jsxs("div", { className: disclosure, children: [
-              /* @__PURE__ */ jsx("p", { className: disclosureTitle, children: "Important information" }),
-              /* @__PURE__ */ jsx("p", { className: disclosureText, children: "By continuing, you agree to provide information so Axos can better understand your mortgage needs. Mortgage products are subject to underwriting and approval. Rates, terms, and product availability may vary based on credit profile, property type, occupancy, loan amount, and other factors. This form is for informational purposes only and is not a commitment to lend. NMLS #524995." })
-            ] }),
-            stepKey === "contact" && /* @__PURE__ */ jsxs("div", { className: disclosure, children: [
-              /* @__PURE__ */ jsxs(
-                "p",
-                {
-                  className: `${disclosureText} ${disclosureTextSm}`,
-                  children: [
-                    'By clicking "Start Watching Rates", you have agreed to these',
-                    " ",
-                    /* @__PURE__ */ jsx("a", { href: "https://assets.axos.com/o9ov1v03uwqk/6gQNHxCzLuaoCeivQk84N4/14ae33b36f550b3c776d2840be513fb9/SMS-and-MMS-Disclosure-Axos-Bank.pdf", children: "Terms and Conditions" }),
-                    ", and you have agreed to receive automated SMS text messages, calls, and emails for any purpose including but not limited to marketing of products and services by Axos Bank. You understand and agree that such messages may be sent via Automatic Telephone Dialing System and/or artificial or pre-recorded voice, and that such consent is not a condition of receipt of any good or service. Mobile carrier messages and data rates may apply. You may opt out at any time."
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: `${disclosureText} ${disclosureTextSm}`,
-                  style: { marginTop: "8px" },
-                  children: "If you do not wish to receive your rate quote by email or SMS text, please call 888-546-2364 to speak with a mortgage expert to receive a rate quote."
-                }
-              )
-            ] })
-          ]
-        },
-        stepKey
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Overlay,
-      {
-        className: `${overlay} ${overlayOpacity}`,
-        variant: "secondary"
-      }
-    )
-  ] });
-}
-export {
-  MortgageRateStep
-};