@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/components/_components/page-sidenav/side-navbar-2/styles/index.ts

@@ -1,68 +0,0 @@
-import ButtonBase from "@mui/material/ButtonBase";
-import styled from "@mui/material/styles/styled";
-// MUI ICON COMPONENTS
-
-import ChevronRight from "@mui/icons-material/ChevronRight";
-
-// ===============================================================
-type Active = { active: number };
-type Collapse = { collapsed: number };
-// ===============================================================
-
-export const NavExpandRoot = styled("div")(({ theme }) => ({
-  "& .expansion-panel": {
-    overflow: "hidden",
-    position: "relative",
-    paddingLeft: "1.5rem",
-
-    ":before": {
-      left: 8,
-      content: "''",
-      height: "100%",
-      position: "absolute",
-      borderLeft: `1px solid ${theme.palette.grey[400]}`,
-    },
-  },
-}));
-
-export const NavItemButton = styled(ButtonBase, {
-  shouldForwardProp: (prop) => prop !== "active",
-})<Active>(({ theme, active }) => ({
-  height: 44,
-  width: "100%",
-  whiteSpace: "nowrap",
-  justifyContent: "flex-start",
-  transition: "all 0.15s ease",
-  ...(active && {
-    color: theme.palette.primary.dark,
-    "& .MuiSvgIcon-root": { color: theme.palette.primary.dark },
-  }),
-  ":hover": {
-    color: theme.palette.primary.dark,
-    "& .MuiSvgIcon-root": { color: theme.palette.primary.dark },
-  },
-}));
-
-export const ChevronRightIcon = styled(ChevronRight, {
-  shouldForwardProp: (prop) => prop !== "collapsed",
-})<Collapse>(({ collapsed, theme: { direction } }) => ({
-  fontSize: 18,
-  transform: collapsed ? "0deg" : "rotate(90deg)",
-  transition: "transform 0.3s cubic-bezier(0, 0, 0.2, 1) 0ms",
-  ...(collapsed && direction === "rtl" && { transform: "rotate(180deg)" }),
-}));
-
-export const ListIconWrapper = styled("div")(({ theme }) => ({
-  width: 22,
-  height: 22,
-  flexShrink: 0,
-  display: "flex",
-  alignItems: "center",
-  marginRight: "0.8rem",
-  justifyContent: "center",
-  "& svg": {
-    width: "100%",
-    height: "100%",
-    color: theme.palette.grey[500],
-  },
-}));

package/src/components/_components/product-cards/discount-chip.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import Chip, { ChipProps } from "@mui/material/Chip";
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENT
-const StyledChip = styled(Chip, {
-  shouldForwardProp: (prop) => prop !== "shape",
-})<{ shape: "rounded" | "square" }>(({ theme, shape }) => ({
-  zIndex: 1,
-  top: "10px",
-  left: "10px",
-  paddingLeft: 3,
-  paddingRight: 3,
-  fontWeight: 600,
-  fontSize: "10px",
-  position: "absolute",
-  color: theme.palette.common.white,
-  background: theme.palette.primary.main,
-  ...(shape === "square" && { borderRadius: 0 }),
-}));
-
-// ==============================================================
-interface Props extends ChipProps {
-  discount: number;
-  shape?: "rounded" | "square";
-}
-// ==============================================================
-
-export default function DiscountChip({
-  discount = 0,
-  shape = "rounded",
-  ...props
-}: Props) {
-  return discount > 0 ? (
-    <StyledChip
-      size="small"
-      shape={shape}
-      label={`${discount}% off`}
-      {...props}
-    />
-  ) : null;
-}

package/src/components/_components/product-cards/product-card-1/components/hover-actions.tsx

