@axos-web-dev/shared-components 0.0.196 → 0.0.197

package/dist/Forms/ApplyNow.js

@@ -0,0 +1,599 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { IconBillboard } from "../IconBillboard/IconBillboard.js";
+import "../IconBillboard/IconBillboard.css.js";
+import "../icons/ArrowIcon/ArrowIcon.css.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                                                */
+import "../utils/allowedAxosDomains.js";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+/* empty css                                          */
+/* empty css                                          */
+import { Chevron } from "../Chevron/index.js";
+import "../Interstitial/Interstitial-variants.css.js";
+import "../Chevron/Chevron.css.js";
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../AlertBanner/AlertBanner.css.js";
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+import { useReducer } from "react";
+import "../Calculators/calculator.css.js";
+import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
+import "../Button/Button.css.js";
+import "../Calculators/ApyCalculator/ApyCalculator.css.js";
+import "../Table/Table.css.js";
+import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import "@hookform/resolvers/zod";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+import "../Input/Dropdown.css.js";
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputAmount.js";
+import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import "../Input/DownPaymentInput.js";
+import "../Input/RadioButton.js";
+import "react-hook-form";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, show_options, hide_options, form_nav_apply_now, iconbillboards_option_apply_now, back_btn_apply_now, disclosureForm } from "./Forms.css.js";
+import "./SalesforceFieldsForm.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
+import "react-use";
+import "../Inputs/Input.css.js";
+/* empty css                                                  */
+import "../Hyperlink/Hyperlink.css.js";
+/* empty css                                               */
+import "iframe-resizer";
+/* empty css                                                                                */
+import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
+/* empty css                                              */
+/* empty css                                          */
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../Comparison/Comparison.css.js";
+import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
+import "../HeroBanner/SelectionBanner.css.js";
+import "../SetContainer/SetContainer.css.js";
+import "../Tab/Tab.css.js";
+import "../icons/Star/Star.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
+/* empty css                                              */
+/* empty css                                                      */
+/* empty css                                            */
+/* empty css                                    */
+import "../LandingPageHeader/LandingPageHeader.css.js";
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                                 */
+/* empty css                                                   */
+import "../NavigationMenu/AxosBank/NavData.js";
+import "next/image.js";
+import "next/link.js";
+import "next/navigation.js";
+/* empty css                                                      */
+/* empty css                                                       */
+/* empty css                                                     */
+import "../NavigationMenu/LaVictoire/NavData.js";
+import "../PageNavItem/PageNavItem.css.js";
+import "react-slick";
+/* 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                                */
+import "../Modal/contextApi/store.js";
+const ApplyNow = ({
+  icon = false,
+  children,
+  disclosure,
+  variant: fullVariant = "primary",
+  headline,
+  description,
+  id
+}) => {
+  const reducer = (state, action) => {
+    if (action.type == "back") {
+      return {
+        ...state,
+        step: state.selection.includes("Inventory Finance") ? 1 : state.step > 0 ? state.step - 1 : 1,
+        selection: state.selection.includes("Inventory Finance") ? [] : state.selection.slice(0, -1)
+      };
+    }
+    if (action.type == "Term") {
+      return { ...state, step: 2, selection: ["Term"] };
+    }
+    if (action.type == "Inventory Finance") {
+      return { ...state, step: 4, selection: ["Inventory Finance"] };
+    }
+    if (action.type == "Limited Charter") {
+      return {
+        ...state,
+        step: 3,
+        selection: [...state.selection, "Limited Charter"]
+      };
+    }
+    if (action.type == "Personal Use") {
+      return {
+        ...state,
+        step: 3,
+        selection: [...state.selection, "Personal Use"]
+      };
+    }
+    if (action.type == "Full-time Charter") {
+      return {
+        ...state,
+        step: 3,
+        selection: [...state.selection, "Full-time Charter"]
+      };
+    }
+    if (action.type == "LLC") {
+      return { ...state, step: 4, selection: [...state.selection, "LLC"] };
+    }
+    if (action.type == "Personal") {
+      return {
+        ...state,
+        step: 4,
+        selection: [...state.selection, "Personal"]
+      };
+    }
+    if (action.type == "URL") {
+      const url = getLink(state.selection);
+      return {
+        ...state,
+        url
+      };
+    }
+    return state;
+  };
+  const [stateRed, dispatch] = useReducer(reducer, {
+    url: "",
+    selection: [],
+    step: 1
+  });
+  const variant = getVariant(fullVariant);
+  return /* @__PURE__ */ jsx("section", { id, className: clsx(formContainer({ variant })), children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(Fragment, { 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: `${headerContainer} text_center`, children: [
+      /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
+      description && typeof description === "string" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            "text_center",
+            form,
+            descriptionField({ variant })
+          ),
+          children: description
+        }
+      ) : description
+    ] }),
+    /* @__PURE__ */ jsxs("form", { className: form, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(formWrapper({ variant, formType: "email" }))
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flexDirection: "column",
+              gap: "2em"
+            },
+            className: clsx(
+              stateRed.step == 1 ? show_options : hide_options
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: clsx(form_nav_apply_now), children: /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: clsx("header_2", headerForm({ variant })),
+                  style: {
+                    margin: "auto ",
+                    maxWidth: "fit-content"
+                  },
+                  children: "Step one"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: clsx(iconbillboards_option_apply_now), children: [
+                /* @__PURE__ */ jsx(
+                  IconBillboard,
+                  {
+                    headline: "Term Loans",
+                    body: "I am buying a new or used boat OR I am looking for a Preapproval.",
+                    callToActionRow: [
+                      {
+                        id: "Term",
+                        targetUrl: "#",
+                        displayText: "Select",
+                        variant: "secondary",
+                        type: "Button",
+                        as: "button",
+                        onClick: () => {
+                          dispatch({ type: "Term" });
+                          dispatch({ type: "URL" });
+                        }
+                      }
+                    ],
+                    id: "billboard-term",
+                    variant: "primary"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconBillboard,
+                  {
+                    headline: "Inventory Finance",
+                    body: "I am a boat dealer purchasing multiple boats in the future.",
+                    callToActionRow: [
+                      {
+                        id: "Inventory Finance",
+                        targetUrl: "#",
+                        displayText: "Select",
+                        variant: "secondary",
+                        type: "Button",
+                        as: "button",
+                        onClick: () => {
+                          dispatch({ type: "Inventory Finance" });
+                          dispatch({ type: "URL" });
+                        }
+                      }
+                    ],
+                    id: "billboard-term",
+                    variant: "primary"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { flexDirection: "column", gap: 24 },
+            className: clsx(
+              stateRed.step == 2 ? show_options : hide_options
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: clsx(form_nav_apply_now), children: [
+                /* @__PURE__ */ jsx(
+                  Chevron,
+                  {
+                    as: "button",
+                    action: () => {
+                      dispatch({ type: "back" });
+                      dispatch({ type: "URL" });
+                    },
+                    variant: "primary",
+                    targetUrl: "#",
+                    displayText: "Back",
+                    leftArrow: true,
+                    classNameWrapper: clsx(back_btn_apply_now),
+                    children: "Back"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: clsx("header_2", headerForm({ variant })),
+                    style: {
+                      margin: "auto ",
+                      maxWidth: "fit-content"
+                    },
+                    children: "Step two"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: clsx(iconbillboards_option_apply_now), children: [
+                /* @__PURE__ */ jsx(
+                  IconBillboard,
+                  {
+                    headline: "Full-time Charter",
+                    body: "My vessel will be available for full-time charter.",
+                    callToActionRow: [
+                      {
+                        id: "Full-time Charter",
+                        targetUrl: "#",
+                        displayText: "Select",
+                        variant: "secondary",
+                        type: "Button",
+                        as: "button",
+                        onClick: () => {
+                          dispatch({ type: "Full-time Charter" });
+                          dispatch({ type: "URL" });
+                        }
+                      }
+                    ],
+                    id: "billboard-term",
+                    variant: "primary"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconBillboard,
+                  {
+                    headline: "Limited Charter",
+                    body: "I plan to charter my vessel for a maximum of 73 days per year.",
+                    callToActionRow: [
+                      {
+                        id: "Limited-charter",
+                        targetUrl: "#",
+                        displayText: "Select",
+                        variant: "secondary",
+                        type: "Button",
+                        as: "button",
+                        onClick: () => {
+                          dispatch({ type: "Limited Charter" });
+                          dispatch({ type: "URL" });
+                        }
+                      }
+                    ],
+                    id: "billboard-term",
+                    variant: "primary"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconBillboard,
+                  {
+                    headline: "Personal Use",
+                    body: "I’ll use my vessel for my own personal enjoyment.",
+                    callToActionRow: [
+                      {
+                        id: "personal-use",
+                        targetUrl: "#",
+                        displayText: "Select",
+                        variant: "secondary",
+                        type: "Button",
+                        as: "button",
+                        onClick: () => {
+                          dispatch({ type: "Personal Use" });
+                          dispatch({ type: "URL" });
+                        }
+                      }
+                    ],
+                    id: "billboard-term",
+                    variant: "primary"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { gap: 24, flexDirection: "column" },
+            className: clsx(
+              stateRed.step == 3 ? show_options : hide_options
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: clsx(form_nav_apply_now), children: [
+                /* @__PURE__ */ jsx(
+                  Chevron,
+                  {
+                    as: "button",
+                    action: () => {
+                      dispatch({ type: "back" });
+                      dispatch({ type: "URL" });
+                    },
+                    variant: "primary",
+                    targetUrl: "",
+                    displayText: "Back",
+                    leftArrow: true,
+                    classNameWrapper: clsx(back_btn_apply_now),
+                    children: "Back"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: clsx("header_2", headerForm({ variant })),
+                    style: {
+                      margin: "auto ",
+                      maxWidth: "fit-content"
+                    },
+                    children: "Step Three"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: clsx(iconbillboards_option_apply_now), children: [
+                /* @__PURE__ */ jsx(
+                  IconBillboard,
+                  {
+                    headline: "Hold in LLC",
+                    body: "My vessel will be owned by a single-asset LLC.",
+                    callToActionRow: [
+                      {
+                        id: "llc",
+                        targetUrl: "#",
+                        displayText: "Select",
+                        variant: "secondary",
+                        type: "Button",
+                        as: "button",
+                        onClick: () => {
+                          dispatch({ type: "LLC" });
+                          dispatch({ type: "URL" });
+                        }
+                      }
+                    ],
+                    id: "billboard-term",
+                    variant: "primary"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconBillboard,
+                  {
+                    headline: "Own Personally",
+                    body: "My vessel will be held in my personal name and/or jointly with others.",
+                    callToActionRow: [
+                      {
+                        id: "personal",
+                        targetUrl: "#",
+                        displayText: "Select",
+                        variant: "secondary",
+                        type: "Button",
+                        as: "button",
+                        onClick: () => {
+                          dispatch({ type: "Personal" });
+                          dispatch({ type: "URL" });
+                        }
+                      }
+                    ],
+                    id: "billboard-term",
+                    variant: "primary"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { gap: 24, flexDirection: "column" },
+            className: clsx(
+              stateRed.step == 4 ? show_options : hide_options
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: clsx(form_nav_apply_now), children: [
+                /* @__PURE__ */ jsx(
+                  Chevron,
+                  {
+                    as: "button",
+                    action: () => {
+                      dispatch({ type: "back" });
+                      dispatch({ type: "URL" });
+                    },
+                    variant: "primary",
+                    targetUrl: "#!",
+                    displayText: "Back",
+                    leftArrow: true,
+                    classNameWrapper: clsx(back_btn_apply_now),
+                    children: "Back"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      margin: "auto ",
+                      fontSize: "2.5em",
+                      maxWidth: "fit-content"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 24 }, children: /* @__PURE__ */ jsx(
+                IconBillboard,
+                {
+                  headline: "We're about to send you to our loan portal.",
+                  body: /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("p", { children: [
+                      "You've Selected:",
+                      /* @__PURE__ */ jsx("br", {}),
+                      stateRed?.selection?.join(" | ")
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { children: "A new page will begin the loan application process. It typically takes a few minutes to complete and does not commit you to the loan." })
+                  ] }),
+                  callToActionRow: [
+                    {
+                      id: "Inventory Finance",
+                      targetUrl: stateRed.url,
+                      displayText: "Select",
+                      variant: "secondary",
+                      type: "Button",
+                      as: "a"
+                    }
+                  ],
+                  id: "billboard-term",
+                  variant: "primary"
+                }
+              ) })
+            ]
+          }
+        )
+      ] }) }),
+      children,
+      /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure })
+    ] })
+  ] }) }) }, id);
+};
+const getLink = (selection) => {
+  const formSelection = selection.join(" | ");
+  let url = "{LVFMYSITE}/Portal/nPortal__SelfRegistration?core=es5";
+  switch (formSelection) {
+    case "Term | Full-time Charter | LLC":
+      url += "&product=a0u5e000001XiAo";
+      break;
+    case "Term | Limited Charter | LLC":
+      url += "&product=a0u5e000001XiAp";
+      break;
+    case "Term | Personal Use | LLC":
+      url += "&product=a0u5e000001XiB3";
+      break;
+    case "Term | Full-time Charter | Personal":
+      url += "&product=a0u5e000001Wfd5";
+      break;
+    case "Term | Limited Charter | Personal":
+      url += "&product=a0u5e000001WfdA";
+      break;
+    case "Term | Personal Use | Personal":
+      url += "&product=a0u5e000001WfdB";
+      break;
+    case "Credit Line | Full-time Charter | LLC":
+      url += "&product=a0u8W00002DhceX";
+      break;
+    case "Credit Line | Limited Charter | LLC":
+      url += "&product=a0u8W00002DhceY";
+      break;
+    case "Credit Line | Personal Use | LLC":
+      url += "&product=a0u8W00002DhceZ";
+      break;
+    case "Credit Line | Full-time Charter | Personal":
+      url += "&product=a0u8W00002DhceS";
+      break;
+    case "Credit Line | Limited Charter | Personal":
+      url += "&product=a0u8W00002DhceT";
+      break;
+    case "Credit Line | Personal Use | Personal":
+      url += "&product=a0u8W00002DhceU";
+      break;
+    default:
+      url += "&product=a0u5e000000hzHz";
+  }
+  return url;
+};
+export {
+  ApplyNow,
+  getLink
+};

package/dist/Forms/ContactUsBusiness.js

@@ -23,6 +23,7 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
 import "react";
 import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
@@ -33,7 +34,6 @@ import "react-use";
 import "../ArticlesSet/ArticlesSet.css.js";
 import "../IconBillboard/IconBillboard.css.js";
 import "../utils/allowedAxosDomains.js";
-import clsx from "clsx";
 import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
@@ -44,6 +44,8 @@ import { useForm, FormProvider } from "react-hook-form";
 import { z } from "zod";
 import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+/* empty css                                          */
+/* empty css                                          */
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
@@ -58,8 +60,6 @@ import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js"
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
-/* empty css                                          */
-/* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */

package/dist/Forms/ContactUsNMLSId.js

@@ -23,6 +23,7 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
 import "react";
 import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
@@ -33,7 +34,6 @@ import "react-use";
 import "../ArticlesSet/ArticlesSet.css.js";
 import "../IconBillboard/IconBillboard.css.js";
 import "../utils/allowedAxosDomains.js";
-import clsx from "clsx";
 import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
@@ -44,6 +44,8 @@ import { useForm, FormProvider } from "react-hook-form";
 import { z } from "zod";
 import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+/* empty css                                          */
+/* empty css                                          */
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
@@ -58,8 +60,6 @@ import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js"
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
-/* empty css                                          */
-/* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */