@evenicanpm/storefront-core 1.0.1 → 1.0.3

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

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import { SxProps, Theme } from "@mui/material/styles";
+import { Props } from "simplebar-react";
+import "simplebar-react/dist/simplebar.min.css";
+// STYLED COMPONENT
+import { StyledScrollBar } from "./styles";
+
+// =============================================================
+interface ScrollbarProps extends Props {
+  autoHide?: boolean;
+  sx?: SxProps<Theme>;
+  children: ReactNode;
+}
+// =============================================================
+
+export default function Scolbar({
+  children,
+  autoHide = true,
+  sx,
+  ...props
+}: ScrollbarProps) {
+  return (
+    <StyledScrollBar sx={sx} autoHide={autoHide} {...props}>
+      {children}
+    </StyledScrollBar>
+  );
+}

package/src/components-v2/scrollbar/styles.ts

@@ -0,0 +1,15 @@
+"use client";
+
+import { alpha, styled } from "@mui/material/styles";
+import SimpleBar from "simplebar-react";
+
+export const StyledScrollBar = styled(SimpleBar)(({ theme }) => ({
+  maxHeight: "100%",
+  "& .simplebar-scrollbar": {
+    "&.simplebar-visible:before": { opacity: 1 },
+    "&:before": { backgroundColor: alpha(theme.palette.grey[400], 0.6) },
+  },
+  "& .simplebar-track.simplebar-vertical": { width: 9 },
+  "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": { height: 6 },
+  "& .simplebar-mask": { zIndex: "inherit" },
+}));

package/src/components-v2/search-box/__test__/search-input-category.test.tsx

@@ -0,0 +1,110 @@
+import SearchInputWithCategories from "../../../../../../../../../storefront/src/app/search-box/search-input-category";
+import { render, screen, waitFor } from "@testing-library/react";
+import { expect, describe, it, vi, beforeAll } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { categories } from "@app/navbar/utils/transform-nav.test";
+import NavProvider from "@evenicanpm/storefront-core/src/providers/nav-provider";
+import { CategoryHierarchy } from "@/lib/category-helpers";
+
+beforeAll(() => {
+  vi.mock("next/navigation", () => ({
+    usePathname: vi.fn().mockReturnValue("/"),
+  }));
+  vi.mock("@services/product", () => {
+    return {
+      searchProducts: vi.fn().mockReturnValue([
+        {
+          Name: "Shorts",
+          ItemCode: 1,
+          Category: { RecordId: 10, ParentCategory: 11 },
+        },
+        {
+          Name: "Ladies Shorts",
+          ItemCode: 2,
+          Category: { RecordId: 2, ParentCategory: 1 },
+        },
+      ]),
+    };
+  });
+  vi.mock("next/headers", () => ({
+    cookies: vi.fn().mockReturnValue(new Map([["storefront", "token"]])),
+  }));
+});
+
+describe("SearchInputWithCategories", async () => {
+  it.skip("should render the search input and the category button", () => {
+    render(<SearchInputWithCategories />);
+    const input = screen.getByRole("textbox");
+    const categories = screen.getByText(/all categories/i);
+
+    expect(input).toBeInTheDocument();
+    expect(categories).toBeInTheDocument();
+  });
+
+  it.skip("Handles category change and changes the button text to selected.", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <NavProvider
+        categories={categories as unknown as CategoryHierarchy[]}
+        cmsNav={[]}
+      >
+        <SearchInputWithCategories />
+      </NavProvider>,
+    );
+
+    const categoriesButton = screen.getByText(/all categories/i);
+    await user.click(categoriesButton);
+    const dropdownMenuItem = await screen.findByText("Women");
+
+    screen.debug(undefined, 10000);
+    await user.click(dropdownMenuItem);
+    const buttonWithNewText = screen.getByRole("button", {
+      name: /Women/i,
+    });
+
+    expect(buttonWithNewText).toBeInTheDocument();
+  });
+
+  it.skip("should render search results after user types", async () => {
+    const user = userEvent.setup();
+
+    render(<SearchInputWithCategories />);
+
+    const input = screen.getByRole("textbox");
+    expect(screen.queryByText("Shorts")).not.toBeInTheDocument();
+
+    await user.click(input);
+    await user.keyboard("Shorts"); // search term doesn't matter here, mock will return data regardless
+
+    expect(await screen.findByText("Shorts")).toBeInTheDocument();
+  });
+
+  it.skip("should filter search results by category", async () => {
+    const user = userEvent.setup();
+    render(
+      <NavProvider
+        categories={categories as unknown as CategoryHierarchy[]}
+        cmsNav={[]}
+      >
+        <SearchInputWithCategories />
+      </NavProvider>,
+    );
+
+    const categoriesButton = screen.getByText(/all categories/i);
+    const input = screen.getByRole("textbox");
+
+    await user.click(input);
+    await user.keyboard("Shorts");
+    expect(await screen.findByText("Shorts")).toBeInTheDocument();
+
+    await user.click(categoriesButton);
+    const dropdownMenuItem = await screen.findByText("Women");
+    await user.click(dropdownMenuItem);
+    await user.click(input);
+    await user.keyboard("Shorts");
+
+    waitFor(() => expect(screen.getByText("Shorts")).not.toBeInTheDocument());
+    expect(screen.queryByText("Ladies Shorts")).toBeInTheDocument();
+  });
+});

