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

package/dist/Forms/MortgageRate/MortgageRateStep.js

@@ -1,11 +1,11 @@
 "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, 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 { 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                                   */
@@ -21,6 +21,7 @@ const AUTO_ADVANCE_DELAY = 1e3;
 const initialValues = {
   mortgageType: "",
   propertyType: "",
+  unitCount: "",
   propertyUse: "",
   creditScore: "",
   purchasePrice: "",
@@ -31,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);
@@ -51,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;
@@ -99,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;
@@ -113,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.";
@@ -150,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);
@@ -203,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);
@@ -241,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();
@@ -259,52 +273,44 @@ 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 type of property are you interested in financing?";
-      case "propertyUse":
-        return "How do you plan to utilize this property?";
+      case "propertyTypeUse":
+        return "Tell us about the 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 "amortizationLoanTerm":
+        return "Choose your loan structure.";
       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 "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 "Select how you intend to utilize the property so we can assist you in discovering the most suitable mortgage options available 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 "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 "amortizationLoanTerm":
+        return "Pick the amortization style that fits your goals, then select your preferred 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:
@@ -320,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" }),
@@ -348,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: [
@@ -444,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) {
@@ -461,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: [
@@ -484,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." }),
@@ -505,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
             ] })
           ] });
         }
@@ -532,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" }),
@@ -549,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: [
@@ -570,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" }),
@@ -586,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,
               {
@@ -715,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:
@@ -803,7 +1191,7 @@ function MortgageRateStep() {
   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: [
+    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, {})
@@ -813,24 +1201,43 @@ function MortgageRateStep() {
     /* @__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,
@@ -852,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"
                 }
               ),
@@ -862,21 +1271,19 @@ 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: [
-              /* @__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',
+                    "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."
@@ -891,6 +1298,10 @@ function MortgageRateStep() {
                   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: "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." })
             ] })
           ]
         },