@evenicanpm/storefront-core 1.0.1 → 1.0.3

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;

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

@@ -0,0 +1,63 @@
+"use client";
+
+import { Fragment, ReactNode } from "react";
+import useTheme from "@mui/material/styles/useTheme";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import clsx from "clsx";
+// 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";
+// STYLED COMPONENTS
+import { HeaderWrapper, StyledContainer } from "./styles/index";
+// API
+import getCart from "@/api-manager/services/cart/queries/get-cart";
+import { Cart } from "@/schemas/cart.schema";
+
+// ==============================================================
+interface Props {
+  isFixed?: boolean;
+  className?: string;
+  midSlot: ReactNode;
+}
+// ==============================================================
+
+export default function Header({ isFixed, className, midSlot }: Props) {
+  const theme = useTheme();
+  const downMd = useMediaQuery(theme.breakpoints.down(1150));
+
+  const { data: cart } = getCart.useData();
+
+  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>
+  );
+
+  return (
+    <HeaderWrapper className={clsx(className)}>
+      <StyledContainer>
+        {downMd ? (
+          <MobileHeader cart={cart as Cart} />
+        ) : (
+          CONTENT_FOR_LARGE_DEVICE
+        )}
+      </StyledContainer>
+    </HeaderWrapper>
+  );
+}

package/src/components-v2/header/hooks/use-header.ts

@@ -0,0 +1,13 @@
+"use client";
+
+import { useState } from "react";
+
+export default function useHeader() {
+  const [searchBarOpen, setSearchBarOpen] = useState(false);
+  const toggleSearchBar = () => setSearchBarOpen((state) => !state);
+
+  return {
+    searchBarOpen,
+    toggleSearchBar,
+  };
+}

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

@@ -0,0 +1 @@
+export { default } from "./header";

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

@@ -0,0 +1,17 @@
+"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 Sticky from "@evenicanpm/storefront-core/src/components-v2/sticky/index";
+import { useCallback, useState } from "react";
+
+export default function StickyHeader() {
+  const [isFixed, setIsFixed] = useState(false);
+  const toggleIsFixed = useCallback((fixed: boolean) => setIsFixed(fixed), []);
+
+  return (
+    <Sticky fixedOn={0} onSticky={toggleIsFixed} scrollDistance={300}>
+      <Header isFixed={isFixed} midSlot={<SearchInputWithCategory />} />
+    </Sticky>
+  );
+}

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

@@ -0,0 +1,24 @@
+import Container from "@mui/material/Container";
+import styled from "@mui/material/styles/styled";
+// CONSTANT VARIABLES
+import { layoutConstant } from "@evenicanpm/storefront-core/src/components-v2/utils/constants";
+
+export const HeaderWrapper = styled("div")(({ theme }) => ({
+  zIndex: 3,
+  position: "relative",
+  height: layoutConstant.headerHeight,
+  transition: "height 250ms ease-in-out",
+  background: theme.palette.background.paper,
+  // borderBottom: `1px solid ${theme.palette.grey[200]}`,
+  [theme.breakpoints.down("sm")]: {
+    height: layoutConstant.mobileHeaderHeight,
+  },
+}));
+
+export const StyledContainer = styled(Container)({
+  gap: 2,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+});

package/src/components-v2/icons/cart-bag.tsx

@@ -0,0 +1,13 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const CartBag = createSvgIcon(
+  <svg viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.33329 7.37181V5.37181C5.33329 2.79431 7.42079 0.705139 9.99996 0.705139C12.5791 0.705139 14.6666 2.79431 14.6666 5.37181V7.37181H17.3333C18.4375 7.37181 19.3333 8.26764 19.3333 9.37181V18.0385C19.3333 20.2468 17.5416 22.0385 15.3333 22.0385H4.66663C2.45746 22.0385 0.666626 20.2468 0.666626 18.0385V9.37181C0.666626 8.26764 1.56204 7.37181 2.66663 7.37181H5.33329ZM7.33329 7.37181H12.6666V5.37181C12.6666 3.89889 11.4708 2.70514 9.99996 2.70514C8.52913 2.70514 7.33329 3.89889 7.33329 5.37181V7.37181ZM2.66663 9.37181V18.0385C2.66663 19.1426 3.56204 20.0385 4.66663 20.0385H15.3333C16.4375 20.0385 17.3333 19.1426 17.3333 18.0385V9.37181H14.6666V11.7051C14.6666 12.2593 14.2208 12.7051 13.6666 12.7051C13.1125 12.7051 12.6666 12.2593 12.6666 11.7051V9.37181H7.33329V11.7051C7.33329 12.2593 6.88746 12.7051 6.33329 12.7051C5.77913 12.7051 5.33329 12.2593 5.33329 11.7051V9.37181H2.66663Z"
+      fill="currentColor"
+    />
+  </svg>,
+  "CartBag",
+);
+
+export default CartBag;

