@evenicanpm/storefront-core 1.0.6 → 1.2.0

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

@@ -1,61 +0,0 @@
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import styled from "@mui/material/styles/styled";
-
-export const Card = styled("div")({
-  ":hover": {
-    img: { transform: "scale(1.1)" },
-    ".product-actions": { right: 15 },
-    ".product-view-action": { opacity: 1 },
-  },
-});
-
-export const CardMedia = styled("div")(({ theme }) => ({
-  aspectRatio: "1/1",
-  // maxHeight: 300,
-  borderRadius: 4,
-  cursor: "pointer",
-  overflow: "hidden",
-  position: "relative",
-  backgroundColor: theme.palette.grey[300],
-  img: { transition: "0.3s" },
-}));
-
-export const AddToCartButton = styled(IconButton)(({ theme }) => ({
-  top: 15,
-  right: -40,
-  position: "absolute",
-  backgroundColor: "white",
-  transition: "right 0.3s .1s",
-  color: theme.palette.text.primary,
-  ".icon": { fontSize: 16 },
-}));
-
-export const FavoriteButton = styled(IconButton)(({ theme }) => ({
-  top: 55,
-  right: -40,
-  position: "absolute",
-  backgroundColor: "white",
-  transition: "right 0.3s .2s",
-  color: theme.palette.text.primary,
-  ".icon": { fontSize: 16 },
-}));
-
-export const QuickViewButton = styled(Button)({
-  left: 0,
-  bottom: 12,
-  opacity: 0,
-  borderRadius: 4,
-  position: "absolute",
-  transition: "all 0.3s",
-});
-
-export const QuickViewSmallButton = styled(IconButton)(({ theme }) => ({
-  top: 15,
-  right: -40,
-  position: "absolute",
-  backgroundColor: "white",
-  transition: "right 0.3s .1s",
-  color: theme.palette.text.primary,
-  ".icon": { fontSize: 16 },
-}));

package/src/components/_components/product-cards/product-card-9/components/add-to-cart.tsx

@@ -1,60 +0,0 @@
-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 { H5 } from "@/components/_components/Typography";
-import { FlexBetween, FlexBox } from "@/components/_components/flex-box/index";
-
-// ==============================================================
-interface Props {
-  quantity: number;
-  handleDecrement: () => void;
-  handleIncrement: () => void;
-}
-// ==============================================================
-
-export default function AddToCartButton({
-  quantity,
-  handleDecrement,
-  handleIncrement,
-}: Props) {
-  return (
-    <FlexBox mt={1} flexShrink={0}>
-      {quantity ? (
-        <FlexBetween>
-          <Button
-            color="primary"
-            variant="contained"
-            sx={{ padding: 0.5, minHeight: 0 }}
-            onClick={handleIncrement}
-          >
-            <Add fontSize="small" />
-          </Button>
-
-          <H5 fontWeight="600" fontSize="15px" mx={1.5}>
-            {quantity}
-          </H5>
-
-          <Button
-            color="primary"
-            variant="contained"
-            sx={{ padding: 0.5, minHeight: 0 }}
-            onClick={handleDecrement}
-          >
-            <Remove fontSize="small" />
-          </Button>
-        </FlexBetween>
-      ) : (
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={handleIncrement}
-          sx={{ padding: 0.5, minHeight: 0 }}
-        >
-          <Add fontSize="small" />
-        </Button>
-      )}
-    </FlexBox>
-  );
-}

package/src/components/_components/product-cards/product-card-9/components/favorite-button.tsx

@@ -1,27 +0,0 @@
-import IconButton from "@mui/material/IconButton";
-// MUI ICON COMPONENTS
-import Favorite from "@mui/icons-material/Favorite";
-import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
-
-// ==============================================================
-interface Props {
-  isFavorite: boolean;
-  toggleFavorite: () => void;
-}
-// ==============================================================
-
-export default function FavoriteButton({ isFavorite, toggleFavorite }: Props) {
-  return (
-    <IconButton
-      size="small"
-      onClick={toggleFavorite}
-      sx={{ position: "absolute", top: 15, right: 15, zIndex: 1 }}
-    >
-      {isFavorite ? (
-        <Favorite color="primary" fontSize="small" />
-      ) : (
-        <FavoriteBorder fontSize="small" />
-      )}
-    </IconButton>
-  );
-}

