@axos-web-dev/shared-components 2.0.0-dev.13-stepForm.3 → 2.0.0-dev.13-stepForm.5

package/dist/Forms/MortgageRate/MortgageRateStep.js

@@ -1,17 +1,27 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } 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, 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 { Button, Field, Label, Input, Listbox, ListboxButton, ListboxOptions, ListboxOption, Fieldset, Legend, 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, fieldBlock, fieldLabel, input, errorText, selectWrap, selectButton, selectButtonPlaceholder, selectChevron, selectOptions, selectOption, autoAdvanceHint, fieldSet, subStepLabel, inputRowTwo, radioOption, radioOptionChecked, radioText, conditionalField, conditionalFieldWrap, selectLabel, sliderWrap, sliderHeader, sliderValue, slider, helperText, amountPreview, amountPreviewLabel, amountPreviewValue, optionalText, radioGrid, autoAdvanceStatus, autoAdvanceText, autoAdvanceTrack, autoAdvanceBar } from "./MortgageRateStep.css.js";
+import { updateFrequencyOptions, fixedLoanTermOptions, armLoanTermOptions, amortizationTypeOptions, creditScoreOptions, propertyTypeOptions, unitCountOptions, propertyUseOptions, mortgageTypeOptions } from "./mortgageLeadForm.config.js";
+import { parseCurrencyInput, formatCurrency, formatPercentInput, formatCurrencyInput, formatPhoneInput, calculatePercentAmount, validateEmail, validatePhone, validateZipCode } 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 = 1200;
+const AUTO_ADVANCE_DELAY = 1e3;
 const initialValues = {
   mortgageType: "",
   propertyType: "",
+  unitCount: "",
   propertyUse: "",
   creditScore: "",
   purchasePrice: "",
@@ -22,14 +32,15 @@ const initialValues = {
   cashOutAmount: "",
   zipCode: "",
   amortizationType: "",
-  fixedLoanType: "",
+  fixedLoanType: "conforming",
   loanTerm: "",
   desiredRate: "",
-  discountPoints: "",
+  discountPoints: "0",
   firstName: "",
   lastName: "",
   email: "",
-  phoneNumber: ""
+  phoneNumber: "",
+  updateFrequency: ""
 };
 function MortgageRateStep() {
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
@@ -42,22 +53,18 @@ function MortgageRateStep() {
   const autoAdvanceTimeout = useRef(null);
   const isPurchase = values.mortgageType === "purchase-rates";
   const isRefinance = values.mortgageType === "refinance-rates";
-  const showFixedLoanTypeStep = values.amortizationType === "fixed";
+  const isMultiUnit = values.propertyType === "2-4-unit";
   const steps = useMemo(() => {
-    const base = [
+    return [
+      "contact",
       "mortgageType",
-      "propertyType",
-      "propertyUse",
+      "propertyTypeUse",
       "creditScore",
       "propertyDetails",
-      "amortizationType"
+      "amortizationLoanTerm",
+      "finalDetails"
     ];
-    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;
@@ -90,8 +97,18 @@ function MortgageRateStep() {
           Number(value)
         );
       }
+      if (key === "mortgageType") {
+        next.purchasePrice = "";
+        next.downPaymentAmount = "";
+        next.downPaymentPercent = 10;
+        next.estimatedHomeValue = "";
+        next.currentLoanBalance = "";
+        next.cashOutAmount = "";
+      }
+      if (key === "propertyType" && value !== "2-4-unit") {
+        next.unitCount = "";
+      }
       if (key === "amortizationType") {
-        next.fixedLoanType = "";
         next.loanTerm = "";
       }
       return next;
@@ -104,14 +121,37 @@ function MortgageRateStep() {
   };
   const validateStep = (step) => {
     const nextErrors = {};
+    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.";
+      }
+    }
     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 === "propertyTypeUse") {
+      if (!values.propertyType) {
+        nextErrors.propertyType = "Please select a property type.";
+      }
+      if (values.propertyType === "2-4-unit" && !values.unitCount) {
+        nextErrors.unitCount = "Please select the number of units.";
+      }
+      if (!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.";
@@ -141,36 +181,22 @@ function MortgageRateStep() {
         }
       }
     }
-    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 === "amortizationLoanTerm") {
+      if (!values.amortizationType) {
+        nextErrors.amortizationType = "Please select an amortization type.";
+      }
+      if (!values.loanTerm) {
+        nextErrors.loanTerm = "Please select a desired loan term.";
+      }
     }
     if (step === "finalDetails") {
       if (!values.desiredRate.trim()) {
         nextErrors.desiredRate = "Please enter your desired rate.";
+      } else if (Number(values.desiredRate) < 2 || Number(values.desiredRate) > 10) {
+        nextErrors.desiredRate = "Please enter a rate between 2% and 10%.";
       }
-    }
-    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.";
+      if (!values.updateFrequency) {
+        nextErrors.updateFrequency = "Please select how often you'd like to receive rate updates.";
       }
     }
     setErrors(nextErrors);
@@ -194,37 +220,31 @@ function MortgageRateStep() {
     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",
+      "propertyTypeUse",
       "creditScore",
-      "amortizationType",
-      "fixedLoanType",
-      "loanTerm"
+      "amortizationLoanTerm"
     ].includes(key);
   };
