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

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

@@ -1,5 +1,11 @@
 "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";
@@ -12,7 +18,6 @@ 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";
@@ -20,7 +25,7 @@ import "../../../IconBillboard/IconBillboard.css.js";
 /* empty css                                                */
 import "../../../Interstitial/Interstitial-variants.css.js";
 import "../../../Button/Button.css.js";
-import { useClickAway } from "react-use";
+import "react-use";
 import "../../../ArticlesSet/ArticlesSet.css.js";
 import "../../../Calculators/calculator.css.js";
 import "../../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
@@ -68,7 +73,6 @@ 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";
@@ -102,17 +106,14 @@ 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                                                       */
@@ -127,9 +128,6 @@ 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%",
@@ -148,43 +146,30 @@ const slideVariants = {
     position: "absolute"
   })
 };
-const initialState = {
-  direction: "forward",
-  isMobileMenuOpen: false,
-  hasOpenedOnce: false,
-  prevLevel: [],
-  currentMenuData: null,
-  stack: [],
-  loginDrawer: false,
-  loginData: {}
-};
-const MobileDrawerMenu = ({ menu }) => {
-  const { resolveUrl } = useGlobalContext();
+const MobileDrawerMenu = () => {
   const pathname = usePathname();
-  const drawerRef = useRef(null);
-  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 { resolveUrl } = useGlobalContext();
+  const menuData = getMenuData(resolveUrl);
   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]);
