@axos-web-dev/shared-components 0.0.168 → 0.0.170

package/dist/Forms/MortgageRate/MortgageRateForm.js

@@ -6,15 +6,15 @@ import SvgArrowIcon from "../../icons/ArrowIcon/index.js";
 import SvgAxosX from "../../icons/AxosX/index.js";
 import SvgComponent from "../../icons/AxosX/Blue.js";
 import "../../icons/CheckIcon/CheckIcon.css.js";
-/* empty css                                       */
-/* empty css                                          */
-/* empty css                                                           */
+/* empty css                                   */
+/* empty css                                      */
 /* empty css                                                       */
+/* empty css                                                   */
 import "../../utils/allowedAxosDomains.js";
 import { associatedEmail } from "../../utils/EverestValidity.js";
 import { getVariant } from "../../utils/getVariant.js";
-/* empty css                                                 */
-/* empty css                                                 */
+/* empty css                                             */
+/* empty css                                             */
 import "../../Accordion/Accordion.js";
 import "../../Accordion/Accordion.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
@@ -31,7 +31,6 @@ import "../../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
 import "../../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "../../Input/Checkbox.js";
 import "../../Input/CurrencyInput.js";
-import { DownPaymentInput } from "../../Input/DownPaymentInput.js";
 import { Dropdown } from "../../Input/Dropdown.js";
 import "../../Input/Dropdown.css.js";
 import { Input } from "../../Input/Input.js";
@@ -39,29 +38,30 @@ import "../../Input/Input.css.js";
 import "../../Input/InputAmount.js";
 import { InputPhone } from "../../Input/InputPhone.js";
 import "../../Input/InputTextArea.js";
+import { DownPaymentInput } from "../../Input/DownPaymentInput.js";
+import "../../Input/RadioButton.js";
 import { useForm, FormProvider } from "react-hook-form";
 import * as z from "zod";
-import { modalMobile, formContainer, iconForm, headerContainer, headerForm, form, descriptionField, fullRowSelect, formWrapper, centerSelect, mt2rem, fullRowForm, disclosureForm, actions, formBtns, na_cursor } from "../Forms.css.js";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, fullRowSelect, formWrapper, centerSelect, mt2rem, fullRowForm, disclosureForm, actions, formBtns, na_cursor } from "../Forms.css.js";
 import { SalesforceSchema } from "../SalesforceFieldsForm.js";
 import "../../Input/RadioButton.css.js";
 import "../../Input/Checkbox.css.js";
 import { LoadingIndicator } from "../../LoadingIndicator/index.js";
 import "react-use";
-import "../../Input/RadioButton.js";
 import { RateWatchForm } from "./MortgageRateWatch.js";
 import { marketing_tile } from "../../Interstitial/Interstitial-variants.css.js";
 import css from "../../Interstitial/Interstitial.module.js";
-/* empty css                                                                */
+/* empty css                                                   */
 import "../../Hyperlink/Hyperlink.css.js";
-/* empty css                                                             */
+/* empty css                                                */
 import "iframe-resizer";
-/* empty css                                                                                       */
+/* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
-/* empty css                                                     */
 /* empty css                                                 */
-/* empty css                                                           */
+/* empty css                                             */
+/* empty css                                                       */
 import "../../Carousel/index.js";
-/* empty css                                                                           */
+/* empty css                                                                       */
 import "../../Comparison/Comparison.css.js";
 import "../../HeroBanner/HeroBanner.css.js";
 import "../../HeroBanner/LargeBanner.css.js";
@@ -70,46 +70,46 @@ import "../../SetContainer/SetContainer.css.js";
 import "../../Tab/Tab.css.js";
 import "../../icons/Star/Star.css.js";
 import "../../ContentBanner/ContentBanner.css.js";
-/* empty css                                                     */
+/* empty css                                                 */
 import "../../ExecutiveBio/ExecutiveBio.css.js";
 import "../../FaqAccordion/index.js";
 import "../../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                                */
+/* empty css                                                            */
 import "../../ImageBillboard/ImageBillboard.css.js";
-/* empty css                                               */
-/* empty css                                                     */
-/* empty css                                                             */
-/* empty css                                                   */
 /* empty css                                           */
+/* empty css                                                 */
+/* empty css                                                         */
+/* empty css                                               */
+/* empty css                                       */
 import "../../LandingPageHeader/LandingPageHeader.css.js";
 import { chevron_wrapper, chevron } from "../../Chevron/Chevron.css.js";