package/src/components-v2/search-box/__test__/search-input.test.tsx

@@ -0,0 +1,137 @@
+import { render, screen } from "@testing-library/react";
+import { expect, describe, it, vi, beforeAll } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { NextIntlClientProvider } from "next-intl";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import ENUS from "../../../../../../../../../storefront/messages/en-US.json";
+import { act } from "react";
+import searchResultsData from "./search-results.json";
+import SearchInput from "../search-input";
+import { NotificationProvider } from "src/providers/notifications/notification-context";
+
+const queryClient = new QueryClient();
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <NextIntlClientProvider locale="en-US" messages={ENUS}>
+    <NotificationProvider>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </NotificationProvider>
+  </NextIntlClientProvider>
+);
+
+const searchResults = searchResultsData;
+const mockSearchProducts = vi.fn().mockResolvedValue(searchResults);
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+beforeAll(() => {
+  vi.mock("next/navigation", () => ({
+    usePathname: vi.fn().mockReturnValue("/"),
+  }));
+  // vi.mock("@/api-manager/services/product/mutations/search-products", () => ({
+  //   default: () => ({
+  //     mutateAsync: vi.fn().mockReturnValue([
+  //       {
+  //         Name: "Amber Sports Sunglasses",
+  //         ItemId: "91007",
+  //         Price: 250,
+  //       },
+  //     ]),
+  //   }),
+  // }));
+  vi.mock("@/api-manager/services/product/mutations/search-products", () => ({
+    default: () => ({
+      mutateAsync: mockSearchProducts,
+    }),
+  }));
+  vi.mock("next/headers", () => ({
+    cookies: vi.fn().mockReturnValue(new Map([["storefront", "token"]])),
+  }));
+  window.matchMedia = vi.fn().mockImplementation((query) => ({
+    matches: true, // to mock mobile screen
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+  // vi.mock("@mui/material/useMediaQuery", () => ({
+  //   default: vi.fn().mockReturnValue(true),  // to mock mobile screen
+  // }));
+});
+const handleCloseDrawer = vi.fn();
+describe("SearchInput", () => {
+  it("should render the search input", () => {
+    render(
+      <Wrapper>
+        <SearchInput handleCloseDrawer={handleCloseDrawer} />
+      </Wrapper>,
+    );
+    const input = screen.getByRole("textbox");
+    expect(input).toBeInTheDocument();
+  });
+
+  it("should render search results with item names and prices after user types", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Wrapper>
+        <SearchInput handleCloseDrawer={handleCloseDrawer} />
+      </Wrapper>,
+    );
+    const input = screen.getAllByRole("textbox")[0];
+    expect(
+      screen.queryByText("Three Stone Diamond White Gold Ring"),
+    ).not.toBeInTheDocument();
+
+    // user.click(input);
+    // user.keyboard("shorts"); // search term doesn't matter here, mock will return data regardless
+
+    await act(async () => {
+      await user.type(input, "ring");
+    });
+    expect(input).toHaveValue("ring");
+    await act(async () => await sleep(1000)); // TODO: replace with debounce
+    expect(mockSearchProducts).toHaveBeenCalledTimes(1);
+    // make sure its mobile version of search results
+    expect(
+      await screen.findByText("Three Stone Diamond White Gold Ring"),
+    ).toBeInTheDocument();
+    expect(await screen.findByText("$410.00")).toBeInTheDocument();
+  });
+
+  it("should have the correct link", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Wrapper>
+        <SearchInput handleCloseDrawer={handleCloseDrawer} />
+      </Wrapper>,
+    );
+    const input = screen.getAllByRole("textbox")[0];
+    expect(
+      screen.queryByText("Three Stone Diamond White Gold Ring"),
+    ).not.toBeInTheDocument();
+
+    // user.click(input);
+    // user.keyboard("shorts"); // search term doesn't matter here, mock will return data regardless
+
+    await act(async () => {
+      await user.type(input, "ring");
+    });
+    expect(input).toHaveValue("ring");
+    await act(async () => await sleep(1000)); // TODO: replace with debounce
+    // make sure its mobile version of search results
+    const link = screen.getByRole("link", {
+      name: "product Three Stone Diamond White Gold Ring $410.00",
+    });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute(
+      "href",
+      "/product/Three Stone Diamond White Gold Ring/68719492176",
+    );
+  });
+});

