@evenicanpm/storefront-core 1.0.3 → 1.0.4

package/src/components-v2/product-cards/product-card-wishlist/product-card.tsx

@@ -1,118 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Rating from "@mui/material/Rating";
-// GLOBAL CUSTOM COMPONENTS
-import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/products-view/product-view-dialog";
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// LOCAL CUSTOM HOOK
-import useProduct from "../use-product";
-// LOCAL CUSTOM COMPONENTS
-import HoverActions from "./components/hover-actions";
-import ProductPrice from "../product-price";
-import ProductTitle from "../product-title";
-import DiscountChip from "../discount-chip";
-// STYLED COMPONENTS
-import { ImageWrapper, ContentWrapper, StyledBazaarCard } from "./styles";
-import { IconButton } from "@mui/material";
-import { Delete } from "@mui/icons-material";
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-
-// ========================================================
-type Props = {
-  title: string;
-  slug: string;
-  price: number;
-  imgUrl: string;
-  rating?: number;
-  discount?: number;
-  id: string | number;
-  hideRating?: boolean;
-  hoverEffect?: boolean;
-  showProductSize?: boolean;
-  lineId: string | undefined;
-  handleRemoveProductFromWishlist: (linedId: string | undefined) => void;
-};
-// ========================================================
-
-export default function ProductCardWishlist({
-  id,
-  slug,
-  title,
-  price,
-  imgUrl,
-  rating = 5,
-  hideRating,
-  hoverEffect,
-  discount = 5,
-  showProductSize,
-  lineId,
-  handleRemoveProductFromWishlist,
-}: Props) {
-  const { isFavorite, openModal, toggleDialog, toggleFavorite } =
-    useProduct(slug);
-
-  return (
-    <StyledBazaarCard hoverEffect={hoverEffect}>
-      <ImageWrapper>
-        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
-        <DiscountChip discount={discount} />
-
-        {/* HOVER ACTION ICONS */}
-        <HoverActions
-          isFavorite={isFavorite}
-          toggleView={toggleDialog}
-          toggleFavorite={toggleFavorite}
-        />
-
-        {/* PRODUCT IMAGE / THUMBNAIL */}
-        <Link href={`/products/${slug}`}>
-          <LazyImage
-            priority
-            src={imgUrl}
-            width={500}
-            height={500}
-            alt={title}
-          />
-        </Link>
-      </ImageWrapper>
-
-      {/* PRODUCT VIEW DIALOG BOX */}
-      <ProductViewDialog
-        openDialog={openModal}
-        handleCloseDialog={toggleDialog}
-        product={{ title, price, id, slug, imgGroup: [imgUrl, imgUrl] }}
-      />
-
-      <ContentWrapper>
-        <Box flex="1 1 0" minWidth="0px" mr={1}>
-          {/* PRODUCT NAME / TITLE */}
-          <ProductTitle title={title} slug={slug} />
-
-          {/* PRODUCT RATINGS IF AVAILABLE */}
-          {!hideRating ? (
-            <Rating size="small" value={rating} color="warn" readOnly />
-          ) : null}
-
-          {/* PRODUCT SIZE IF AVAILABLE */}
-          {showProductSize ? (
-            <Span color="grey.600" mb={1} display="block">
-              Liter
-            </Span>
-          ) : null}
-
-          {/* PRODUCT PRICE WITH DISCOUNT */}
-          <ProductPrice discount={discount} price={price} />
-        </Box>
-
-        {/* PRODUCT QUANTITY HANDLER BUTTONS */}
-        <Box display="flex" alignItems="center" gap={1} justifySelf="end">
-          <IconButton onClick={() => handleRemoveProductFromWishlist(lineId)}>
-            <Delete fontSize="small" color="inherit" />
-          </IconButton>
-        </Box>
-      </ContentWrapper>
-    </StyledBazaarCard>
-  );
-}

package/src/components-v2/product-cards/product-card-wishlist/styles/index.ts

@@ -1,53 +0,0 @@
-import BazaarCard, {
-  Props,
-} from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
-import styled from "@mui/material/styles/styled";
-// GLOBAL CUSTOM COMPONENT
-import React, { ComponentType } from "react";
-
-export const StyledBazaarCard: ComponentType<Props> = styled(BazaarCard)({
-  height: "100%",
-  margin: "auto",
-  display: "flex",
-  overflow: "hidden",
-  borderRadius: "8px",
-  position: "relative",
-  flexDirection: "column",
-  justifyContent: "space-between",
-  transition: "all 250ms ease-in-out",
-  ":hover": { "& .hover-box": { opacity: 1 } },
-});
-
-export const ImageWrapper: ComponentType<React.ComponentProps<"div">> = styled(
-  "div",
-)(({ theme }) => ({
-  textAlign: "center",
-  position: "relative",
-  display: "inline-block",
-  [theme.breakpoints.down("sm")]: { display: "block" },
-}));
-
-export const HoverIconWrapper: ComponentType<React.ComponentProps<"div">> =
-  styled("div")({
-    zIndex: 2,
-    top: "7px",
-    opacity: 0,
-    right: "15px",
-    display: "flex",
-    cursor: "pointer",
-    position: "absolute",
-    flexDirection: "column",
-    transition: "all 0.3s ease-in-out",
-  });
-
-export const ContentWrapper: ComponentType<React.ComponentProps<"div">> =
-  styled("div")({
-    gap: 8,
-    display: "flex",
-    padding: "1rem",
-    "& .title, & .categories": {
-      overflow: "hidden",
-      whiteSpace: "nowrap",
-      textOverflow: "ellipsis",
-    },
-  });