+  const isAutoAdvanceReady = (key) => {
+    switch (key) {
+      case "mortgageType":
+        return !!values.mortgageType;
+      case "propertyTypeUse":
+        if (!values.propertyType || !values.propertyUse) return false;
+        if (values.propertyType === "2-4-unit" && !values.unitCount)
+          return false;
+        return true;
+      case "creditScore":
+        return !!values.creditScore;
+      case "amortizationLoanTerm":
+        return !!values.amortizationType && !!values.loanTerm;
+      default:
+        return false;
+    }
+  };
   const registerRadioInteraction = (step) => {
     setLastInteractedRadioStep(step);
     setRadioSelectionVersion((prev) => prev + 1);
@@ -232,13 +252,16 @@ function MortgageRateStep() {
   useEffect(() => {
     clearAutoAdvance();
     if (!isAutoAdvanceStep(stepKey)) return;
-    const selectedValue = getAutoAdvanceValue();
-    if (!selectedValue) return;
+    if (!isAutoAdvanceReady(stepKey)) return;
     if (lastInteractedRadioStep !== stepKey) return;
     setIsAutoAdvancing(true);
+    const stepAtSchedule = currentStepIndex;
     autoAdvanceTimeout.current = setTimeout(() => {
-      if (currentStepIndex === totalSteps - 1) return;
-      setCurrentStepIndex((prev) => prev + 1);
+      setCurrentStepIndex((prev) => {
+        if (prev !== stepAtSchedule) return prev;
+        if (prev === totalSteps - 1) return prev;
+        return prev + 1;
+      });
       setIsAutoAdvancing(false);
     }, AUTO_ADVANCE_DELAY);
     return () => clearAutoAdvance();
@@ -250,54 +273,46 @@ function MortgageRateStep() {
     radioSelectionVersion,
     values.mortgageType,
     values.propertyType,
+    values.unitCount,
     values.propertyUse,
     values.creditScore,
     values.amortizationType,
-    values.fixedLoanType,
     values.loanTerm
   ]);
   const getStepTitle = () => {
     switch (stepKey) {
+      case "contact":
+        return "Let's start with how we can reach you.";
       case "mortgageType":
         return "What type of mortgage are you interested in?";
-      case "propertyType":
-        return "What kind of property type are you looking to finance?";
-      case "propertyUse":
-        return "How will you use this property?";
+      case "propertyTypeUse":
+        return "Tell us about the property.";
       case "creditScore":
-        return "What's your estimated credit score?";
+        return "What is your estimated credit score?";
       case "propertyDetails":
-        return "Let us know more about the property";
-      case "amortizationType":
-        return "What is your preferred amortization type on the loan?";
-      case "fixedLoanType":
-        return "Which loan type are interested in?";
-      case "loanTerm":
-        return "What is your desired loan term?";
+        return "Please share more details about the property.";
+      case "amortizationLoanTerm":
+        return "Choose your loan structure.";
       case "finalDetails":
         return "Some final details...";
-      case "contact":
-        return "Let us know how we can reach you";
       default:
         return "";
     }
   };
   const getStepDescription = () => {
     switch (stepKey) {
+      case "contact":
+        return "Share your contact details so we can send you personalized rate alerts that match your goals.";
       case "mortgageType":
         return "Select the option that best matches your needs.";
-      case "propertyUse":
-        return "Describe how you plan to use the property to help us find the best mortgage options for you.";
+      case "propertyTypeUse":
+        return "Tell us a bit about the property type and how you plan to use it so we can match you with the most suitable mortgage options.";
       case "propertyDetails":
-        return "Please provide these additional details to better understand your mortgage needs.";
-      case "amortizationType":
-        return "Selecting an amortization type helps us tailor loan options that fit your financial goals and preferences.";
-      case "fixedLoanType":
-        return "Choose the loan type that best describes the mortgage you are seeking.";
-      case "loanTerm":
-        return "Select the length of time (in years) for your loan term.";
+        return "Kindly share these extra details so we can better grasp your mortgage requirements.";
+      case "amortizationLoanTerm":
+        return "Pick the amortization style that fits your goals, then select your preferred loan term.";
       case "finalDetails":
-        return "Almost there! Please provide these final details to help us find the best rates for you.";
+        return "You're almost done! Just share these last details so we can help you discover the best rates available.";
       default:
         return "";
     }
@@ -311,6 +326,105 @@ function MortgageRateStep() {
   };
   const renderStep = () => {
     switch (stepKey) {
+      case "contact":
+        return /* @__PURE__ */ jsxs(Fieldset, { className: `${inputGrid} ${fieldSet}`, children: [
+          /* @__PURE__ */ jsx(Legend, { className: fieldLabel, style: { fontSize: "1rem" }, children: "Contact Information" }),
+          /* @__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),
+                  "aria-describedby": errors.firstName ? "firstName-error" : void 0,
+                  "aria-invalid": !!errors.firstName,
+                  autoComplete: "given-name"
+                }
+              ),
+              errors.firstName ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: "firstName-error",
+                  className: errorText,
+                  role: "alert",
+                  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),
+                  "aria-describedby": errors.lastName ? "lastName-error" : void 0,
+                  "aria-invalid": !!errors.lastName,
+                  autoComplete: "family-name"
+                }
+              ),
+              errors.lastName ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: "lastName-error",
+                  className: errorText,
+                  role: "alert",
+                  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),
+                "aria-describedby": errors.email ? "email-error" : void 0,
+                "aria-invalid": !!errors.email,
+                autoComplete: "email"
+              }
+            ),
+            errors.email ? /* @__PURE__ */ jsx("p", { id: "email-error", className: errorText, role: "alert", 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)),
+                "aria-describedby": errors.phoneNumber ? "phoneNumber-error" : void 0,
+                "aria-invalid": !!errors.phoneNumber,
+                autoComplete: "tel"
+              }
+            ),
+            errors.phoneNumber ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: "phoneNumber-error",
+                className: errorText,
+                role: "alert",
+                children: errors.phoneNumber
+              }
+            ) : null
+          ] })
+        ] });
       case "mortgageType":
         return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
           /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