package/src/components/_components/product-cards/product-card-9/components/tags.tsx

@@ -1,33 +0,0 @@
-import styled from "@mui/material/styles/styled";
-import Link from "next/link";
-
-// STYLED COMPONENTS
-const StyledRoot = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  gap: theme.spacing(1),
-  "& p": {
-    fontSize: 11,
-    fontWeight: 700,
-    display: "inline-block",
-    textDecoration: "underline",
-  },
-}));
-
-// ==============================================================
-interface Props {
-  tags: string[];
-}
-// ==============================================================
-
-export default function ProductTags({ tags }: Props) {
-  return (
-    <StyledRoot>
-      {tags.map((item) => (
-        <Link href="#" key={item}>
-          <p>{item}</p>
-        </Link>
-      ))}
-    </StyledRoot>
-  );
-}

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

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

package/src/components/_components/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 "@/components/_components/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/_components/product-cards/product-card-wishlist/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";
-
-// ==============================================================
-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-wishlist/index.ts

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

package/src/components/_components/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 "@/_components/products-view/product-view-dialog";
-import { Span } from "@/_components/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 "@/_components/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/_components/product-cards/product-card-wishlist/styles/index.ts

@@ -1,51 +0,0 @@
-import BazaarCard, { Props } from "@/_components/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/_components/product-cards/product-price.tsx

@@ -1,26 +0,0 @@
-import Box from "@mui/material/Box";
-// GLOBAL CUSTOM COMPONENTS
-import FlexBox from "@/components/_components/flex-box/flex-box";
-import { Paragraph } from "@/components/_components/Typography";
-// CUSTOM UTILS LIBRARY FUNCTIONS
-import { calculateDiscount, currency } from "@/lib/lib";
-
-// ==============================================================
-type Props = { price: number; discount: number };
-// ==============================================================
-
-export default function ProductPrice({ discount, price }: Props) {
-  return (
-    <FlexBox alignItems="center" gap={1} mt={0.5}>
-      <Paragraph fontWeight={600} color="primary.main">
-        {calculateDiscount(price, discount)}
-      </Paragraph>
-
-      {discount ? (
-        <Box component="del" fontWeight={600} color="grey.600">
-          {currency(price)}
-        </Box>
-      ) : null}
-    </FlexBox>
-  );
-}

package/src/components/_components/product-cards/product-rating.tsx

@@ -1,28 +0,0 @@
-import Rating from "@mui/material/Rating";
-import { BoxProps } from "@mui/material/Box";
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@/components/_components/Typography";
-import FlexBox from "@/components/_components/flex-box/flex-box";
-
-// ==============================================================
-interface Props extends BoxProps {
-  rating: number;
-  showRating: boolean;
-}
-// ==============================================================
-
-export default function ProductRating({
-  showRating,
-  rating = 0,
-  ...props
-}: Props) {
-  if (showRating) {
-    return (
-      <FlexBox gap={1} alignItems="center" {...props}>
-        <Rating size="small" value={rating} color="warn" readOnly />
-        <Span color="grey.600">({rating})</Span>
-      </FlexBox>
-    );
-  }
-  return null;
-}

package/src/components/_components/product-cards/product-title.tsx

@@ -1,24 +0,0 @@
-import Link from "next/link";
-import { H3 } from "@/components/_components/Typography";
-
-// ==============================================================
-type Props = { title: string; slug: string };
-// ==============================================================
-
-export default function ProductTitle({ title, slug }: Props) {
-  return (
-    <Link href={`/products/${slug}`}>
-      <H3
-        mb={1}
-        ellipsis
-        title={title}
-        fontSize={14}
-        fontWeight={600}
-        className="title"
-        color="text.secondary"
-      >
-        {title}
-      </H3>
-    </Link>
-  );
-}

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

@@ -1,35 +0,0 @@
-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,
-  };
-}