@evenicanpm/storefront-core 1.0.2 → 1.0.3

package/src/components-v2/footer/footer-3.tsx

@@ -0,0 +1,53 @@
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+// import { SxProps } from "@mui/material/styles"; // 'SxProps' is declared but its value is never read.
+import Container from "@mui/material/Container";
+// LOCAL CUSTOM COMPONENT
+import AppStore from "./components/app-store";
+import SocialLinks from "./components/social-links";
+// GLOBAL CUSTOM COMPONENTS
+import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// DATA
+import { CUSTOMER_CARE_LINKS } from "./data/index";
+// STYLED COMPONENTS
+import { StyledRoot, StyledLink } from "./styles/index";
+
+export default function Footer3() {
+  return (
+    <StyledRoot>
+      <Container>
+        <Grid container spacing={6}>
+          <Grid size={{ md: 7, xs: 12 }}>
+            <Link href="/">
+              <BazaarImage mb={2.5} src="/assets/images/logo.svg" alt="logo" />
+            </Link>
+
+            <Paragraph mb={2.5} color="grey.300" maxWidth="370px">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor
+              libero id et, in gravida. Sit diam duis mauris nulla cursus. Erat
+              et lectus vel ut sollicitudin elit at amet.
+            </Paragraph>
+
+            <AppStore />
+          </Grid>
+
+          <Grid size={{ md: 5, xs: 12 }}>
+            {/* CUSTOMER CARE LINKS */}
+            <Box mb={2} mt={{ md: 6, xs: 2 }}>
+              {CUSTOMER_CARE_LINKS.map((item, ind) => (
+                <StyledLink href="/" key={ind} sx={{ color: "grey.300" }}>
+                  {item}
+                </StyledLink>
+              ))}
+            </Box>
+
+            {/* SOCIAL LINKS WITH ICON */}
+            <SocialLinks />
+          </Grid>
+        </Grid>
+      </Container>
+    </StyledRoot>
+  );
+}

package/src/components-v2/footer/footer-4.tsx

@@ -0,0 +1,71 @@
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import Divider from "@mui/material/Divider";
+import Container from "@mui/material/Container";
+// LOCAL CUSTOM COMPONENT
+import AboutLinks from "./components/about-links";
+import SocialLinks from "./components/social-links";
+import CustomerCareLinks from "./components/customer-care-links";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
+// STYLED COMPONENT
+import { Heading } from "./styles/index";
+
+export default function Footer4() {
+  return (
+    <Box component="footer" bgcolor="white" pt={12}>
+      <Container>
+        <Grid container spacing={3}>
+          <Grid size={{ lg: 4, md: 4, sm: 6, xs: 12 }}>
+            <Box maxWidth={100}>
+              <LazyImage
+                src={require("../../../public/assets/images/logo2.svg")}
+                alt="logo"
+              />
+            </Box>
+
+            <Paragraph mb={2.5} maxWidth={{ xl: 400 }}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor
+              libero id et, in gravida. Sit diam duis mauris nulla cursus. Erat
+              et lectus vel ut sollicitudin elit at amet.
+            </Paragraph>
+          </Grid>
+
+          {/* ABOUT US LINKS */}
+          <Grid size={{ lg: 2, md: 2, sm: 6, xs: 12 }}>
+            <AboutLinks isDark />
+          </Grid>
+
+          {/* CUSTOMER CARE LINKS */}
+          <Grid size={{ lg: 3, md: 3, sm: 6, xs: 12 }}>
+            <CustomerCareLinks isDark />
+          </Grid>
+
+          {/* CONTACT INFORMATION */}
+          <Grid size={{ lg: 3, md: 3, sm: 6, xs: 12 }}>
+            <Heading>Contact Us</Heading>
+
+            <Paragraph py={0.6}>
+              70 Washington Square South, New York, NY 10012, United States
+            </Paragraph>
+
+            <Paragraph py={0.6}>Email: uilib.help@gmail.com</Paragraph>
+
+            <Paragraph py={0.6} mb={2}>
+              Phone: +1 1123 456 780
+            </Paragraph>
+          </Grid>
+        </Grid>
+
+        <Box component={Divider} mt={{ md: 8, xs: 3 }} />
+
+        <FlexBetween pt={2} pb={{ sm: 10, md: 2 }}>
+          <Paragraph>© 2023 By UI Lib. All rights reserved.</Paragraph>
+          <SocialLinks variant="dark" />
+        </FlexBetween>
+      </Container>
+    </Box>
+  );
+}

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