@@ -1,37 +0,0 @@
-import IconButton from "@mui/material/IconButton";
-// MUI ICON COMPONENTS
-import Favorite from "@mui/icons-material/Favorite";
-import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
-import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
-// STYLED COMPONENTS
-import { HoverIconWrapper } from "../styles/index";
-
-// ==============================================================
-interface Props {
-  isFavorite: boolean;
-  toggleView: () => void;
-  toggleFavorite: () => void;
-}
-// ==============================================================
-
-export default function HoverActions({
-  isFavorite,
-  toggleFavorite,
-  toggleView,
-}: Props) {
-  return (
-    <HoverIconWrapper className="hover-box">
-      <IconButton onClick={toggleView}>
-        <RemoveRedEye color="disabled" fontSize="small" />
-      </IconButton>
-
-      <IconButton onClick={toggleFavorite}>
-        {isFavorite ? (
-          <Favorite color="primary" fontSize="small" />
-        ) : (
-          <FavoriteBorder fontSize="small" color="disabled" />
-        )}
-      </IconButton>
-    </HoverIconWrapper>
-  );
-}

package/src/components/_components/product-cards/product-card-1/components/quantity-buttons.tsx

@@ -1,65 +0,0 @@
-import { Fragment } from "react";
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBox } from "@/components/_components/flex-box/index";
-import { Paragraph } from "@/components/_components/Typography";
-import { CircularProgress } from "@mui/material";
-
-// ==============================================================
-interface Props {
-  quantity: number;
-  handleDecrement: () => void;
-  handleIncrement: () => void;
-  isLineUpdating: boolean;
-}
-// ==============================================================
-
-export default function QuantityButtons(props: Props) {
-  const { quantity, handleDecrement, handleIncrement, isLineUpdating } =
-    props || {};
-
-  return (
-    <FlexBox
-      alignItems="center"
-      className="add-cart"
-      flexDirection="row-reverse"
-      justifyContent={quantity ? "space-between" : "flex-start"}
-      gap={1}
-    >
-      <Button
-        color="primary"
-        variant="outlined"
-        onClick={handleIncrement}
-        sx={{ padding: "3px" }}
-        disabled={isLineUpdating}
-      >
-        <Add fontSize="small" />
-      </Button>
-
-      {quantity && (
-        <Fragment>
-          {isLineUpdating ? (
-            <CircularProgress size={"10px"} color={"primary"} />
-          ) : (
-            <Paragraph color="text.primary" fontWeight="600">
-              {quantity}
-            </Paragraph>
-          )}
-
-          <Button
-            color="primary"
-            variant="outlined"
-            onClick={handleDecrement}
-            sx={{ padding: "3px" }}
-            disabled={isLineUpdating}
-          >
-            <Remove fontSize="small" />
-          </Button>
-        </Fragment>
-      )}
-    </FlexBox>
-  );
-}

package/src/components/_components/product-cards/product-card-1/index.ts

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

package/src/components/_components/product-cards/product-card-1/product-card-1-wrapper.tsx