package/src/components-v2/icons/category-outline.tsx

@@ -0,0 +1,29 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const CategoryOutlined = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 24 24">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 3C2 2.44772 2.44772 2 3 2H10C10.5523 2 11 2.44772 11 3V10C11 10.5523 10.5523 11 10 11H3C2.44772 11 2 10.5523 2 10V3ZM4 4V9H9V4H4Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13 3C13 2.44772 13.4477 2 14 2H21C21.5523 2 22 2.44772 22 3V10C22 10.5523 21.5523 11 21 11H14C13.4477 11 13 10.5523 13 10V3ZM15 4V9H20V4H15Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13 14C13 13.4477 13.4477 13 14 13H21C21.5523 13 22 13.4477 22 14V21C22 21.5523 21.5523 22 21 22H14C13.4477 22 13 21.5523 13 21V14ZM15 15V20H20V15H15Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 14C2 13.4477 2.44772 13 3 13H10C10.5523 13 11 13.4477 11 14V21C11 21.5523 10.5523 22 10 22H3C2.44772 22 2 21.5523 2 21V14ZM4 15V20H9V15H4Z"
+    />
+  </svg>,
+  "CategoryOutlined",
+);
+
+export default CategoryOutlined;

package/src/components-v2/icons/category.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const Category = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 64 64">
+    <path d="m29 11v14a4 4 0 0 1 -4 4h-14a4 4 0 0 1 -4-4v-14a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4zm24-4h-14a4 4 0 0 0 -4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4v-14a4 4 0 0 0 -4-4zm-28 28h-14a4 4 0 0 0 -4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4v-14a4 4 0 0 0 -4-4zm21 0a11 11 0 1 0 11 11 11 11 0 0 0 -11-11z" />
+  </svg>,
+  "Category",
+);
+
+export default Category;

package/src/components-v2/icons/home.tsx

@@ -0,0 +1,19 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const Home = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 24 24">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.3861 1.21065C11.7472 0.929784 12.2528 0.929784 12.6139 1.21065L21.6139 8.21065C21.8575 8.4001 22 8.69141 22 9V20C22 20.7957 21.6839 21.5587 21.1213 22.1213C20.5587 22.6839 19.7957 23 19 23H5C4.20435 23 3.44129 22.6839 2.87868 22.1213C2.31607 21.5587 2 20.7957 2 20V9C2 8.69141 2.14247 8.4001 2.38606 8.21065L11.3861 1.21065ZM4 9.48908V20C4 20.2652 4.10536 20.5196 4.29289 20.7071C4.48043 20.8946 4.73478 21 5 21H19C19.2652 21 19.5196 20.8946 19.7071 20.7071C19.8946 20.5196 20 20.2652 20 20V9.48908L12 3.26686L4 9.48908Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 12C8 11.4477 8.44772 11 9 11H15C15.5523 11 16 11.4477 16 12V22C16 22.5523 15.5523 23 15 23C14.4477 23 14 22.5523 14 22V13H10V22C10 22.5523 9.55228 23 9 23C8.44772 23 8 22.5523 8 22V12Z"
+    />
+  </svg>,
+  "Home",
+);
+
+export default Home;

package/src/components-v2/icons/search.tsx

@@ -0,0 +1,13 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const Search = createSvgIcon(
+  <svg viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M21.3162 20.0056L17.2879 15.9891C18.5876 14.3333 19.2928 12.2886 19.2902 10.1836C19.2902 8.30891 18.7343 6.47636 17.6928 4.91764C16.6513 3.35892 15.1709 2.14405 13.439 1.42665C11.707 0.709246 9.80123 0.521542 7.96259 0.887269C6.12396 1.253 4.43507 2.15573 3.10948 3.48131C1.7839 4.80689 0.88117 6.49579 0.515443 8.33442C0.149715 10.1731 0.33742 12.0788 1.05482 13.8108C1.77222 15.5428 2.98709 17.0231 4.54581 18.0646C6.10453 19.1061 7.93709 19.662 9.81174 19.662C11.9167 19.6646 13.9615 18.9594 15.6173 17.6597L19.6338 21.688C19.7439 21.7991 19.8749 21.8872 20.0193 21.9474C20.1637 22.0075 20.3186 22.0385 20.475 22.0385C20.6314 22.0385 20.7862 22.0075 20.9306 21.9474C21.075 21.8872 21.206 21.7991 21.3162 21.688C21.4272 21.5779 21.5154 21.4468 21.5755 21.3024C21.6357 21.1581 21.6666 21.0032 21.6666 20.8468C21.6666 20.6904 21.6357 20.5355 21.5755 20.3912C21.5154 20.2468 21.4272 20.1157 21.3162 20.0056ZM2.70292 10.1836C2.70292 8.77758 3.11985 7.40316 3.90098 6.23412C4.6821 5.06508 5.79235 4.15393 7.09132 3.61588C8.39028 3.07783 9.81963 2.93705 11.1986 3.21134C12.5776 3.48564 13.8443 4.16269 14.8384 5.15688C15.8326 6.15106 16.5097 7.41773 16.784 8.79671C17.0583 10.1757 16.9175 11.605 16.3794 12.904C15.8414 14.203 14.9302 15.3132 13.7612 16.0943C12.5922 16.8755 11.2177 17.2924 9.81174 17.2924C7.92637 17.2924 6.11821 16.5434 4.78505 15.2103C3.45189 13.8771 2.70292 12.0689 2.70292 10.1836Z"
+      fill="currentColor"
+    />
+  </svg>,
+  "Search",
+);
+
+export default Search;