package/src/components-v2/search-box/__test__/search-results.json

@@ -0,0 +1,165 @@
+[
+  {
+    "ItemId": "91078",
+    "Name": "Three Stone Diamond White Gold Ring",
+    "Price": 410,
+    "PrimaryImageUrl": "Products/91078_000_001.png",
+    "RecordId": 68719492176,
+    "ProductNumber": "91078",
+    "AverageRating": 4.071428571428571,
+    "TotalRatings": 14,
+    "Description": "Three diamonds on a white gold band.",
+    "BasePrice": 410,
+    "AttributeValues": [],
+    "IsMasterProduct": true,
+    "MasterProductId": 68719492176,
+    "DefaultUnitOfMeasure": "ea",
+    "ExtensionProperties": []
+  },
+  {
+    "ItemId": "91079",
+    "Name": "Three Stone Diamond Trellis Ring",
+    "Price": 440,
+    "PrimaryImageUrl": "Products/91079_000_001.png",
+    "RecordId": 68719492185,
+    "ProductNumber": "91079",
+    "TotalRatings": 0,
+    "Description": "A trellis band complete with three stone diamonds.",
+    "BasePrice": 440,
+    "AttributeValues": [],
+    "IsMasterProduct": true,
+    "MasterProductId": 68719492185,
+    "DefaultUnitOfMeasure": "ea",
+    "ExtensionProperties": []
+  },
+  {
+    "ItemId": "91077",
+    "Name": "Four Stone Diamond White Gold Ring",
+    "Price": 360,
+    "PrimaryImageUrl": "Products/91077_000_001.png",
+    "RecordId": 68719492166,
+    "ProductNumber": "91077",
+    "TotalRatings": 0,
+    "Description": "A white gold band complete with four stone diamonds.",
+    "BasePrice": 360,
+    "AttributeValues": [],
+    "IsMasterProduct": true,
+    "MasterProductId": 68719492166,
+    "DefaultUnitOfMeasure": "ea",
+    "ExtensionProperties": []
+  },
+  {
+    "ItemId": "93040",
+    "Name": "Ombre Fringe Skirt",
+    "Price": 95,
+    "PrimaryImageUrl": "Products/93040_000_001.png",
+    "RecordId": 68719494571,
+    "ProductNumber": "93040",
+    "AverageRating": 4.235294117647059,
+    "TotalRatings": 17,
+    "Description": "This ombre red-to-white fringe skirt is both elegant and fun.",
+    "BasePrice": 95,
+    "AttributeValues": [],
+    "IsMasterProduct": true,
+    "MasterProductId": 68719494571,
+    "DefaultUnitOfMeasure": "ea",
+    "ExtensionProperties": []
+  },
+  {
+    "ItemId": "91085",
+    "Name": "Gold Wrapped Pearl Earrings",
+    "Price": 95,
+    "PrimaryImageUrl": "Products/91085_000_001.png",
+    "RecordId": 68719492200,
+    "ProductNumber": "91085",
+    "AverageRating": 3.9166666666666665,
+    "TotalRatings": 12,
+    "Description": "Pearls wrapped in gold held by golden clasps.",
+    "BasePrice": 95,
+    "AttributeValues": [],
+    "IsMasterProduct": false,
+    "MasterProductId": 0,
+    "DefaultUnitOfMeasure": "ea",
+    "ExtensionProperties": []
+  },
+  {
+    "ItemId": "91081",
+    "Name": "3\" Feather Earrings",
+    "Price": 55,
+    "PrimaryImageUrl": "Products/91081_000_001.png",
+    "RecordId": 68719492196,
+    "ProductNumber": "91081",
+    "TotalRatings": 0,
+    "Description": "Black 3\" feathers held by gold clips.",
+    "BasePrice": 55,
+    "AttributeValues": [],
+    "IsMasterProduct": false,
+    "MasterProductId": 0,
+    "DefaultUnitOfMeasure": "ea",
+    "ExtensionProperties": []
+  },
+  {
+    "ItemId": "91080",
+    "Name": "4\" Feather Earrings",
+    "Price": 60,
+    "PrimaryImageUrl": "Products/91080_000_001.png",
+    "RecordId": 68719492195,
+    "ProductNumber": "91080",
+    "TotalRatings": 0,
+    "Description": "Dark grey 4\" feathers at the end of gold clips.",
+    "BasePrice": 60,
+    "AttributeValues": [],
+    "IsMasterProduct": false,
+    "MasterProductId": 0,
+    "DefaultUnitOfMeasure": "ea",
+    "ExtensionProperties": []
+  },
+  {
+    "ItemId": "91045",
+    "Name": "Herringbone Fedora",
+    "Price": 180,
+    "PrimaryImageUrl": "Products/91045_000_001.png",
+    "RecordId": 68719495883,
+    "ProductNumber": "91045",
+    "TotalRatings": 0,
+    "Description": "A grey band circling a fedora complete with a herringbone pattern. \n",
+    "BasePrice": 180,
+    "AttributeValues": [],
+    "IsMasterProduct": true,
+    "MasterProductId": 68719495883,
+    "DefaultUnitOfMeasure": "ea",
+    "ExtensionProperties": []
+  },
+  {
+    "ItemId": "91086",
+    "Name": "Embedded Pearl Earrings",
+    "Price": 85,
+    "PrimaryImageUrl": "Products/91086_000_001.png",
+    "RecordId": 68719492201,
+    "ProductNumber": "91086",
+    "TotalRatings": 0,
+    "Description": "Pearls embedded in sterling silver earrings.",
+    "BasePrice": 85,
+    "AttributeValues": [],
+    "IsMasterProduct": false,
+    "MasterProductId": 0,
+    "DefaultUnitOfMeasure": "ea",
+    "ExtensionProperties": []
+  },
+  {
+    "ItemId": "91084",
+    "Name": "Golden Flower Earrings",
+    "Price": 120,
+    "PrimaryImageUrl": "Products/91084_000_001.png",
+    "RecordId": 68719492199,
+    "ProductNumber": "91084",
+    "TotalRatings": 0,
+    "Description": "Golden 1/4\" flowers held by golden clasps.",
+    "BasePrice": 120,
+    "AttributeValues": [],
+    "IsMasterProduct": false,
+    "MasterProductId": 0,
+    "DefaultUnitOfMeasure": "ea",
+    "ExtensionProperties": []
+  }
+]

