@evenicanpm/storefront-core 1.0.6 → 1.2.0

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

@@ -7,8 +7,8 @@ import { useTranslations } from "next-intl";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { MobileMenu } from "@evenicanpm/storefront-core/src/components-v2/navbar/mobile-menu/index";
 import {
-  FlexBetween,
-  FlexBox,
+	FlexBetween,
+	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
 import MiniCartTrigger from "@evenicanpm/storefront-core/src/components-v2/mini-cart/mini-cart-trigger";
@@ -18,131 +18,131 @@ import { MdClear as Clear } from "react-icons/md";
 import Search from "@evenicanpm/storefront-core/src/components-v2/icons/search";
 import MobileCartBag from "@evenicanpm/storefront-core/src/components-v2/icons/cart-bag";
 // API
-import getCart from "@/api-manager/services/cart/queries/get-cart";
+import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
 
 import useHeader from "@evenicanpm/storefront-core/src/components-v2/header/hooks/use-header";
 import { SearchBarViewSm as SearchBar } from "@evenicanpm/storefront-core/src/components-v2/search-bar";
 import {
-  transformCategoryNav,
-  transformCmsNav,
+	transformCategoryNav,
+	transformCmsNav,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
 import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 
 type MobileHeaderRootProps = {
-  children: ReactNode;
+	children: ReactNode;
 };
 
 const MobileHeaderContext = createContext<ReturnType<typeof useHeader> | null>(
-  null,
+	null,
 );
 
 const MobileHeaderProvider = ({ children }: { children: React.ReactNode }) => {
-  const headerState = useHeader();
-  return (
-    <MobileHeaderContext.Provider value={headerState}>
-      {children}
-    </MobileHeaderContext.Provider>
-  );
+	const headerState = useHeader();
+	return (
+		<MobileHeaderContext.Provider value={headerState}>
+			{children}
+		</MobileHeaderContext.Provider>
+	);
 };
 
 const useMobileHeader = () => {
-  const ctx = useContext(MobileHeaderContext);
-  if (!ctx)
-    throw new Error("useMobileHeader must be used within MobileHeaderProvider");
-  return ctx;
+	const ctx = useContext(MobileHeaderContext);
+	if (!ctx)
+		throw new Error("useMobileHeader must be used within MobileHeaderProvider");
+	return ctx;
 };
 
 const MobileHeader = ({ children }: MobileHeaderRootProps) => {
-  return (
-    <MobileHeaderProvider>
-      <FlexBetween width="100%">{children}</FlexBetween>
-    </MobileHeaderProvider>
-  );
+	return (
+		<MobileHeaderProvider>
+			<FlexBetween width="100%">{children}</FlexBetween>
+		</MobileHeaderProvider>
+	);
 };
 
 MobileHeader.Menu = () => {
-  const { categories, cmsNav } = useContext(NavContext);
-  const categoriesNavItems = transformCategoryNav(categories ?? []);
-  const cmsNavItems = transformCmsNav(cmsNav ?? []);
-  return (
-    <Box flex={1}>
-      <MobileMenu>
-        <MobileMenu.Trigger />
-        <MobileMenu.Drawer>
-          <MobileMenu.List data={categoriesNavItems} />
-          <MobileMenu.Divider />
-          <MobileMenu.List data={cmsNavItems} />
-        </MobileMenu.Drawer>
-      </MobileMenu>
-    </Box>
-  );
+	const { categories, cmsNav } = useContext(NavContext);
+	const categoriesNavItems = transformCategoryNav(categories ?? []);
+	const cmsNavItems = transformCmsNav(cmsNav ?? []);
+	return (
+		<Box flex={1}>
+			<MobileMenu>
+				<MobileMenu.Trigger />
+				<MobileMenu.Drawer>
+					<MobileMenu.List data={categoriesNavItems} />
+					<MobileMenu.Divider />
+					<MobileMenu.List data={cmsNavItems} />
+				</MobileMenu.Drawer>
+			</MobileMenu>
+		</Box>
+	);
 };
 
 MobileHeader.Logo = () => {
-  return <SiteLogo height="2.125rem" />;
+	return <SiteLogo height="2.125rem" />;
 };
 
 MobileHeader.Icons = ({ children }: { children: ReactNode }) => {
-  return (
-    <FlexBox justifyContent="end" flex={1}>
-      {children}
-    </FlexBox>
-  );
+	return (
+		<FlexBox justifyContent="end" flex={1}>
+			{children}
+		</FlexBox>
+	);
 };
 
 MobileHeader.User = () => {
-  return (
-    <User>
-      <User.MobileTrigger />
-    </User>
-  );
+	return (
+		<User>
+			<User.MobileTrigger />
+		</User>
+	);
 };
 
 MobileHeader.Search = () => {
-  const { toggleSearchBar } = useMobileHeader();
-  return (
-    <IconButton onClick={toggleSearchBar}>
-      <Search style={{ fontSize: "1.25rem" }} />
-    </IconButton>
-  );
+	const { toggleSearchBar } = useMobileHeader();
+	return (
+		<IconButton onClick={toggleSearchBar}>
+			<Search style={{ fontSize: "1.25rem" }} />
+		</IconButton>
+	);
 };
 
 MobileHeader.Cart = () => {
-  const { data: cart } = getCart.useData();
-  return cart ? (
-    <MiniCartTrigger cart={cart}>
-      <MiniCartTrigger.Badge>
-        <MiniCartTrigger.Button>
-          <MobileCartBag style={{ fontSize: "1.25rem" }} />
-        </MiniCartTrigger.Button>
-      </MiniCartTrigger.Badge>
-      <MiniCartTrigger.Drawer />
-    </MiniCartTrigger>
-  ) : null;
+	const { data: cart } = getCart.useData();
+	return cart ? (
+		<MiniCartTrigger cart={cart}>
+			<MiniCartTrigger.Badge>
+				<MiniCartTrigger.Button>
+					<MobileCartBag style={{ fontSize: "1.25rem" }} />
+				</MiniCartTrigger.Button>
+			</MiniCartTrigger.Badge>
+			<MiniCartTrigger.Drawer />
+		</MiniCartTrigger>
+	) : null;
 };
 
 MobileHeader.SearchDrawer = () => {
-  const { searchBarOpen, toggleSearchBar } = useMobileHeader();
-  const t = useTranslations("Search");
+	const { searchBarOpen, toggleSearchBar } = useMobileHeader();
+	const t = useTranslations("Search");
 
-  return (
-    <Drawer
-      open={searchBarOpen}
-      anchor="top"
-      onClose={toggleSearchBar}
-      sx={{ zIndex: 9999 }}
-    >
-      <Box width="auto" padding={2} height="100vh">
-        <FlexBetween mb={1}>
-          <Paragraph>{t("searchHeading")}</Paragraph>
-          <IconButton onClick={toggleSearchBar}>
-            <Clear />
-          </IconButton>
-        </FlexBetween>
-        <SearchBar handleCloseDrawer={toggleSearchBar} />
-      </Box>
-    </Drawer>
-  );
+	return (
+		<Drawer
+			open={searchBarOpen}
+			anchor="top"
+			onClose={toggleSearchBar}
+			sx={{ zIndex: 9999 }}
+		>
+			<Box width="auto" padding={2} height="100vh">
+				<FlexBetween mb={1}>
+					<Paragraph>{t("searchHeading")}</Paragraph>
+					<IconButton onClick={toggleSearchBar}>
+						<Clear />
+					</IconButton>
+				</FlexBetween>
+				<SearchBar handleCloseDrawer={toggleSearchBar} />
+			</Box>
+		</Drawer>
+	);
 };
 
 export default MobileHeader;

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

@@ -1,22 +1,22 @@
 "use client";
 
 import React, {
-  createContext,
-  useState,
-  useEffect,
-  useContext,
-  MouseEvent,
-  ReactNode,
+	createContext,
+	useState,
+	useEffect,
+	useContext,
+	MouseEvent,
+	ReactNode,
 } from "react";
 import { useRouter } from "next/navigation";
 // UI Components
 import {
-  Box,
-  Button,
-  Popover,
-  List,
-  ListItemButton,
-  IconButton,
+	Box,
+	Button,
+	Popover,
+	List,
+	ListItemButton,
+	IconButton,
 } from "@mui/material";
 import { MdPersonOutline as PersonOutline } from "react-icons/md";
 import MobileUserIcon from "@evenicanpm/storefront-core/src/components-v2/icons/user";
@@ -25,8 +25,8 @@ import T from "@evenicanpm/storefront-core/src/components-v2/T";
 // Auth components
 import { signIn, useSession } from "next-auth/react";
 import {
-  getMsalInstance,
-  initializeMsal,
+	getMsalInstance,
+	initializeMsal,
 } from "@evenicanpm/storefront-core/src/auth/msal";
 import signOutCustom from "@evenicanpm/storefront-core/src/auth/signout";
 // API hooks
@@ -35,219 +35,220 @@ import useSessionInit from "@evenicanpm/storefront-core/src/api-manager/services
 import useSessionLogout from "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-logout";
 
 interface IdTokenClaims {
-  given_name?: string;
-  family_name?: string;
+	given_name?: string;
+	family_name?: string;
 }
 
 const MENU_ITEMS = [
-  { href: "/account/profile", label: "Account.Menu.profile" },
-  { href: "/account/addresses", label: "Account.Menu.addresses" },
-  { href: "/account/orders", label: "Account.Menu.orders" },
-  { href: "/account/wish-lists", label: "Account.Menu.wishlists" },
+	{ href: "/account/profile", label: "Account.Menu.profile" },
+	{ href: "/account/addresses", label: "Account.Menu.addresses" },
+	{ href: "/account/orders", label: "Account.Menu.orders" },
+	{ 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;
+	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 {
-  children?: ReactNode;
+	children?: ReactNode;
 }
 
 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);
-    signOutCustom();
-  }
-
-  const isAuthenticated = !!session;
-  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 });
-      }
-    }
-  }, [isAuthenticated, session, sessionInit]);
-
-  // Handles MSAL redirect - which happens for edit profile and reset password use cases in account/profile page.
-  useEffect(() => {
-    const handleRedirect = async () => {
-      try {
-        await initializeMsal();
-        const res = await getMsalInstance().handleRedirectPromise();
-        if (res) {
-          const { given_name, family_name } =
-            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(console.error);
-          }
-        }
-      } catch (err) {
-        console.error("MSAL redirect error:", err);
-      }
-    };
-    handleRedirect();
-  }, [updateUser]);
-
-  const handleLogout = async () => {
-    try {
-      await sessionLogout({});
-      signOutCustom();
-    } catch (err) {
-      console.error("Logout Error:", err);
-    }
-  };
-
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-  const open = Boolean(anchorEl);
-
-  const value: UserContextValue = {
-    isAuthenticated,
-    status,
-    menuItems: MENU_ITEMS,
-    handleLogout,
-    signIn,
-    signOut: signOutCustom,
-    anchorEl,
-    setAnchorEl,
-    open,
-  };
-
-  if (status === "loading") return null;
-
-  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+	const { data: session, status } = useSession();
+
+	if (session?.error) {
+		// Custom error set in server - /api/auth/[...nextauth]
+		console.warn("Auth Error", session?.error);
+		signOutCustom();
+	}
+
+	const isAuthenticated = !!session;
+	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 });
+			}
+		}
+	}, [isAuthenticated, session, sessionInit]);
+
+	// Handles MSAL redirect - which happens for edit profile and reset password use cases in account/profile page.
+	useEffect(() => {
+		const handleRedirect = async () => {
+			try {
+				await initializeMsal();
+				const res = await getMsalInstance().handleRedirectPromise();
+				if (res) {
+					const { given_name, family_name } =
+						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(console.error);
+					}
+				}
+			} catch (err) {
+				console.error("MSAL redirect error:", err);
+			}
+		};
+		handleRedirect();
+	}, [updateUser]);
+
+	const handleLogout = async () => {
+		try {
+			await sessionLogout({});
+			signOutCustom();
+		} catch (err) {
+			console.error("Logout Error:", err);
+		}
+	};
+
+	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+	const open = Boolean(anchorEl);
+
+	const value: UserContextValue = {
+		isAuthenticated,
+		status,
+		menuItems: MENU_ITEMS,
+		handleLogout,
+		signIn,
+		signOut: signOutCustom,
+		anchorEl,
+		setAnchorEl,
+		open,
+	};
+
+	if (status === "loading") return null;
+
+	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>
-  );
+	const ctx = useContext(UserContext);
+	if (!ctx) return null;
+	const { isAuthenticated, signIn } = ctx;
+	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>
-  );
+	const ctx = useContext(UserContext);
+	if (!ctx) return null;
+	const { setAnchorEl } = ctx;
+	return (
+		<IconButton
+			aria-label="User Menu"
+			onClick={(e: MouseEvent<HTMLButtonElement>) =>
+				setAnchorEl(e.currentTarget)
+			}
+		>
+			<PersonOutline />
+		</IconButton>
+	);
 };
 
 User.Menu = function Menu({
-  children,
+	children,
 }: {
-  children?: (items: typeof MENU_ITEMS) => React.ReactNode;
+	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>
-  );
+	const ctx = useContext(UserContext);
+	if (!ctx) return null;
+	const { anchorEl, open, setAnchorEl, menuItems, handleLogout } = ctx;
+	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,
+	label,
 }: {
-  href: string;
-  label: string;
+	href: string;
+	label: string;
 }) {
-  return (
-    <NavLink href={href} style={{ color: "inherit" }}>
-      <ListItemButton>
-        <T path={label} />
-      </ListItemButton>
-    </NavLink>
-  );
+	return (
+		<NavLink href={href} style={{ color: "inherit" }}>
+			<ListItemButton>
+				<T path={label} />
+			</ListItemButton>
+		</NavLink>
+	);
 };
 
 User.LoginButton = function LoginButton() {
-  const { signIn } = useUserContext();
-  return (
-    <Button
-      size="small"
-      variant="contained"
-      color="primary"
-      onClick={() => signIn()}
-    >
-      <T path="Account.Menu.btnLogin" />
-    </Button>
-  );
+	const ctx = useContext(UserContext);
+	if (!ctx) return null;
+	const { signIn } = ctx;
+	return (
+		<Button
+			size="small"
+			variant="contained"
+			color="primary"
+			onClick={() => signIn()}
+		>
+			<T path="Account.Menu.btnLogin" />
+		</Button>
+	);
 };
 
 export default User;