@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/components-v2/categories/mega-menu/styles.ts

@@ -0,0 +1,25 @@
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENT
+export const StyledRoot = styled(Card)(({ theme }) => ({
+  marginLeft: "1rem",
+  paddingBlock: "0.5rem",
+  "& .title-link, & .child-link": {
+    color: "inherit",
+    fontWeight: 600,
+    display: "block",
+    padding: "0.5rem 0px",
+  },
+  "& .child-link": {
+    fontWeight: 400,
+  },
+  "& .mega-menu-content": {
+    borderRadius: 4,
+    marginLeft: "1rem",
+    padding: "0.5rem 0px",
+    boxShadow: theme.shadows[3],
+    transition: "all 250ms ease-in-out",
+    backgroundColor: theme.palette.background.paper,
+  },
+}));

package/src/components-v2/categories/types.ts

@@ -0,0 +1,16 @@
+import { SvgIconComponent } from "@mui/icons-material";
+
+export interface CategoryItemOffer {
+  url: string;
+  href: string;
+  position: "right" | "bottom";
+}
+
+export interface CategoryItem {
+  href: string;
+  title: string;
+  component?: string;
+  icon?: SvgIconComponent;
+  children?: CategoryItem[];
+  offer?: CategoryItemOffer;
+}

package/src/components-v2/countries-input.tsx

@@ -0,0 +1,73 @@
+import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
+import {
+  Autocomplete,
+  AutocompleteRenderInputParams,
+  Box,
+  TextField,
+} from "@mui/material";
+import React from "react";
+
+interface Props {
+  countries: CountryRegionInfo[];
+  label: string;
+  selectedCountry: CountryRegionInfo | null;
+  setSelectedCountry: (country: CountryRegionInfo | null) => void;
+}
+
+export default function CountryInput({
+  countries,
+  label,
+  setSelectedCountry,
+  selectedCountry,
+}: Props) {
+  const [countryInputValue, setCountryInputValue] = React.useState<string>("");
+  const handleAutoCompleteChange = (
+    _event: React.SyntheticEvent<Element, Event>,
+    value: string,
+  ) => setCountryInputValue(value);
+
+  const renderOption = (
+    props: React.HTMLAttributes<HTMLLIElement> & {
+      key: any;
+    },
+    option: CountryRegionInfo,
+  ) => {
+    const { key, ...optionProps } = props;
+    return (
+      <Box key={key} component="li" {...optionProps}>
+        {option.ShortName}
+      </Box>
+    );
+  };
+  const renderInput = (params: AutocompleteRenderInputParams) => (
+    <TextField
+      {...params}
+      size="small"
+      label={label}
+      variant="outlined"
+      data-testid="country-input"
+      placeholder="Select Country"
+    />
+  );
+
+  const getOptionLabel = (option: CountryRegionInfo) => option.ShortName || "";
+
+  const renderAutocomplete = () => (
+    <Autocomplete
+      fullWidth
+      value={selectedCountry}
+      options={countries}
+      onChange={(_event, newValue) => {
+        setSelectedCountry(newValue);
+      }}
+      data-testid="country-autocomplete"
+      inputValue={countryInputValue}
+      onInputChange={handleAutoCompleteChange}
+      renderOption={(props, option) => renderOption(props, option)}
+      renderInput={renderInput}
+      getOptionLabel={getOptionLabel}
+    />
+  );
+
+  return renderAutocomplete();
+}

package/src/components-v2/flex-box/flex-between.tsx

@@ -0,0 +1,14 @@
+import Box, { BoxProps } from "@mui/material/Box";
+
+export default function FlexBetween({ children, ...props }: BoxProps) {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="space-between"
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components-v2/flex-box/flex-box.tsx

@@ -0,0 +1,9 @@
+import Box, { BoxProps } from "@mui/material/Box";
+
+export default function FlexBox({ children, ...props }: BoxProps) {
+  return (
+    <Box display="flex" {...props}>
+      {children}
+    </Box>
+  );
+}

package/src/components-v2/flex-box/flex-row-center.tsx

@@ -0,0 +1,9 @@
+import Box, { BoxProps } from "@mui/material/Box";
+
+export default function FlexRowCenter({ children, ...props }: BoxProps) {
+  return (
+    <Box display="flex" justifyContent="center" alignItems="center" {...props}>
+      {children}
+    </Box>
+  );
+}

package/src/components-v2/flex-box/index.ts

@@ -0,0 +1,5 @@
+import FlexBox from "./flex-box";
+import FlexBetween from "./flex-between";
+import FlexRowCenter from "./flex-row-center";
+
+export { FlexBox, FlexBetween, FlexRowCenter };

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,148 @@
+import { useContext, ReactNode, createContext } 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 { 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 MiniCartTrigger from "../../mini-cart/mini-cart-trigger";
+import User from "./user";
+// ICONS
+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 useHeader from "../hooks/use-header";
+import { SearchBarViewSm as SearchBar } from "@evenicanpm/storefront-core/src/components-v2/search-bar";
+import {
+  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;
+};
+
+const MobileHeaderContext = createContext<ReturnType<typeof useHeader> | null>(
+  null,
+);
+
+const MobileHeaderProvider = ({ children }: { children: React.ReactNode }) => {
+  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 MobileHeader = ({ children }: MobileHeaderRootProps) => {
+  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>
+  );
+};
+
+MobileHeader.Logo = () => {
+  return <SiteLogo height="2.125rem" />;
+};
+
+MobileHeader.Icons = ({ children }: { children: ReactNode }) => {
+  return (
+    <FlexBox justifyContent="end" flex={1}>
+      {children}
+    </FlexBox>
+  );
+};
+
+MobileHeader.User = () => {
+  return (
+    <User>
+      <User.MobileTrigger />
+    </User>
+  );
+};
+
+MobileHeader.Search = () => {
+  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;
+};
+
+MobileHeader.SearchDrawer = () => {
+  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>
+  );
+};
+
+export default MobileHeader;

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();
+  });
+});*/