@@ -1,304 +0,0 @@
-"use client";
-
-import { IconButton } from "@mui/material";
-import ProductCard1 from "./product-card";
-import { Delete, ShoppingCart } from "@mui/icons-material";
-import {
-  ExtendedProductListLine,
-  ExtendedWishlist,
-  WishlistLinesInput,
-} from "@/api-manager/schemas/user.schema";
-import { useTranslations } from "next-intl";
-import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
-import HoverActions from "./components/hover-actions";
-import { useState } from "react";
-import useUpdateWishlist from "@/api-manager/services/user/mutations/update-wishlist";
-import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
-import { Cart } from "@/api-manager/schemas/cart.schema";
-import { FlexBox } from "@/_components/flex-box";
-import AddToWishlistDialog from "@/_components/wishlist/add-to-wishlist-dialog";
-import RemoveFromWishlistDialog from "@/_components/wishlist/remove-from-wishlist-dialog";
-import ProductViewDialog from "@/_components/products-view/product-view-dialog";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-
-type Props = {
-  title: string;
-  slug: string;
-  price: number;
-  imgUrl: string;
-  rating?: number;
-  discount?: number;
-  id: string | number;
-  hideRating?: boolean;
-  hoverEffect?: boolean;
-  showProductSize?: boolean;
-  mode: "PLP" | "WishlistDetail";
-  isFavorite?: boolean; //  when called from PLP, whether the product is in a wishlist
-  wishlist?: ExtendedWishlist; // when called from wishlist detail page
-  cart?: Cart; // for adding wishlist item to cart in wishlist detail page
-};
-export default function ProductCard1Wrapper({
-  id,
-  slug,
-  title,
-  price,
-  imgUrl,
-  rating = 5,
-  hideRating,
-  hoverEffect,
-  discount = 5,
-  showProductSize,
-  mode,
-  isFavorite,
-  wishlist,
-  cart,
-}: Props) {
-  const t = useTranslations("Account.Wishlists");
-  const { setNotification } = useNotification();
-  const { mutateAsync: removeFromWishlist } = useRemoveFromWishlist();
-  const { mutateAsync: updateWishlist } = useUpdateWishlist();
-  const [favorite, setFavorite] = useState(isFavorite || false);
-  const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
-  const [openRemoveFromWishlistDialog, setOpenRemoveFromWishlistDialog] =
-    useState(false);
-  const [openProductModal, setOpenProductModal] = useState(false);
-  const [quantity, setQuantity] = useState(
-    wishlist?.ProductListLines?.find(
-      (item: ExtendedProductListLine) => item.ProductId === id,
-    )?.Quantity || 0,
-  );
-  const [isLineUpdating, setIsLineUpdating] = useState(false);
-  const { mutateAsync: addToCart } = useAddToCart();
-
-  const handleRemoveFromWishlist = async (productId: string | number) => {
-    try {
-      const extendedWishlistLine = wishlist?.ProductListLines?.find(
-        (item: ExtendedProductListLine) => item.ProductId === productId,
-      );
-
-      if (extendedWishlistLine && wishlist) {
-        const { ...wishlistLine } = extendedWishlistLine;
-        delete wishlistLine.Product;
-
-        const wishlistLinesInput: WishlistLinesInput = {
-          Id: wishlist.Id,
-          ProductListLines: [wishlistLine],
-        };
-
-        await removeFromWishlist(wishlistLinesInput);
-        setNotification({
-          message: t("wishlistLineRemoveSuccess"),
-          severity: "success",
-        });
-      }
-    } catch (error) {
-      setNotification({
-        message: t("wishlistLineRemoveFailed"),
-        severity: "error",
-      });
-    }
-  };
-
-  const handleToggleFavorite = () => {
-    if (favorite) {
-      setOpenRemoveFromWishlistDialog(true);
-    } else {
-      setOpenAddToWishlistDialog(true);
-    }
-  };
-
-  const handleToggleProductModal = () => {
-    setOpenProductModal(!openProductModal);
-  };
-
-  const handleCloseDialog = () => {
-    setOpenAddToWishlistDialog(false);
-    setOpenRemoveFromWishlistDialog(false);
-  };
-
-  const handleAddRemoveSuccess = () => {
-    setFavorite(!favorite);
-  };
-
-  const handleWishlistIncrementQuantity = async () => {
-    setIsLineUpdating(true);
-    // update wishlist product list lines
-    if (mode === "WishlistDetail" && wishlist && wishlist.ProductListLines) {
-      try {
-        const updatedProductListLines = wishlist.ProductListLines.map(
-          (line) => {
-            const { ...wishlistLine } = line;
-            delete wishlistLine.Product;
-            if (line.ProductId === Number(id)) {
-              return {
-                ...wishlistLine,
-                Quantity: quantity + 1,
-              };
-            }
-            return wishlistLine;
-          },
-        );
-        await updateWishlist({
-          Id: wishlist.Id,
-          ProductListLines: updatedProductListLines,
-        });
-        setQuantity(quantity + 1);
-      } catch (error) {
-        // Do nothing
-      }
-    } else {
-      // PLP mode
-      setQuantity(quantity + 1);
-    }
-    setIsLineUpdating(false);
-  };
-
-  const handleWishlistDecrementQuantity = async () => {
-    setIsLineUpdating(true);
-    // update wishlist product list lines
-    if (
-      mode === "WishlistDetail" &&
-      wishlist &&
-      wishlist.ProductListLines &&
-      quantity > 0
-    ) {
-      try {
-        const updatedProductListLines = wishlist.ProductListLines.map(
-          (line) => {
-            const { ...wishlistLine } = line;
-            delete wishlistLine.Product;
-            if (line.ProductId === Number(id)) {
-              return {
-                ...wishlistLine,
-                Quantity: quantity - 1,
-              };
-            }
-            return wishlistLine;
-          },
-        );
-        await updateWishlist({
-          Id: wishlist.Id,
-          ProductListLines: updatedProductListLines,
-        });
-        setQuantity(quantity - 1);
-      } catch (error) {
-        // Do nothing
-      }
-    } else {
-      // PLP mode
-      setQuantity(quantity - 1);
-    }
-    setIsLineUpdating(false);
-  };
-
-  const handleAddItemToCart = async () => {
-    if (!cart) return;
-    try {
-      await addToCart({
-        cartId: cart.Id,
-        version: cart.Version,
-        cartLine: [
-          {
-            ProductId: Number(id),
-            Quantity: quantity,
-          },
-        ],
-      });
-      setNotification({
-        message: "Successfully added item to cart",
-        severity: "success",
-      });
-    } catch (error) {
-      setNotification({
-        message: "Failed to add item to cart",
-        severity: "error",
-      });
-    }
-  };
-
-  // render wishlist controls depending on mode
-  const wishlistControls =
-    mode === "WishlistDetail" ? (
-      // render delete button
-      <>
-        <FlexBox
-          width="25px"
-          alignItems="center"
-          flexDirection="row-reverse"
-          justifyContent="space-between"
-        >
-          <IconButton
-            sx={{ padding: "3px" }}
-            onClick={() => handleAddItemToCart()}
-          >
-            <ShoppingCart fontSize="small" color="inherit" />
-          </IconButton>
-        </FlexBox>
-        <FlexBox
-          width="25px"
-          alignItems="center"
-          flexDirection="row-reverse"
-          justifyContent="space-between"
-        >
-          <IconButton
-            sx={{ padding: "3px" }}
-            onClick={() => handleRemoveFromWishlist(id)}
-          >
-            <Delete fontSize="small" color="inherit" />
-          </IconButton>
-        </FlexBox>
-      </>
-    ) : (
-      // render hover actions for PLP
-      <HoverActions
-        isFavorite={favorite}
-        toggleView={handleToggleProductModal}
-        toggleFavorite={handleToggleFavorite}
-      />
-    );
-
-  return (
-    <>
-      <ProductCard1
-        id={id}
-        slug={slug}
-        title={title}
-        price={price}
-        imgUrl={imgUrl}
-        rating={rating}
-        hideRating={hideRating}
-        hoverEffect={hoverEffect}
-        discount={discount}
-        showProductSize={showProductSize}
-        wishlistControls={wishlistControls}
-        quantity={quantity}
-        isLineUpdating={isLineUpdating}
-        handleIncrementQuantity={handleWishlistIncrementQuantity}
-        handleDecrementQuantity={handleWishlistDecrementQuantity}
-      />
-      {openAddToWishlistDialog && (
-        <AddToWishlistDialog
-          open={openAddToWishlistDialog}
-          handleClose={handleCloseDialog}
-          productId={Number(id)}
-          onSuccess={handleAddRemoveSuccess}
-        />
-      )}
-      {openRemoveFromWishlistDialog && (
-        <RemoveFromWishlistDialog
-          open={openRemoveFromWishlistDialog}
-          handleClose={handleCloseDialog}
-          productId={Number(id)}
-          onSuccess={handleAddRemoveSuccess}
-        />
-      )}
-      {openProductModal && (
-        <ProductViewDialog
-          openDialog={openProductModal || false}
-          handleCloseDialog={handleToggleProductModal}
-          product={{ title, price, id, slug, imgGroup: [imgUrl, imgUrl] }}
-        />
-      )}
-    </>
-  );
-}