package/src/components-v2/search-box/components/category-dropdown.tsx

@@ -0,0 +1,61 @@
+"use client";
+import React from "react";
+import MenuItem from "@mui/material/MenuItem";
+import TouchRipple from "@mui/material/ButtonBase";
+import useTheme from "@mui/material/styles/useTheme";
+import { MdKeyboardArrowDown as KeyboardArrowDownOutlined } from "react-icons/md";
+
+import Menu from "@evenicanpm/storefront-core/src/components-v2/BazaarMenu";
+import { DropDownHandler } from "../styles/index";
+import { CategoryHierarchy } from "@/lib/category-helpers";
+
+type DisplayCategory = {
+  name: string;
+  id: number;
+};
+interface Props {
+  title: string;
+  handleChange: (categoryId: number) => void;
+  categories: CategoryHierarchy[];
+}
+
+const CategoryDropdown = ({ title, handleChange, categories }: Props) => {
+  const { breakpoints } = useTheme();
+  const _categories = Array.isArray(categories) ? categories : [];
+  const options: DisplayCategory[] = [
+    ..._categories.map((cat) => ({ name: cat?.Name ?? "", id: cat.RecordId })),
+    { name: "All Categories", id: 0 },
+  ]; // add all categories option
+
+  return (
+    <>
+      <Menu
+        direction="left"
+        sx={{ zIndex: breakpoints.down("md") ? 99999 : 1502 }}
+        handler={(e) => (
+          <DropDownHandler as={TouchRipple} onClick={e}>
+            {title}
+            <KeyboardArrowDownOutlined fontSize="small" color="inherit" />
+          </DropDownHandler>
+        )}
+        options={(onClose) => {
+          return options
+            ?.filter((current: DisplayCategory) => current.name !== title)
+            .map((item: DisplayCategory) => (
+              <MenuItem
+                key={item.id}
+                onClick={() => {
+                  handleChange(item.id);
+                  onClose();
+                }}
+              >
+                {item.name}
+              </MenuItem>
+            ));
+        }}
+      />
+    </>
+  );
+};
+
+export default CategoryDropdown;

