@evenicanpm/storefront-core 1.0.1 → 1.0.3

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

@@ -0,0 +1,110 @@
+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();
+  });
+});

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

@@ -0,0 +1,203 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+// LOCAL CUSTOM COMPONENTS
+import SearchResult from "./components/search-result";
+import CategoryDropdown from "./components/category-dropdown";
+// CUSTOM ICON COMPONENT
+import Search from "@evenicanpm/storefront-core/src/components-v2/icons/search";
+import { useTranslations } from "next-intl";
+import React, { FormEvent, useState } from "react";
+import getCategories from "@/services/categories/queries/get-categories";
+import searchProducts from "@/services/product/queries/search-products";
+import { INPUT_SX } from "./styles/index";
+import _ from "lodash";
+import ProductViewDialog, {
+  ProductInfo,
+} from "../products-view/product-view-dialog";
+import { IconButton } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { PageSlug } from "@/lib/page-slugs";
+import { PageKey } from "@/lib/product-list-types";
+import AddToWishlistDialog from "../wishlist/add-to-wishlist-dialog";
+import RemoveFromWishlistDialog from "../wishlist/remove-from-wishlist-dialog";
+import getCart from "@/api-manager/services/cart/queries/get-cart";
+
+export enum DialogType {
+  AddToWishlist = "addToWishlist",
+  RemoveFromWishlist = "removeFromWishlist",
+  QuickView = "quickView",
+}
+
+type DialogState = {
+  type: DialogType | null;
+  productId: number | null;
+  productInfo?: ProductInfo; // for quick view
+};
+
+export default function SearchInputWithCategory() {
+  console.log("SEARCH INPUT CATEGORY");
+  const t = useTranslations();
+  const { data: cart } = getCart.useData();
+  const [resultsOpen, setResultsOpen] = useState(false);
+  const [searchText, setSearchText] = React.useState<string>("");
+  const [selectedCategory, setSelectedCategory] = React.useState<number>(0);
+  const router = useRouter();
+  const [dialogState, setDialogState] = useState<DialogState>({
+    type: null, // the type of dialog to open (add to/remove from wishlist, quick view)
+    productId: null,
+  });
+
+  const { data: resultList } = searchProducts.useData({
+    searchText,
+    category: selectedCategory,
+  });
+
+  const { data: categories, error: categoriesError } =
+    getCategories.useSuspenseData();
+
+  const handleCategoryChange = (categoryId: number) => {
+    setSelectedCategory(categoryId);
+  };
+
+  const findCategoryNameById = () => {
+    if (selectedCategory === 0) {
+      return t("Navigation.allCategoriesLabel");
+    }
+    return (
+      categories?.find((cat) => cat.RecordId === selectedCategory)?.Name || ""
+    );
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchText(e.target.value || "");
+  };
+
+  const debounceSearch = _.debounce(handleSearchChange, 500);
+
+  const handleNavigate = () => {
+    if (searchText.trim() === "") {
+      return;
+    }
+    const url = new URL(PageSlug.ProductList, window.location.origin);
+    url.searchParams.set(PageKey.SEARCH, searchText);
+
+    router.push(url.toString());
+  };
+  const INPUT_PROPS = {
+    startAdornment: (
+      <Box
+        mr={1}
+        px={1}
+        display="grid"
+        alignItems="center"
+        justifyContent="center"
+        borderRight="1px solid"
+        borderColor="grey.400"
+      >
+        <IconButton onClick={handleNavigate}>
+          <Search sx={{ fontSize: 17, color: "grey.600" }} />
+        </IconButton>
+      </Box>
+    ),
+    endAdornment: (
+      <CategoryDropdown
+        title={findCategoryNameById()}
+        handleChange={handleCategoryChange}
+        categories={categoriesError ? [] : categories}
+      />
+    ),
+  };
+
+  const openDialog = (
+    type: DialogType,
+    productId: number,
+    productInfo?: ProductInfo,
+  ) => {
+    setDialogState({
+      type,
+      productId,
+      productInfo,
+    });
+    setResultsOpen(false);
+  };
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    handleNavigate();
+    setResultsOpen(false);
+    setSearchText("");
+    setSelectedCategory(0);
+  }
+
+  const handleCloseDialog = () => {
+    setDialogState({
+      type: null,
+      productId: null,
+      productInfo: undefined,
+    });
+  };
+
+  const handleAddRemoveSuccess = () => {
+    // Implement
+  };
+
+  return (
+    <>
+      <Box position="relative" flex="1 1 0" maxWidth="670px" mx="auto">
+        <form onSubmit={handleSubmit}>
+          <TextField
+            fullWidth
+            variant="outlined"
+            placeholder={t("Search.searchPlaceholder")}
+            onChange={debounceSearch}
+            InputProps={{ ...INPUT_PROPS, sx: INPUT_SX }}
+            onFocus={() => {
+              setResultsOpen(true);
+            }}
+            onBlur={() => {
+              setTimeout(() => {
+                setResultsOpen(false);
+              }, 500);
+            }}
+          />
+        </form>
+
+        {resultList && resultList?.length > 0 && resultsOpen ? (
+          <SearchResult results={resultList} openDialog={openDialog} />
+        ) : null}
+      </Box>
+      {/* Dialog */}
+      {dialogState.type === DialogType.AddToWishlist &&
+        dialogState.productId && (
+          <AddToWishlistDialog
+            open={dialogState.type === DialogType.AddToWishlist}
+            handleClose={handleCloseDialog}
+            productId={dialogState.productId}
+            onSuccess={handleAddRemoveSuccess}
+          />
+        )}
+      {dialogState.type === DialogType.RemoveFromWishlist &&
+        dialogState.productId && (
+          <RemoveFromWishlistDialog
+            open={dialogState.type === DialogType.RemoveFromWishlist}
+            handleClose={handleCloseDialog}
+            productId={dialogState.productId}
+            onSuccess={handleAddRemoveSuccess}
+          />
+        )}
+
+      {dialogState.type === DialogType.QuickView &&
+        dialogState.productId &&
+        dialogState.productInfo && (
+          <ProductViewDialog
+            openDialog={dialogState.type === DialogType.QuickView}
+            handleCloseDialog={handleCloseDialog}
+            product={dialogState.productInfo}
+            cartId={cart?.Id ?? ""}
+          />
+        )}
+    </>
+  );
+}

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

