@evenicanpm/storefront-core 1.0.3 → 1.0.4

package/src/pages-v2/product-list/quick-view-dialog-content.tsx

@@ -21,7 +21,7 @@ import useCart, {
 } from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import useCurrencyFormatter from "@/lib/currency-formatter";
 import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
-import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/product-quantity-buttons";
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons";
 import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
 import {
   InventorySearchCriteriaInput,
@@ -49,11 +49,11 @@ export default function QuickViewContent({
 }: Props) {
   const [showDimensionError, setShowDimensionError] = useState(false);
   const {
-    selectVariantId,
+    selectedVariant,
     selectDimensions,
     handleChangeVariant,
     allDimensionsSelected,
-  } = useVariants({ product: productDetails });
+  } = useVariants(productDetails);
   const t = useTranslations("ProductList.QuickView");
   const { formatCurrency } = useCurrencyFormatter();
   const { handleCartAmountChange, handleAddToCart, loading } = useCart(
@@ -61,35 +61,42 @@ export default function QuickViewContent({
       ? {
           cart,
           recordId: product.RecordId,
-          selectVariantId: selectVariantId,
+          selectVariantId: selectedVariant?.RecordId,
         }
       : {
           cart: { Id: "", CartLines: [] },
           recordId: product.RecordId,
-          selectVariantId: selectVariantId,
+          selectVariantId: selectedVariant?.RecordId,
         },
   );
 
   const searchCriteria = useMemo<InventorySearchCriteriaInput>(
     () => ({
-      allDimensionsSelected: allDimensionsSelected(selectDimensions),
       searchCriteria: {
         defaultWarehouseOnly: true,
-        productIds: [selectVariantId || product.RecordId],
+        productIds: [selectedVariant?.RecordId || product.RecordId],
       },
     }),
-    [allDimensionsSelected, selectDimensions, product, selectVariantId],
+    [
+      allDimensionsSelected,
+      selectDimensions,
+      product,
+      selectedVariant?.RecordId,
+    ],
   );
 
   const { data: shippingInventoryData, isLoading: inventoryLoading } =
     getProductAvailability.useData(searchCriteria);
 
   const currentCartLine = cart?.CartLines?.find((item) => {
-    return item?.ProductId === (Number(selectVariantId) || product.RecordId);
+    return (
+      item?.ProductId ===
+      (Number(selectedVariant?.RecordId) || product.RecordId)
+    );
   });
 
   const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
-    if (!allDimensionsSelected(selectDimensions)) {
+    if (!allDimensionsSelected) {
       setShowDimensionError(true);
       return;
     }

package/typedoc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  entryPoints: ["./src/components/product-dimensions/components/*.tsx"],
+  entryPoints: ["./src/components-v2/**/compound/*.tsx"],
   out: "docs",
   theme: "default",
   name: "e4 ui",
@@ -7,4 +7,6 @@ module.exports = {
   mergeModulesRenameDefaults: true, // NEW option of TypeDoc added by this plugin
   mergeModulesMergeMode: "module", // NEW option of TypeDoc added by this plugin
   excludeInternal: true,
+  skipErrorChecking: true,
+  tsconfig: "docs.tsconfig.json",
 };

package/src/components-v2/MiniCartClient.tsx

@@ -1,65 +0,0 @@
-"use client";
-// DUPLICATE - Remove storefront/app version
-import React, { useState } from "react";
-import { MdOutlineShoppingBag as ShoppingBagOutlined } from "react-icons/md";
-import MobileCartBag from "@evenicanpm/storefront-core/src/components-v2/icons/cart-bag";
-import { Badge, Drawer, IconButton } from "@mui/material";
-import { Cart } from "@/schemas/cart.schema";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-import { MiniCart } from "@evenicanpm/storefront-core/src/components-v2/mini-cart/index";
-
-const BADGE_STYLES = {
-  "& .MuiBadge-badge": {
-    fontSize: { xs: "0.625rem", md: "0.75rem" }, // ~10px, 12px
-    minWidth: { xs: "1rem", md: "1.25rem" }, // ~16px, 20px
-    height: { xs: "1rem", md: "1.25rem" }, // ~16px, 20px
-  },
-};
-
-const ICON_BUTTON_STYLES = {
-  minWidth: { xs: "2.25rem", md: "2.5rem" }, // 36px, 40px
-  minHeight: { xs: "2.25rem", md: "2.5rem" },
-};
-
-interface MiniCartClientProps {
-  cart: Cart;
-  mobile?: boolean;
-}
-
-const MiniCartClient: React.FC<MiniCartClientProps> = ({
-  cart,
-  mobile = false,
-}) => {
-  const SHOULD_OPEN_MINICART_ON_ADD = true; // Move to config
-  const [open, setOpen] = useState(false); // Client state for toggling the drawer
-  const { alert } = useNotification();
-  React.useEffect(() => {
-    if (alert?.type === "cart" && SHOULD_OPEN_MINICART_ON_ADD) {
-      setOpen(true);
-    }
-  }, [alert, SHOULD_OPEN_MINICART_ON_ADD]);
-  const handleCloseDrawer = () => setOpen(false);
-  return (
-    <Badge
-      badgeContent={cart?.TotalItems || 0}
-      color="primary"
-      sx={BADGE_STYLES}
-    >
-      {/* Drawer Toggle Button */}
-      <IconButton sx={ICON_BUTTON_STYLES} onClick={() => setOpen(true)}>
-        {mobile ? (
-          <MobileCartBag style={{ fontSize: "1.25rem" }} />
-        ) : (
-          <ShoppingBagOutlined />
-        )}
-      </IconButton>
-
-      {/* Drawer */}
-      <Drawer anchor="right" open={open} onClose={() => setOpen(false)}>
-        <MiniCart cart={cart} closeDrawer={handleCloseDrawer} />
-      </Drawer>
-    </Badge>
-  );
-};
-
-export default MiniCartClient;

package/src/components-v2/carousel-cards/carousel-card-2/carousel-card-2.tsx

@@ -1,78 +0,0 @@
-import Grid from "@mui/material/Grid2";
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENT
-import Favorite from "@mui/icons-material/Favorite";
-// GLOBAL CUSTOM COMPONENTS
-import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
-import { Countdown } from "@evenicanpm/storefront-core/src/components-v2/countdown/index";
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-import {
-  H2,
-  H3,
-  H4,
-  Paragraph,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// STYLED COMPONENT
-import { ContentWrapper, FavoriteButton } from "./styles";
-
-// ================================================================
-interface Props {
-  imgUrl: string;
-  expireDate: number;
-  productName: string;
-}
-// ================================================================
-
-export default function CarouselCard2({
-  imgUrl,
-  productName,
-  expireDate,
-}: Props) {
-  return (
-    <Grid container alignItems="center">
-      <Grid size={{ lg: 6, md: 5, sm: 12, xs: 12 }}>
-        <BazaarImage
-          src={imgUrl}
-          alt="xiaomi-watch-1"
-          sx={{ display: "block", mx: "auto", maxWidth: "100%", p: 5 }}
-        />
-      </Grid>
-
-      <Grid size={{ lg: 4, md: 5, sm: 12, xs: 12 }}>
-        <ContentWrapper>
-          <H3 color="primary.500" mb="0.2rem">
-            Deal Of The Day
-          </H3>
-          <H2>{productName}</H2>
-
-          <Paragraph mt="0.3rem">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis
-            lobortis consequat eu, quam etiam at quis ut convallis.
-          </Paragraph>
-
-          <H4 mt="1.5rem" mb="0.3rem">
-            Fresh Deal Everyday, Get It Now!
-          </H4>
-
-          {/* countdown time */}
-          <Countdown expireDate={expireDate} />
-
-          <FlexBox gap={2} mt={3}>
-            <Button
-              color="primary"
-              disableElevation
-              variant="contained"
-              sx={{ px: 4, borderRadius: 2 }}
-            >
-              BUY NOW
-            </Button>
-
-            <FavoriteButton>
-              <Favorite />
-            </FavoriteButton>
-          </FlexBox>
-        </ContentWrapper>
-      </Grid>
-    </Grid>
-  );
-}

package/src/components-v2/carousel-cards/carousel-card-2/index.ts

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

package/src/components-v2/carousel-cards/carousel-card-2/styles.ts

@@ -1,26 +0,0 @@
-"use client";
-
-import Button from "@mui/material/Button";
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENT
-export const ContentWrapper = styled("div")(({ theme }) => ({
-  [theme.breakpoints.down("sm")]: {
-    padding: "2rem",
-    width: "100%",
-  },
-  [theme.breakpoints.between("sm", "md")]: {
-    padding: "0 3rem",
-    paddingBottom: "2rem",
-    width: "80%",
-  },
-}));
-
-export const FavoriteButton = styled(Button)(({ theme }) => ({
-  color: "white",
-  height: "44px",
-  borderRadius: "8px",
-  paddingInline: "1rem",
-  backgroundColor: theme.palette.grey[500],
-  ":hover": { backgroundColor: theme.palette.grey[500] },
-}));

package/src/components-v2/carousel-cards/carousel-card-3/carousel-card-3.tsx

@@ -1,37 +0,0 @@
-import Link from "next/link";
-// GLOBAL CUSTOM COMPONENTS
-import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
-import {
-  H2,
-  Paragraph,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// STYLED COMPONENTS
-import { ContentWrapper, LinkText, RootStyled } from "./styles";
-// CUSTOM DATA MODEL
-import { Product } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
-
-// ==========================================================
-type Props = { product: Product };
-// ==========================================================
-
-export default function CarouselCard3({ product }: Props) {
-  return (
-    <RootStyled>
-      <ContentWrapper>
-        <H2 mb="0.5rem" textAlign="center" lineHeight={1.2}>
-          {product.title}
-        </H2>
-
-        <Paragraph color="grey.600" textAlign="center" mb="1.5rem">
-          Starting at ${product.price} & save upto {product.discount}%
-        </Paragraph>
-
-        <Link href={`/products/${product.slug}`}>
-          <LinkText>SHOP NOW</LinkText>
-        </Link>
-      </ContentWrapper>
-
-      <BazaarImage width="100%" src={product.thumbnail} alt="shoes" />
-    </RootStyled>
-  );
-}

package/src/components-v2/carousel-cards/carousel-card-3/index.ts

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

package/src/components-v2/carousel-cards/carousel-card-3/styles.ts

@@ -1,28 +0,0 @@
-"use client";
-
-import Card from "@mui/material/Card";
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENTS
-export const RootStyled = styled(Card)(({ theme }) => ({
-  height: "100%",
-  overflow: "unset",
-  borderRadius: "2px",
-  boxShadow: theme.shadows[4],
-  transition: "all 250ms ease-in-out",
-}));
-
-export const ContentWrapper = styled("div")({
-  display: "flex",
-  padding: "1rem",
-  paddingTop: "3rem",
-  alignItems: "center",
-  flexDirection: "column",
-});
-
-export const LinkText = styled("small")(({ theme }) => ({
-  fontSize: 12,
-  fontWeight: 900,
-  lineHeight: 1.6,
-  borderBottom: `2px solid ${theme.palette.primary.main}`,
-}));

package/src/components-v2/carousel-cards/carousel-card-4/carousel-card-4.tsx

@@ -1,81 +0,0 @@
-import Link from "next/link";
-import Button from "@mui/material/Button";
-// GLOBAL CUSTOM COMPONENTS
-import {
-  H1,
-  H4,
-  Paragraph,
-  Span,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// STYLED COMPONENT
-import { CardWrapper } from "./styles";
-
-// ===============================================================
-interface Props {
-  title?: string;
-  bgImage?: string;
-  category?: string;
-  discount?: number;
-  buttonLink?: string;
-  buttonText?: string;
-  description?: string;
-  mode?: "dark" | "light";
-}
-// ===============================================================
-
-export default function CarouselCard4({
-  title,
-  bgImage,
-  category,
-  discount,
-  buttonLink,
-  buttonText,
-  description,
-  mode = "dark",
-}: Props) {
-  return (
-    <CardWrapper img={bgImage ?? ""} mode={mode}>
-      <div className="content">
-        <H4
-          mb={1}
-          lineHeight={1}
-          fontWeight={400}
-          textTransform="uppercase"
-          fontSize={{ sm: 30, xs: 24 }}
-        >
-          {title}
-        </H4>
-
-        <H1
-          fontSize={{ sm: 60, xs: 44 }}
-          lineHeight={1}
-          textTransform="uppercase"
-        >
-          {category}
-        </H1>
-
-        <H4
-          fontSize={{ sm: 30, xs: 24 }}
-          lineHeight={1}
-          mt={1.5}
-          textTransform="uppercase"
-        >
-          SALE UP TO <Span color="primary.main">{discount}% OFF</Span>
-        </H4>
-
-        <Paragraph fontSize={{ sm: 18, xs: 14 }} mb={4}>
-          {description}
-        </Paragraph>
-
-        <Button
-          size="large"
-          href={buttonLink}
-          variant="contained"
-          LinkComponent={Link}
-        >
-          {buttonText}
-        </Button>
-      </div>
-    </CardWrapper>
-  );
-}

package/src/components-v2/carousel-cards/carousel-card-4/index.ts

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

package/src/components-v2/carousel-cards/carousel-card-4/styles.ts

@@ -1,27 +0,0 @@
-"use client";
-
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENT
-export const CardWrapper = styled("div", {
-  shouldForwardProp: (prop) => prop !== "img" && prop !== "mode",
-})<{ img: string; mode: string }>(({ theme, img, mode }) => ({
-  minHeight: 500,
-  display: "flex",
-  alignItems: "center",
-  backgroundSize: "cover",
-  backgroundRepeat: "no-repeat",
-  backgroundImage: `url(${img})`,
-  backgroundColor: mode === "dark" ? "#000" : "#fff",
-  color: mode === "light" ? theme.palette.primary.dark : "#fff",
-  ".content":
-    theme.direction === "rtl" ? { paddingRight: 80 } : { paddingLeft: 80 },
-  [theme.breakpoints.down("md")]: {
-    padding: 24,
-    textAlign: "center",
-    backgroundImage: "none",
-    justifyContent: "center",
-    ".content":
-      theme.direction === "rtl" ? { paddingRight: 0 } : { paddingLeft: 0 },
-  },
-}));

package/src/components-v2/category-cards/category-card-1/category-card-1.tsx

@@ -1,21 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-// STYLED COMPONENTS
-import { CategoryTitle, Wrapper } from "./styles";
-
-// ============================================================
-type Props = { image: string; title: string };
-// ============================================================
-
-export default function CategoryCard1({ image, title }: Props) {
-  return (
-    <Wrapper>
-      <LazyImage src={image} width={213} height={213} alt="category" />
-
-      <CategoryTitle className="category-title">
-        <H4>{title}</H4>
-      </CategoryTitle>
-    </Wrapper>
-  );
-}

package/src/components-v2/category-cards/category-card-1/index.ts

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

package/src/components-v2/category-cards/category-card-1/styles.ts

@@ -1,37 +0,0 @@
-"use client";
-
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENTS
-export const Wrapper = styled("div")(({ theme }) => ({
-  height: "100%",
-  cursor: "pointer",
-  overflow: "hidden",
-  borderRadius: "4px",
-  position: "relative",
-  img: {
-    height: "100%",
-    objectFit: "cover",
-    transition: "all 0.3s",
-    objectPosition: "center center",
-  },
-  ":hover": {
-    img: { transform: "scale(1.1)" },
-    ".category-title": {
-      color: theme.palette.common.white,
-      backgroundColor: theme.palette.primary.dark,
-    },
-  },
-}));
-
-export const CategoryTitle = styled("div")({
-  left: 10,
-  right: 10,
-  bottom: 10,
-  padding: 8,
-  textAlign: "center",
-  borderRadius: "2px",
-  position: "absolute",
-  transition: "all 0.3s",
-  backgroundColor: "rgba(255,255,255, .67)",
-});

package/src/components-v2/countdown/count-box.tsx

@@ -1,19 +0,0 @@
-import {
-  H3,
-  Span,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-
-// ==============================================================
-type Props = { digit: number; title: string };
-// ==============================================================
-
-export default function CountBox({ digit = 365, title = "DAYS" }: Props) {
-  return (
-    <H3>
-      {digit}{" "}
-      <Span color="grey.600" fontSize={14} fontWeight={600}>
-        {title}
-      </Span>
-    </H3>
-  );
-}

package/src/components-v2/countdown/count-down.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-// GLOBAL CUSTOM COMPONENT
-import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
-// Local CUSTOM COMPONENT
-import CountBox from "./count-box";
-import useCountDown from "./useCountDown";
-
-// ==============================================================
-type Props = { expireDate: number };
-// ==============================================================
-
-export default function Countdown({ expireDate }: Props) {
-  const { timeLeft } = useCountDown({ expireDate });
-
-  return (
-    <FlexBetween width="90%" height="auto">
-      <CountBox digit={timeLeft.days} title="DAYS" />
-      <CountBox digit={timeLeft.hours} title="HOURS" />
-      <CountBox digit={timeLeft.minutes} title="MINS" />
-      <CountBox digit={timeLeft.seconds} title="SECS" />
-    </FlexBetween>
-  );
-}

package/src/components-v2/countdown/index.tsx

@@ -1,2 +0,0 @@
-export { default as Countdown } from "./count-down";
-export { default as useCountDown } from "./useCountDown";

package/src/components-v2/countdown/useCountDown.ts

@@ -1,41 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useState } from "react";
-
-const initialState = {
-  days: 0,
-  hours: 0,
-  minutes: 0,
-  seconds: 0,
-};
-
-// ==============================================================
-type Props = { expireDate: number };
-// ==============================================================
-
-export default function useCountDown({ expireDate }: Props) {
-  const [timeLeft, setTimeLeft] = useState(initialState);
-
-  const calculateTimeLeft = useCallback(() => {
-    const distance = expireDate - new Date().getTime();
-    // if date expire
-    if (distance < 0) return initialState;
-
-    return {
-      days: Math.floor(distance / (1000 * 60 * 60 * 24)),
-      hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
-      minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
-      seconds: Math.floor((distance % (1000 * 60)) / 1000),
-    };
-  }, [expireDate]);
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [calculateTimeLeft]);
-
-  return { timeLeft };
-}

package/src/components-v2/data-table/index.ts

@@ -1,2 +0,0 @@
-export { default as TableHeader } from "./table-header";
-export { default as TablePagination } from "./table-pagination";