package/src/components-v2/icons/shopping-bag-outlined.tsx

@@ -0,0 +1,13 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const ShoppingBagOutlined = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 24 24">
+    <g>
+      <rect fill="none" height="24" width="24" />
+      <path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M18,20H6V8h2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8h4v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8 h2V20z" />
+    </g>
+  </svg>,
+  "ShoppingBagOutlined",
+);
+
+export default ShoppingBagOutlined;

package/src/components-v2/icons/up-down.tsx

@@ -0,0 +1,21 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const UpDown = createSvgIcon(
+  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.64847 6.88354H3.35158C3.04454 6.88354 2.86173 7.2269 3.03517 7.4812L5.68362 11.3824C5.83596 11.6062 6.16526 11.6062 6.3176 11.3824L8.96605 7.4812C9.13714 7.2269 8.9555 6.88354 8.64847 6.88354Z"
+      fill="currentColor"
+    />
+    <path
+      d="M8.64852 6.76641C8.54188 6.76641 8.43524 6.76641 8.32743 6.76641C8.05204 6.76641 7.77782 6.76641 7.50243 6.76641C7.13329 6.76641 6.76532 6.76641 6.39618 6.76641C6.0036 6.76641 5.61102 6.76641 5.21845 6.76641C4.87274 6.76641 4.52821 6.76641 4.18251 6.76641C3.95517 6.76641 3.72783 6.76641 3.49931 6.76641C3.45361 6.76641 3.40673 6.76641 3.36103 6.76641C3.17705 6.76758 3.00478 6.85898 2.91455 7.02187C2.82197 7.18828 2.83251 7.39102 2.93916 7.54922C2.96728 7.59141 2.9954 7.63242 3.02353 7.67344C3.16064 7.87617 3.29892 8.07891 3.43603 8.28164C3.64111 8.58281 3.84618 8.88516 4.05009 9.18633C4.26923 9.50977 4.48954 9.8332 4.70868 10.1566C4.89384 10.4285 5.07782 10.7016 5.26298 10.9734C5.36259 11.1211 5.46337 11.2687 5.56298 11.4164C5.63798 11.5277 5.73642 11.6168 5.87001 11.6508C6.08446 11.7059 6.2954 11.6145 6.41962 11.4363C6.50282 11.3168 6.58368 11.1949 6.66571 11.0742C6.84032 10.8164 7.01493 10.5598 7.18954 10.302C7.40751 9.97969 7.62665 9.65859 7.84461 9.33633C8.05438 9.02812 8.26415 8.71875 8.47274 8.41055C8.62391 8.18789 8.77508 7.96406 8.92625 7.74141C9.02703 7.59375 9.14891 7.44961 9.14539 7.26094C9.14422 6.98672 8.91922 6.77109 8.64852 6.76641C8.49735 6.76406 8.49735 6.99844 8.64852 7.00078C8.85125 7.0043 8.98133 7.22109 8.88055 7.39687C8.8618 7.42969 8.83836 7.46133 8.81727 7.49297C8.70125 7.66289 8.58641 7.83398 8.47039 8.00391C8.06493 8.60156 7.65946 9.19922 7.25282 9.79687C6.93173 10.2703 6.61063 10.7437 6.28954 11.216C6.2661 11.2512 6.24266 11.2863 6.21805 11.3203C6.12313 11.4504 5.94149 11.4715 5.82548 11.3684C5.79149 11.3379 5.76806 11.2992 5.74227 11.2617C5.69774 11.1961 5.65321 11.1305 5.60868 11.0648C5.2454 10.5305 4.88212 9.99492 4.52001 9.46055C4.13915 8.89922 3.75712 8.33672 3.37626 7.77539C3.29775 7.65937 3.21806 7.54453 3.14072 7.42852C3.05634 7.30195 3.07392 7.14726 3.18642 7.0582C3.2497 7.00898 3.31298 7.00078 3.3915 7.00078C3.86025 7.00078 4.33017 7.00078 4.79892 7.00078C5.55009 7.00078 6.30126 7.00078 7.05243 7.00078C7.55985 7.00078 8.0661 7.00078 8.57352 7.00078C8.5993 7.00078 8.62391 7.00078 8.64969 7.00078C8.79852 7.00078 8.79969 6.76641 8.64852 6.76641ZM8.64852 5.11641H3.35165C3.04462 5.11641 2.86181 4.77305 3.03525 4.51875L5.68368 0.617578C5.83602 0.39375 6.16532 0.39375 6.31766 0.617578L8.9661 4.51875C9.13719 4.77305 8.95555 5.11641 8.64852 5.11641Z"
+      fill="currentColor"
+    />
+    <path
+      d="M8.64832 4.99922C8.28153 4.99922 7.91473 4.99922 7.54676 4.99922C6.80262 4.99922 6.05849 4.99922 5.31552 4.99922C4.73193 4.99922 4.14834 4.99922 3.56592 4.99922C3.50615 4.99922 3.44639 4.99922 3.38662 4.99922C3.30459 4.99922 3.23428 4.98515 3.17803 4.93476C3.07022 4.83633 3.05733 4.6957 3.1417 4.57031C3.16865 4.53047 3.19561 4.49062 3.22256 4.45195C3.55068 3.96914 3.87881 3.48633 4.20576 3.00234C4.60888 2.4082 5.01201 1.81524 5.41513 1.2211C5.52529 1.05821 5.63661 0.895317 5.74677 0.732426C5.77372 0.692583 5.7995 0.650395 5.83583 0.62227C5.95536 0.52852 6.12763 0.55313 6.21903 0.680864C6.30106 0.794536 6.37724 0.912895 6.45575 1.02891C6.62333 1.27618 6.79208 1.52461 6.95966 1.77188C7.37801 2.38828 7.79637 3.00469 8.21473 3.61992C8.37293 3.85312 8.53113 4.08515 8.68816 4.31836C8.7327 4.38281 8.77605 4.44844 8.82059 4.51289C8.8452 4.55039 8.87566 4.58789 8.89441 4.6289C8.96824 4.8 8.84051 4.9957 8.64832 4.99922C8.49715 5.00156 8.49715 5.23593 8.64832 5.23359C8.92371 5.2289 9.15926 5.00039 9.14871 4.71914C9.14519 4.60898 9.10301 4.51289 9.04324 4.425C8.93777 4.26914 8.8323 4.11445 8.72684 3.95859C8.53934 3.68203 8.35184 3.40547 8.16317 3.12891C7.94285 2.80547 7.72371 2.48086 7.5034 2.15742C7.30184 1.85977 7.10028 1.56211 6.89755 1.26563C6.76395 1.06875 6.62919 0.870707 6.49559 0.673833C6.47098 0.637505 6.44638 0.600005 6.42059 0.563677C6.29403 0.382036 6.06903 0.287115 5.85224 0.356255C5.65419 0.418364 5.56044 0.591802 5.45146 0.751176C5.30146 0.971488 5.15263 1.1918 5.00263 1.41328C4.79287 1.72266 4.5831 2.03203 4.37216 2.34141C4.1542 2.6625 3.93623 2.98242 3.71943 3.30352C3.54365 3.5625 3.3667 3.82266 3.19092 4.08164C3.10654 4.20586 3.021 4.3289 2.93779 4.45429C2.82998 4.61601 2.82178 4.82929 2.9249 4.99687C3.01983 5.15039 3.18389 5.23476 3.36318 5.23593C3.50615 5.23711 3.65029 5.23593 3.79326 5.23593C4.08974 5.23593 4.38623 5.23593 4.68271 5.23593C5.06357 5.23593 5.44325 5.23593 5.82411 5.23593C6.21317 5.23593 6.60223 5.23593 6.9913 5.23593C7.31942 5.23593 7.64872 5.23593 7.97684 5.23593C8.17371 5.23593 8.37059 5.23593 8.56746 5.23593C8.59441 5.23593 8.62137 5.23593 8.64832 5.23593C8.79832 5.23359 8.79949 4.99922 8.64832 4.99922Z"
+      fill="currentColor"
+    />
+  </svg>,
+  "UpDown",
+);
+
+export default UpDown;