@@ -339,73 +453,191 @@ function MortgageRateStep() {
           ),
           /* @__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,
+          errors.mortgageType ? /* @__PURE__ */ jsx(
+            "p",
             {
-              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
-                );
-              })
+              id: "mortgageType-error",
+              className: errorText,
+              role: "alert",
+              children: errors.mortgageType
             }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.propertyType ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.propertyType }) : null
+          ) : 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))"
+      case "propertyTypeUse":
+        return /* @__PURE__ */ jsxs(Fieldset, { className: fieldSet, children: [
+          /* @__PURE__ */ jsx(Legend, { className: fieldLabel, style: { fontSize: "1rem" }, children: "Property Details" }),
+          /* @__PURE__ */ jsxs(Field, { className: fieldBlock, style: { marginTop: "16px" }, children: [
+            /* @__PURE__ */ jsx(Label, { className: subStepLabel, children: "What type of property are you financing?" }),
+            /* @__PURE__ */ jsx(
+              RadioGroup,
+              {
+                value: values.propertyType,
+                onChange: (value) => {
+                  updateValue("propertyType", value);
+                  registerRadioInteraction("propertyTypeUse");
+                },
+                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
+                  );
+                })
+              }
+            ),
+            errors.propertyType ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: "propertyType-error",
+                className: errorText,
+                role: "alert",
+                children: errors.propertyType
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isMultiUnit && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, height: 0, y: -8 },
+                animate: { opacity: 1, height: "auto", y: 0 },
+                exit: { opacity: 0, height: 0, y: -8 },
+                transition: { duration: 0.28, ease: "easeOut" },
+                className: conditionalField,
+                children: /* @__PURE__ */ jsxs("div", { className: conditionalFieldWrap, children: [
+                  /* @__PURE__ */ jsxs(
+                    Listbox,
+                    {
+                      value: values.unitCount,
+                      onChange: (value) => {
+                        updateValue("unitCount", value);
+                        registerRadioInteraction("propertyTypeUse");
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Label, { className: selectLabel, children: "How many units?" }),
+                        /* @__PURE__ */ jsxs("div", { className: selectWrap, children: [
+                          /* @__PURE__ */ jsx(
+                            ListboxButton,
+                            {
+                              className: selectButton,
+                              "aria-describedby": errors.unitCount ? "unitCount-error" : void 0,
+                              "aria-invalid": !!errors.unitCount,
+                              children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                                /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: values.unitCount ? "" : selectButtonPlaceholder,
+                                    children: values.unitCount ? unitCountOptions.find(
+                                      (o) => o.value === values.unitCount
+                                    )?.label : "Select number of units"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "svg",
+                                  {
+                                    className: selectChevron,
+                                    "data-open": open,
+                                    viewBox: "0 0 20 20",
+                                    fill: "none",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    "aria-hidden": "true",
+                                    children: /* @__PURE__ */ jsx(
+                                      "path",
+                                      {
+                                        d: "M5 7.5L10 12.5L15 7.5",
+                                        stroke: "currentColor",
+                                        strokeWidth: "2",
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round"
+                                      }
+                                    )
+                                  }
+                                )
+                              ] })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            ListboxOptions,
+                            {
+                              className: selectOptions,
+                              modal: false,
+                              children: unitCountOptions.map((option) => /* @__PURE__ */ jsx(
+                                ListboxOption,
+                                {
+                                  value: option.value,
+                                  className: selectOption,
+                                  children: option.label
+                                },
+                                option.value
+                              ))
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  ),
+                  errors.unitCount ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      id: "unitCount-error",
+                      className: errorText,
+                      role: "alert",
+                      style: { marginTop: "8px" },
+                      children: errors.unitCount
+                    }
+                  ) : null
+                ] })
               },
-              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
+              "unit-count-wrap"
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(Field, { className: fieldBlock, style: { marginTop: "12px" }, children: [
+            /* @__PURE__ */ jsx(Label, { className: subStepLabel, children: "How do you plan to use this property?" }),
+            /* @__PURE__ */ jsx(
+              RadioGroup,
+              {
+                value: values.propertyUse,
+                onChange: (value) => {
+                  updateValue("propertyUse", value);
+                  registerRadioInteraction("propertyTypeUse");
+                },
+                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
+                  );
+                })
+              }
+            ),
+            errors.propertyUse ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: "propertyUse-error",
+                className: errorText,
+                role: "alert",
+                children: errors.propertyUse
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, style: { marginTop: "12px" }, children: "Once all selections are made, you'll continue automatically." }),
+          renderAutoAdvanceStatus()
         ] });
       case "creditScore":
         return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, style: { marginTop: "24px" }, children: [
@@ -435,7 +667,15 @@ function MortgageRateStep() {
           ),
           /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
           renderAutoAdvanceStatus(),
-          errors.creditScore ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.creditScore }) : null
+          errors.creditScore ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: "creditScore-error",
+              className: errorText,
+              role: "alert",
+              children: errors.creditScore
+            }
+          ) : null
         ] });
       case "propertyDetails":
         if (isPurchase) {
@@ -452,10 +692,20 @@ function MortgageRateStep() {
                   onChange: (e) => updateValue(
                     "purchasePrice",
                     formatCurrencyInput(e.target.value)
-                  )
+                  ),
+                  "aria-describedby": errors.purchasePrice ? "purchasePrice-error" : void 0,
+                  "aria-invalid": !!errors.purchasePrice
                 }
               ),