@@ -0,0 +1,41 @@
+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/search-box/search-input.tsx

@@ -0,0 +1,66 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import { useTranslations } from "next-intl";
+// LOCAL CUSTOM HOOKS
+import useSearch from "./hooks/use-search";
+// LOCAL CUSTOM COMPONENT
+import SearchResult from "./components/search-result";
+// STYLED COMPONENT
+import { SearchOutlinedIcon } from "./styles/index";
+
+interface Props {
+  handleCloseDrawer: () => void;
+}
+export default function SearchInput({ handleCloseDrawer }: Props) {
+  const { handleSearch, resultList } = useSearch();
+  const t = useTranslations("Search");
+  const INPUT_PROPS = {
+    sx: {
+      border: 0,
+      height: 44,
+      paddingRight: 0,
+      overflow: "hidden",
+      backgroundColor: "grey.200",
+      "& .MuiOutlinedInput-notchedOutline": { border: 0 },
+    },
+    endAdornment: (
+      <Button
+        color="primary"
+        disableElevation
+        variant="contained"
+        sx={{ px: "3rem", height: "100%", borderRadius: "0 4px 4px 0" }}
+      >
+        {t("searchBtn")}
+      </Button>
+    ),
+    startAdornment: <SearchOutlinedIcon fontSize="small" />,
+  };
+
+  return (
+    <Box
+      position="relative"
+      flex="1 1 0"
+      maxWidth="670px"
+      mx="auto"
+      // {...{ ref: parentRef }}
+    >
+      <TextField
+        fullWidth
+        variant="outlined"
+        placeholder={t("searchPlaceholder")}
+        onChange={handleSearch}
+        InputProps={INPUT_PROPS}
+      />
+
+      {resultList && resultList?.length > 0 ? (
+        // TODO: needs Dialog implementation like search-input-category
+        // @ts-ignore
+        <SearchResult
+          results={resultList}
+          handleCloseDrawer={handleCloseDrawer}
+        />
+      ) : null}
+    </Box>
+  );
+}

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

