@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/_components/product-cards/use-product.ts

@@ -0,0 +1,35 @@
+import getCart from "@/services/cart/queries/get-cart";
+import { useCallback, useState } from "react";
+import { useSnackbar } from "notistack";
+
+export default function useProduct(slug: string) {
+  const { data: cart } = getCart.useData();
+  const { enqueueSnackbar } = useSnackbar();
+  const [openModal, setOpenModal] = useState(false);
+  const [isFavorite, setIsFavorite] = useState(false);
+
+  const cartItem = cart?.CartLines?.find(
+    (cartLine) => String(cartLine.Product?.RecordId) === slug,
+  );
+
+  const toggleFavorite = useCallback(() => setIsFavorite((fav) => !fav), []);
+  const toggleDialog = useCallback(() => setOpenModal((open) => !open), []);
+
+  const handleCartAmountChange = (type?: "remove") => {
+    // TODO Febraury 25, 2025: Implement this function
+    //dispatch({ type: "CHANGE_CART_AMOUNT", payload: product });
+    // SHOW ALERT PRODUCT ADDED OR REMOVE
+    if (type === "remove")
+      enqueueSnackbar("Remove from Cart", { variant: "error" });
+    else enqueueSnackbar("Added to Cart", { variant: "success" });
+  };
+
+  return {
+    cartItem,
+    openModal,
+    isFavorite,
+    toggleDialog,
+    toggleFavorite,
+    handleCartAmountChange,
+  };
+}

package/src/components/_components/products-view/product-view-dialog.tsx

@@ -0,0 +1,180 @@
+import Grid from "@mui/material/Grid2";
+import Rating from "@mui/material/Rating";
+import Dialog from "@mui/material/Dialog";
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import DialogContent from "@mui/material/DialogContent";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Close from "@mui/icons-material/Close";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENTS
+import { Carousel } from "@/components/_components/carousel/index";
+import BazaarImage from "@/components/_components/BazaarImage";
+import FlexBox from "@/components/_components/flex-box/flex-box";
+import { H1, H2, H3, H6, Paragraph } from "@/components/_components/Typography";
+// LOCAL CUSTOM HOOKS
+//import useCart from "hooks/useCart";
+// CUSTOM UTILS LIBRARY FUNCTION
+import { currency } from "@/lib/lib";
+
+// =====================================================
+interface Props {
+  product: ProductInfo;
+  openDialog: boolean;
+  handleCloseDialog: () => void;
+}
+// =====================================================
+type CartItem = {
+  id: string | number;
+  qty: number;
+};
+// =====================================================
+type ProductInfo = {
+  id: string | number;
+  title: string;
+  imgGroup: string[];
+  price: number;
+  slug: string;
+};
+// =====================================================
+type CartDispatch = {
+  type: "CHANGE_CART_AMOUNT";
+  payload: ProductInfo & {
+    qty: number;
+    name: string;
+    imgUrl: string;
+  };
+};
+// =====================================================
+
+export default function ProductViewDialog(props: Props) {
+  const { product, openDialog, handleCloseDialog } = props;
+
+  //const { state, dispatch } = useCart();
+  const state: { cart: CartItem[] } = {
+    cart: [],
+  };
+  const dispatch = (input: CartDispatch) => {
+    input;
+  };
+  const cartItem = state.cart.find((item) => item?.id === product.id);
+
+  const handleCartAmountChange = (amount: number) => () => {
+    dispatch({
+      type: "CHANGE_CART_AMOUNT",
+      payload: {
+        ...product,
+        qty: amount,
+        name: product.title,
+        imgUrl: product.imgGroup[0],
+      },
+    });
+  };
+
+  return (
+    <Dialog
+      open={openDialog}
+      maxWidth={false}
+      onClose={handleCloseDialog}
+      sx={{ zIndex: 1501 }}
+    >
+      <DialogContent sx={{ maxWidth: 900, width: "100%" }}>
+        <div>
+          <Grid container spacing={3}>
+            <Grid size={{ md: 6, xs: 12 }}>
+              <Carousel
+                slidesToShow={1}
+                arrowStyles={{
+                  boxShadow: 0,
+                  color: "primary.main",
+                  backgroundColor: "transparent",
+                }}
+              >
+                {product.imgGroup.map((item: string, index: number) => (
+                  <BazaarImage
+                    key={index}
+                    src={item}
+                    alt="product"
+                    sx={{
+                      mx: "auto",
+                      width: "100%",
+                      objectFit: "contain",
+                      height: { sm: 400, xs: 250 },
+                    }}
+                  />
+                ))}
+              </Carousel>
+            </Grid>
+
+            <Grid size={{ md: 6, xs: 12 }} alignSelf="center">
+              <H2>{product.title}</H2>
+
+              <Paragraph py={1} color="grey.500" fontWeight={600} fontSize={13}>
+                CATEGORY: Cosmetic
+              </Paragraph>
+
+              <H1 color="primary.main">{currency(product.price)}</H1>
+
+              <FlexBox alignItems="center" gap={1} mt={1}>
+                <Rating color="warn" value={4} readOnly />
+                <H6 lineHeight="1">(50)</H6>
+              </FlexBox>
+
+              <Paragraph my={2}>
+                Sed egestas, ante et vulputate volutpat, eros pede semper est,
+                vitae luctus metus libero eu augue. Morbi purus liberpuro ate
+                vol faucibus adipiscing.
+              </Paragraph>
+
+              <Divider sx={{ mb: 2 }} />
+
+              {!cartItem?.qty ? (
+                <Button
+                  size="large"
+                  variant="contained"
+                  onClick={handleCartAmountChange(1)}
+                  sx={{ height: 45, borderRadius: 2 }}
+                >
+                  Add to Cart
+                </Button>
+              ) : (
+                <FlexBox alignItems="center">
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    sx={{ p: ".6rem", height: 45 }}
+                    onClick={handleCartAmountChange(cartItem?.qty - 1)}
+                  >
+                    <Remove fontSize="small" />
+                  </Button>
+
+                  <H3 fontWeight="600" mx={2.5}>
+                    {cartItem?.qty.toString().padStart(2, "0")}
+                  </H3>
+
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    sx={{ p: ".6rem", height: 45 }}
+                    onClick={handleCartAmountChange(cartItem?.qty + 1)}
+                  >
+                    <Add fontSize="small" />
+                  </Button>
+                </FlexBox>
+              )}
+            </Grid>
+          </Grid>
+        </div>
+
+        <IconButton
+          sx={{ position: "absolute", top: 3, right: 3 }}
+          onClick={handleCloseDialog}
+        >
+          <Close fontSize="small" color="secondary" />
+        </IconButton>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { Fragment, ReactNode } from "react";
+import Grid from "@mui/material/Grid2";
+// GLOBAL CUSTOM COMPONENTS
+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";
+
+// ========================================================
+type Props = { products: Product[]; pagination?: ReactNode };
+// ========================================================
+
+export default function ProductsGridView({ products, pagination }: 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>
+        ))}
+      </Grid>
+
+      <FlexBetween flexWrap="wrap" mt={6}>
+        {pagination}
+      </FlexBetween>
+    </Fragment>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+// GLOBAL CUSTOM COMPONENTS
+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";
+
+// ==========================================================
+type Props = { products: Product[]; pagination?: ReactNode };
+// ==========================================================
+
+export default function ProductsListView({ products, pagination }: 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}
+        />
+      ))}
+
+      <FlexBetween flexWrap="wrap" mt={4}>
+        {pagination}
+      </FlexBetween>
+    </div>
+  );
+}

