@evenicanpm/storefront-core 1.0.0-alpha → 1.0.0

package/src/components/_components/products-view/products-grid-view.tsx

@@ -5,30 +5,44 @@ import { FlexBetween } from "@/components/_components/flex-box/index";
 import ProductCard16 from "@/components/_components/product-cards/product-card-16/index";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
 
 // ========================================================
-type Props = { products: Product[]; pagination?: ReactNode };
+type Props = {
+  products: Product[];
+  pagination?: ReactNode;
+  productPrices?: ProductPrice[];
+};
 // ========================================================
 
-export default function ProductsGridView({ products, pagination }: Props) {
+export default function ProductsGridView({
+  products,
+  pagination,
+  productPrices,
+}: Props) {
   return (
     <Fragment>
       <Grid container spacing={3}>
-        {products.map((item: Product) => (
-          <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.ItemId}>
-            <ProductCard16
-              id={item.RecordId}
-              key={item.RecordId}
-              slug={item.ItemId ?? ""}
-              title={item.Name ?? ""}
-              price={item.Price ?? 0}
-              discount={0} // Need to get discount info for product.
-              rating={item.TotalRatings ?? 0}
-              imgUrl={item.PrimaryImageUrl ?? ""}
-              showAddToCart={false}
-            />
-          </Grid>
-        ))}
+        {products.map((item: Product) => {
+          const matchingPrice = productPrices?.find(
+            (price) => price.ProductId === item.RecordId,
+          );
+          return (
+            <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.ItemId}>
+              <ProductCard16
+                id={item.RecordId}
+                key={item.RecordId}
+                slug={item.ItemId ?? ""}
+                title={item.Name ?? ""}
+                price={matchingPrice?.CustomerContextualPrice ?? null}
+                discount={0} // Need to get discount info for product.
+                rating={item.TotalRatings ?? 0}
+                imgUrl={item.PrimaryImageUrl ?? ""}
+                showAddToCart={false}
+              />
+            </Grid>
+          );
+        })}
       </Grid>
 
       <FlexBetween flexWrap="wrap" mt={6}>

package/src/components/_components/products-view/products-list-view.tsx

@@ -4,28 +4,42 @@ import FlexBetween from "@/components/_components/flex-box/flex-between";
 import { ProductCard9 } from "@/components/_components/product-cards/product-card-9/index";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
 
 // ==========================================================
-type Props = { products: Product[]; pagination?: ReactNode };
+type Props = {
+  products: Product[];
+  pagination?: ReactNode;
+  productPrices?: ProductPrice[];
+};
 // ==========================================================
 
-export default function ProductsListView({ products, pagination }: Props) {
+export default function ProductsListView({
+  products,
+  pagination,
+  productPrices,
+}: Props) {
   return (
     <div>
-      {products.map((item) => (
-        <ProductCard9
-          id={item.RecordId}
-          key={item.RecordId}
-          slug={item.ItemId ?? ""}
-          title={item.Name ?? ""}
-          price={item.Price}
-          off={0} // Need to get discount info for product.
-          rating={item.TotalRatings ?? 0}
-          imgUrl={item.PrimaryImageUrl ?? ""}
-          showAddToCart={false}
-          showFavorite={false}
-        />
-      ))}
+      {products.map((item) => {
+        const matchingPrice = productPrices?.find(
+          (price) => price.ProductId === item.RecordId,
+        );
+        return (
+          <ProductCard9
+            id={item.RecordId}
+            key={item.RecordId}
+            slug={item.ItemId ?? ""}
+            title={item.Name ?? ""}
+            price={matchingPrice?.CustomerContextualPrice ?? null}
+            off={0} // Need to get discount info for product.
+            rating={item.TotalRatings ?? 0}
+            imgUrl={item.PrimaryImageUrl ?? ""}
+            showAddToCart={false}
+            showFavorite={false}
+          />
+        );
+      })}
 
       <FlexBetween flexWrap="wrap" mt={4}>
         {pagination}

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

@@ -0,0 +1,110 @@
+import SearchInputWithCategories from "../../../../../../../../../storefront/src/app/_components/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/_components/navbar/utils/transform-nav.test";
+import NavProvider from "@components/NavProvider";
+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/_components/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 "@/components/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/_components/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/_components/search-box/components/search-result.tsx

@@ -4,26 +4,80 @@ 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 "@/_components/LazyImage";
+import { H4, Span } from "@/_components/Typography";
+import { currency } from "@/lib/lib";
+import ProductCard8 from "@/_components/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 }: Props) {
+export default function SearchResult({
+  results,
+  handleCloseDrawer,
+  openDialog,
+}: Props) {
+  const theme = useTheme();
+  const downMd = useMediaQuery(theme.breakpoints.down(1150));
   return (
     <SearchResultCard>
-      {results.map((item, i) => (
-        <MenuItem key={item?.Name || "" + i}>
-          <NavLink
-            href={getProductDetailUrl(item)}
-            key={item.RecordId}
-            onClick={handleCloseDrawer}
-          >
-            {item.Name}
-          </NavLink>
-        </MenuItem>
-      ))}
+      {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>
   );
 }