@axos-web-dev/shared-components 1.0.99-feature-brand.2 → 1.0.99-feature-toasts

package/dist/Forms/ApplyNow.js

@@ -6,7 +6,7 @@ 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";
-import '../assets/Modal/Modal.css';import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+import '../assets/Modal/Modal.css';import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/ImageToast/ImageToast.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
@@ -44,9 +44,13 @@ import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
 import "../Input/DownPaymentInput.js";
 import "../Input/RadioButton.js";
+import "../Input/PercentageInput.js";
 import "react-hook-form";
-import { iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, step_title_apply_now, form_nav_apply_now, iconbillboards_option_apply_now, show_options, hide_options, back_btn_apply_now, disclosureForm, formContainer } from "./Forms.css.js";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
+import { iconForm, headerForm, form, descriptionField, axosHeader, headerContainer, apply_now_form, formWrapper, step_title_apply_now, form_nav_apply_now, iconbillboards_option_apply_now, show_options, hide_options, back_btn_apply_now, disclosureForm, formContainer } from "./Forms.css.js";
+import "./HoneyPot/index.js";
 import "./SalesforceFieldsForm.js";
+import { getLink } from "./applynow-utils.js";
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
@@ -60,8 +64,6 @@ import "iframe-resizer";
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-import "../Input/PercentageInput.js";
-import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 /* empty css                                    */
 import "react-dom";
 /* empty css                                */
@@ -76,6 +78,7 @@ import "next/image.js";
 import "../HeroBanner/HeroBanner.css.js";
 import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
+/* empty css                                          */
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";
 import "../icons/Star/Star.css.js";
@@ -134,21 +137,46 @@ const ApplyNow = ({
   headline,
   description,
   id,
-  gbf = false
+  gbf = false,
+  project = "lvf"
 }) => {
+  const headers = [
+    "Choose the boat loan that fits your needs.",
+    "How are you going to use your boat?",
+    "Will you hold your boat in LLC or personally own it?"
+  ];
   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)
