@evenicanpm/storefront-core 1.0.2 → 1.0.3

package/src/pages-v2/product-details/product-comment.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import Avatar from "@mui/material/Avatar";
+import Rating from "@mui/material/Rating";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import {
+  H5,
+  H6,
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// CUSTOM UTILS LIBRARY FUNCTION
+import { getDateDifference } from "@/lib/lib";
+
+// ===========================================================
+interface Props {
+  name: string;
+  date: string;
+  imgUrl: string;
+  rating: number;
+  comment: string;
+}
+// ===========================================================
+
+export default function ProductComment(props: Props) {
+  const { name, imgUrl, rating, date, comment } = props || {};
+
+  return (
+    <Box mb={4} maxWidth={600}>
+      <FlexBox alignItems="center" mb={2} gap={2}>
+        <Avatar alt={name} src={imgUrl} sx={{ width: 48, height: 48 }} />
+
+        <div>
+          <H5 mb={1}>{name}</H5>
+
+          <FlexBox alignItems="center" gap={1.25}>
+            <Rating size="small" value={rating} color="warn" readOnly />
+            <H6>{rating}</H6>
+            <Span>{getDateDifference(date)}</Span>
+          </FlexBox>
+        </div>
+      </FlexBox>
+
+      <Paragraph color="grey.700">{comment}</Paragraph>
+    </Box>
+  );
+}

package/src/pages-v2/product-details/product-description.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { AttributeValue } from "@msdyn365-commerce/retail-proxy";
+
+type Props = { attributes: AttributeValue[] };
+
+export default function ProductDescription({ attributes }: Props) {
+  return (
+    <div>
+      <H3 mb={2}>Specifications:</H3>
+      {attributes?.map((attr, index) => {
+        if (attr?.TextValue && attr?.Name)
+          return (
+            <div key={index}>
+              {attr.Name}: {attr.TextValue}
+            </div>
+          );
+      })}
+    </div>
+  );
+}

package/src/pages-v2/product-details/product-filter-card.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { Fragment, useState } from "react";
+// MUI
+import Box from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
+import Divider from "@mui/material/Divider";
+import Collapse from "@mui/material/Collapse";
+import TextField from "@mui/material/TextField";
+import FormGroup from "@mui/material/FormGroup";
+// LOCAL CUSTOM COMPONENTS
+import CheckboxLabel from "./checkbox-label";
+// GLOBAL CUSTOM COMPONENTS
+import {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import {
+  H5,
+  H6,
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import AccordionHeader from "@evenicanpm/storefront-core/src/components-v2/accordion/accordion-header";
+// TYPE
+import {
+  ProductFilterKeys,
+  ProductFilterValues,
+  ProductFilters,
+} from "./types";
+import { Slider } from "@mui/material";
+
+// FILTER OPTIONS
+const categoryList = [
+  {
+    title: "Bath Preparations",
+    subCategories: ["Bubble Bath", "Bath Capsules", "Others"],
+  },
+  { title: "Eye Makeup Preparations" },
+  { title: "Fragrance" },
+  { title: "Hair Preparations" },
+];
+
+const BRANDS = [
+  { label: "Mac", value: "mac" },
+  { label: "Karts", value: "karts" },
+  { label: "Baals", value: "baals" },
+  { label: "Bukks", value: "bukks" },
+  { label: "Luasis", value: "luasis" },
+];
+
+const OTHERS = [
+  { label: "On Sale", value: "sale" },
+  { label: "In Stock", value: "stock" },
+  { label: "Featured", value: "featured" },
+];
+
+const colorList = [
+  "#1C1C1C",
+  "#FF7A7A",
+  "#FFC672",
+  "#84FFB5",
+  "#70F6FF",
+  "#6B7AFF",
+];
+
+// ============================================================================
+interface Props {
+  filters: ProductFilters;
+  changeFilters: (key: ProductFilterKeys, values: ProductFilterValues) => void;
+}
+// ============================================================================
+
+export default function ProductFilterCard({ filters, changeFilters }: Props) {
+  const [collapsed, setCollapsed] = useState(true);
+
+  const handleChangePrice = (values: number[]) => {
+    changeFilters("price", values);
+  };
+
+  const handleChangeColor = (value: string) => {
+    const values = filters.color.includes(value)
+      ? filters.color.filter((item) => item !== value)
+      : [...filters.color, value];
+
+    changeFilters("color", values);
+  };
+
+  const handleChangeBrand = (value: string) => {
+    const values = filters.brand.includes(value)
+      ? filters.brand.filter((item) => item !== value)
+      : [...filters.brand, value];
+
+    changeFilters("brand", values);
+  };
+
+  const handleChangeSales = (value: string) => {
+    const values = filters.sales.includes(value)
+      ? filters.sales.filter((item) => item !== value)
+      : [...filters.sales, value];
+
+    changeFilters("sales", values);
+  };
+
+  const handleChangeRating = (value: number) => {
+    changeFilters("rating", value);
+  };
+
+  return (
+    <div>
+      {/* CATEGORY VARIANT FILTER */}
+      <H6 mb={1.25}>Categories</H6>
+      {categoryList.map((item) =>
+        item.subCategories ? (
+          <Fragment key={item.title}>
+            <AccordionHeader
+              open={collapsed}
+              onClick={() => setCollapsed((state) => !state)}
+              sx={{ padding: ".5rem 0", cursor: "pointer", color: "grey.600" }}
+            >
+              <Span>{item.title}</Span>
+            </AccordionHeader>
+
+            <Collapse in={collapsed}>
+              {item.subCategories.map((name) => (
+                <Paragraph
+                  pl="22px"
+                  py={0.75}
+                  key={name}
+                  fontSize="14px"
+                  color="grey.600"
+                  sx={{ cursor: "pointer" }}
+                >
+                  {name}
+                </Paragraph>
+              ))}
+            </Collapse>
+          </Fragment>
+        ) : (
+          <Paragraph
+            key={item.title}
+            sx={{
+              py: 0.75,
+              fontSize: 14,
+              cursor: "pointer",
+              color: "grey.600",
+            }}
+          >
+            {item.title}
+          </Paragraph>
+        ),
+      )}
+
+      <Box component={Divider} my={3} />
+
+      {/* PRICE VARIANT FILTER */}
+      <H6 mb={2}>Price Range</H6>
+
+      <Slider
+        min={0}
+        max={300}
+        size="small"
+        value={filters.price}
+        valueLabelDisplay="auto"
+        valueLabelFormat={(v) => `$${v}`}
+        onChange={(_, v) => handleChangePrice(v as number[])}
+      />
+      <FlexBetween>
+        <TextField
+          fullWidth
+          size="small"
+          type="number"
+          placeholder="0"
+          value={filters.price[0]}
+          onChange={(e) =>
+            handleChangePrice([+e.target.value, filters.price[1]])
+          }
+        />
+
+        <H5 color="grey.600" px={1}>
+          -
+        </H5>
+
+        <TextField
+          fullWidth
+          size="small"
+          type="number"
+          placeholder="250"
+          value={filters.price[1]}
+          onChange={(e) =>
+            handleChangePrice([filters.price[0], +e.target.value])
+          }
+        />
+      </FlexBetween>
+
+      <Box component={Divider} my={3} />
+
+      {/* BRAND VARIANT FILTER */}
+      <H6 mb={2}>Brands</H6>
+      <FormGroup>
+        {BRANDS.map(({ label, value }) => (
+          <CheckboxLabel
+            key={value}
+            label={label}
+            checked={filters.brand.includes(value)}
+            onChange={() => handleChangeBrand(value)}
+          />
+        ))}
+      </FormGroup>
+
+      <Box component={Divider} my={3} />
+
+      {/* SALES OPTIONS */}
+      <FormGroup>
+        {OTHERS.map(({ label, value }) => (
+          <CheckboxLabel
+            key={value}
+            label={label}
+            checked={filters.sales.includes(value)}
+            onChange={() => handleChangeSales(value)}
+          />
+        ))}
+      </FormGroup>
+
+      <Box component={Divider} my={3} />
+
+      {/* RATINGS FILTER */}
+      <H6 mb={2}>Ratings</H6>
+      <FormGroup>
+        {[5, 4, 3, 2, 1].map((item) => (
+          <CheckboxLabel
+            key={item}
+            checked={filters.rating === item}
+            onChange={() => handleChangeRating(item)}
+            label={<Rating size="small" value={item} color="warn" readOnly />}
+          />
+        ))}
+      </FormGroup>
+
+      <Box component={Divider} my={3} />
+
+      {/* COLORS VARIANT FILTER */}
+      <H6 mb={2}>Colors</H6>
+      <FlexBox mb={2} flexWrap="wrap" gap={1.5}>
+        {colorList.map((item) => (
+          <Box
+            key={item}
+            width={25}
+            height={25}
+            flexShrink={0}
+            bgcolor={item}
+            borderRadius="50%"
+            onClick={() => handleChangeColor(item)}
+            sx={{
+              outlineOffset: 1,
+              cursor: "pointer",
+              outline: filters.color.includes(item) ? 1 : 0,
+              outlineColor: item,
+            }}
+          />
+        ))}
+      </FlexBox>
+    </div>
+  );
+}

package/src/pages-v2/product-details/product-intro/product-intro-images.tsx

@@ -0,0 +1,90 @@
+"use client";
+import Grid from "@mui/material/Grid2";
+import Avatar from "@mui/material/Avatar";
+
+// GLOBAL CUSTOM COMPONENTS
+import {
+  FlexBox,
+  FlexRowCenter,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
+
+/**
+ * Master product data comes in as prop, selected variant details are called
+ * every render, if there is a valid variant id selected.
+ */
+
+// ================================================================
+type Props = {
+  selectedImageIndex?: number;
+  primaryImageUrl: string;
+  handleImageClick: (ind: number) => () => void;
+  images: string[];
+  name: string | undefined;
+};
+
+// ================================================================
+
+export default function ProductImages({
+  name,
+  selectedImageIndex,
+  primaryImageUrl,
+  images,
+  handleImageClick,
+}: Props) {
+  return (
+    <>
+      <Grid size={{ md: 6, xs: 12 }} alignItems="center">
+        {/*MAIN IMAGE*/}
+        <FlexBox
+          borderRadius={3}
+          overflow="hidden"
+          justifyContent="center"
+          mb={6}
+        >
+          <ImageWithFallback
+            alt={name ?? "product"}
+            width={300}
+            height={300}
+            loading="eager"
+            src={
+              Array.isArray(images) &&
+              selectedImageIndex !== undefined &&
+              images[selectedImageIndex]
+                ? images[selectedImageIndex]
+                : primaryImageUrl
+            }
+            style={{ objectFit: "contain" }}
+          />
+        </FlexBox>
+
+        {/*THUMBNAIL IMAGES*/}
+        <FlexBox overflow="auto" gap={1} justifyContent="center">
+          {images?.map((url, ind) => (
+            <FlexRowCenter
+              key={ind}
+              width={64}
+              height={64}
+              minWidth={64}
+              bgcolor="white"
+              border="1px solid"
+              borderRadius="10px"
+              style={{ cursor: "pointer" }}
+              onClick={handleImageClick(ind)}
+              borderColor={
+                selectedImageIndex === ind ? "primary.main" : "grey.400"
+              }
+            >
+              <Avatar
+                alt="product"
+                src={url}
+                variant="square"
+                sx={{ height: 40 }}
+              />
+            </FlexRowCenter>
+          ))}
+        </FlexBox>
+      </Grid>
+    </>
+  );
+}

package/src/pages-v2/product-details/product-intro/product-intro.tsx

@@ -0,0 +1,256 @@
+"use client";
+import { useState, useMemo } from "react";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import Rating from "@mui/material/Rating";
+import { CircularProgress, Typography } from "@mui/material";
+
+// GLOBAL CUSTOM COMPONENTS
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import {
+  H1,
+  H2,
+  H6,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/product-quantity-buttons";
+import AddToWishlistButton from "@evenicanpm/storefront-core/src/components-v2/wishlist-modal/add-to-wishlist-button";
+// D365
+import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+
+// API MANAGER
+import {
+  InventorySearchCriteriaInput,
+  ProductDetails,
+} from "@/api-manager/schemas/product.schema";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+import getProductPrices from "@/api-manager/services/product/queries/get-product-prices";
+import getProductAvailability from "@/api-manager/services/product/queries/get-product-availability";
+
+// LOCAL HOOKS
+import useVariants from "../../../hooks/use-variants";
+import useCart, {
+  AddToCartBopisInput,
+} from "@evenicanpm/storefront-core/src/hooks/use-cart";
+
+// LOCAL COMPONENTS
+import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
+import ProductImages from "./product-intro-images";
+import FindInStoreButton from "../bopis/find-in-store-button";
+
+/**
+ * Master product data comes in as prop, selected variant details are called
+ * every render, if there is a valid variant id selected.
+ */
+
+// ================================================================
+type Props = { product: ProductDetails; cart: Cart };
+// ================================================================
+
+export default function ProductIntro({ product, cart }: Props) {
+  const [selectedImageIndex, setSelectedImage] = useState<number>(0);
+  const [showDimensionError, setShowDimensionError] = useState(false);
+  const [productRedId, setProductRedId] = useState<number>(product.RecordId);
+
+  const { Name, DimensionValues, Images, ItemId, RecordId } = product;
+
+  const { data: productPrices } = getProductPrices.useData({
+    productIds: [Number(productRedId)],
+  });
+
+  // HOOKS
+  const {
+    productVariant,
+    selectVariantId,
+    selectDimensions,
+    handleChangeVariant,
+    allDimensionsSelected,
+  } = useVariants({ product });
+
+  const { handleCartAmountChange, handleAddToCart, loading } = useCart({
+    cart,
+    selectVariantId,
+    recordId: RecordId,
+  });
+
+  const { formatCurrency } = useCurrencyFormatter();
+
+  const searchCriteria = useMemo<InventorySearchCriteriaInput>(
+    () => ({
+      allDimensionsSelected: allDimensionsSelected(selectDimensions),
+      searchCriteria: {
+        defaultWarehouseOnly: true,
+        productIds: [selectVariantId || RecordId],
+      },
+    }),
+    [allDimensionsSelected, selectDimensions, selectVariantId, RecordId],
+  );
+
+  const { data: shippingInventoryData, isLoading: inventoryLoading } =
+    getProductAvailability.useData(searchCriteria);
+  // HELPERS
+  const currentCartLine = cart?.CartLines?.find((item) => {
+    return item?.ProductId === (Number(selectVariantId) || RecordId);
+  });
+
+  const getInventoryLabel = (): string | null => {
+    const aggregate =
+      shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
+      shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+    if (aggregate) {
+      const { TotalAvailableInventoryLevelLabel } = aggregate;
+      return TotalAvailableInventoryLevelLabel || null;
+    }
+    return null;
+  };
+
+  const shouldDisableAddToCart = () => {
+    //TODO: Incorporate global inventory enabled flag.
+    if (!allDimensionsSelected(selectDimensions)) {
+      return false; // Don't disable add to cart if dimensions are not selected, so clicking the button will provide an error message showing the user what to do.
+    }
+    const OOSCode = "OOS"; // Always means out of stock
+    const aggregate =
+      shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
+      shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+    if (aggregate) {
+      const { TotalAvailableInventoryLevelCode } = aggregate;
+      return TotalAvailableInventoryLevelCode === OOSCode;
+    }
+    return true;
+  };
+
+  // HANDLE SELECT IMAGE
+  const handleImageClick = (ind: number) => () => {
+    setSelectedImage(ind);
+  };
+
+  const images =
+    Array.isArray(productVariant?.Images) && productVariant.Images.length > 0
+      ? productVariant.Images
+      : Array.isArray(Images) && Images.length > 0
+        ? Images
+        : [];
+
+  const handleChangeVariantWrapper = (
+    dimension: ProductDimensionValueInventoryAvailability,
+  ) => {
+    handleChangeVariant(dimension);
+
+    const newRecID = dimension?.ProductIds?.[0];
+    if (newRecID) setProductRedId(newRecID);
+  };
+
+  const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
+    if (!allDimensionsSelected(selectDimensions)) {
+      setShowDimensionError(true);
+      return;
+    }
+    setShowDimensionError(false);
+    handleAddToCart(bopisInput);
+  };
+
+  const shouldOpenHelperModal = () => {
+    if (!allDimensionsSelected(selectDimensions)) {
+      setShowDimensionError(true);
+      return false;
+    }
+    setShowDimensionError(false);
+    return true;
+  };
+
+  return (
+    <Box width="100%">
+      <Grid container spacing={3} justifyContent="space-around">
+        <ProductImages
+          name={Name}
+          selectedImageIndex={selectedImageIndex}
+          primaryImageUrl={
+            Array.isArray(productVariant?.Images) &&
+            productVariant.Images.length > 0
+              ? productVariant.Images[0]
+              : Array.isArray(Images) && Images.length > 0
+                ? Images[0]
+                : ""
+          }
+          images={images}
+          handleImageClick={handleImageClick}
+        />
+
+        {/* PRODUCT INFO AREA */}
+        <Grid size={{ md: 6, xs: 12 }} alignItems="center">
+          {/* PRODUCT NAME */}
+          <H1 mb={1}>{Name}</H1>
+
+          {/* PRODUCT BRAND */}
+          <FlexBox alignItems="center" mb={1}>
+            <H6>SKU: {productVariant?.ItemId || ItemId}</H6>
+          </FlexBox>
+
+          {/* PRODUCT RATING */}
+          <FlexBox alignItems="center" gap={1} mb={2}>
+            <Box lineHeight="1">Rated:</Box>
+            <Rating color="warn" value={0} readOnly />
+            <H6 lineHeight="1">(0)</H6>
+          </FlexBox>
+
+          {/* PRODUCT VARIANTS  */}
+          <ProductDimensions
+            dimensionGroups={DimensionValues}
+            selectDimensions={selectDimensions}
+            handleChangeVariant={handleChangeVariantWrapper}
+            showDimensionError={showDimensionError}
+          />
+
+          {/* PRODUCT PRICE & STOCK */}
+          <Box pt={1} mb={3}>
+            <H2 color="primary.main" mb={0.5} lineHeight="1">
+              {productPrices && productPrices[0].CustomerContextualPrice ? (
+                formatCurrency(productPrices[0].CustomerContextualPrice)
+              ) : (
+                <CircularProgress size={20} />
+              )}
+            </H2>
+            <Box color="inherit">{}</Box>
+          </Box>
+          <FlexBox alignItems="center" gap={1} mb={2}>
+            {/* INVENTORY */}
+            <Box sx={{ my: 3 }}>
+              {inventoryLoading ? (
+                <CircularProgress size={20} />
+              ) : (
+                <Typography
+                  variant="body2"
+                  color="text.secondary"
+                  fontWeight={600}
+                >
+                  {getInventoryLabel()}
+                </Typography>
+              )}
+            </Box>
+
+            <FlexBox gap={2}>
+              <QuantityButtons
+                loading={loading}
+                handleAddToCart={onAddToCart}
+                productCartLine={currentCartLine}
+                handleCartAmountChange={handleCartAmountChange}
+                isOOS={shouldDisableAddToCart()}
+              />
+              <FindInStoreButton
+                productId={selectVariantId || RecordId}
+                canOpenModal={shouldOpenHelperModal}
+                handleAddToCart={handleAddToCart}
+                allDimensionsSelected={allDimensionsSelected(selectDimensions)}
+              />
+              <AddToWishlistButton
+                path="Account.Wishlists.btnAddToWishlist"
+                product={product}
+              />
+            </FlexBox>
+          </FlexBox>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}