-              errors.purchasePrice ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.purchasePrice }) : null
+              errors.purchasePrice ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: "purchasePrice-error",
+                  className: errorText,
+                  role: "alert",
+                  children: errors.purchasePrice
+                }
+              ) : null
             ] }),
             /* @__PURE__ */ jsxs(Field, { className: sliderWrap, children: [
               /* @__PURE__ */ jsxs("div", { className: sliderHeader, children: [
@@ -475,7 +725,8 @@ function MortgageRateStep() {
                   step: 1,
                   value: values.downPaymentPercent,
                   onChange: (e) => updateValue("downPaymentPercent", Number(e.target.value)),
-                  "aria-label": "Down payment percentage"
+                  "aria-label": "Down payment percentage",
+                  "aria-valuetext": `${values.downPaymentPercent}% down payment, estimated amount ${purchaseDownPaymentPreview}`
                 }
               ),
               /* @__PURE__ */ jsx("p", { className: helperText, children: "Move the slider to estimate your down payment amount instantly." }),
@@ -496,10 +747,20 @@ function MortgageRateStep() {
                   onChange: (e) => updateValue(
                     "zipCode",
                     e.target.value.replace(/[^\d]/g, "").slice(0, 5)
-                  )
+                  ),
+                  "aria-describedby": errors.zipCode ? "zipCode-error" : void 0,
+                  "aria-invalid": !!errors.zipCode
                 }
               ),
-              errors.zipCode ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.zipCode }) : null
+              errors.zipCode ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: "zipCode-error",
+                  className: errorText,
+                  role: "alert",
+                  children: errors.zipCode
+                }
+              ) : null
             ] })
           ] });
         }