+  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 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];
   useEffect(() => {
     if (!pathname) return;
-  }, [pathname]);
+    const pathnameParts = "/" + pathname.split("/")[1];
+    const links = getQuickLinks(pathnameParts, resolveUrl);
+    setQuickLinks(links);
+  }, [pathname, resolveUrl]);
   useEffect(() => {
     if (typeof window !== "undefined") {
       const search = window.location.search;
@@ -194,33 +179,71 @@ const MobileDrawerMenu = ({ menu }) => {
     }
   }, []);
   const handleClick = (key) => {
-    dispatch({ type: MenuActions.ADD_TO_STACK, payload: key });
+    const item = currentLevel.items[key];
+    if (typeof item === "object") {
+      setDirection("forward");
+      setStack((prev) => [...prev, { title: key, items: item }]);
+    }
   };
   const handleBack = () => {
-    if (stack.stack.length > 1) {
-      dispatch({ type: MenuActions.REMOVE_FROM_STACK, payload: {} });
+    if (stack.length > 1) {
+      setDirection("backward");
+      setStack((prev) => prev.slice(0, -1));
     }
   };
   const handleToggle = () => {
-    dispatch({ type: MenuActions.SET_HAS_OPENED_ONCE, payload: {} });
-    dispatch({ type: MenuActions.SET_MOBILE_MENU_OPEN, payload: {} });
+    setOpen((prev) => {
+      const isOpening = !prev;
+      if (isOpening && !hasOpenedOnce) {
+        setHasOpenedOnce(true);
+        setStack([{ title: "Menu", items: menuData }]);
+      }
+      return isOpening;
+    });
   };
-  const handleLoginDrawerOpen = () => {
-    dispatch({ type: MenuActions.SET_LOGIN_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 handleLoginDrawerClose = () => {
-    dispatch({ type: MenuActions.SET_LOGIN_MENU_CLOSED, payload: {} });
+  const handleOutsideClick = (e) => {
+    if (drawerRef.current && !drawerRef.current.contains(e.target)) {
+      setOpen(false);
+    }
   };
+  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")
-        dispatch({ type: MenuActions.SET_MOBILE_MENU_CLOSED, payload: {} });
+      if (e.key === "Escape") setLoginDrawerOpen(false);
     };
-    if (stack.isMobileMenuOpen) {
+    if (loginDrawerOpen) {
       document.addEventListener("keydown", onEsc);
     }
     return () => document.removeEventListener("keydown", onEsc);
-  }, [stack.isMobileMenuOpen]);
+  }, [loginDrawerOpen]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles.mobileNavRow, children: [
       /* @__PURE__ */ jsx(
@@ -262,7 +285,7 @@ const MobileDrawerMenu = ({ menu }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: stack.isMobileMenuOpen && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: styles.overlay,
@@ -285,7 +308,7 @@ const MobileDrawerMenu = ({ menu }) => {
             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.stack?.length > 1 ? /* @__PURE__ */ jsxs(
+                stack.length > 1 ? /* @__PURE__ */ jsxs(
                   "button",
                   {
                     onClick: handleBack,
@@ -310,7 +333,7 @@ const MobileDrawerMenu = ({ menu }) => {
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx("span", { className: styles.prevlevel, children: stack.prevLevel?.title })
+                      /* @__PURE__ */ jsx("span", { className: styles.prevlevel, children: prevLevel.title })
                     ]
                   }
                 ) : /* @__PURE__ */ jsx(
@@ -363,7 +386,7 @@ const MobileDrawerMenu = ({ menu }) => {
                     className: `${styles.level} flex middle`,
                     "aria-label": "current menu level",
                     children: [
-                      /* @__PURE__ */ jsx("h2", { className: styles.levelTitle, id: "menu-level", children: stack.currentMenuData?.title }),
+                      /* @__PURE__ */ jsx("h2", { className: styles.levelTitle, id: "menu-level", children: currentLevel.title }),
                       /* @__PURE__ */ jsx(
                         "svg",
                         {
@@ -388,81 +411,75 @@ const MobileDrawerMenu = ({ menu }) => {
                 /* @__PURE__ */ jsx("nav", { "aria-label": "main navigation menu", children: /* @__PURE__ */ jsx(
                   AnimatePresence,
                   {
-                    custom: stack.direction,
+                    custom: direction,
                     mode: "sync",
                     initial: false,
-                    children: /* @__PURE__ */ jsxs(
+                    children: /* @__PURE__ */ jsx(
                       motion.ul,
                       {
                         className: styles.menu,
-                        custom: stack.direction,
+                        custom: direction,
                         variants: slideVariants,
                         initial: "enter",
                         animate: "center",
                         exit: "exit",
                         transition: { duration: 0.3, ease: "linear" },
-                        children: [
-                          stack.stack.length > 1 && !stack.currentMenuData?.dropdown && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                        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(
                             Link,
                             {
-                              href: stack.currentMenuData.url + (queryString && !stack.currentMenuData.url.includes("?") ? `?${queryString}` : ""),
+                              href: `${value}${queryString && !value.includes("?") ? `?${queryString}` : ""}`,
                               className: styles.menuItem,
-                              children: /* @__PURE__ */ jsxs("span", { children: [
-                                stack.currentMenuData.title,
-                                " Home"
-                              ] })
+                              children: /* @__PURE__ */ jsx("span", { children: 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);
-                          })
-                        ]
+                          ) }, key);
+                        })
                       },
-                      stack.currentMenuData?.title
+                      currentLevel.title
                     )
                   }
                 ) }),
-                /* @__PURE__ */ jsx("div", { className: `${styles.quickLinks} flex middle between`, children: stack.quickLinks?.map((link) => /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx("div", { className: `${styles.quickLinks} flex middle between`, children: quickLinks.map((link) => /* @__PURE__ */ jsxs(
                   "a",
                   {
-                    href: resolveUrl(link.url) + (queryString && !link.url.includes("?") ? `?${queryString}` : ""),
+                    href: link.url + (queryString && !link.url.includes("?") ? `?${queryString}` : ""),
                     className: `${styles.quickLink} flex_col middle`,
-                    "aria-label": link.ariaLabel,
+                    "aria-label": `Visit ${link.title} page`,
                     children: [
                       /* @__PURE__ */ jsx(
                         "img",
@@ -474,10 +491,10 @@ const MobileDrawerMenu = ({ menu }) => {
                           loading: "lazy"
                         }
                       ),
-                      /* @__PURE__ */ jsx("span", { children: link.label })
+                      /* @__PURE__ */ jsx("span", { children: link.title })
                     ]
                   },
-                  link.id
+                  link.title
                 )) })
               ] }) })
             ]
@@ -485,7 +502,7 @@ const MobileDrawerMenu = ({ menu }) => {
         )
       }
     ) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: stack.loginDrawer && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: loginDrawerOpen && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: styles.overlay,
@@ -496,7 +513,7 @@ const MobileDrawerMenu = ({ menu }) => {
           motion.div,
           {
             className: `${styles.drawer} flex_col`,
-            ref: loginRef,
+            ref: loginDrawerRef,
             initial: { x: "100%" },
             animate: { x: 0 },
             exit: { x: "100%" },
@@ -551,74 +568,37 @@ const MobileDrawerMenu = ({ menu }) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("div", { className: styles.loginDrawerContent, children: /* @__PURE__ */ jsx("div", { className: styles.loginAccordion, children: /* @__PURE__ */ jsxs(
+              /* @__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: [
-                    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",
-                              {
-                                "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",
+                  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,
                               {
-                                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
-                            );
-                          })
-                        ]
-                      }
-                    )
-                  ]
+                                href: item.url + (queryString && !item.url.includes("?") ? `?${queryString}` : ""),
+                                className: styles.menuItem,
+                                children: /* @__PURE__ */ jsx("span", { children: item.title })
+                              }
+                            )
+                          },
+                          item.title
+                        )) })
+                      ]
+                    },
+                    group.heading
+                  ))
                 }
               ) }) })
             ]