@@ -0,0 +1,4 @@
+export { default as Footer1 } from "./footer-1";
+export { default as Footer2 } from "./footer-2";
+export { default as Footer3 } from "./footer-3";
+export { default as Footer4 } from "./footer-4";

package/src/components-v2/footer/styles/index.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import Link from "next/link";
+import styled from "@mui/material/styles/styled";
+import getPaletteColor from "@/lib/get-palette-color";
+
+// ==============================================================
+type LinkProps = { isDark?: boolean };
+// ==============================================================
+
+export const StyledLink = styled(Link, {
+  shouldForwardProp: (prop) => prop !== "isDark",
+})<LinkProps>(({ theme, isDark }) => ({
+  borderRadius: 4,
+  display: "block",
+  cursor: "pointer",
+  position: "relative",
+  padding: "0.3rem 0rem",
+  ...(!isDark && {
+    color: theme.palette.grey[500],
+    "&:hover": { color: theme.palette.grey[100] },
+  }),
+}));
+
+export const StyledFooter = styled("footer")(({ theme }) => ({
+  [theme.breakpoints.down("md")]: { marginBottom: "4rem" },
+}));
+
+export const StyledRoot = styled("footer")(({ theme }) => ({
+  padding: 40,
+  color: "white",
+  borderRadius: 8,
+  background: getPaletteColor(theme, "primary", 600),
+  [theme.breakpoints.down("md")]: { marginBottom: "6rem !important" },
+}));
+
+export const Heading = styled("h6")({
+  fontSize: 18,
+  lineHeight: 1,
+  fontWeight: 600,
+  marginBottom: 12,
+});

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

