@evenicanpm/storefront-core 1.0.3 → 1.0.5

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

@@ -1,169 +0,0 @@
-import Link from "next/link";
-import Card from "@mui/material/Card";
-import Rating from "@mui/material/Rating";
-import styled from "@mui/material/styles/styled";
-// GLOBAL CUSTOM COMPONENTS
-import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import ImageWithFallback from "../../ImageWithFallback";
-// LOCAL CUSTOM HOOK
-import useProduct from "../use-product";
-// LOCAL CUSTOM COMPONENTS
-import DiscountChip from "../discount-chip";
-import ProductPrice from "../product-price";
-// import ProductTags from "./components/tags";
-import AddToCartButton from "./components/add-to-cart";
-import FavoriteButton from "./components/favorite-button";
-
-import buildDetailUrl from "@/lib/build-detail-url";
-
-// STYLED COMPONENT
-const Wrapper = styled(Card)({
-  width: "100%",
-  overflow: "hidden",
-  position: "relative",
-  marginBottom: "1.25rem",
-});
-
-const ContentWrapper = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  flexDirection: "row",
-
-  "& .img-wrapper": {
-    width: 150,
-    height: 150,
-    flexShrink: 0,
-    position: "relative",
-    backgroundColor: theme.palette.grey[200],
-  },
-
-  "& .content": {
-    flex: 1,
-    padding: "1rem",
-    display: "flex",
-    alignItems: "flex-end",
-    justifyContent: "space-between",
-  },
-
-  [theme.breakpoints.down("sm")]: {
-    flexDirection: "column",
-    alignItems: "flex-start",
-    "& .img-wrapper": { width: "100%" },
-    "& .content": { width: "100%" },
-  },
-}));
-
-// ===========================================================
-type Props = {
-  id: number;
-  off?: number;
-  slug: string;
-  price: number;
-  title: string;
-  imgUrl: string;
-  rating: number;
-  // show or hide
-  showAddToCart?: boolean;
-  showFavorite?: boolean;
-};
-// ===========================================================
-
-export default function ProductCard9(props: Props) {
-  const {
-    imgUrl,
-    title,
-    price,
-    off,
-    rating,
-    id,
-    slug,
-    showAddToCart = true,
-    showFavorite = true,
-  } = props || {};
-
-  const { cartItem, handleCartAmountChange, isFavorite, toggleFavorite } =
-    useProduct(slug);
-
-  const handleIncrementQuantity = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      imgUrl,
-      name: title,
-      qty: (cartItem?.Quantity || 0) + 1,
-    };
-    product;
-    handleCartAmountChange();
-  };
-
-  const handleDecrementQuantity = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      imgUrl,
-      name: title,
-      qty: (cartItem?.Quantity || 0) - 1,
-    };
-    product;
-    handleCartAmountChange("remove");
-  };
-
-  return (
-    <Wrapper>
-      {/* PRODUCT FAVORITE BUTTON */}
-      {showFavorite && (
-        <FavoriteButton
-          isFavorite={isFavorite}
-          toggleFavorite={toggleFavorite}
-        />
-      )}
-
-      <ContentWrapper>
-        <div className="img-wrapper">
-          {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
-          <DiscountChip discount={off ?? 0} />
-
-          {/* PRODUCT IMAGE / THUMBNAIL */}
-          <ImageWithFallback
-            alt={title ?? "Product Image"}
-            src={imgUrl}
-            fill
-            style={{ objectFit: "contain" }}
-            sizes="150px"
-          />
-        </div>
-
-        <div className="content">
-          <div>
-            {/* PRODUCT TAG LIST */}
-            {/* <ProductTags tags={["Bike", "Motor", "Ducati"]} /> */}
-
-            {/* PRODUCT TITLE / NAME */}
-            <Link href={buildDetailUrl(title ?? "", id)}>
-              <H5 fontWeight="700" mt={1} mb={2}>
-                {title}
-              </H5>
-            </Link>
-
-            {/* PRODUCT RATING / REVIEW  */}
-            <Rating size="small" value={rating} color="warn" readOnly />
-
-            {/* PRODUCT PRICE */}
-            <ProductPrice price={price} discount={off ?? 0} />
-          </div>
-
-          {/* PRODUCT ADD TO CART BUTTON */}
-          {showAddToCart && (
-            <AddToCartButton
-              quantity={cartItem?.Quantity ?? 0}
-              handleDecrement={handleDecrementQuantity}
-              handleIncrement={handleIncrementQuantity}
-            />
-          )}
-        </div>
-      </ContentWrapper>
-    </Wrapper>
-  );
-}

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

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

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>
-  );
-}