+        selection: state.selection.includes("Inventory Finance") ? [] : state.selection.slice(0, -1),
+        title: headers[state.step - 2] || headers[0]
+      };
+    }
+    if (action.type == "Initial") {
+      return {
+        ...state,
+        step: 1,
+        selection: [],
+        title: "Choose the boat loan that fits your needs."
       };
     }
     if (action.type == "Term") {
-      return { ...state, step: 2, selection: ["Term"] };
+      return {
+        ...state,
+        step: 2,
+        selection: ["Term"],
+        title: "How are you going to use your boat?"
+      };
     }
     if (action.type == "Credit Line") {
-      return { ...state, step: 2, selection: ["Credit Line"] };
+      return {
+        ...state,
+        step: 2,
+        selection: ["Credit Line"],
+        title: "How are you going to use your boat?"
+      };
     }
     if (action.type == "Inventory Finance") {
       return { ...state, step: 4, selection: ["Inventory Finance"] };
@@ -157,31 +185,40 @@ const ApplyNow = ({
       return {
         ...state,
         step: 3,
-        selection: [...state.selection, "Limited Charter"]
+        selection: [...state.selection, "Limited Charter"],
+        title: "Will you hold your boat in LLC or personally own it?"
       };
     }
     if (action.type == "Personal Use") {
       return {
         ...state,
         step: 3,
-        selection: [...state.selection, "Personal Use"]
+        selection: [...state.selection, "Personal Use"],
+        title: "Will you hold your boat in LLC or personally own it?"
       };
     }
     if (action.type == "Full-time Charter") {
       return {
         ...state,
         step: 3,
-        selection: [...state.selection, "Full-time Charter"]
+        selection: [...state.selection, "Full-time Charter"],
+        title: "Will you hold your boat in LLC or personally own it?"
       };
     }
     if (action.type == "LLC") {
-      return { ...state, step: 4, selection: [...state.selection, "LLC"] };
+      return {
+        ...state,
+        step: 4,
+        selection: [...state.selection, "LLC"],
+        title: "Get ready to start your application."
+      };
     }
     if (action.type == "Personal") {
       return {
         ...state,
         step: 4,
-        selection: [...state.selection, "Personal"]
+        selection: [...state.selection, "Personal"],
+        title: "Get ready to start your application."
       };
     }
     if (action.type == "URL") {
@@ -196,26 +233,39 @@ const ApplyNow = ({
   const [stateRed, dispatch] = useReducer(reducer, {
     url: "",
     selection: [],
-    step: 1
+    step: 1,
+    title: "Choose the boat loan that fits your needs."
   });
   const variant = getVariant(fullVariant);
+  const backButtonVariant = ["tertiary", "quaternary"].includes(variant) && project !== "lvf" ? "tertiary" : "primary";
   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__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          project === "lvf" ? axosHeader : "",
+          `${headerContainer} text_center`,
+          headerForm({ variant })
+        ),
+        children: [
+          /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: stateRed.title ?? headline }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                "text_center",
+                form,
+                descriptionField({ variant }),
+                project === "axos" && stateRed.step > 1 ? "hide" : ""
+              ),
+              children: description
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("form", { className: project === "lvf" ? form : apply_now_form, children: [
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -234,30 +284,48 @@ const ApplyNow = ({
               stateRed.step == 1 ? show_options : hide_options
             ),
             children: [
-              /* @__PURE__ */ jsx("div", { className: clsx(form_nav_apply_now), children: /* @__PURE__ */ jsx(
-                "p",
+              /* @__PURE__ */ jsx(
+                "div",
                 {
                   className: clsx(
-                    "header_2",
-                    headerForm({ variant }),
-                    step_title_apply_now
+                    form_nav_apply_now,
+                    project !== "lvf" ? "hide" : ""
                   ),
-                  children: "Step One"
+                  children: /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: clsx(
+                        "header_2",
+                        headerForm({ variant }),
+                        step_title_apply_now
+                      ),
+                      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.",
+                    body: project === "lvf" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "I am buying a new or used boat ",
+                      /* @__PURE__ */ jsx("strong", { children: "or" }),
+                      " I am looking for a Preapproval."
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "I'm ready to begin a boat loan application",
+                      " ",
+                      /* @__PURE__ */ jsx("strong", { children: "or" }),
+                      " get preapproved."
+                    ] }),
                     callToActionRow: [
                       {
                         id: "Term",
                         targetUrl: "#",
-                        displayText: "Select",
-                        variant: "secondary",
-                        type: "Button",
+                        displayText: project === "lvf" ? "Select" : "Get Started",
+                        variant: project === "lvf" ? "secondary" : "primary",
+                        type: project === "lvf" ? "Button" : "Chevron",
                         as: "button",
                         onClick: () => {
                           dispatch({ type: "Term" });
@@ -269,48 +337,50 @@ const ApplyNow = ({
                     variant: "primary"
                   }
                 ),
-                gbf && /* @__PURE__ */ jsx(
-                  IconBillboard,
-                  {
-                    headline: "Credit Line",
-                    body: "I want to make improvements on my boat.",
-                    callToActionRow: [
-                      {
-                        id: "Credit Line",
-                        targetUrl: "#",
-                        displayText: "Select",
-                        variant: "secondary",
-                        type: "Button",
-                        as: "button",
-                        onClick: () => {
-                          dispatch({ type: "Credit Line" });
-                          dispatch({ type: "URL" });
+                project === "lvf" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  gbf && /* @__PURE__ */ jsx(
+                    IconBillboard,
+                    {
+                      headline: "Credit Line",
+                      body: "I want to make improvements on my boat.",
+                      callToActionRow: [
+                        {
+                          id: "Credit Line",
+                          targetUrl: "#",
+                          displayText: "Select",
+                          variant: "secondary",
+                          type: "Button",
+                          as: "button",
+                          onClick: () => {
+                            dispatch({ type: "Credit Line" });
+                            dispatch({ type: "URL" });
+                          }
                         }
-                      }
-                    ],
-                    id: "Credit Line",
-                    variant: "primary"
-                  }
-                ),
-                !gbf && /* @__PURE__ */ jsx(
-                  IconBillboard,
-                  {
-                    headline: "Inventory Finance",
-                    body: "I am a boat dealer purchasing multiple boats in the future.",
-                    callToActionRow: [
-                      {
-                        id: "Inventory Finance",
-                        targetUrl: "/contact-us",
-                        displayText: "Select",
-                        variant: "secondary",
-                        type: "Button",
-                        as: "a"
-                      }
-                    ],
-                    id: "billboard-term",
-                    variant: "primary"
-                  }
-                )
+                      ],
+                      id: "Credit Line",
+                      variant: "primary"
+                    }
+                  ),
+                  !gbf && /* @__PURE__ */ jsx(
+                    IconBillboard,
+                    {
+                      headline: "Inventory Finance",
+                      body: "I am a boat dealer purchasing multiple boats in the future.",
+                      callToActionRow: [
+                        {
+                          id: "Inventory Finance",
+                          targetUrl: "/contact-us",
+                          displayText: "Select",
+                          variant: "secondary",
+                          type: "Button",
+                          as: "a"
+                        }
+                      ],
+                      id: "billboard-term",
+                      variant: "primary"
+                    }
+                  )
+                ] })
               ] })
             ]
           }
@@ -331,8 +401,9 @@ const ApplyNow = ({
                     action: () => {
                       dispatch({ type: "back" });
                       dispatch({ type: "URL" });
+                      dispatch({ type: "Initial" });
                     },
-                    variant: "primary",
+                    variant: backButtonVariant,
                     targetUrl: "#",
                     displayText: "Back",
                     leftArrow: true,
@@ -346,7 +417,8 @@ const ApplyNow = ({
                     className: clsx(
                       "header_2",
                       headerForm({ variant }),
-                      step_title_apply_now
+                      step_title_apply_now,
+                      project !== "lvf" ? "hide" : ""
                     ),
                     children: "Step Two"
                   }
@@ -363,8 +435,8 @@ const ApplyNow = ({
                         id: "Full-time Charter",
                         targetUrl: "#",
                         displayText: "Select",
-                        variant: "secondary",
-                        type: "Button",
+                        variant: project === "lvf" ? "secondary" : "primary",
+                        type: project === "lvf" ? "Button" : "Chevron",
                         as: "button",
                         onClick: () => {
                           dispatch({ type: "Full-time Charter" });
@@ -386,8 +458,8 @@ const ApplyNow = ({
                         id: "Limited-charter",
                         targetUrl: "#",
                         displayText: "Select",
-                        variant: "secondary",
-                        type: "Button",
+                        variant: project === "lvf" ? "secondary" : "primary",
+                        type: project === "lvf" ? "Button" : "Chevron",
                         as: "button",
                         onClick: () => {
                           dispatch({ type: "Limited Charter" });
@@ -409,8 +481,8 @@ const ApplyNow = ({
                         id: "personal-use",
                         targetUrl: "#",
                         displayText: "Select",
-                        variant: "secondary",
-                        type: "Button",
+                        variant: project === "lvf" ? "secondary" : "primary",
+                        type: project === "lvf" ? "Button" : "Chevron",
                         as: "button",
                         onClick: () => {
                           dispatch({ type: "Personal Use" });
@@ -443,7 +515,7 @@ const ApplyNow = ({
                       dispatch({ type: "back" });
                       dispatch({ type: "URL" });
                     },
-                    variant: "primary",
+                    variant: backButtonVariant,
                     targetUrl: "",
                     displayText: "Back",
                     leftArrow: true,
@@ -457,7 +529,8 @@ const ApplyNow = ({
                     className: clsx(
                       "header_2",
                       headerForm({ variant }),
-                      step_title_apply_now
+                      step_title_apply_now,
+                      project !== "lvf" ? "hide" : ""
                     ),
                     children: "Step Three"
                   }
@@ -474,8 +547,8 @@ const ApplyNow = ({
                         id: "llc",
                         targetUrl: "#",
                         displayText: "Select",
-                        variant: "secondary",
-                        type: "Button",
+                        variant: project === "lvf" ? "secondary" : "primary",
+                        type: project === "lvf" ? "Button" : "Chevron",
                         as: "button",
                         onClick: () => {
                           dispatch({ type: "LLC" });
@@ -497,8 +570,8 @@ const ApplyNow = ({
                         id: "personal",
                         targetUrl: "#",
                         displayText: "Select",
-                        variant: "secondary",
-                        type: "Button",
+                        variant: project === "lvf" ? "secondary" : "primary",
+                        type: project === "lvf" ? "Button" : "Chevron",
                         as: "button",
                         onClick: () => {
                           dispatch({ type: "Personal" });
@@ -531,8 +604,8 @@ const ApplyNow = ({
                       dispatch({ type: "back" });
                       dispatch({ type: "URL" });
                     },
-                    variant: "primary",
-                    targetUrl: "#!",
+                    variant: backButtonVariant,
+                    targetUrl: "#",
                     displayText: "Back",
                     leftArrow: true,
                     classNameWrapper: clsx(back_btn_apply_now),
@@ -566,8 +639,8 @@ const ApplyNow = ({
                     {
                       id: "Inventory Finance",
                       targetUrl: stateRed.url,
-                      displayText: "Select",
-                      variant: "secondary",
+                      displayText: project === "lvf" ? "Select" : "Start Application",
+                      variant: project === "lvf" ? "secondary" : "primary",
                       type: "Button",
                       as: "a"
                     }
@@ -585,52 +658,6 @@ const ApplyNow = ({
     ] })
   ] }) }) }, 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
+  ApplyNow
 };

package/dist/Forms/ClearingForm.d.ts

@@ -11,4 +11,4 @@ export type ClearingInputs = {
     Memo__c: string;
     business_type_selection: string;
 };
-export declare const ClearingForm: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ClearingForm: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, onValidate, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;