@@ -0,0 +1,47 @@
+"use client";
+
+import Card from "@mui/material/Card";
+import Box from "@mui/material/Box";
+import styled from "@mui/material/styles/styled";
+import SearchOutlined from "@mui/icons-material/SearchOutlined";
+
+// TODO: caused from symlinked node_modules in client-packages root
+// Need to install only types for mui/styled-engine
+export const SearchOutlinedIcon = styled(SearchOutlined)(({ theme }) => ({
+  color: theme.palette.grey[600],
+  marginRight: 6,
+}));
+
+export const SearchResultCard = styled(Card)({
+  zIndex: 99,
+  top: "100%",
+  width: "100%",
+  position: "absolute",
+  paddingTop: "0.5rem",
+  paddingBottom: "0.5rem",
+  paddingLeft: "2rem",
+  paddingRight: "2rem",
+});
+
+export const DropDownHandler = styled(Box)(({ theme }) => ({
+  width: 160,
+  minWidth: 160,
+  height: "100%",
+  display: "flex",
+  whiteSpace: "pre",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  justifyContent: "flex-end",
+  color: theme.palette.grey[700],
+  paddingInline: theme.spacing(3),
+  borderLeft: `1px solid ${theme.palette.grey[400]}`,
+  [theme.breakpoints.down("xs")]: { display: "none" },
+}));
+
+export const INPUT_SX = {
+  height: 44,
+  padding: 0,
+  overflow: "hidden",
+  backgroundColor: "grey.200",
+  "& .MuiOutlinedInput-notchedOutline": { border: 0 },
+};

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

@@ -0,0 +1,2 @@
+export { default as SectionCreator } from "./section-creator";
+export { default as SectionHeader } from "./section-header";

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

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+import Container from "@mui/material/Container";
+import Box, { BoxProps } from "@mui/material/Box";
+import SectionHeader from "./section-header";
+
+// ==============================================================
+interface Props extends BoxProps {
+  title?: string;
+  icon?: ReactNode;
+  seeMoreLink?: string;
+  children: ReactNode;
+}
+// ==============================================================
+
+export default function SectionCreator(props: Props) {
+  const { icon, title, children, seeMoreLink, ...others } = props;
+
+  return (
+    <Box mb={7.5} {...others}>
+      <Container className="pb-1">
+        {title ? (
+          <SectionHeader title={title} seeMoreLink={seeMoreLink} icon={icon} />
+        ) : null}
+
+        {children}
+      </Container>
+    </Box>
+  );
+}

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

@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import { ReactNode } from "react";
+// MUI ICON COMPONENTS
+import ArrowLeft from "@mui/icons-material/ArrowLeft";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+// LOCAL CUSTOM COMPONENTS
+import { H2 } from "../Typography";
+import { FlexBetween, FlexBox } from "../flex-box/index";
+import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
+
+// ===================================================
+interface Props {
+  title: string;
+  icon?: ReactNode;
+  seeMoreLink?: string;
+}
+// ===================================================
+
+export default function SectionHeader({ title, seeMoreLink, icon }: Props) {
+  const { settings } = useSettings();
+  return (
+    <FlexBetween mb={3}>
+      <FlexBox alignItems="center" gap={1}>
+        {icon ?? null}
+        <H2 lineHeight={1}>{title}</H2>
+      </FlexBox>
+
+      {seeMoreLink ? (
+        <Link href={seeMoreLink}>
+          <FlexBox alignItems="center" color="grey.600">
+            View all
+            {settings.direction === "ltr" ? (
+              <ArrowRight fontSize="small" color="inherit" />
+            ) : (
+              <ArrowLeft fontSize="small" color="inherit" />
+            )}
+          </FlexBox>
+        </Link>
+      ) : null}
+    </FlexBetween>
+  );
+}