package/src/components-v2/search-box/components/search-result.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import NavLink from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link";
+import MenuItem from "@mui/material/MenuItem";
+import { SearchResultCard } from "../styles/index";
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import { getProductDetailUrl } from "@/lib/build-product-detail-url";
+import { Box, Grid, useMediaQuery, useTheme } from "@mui/material";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import {
+  H4,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { currency } from "@/lib/lib";
+import ProductCard8 from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-8/product-card";
+import { DialogType } from "../search-input-category";
+
+interface Props {
+  results: ProductSearchResult[];
+  handleCloseDrawer?: () => void; // Close search drawer in mobile screen
+  openDialog: (type: DialogType, productId: number) => void;
+}
+
+export default function SearchResult({
+  results,
+  handleCloseDrawer,
+  openDialog,
+}: Props) {
+  const theme = useTheme();
+  const downMd = useMediaQuery(theme.breakpoints.down(1150));
+  return (
+    <SearchResultCard>
+      {downMd ? (
+        <>
+          {results.map((item, i) => (
+            <MenuItem key={item?.Name || "" + i} onClick={handleCloseDrawer}>
+              <NavLink href={getProductDetailUrl(item)} key={item.RecordId}>
+                <Box display="flex" alignItems="center">
+                  <Box position="relative" height={130} width={130}>
+                    <LazyImage
+                      height={300}
+                      width={300}
+                      alt="product"
+                      className="product-img"
+                      src={item.PrimaryImageUrl ?? ""}
+                    />
+                  </Box>
+                  <Box flex="1" ml={2} whiteSpace="normal">
+                    <H4>{item.Name}</H4>
+                    <Span>{currency(item.Price)}</Span>
+                  </Box>
+                </Box>
+              </NavLink>
+            </MenuItem>
+          ))}
+        </>
+      ) : (
+        <Grid container>
+          {results.map((item) => (
+            <Grid
+              key={item.ItemId}
+              item
+              xs={12}
+              sm={6}
+              md={4}
+              onClick={handleCloseDrawer}
+            >
+              <ProductCard8
+                slug={item.ItemId ?? ""}
+                price={item.Price}
+                title={item.Name ?? ""}
+                thumbnail={item.PrimaryImageUrl ?? ""}
+                id={item.RecordId ?? ""}
+                rating={item.AverageRating ?? 0}
+                reviews={item.TotalRatings ?? 0}
+                categories={[]} // TODO: Category info not available in item
+                openDialog={openDialog}
+                enableWishlistDialog={false}
+                enableQuickViewDialog={false} // Enable quick view dialog
+              />
+            </Grid>
+          ))}
+        </Grid>
+      )}
+    </SearchResultCard>
+  );
+}

package/src/components-v2/search-box/hooks/use-search.ts

@@ -0,0 +1,63 @@
+"use client";
+
+import { ChangeEvent, useState, useEffect, useCallback } from "react";
+import useSearchProducts from "@/services/product/mutations/search-products";
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+
+const DEBOUNCE_TIME = 100;
+
+export default function useSearch() {
+  const [resultList, setResultList] = useState<ProductSearchResult[]>([]);
+  const [categoryId, setCategoryId] = useState<string | null>(null);
+  const [categoryTitle, setCategoryTitle] = useState("All Categories");
+  const [searchText, setSearchText] = useState("");
+  const [debouncedSearchText, setDebouncedSearchText] = useState("");
+
+  const { mutateAsync: searchProducts } = useSearchProducts();
+
+  const handleSearch = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setSearchText(e.target.value);
+  }, []);
+
+  const handleCategoryChange = useCallback(
+    (cat: { name: string; id: string }) => {
+      setCategoryId(cat.id);
+      setCategoryTitle(cat.name);
+    },
+    [],
+  );
+
+  // Debounce search input
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedSearchText(searchText);
+    }, DEBOUNCE_TIME);
+    return () => clearTimeout(timeoutId);
+  }, [searchText]);
+
+  useEffect(() => {
+    const getProducts = async () => {
+      if (!debouncedSearchText) {
+        setResultList([]);
+        return;
+      }
+
+      const results = await searchProducts({
+        searchText: debouncedSearchText,
+        category: 0, // Category filter not used in mobile search
+      });
+
+      setResultList(results);
+    };
+
+    getProducts();
+  }, [debouncedSearchText, categoryId, searchProducts]);
+
+  return {
+    category: categoryId,
+    resultList,
+    handleSearch,
+    categoryTitle,
+    handleCategoryChange,
+  };
+}

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

@@ -0,0 +1,2 @@
+export { default as SearchInput } from "./search-input";
+export { default as SearchInputWithCategory } from "./search-input-category";