@axos-web-dev/shared-components 0.0.147 → 0.0.148

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { RateWatchInputs } from '../MortgageRate/MortgageRateWatch';
+
+type MortgageRateModalProps = {
+    email: string;
+    lastName: string;
+    rateWatchOnSubmit: (values: RateWatchInputs & {
+        email: string;
+        lastName: string;
+    }) => Promise<void>;
+    isOpen: boolean;
+    toggleModal: () => void;
+    isSubmitting?: boolean;
+};
+declare const MortgageRateModal: React.FC<MortgageRateModalProps>;
+export default MortgageRateModal;

package/dist/Forms/MortgageRate/MortgageRateModal.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RateWatchForm } from "./MortgageRateWatch.js";
+import { LoadingIndicator } from "../../LoadingIndicator/index.js";
+import { marketing_tile } from "../../Interstitial/Interstitial-variants.css.js";
+import css from "../../Interstitial/Interstitial.module.js";
+const MortgageRateModal = ({
+  email,
+  lastName,
+  rateWatchOnSubmit,
+  isOpen,
+  toggleModal,
+  isSubmitting
+}) => {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${marketing_tile} ${css.overlay} ${css.white_modal} active interstitial`,
+      onClick: toggleModal,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${css.modal} active ${css.modalMobile}`,
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: css.close_button,
+                onClick: toggleModal,
+                "aria-label": "Close modal",
+                children: "×"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: `${css.modal_content} text_center`, children: [
+              /* @__PURE__ */ jsx("h2", { className: `header_3`, children: "Set Up Rate Watch" }),
+              /* @__PURE__ */ jsx("div", { className: css.body_copy, children: "We have assumed you will use the same criteria you used for your rate search." }),
+              isSubmitting ? /* @__PURE__ */ jsx(
+                LoadingIndicator,
+                {
+                  style: { marginInline: "auto" },
+                  variant: "primary"
+                }
+              ) : /* @__PURE__ */ jsx(
+                RateWatchForm,
+                {
+                  email,
+                  lastName,
+                  rateWatchOnSubmit,
+                  toggleModal
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  MortgageRateModal as default
+};

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

@@ -0,0 +1,16 @@
+export type MortgageRateFilterInputs = {
+    loanPurpose: number;
+    propertyType: string;
+    occupancy: string;
+    salesPrice: number;
+    downPayment: number;
+    creditScore: string;
+    zipCode: number;
+    appraisedValue: number;
+    mortgageBalance: number;
+    cashOut: number;
+};
+export declare const MortgageRateFilters: ({ onSubmit, initialLoanPurpose, }: {
+    onSubmit?: ((values: MortgageRateFilterInputs) => void) | undefined;
+    initialLoanPurpose?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/MortgageRate/MortgageRateQuoteFilters.js

@@ -0,0 +1,428 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "../../Button/Button.js";
+import "../../Button/Button.css.js";
+import { useState, useEffect } from "react";
+import "react-use";
+import "../../Input/Checkbox.js";
+import "../../Input/CurrencyInput.js";
+import { Dropdown } from "../../Input/Dropdown.js";
+import { dp_input } from "../../Input/Dropdown.css.js";
+import { Input } from "../../Input/Input.js";
+import "../../Input/Input.css.js";
+import "../../Input/InputAmount.js";
+import "../../Input/InputPhone.js";
+import "../../Input/InputTextArea.js";
+import { DownPaymentInput } from "../../Input/DownPaymentInput.js";
+import clsx from "clsx";
+import { useForm, FormProvider } from "react-hook-form";
+import * as z from "zod";
+import { formContainer, headerContainer, headerForm, form, formWrapper, fullRowForm, actions } from "../Forms.css.js";
+import { SalesforceSchema } from "../SalesforceFieldsForm.js";
+import { LoadingIndicator } from "../../LoadingIndicator/index.js";
+const MortgageRateFilters = ({
+  onSubmit = (values) => {
+    console.log(values);
+  },
+  initialLoanPurpose = 1
+}) => {
+  const [loanPurpose, setLoanPurpose] = useState(initialLoanPurpose);
+  const [salesPriceVal, setSalesPriceVal] = useState(0);
+  const [isTypingDownPayment, setIsTypingDownPayment] = useState(false);
+  const [downPaymentPercentage, setDownPaymentPercentage] = useState(10);
+  const [_downPayment, setDownPayment] = useState(0);
+  const schema = z.object({
+    loanPurpose: z.number({ message: "Loan Purpose is required." }).positive({ 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." }).optional().refine((val) => loanPurpose === 1 ? val != null : true, {
+      message: "Sales Price is required."
+    }).refine(
+      (val) => {
+        if (loanPurpose === 1) {
+          return val != null && val >= 5e4 && val <= 25e6;
+        }
+        return true;
+      },
+      { message: "Value must be between $50,000 and $25,000,000." }
+    ),
+    downPayment: z.number({ message: "Down Payment is required." }).optional().refine((val) => loanPurpose === 1 ? val != null : true, {
+      message: "Down Payment is required."
+    }).refine(
+      (val) => {
+        if (loanPurpose === 1) {
+          return val != null && val >= salesPriceVal * 0.01 && val <= salesPriceVal;
+        }
+        return true;
+      },
+      {
+        message: `Value must be between ${salesPriceVal * 0.01} and ${salesPriceVal}.`
+      }
+    ),
+    creditScore: z.number({ message: "Credit Score is required." }).positive({ message: "Credit Score is required." }),
+    zipCode: z.number().positive({ message: "Zip Code is required." }),
+    appraisedValue: z.number({ message: "Home Price is required." }).optional().refine(
+      (val) => {
+        if (loanPurpose === 2 && val == null) {
+          return false;
+        }
+        return true;
+      },
+      { message: "Appraised Value is required for refinance" }
+    ),
+    mortgageBalance: z.number({ message: "Mortgage Balance is required." }).optional().refine(
+      (val) => {
+        if (loanPurpose === 2 && val == null) {
+          return false;
+        }
+        return true;
+      },
+      { message: "Mortgage Balance is required for refinance" }
+    ),
+    cashOut: z.number({ message: "Cash Out is required." }).optional().refine(
+      (val) => {
+        if (loanPurpose === 2 && val == null) {
+          return false;
+        }
+        return true;
+      },
+      { message: "Cash Out is required for refinance" }
+    )
+  });
+  const methods = useForm({
+    resolver: zodResolver(schema.merge(SalesforceSchema), {
+      async: true
+    }),
+    mode: "all"
+  });
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isValid, isSubmitting },
+    watch
+  } = methods;
+  const salesPrice = watch("salesPrice");
+  useEffect(() => {
+    setSalesPriceVal(salesPrice);
+  });
+  useEffect(() => {
+    if (salesPrice > 0 && !isTypingDownPayment) {
+      const calculatedDownPayment = Math.round(
+        salesPrice * downPaymentPercentage / 100
+      );
+      if (!isTypingDownPayment) setDownPayment(calculatedDownPayment);
+      methods.setValue("downPayment", calculatedDownPayment);
+    }
+  }, [salesPrice, downPaymentPercentage]);
+  const submitForm = async (data) => {
+    const processData = {
+      ...data
+    };
+    await onSubmit(processData);
+  };
+  const formatCurrency = (value) => {
+    return `$${value.toLocaleString()}`;
+  };
+  const parseCurrency = (value) => {
+    if (typeof value === "string") {
+      const cleanedValue = value?.replace(/[^0-9.-]+/g, "");
+      return cleanedValue ? Number(cleanedValue) : 0;
+    }
+    return value;
+  };
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: clsx(formContainer({ variant: "tertiary" }), "section_spacer"),
+      children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+        /* @__PURE__ */ jsx("div", { className: clsx(headerContainer, "text_center"), children: /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: clsx("header_2", headerForm({ variant: "tertiary" })),
+            children: "Use the available options to create your personalized rate quote."
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant: "tertiary" })), children: [
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+              Dropdown,
+              {
+                id: "loanPurpose",
+                ...register("loanPurpose", {
+                  required: true,
+                  setValueAs: (value) => Number(value)
+                }),
+                label: "Loan Purpose",
+                sizes: "medium",
+                required: true,
+                error: !!errors.loanPurpose,
+                helperText: errors.loanPurpose?.message,
+                variant: "tertiary",
+                onChange: (e) => {
+                  const value = Number(e.target.value);
+                  setLoanPurpose(value);
+                },
+                defaultValue: loanPurpose === 2 ? "2" : "1",
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "1", children: "Purchase" }),
+                  /* @__PURE__ */ jsx("option", { value: "2", children: "Refinance" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+              Dropdown,
+              {
+                id: "propertyType",
+                ...register("propertyType", {
+                  required: true,
+                  setValueAs: (value) => Number(value)
+                }),
+                label: "Property Type",
+                sizes: "medium",
+                required: true,
+                error: !!errors.propertyType,
+                helperText: errors.propertyType?.message,
+                variant: "tertiary",
+                defaultValue: "Select option",
+                children: [
+                  /* @__PURE__ */ jsx("option", { disabled: true, value: "Select option", children: "Select Option" }),
+                  /* @__PURE__ */ jsx("option", { value: "1", children: "Single Family Home" }),
+                  /* @__PURE__ */ jsx("option", { value: "3", children: "Condo" }),
+                  /* @__PURE__ */ jsx("option", { value: "5", children: "Hi-Rise Condo" }),
+                  /* @__PURE__ */ jsx("option", { value: "2", children: "Co-op" }),
+                  /* @__PURE__ */ jsx("option", { value: "4", children: "2-4 Unit" }),
+                  /* @__PURE__ */ jsx("option", { value: "6", children: "Manufactured" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+              Dropdown,
+              {
+                id: "occupancy",
+                ...register("occupancy", {
+                  required: true,
+                  setValueAs: (value) => Number(value)
+                }),
+                label: "Property Usage",
+                sizes: "medium",
+                required: true,
+                error: !!errors.occupancy,
+                helperText: errors.occupancy?.message,
+                variant: "tertiary",
+                defaultValue: "Select option",
+                children: [
+                  /* @__PURE__ */ jsx("option", { disabled: true, value: "Select option", children: "Select Option" }),
+                  /* @__PURE__ */ jsx("option", { value: "1", children: "Primary Residence" }),
+                  /* @__PURE__ */ jsx("option", { value: "2", children: "Vacation Home" }),
+                  /* @__PURE__ */ jsx("option", { value: "3", children: "Investment" })
+                ]
+              }
+            ) }),
+            loanPurpose === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: dp_input(), children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "salesPrice",
+                  type: "text",
+                  ...register("salesPrice", {
+                    required: true,
+                    setValueAs: (value) => parseCurrency(value)
+                  }),
+                  label: "Purchase Price",
+                  sizes: "medium",
+                  required: true,
+                  error: !!errors.salesPrice,
+                  helperText: errors.salesPrice?.message,
+                  variant: "tertiary",
+                  onBlur: (e) => {
+                    setIsTypingDownPayment(false);
+                    const rawValue = e.target.value;
+                    const parsedValue = parseCurrency(rawValue);
+                    if (parsedValue === 0) {
+                      methods.setError("salesPrice", {
+                        type: "manual",
+                        message: "Purchase Price is required."
+                      });
+                    } else {
+                      methods.setValue("salesPrice", parsedValue);
+                      e.target.value = formatCurrency(parsedValue);
+                    }
+                    methods.trigger("downPayment");
+                  },
+                  onFocus: (e) => {
+                    const currentValue = e.target.value;
+                    e.target.value = currentValue.replace(/[$,]/g, "");
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                DownPaymentInput,
+                {
+                  id: "downPayment",
+                  type: "text",
+                  ...register("downPayment", {
+                    required: true,
+                    setValueAs: (value) => parseCurrency(value)
+                  }),
+                  salesPrice: watch("salesPrice"),
+                  downPaymentPercentage,
+                  setDownPaymentPercentage,
+                  label: "Down Payment",
+                  sizes: "medium",
+                  error: !!errors.downPayment,
+                  helperText: errors.downPayment?.message,
+                  onChange: (e) => {
+                    const value = parseCurrency(e.target.value);
+                    methods.setValue("downPayment", value);
+                  },
+                  variant: "tertiary",
+                  isTypingDownPayment,
+                  setIsTypingDownPayment,
+                  methods
+                }
+              ) })
+            ] }),
+            loanPurpose === 2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "appraisedValue",
+                  type: "number",
+                  ...register("appraisedValue", {
+                    required: true,
+                    setValueAs: (value) => parseCurrency(value)
+                  }),
+                  label: "Home Value",
+                  sizes: "medium",
+                  required: true,
+                  variant: "tertiary",
+                  error: !!errors.appraisedValue,
+                  helperText: errors.appraisedValue?.message,
+                  onBlur: (e) => {
+                    const rawValue = e.target.value;
+                    const parsedValue = parseCurrency(rawValue);
+                    methods.setValue("appraisedValue", parsedValue);
+                    e.target.value = formatCurrency(parsedValue);
+                  },
+                  onFocus: (e) => {
+                    const currentValue = e.target.value;
+                    e.target.value = currentValue.replace(/[$,]/g, "");
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "mortgageBalance",
+                  type: "number",
+                  ...register("mortgageBalance", {
+                    required: true,
+                    setValueAs: (value) => parseCurrency(value)
+                  }),
+                  label: "Mortgage Balance",
+                  sizes: "medium",
+                  required: true,
+                  variant: "tertiary",
+                  error: !!errors.mortgageBalance,
+                  helperText: errors.mortgageBalance?.message,
+                  onBlur: (e) => {
+                    const rawValue = e.target.value;
+                    const parsedValue = parseCurrency(rawValue);
+                    methods.setValue("cashOut", parsedValue);
+                    e.target.value = formatCurrency(parsedValue);
+                  },
+                  onFocus: (e) => {
+                    const currentValue = e.target.value;
+                    e.target.value = currentValue.replace(/[$,]/g, "");
+                  }
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+              Dropdown,
+              {
+                id: "creditScore",
+                ...register("creditScore", {
+                  required: true,
+                  setValueAs: (value) => Number(value)
+                }),
+                label: "Credit Score",
+                sizes: "medium",
+                required: true,
+                error: !!errors.creditScore,
+                helperText: errors.creditScore?.message,
+                variant: "tertiary",
+                defaultValue: "Select option",
+                children: [
+                  /* @__PURE__ */ jsx("option", { disabled: true, value: "Select option", children: "Select Option" }),
+                  /* @__PURE__ */ jsx("option", { value: "740", children: "740+" }),
+                  /* @__PURE__ */ jsx("option", { value: "720", children: "739-720" }),
+                  /* @__PURE__ */ jsx("option", { value: "700", children: "719-700" }),
+                  /* @__PURE__ */ jsx("option", { value: "680", children: "699-680" }),
+                  /* @__PURE__ */ jsx("option", { value: "660", children: "679-660" }),
+                  /* @__PURE__ */ jsx("option", { value: "640", children: "659-640" }),
+                  /* @__PURE__ */ jsx("option", { value: "620", children: "639-620" }),
+                  /* @__PURE__ */ jsx("option", { value: "600", children: "Below 620" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: loanPurpose === 1 ? fullRowForm : "", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "zipCode",
+                type: "number",
+                ...register("zipCode", {
+                  required: true,
+                  setValueAs: (value) => Number(value)
+                }),
+                label: "Zip Code",
+                sizes: "medium",
+                required: true,
+                error: !!errors.zipCode,
+                helperText: errors.zipCode?.message,
+                variant: "tertiary"
+              }
+            ) }),
+            loanPurpose === 2 ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "cashOut",
+                type: "number",
+                ...register("cashOut", {
+                  required: true,
+                  setValueAs: (value) => Number(value)
+                }),
+                label: "Cash Out (Optional)",
+                sizes: "medium",
+                required: true,
+                error: !!errors.cashOut,
+                helperText: errors.cashOut?.message,
+                variant: "tertiary"
+              }
+            ) }) }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: actions, children: isSubmitting ? /* @__PURE__ */ jsx(
+            LoadingIndicator,
+            {
+              style: { marginInline: "auto" },
+              variant: "tertiary"
+            }
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: "secondary",
+              as: "button",
+              type: "submit",
+              disabled: !isValid || isSubmitting,
+              children: "Apply Filters"
+            }
+          ) })
+        ] })
+      ] }) })
+    }
+  );
+};
+export {
+  MortgageRateFilters
+};

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

@@ -0,0 +1,28 @@
+export type RateWatchInputs = {
+    updateType: "Target Rate" | "Frequency";
+    updateCadence: "Daily" | "Weekly" | "Monthly";
+    loanTerms?: string;
+    hasSmsConsent: boolean;
+    tR1DesiredRate?: string;
+    tR1DiscountPoints?: string;
+    tR1LoanTerm?: string;
+    tR2DesiredRate?: string;
+    tR2DiscountPoints?: string;
+    tR2LoanTerm?: string;
+    tR3DesiredRate?: string;
+    tR3DiscountPoints?: string;
+    tR3LoanTerm?: string;
+    email: string;
+    lastName: string;
+};
+type RateWatchFormProps = {
+    email: string;
+    lastName: string;
+    rateWatchOnSubmit: (values: RateWatchInputs & {
+        email: string;
+        lastName: string;
+    }) => void;
+    toggleModal: () => void;
+};
+export declare const RateWatchForm: ({ email, lastName, rateWatchOnSubmit, toggleModal, }: RateWatchFormProps) => import("react/jsx-runtime").JSX.Element;
+export {};