package/src/components-v2/service-cards/icon-component.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { SvgIconProps } from "@mui/material";
+// CUSTOM ICON COMPONENTS
+// import appIcons from "icons";
+import FallbackIcon from "@/cms/blocks/Icons/Components/FallbackIcon";
+
+// ==============================================================
+interface Props extends SvgIconProps {
+  icon: string;
+}
+// ==============================================================
+
+export default function IconComponent({ ...props }: Props) {
+  // const Icon = appIcons[icon] as SvgIconComponent;
+  const Icon = FallbackIcon;
+  return <Icon {...props} />;
+}

package/src/components-v2/service-cards/service-card-1/index.ts

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

package/src/components-v2/service-cards/service-card-1/service-card-1.tsx

@@ -0,0 +1,42 @@
+// GLOBAL CUSTOM COMPONENTS
+import {
+  H6,
+  Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import {
+  FlexBox,
+  FlexRowCenter,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+// LOCAL CUSTOM COMPONENTS
+import IconComponent from "../icon-component";
+
+// ==============================================================
+interface Props {
+  icon: string;
+  title: string;
+  description: string;
+}
+// ==============================================================
+
+export default function ServiceCard1({ icon, title, description }: Props) {
+  return (
+    <FlexBox gap={2}>
+      <FlexRowCenter
+        width={50}
+        height={50}
+        bgcolor="grey.100"
+        borderRadius="50%"
+      >
+        {icon ? <IconComponent icon={icon} fontSize="small" /> : null}
+      </FlexRowCenter>
+
+      <div>
+        <H6 mb={0.5} fontSize={17}>
+          {title}
+        </H6>
+
+        <Paragraph color="grey.600">{description}</Paragraph>
+      </div>
+    </FlexBox>
+  );
+}

package/src/components-v2/service-cards/service-card-2/index.ts

@@ -0,0 +1 @@
+export { default } from "./service-card-2";

package/src/components-v2/service-cards/service-card-2/service-card-2.tsx

@@ -0,0 +1,37 @@
+// GLOBAL CUSTOM COMPONENTS
+import {
+  H3,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+// LOCAL CUSTOM COMPONENTS
+import IconComponent from "../icon-component";
+
+// ==============================================================
+interface Props {
+  icon: string;
+  title: string;
+  description: string;
+}
+// ==============================================================
+
+export default function ServiceCard2({ icon, title, description }: Props) {
+  return (
+    <FlexBox gap={1} p="1rem">
+      <IconComponent
+        icon={icon}
+        color="inherit"
+        fontSize="inherit"
+        sx={{ color: "grey.900", fontSize: "40px" }}
+      />
+
+      <div>
+        <H3 color="grey.900" lineHeight={1.3}>
+          {title}
+        </H3>
+
+        <Span color="grey.600">{description}</Span>
+      </div>
+    </FlexBox>
+  );
+}

package/src/components-v2/service-cards/service-card-3/index.ts

@@ -0,0 +1 @@
+export { default } from "./service-card-3";

package/src/components-v2/service-cards/service-card-3/service-card-3.tsx

@@ -0,0 +1,28 @@
+import IconComponent from "../icon-component";
+import {
+  H4,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// STYLED COMPONENTS
+import { StyledRoot } from "./styles";
+
+// ==============================================================
+interface Props {
+  icon: string;
+  title: string;
+  description: string;
+}
+// ==============================================================
+
+export default function ServiceCard3({ icon, title, description }: Props) {
+  return (
+    <StyledRoot>
+      <IconComponent icon={icon} sx={{ fontSize: 40 }} />
+
+      <div>
+        <H4 lineHeight={1.3}>{title}</H4>
+        <Span color="grey.600">{description}</Span>
+      </div>
+    </StyledRoot>
+  );
+}