@@ -0,0 +1,23 @@
+import Button from "@mui/material/Button";
+// MUI ICON COMPONENT
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+// CUSTOM ICON COMPONENTS
+import Category from "@evenicanpm/storefront-core/src/components-v2/icons/category";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import CategoryMenu from "@evenicanpm/storefront-core/src/components-v2/categories/category-menu";
+
+export default function CategoriesMenu() {
+  return (
+    <CategoryMenu
+      render={(handler) => (
+        <FlexBox color="grey.600" alignItems="center" ml={2}>
+          <Button color="inherit" onClick={(e) => handler(e)}>
+            <Category fontSize="small" color="inherit" />
+            <KeyboardArrowDown fontSize="small" color="inherit" />
+          </Button>
+        </FlexBox>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,75 @@
+import { Fragment } from "react";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import { useTranslations } from "next-intl";
+// CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { SearchInput } from "@evenicanpm/storefront-core/src/components-v2/search-box/index";
+import { MobileMenu } from "@evenicanpm/storefront-core/src/components-v2/navbar/mobile-menu/index";
+import {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
+import MiniCartClient from "../../MiniCartClient";
+import User from "./user";
+// ICONS
+import { MdClear as Clear } from "react-icons/md";
+import Search from "@evenicanpm/storefront-core/src/components-v2/icons/search";
+// API
+import { Cart } from "@/schemas/cart.schema";
+
+import useHeader from "../hooks/use-header";
+
+interface Props {
+  cart: Cart;
+}
+
+export default function MobileHeader({ cart }: Props) {
+  const { searchBarOpen, toggleSearchBar } = useHeader();
+
+  const t = useTranslations("Search");
+
+  return (
+    <Fragment>
+      <FlexBetween width="100%">
+        {/* Left content - navigation icon */}
+        <Box flex={1}>
+          <MobileMenu />
+        </Box>
+
+        {/* Middle content - logo */}
+        <SiteLogo height="2.125rem" />
+
+        {/* Right content - search, account, cart icons */}
+        <FlexBox justifyContent="end" flex={1}>
+          <IconButton onClick={toggleSearchBar}>
+            <Search style={{ fontSize: "1.25rem" }} />
+          </IconButton>
+          <User mobile={true} />
+          {cart && <MiniCartClient cart={cart} mobile={true} />}
+        </FlexBox>
+      </FlexBetween>
+
+      {/* Search form drawer */}
+      <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>
+
+          <SearchInput handleCloseDrawer={toggleSearchBar} />
+        </Box>
+      </Drawer>
+    </Fragment>
+  );
+}

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

@@ -0,0 +1,200 @@
+/*
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { useSession } from "next-auth/react";
+import { NextIntlClientProvider } from "next-intl";
+import { vi } from "vitest";
+import User from "./user";
+import { msalInstance } from "@/lib/auth/msal";
+import signOut from "@/lib/auth/signout";
+
+vi.mock("@/services | update | bd/session/mutations/session-init", () => ({
+  default: () => ({ mutateAsync: vi.fn() }),
+}));
+
+const mockMutate = vi.fn().mockResolvedValue({});
+vi.mock("@/services | update | bd/user/mutations/update-user", () => ({
+  default: () => ({ mutateAsync: mockMutate }),
+}));
+
+vi.mock("@/services | update | bd/session/mutations/session-logout", () => ({
+  default: () => ({ mutateAsync: vi.fn() }),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+  }),
+  usePathname: () => "/mock-path",
+}));
+
+vi.mock("next-auth/react", () => ({
+  useSession: vi.fn(),
+  signIn: vi.fn(),
+}));
+
+vi.mock("@/lib/auth/msal", () => ({
+  msalInstance: {
+    handleRedirectPromise: vi.fn().mockResolvedValue(null),
+  },
+  initializeMsal: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock("@/lib/auth/signout", () => ({
+  default: vi.fn(),
+}));
+
+describe("User Component", async () => {
+  const messages = (await import("@/../messages/en-USon")).default;
+
+  it("renders login button when user is not authenticated", () => {
+    (useSession as jest.Mock).mockReturnValue({
+      data: null,
+      status: "unauthenticated",
+    });
+
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <User />
+      </NextIntlClientProvider>,
+    );
+
+    expect(screen.getByText("Login")).toBeInTheDocument();
+  });
+
+  it("renders user menu button when authenticated", async () => {
+    (useSession as jest.Mock).mockReturnValue({
+      data: {
+        user: { email: "test@example.com" },
+        accessToken: "mockAccessToken",
+      },
+      status: "authenticated",
+    });
+
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <User />
+      </NextIntlClientProvider>,
+    );
+
+    const userMenuButton = await screen.findByRole("button", {
+      name: /user menu/i,
+    });
+    expect(userMenuButton).toBeInTheDocument();
+  });
+
+  it("calls signOut when session.error is present", () => {
+    (useSession as jest.Mock).mockReturnValue({
+      data: { error: "Some auth error" },
+      status: "authenticated",
+    });
+
+    render(<User />);
+
+    expect(signOut).toHaveBeenCalled();
+  });
+
+  it("calls signOut on logout button click", async () => {
+    const mockSignOut = vi.mocked(signOut);
+
+    (useSession as jest.Mock).mockReturnValue({
+      data: { user: { email: "test@example.com" }, accessToken: "token" },
+      status: "authenticated",
+    });
+
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <User />
+      </NextIntlClientProvider>,
+    );
+
+    // Open the menu first
+    fireEvent.click(screen.getByRole("button", { name: /user menu/i }));
+
+    const logoutButton = screen.getByRole("button", { name: /logout/i });
+    expect(logoutButton).toBeInTheDocument();
+
+    fireEvent.click(logoutButton);
+    expect(mockSignOut).toHaveBeenCalled();
+  });
+
+  it("handles MSAL redirect and updates user on success", async () => {
+    (useSession as jest.Mock).mockReturnValue({
+      data: {
+        user: { email: "test@example.com" },
+        accessToken: "mockAccessToken",
+      },
+      status: "authenticated",
+    });
+
+    vi.mocked(msalInstance.handleRedirectPromise).mockResolvedValue({
+      authority: "https://login.microsoftonline.com/some_authority",
+      uniqueId: "some_unique_id",
+      tenantId: "some_tenant_id",
+      tokenType: "id_token",
+      correlationId: "some_correlation_id",
+      idToken: "some_id_token",
+      accessToken: "some_access_token",
+      fromCache: false,
+      expiresOn: new Date(Date.now() + 3600000),
+      scopes: ["some_scope"],
+      account: {
+        homeAccountId: "some_home_account_id",
+        username: "some_username",
+        localAccountId: "some_local_account_id",
+        environment: "some_environment",
+        tenantId: "some_tenant_id",
+      },
+      idTokenClaims: {
+        given_name: "John",
+        family_name: "Doe",
+      },
+    });
+
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <User />
+      </NextIntlClientProvider>,
+    );
+
+    await waitFor(() =>
+      expect(mockMutate).toHaveBeenCalledWith({
+        AccountNumber: "",
+        FirstName: "John",
+        LastName: "Doe",
+      }),
+    );
+  });
+
+  it("handles error in MSAL redirect", async () => {
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(vi.fn());
+
+    (useSession as jest.Mock).mockReturnValue({
+      data: {
+        user: { email: "test@example.com" },
+        accessToken: "mockAccessToken",
+      },
+      status: "authenticated",
+    });
+
+    vi.mocked(msalInstance.handleRedirectPromise).mockRejectedValue(
+      new Error("MSAL Error"),
+    );
+
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <User />
+      </NextIntlClientProvider>,
+    );
+
+    await waitFor(() =>
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        "MSAL Redirect Handling Error:",
+        expect.any(Error),
+      ),
+    );
+
+    consoleErrorSpy.mockRestore();
+  });
+});*/

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

@@ -0,0 +1,204 @@
+"use client";
+
+import React, { useState, MouseEvent, useEffect } 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
+import {
+  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";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import T from "@evenicanpm/storefront-core/src/components-v2/T";
+
+// Auth
+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"
+
+interface IdTokenClaims {
+  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" },
+];
+
+interface Props {
+  mobile?: boolean;
+}
+const User = ({ mobile = false }: Props) => {
+  const { data: session, status } = useSession();
+
+  if (session?.error) {
+    // Custom error set in server - /api/auth/[...nextauth]
+    console.warn("Auth Error", session?.error);
+    signOut();
+  }
+
+  const isAuthenticated = !!session;
+
+  const router = useRouter();
+
+  const { mutateAsync: sessionInit } = useSessionInit();
+  const { mutateAsync: updateUser } = useUpdateUser();
+  const { mutateAsync: sessionLogout } = useSessionLogout();
+
+  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 response = await getMsalInstance().handleRedirectPromise();
+        if (response) {
+          // Update the API when profile info is updated through MSAL
+          const { given_name, family_name } =
+            response.idTokenClaims as IdTokenClaims;
+          if (given_name && family_name) {
+            updateUser({
+              AccountNumber: "",
+              FirstName: given_name,
+              LastName: family_name,
+            }).catch((err) => console.error("Update user Error:", err));
+          }
+        }
+      } catch (error) {
+        console.error("MSAL Redirect Handling Error:", error);
+      }
+    };
+
+    handleRedirect();
+  }, [updateUser]);
+
+  const handleLogout = async () => {
+    try {
+      await sessionLogout({});
+      signOut();
+    } catch (error) {
+      console.error("Logout Error:", error);
+    }
+  };
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const open = Boolean(anchorEl);
+  const id = open ? "account-popover" : undefined;
+
+  const setAnchorElNull = () => setAnchorEl(null);
+
+  if (status === "loading") return <></>;
+
+  if (mobile) {
+    return (
+      <IconButton
+        aria-label="User Menu"
+        onClick={() => {
+          if (!isAuthenticated) {
+            signIn();
+          } else {
+            router.push("/account/profile");
+          }
+        }}
+      >
+        <MobileUserIcon style={{ fontSize: "1.25rem" }} />
+      </IconButton>
+    );
+  }
+
+  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>
+      )}
+    </>
+  );
+};
+
+export default User;