@axos-web-dev/shared-components 2.0.0-dev.login → 2.0.0-dev.rateWatch

package/dist/LandingPageHeader/LandingPageHeader.js

@@ -1,8 +1,7 @@
-"use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import "../icons/ArrowIcon/ArrowIcon.css.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/NavBar2.css';import '../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar2.css';import '../assets/NavigationMenu/ServerNavigation/NavigationBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar2.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/Chatbot/ChatWindow.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.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/ImageToast/ImageToast.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/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                               */
 /* empty css                                    */
@@ -17,132 +16,8 @@ import SvgComponent$5 from "../icons/Logos/AXOS.js";
 import SvgComponent$6 from "../icons/Logos/GBLVF.js";
 import SvgComponent$7 from "../icons/Logos/SPB.js";
 import { getVariant } from "../utils/getVariant.js";
-import { svg_fill, spb_container, lp_container, spb_hover, lp_hover, lp_login_button, lp_theme } from "./LandingPageHeader.css.js";
-import { useState, useRef, useMemo, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import Link from "next/link.js";
-import { getLoginGroups } from "../NavigationMenu/AxosBank/MobileMenu/MobileNavData.js";
-import styles from "../NavigationMenu/AxosBank/MobileMenu/MobileMenu.module.js";
-import "../Chevron/Chevron.css.js";
-import "../Accordion/Accordion.js";
-import "../Accordion/Accordion.css.js";
-import "clsx";
-import "../AlertBanner/AlertBanner.css.js";
-import "../Article/Article.css.js";
-import { Button } from "../Button/Button.js";
-import "../Button/Button.css.js";
-import "react-use";
-import "../ArticlesSet/ArticlesSet.css.js";
-import "../IconBillboard/IconBillboard.css.js";
-import "../Calculators/calculator.css.js";
-import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
-import { useGlobalContext } from "../Modal/contextApi/store.js";
-import "next/image.js";
-import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-import "../Calculators/ApyCalculatorUserTest/ApyCalculatorUserTest.css.js";
-import "../HeroBanner/LargeBanner.css.js";
-import "../HeroBanner/HeroBanner.css.js";
-import "../HeroBanner/SelectionBanner.css.js";
-/* empty css                                          */
-/* empty css                                          */
-/* empty css                                          */
-import "../SetContainer/SetContainer.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 "../Input/PercentageInput.js";
-import "react-hook-form";
-import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
-import "../Forms/Forms.css.js";
-import "../Forms/HoneyPot/index.js";
-import "../Forms/SalesforceFieldsForm.js";
-import "../Input/RadioButton.css.js";
-import "../Input/Checkbox.css.js";
-import "../LoadingIndicator/LoadingIndicator.css.js";
-import "../Interstitial/Interstitial-variants.css.js";
-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";
-import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-/* empty css                                    */
-import "react-dom";
-/* empty css                                */
-import "../Auth/SignInPassword.js";
-/* empty css                                              */
-/* empty css                                          */
-/* empty css                                    */
-/* empty css                                                    */
-import "../Carousel/index.js";
-/* empty css                                                   */
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
-/* empty css                                   */
-import "../Chatbot/store/chat.js";
-import "../Chatbot/Chatbot.js";
-/* empty css                                       */
-import "../Chatbot/store/messages.js";
-/* empty css                                                                    */
-import "../Comparison/Comparison.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                                                          */
-/* empty css                                                         */
-/* empty css                                            */
-import "../ImageBillboard/ImageBillboard.css.js";
-import "next/script.js";
-/* empty css                                        */
-/* empty css                                        */
-/* empty css                                              */
-/* empty css                                                      */
-/* empty css                                            */
-/* empty css                                                      */
-import "next/navigation.js";
-/* empty css                                                         */
-/* empty css                                                              */
-/* empty css                                                                 */
-/* empty css                                                                  */
-import "../NavigationMenu/ServerNavigation/Menu.js";
-import "../NavigationMenu/ServerNavigation/SubNavbar.css.js";
-/* empty css                                                   */
-/* empty css                                                      */
-/* empty css                                                       */
-/* empty css                                                   */
-/* empty css                                                     */
-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                                                  */
-/* empty css                                                */
-/* empty css                                              */
-/* empty css                                */
+import { svg_fill, spb_container, lp_container, spb_hover, lp_hover, lp_theme } from "./LandingPageHeader.css.js";
+import { WithLogin } from "./WithLogin.js";
 const LandingPageHeader = ({
   id,
   variant: fullVariant = "primary",
@@ -181,64 +56,6 @@ const LandingPageHeader = ({
     ["SPB", /* @__PURE__ */ jsx(SvgComponent$7, { height: "100%", width: "100%" })]
   ]);
   const isSPBPage = project === "SPB";
-  const [open, setOpen] = useState(false);
-  const { resolveUrl } = useGlobalContext();
-  const [queryString, setQueryString] = useState("");
-  const [loginDrawerOpen, setLoginDrawerOpen] = useState(false);
-  const drawerRef = useRef(null);
-  const loginDrawerRef = useRef(null);
-  const loginGroups = useMemo(() => getLoginGroups(resolveUrl), [resolveUrl]);
-  const handleLoginDrawerOpen = () => setLoginDrawerOpen(true);
-  const handleLoginDrawerClose = () => setLoginDrawerOpen(false);
-  const handleLoginDrawerOutsideClick = (e) => {
-    if (loginDrawerRef.current && !loginDrawerRef.current.contains(e.target)) {
-      setLoginDrawerOpen(false);
-    }
-  };
-  const handleOutsideClick = (e) => {
-    if (drawerRef.current && !drawerRef.current.contains(e.target)) {
-      setOpen(false);
-    }
-  };
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const search = window.location.search;
-      if (search.startsWith("?")) {
-        setQueryString(search.slice(1));
-      }
-    }
-  }, []);
-  useEffect(() => {
-    if (open) {
-      document.addEventListener("mousedown", handleOutsideClick);
-    } else {
-      document.removeEventListener("mousedown", handleOutsideClick);
-    }
-    return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, [open]);
-  useEffect(() => {
-    const onEsc = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    if (open) {
-      document.addEventListener("keydown", onEsc);
-    }
-    return () => document.removeEventListener("keydown", onEsc);
-  }, [open]);
-  useEffect(() => {
-    if (!loginDrawerOpen) return;
-    document.addEventListener("mousedown", handleLoginDrawerOutsideClick);
-    return () => document.removeEventListener("mousedown", handleLoginDrawerOutsideClick);
-  }, [loginDrawerOpen]);
-  useEffect(() => {
-    const onEsc = (e) => {
-      if (e.key === "Escape") setLoginDrawerOpen(false);
-    };
-    if (loginDrawerOpen) {
-      document.addEventListener("keydown", onEsc);
-    }
-    return () => document.removeEventListener("keydown", onEsc);
-  }, [loginDrawerOpen]);
   return /* @__PURE__ */ jsx(
     "header",
     {
@@ -270,124 +87,7 @@ const LandingPageHeader = ({
                 ) : website.get(project)
               }
             ),
-            login && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  as: "button",
-                  className: lp_login_button,
-                  action: handleLoginDrawerOpen,
-                  "aria-label": "Open login options",
-                  size: "small",
-                  color: variant === "primary" || variant === "secondary" ? "primary" : "secondary",
-                  children: "Log in"
-                }
-              ),
-              /* @__PURE__ */ jsx(AnimatePresence, { children: loginDrawerOpen && /* @__PURE__ */ jsx(
-                motion.div,
-                {
-                  className: styles.overlay,
-                  initial: { opacity: 0 },
-                  animate: { opacity: 1 },
-                  exit: { opacity: 0 },
-                  children: /* @__PURE__ */ jsxs(
-                    motion.div,
-                    {
-                      className: `${styles.drawer} flex_col`,
-                      ref: loginDrawerRef,
-                      initial: { x: "100%" },
-                      animate: { x: 0 },
-                      exit: { x: "30%" },
-                      transition: { type: "tween", duration: 0.3 },
-                      role: "dialog",
-                      "aria-modal": "true",
-                      "aria-label": "Login options",
-                      children: [
-                        /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-                          /* @__PURE__ */ jsx(
-                            "a",
-                            {
-                              href: window.location.href.split("/")[3] === "invest" ? "/invest" : "/",
-                              "aria-label": "return to home page",
-                              children: /* @__PURE__ */ jsx(
-                                "img",
-                                {
-                                  src: "https://www.axos.com/images/1sBwCIn5mqOg5DK2uXDJPc/axb_mobile_logo.png",
-                                  alt: "",
-                                  width: 86,
-                                  height: 19
-                                }
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("span", { className: styles.loginDrawerTitle, children: "Log in" }),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "button",
-                              className: `${styles.close} flex_col`,
-                              "aria-label": "Close login options",
-                              onClick: handleLoginDrawerClose,
-                              children: /* @__PURE__ */ jsx(
-                                "svg",
-                                {
-                                  xmlns: "http://www.w3.org/2000/svg",
-                                  width: "24",
-                                  height: "24",
-                                  viewBox: "0 0 24 24",
-                                  fill: "none",
-                                  "aria-hidden": "true",
-                                  children: /* @__PURE__ */ jsx(
-                                    "path",
-                                    {
-                                      d: "M20.2812 2.65625L21.3419 3.71691L13.0602 11.9982L21.3419 20.2812L20.2812 21.3419L11.9982 13.0602L3.71691 21.3419L2.65625 20.2812L10.9377 11.9982L2.65625 3.71691L3.71691 2.65625L11.9982 10.9377L20.2812 2.65625Z",
-                                      fill: "#14263D"
-                                    }
-                                  )
-                                }
-                              )
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsx("div", { className: styles.loginDrawerContent, children: /* @__PURE__ */ jsx("div", { className: styles.loginAccordion, children: /* @__PURE__ */ jsx(
-                          "ul",
-                          {
-                            className: styles.loginAccordionList,
-                            "aria-label": "Login options",
-                            children: loginGroups.map((group) => /* @__PURE__ */ jsxs(
-                              "li",
-                              {
-                                className: styles.loginAccordionGroup,
-                                "aria-label": `${group.heading} login options`,
-                                children: [
-                                  /* @__PURE__ */ jsx("span", { className: styles.loginAccordionHeading, children: group.heading }),
-                                  /* @__PURE__ */ jsx("ul", { className: styles.loginAccordionGroupList, children: group.items.map((item) => /* @__PURE__ */ jsx(
-                                    "li",
-                                    {
-                                      "aria-label": `access ${item.title}`,
-                                      children: /* @__PURE__ */ jsx(
-                                        Link,
-                                        {
-                                          href: item.url + (queryString && !item.url.includes("?") ? `?${queryString}` : ""),
-                                          className: styles.menuItem,
-                                          children: /* @__PURE__ */ jsx("span", { children: item.title })
-                                        }
-                                      )
-                                    },
-                                    item.title
-                                  )) })
-                                ]
-                              },
-                              group.heading
-                            ))
-                          }
-                        ) }) })
-                      ]
-                    }
-                  )
-                }
-              ) })
-            ] })
+            login && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(WithLogin, { variant }) })
           ]
         }
       )

package/dist/LandingPageHeader/WithLogin.d.ts

@@ -0,0 +1,4 @@
+export interface WithLoginProps {
+    variant: string;
+}
+export declare const WithLogin: ({ variant }: WithLoginProps) => import("react").JSX.Element;