@axos-web-dev/shared-components 2.2.30 → 2.2.31

package/dist/Auth/ErrorAlert.js

@@ -73,8 +73,8 @@ import "../Carousel/index.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 import { Hyperlink } from "../Hyperlink/index.js";

package/dist/Calculators/Calculator.js

@@ -54,9 +54,9 @@ import "../Carousel/index.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Chatbot/ChatWindow.css.js

@@ -3,6 +3,7 @@ import '../assets/Chatbot/ChatWindow.css';import '../assets/Typography/Typograph
 /* empty css                               */
 /* empty css                                    */
 /* empty css                                          */
+import "./Chatbot.css.ts.vanilla.css.js";
 /* empty css                              */
 var windowStyle = "_13n1jqk1";
 var windowExpandedStyle = "_13n1jqk2";

package/dist/Chatbot/Chatbot.css.js

@@ -1,4 +1,3 @@
-import "./Chatbot.css.ts.vanilla.css.js";
 var chatbotAXB = "_1hpv6vm0";
 var chatbotUFB = "_1hpv6vm1";
 export {

package/dist/Forms/MortgageRate/MortgageRateForm.js

@@ -22,7 +22,7 @@ import clsx from "clsx";
 import "../../Accordion/Accordion.js";
 import "../../Accordion/Accordion.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
-import { useState, useEffect } from "react";
+import { useState, useRef, useEffect, useLayoutEffect } from "react";
 import "../../Article/Article.css.js";
 import "../../ArticlesSet/ArticlesSet.css.js";
 import "../../Calculators/calculator.css.js";
@@ -134,6 +134,7 @@ import "../../StepItemSet/StepItemSet.css.js";
 /* empty css                                                     */
 /* empty css                                                   */
 /* empty css                                                 */
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 const MortgageRate = ({
   icon = false,
   children,
@@ -159,6 +160,8 @@ const MortgageRate = ({
   const [_downPayment, setDownPayment] = useState(0);
   const [isTypingDownPayment, setIsTypingDownPayment] = useState(false);
   const [salesPriceVal, setSalesPriceVal] = useState(0);
+  const containerRef = useRef(null);
+  const restoreScrollOnNextRender = useRef(false);
   const cachedEmailValidator = useCachedEmailValidator(validateEmail);
   const schema = z.object({
     firstName: z.string({ message: "First Name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
@@ -295,6 +298,17 @@ const MortgageRate = ({
       methods.setValue("downPayment", calculatedDownPayment);
     }
   }, [salesPrice, downPaymentPercentage]);
+  useIsomorphicLayoutEffect(() => {
+    if (!restoreScrollOnNextRender.current) return;
+    restoreScrollOnNextRender.current = false;
+    const anchorViewport = () => {
+      const target = showingTables && containerRef.current?.nextElementSibling || containerRef.current;
+      target?.scrollIntoView({ block: "start" });
+    };
+    anchorViewport();
+    const raf = requestAnimationFrame(anchorViewport);
+    return () => cancelAnimationFrame(raf);
+  }, [hideModal, showingTables]);
   const submitForm = async (data) => {
     const processData = {
       ...data
@@ -303,6 +317,7 @@ const MortgageRate = ({
     if (setRateWatchSubmitted) {
       setRateWatchSubmitted(false);
     }
+    restoreScrollOnNextRender.current = true;
     setHideModal(true);
   };
   const variant = getVariant(fullVariant);
@@ -366,7 +381,7 @@ const MortgageRate = ({
     }
     return value;
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, children: [
     hideModal && !showingTables && /* @__PURE__ */ jsx(
       "section",
       {
@@ -442,9 +457,9 @@ const MortgageRate = ({
             {
               className: form,
               onSubmit: async (e) => {
+                e.preventDefault();
                 onValidate && onValidate(e);
                 await handleSubmit(submitForm)(e);
-                e.preventDefault();
               },
               children: [
                 /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
@@ -794,12 +809,15 @@ const MortgageRate = ({
                       {
                         id,
                         className: `${chevron({ variant })} ${!isValid ? na_cursor : ""}`,
-                        onClick: isValid ? handleSubmit(async (data) => {
-                          await onSubmit(data);
-                          toggleModal();
-                          setHideModal(false);
-                        }) : (e) => {
+                        onClick: (e) => {
                           e.preventDefault();
+                          if (!isValid) return;
+                          handleSubmit(async (data) => {
+                            await onSubmit(data);
+                            restoreScrollOnNextRender.current = true;
+                            toggleModal();
+                            setHideModal(false);
+                          })(e);
                         },
                         children: "Sign Up For Ratewatch"
                       }

package/dist/Forms/MortgageRate/MortgageRateQuoteFilters.js

@@ -36,7 +36,7 @@ const MortgageRateFilters = ({
     loanPurpose: z.number({ message: "Loan Purpose is required." }),
     propertyType: z.number({ message: "Property Type is required." }).positive({ message: "Property Type is required." }),
     occupancy: z.number({ message: "Property Usage is required." }).positive({ message: "Property Usage is required." }),
-    salesPrice: z.number({ message: "Purchase Price is required." }).refine((val) => loanPurpose === 1 ? val != null : true, {
+    salesPrice: z.number({ message: "Purchase Price is required." }).optional().refine((val) => loanPurpose === 1 ? val != null : true, {
       message: "Sales Price is required."
     }).refine(
       (val) => {
@@ -47,7 +47,7 @@ const MortgageRateFilters = ({
       },
       { message: "Value must be between $50,000 and $25,000,000." }
     ),
-    downPayment: z.number({ message: "Down Payment is required." }).refine((val) => loanPurpose === 1 ? val != null : true, {
+    downPayment: z.number({ message: "Down Payment is required." }).optional().refine((val) => loanPurpose === 1 ? val != null : true, {
       message: "Down Payment is required."
     }).refine(
       (val) => {
@@ -61,8 +61,8 @@ const MortgageRateFilters = ({
       }
     ),
     creditScore: z.number({ message: "Credit Score is required." }).positive({ message: "Credit Score is required." }),
-    zipCode: z.number({ message: "Zip Code is required." }),
-    appraisedValue: z.number({ message: "Home Price is required." }).refine(
+    zipCode: z.number({ message: "Zip Code is required." }).int({ message: "Zip Code must be a valid 5-digit zip code." }).gte(1e4, { message: "Zip Code must be a valid 5-digit zip code." }).lte(99999, { message: "Zip Code must be a valid 5-digit zip code." }),
+    appraisedValue: z.number({ message: "Home Price is required." }).optional().refine(
       (val) => {
         if (loanPurpose === 2) {
           return val != null && val >= 5e4 && val <= 25e6;
@@ -71,7 +71,7 @@ const MortgageRateFilters = ({
       },
       { message: "Value must be between $50,000 and $25,000,000." }
     ),
-    mortgageBalance: z.number({ message: "Mortgage Balance is required." }).refine(
+    mortgageBalance: z.number({ message: "Mortgage Balance is required." }).optional().refine(
       (val) => {
         if (loanPurpose === 2) {
           return val != null && val >= 5e4 && val <= 25e6;
@@ -80,7 +80,7 @@ const MortgageRateFilters = ({
       },
       { message: "Value must be between $50,000 and $25,000,000." }
     ),
-    cashOut: z.number({ message: "Cash Out is required." }).refine(
+    cashOut: z.number({ message: "Cash Out is required." }).optional().refine(
       (val) => {
         if (loanPurpose === 2 && val == null) {
           return false;
@@ -92,7 +92,19 @@ const MortgageRateFilters = ({
   });
   const methods = useForm({
     resolver: zodResolver(schema),
-    mode: "all"
+    mode: "all",
+    defaultValues: {
+      loanPurpose: formData.loanPurpose,
+      propertyType: formData.propertyType,
+      occupancy: formData.occupancy,
+      salesPrice: formData.salesPrice,
+      downPayment: formData.downPayment,
+      creditScore: formData.creditScore,
+      zipCode: formData.zipCode,
+      appraisedValue: formData.appraisedValue,
+      mortgageBalance: formData.mortgageBalance,
+      cashOut: formData.cashOut
+    }
   });
   const {
     handleSubmit,
@@ -102,10 +114,10 @@ const MortgageRateFilters = ({
   } = methods;
   const salesPrice = watch("salesPrice");
   useEffect(() => {
-    setSalesPriceVal(salesPrice);
+    setSalesPriceVal(salesPrice ?? 0);
   });
   useEffect(() => {
-    if (salesPrice > 0 && !isTypingDownPayment) {
+    if (salesPrice != null && salesPrice > 0 && !isTypingDownPayment) {
       const calculatedDownPayment = Math.round(
         salesPrice * downPaymentPercentage / 100
       );
@@ -115,7 +127,16 @@ const MortgageRateFilters = ({
   }, [salesPrice, downPaymentPercentage]);
   const submitForm = async (data) => {
     const processData = {
-      ...data
+      loanPurpose: data.loanPurpose,
+      propertyType: data.propertyType,
+      occupancy: data.occupancy,
+      creditScore: data.creditScore,
+      zipCode: data.zipCode,
+      salesPrice: data.salesPrice ?? 0,
+      downPayment: data.downPayment ?? 0,
+      appraisedValue: data.appraisedValue ?? 0,
+      mortgageBalance: data.mortgageBalance ?? 0,
+      cashOut: data.cashOut ?? 0
     };
     await onSubmit(processData);
   };
@@ -391,7 +412,8 @@ const MortgageRateFilters = ({
                 inputMode: "numeric",
                 ...register("zipCode", {
                   required: true,
-                  pattern: /^\d{5}$/
+                  pattern: /^\d{5}$/,
+                  setValueAs: (value) => Number(value)
                 }),
                 label: "Zip Code",
                 sizes: "medium",

package/dist/Forms/MortgageRate/MortgageRateWatch.d.ts

@@ -1,6 +1,6 @@
 export type RateWatchInputs = {
     updateType: string;
-    updateCadence: string;
+    updateCadence?: string;
     loanTerms?: string;
     hasSmsConsent: boolean;
     tR1DesiredRate?: string;

package/dist/Forms/MortgageRate/MortgageRateWatch.js

@@ -136,12 +136,34 @@ const RateWatchForm = ({
   toggleModal,
   setRateWatchSubmitted
 }) => {
+  const desiredRateFields = [
+    "tR1DesiredRate",
+    "tR2DesiredRate",
+    "tR3DesiredRate"
+  ];
+  const sanitizeDesiredRate = (value) => {
+    if (!value) return "";
+    const normalizedValue = value.replace(/[^\d.]/g, "");
+    if (!normalizedValue || normalizedValue === ".") return "";
+    const [wholePart, decimalPart = ""] = normalizedValue.split(".");
+    const trimmedDecimal = decimalPart.slice(0, 4);
+    const formattedValue = trimmedDecimal ? `${wholePart || "0"}.${trimmedDecimal}` : wholePart || "0";
+    const numericValue = Number(formattedValue);
+    if (!Number.isFinite(numericValue)) return "";
+    return Number.isInteger(numericValue) ? String(numericValue) : numericValue.toFixed(4).replace(/\.0+$|(?<=\.\d*)(0+)$/, "").replace(/\.$/, "");
+  };
+  const isDesiredRateOutOfRange = (value) => {
+    if (!value) return false;
+    const numericValue = Number(value);
+    if (!Number.isFinite(numericValue)) return false;
+    return numericValue < 2 || numericValue > 10;
+  };
   const [updateType, setUpdateType] = useState(
     "Target Rate"
   );
   const schema = z.object({
     updateType: z.string().min(1, { message: "Update type is required." }),
-    updateCadence: z.string().refine((val) => !(updateType === "Frequency" && !val), {
+    updateCadence: z.string().optional().refine((val) => !(updateType === "Frequency" && !val), {
       message: "Frequency is required."
     }),
     loanTerms: z.string().optional().refine((val) => !(updateType === "Frequency" && !val), {
@@ -150,11 +172,13 @@ const RateWatchForm = ({
     hasSmsConsent: z.boolean().refine((val) => val === true, {
       message: "You must agree to receive SMS messages."
     }),
-    tR1DesiredRate: z.string().optional().refine(
+    tR1DesiredRate: z.string().optional().refine((val) => updateType === "Target Rate" ? !!val : true, {
+      message: "Desired Rate is required."
+    }).refine(
       (val) => {
         if (val && updateType === "Target Rate") {
           const numericValue = +val;
-          return !val || numericValue >= 2 && numericValue <= 10;
+          return numericValue >= 2 && numericValue <= 10;
         }
         return true;
       },
@@ -193,15 +217,21 @@ const RateWatchForm = ({
     email: z.string()
   });
   const methods = useForm({
-    resolver: zodResolver(schema)
+    resolver: zodResolver(schema),
+    mode: "onChange"
   });
   const {
     handleSubmit,
     register,
     formState: { errors, isSubmitting, isValid },
     setValue,
-    clearErrors
+    clearErrors,
+    watch
   } = methods;
+  const watchedDesiredRates = watch(desiredRateFields);
+  const hasDesiredRateWarning = desiredRateFields.some(
+    (_, index) => isDesiredRateOutOfRange(watchedDesiredRates[index])
+  );
   const submitForm = async (data) => {
     const processedData = {
       ...data,
@@ -240,12 +270,22 @@ const RateWatchForm = ({
   const handleTypeChange = (event) => {
     const value = event.target.value;
     setUpdateType(value);
+    methods.setValue("updateType", value, { shouldValidate: true });
+  };
+  const handleDesiredRateChange = (fieldName) => (event) => {
+    const sanitizedValue = sanitizeDesiredRate(event.target.value);
+    event.target.value = sanitizedValue;
+    setValue(fieldName, sanitizedValue, {
+      shouldValidate: true,
+      shouldDirty: true,
+      shouldTouch: true
+    });
   };
   const handleSubmitClick = () => {
     handleSubmit(submitForm)();
   };
   useEffect(() => {
-    methods.reset();
+    methods.reset({ updateType });
   }, [updateType]);
   return /* @__PURE__ */ jsx("section", { className: "rate-watch-form", children: /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(
     SuccesFormWrapper,
@@ -323,7 +363,7 @@ const RateWatchForm = ({
           /* @__PURE__ */ jsx("p", { className: mt1Rem, children: "You can establish up to three different targets with one rate watch." }),
           /* @__PURE__ */ jsxs("div", { className: threeColRow, children: [
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: resposiveLabel, children: "Select a Loan Type*" }),
+              /* @__PURE__ */ jsx("label", { className: resposiveLabel, children: "Select a Loan Type" }),
               /* @__PURE__ */ jsxs(
                 Dropdown,
                 {
@@ -342,18 +382,24 @@ const RateWatchForm = ({
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: resposiveLabel, children: "Desired Rate" }),
+              /* @__PURE__ */ jsxs("label", { className: resposiveLabel, children: [
+                "Desired Rate",
+                /* @__PURE__ */ jsx("sup", { children: "*" })
+              ] }),
               /* @__PURE__ */ jsx(
                 Input,
                 {
                   className: dynPH,
                   ...register("tR1DesiredRate", {
-                    setValueAs: (value) => value ? `${value}` : ""
+                    setValueAs: (value) => sanitizeDesiredRate(String(value ?? ""))
                   }),
+                  onChange: handleDesiredRateChange("tR1DesiredRate"),
                   type: "number",
+                  min: "2",
+                  max: "10",
                   placeholder: "Desired Rate",
                   error: !!errors.tR1DesiredRate,
-                  helperText: errors.tR1DesiredRate?.message
+                  helperText: isDesiredRateOutOfRange(watch("tR1DesiredRate")) ? "Desired Rate must be between 2 and 10." : errors.tR1DesiredRate?.message
                 }
               )
             ] }),
@@ -404,9 +450,16 @@ const RateWatchForm = ({
               Input,
               {
                 className: dynPH,
-                ...register("tR2DesiredRate"),
-                type: "string",
-                placeholder: "Desired Rate"
+                ...register("tR2DesiredRate", {
+                  setValueAs: (value) => sanitizeDesiredRate(String(value ?? ""))
+                }),
+                onChange: handleDesiredRateChange("tR2DesiredRate"),
+                type: "number",
+                min: "2",
+                max: "10",
+                placeholder: "Desired Rate",
+                error: isDesiredRateOutOfRange(watch("tR2DesiredRate")),
+                helperText: isDesiredRateOutOfRange(watch("tR2DesiredRate")) ? "Desired Rate must be between 2 and 10." : errors.tR2DesiredRate?.message
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
@@ -452,10 +505,17 @@ const RateWatchForm = ({
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               Input,
               {
-                ...register("tR3DesiredRate"),
-                type: "string",
+                ...register("tR3DesiredRate", {
+                  setValueAs: (value) => sanitizeDesiredRate(String(value ?? ""))
+                }),
+                onChange: handleDesiredRateChange("tR3DesiredRate"),
+                type: "number",
+                min: "2",
+                max: "10",
                 placeholder: "Desired Rate",
-                className: dynPH
+                className: dynPH,
+                error: isDesiredRateOutOfRange(watch("tR3DesiredRate")),
+                helperText: isDesiredRateOutOfRange(watch("tR3DesiredRate")) ? "Desired Rate must be between 2 and 10." : errors.tR3DesiredRate?.message
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
@@ -480,7 +540,20 @@ const RateWatchForm = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx("p", { className: mt1Rem, children: "*The number in Desired Rate must be at least 2% and no more than 10%" })
+          /* @__PURE__ */ jsxs(
+            "p",
+            {
+              className: mt1Rem,
+              style: {
+                color: hasDesiredRateWarning ? "#d92d20" : void 0,
+                fontWeight: hasDesiredRateWarning ? 600 : void 0
+              },
+              children: [
+                /* @__PURE__ */ jsx("sup", { children: "*" }),
+                " Please enter a desired rate between 2% and 10%"
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: modalCheckboxContainer, children: [
           /* @__PURE__ */ jsx(

package/dist/Forms/SuccesForm.js

@@ -69,9 +69,9 @@ import "../Carousel/index.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Input/DownPaymentInput.js

@@ -17,6 +17,7 @@ const DownPaymentInput = forwardRef(
     disabled,
     helperText: helper,
     error = false,
+    defaultValue,
     ...rest
   }, ref) => {
     const [downPayment, setDownPayment] = useState(0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "2.2.30",
+  "version": "2.2.31",
   "type": "module",
   "main": "dist/main.js",
   "module": "dist/main.js",