@evenicanpm/storefront-core 1.0.4 → 1.0.6

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

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

@@ -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 "@/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

@@ -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/_components/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 "@/components/_components/navbar/utils/transform-nav.test";
-import NavProvider from "@/components/NavProvider/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();
-  });
-});

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

@@ -1,41 +0,0 @@
-import SearchInput from "./search-input";
-import { render, screen } from "@testing-library/react";
-import { expect, describe, it, vi, beforeAll } from "vitest";
-import userEvent from "@testing-library/user-event";
-
-beforeAll(() => {
-  vi.mock("next/navigation", () => ({
-    usePathname: vi.fn().mockReturnValue("/"),
-  }));
-  vi.mock("@services/product", () => {
-    return {
-      searchProducts: vi
-        .fn()
-        .mockReturnValue([{ Name: "shorts", ItemCode: "123" }]),
-    };
-  });
-  vi.mock("next/headers", () => ({
-    cookies: vi.fn().mockReturnValue(new Map([["storefront", "token"]])),
-  }));
-});
-const handleCloseDrawer = vi.fn();
-describe("SearchInput", () => {
-  it.skip("should render the search input", () => {
-    render(<SearchInput handleCloseDrawer={handleCloseDrawer} />);
-    const input = screen.getByRole("textbox");
-    expect(input).toBeInTheDocument();
-  });
-
-  it.skip("should render search results after user types", async () => {
-    const user = userEvent.setup();
-
-    render(<SearchInput handleCloseDrawer={handleCloseDrawer} />);
-    const input = screen.getAllByRole("textbox")[0];
-    expect(screen.queryByText("shorts")).not.toBeInTheDocument();
-
-    user.click(input);
-    user.keyboard("shorts"); // search term doesn't matter here, mock will return data regardless
-
-    expect(await screen.findByText("shorts")).toBeInTheDocument();
-  });
-});

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

@@ -1,84 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-// These are custom types used in bazaar template project - should be replaced as we migrate screens to use data source types
-// Don't add any data source types here.
-
-interface Shop {
-  id: string;
-  slug: string;
-  user: any;
-  email: string;
-  name: string;
-  phone: string;
-  address: string;
-  rating?: number;
-  verified: boolean;
-  products?: any | Product[];
-  coverPicture: string;
-  profilePicture: string;
-  socialLinks: {
-    facebook?: string;
-    youtube?: string;
-    twitter?: string;
-    instagram?: string;
-  };
-}
-
-interface User {
-  id: string;
-  email: string;
-  phone: string;
-  avatar: string;
-  password: string;
-  dateOfBirth: Date | string;
-  verified: boolean;
-  name: { firstName: string; lastName: string };
-}
-
-interface Review {
-  id: string;
-  rating: number;
-  customer: User;
-  comment: string;
-  product: Product;
-  published?: boolean;
-}
-
-export interface Product {
-  unit?: any;
-  slug: string;
-  price: number;
-  title: string;
-  rating: number;
-  discount: number;
-  thumbnail: string;
-  id: string;
-  shop?: Shop;
-  brand?: string;
-  size?: string[];
-  status?: string;
-  colors?: string[];
-  images?: string[];
-  categories: any[];
-  reviews?: Review[];
-  published?: boolean;
-}
-
-export interface Category {
-  path: string;
-  name: string;
-  icon?: string;
-  children?: Category[];
-}
-
-export type CategoryItem = {
-  icon: string;
-  title: string;
-  href?: string;
-  child?: { title: string; href: string }[];
-};
-
-export interface CategoryNavList {
-  category: string;
-  categoryItem: CategoryItem[];
-}