@@ -523,10 +784,20 @@ function MortgageRateStep() {
                     onChange: (e) => updateValue(
                       "estimatedHomeValue",
                       formatCurrencyInput(e.target.value)
-                    )
+                    ),
+                    "aria-describedby": errors.estimatedHomeValue ? "estimatedHomeValue-error" : void 0,
+                    "aria-invalid": !!errors.estimatedHomeValue
                   }
                 ),
-                errors.estimatedHomeValue ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.estimatedHomeValue }) : null
+                errors.estimatedHomeValue ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    id: "estimatedHomeValue-error",
+                    className: errorText,
+                    role: "alert",
+                    children: errors.estimatedHomeValue
+                  }
+                ) : null
               ] }),
               /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
                 /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Current Loan Balance" }),
@@ -540,10 +811,20 @@ function MortgageRateStep() {
                     onChange: (e) => updateValue(
                       "currentLoanBalance",
                       formatCurrencyInput(e.target.value)
-                    )
+                    ),
+                    "aria-describedby": errors.currentLoanBalance ? "currentLoanBalance-error" : void 0,
+                    "aria-invalid": !!errors.currentLoanBalance
                   }
                 ),
-                errors.currentLoanBalance ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.currentLoanBalance }) : null
+                errors.currentLoanBalance ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    id: "currentLoanBalance-error",
+                    className: errorText,
+                    role: "alert",
+                    children: errors.currentLoanBalance
+                  }
+                ) : null
               ] }),
               /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
                 /* @__PURE__ */ jsxs(Label, { className: fieldLabel, children: [
@@ -561,9 +842,20 @@ function MortgageRateStep() {
                     onChange: (e) => updateValue(
                       "cashOutAmount",
                       formatCurrencyInput(e.target.value)
-                    )
+                    ),
+                    "aria-describedby": errors.cashOutAmount ? "cashOutAmount-error" : void 0,
+                    "aria-invalid": !!errors.cashOutAmount
+                  }
+                ),
+                errors.cashOutAmount ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    id: "cashOutAmount-error",
+                    className: errorText,
+                    role: "alert",
+                    children: errors.cashOutAmount
                   }
-                )
+                ) : null
               ] }),
               /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
                 /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "ZIP Code" }),
@@ -577,128 +869,197 @@ function MortgageRateStep() {
                     onChange: (e) => updateValue(
                       "zipCode",
                       e.target.value.replace(/[^\d]/g, "").slice(0, 5)
-                    )
+                    ),
+                    "aria-describedby": errors.zipCode ? "zipCode-error" : void 0,
+                    "aria-invalid": !!errors.zipCode
                   }
                 ),
