@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/components-v2/header/components/user.tsx

@@ -1,14 +1,15 @@
 "use client";
 
-import React, { useState, MouseEvent, useEffect } from "react";
+import React, {
+  createContext,
+  useState,
+  useEffect,
+  useContext,
+  MouseEvent,
+  ReactNode,
+} from "react";
 import { useRouter } from "next/navigation";
-
-// API
-import useUpdateUser from "@/services/user/mutations/update-user";
-import useSessionInit from "@/services/session/mutations/session-init";
-import useSessionLogout from "@/services/session/mutations/session-logout";
-
-// UI
+// UI Components
 import {
   Box,
   Button,
@@ -19,13 +20,19 @@ import {
 } from "@mui/material";
 import { MdPersonOutline as PersonOutline } from "react-icons/md";
 import MobileUserIcon from "@evenicanpm/storefront-core/src/components-v2/icons/user";
-import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
 import T from "@evenicanpm/storefront-core/src/components-v2/T";
-
-// Auth
+// Auth components
 import { signIn, useSession } from "next-auth/react";
-import { getMsalInstance, initializeMsal } from "@/auth/msal";
-import signOut from "@/auth/signout"; // similar implementation like signOut from "next-auth/react"
+import {
+  getMsalInstance,
+  initializeMsal,
+} from "@evenicanpm/storefront-core/src/auth/msal";
+import signOutCustom from "@evenicanpm/storefront-core/src/auth/signout";
+// API hooks
+import useUpdateUser from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user";
+import useSessionInit from "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-init";
+import useSessionLogout from "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-logout";
 
 interface IdTokenClaims {
   given_name?: string;
@@ -39,35 +46,51 @@ const MENU_ITEMS = [
   { href: "/account/wish-lists", label: "Account.Menu.wishlists" },
 ];
 
+interface UserContextValue {
+  isAuthenticated: boolean;
+  status: string;
+  menuItems: typeof MENU_ITEMS;
+  handleLogout: () => void;
+  signIn: typeof signIn;
+  signOut: () => void;
+  anchorEl: HTMLButtonElement | null;
+  setAnchorEl: (el: HTMLButtonElement | null) => void;
+  open: boolean;
+}
+
+const UserContext = createContext<UserContextValue | undefined>(undefined);
+
+const useUserContext = () => {
+  const ctx = useContext(UserContext);
+  if (!ctx) throw new Error("User subcomponent must be used within <User>");
+  return ctx;
+};
+
 interface Props {
-  mobile?: boolean;
+  children?: ReactNode;
 }
-const User = ({ mobile = false }: Props) => {
+
+const User = ({ children }: Props) => {
   const { data: session, status } = useSession();
 
   if (session?.error) {
     // Custom error set in server - /api/auth/[...nextauth]
     console.warn("Auth Error", session?.error);
-    signOut();
+    signOutCustom();
   }
 
   const isAuthenticated = !!session;
-
-  const router = useRouter();
-
   const { mutateAsync: sessionInit } = useSessionInit();
   const { mutateAsync: updateUser } = useUpdateUser();
   const { mutateAsync: sessionLogout } = useSessionLogout();
 
+  // session init
   useEffect(() => {
     if (isAuthenticated) {
       const { accessToken, user } = session;
       const email = user?.email;
       if (accessToken && email) {
-        sessionInit({
-          accessToken,
-          email,
-        });
+        sessionInit({ accessToken, email });
       }
     }
   }, [isAuthenticated, session, sessionInit]);
@@ -77,127 +100,153 @@ const User = ({ mobile = false }: Props) => {
     const handleRedirect = async () => {
       try {
         await initializeMsal();
-        const response = await getMsalInstance().handleRedirectPromise();
-        if (response) {
-          // Update the API when profile info is updated through MSAL
+        const res = await getMsalInstance().handleRedirectPromise();
+        if (res) {
           const { given_name, family_name } =
-            response.idTokenClaims as IdTokenClaims;
+            res.idTokenClaims as IdTokenClaims;
+          // Update the API when profile info is updated through MSAL
           if (given_name && family_name) {
             updateUser({
               AccountNumber: "",
               FirstName: given_name,
               LastName: family_name,
-            }).catch((err) => console.error("Update user Error:", err));
+            }).catch(console.error);
           }
         }
-      } catch (error) {
-        console.error("MSAL Redirect Handling Error:", error);
+      } catch (err) {
+        console.error("MSAL redirect error:", err);
       }
     };
-
     handleRedirect();
   }, [updateUser]);
 
   const handleLogout = async () => {
     try {
       await sessionLogout({});
-      signOut();
-    } catch (error) {
-      console.error("Logout Error:", error);
+      signOutCustom();
+    } catch (err) {
+      console.error("Logout Error:", err);
     }
   };
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-
   const open = Boolean(anchorEl);
-  const id = open ? "account-popover" : undefined;
 
-  const setAnchorElNull = () => setAnchorEl(null);
+  const value: UserContextValue = {
+    isAuthenticated,
+    status,
+    menuItems: MENU_ITEMS,
+    handleLogout,
+    signIn,
+    signOut: signOutCustom,
+    anchorEl,
+    setAnchorEl,
+    open,
+  };
 
-  if (status === "loading") return <></>;
+  if (status === "loading") return null;
 
-  if (mobile) {
-    return (
-      <IconButton
-        aria-label="User Menu"
-        onClick={() => {
-          if (!isAuthenticated) {
-            signIn();
-          } else {
-            router.push("/account/profile");
-          }
-        }}
-      >
-        <MobileUserIcon style={{ fontSize: "1.25rem" }} />
-      </IconButton>
-    );
-  }
+  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+};
+
+// Subcomponents
+User.MobileTrigger = function MobileTrigger() {
+  const { isAuthenticated, signIn } = useUserContext();
+  const router = useRouter();
+  return (
+    <IconButton
+      aria-label="User Menu"
+      onClick={() => {
+        if (!isAuthenticated) signIn();
+        else router.push("/account/profile");
+      }}
+    >
+      <MobileUserIcon style={{ fontSize: "1.25rem" }} />
+    </IconButton>
+  );
+};
+
+User.DesktopTrigger = function DesktopTrigger() {
+  const { setAnchorEl } = useUserContext();
+  return (
+    <IconButton
+      aria-label="User Menu"
+      onClick={(e: MouseEvent<HTMLButtonElement>) =>
+        setAnchorEl(e.currentTarget)
+      }
+    >
+      <PersonOutline />
+    </IconButton>
+  );
+};
+
+User.Menu = function Menu({
+  children,
+}: {
+  children?: (items: typeof MENU_ITEMS) => React.ReactNode;
+}) {
+  const { anchorEl, open, setAnchorEl, menuItems, handleLogout } =
+    useUserContext();
+  const id = open ? "account-popover" : undefined;
+
+  return (
+    <Popover
+      id={id}
+      open={open}
+      anchorEl={anchorEl}
+      onClose={() => setAnchorEl(null)}
+      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      transformOrigin={{ vertical: "top", horizontal: "right" }}
+    >
+      <List sx={{ p: 1 }} onClick={() => setAnchorEl(null)}>
+        {children
+          ? children(menuItems) // Allow caller to control what gets rendered
+          : menuItems.map(({ href, label }) => (
+              <User.MenuItem key={href} href={href} label={label} />
+            ))}
+        <Box p={1}>
+          <Button
+            fullWidth
+            size="small"
+            color="primary"
+            variant="outlined"
+            onClick={handleLogout}
+          >
+            <T path="Account.Menu.btnLogout" />
+          </Button>
+        </Box>
+      </List>
+    </Popover>
+  );
+};
+
+User.MenuItem = function MenuItem({
+  href,
+  label,
+}: {
+  href: string;
+  label: string;
+}) {
+  return (
+    <NavLink href={href} style={{ color: "inherit" }}>
+      <ListItemButton>
+        <T path={label} />
+      </ListItemButton>
+    </NavLink>
+  );
+};
 
+User.LoginButton = function LoginButton() {
+  const { signIn } = useUserContext();
   return (
-    <>
-      {isAuthenticated ? (
-        <>
-          <Box display="flex" alignItems="center" justifyContent="center">
-            <IconButton
-              aria-label="User Menu"
-              onClick={(event: MouseEvent<HTMLButtonElement>) =>
-                setAnchorEl(event.currentTarget)
-              }
-            >
-              <PersonOutline />
-            </IconButton>
-            <Popover
-              id={id}
-              open={open}
-              anchorEl={anchorEl}
-              anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              onClose={() => setAnchorElNull()}
-            >
-              <List
-                component="nav"
-                aria-label="mailbox folders"
-                disablePadding
-                onClick={() => setAnchorElNull()}
-                sx={{ p: 1 }}
-              >
-                {MENU_ITEMS.map(({ href, label }) => (
-                  <NavLink key={href} href={href} style={{ color: "inherit" }}>
-                    <ListItemButton>
-                      <T path={label} />
-                    </ListItemButton>
-                  </NavLink>
-                ))}
-                <Box p={1}>
-                  <Button
-                    fullWidth
-                    size="small"
-                    color="primary"
-                    variant="outlined"
-                    onClick={() => handleLogout()}
-                  >
-                    <T path="Account.Menu.btnLogout" />
-                  </Button>
-                </Box>
-              </List>
-            </Popover>
-          </Box>
-        </>
-      ) : (
-        <Button
-          size="small"
-          variant="contained"
-          color="primary"
-          onClick={() => signIn()}
-          sx={{ mr: 2 }}
-        >
-          <T path="Account.Menu.btnLogin" />
-        </Button>
-      )}
-    </>
+    <Button
+      size="small"
+      variant="contained"
+      color="primary"
+      onClick={() => signIn()}
+    >
+      <T path="Account.Menu.btnLogin" />
+    </Button>
   );
 };
 

package/src/components-v2/header/header.tsx

@@ -1,63 +1,86 @@
 "use client";
 
-import { Fragment, ReactNode } from "react";
-import useTheme from "@mui/material/styles/useTheme";
-import useMediaQuery from "@mui/material/useMediaQuery";
+import { ReactNode } from "react";
 import clsx from "clsx";
+import { MdOutlineShoppingBag } from "react-icons/md";
 // GLOBAL CUSTOM COMPONENTS
 import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
 // LOCAL CUSTOM COMPONENTS
-import MobileHeader from "./components/mobile-header";
-import CategoriesMenu from "./components/categories-menu";
-import User from "./components/user";
-import MiniCartClient from "../MiniCartClient";
+import CategoriesMenu from "@evenicanpm/storefront-core/src/components-v2/header/components/categories-menu";
+import User from "@evenicanpm/storefront-core/src/components-v2/header/components/user";
+import MiniCartTrigger from "@evenicanpm/storefront-core/src/components-v2/mini-cart/mini-cart-trigger";
 // STYLED COMPONENTS
-import { HeaderWrapper, StyledContainer } from "./styles/index";
+import {
+  HeaderWrapper,
+  StyledContainer,
+} from "@evenicanpm/storefront-core/src/components-v2/header/styles/index";
 // API
-import getCart from "@/api-manager/services/cart/queries/get-cart";
-import { Cart } from "@/schemas/cart.schema";
+import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
 
-// ==============================================================
-interface Props {
-  isFixed?: boolean;
-  className?: string;
-  midSlot: ReactNode;
-}
-// ==============================================================
+import { useSession } from "next-auth/react";
 
-export default function Header({ isFixed, className, midSlot }: Props) {
-  const theme = useTheme();
-  const downMd = useMediaQuery(theme.breakpoints.down(1150));
+type HeaderRootProps = {
+  className?: string;
+  children: ReactNode;
+};
 
-  const { data: cart } = getCart.useData();
+const Header = ({ className, children }: HeaderRootProps) => {
+  return (
+    <HeaderWrapper className={clsx(className)}>
+      <StyledContainer>{children}</StyledContainer>
+    </HeaderWrapper>
+  );
+};
 
-  const CONTENT_FOR_LARGE_DEVICE = (
-    <Fragment>
-      {/* Left content - logo and category */}
-      <FlexBox minWidth={100} alignItems="center">
-        <SiteLogo />
-        {isFixed ? <CategoriesMenu /> : null}
-      </FlexBox>
-
-      {/* Center content - search form | navigation */}
-      {midSlot}
-
-      {/* login / account and cart buttons */}
-      <User />
-      {cart && <MiniCartClient cart={cart} />}
-    </Fragment>
+Header.LeftSlot = ({ children }: { children: ReactNode }) => {
+  return (
+    <FlexBox minWidth={100} alignItems="center">
+      {children}
+    </FlexBox>
   );
+};
+Header.Logo = () => {
+  return <SiteLogo />;
+};
 
+Header.Categories = () => {
+  return <CategoriesMenu />;
+};
+
+Header.MidSlot = ({ children }: { children: ReactNode }) => {
+  return <>{children}</>;
+};
+
+Header.User = () => {
+  const { data: session } = useSession();
+  const isAuthenticated = !!session;
   return (
-    <HeaderWrapper className={clsx(className)}>
-      <StyledContainer>
-        {downMd ? (
-          <MobileHeader cart={cart as Cart} />
-        ) : (
-          CONTENT_FOR_LARGE_DEVICE
-        )}
-      </StyledContainer>
-    </HeaderWrapper>
+    <User>
+      {isAuthenticated ? (
+        <>
+          <User.DesktopTrigger />
+          <User.Menu />
+        </>
+      ) : (
+        <User.LoginButton />
+      )}
+    </User>
   );
-}
+};
+
+Header.Cart = () => {
+  const { data: cart } = getCart.useData();
+  return cart ? (
+    <MiniCartTrigger cart={cart}>
+      <MiniCartTrigger.Badge>
+        <MiniCartTrigger.Button>
+          <MdOutlineShoppingBag />
+        </MiniCartTrigger.Button>
+      </MiniCartTrigger.Badge>
+      <MiniCartTrigger.Drawer />
+    </MiniCartTrigger>
+  ) : null;
+};
+
+export default Header;

package/src/components-v2/header/index.ts

@@ -1 +1 @@
-export { default } from "./header";
+export { default } from "@evenicanpm/storefront-core/src/components-v2/header/header";

package/src/components-v2/header/sticky-header.tsx

@@ -1,17 +1,49 @@
 "use client";
 
 import Header from "@evenicanpm/storefront-core/src/components-v2/header/index";
-import SearchInputWithCategory from "@evenicanpm/storefront-core/src/components-v2/search-box/search-input-category";
+import { SearchBarViewLg as SearchBar } from "@evenicanpm/storefront-core/src/components-v2/search-bar";
 import Sticky from "@evenicanpm/storefront-core/src/components-v2/sticky/index";
 import { useCallback, useState } from "react";
 
+import useTheme from "@mui/material/styles/useTheme";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import MobileHeader from "@evenicanpm/storefront-core/src/components-v2/header/components/mobile-header";
+
 export default function StickyHeader() {
   const [isFixed, setIsFixed] = useState(false);
   const toggleIsFixed = useCallback((fixed: boolean) => setIsFixed(fixed), []);
 
+  const theme = useTheme();
+  const downMd = useMediaQuery(theme.breakpoints.down(1150));
+
+  if (downMd) {
+    return (
+      <MobileHeader>
+        <MobileHeader.Menu />
+        <MobileHeader.Logo />
+        <MobileHeader.Icons>
+          <MobileHeader.Search />
+          <MobileHeader.User />
+          <MobileHeader.Cart />
+        </MobileHeader.Icons>
+        <MobileHeader.SearchDrawer />
+      </MobileHeader>
+    );
+  }
+
   return (
     <Sticky fixedOn={0} onSticky={toggleIsFixed} scrollDistance={300}>
-      <Header isFixed={isFixed} midSlot={<SearchInputWithCategory />} />
+      <Header>
+        <Header.LeftSlot>
+          <Header.Logo />
+          {isFixed && <Header.Categories />}
+        </Header.LeftSlot>
+        <Header.MidSlot>
+          <SearchBar />
+        </Header.MidSlot>
+        <Header.User />
+        <Header.Cart />
+      </Header>
     </Sticky>
   );
 }