package/src/components-v2/product-quantity-buttons/product-quantity-buttons.tsx

@@ -1,88 +0,0 @@
-import React from "react";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import Button from "@mui/material/Button";
-import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { MdAdd as Add } from "react-icons/md";
-import { MdRemove as Remove } from "react-icons/md";
-import CircularProgress from "@mui/material/CircularProgress";
-import { CartLine } from "@msdyn365-commerce/retail-proxy";
-import { useTranslations } from "next-intl";
-
-interface Props {
-  loading: boolean;
-  productCartLine: CartLine | undefined;
-  handleCartAmountChange: (amount: number, currentCartLine: CartLine) => void;
-  handleAddToCart: () => void;
-  isOOS: boolean;
-}
-
-export default function QuantityButtons({
-  loading,
-  handleAddToCart,
-  handleCartAmountChange,
-  productCartLine,
-  isOOS,
-}: Props) {
-  const t = useTranslations("productDetail");
-
-  if (!productCartLine?.Quantity || productCartLine.Quantity === 0) {
-    return (
-      <Button
-        color="primary"
-        variant="contained"
-        onClick={handleAddToCart}
-        disabled={isOOS}
-      >
-        {t("btnAddToCart")}
-      </Button>
-    );
-  }
-
-  return (
-    <FlexBox alignItems="center">
-      <Button
-        size="small"
-        sx={{ p: 1 }}
-        color="primary"
-        variant="outlined"
-        disabled={loading}
-        onClick={() =>
-          handleCartAmountChange(
-            (productCartLine?.Quantity || 0) - 1,
-            productCartLine,
-          )
-        }
-      >
-        <Remove fontSize="small" />
-      </Button>
-
-      <H3
-        fontWeight="600"
-        mx={2.5}
-        sx={{ width: "20px", display: "flex", justifyContent: "center" }}
-      >
-        {loading ? (
-          <CircularProgress size={"10px"} />
-        ) : (
-          productCartLine.Quantity.toString().padStart(2, "0")
-        )}
-      </H3>
-
-      <Button
-        size="small"
-        sx={{ p: 1 }}
-        color="primary"
-        variant="outlined"
-        disabled={loading}
-        onClick={() =>
-          handleCartAmountChange(
-            (productCartLine?.Quantity || 0) + 1,
-            productCartLine,
-          )
-        }
-      >
-        <Add fontSize="small" />
-      </Button>
-    </FlexBox>
-  );
-}

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

@@ -1,218 +0,0 @@
-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 COMPONENT
-// LOCAL CUSTOM HOOKS
-import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
-import { useTranslations } from "next-intl";
-import getCart from "@/api-manager/services/cart/queries/get-cart";
-// CUSTOM UTILS LIBRARY FUNCTION
-import { Carousel } from "../carousel";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-import BazaarImage from "../BazaarImage";
-import { FlexBox } from "../flex-box";
-import { H2, Paragraph, H1, H6, H3 } from "../Typography";
-import { currency } from "@/lib/lib";
-
-// =====================================================
-interface Props {
-  product: ProductInfo;
-  openDialog: boolean;
-  cartId?: string;
-  handleCloseDialog: () => void;
-}
-// =====================================================
-type CartItem = {
-  id: string | number;
-  qty: number;
-};
-// =====================================================
-export 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, cartId, handleCloseDialog } = props;
-  const { mutateAsync: addToCart } = useAddToCart();
-  const { data: cart } = getCart.useData();
-
-  const t = useTranslations("ProductViewDialog");
-  const { setNotification } = useNotification();
-
-  //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],
-      },
-    });
-  };
-
-  const handleAddToCart = async () => {
-    if (!cart) return;
-    try {
-      await addToCart({
-        cartId: cartId,
-        version: cart.Version,
-        cartLine: [
-          {
-            ProductId: Number(product.id),
-            Quantity: 1,
-          },
-        ],
-      });
-      setNotification({
-        message: t("addToCartSuccess"),
-        severity: "success",
-      });
-    } catch (error) {
-      setNotification({
-        message: t("addToCartError"),
-        severity: "error",
-      });
-    }
-  };
-
-  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"
-                  color={"primary"}
-                  variant="contained"
-                  // onClick={handleCartAmountChange(1)}
-                  onClick={handleAddToCart}
-                  sx={{ height: 45, borderRadius: 2 }}
-                >
-                  {t("addToCartBtn")}
-                </Button>
-              ) : (
-                <FlexBox alignItems="center">
-                  <Button
-                    size="small"
-                    color={"primary"}
-                    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"
-                    color={"primary"}
-                    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-v2/search-box/__test__/search-input-category.test.tsx

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