-                errors.zipCode ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.zipCode }) : null
+                errors.zipCode ? /* @__PURE__ */ jsx("p", { id: "zipCode-error", className: errorText, role: "alert", 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");
+      case "amortizationLoanTerm": {
+        const loanTermOptions = values.amortizationType === "fixed" ? fixedLoanTermOptions : values.amortizationType === "arm" ? armLoanTermOptions : [];
+        const selectedTermLabel = loanTermOptions.find(
+          (o) => o.value === values.loanTerm
+        )?.label;
+        return /* @__PURE__ */ jsxs(Fieldset, { className: fieldSet, children: [
+          /* @__PURE__ */ jsx(Legend, { className: fieldLabel, style: { fontSize: "1rem" }, children: "Loan Structure" }),
+          /* @__PURE__ */ jsxs(Field, { className: fieldBlock, style: { marginTop: "16px" }, children: [
+            /* @__PURE__ */ jsx(Label, { className: subStepLabel, children: "Which amortization type do you prefer?" }),
+            /* @__PURE__ */ jsx(
+              RadioGroup,
+              {
+                value: values.amortizationType,
+                onChange: (value) => {
+                  updateValue("amortizationType", value);
+                  registerRadioInteraction("amortizationLoanTerm");
+                },
+                className: inputRowTwo,
+                children: amortizationTypeOptions.map((option) => {
+                  const checked = values.amortizationType === option.value;
+                  return /* @__PURE__ */ jsx(
+                    Radio,
+                    {
+                      value: option.value,
+                      className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
+                      title: option.value === "fixed" ? "Fixed Rate Mortgage" : "Adjustable Rate Mortgage",
+                      children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
+                    },
+                    option.value
+                  );
+                })
+              }
+            ),
+            errors.amortizationType ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: "amortizationType-error",
+                className: errorText,
+                role: "alert",
+                children: errors.amortizationType
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: values.amortizationType && /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                initial: { opacity: 0, height: 0, y: -8 },
+                animate: { opacity: 1, height: "auto", y: 0 },
+                exit: { opacity: 0, height: 0, y: -8 },
+                transition: { duration: 0.32, ease: [0.22, 1, 0.36, 1] },
+                className: conditionalField,
+                style: { minHeight: "154px" },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: conditionalFieldWrap, children: [
+                    /* @__PURE__ */ jsxs(
+                      Listbox,
+                      {
+                        value: values.loanTerm,
+                        onChange: (value) => {
+                          updateValue("loanTerm", value);
+                          registerRadioInteraction("amortizationLoanTerm");
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(Label, { className: selectLabel, children: values.amortizationType === "fixed" ? "What is your desired loan term?" : "What is your desired ARM term?" }),
+                          /* @__PURE__ */ jsxs("div", { className: selectWrap, children: [
+                            /* @__PURE__ */ jsx(
+                              ListboxButton,
+                              {
+                                className: selectButton,
+                                "aria-describedby": errors.loanTerm ? "loanTerm-error" : void 0,
+                                "aria-invalid": !!errors.loanTerm,
+                                children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                                  /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      className: values.loanTerm ? "" : selectButtonPlaceholder,
+                                      children: selectedTermLabel ?? "Select a loan term"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    "svg",
+                                    {
+                                      className: selectChevron,
+                                      "data-open": open,
+                                      viewBox: "0 0 20 20",
+                                      fill: "none",
+                                      xmlns: "http://www.w3.org/2000/svg",
+                                      "aria-hidden": "true",
+                                      children: /* @__PURE__ */ jsx(
+                                        "path",
+                                        {
+                                          d: "M5 7.5L10 12.5L15 7.5",
+                                          stroke: "currentColor",
+                                          strokeWidth: "2",
+                                          strokeLinecap: "round",
+                                          strokeLinejoin: "round"
+                                        }
+                                      )
+                                    }
+                                  )
+                                ] })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              ListboxOptions,
+                              {
+                                className: selectOptions,
+                                modal: false,
+                                children: loanTermOptions.map((option) => /* @__PURE__ */ jsx(
+                                  ListboxOption,
+                                  {
+                                    value: option.value,
+                                    className: selectOption,
+                                    children: option.label
+                                  },
+                                  option.value
+                                ))
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ),
+                    errors.loanTerm ? /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        id: "loanTerm-error",
+                        className: errorText,
+                        role: "alert",
+                        style: { marginTop: "8px" },
+                        children: errors.loanTerm
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: autoAdvanceHint,
+                      style: { marginTop: "12px" },
+                      children: "Once both selections are made, you'll continue automatically."
+                    }
+                  )
+                ]
               },
-              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
+              `loan-term-${values.amortizationType}`
+            ) })
+          ] }),
+          renderAutoAdvanceStatus()
         ] });
+      }
       case "finalDetails":
         return /* @__PURE__ */ jsxs("div", { className: inputGrid, children: [
           /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-            /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Desired Rate" }),
+            /* @__PURE__ */ jsxs(Label, { className: fieldLabel, children: [
+              "Desired Rate",
+              /* @__PURE__ */ jsx("sup", { children: "*" })
+            ] }),
             /* @__PURE__ */ jsx(
               Input,
               {
                 className: input,
                 type: "text",
                 inputMode: "decimal",
-                placeholder: "6.25%",
+                placeholder: "Enter your desired rate",
                 value: values.desiredRate ? `${values.desiredRate}%` : "",
-                onChange: (e) => updateValue("desiredRate", formatPercentInput(e.target.value))
+                onChange: (e) => updateValue("desiredRate", formatPercentInput(e.target.value)),
+                "aria-describedby": errors.desiredRate ? "desiredRate-error" : void 0,
+                "aria-invalid": !!errors.desiredRate
               }
             ),
-            errors.desiredRate ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.desiredRate }) : null
+            errors.desiredRate ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: "desiredRate-error",
+                className: errorText,
+                role: "alert",
+                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(Label, { className: fieldLabel, children: "Discount Points" }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -706,72 +1067,108 @@ function MortgageRateStep() {
                 type: "text",
                 inputMode: "decimal",
                 placeholder: "1.0",
-                value: values.discountPoints,
-                onChange: (e) => updateValue("discountPoints", e.target.value)
+                value: values.discountPoints ? `${values.discountPoints}%` : "",
+                onChange: (e) => updateValue(
+                  "discountPoints",
+                  formatPercentInput(e.target.value)
+                ),
+                "aria-describedby": errors.discountPoints ? "discountPoints-error" : void 0,
+                "aria-invalid": !!errors.discountPoints
               }
-            )
-          ] })
-        ] });
-      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,
+            ),
+            errors.discountPoints ? /* @__PURE__ */ jsx(
+              "p",
               {
-                className: input,
-                type: "email",
-                placeholder: "Enter your email",
-                value: values.email,
-                onChange: (e) => updateValue("email", e.target.value)
+                id: "discountPoints-error",
+                className: errorText,
+                role: "alert",
+                children: errors.discountPoints
               }
-            ),
-            errors.email ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.email }) : null
+            ) : null
           ] }),
           /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-            /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Phone Number" }),