package/src/components/_components/progress/index.ts

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

package/src/components/_components/progress/progress.tsx

@@ -0,0 +1,77 @@
+// https://github.com/apal21/nextjs-progressbar/issues/86
+
+"use client";
+import { useEffect } from "react";
+import NProgress from "nprogress";
+import useTheme from "@mui/material/styles/useTheme";
+import GlobalStyles from "@mui/material/GlobalStyles";
+
+import "nprogress/nprogress.css";
+
+type PushStateInput = [
+  data: string,
+  unused: string,
+  url?: string | URL | null | undefined,
+];
+
+export default function ProgressBar() {
+  const theme = useTheme();
+
+  useEffect(() => {
+    NProgress.configure({ showSpinner: false });
+
+    const handleAnchorClick = (event: Event) => {
+      const targetUrl = (event.currentTarget as HTMLAnchorElement).href;
+      const currentUrl = location.href;
+      if (targetUrl !== currentUrl) {
+        NProgress.start();
+      }
+    };
+
+    const handleMutation: MutationCallback = () => {
+      const anchorElements = document.querySelectorAll("a[href]");
+      anchorElements.forEach((anchor) =>
+        anchor.addEventListener("click", handleAnchorClick),
+      );
+    };
+
+    const mutationObserver = new MutationObserver(handleMutation);
+    mutationObserver.observe(document, { childList: true, subtree: true });
+
+    window.history.pushState = new Proxy(window.history.pushState, {
+      apply: (target, thisArg, argArray: PushStateInput) => {
+        NProgress.done();
+        return target.apply(thisArg, argArray);
+      },
+    });
+  });
+
+  return (
+    <GlobalStyles
+      styles={{
+        "#nprogress": {
+          pointerEvents: "none",
+          ".bar": {
+            top: 0,
+            left: 0,
+            height: 2,
+            width: "100%",
+            position: "fixed",
+            zIndex: 9999999999,
+            background: theme.palette.primary.main,
+          },
+          ".peg": {
+            right: 0,
+            opacity: 1,
+            width: 100,
+            height: "100%",
+            display: "block",
+            boxShadow: "none",
+            position: "absolute",
+            transform: "rotate(3deg) translate(0px, -4px)",
+          },
+        },
+      }}
+    />
+  );
+}

package/src/components/_components/scrollbar/index.ts

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

package/src/components/_components/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/_components/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/_components/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 "@/components/_components/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/_components/search-box/components/search-result.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import NavLink from "@/components/_components/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";
+
+interface Props {
+  results: ProductSearchResult[];
+  handleCloseDrawer?: () => void; // Close search drawer in mobile screen
+}
+
+export default function SearchResult({ results, handleCloseDrawer }: Props) {
+  return (
+    <SearchResultCard>
+      {results.map((item, i) => (
+        <MenuItem key={item?.Name || "" + i}>
+          <NavLink
+            href={getProductDetailUrl(item)}
+            key={item.RecordId}
+            onClick={handleCloseDrawer}
+          >
+            {item.Name}
+          </NavLink>
+        </MenuItem>
+      ))}
+    </SearchResultCard>
+  );
+}

package/src/components/_components/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/_components/search-box/index.ts

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

package/src/components/_components/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 "@/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();
+  });
+});