-/* empty css                                       */
+/* empty css                                   */
 import "../../Modal/contextApi/store.js";
-/* empty css                                                             */
-/* empty css                                                                */
-/* empty css                                                                     */
-/* empty css                                                                        */
-/* empty css                                                          */
+/* empty css                                                         */
+/* empty css                                                            */
+/* empty css                                                                 */
+/* empty css                                                                    */
+/* empty css                                                      */
 import "../../NavigationMenu/AxosBank/NavData.js";
 import "next/navigation.js";
 import "next/image.js";
 import "next/link.js";
-/* empty css                                                             */
-/* empty css                                                              */
+/* empty css                                                         */
+/* empty css                                                          */
 import "../../PageNavItem/PageNavItem.css.js";
 import "react-slick";
-/* empty css                                                        */
-/* empty css                                                 */
-/* empty css                                                           */
-/* empty css                                                         */
+/* empty css                                                    */
+/* empty css                                             */
+/* empty css                                                       */
+/* empty css                                                     */
 import "../../StepItem/StepItem.css.js";
 import "../../StepItemSet/StepItemSet.css.js";
-/* empty css                                               */
-/* empty css                                                         */
-/* empty css                                                       */
-import "next/script.js";
-/* empty css                                               */
+/* empty css                                           */
 /* empty css                                                     */
+/* empty css                                                   */
+import "next/script.js";
+/* empty css                                           */
+/* empty css                                                 */
 const MortgageRate = ({
   icon = false,
   children,
@@ -120,13 +120,16 @@ const MortgageRate = ({
   variant: fullVariant = "primary",
   validateEmail,
   id,
-  rateWatchOnSubmit
+  rateWatchOnSubmit,
+  setRateWatchSubmitted,
+  hideModalValue,
+  showingTables
 }) => {
   const [loanPurpose, setLoanPurpose] = useState(1);
   const [rateType, setRateType] = useState("Purchase");
-  const [isModalOpen, setModalOpen] = useState(false);
+  const [_isModalOpen, setModalOpen] = useState(false);
   const [hasOpenedModal, setHasOpenedModal] = useState(false);
-  const [hideModal, setHideModal] = useState(false);
+  const [hideModal, setHideModal] = useState(hideModalValue || true);
   const [downPaymentPercentage, setDownPaymentPercentage] = useState(10);
   const [_downPayment, setDownPayment] = useState(0);
   const [isTypingDownPayment, setIsTypingDownPayment] = useState(false);
@@ -249,6 +252,9 @@ const MortgageRate = ({
       ...data
     };
     await onSubmit(processData);
+    if (setRateWatchSubmitted) {
+      setRateWatchSubmitted(false);
+    }
     setHideModal(true);
   };
   const variant = getVariant(fullVariant);
@@ -259,6 +265,7 @@ const MortgageRate = ({
     } else {
       setHideModal(true);
     }
+    setHideModal(!hideModal);
   };
   const rateWatchModal = /* @__PURE__ */ jsx(
     "div",
@@ -268,7 +275,7 @@ const MortgageRate = ({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: `${css.modal} active ${modalMobile}`,
+          className: `${css.modal} active`,
           role: "dialog",
           "aria-modal": "true",
           tabIndex: -1,
@@ -311,13 +318,13 @@ const MortgageRate = ({
     }
     return value;
   };
-  return !hideModal && /* @__PURE__ */ jsxs(
-    "section",
-    {
-      id: "MortgageRateQuoteForm",
-      className: clsx(formContainer({ variant })),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hideModal && !showingTables && /* @__PURE__ */ jsx(
+      "section",
+      {
+        id: "MortgageRateQuoteForm",
+        className: clsx(formContainer({ variant })),
+        children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
           icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
           /* @__PURE__ */ jsxs("div", { className: clsx(headerContainer, "text_center"), children: [
             /* @__PURE__ */ jsxs("h1", { className: clsx("header_1", headerForm({ variant })), children: [
@@ -359,7 +366,9 @@ const MortgageRate = ({
                   onChange: (e) => {
                     const selectedValue = Number(e.target.value);
                     setLoanPurpose(selectedValue);
-                    setRateType(selectedValue === 1 ? "Purchase" : "Refinance");
+                    setRateType(
+                      selectedValue === 1 ? "Purchase" : "Refinance"
+                    );
                   },
                   children: [
                     /* @__PURE__ */ jsx("option", { value: "1", children: "Purchase Rates" }),
@@ -725,6 +734,7 @@ const MortgageRate = ({
                     onClick: isValid ? handleSubmit(async (data) => {
                       await onSubmit(data);
                       toggleModal();
+                      setHideModal(false);
                     }) : (e) => {
                       e.preventDefault();
                     },
@@ -735,12 +745,12 @@ const MortgageRate = ({
               ] })
             ] }) })
           ] })
-        ] }) }),
-        isModalOpen && rateWatchModal
-      ]
-    },
-    id
-  );
+        ] }) })
+      },
+      id
+    ),
+    !hideModal && rateWatchModal
+  ] });
 };
 export {
   MortgageRate

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

@@ -8,7 +8,7 @@ type MortgageRateModalProps = {
         email: string;
         lastName: string;
     }) => Promise<void>;