-            /* @__PURE__ */ jsx(
-              Input,
+            /* @__PURE__ */ jsxs(
+              Listbox,
               {
-                className: input,
-                type: "tel",
-                inputMode: "tel",
-                placeholder: "(XXX) XXX-XXXX",
-                value: values.phoneNumber,
-                onChange: (e) => updateValue("phoneNumber", formatPhoneInput(e.target.value))
+                value: values.updateFrequency,
+                onChange: (value) => updateValue("updateFrequency", value),
+                children: [
+                  /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "How often would you like rate updates?" }),
+                  /* @__PURE__ */ jsxs("div", { className: selectWrap, style: { marginTop: "0px" }, children: [
+                    /* @__PURE__ */ jsx(
+                      ListboxButton,
+                      {
+                        className: selectButton,
+                        "aria-describedby": errors.updateFrequency ? "updateFrequency-error" : void 0,
+                        "aria-invalid": !!errors.updateFrequency,
+                        children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: values.updateFrequency ? "" : selectButtonPlaceholder,
+                              children: values.updateFrequency ? updateFrequencyOptions.find(
+                                (o) => o.value === values.updateFrequency
+                              )?.label : "Select update frequency"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              className: selectChevron,
+                              "data-open": open,
+                              viewBox: "0 0 20 20",
+                              fill: "none",
+                              xmlns: "http://www.w3.org/2000/svg",
+                              "aria-hidden": "true",
+                              children: /* @__PURE__ */ jsx(
+                                "path",
+                                {
+                                  d: "M5 7.5L10 12.5L15 7.5",
+                                  stroke: "currentColor",
+                                  strokeWidth: "2",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
+                                }
+                              )
+                            }
+                          )
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ListboxOptions,
+                      {
+                        className: selectOptions,
+                        modal: false,
+                        children: updateFrequencyOptions.map((option) => /* @__PURE__ */ jsx(
+                          ListboxOption,
+                          {
+                            value: option.value,
+                            className: selectOption,
+                            children: option.label
+                          },
+                          option.value
+                        ))
+                      }
+                    )
+                  ] })
+                ]
               }
             ),
