@axos-web-dev/shared-components 2.0.0-dev.2 → 2.0.0-dev.2-nav-0

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.d.ts

@@ -1,2 +1,13 @@
-declare const MobileDrawerMenu: () => import("react/jsx-runtime").JSX.Element;
+import { Navigation } from '../../utils';
+
+export interface MenuLink {
+    url: string;
+    ariaLabel: string;
+}
+export interface MenuTree {
+    [label: string]: MenuLink | MenuTree;
+}
+declare const MobileDrawerMenu: ({ menu }: {
+    menu: Navigation;
+}) => import("react/jsx-runtime").JSX.Element;
 export default MobileDrawerMenu;

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.js

@@ -1,11 +1,5 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useRef, useMemo, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { usePathname } from "next/navigation.js";
-import Link from "next/link.js";
-import { getMenuData, getLoginGroups, getQuickLinks } from "./MobileNavData.js";
-import styles from "./MobileMenu.module.js";
 import "../../../Chevron/Chevron.css.js";
 import "../../../Accordion/Accordion.js";
 import "../../../Accordion/Accordion.css.js";
@@ -18,6 +12,7 @@ import '../../../assets/Modal/Modal.css';import '../../../assets/VideoWrapper/Vi
 /* empty css                                                          */
 /* empty css                                                      */
 import "clsx";
+import { useRef, useReducer, useState, useEffect } from "react";
 import "../../../AlertBanner/AlertBanner.css.js";
 import "../../../Article/Article.css.js";
 import "../../../IconBillboard/IconBillboard.css.js";
@@ -25,7 +20,7 @@ import "../../../IconBillboard/IconBillboard.css.js";
 /* empty css                                                */
 import "../../../Interstitial/Interstitial-variants.css.js";
 import "../../../Button/Button.css.js";
-import "react-use";
+import { useClickAway } from "react-use";
 import "../../../ArticlesSet/ArticlesSet.css.js";
 import "../../../Calculators/calculator.css.js";
 import "../../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
@@ -73,6 +68,7 @@ import "../../../Auth/SignInPassword.js";
 /* empty css                                          */
 /* empty css                                                          */
 import "../../../Carousel/index.js";
+import { AnimatePresence, motion } from "framer-motion";
 /* empty css                                                         */
 /* empty css                                         */
 import "../../../Chatbot/store/chat.js";
@@ -106,14 +102,17 @@ import "next/script.js";
 /* empty css                                                  */
 import "../../../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                          */
+import { usePathname } from "next/navigation.js";
 /* empty css                                             */
 /* empty css                                                  */
 /* empty css                                                     */
 /* empty css                           */
+import "../Menu.js";
 /* empty css                              */
 /* empty css                                           */
 /* empty css                                       */
 /* empty css                                         */
+import Link from "next/link.js";
 import "../../../PageNavItem/PageNavItem.css.js";
 import "react-slick";
 /* empty css                                                       */
@@ -128,6 +127,9 @@ import "../../../StepItemSet/StepItemSet.css.js";
 /* empty css                                                      */
 /* empty css                                                    */
 /* empty css                                      */
