@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -1,137 +0,0 @@
-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

@@ -1,165 +0,0 @@
-[
-  {
-    "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/search-result.tsx

@@ -1,86 +0,0 @@
-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

@@ -1,63 +0,0 @@
-"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

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

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

@@ -1,110 +0,0 @@
-import SearchInputWithCategories from "./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 "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav.test";
-import NavProvider from "@evenicanpm/storefront-core/src/providers/nav-provider/index";
-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();
-  });
-});