-            errors.phoneNumber ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.phoneNumber }) : null
+            errors.updateFrequency ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: "updateFrequency-error",
+                className: errorText,
+                role: "alert",
+                style: { marginTop: "8px" },
+                children: errors.updateFrequency
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: autoAdvanceHint, children: [
+            /* @__PURE__ */ jsx("sup", { children: "*" }),
+            "Minimum 2% and no more than 10%."
           ] })
         ] });
       default:
@@ -791,42 +1188,64 @@ function MortgageRateStep() {
     ] }) });
   }
   const isCurrentStepAutoAdvanceStep = isAutoAdvanceStep(stepKey);
-  const continueButtonLabel = isCurrentStepAutoAdvanceStep && isAutoAdvancing ? "Continuing…" : currentStepIndex === totalSteps - 1 ? "Submit" : "Continue";
+  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__ */ jsx("h1", { className: mainTitle, children: "Rate Watch" }),
-      /* @__PURE__ */ jsx("p", { className: mainDescription, children: "Get a personalized rate based on your needs. It only takes a few minutes." })
+    stepKey === "contact" && /* @__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,
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: [
+                "Step ",
+                currentStepIndex + 1,
+                " of ",
+                totalSteps
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs("span", { className: progressLabel, children: [
             Math.round(progress),
             "%"
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: progressTrack, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: progressFill,
-            style: { width: `${progress}%` }
+            className: progressTrack,
+            role: "progressbar",
+            "aria-valuenow": Math.round(progress),
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": "Form completion progress",
+            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: 28 },
+          initial: { opacity: 0, x: 15 },
           animate: { opacity: 1, x: 0 },
-          exit: { opacity: 0, x: -28 },
+          exit: { opacity: 0, x: -15 },
           transition: { duration: 0.24, ease: "easeOut" },
           children: [
             /* @__PURE__ */ jsx("h2", { className: title, children: getStepTitle() }),
@@ -840,6 +1259,8 @@ function MortgageRateStep() {
                   className: secondaryButton,
                   onClick: goBack,
                   disabled: currentStepIndex === 0,
+                  "aria-disabled": currentStepIndex === 0,
+                  "aria-label": currentStepIndex === 0 ? "Back button, disabled, you are on the first step" : "Back button, go to previous step",
                   children: "Back"
                 }
               ),
@@ -850,13 +1271,37 @@ function MortgageRateStep() {
                   className: primaryButton,
                   onClick: goNext,
                   disabled: continueButtonDisabled,
+                  "aria-disabled": continueButtonDisabled,
+                  "aria-label": continueButtonDisabled ? `${continueButtonLabel} button, disabled, processing selection` : `${continueButtonLabel} button, go to next step`,
                   children: continueButtonLabel
                 }
               )
             ] }),
-            stepKey === "mortgageType" && /* @__PURE__ */ jsxs("div", { className: disclosure, children: [
+            stepKey === "contact" && /* @__PURE__ */ jsxs("div", { className: disclosure, children: [
+              /* @__PURE__ */ jsxs(
+                "p",
+                {
+                  className: `${disclosureText} ${disclosureTextSm}`,
+                  children: [
+                    "By continuing, you agree 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 === "finalDetails" && /* @__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." })
+              /* @__PURE__ */ jsx("p", { className: disclosureText, children: "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." })
             ] })
           ]
         },