+import styles from "./MobileMenu.module.js";
+import { mobileData } from "./MobileNavData.js";
+import { MenuActions, reducer } from "./mobileReducer.js";
 const slideVariants = {
   enter: (direction) => ({
     x: direction === "forward" ? "100%" : "-100%",
@@ -146,30 +148,43 @@ const slideVariants = {
     position: "absolute"
   })
 };
-const MobileDrawerMenu = () => {
-  const pathname = usePathname();
+const initialState = {
+  direction: "forward",
+  isMobileMenuOpen: false,
+  hasOpenedOnce: false,
+  prevLevel: [],
+  currentMenuData: null,
+  stack: [],
+  loginDrawer: false,
+  loginData: {}
+};
+const MobileDrawerMenu = ({ menu }) => {
   const { resolveUrl } = useGlobalContext();
-  const menuData = getMenuData(resolveUrl);
-  const [queryString, setQueryString] = useState("");
-  const [open, setOpen] = useState(false);
-  const [stack, setStack] = useState([
-    { title: "Main Menu", items: menuData }
-  ]);
-  const [hasOpenedOnce, setHasOpenedOnce] = useState(false);
-  const [direction, setDirection] = useState("forward");
-  const [quickLinks, setQuickLinks] = useState([]);
-  const [loginDrawerOpen, setLoginDrawerOpen] = useState(false);
+  const pathname = usePathname();
   const drawerRef = useRef(null);
-  const loginDrawerRef = useRef(null);
-  const loginGroups = useMemo(() => getLoginGroups(resolveUrl), [resolveUrl]);
-  const currentLevel = stack[stack.length - 1];
-  const prevLevel = stack[stack.length - 2];
+  const loginRef = useRef(null);
+  useClickAway(drawerRef, () => {
+    dispatch({ type: MenuActions.SET_MOBILE_MENU_CLOSED, payload: {} });
+  });
+  useClickAway(loginRef, () => {
+    dispatch({ type: MenuActions.SET_LOGIN_MENU_CLOSED, payload: {} });
+  });
+  const [queryString, setQueryString] = useState("");
+  const [stack, dispatch] = useReducer(reducer, initialState);
+  useEffect(() => {
+    const menuProcessed = mobileData(menu);
+    dispatch({
+      type: MenuActions.INIT,
+      payload: {
+        currentMenuData: menuProcessed,
+        stack: [{ title: "Menu", items: menuProcessed }],
+        quickLinks: menu?.quickLinks
+      }
+    });
+  }, [menu]);
   useEffect(() => {
     if (!pathname) return;
-    const pathnameParts = "/" + pathname.split("/")[1];
-    const links = getQuickLinks(pathnameParts, resolveUrl);
-    setQuickLinks(links);
-  }, [pathname, resolveUrl]);
+  }, [pathname]);
   useEffect(() => {
     if (typeof window !== "undefined") {
       const search = window.location.search;
@@ -179,71 +194,33 @@ const MobileDrawerMenu = () => {
     }
   }, []);
   const handleClick = (key) => {
-    const item = currentLevel.items[key];
-    if (typeof item === "object") {
-      setDirection("forward");
-      setStack((prev) => [...prev, { title: key, items: item }]);
-    }
+    dispatch({ type: MenuActions.ADD_TO_STACK, payload: key });
   };
   const handleBack = () => {
-    if (stack.length > 1) {
-      setDirection("backward");
-      setStack((prev) => prev.slice(0, -1));
+    if (stack.stack.length > 1) {
+      dispatch({ type: MenuActions.REMOVE_FROM_STACK, payload: {} });
     }
   };
   const handleToggle = () => {
-    setOpen((prev) => {
-      const isOpening = !prev;
-      if (isOpening && !hasOpenedOnce) {
-        setHasOpenedOnce(true);
-        setStack([{ title: "Menu", items: menuData }]);
-      }
-      return isOpening;
-    });
+    dispatch({ type: MenuActions.SET_HAS_OPENED_ONCE, payload: {} });
+    dispatch({ type: MenuActions.SET_MOBILE_MENU_OPEN, payload: {} });
   };
-  const handleLoginDrawerOpen = () => setLoginDrawerOpen(true);
-  const handleLoginDrawerClose = () => setLoginDrawerOpen(false);
-  const handleLoginDrawerOutsideClick = (e) => {
-    if (loginDrawerRef.current && !loginDrawerRef.current.contains(e.target)) {
-      setLoginDrawerOpen(false);
-    }
+  const handleLoginDrawerOpen = () => {
+    dispatch({ type: MenuActions.SET_LOGIN_MENU_OPEN, payload: {} });
   };
-  const handleOutsideClick = (e) => {
-    if (drawerRef.current && !drawerRef.current.contains(e.target)) {
-      setOpen(false);
-    }
+  const handleLoginDrawerClose = () => {
+    dispatch({ type: MenuActions.SET_LOGIN_MENU_CLOSED, payload: {} });
   };
-  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 (e.key === "Escape")
+        dispatch({ type: MenuActions.SET_MOBILE_MENU_CLOSED, payload: {} });
     };
-    if (loginDrawerOpen) {
+    if (stack.isMobileMenuOpen) {
       document.addEventListener("keydown", onEsc);
     }
     return () => document.removeEventListener("keydown", onEsc);
-  }, [loginDrawerOpen]);
+  }, [stack.isMobileMenuOpen]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles.mobileNavRow, children: [
       /* @__PURE__ */ jsx(
@@ -285,7 +262,7 @@ const MobileDrawerMenu = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: stack.isMobileMenuOpen && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: styles.overlay,
@@ -308,7 +285,7 @@ const MobileDrawerMenu = () => {
             children: [
               /* @__PURE__ */ jsx("p", { id: "menu-description", className: styles.sr_only, children: "Use tab to navigate this menu. Press Escape to close." }),
               /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-                stack.length > 1 ? /* @__PURE__ */ jsxs(
+                stack.stack?.length > 1 ? /* @__PURE__ */ jsxs(
                   "button",
                   {
                     onClick: handleBack,
@@ -333,7 +310,7 @@ const MobileDrawerMenu = () => {
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx("span", { className: styles.prevlevel, children: prevLevel.title })
+                      /* @__PURE__ */ jsx("span", { className: styles.prevlevel, children: stack.prevLevel?.title })
                     ]
                   }
                 ) : /* @__PURE__ */ jsx(
@@ -386,7 +363,7 @@ const MobileDrawerMenu = () => {
                     className: `${styles.level} flex middle`,
                     "aria-label": "current menu level",
                     children: [
-                      /* @__PURE__ */ jsx("h2", { className: styles.levelTitle, id: "menu-level", children: currentLevel.title }),
+                      /* @__PURE__ */ jsx("h2", { className: styles.levelTitle, id: "menu-level", children: stack.currentMenuData?.title }),
                       /* @__PURE__ */ jsx(
                         "svg",
                         {
@@ -411,75 +388,81 @@ const MobileDrawerMenu = () => {
                 /* @__PURE__ */ jsx("nav", { "aria-label": "main navigation menu", children: /* @__PURE__ */ jsx(
                   AnimatePresence,
                   {
-                    custom: direction,
+                    custom: stack.direction,
                     mode: "sync",
                     initial: false,
-                    children: /* @__PURE__ */ jsx(
+                    children: /* @__PURE__ */ jsxs(
                       motion.ul,
                       {
                         className: styles.menu,
-                        custom: direction,
+                        custom: stack.direction,
                         variants: slideVariants,
                         initial: "enter",
                         animate: "center",
                         exit: "exit",
                         transition: { duration: 0.3, ease: "linear" },
-                        children: Object.entries(
-                          stack.length === 1 ? Object.fromEntries(
-                            Object.entries(currentLevel.items).filter(
-                              ([k]) => k !== "Log in"
-                            )
-                          ) : currentLevel.items
-                        ).map(([key, value]) => {
-                          const hasChildren = typeof value === "object";
-                          return /* @__PURE__ */ jsx("li", { children: hasChildren ? /* @__PURE__ */ jsxs(
-                            "button",
-                            {
-                              className: styles.menuItem,
-                              onClick: () => handleClick(key),
-                              "aria-label": `open submenu for ${key}`,
-                              children: [
-                                /* @__PURE__ */ jsx("span", { children: key }),
-                                /* @__PURE__ */ jsx("span", { className: styles.chevron, children: /* @__PURE__ */ jsx(
-                                  "svg",
-                                  {
-                                    className: styles.chevronIcon,
-                                    width: 12,
-                                    height: 20,
-                                    viewBox: "0 0 12 20",
-                                    fill: "none",
-                                    xmlns: "http://www.w3.org/2000/svg",
-                                    children: /* @__PURE__ */ jsx(
-                                      "path",
-                                      {
-                                        d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
-                                        fill: "#4A5560"
-                                      }
-                                    )
-                                  }
-                                ) })
-                              ]
-                            }
-                          ) : /* @__PURE__ */ jsx(
+                        children: [
+                          stack.stack.length > 1 && !stack.currentMenuData?.dropdown && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
                             Link,
                             {
-                              href: `${value}${queryString && !value.includes("?") ? `?${queryString}` : ""}`,
+                              href: stack.currentMenuData.url + (queryString && !stack.currentMenuData.url.includes("?") ? `?${queryString}` : ""),
                               className: styles.menuItem,
-                              children: /* @__PURE__ */ jsx("span", { children: key })
+                              children: /* @__PURE__ */ jsxs("span", { children: [
+                                stack.currentMenuData.title,
+                                " Home"
+                              ] })
                             }
-                          ) }, key);
-                        })
+                          ) }),
+                          stack?.currentMenuData?.items?.map((item) => {
+                            const hasChildren = item.items && item.items.length > 0;
+                            return hasChildren ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                              "button",
+                              {
+                                className: styles.menuItem,
+                                onClick: () => handleClick(item),
+                                children: [
+                                  /* @__PURE__ */ jsx("span", { children: item.label }),
+                                  /* @__PURE__ */ jsx("span", { className: styles.chevron, children: /* @__PURE__ */ jsx(
+                                    "svg",
+                                    {
+                                      className: styles.chevronIcon,
+                                      width: 12,
+                                      height: 20,
+                                      viewBox: "0 0 12 20",
+                                      fill: "none",
+                                      xmlns: "http://www.w3.org/2000/svg",
+                                      children: /* @__PURE__ */ jsx(
+                                        "path",
+                                        {
+                                          d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
+                                          fill: "#4A5560"
+                                        }
+                                      )
+                                    }
+                                  ) })
+                                ]
+                              }
+                            ) }, item.id + "1") : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                href: item?.url + (queryString && !item?.url?.includes("?") ? `?${queryString}` : ""),
+                                className: styles.menuItem,
+                                children: /* @__PURE__ */ jsx("span", { children: item.label })
+                              }
+                            ) }, item.id);
+                          })
+                        ]
                       },
-                      currentLevel.title
+                      stack.currentMenuData?.title
                     )
                   }
                 ) }),
-                /* @__PURE__ */ jsx("div", { className: `${styles.quickLinks} flex middle between`, children: quickLinks.map((link) => /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx("div", { className: `${styles.quickLinks} flex middle between`, children: stack.quickLinks?.map((link) => /* @__PURE__ */ jsxs(
                   "a",
                   {
-                    href: link.url + (queryString && !link.url.includes("?") ? `?${queryString}` : ""),
+                    href: resolveUrl(link.url) + (queryString && !link.url.includes("?") ? `?${queryString}` : ""),
                     className: `${styles.quickLink} flex_col middle`,
-                    "aria-label": `Visit ${link.title} page`,
+                    "aria-label": link.ariaLabel,
                     children: [
                       /* @__PURE__ */ jsx(
                         "img",
@@ -491,10 +474,10 @@ const MobileDrawerMenu = () => {
                           loading: "lazy"
                         }
                       ),
-                      /* @__PURE__ */ jsx("span", { children: link.title })
+                      /* @__PURE__ */ jsx("span", { children: link.label })
                     ]
                   },
-                  link.title
+                  link.id
                 )) })
               ] }) })
             ]
@@ -502,7 +485,7 @@ const MobileDrawerMenu = () => {
         )
       }
     ) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: loginDrawerOpen && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: stack.loginDrawer && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: styles.overlay,