package/src/components/_components/product-cards/product-card-1/product-card.tsx

@@ -1,107 +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 LazyImage from "@/components/_components/LazyImage";
-import { Span } from "@/components/_components/Typography";
-// LOCAL CUSTOM HOOK
-// LOCAL CUSTOM COMPONENTS
-import ProductPrice from "../product-price";
-import ProductTitle from "../product-title";
-import QuantityButtons from "./components/quantity-buttons";
-// STYLED COMPONENTS
-import { ImageWrapper, ContentWrapper, StyledBazaarCard } from "./styles/index";
-import buildDetailUrl from "@/lib/build-detail-url";
-
-// ========================================================
-type Props = {
-  title: string;
-  slug: string;
-  price: number;
-  imgUrl: string;
-  rating?: number;
-  discount?: number;
-  id: string | number;
-  hideRating?: boolean;
-  hoverEffect?: boolean;
-  showProductSize?: boolean;
-  wishlistControls?: React.ReactNode;
-  quantity: number;
-  isLineUpdating: boolean;
-  handleIncrementQuantity: () => void;
-  handleDecrementQuantity: () => void;
-};
-// ========================================================
-
-export default function ProductCard1({
-  id,
-  slug,
-  title,
-  price,
-  imgUrl,
-  rating = 5,
-  hideRating,
-  hoverEffect,
-  discount = 5,
-  showProductSize,
-  wishlistControls,
-  quantity,
-  isLineUpdating,
-  handleIncrementQuantity,
-  handleDecrementQuantity,
-}: Props) {
-  return (
-    <StyledBazaarCard hoverEffect={hoverEffect}>
-      <ImageWrapper>
-        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
-        {/* <DiscountChip discount={discount} /> */}
-
-        {/* PRODUCT IMAGE / THUMBNAIL */}
-        <Link href={buildDetailUrl(title, Number(id))}>
-          <LazyImage
-            priority
-            src={imgUrl}
-            width={500}
-            height={500}
-            alt={title}
-          />
-        </Link>
-      </ImageWrapper>
-
-      <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 */}
-        <QuantityButtons
-          quantity={quantity}
-          handleIncrement={handleIncrementQuantity}
-          handleDecrement={handleDecrementQuantity}
-          isLineUpdating={isLineUpdating}
-        />
-
-        {/* WISHLIST CONTROLS: hover actions, delete button */}
-        {wishlistControls}
-      </ContentWrapper>
-    </StyledBazaarCard>
-  );
-}

package/src/components/_components/product-cards/product-card-1/styles/index.ts

@@ -1,46 +0,0 @@
-import styled from "@mui/material/styles/styled";
-// GLOBAL CUSTOM COMPONENT
-import BazaarCard from "@/components/_components/BazaarCard";
-
-export const StyledBazaarCard = 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 = styled("div")(({ theme }) => ({
-  textAlign: "center",
-  position: "relative",
-  display: "inline-block",
-  [theme.breakpoints.down("sm")]: { display: "block" },
-}));
-
-export const HoverIconWrapper = 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 = styled("div")({
-  gap: 8,
-  display: "flex",
-  padding: "1rem",
-  "& .title, & .categories": {
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-  },
-});

package/src/components/_components/product-cards/product-card-10/index.ts

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