-    isOpen: boolean;
+    isOpen?: boolean;
     toggleModal: () => void;
     isSubmitting?: boolean;
 };

package/dist/Forms/MortgageRate/MortgageRateModal.js

@@ -7,12 +7,11 @@ const MortgageRateModal = ({
   email,
   lastName,
   rateWatchOnSubmit,
-  isOpen,
+  isOpen = true,
   toggleModal,
   isSubmitting
 }) => {
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsx(
+  return isOpen && /* @__PURE__ */ jsx(
     "div",
     {
       className: `${marketing_tile} ${css.overlay} ${css.white_modal} active interstitial`,
@@ -20,7 +19,7 @@ const MortgageRateModal = ({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: `${css.modal} active ${css.modalMobile}`,
+          className: `${css.modal} active`,
           role: "dialog",
           "aria-modal": "true",
           tabIndex: -1,

package/dist/Forms/MortgageRate/MortgageRateQuoteFilters.js

@@ -7,7 +7,6 @@ import { useState, useEffect } from "react";
 import "react-use";
 import "../../Input/Checkbox.js";
 import "../../Input/CurrencyInput.js";
-import { DownPaymentInput } from "../../Input/DownPaymentInput.js";
 import { Dropdown } from "../../Input/Dropdown.js";
 import { dp_input } from "../../Input/Dropdown.css.js";
 import { Input } from "../../Input/Input.js";
@@ -15,6 +14,8 @@ import "../../Input/Input.css.js";
 import "../../Input/InputAmount.js";
 import "../../Input/InputPhone.js";
 import "../../Input/InputTextArea.js";
+import { DownPaymentInput } from "../../Input/DownPaymentInput.js";
+import "../../Input/RadioButton.js";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
 import * as z from "zod";
@@ -28,7 +29,9 @@ const MortgageRateFilters = ({
   const [loanPurpose, setLoanPurpose] = useState(formData.loanPurpose);
   const [salesPriceVal, setSalesPriceVal] = useState(0);
   const [isTypingDownPayment, setIsTypingDownPayment] = useState(false);
-  const [downPaymentPercentage, setDownPaymentPercentage] = useState(10);
+  const [downPaymentPercentage, setDownPaymentPercentage] = useState(
+    formData.downPayment / formData.salesPrice * 100 || 10
+  );
   const [_downPayment, setDownPayment] = useState(0);
   const schema = z.object({
     loanPurpose: z.number({ message: "Loan Purpose is required." }),
@@ -279,7 +282,7 @@ const MortgageRateFilters = ({
                   isTypingDownPayment,
                   setIsTypingDownPayment,
                   methods,
-                  defaultValue: formData.downPayment
+                  defaultValue: formData.downPayment > 0 ? formatCurrency(formData.downPayment) : ""
                 }
               ) })
             ] }),

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

@@ -23,6 +23,7 @@ type RateWatchFormProps = {
         lastName: string;
     }) => void;
     toggleModal: () => void;
+    setRateWatchSubmitted?: React.Dispatch<React.SetStateAction<boolean>>;
 };
-export declare const RateWatchForm: ({ email, lastName, rateWatchOnSubmit, toggleModal, }: RateWatchFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RateWatchForm: ({ email, lastName, rateWatchOnSubmit, toggleModal, setRateWatchSubmitted, }: RateWatchFormProps) => import("react/jsx-runtime").JSX.Element;
 export {};