@@ -513,7 +496,7 @@ const MobileDrawerMenu = () => {
           motion.div,
           {
             className: `${styles.drawer} flex_col`,
-            ref: loginDrawerRef,
+            ref: loginRef,
             initial: { x: "100%" },
             animate: { x: 0 },
             exit: { x: "100%" },
@@ -568,37 +551,74 @@ const MobileDrawerMenu = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("div", { className: styles.loginDrawerContent, children: /* @__PURE__ */ jsx("div", { className: styles.loginAccordion, children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: styles.loginDrawerContent, children: /* @__PURE__ */ jsx("div", { className: styles.loginAccordion, children: /* @__PURE__ */ jsxs(
                 "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,
+                  children: [
+                    stack.loginData?.items?.filter((item) => item.items)?.map((group) => {
+                      return /* @__PURE__ */ jsxs(
+                        "li",
+                        {
+                          className: styles.loginAccordionGroup,
+                          "aria-label": `${group?.label} login options`,
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: styles.loginAccordionHeading, children: group.label }),
+                            /* @__PURE__ */ jsx("ul", { className: styles.loginAccordionGroupList, children: group.items?.map((item) => /* @__PURE__ */ jsx(
+                              "li",
                               {
-                                href: item.url + (queryString && !item.url.includes("?") ? `?${queryString}` : ""),
-                                className: styles.menuItem,
-                                children: /* @__PURE__ */ jsx("span", { children: item.title })
-                              }
-                            )
-                          },
-                          item.title
-                        )) })
-                      ]
-                    },
-                    group.heading
-                  ))
+                                "aria-label": `access ${item.label}`,
+                                children: /* @__PURE__ */ jsx(
+                                  "a",
+                                  {
+                                    href: item.url + (queryString && !item.url.includes("?") ? `?${queryString}` : ""),
+                                    className: styles.menuItem,
+                                    children: /* @__PURE__ */ jsx("span", { children: item.label })
+                                  }
+                                )
+                              },
+                              item.id
+                            )) })
+                          ]
+                        },
+                        group?.id
+                      );
+                    }),
+                    /* @__PURE__ */ jsxs(
+                      "li",
+                      {
+                        className: styles.loginAccordionGroup,
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: styles.loginAccordionHeading }),
+                          stack.loginData?.items.filter((item) => !item.items).map((group) => {
+                            return /* @__PURE__ */ jsx(
+                              "ul",
+                              {
+                                className: styles.loginAccordionGroupList,
+                                children: /* @__PURE__ */ jsx(
+                                  "li",
+                                  {
+                                    "aria-label": `access ${group.label}`,
+                                    children: /* @__PURE__ */ jsx(
+                                      "a",
+                                      {
+                                        href: group.url + (queryString && !group.url.includes("?") ? `?${queryString}` : ""),
+                                        className: styles.menuItem,
+                                        children: /* @__PURE__ */ jsx("span", { children: group.label })
+                                      }
+                                    )
+                                  },
+                                  group.id
+                                )
+                              },
+                              group.id
+                            );
+                          })
+                        ]
+                      }
+                    )
+                  ]
                 }
               ) }) })
             ]