@evenicanpm/storefront-core 1.0.1 → 1.0.3

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

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

@@ -0,0 +1,131 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Rating from "@mui/material/Rating";
+import TextField from "@mui/material/TextField";
+import * as yup from "yup";
+import { useFormik } from "formik";
+// Local CUSTOM COMPONENT
+import ProductComment from "./product-comment";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { H2, H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+export default function ProductReview() {
+  const initialValues = {
+    rating: 0,
+    comment: "",
+    date: new Date().toISOString(),
+  };
+
+  const validationSchema = yup.object().shape({
+    rating: yup.number().required("required"),
+    comment: yup.string().required("required"),
+  });
+
+  const {
+    dirty,
+    values,
+    errors,
+    touched,
+    isValid,
+    handleBlur,
+    handleChange,
+    handleSubmit,
+    setFieldValue,
+  } = useFormik({
+    initialValues,
+    validationSchema,
+    onSubmit: async (_values, { resetForm }) => {
+      resetForm();
+    },
+  });
+
+  return (
+    <div>
+      {commentList.map((item, ind) => (
+        <ProductComment {...item} key={ind} />
+      ))}
+
+      <H2 fontWeight="600" mt={7} mb={2.5}>
+        Write a Review for this product
+      </H2>
+
+      <form onSubmit={handleSubmit}>
+        <Box mb={2.5}>
+          <FlexBox mb={1.5} gap={0.5}>
+            <H5 color="grey.700">Your Rating</H5>
+            <H5 color="error.main">*</H5>
+          </FlexBox>
+
+          <Rating
+            color="warn"
+            size="medium"
+            value={values.rating}
+            onChange={(_, value: number | null) =>
+              setFieldValue("rating", value)
+            }
+          />
+        </Box>
+
+        <Box mb={3}>
+          <FlexBox mb={1.5} gap={0.5}>
+            <H5 color="grey.700">Your Review</H5>
+            <H5 color="error.main">*</H5>
+          </FlexBox>
+
+          <TextField
+            rows={8}
+            multiline
+            fullWidth
+            name="comment"
+            variant="outlined"
+            onBlur={handleBlur}
+            value={values.comment}
+            onChange={handleChange}
+            placeholder="Write a review here..."
+            error={!!touched.comment && !!errors.comment}
+            helperText={(touched.comment && errors.comment) as string}
+          />
+        </Box>
+
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          disabled={!(dirty && isValid)}
+        >
+          Submit
+        </Button>
+      </form>
+    </div>
+  );
+}
+
+const commentList = [
+  {
+    name: "Jannie Schumm",
+    imgUrl: "/assets/images/faces/7.png",
+    rating: 4.7,
+    date: "2021-02-14",
+    comment:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Varius massa id ut mattis. Facilisis vitae gravida egestas ac account.",
+  },
+  {
+    name: "Joe Kenan",
+    imgUrl: "/assets/images/faces/6.png",
+    rating: 4.7,
+    date: "2019-08-10",
+    comment:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Varius massa id ut mattis. Facilisis vitae gravida egestas ac account.",
+  },
+  {
+    name: "Jenifer Tulio",
+    imgUrl: "/assets/images/faces/8.png",
+    rating: 4.7,
+    date: "2021-02-05",
+    comment:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Varius massa id ut mattis. Facilisis vitae gravida egestas ac account.",
+  },
+];

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

@@ -0,0 +1,51 @@
+"use client";
+
+import React, { useState } from "react";
+import Box from "@mui/material/Box";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import styled from "@mui/material/styles/styled";
+// LOCAL CUSTOM COMPONENTS
+import ProductDescription from "./product-description";
+import { AttributeValue } from "@msdyn365-commerce/retail-proxy";
+// STYLED COMPONENT
+const StyledTabs = styled(Tabs)(({ theme }) => ({
+  minHeight: 0,
+  marginTop: 80,
+  marginBottom: 24,
+  borderBottom: `1px solid ${theme.palette.text.disabled}`,
+  "& .inner-tab": {
+    minHeight: 40,
+    fontWeight: 600,
+    textTransform: "capitalize",
+  },
+}));
+
+type Props = { productAttributes: AttributeValue[] };
+
+export default function ProductTabs({ productAttributes }: Props) {
+  const [selectedOption, setSelectedOption] = useState(0);
+  const handleOptionClick = (_: React.SyntheticEvent, value: number) =>
+    setSelectedOption(value);
+
+  return (
+    <>
+      <StyledTabs
+        textColor="primary"
+        value={selectedOption}
+        indicatorColor="primary"
+        onChange={handleOptionClick}
+      >
+        <Tab className="inner-tab" label="Description" />
+        <Tab className="inner-tab" label="Review (3)" />
+      </StyledTabs>
+
+      <Box mb={6}>
+        {selectedOption === 0 && (
+          <ProductDescription attributes={productAttributes} />
+        )}
+        {/*selectedOption === 1 && <ProductReview />*/}
+      </Box>
+    </>
+  );
+}

package/src/pages-v2/product-details/related-products.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+// GLOBAL CUSTOM COMPONENTS
+import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import ProductCard1Wrapper from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-1/product-card-1-wrapper";
+// CUSTOM DATA MODEL
+import GetRelatedProductsDataFetcher from "@/api-manager/services/product/queries/get-related-products";
+
+// ==============================================================
+type Props = { RecordId: number };
+// ==============================================================
+
+export default function RelatedProducts({ RecordId }: Props) {
+  const { data: products } = GetRelatedProductsDataFetcher.useData({
+    id: RecordId,
+  });
+  return (
+    <Box mb={7.5}>
+      <H3 mb={3}>Related Products</H3>
+
+      <Grid container spacing={3}>
+        {products?.map((item, ind) => (
+          <Grid size={{ lg: 3, md: 4, sm: 6, xs: 12 }} key={ind}>
+            <ProductCard1Wrapper
+              hoverEffect
+              id={item?.ItemId || ""}
+              slug={String(item?.RecordId) || ""}
+              title={item?.Name || ""}
+              price={item.Price}
+              rating={4.5}
+              imgUrl={item.PrimaryImageUrl || ""}
+              discount={10}
+              mode="PLP"
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}

package/src/pages-v2/product-details/types.ts

@@ -0,0 +1,11 @@
+export interface ProductFilters {
+  brand: string[];
+  color: string[];
+  sales: string[];
+  price: number[];
+  rating: number;
+  //   category: string[];
+}
+
+export type ProductFilterKeys = keyof ProductFilters;
+export type ProductFilterValues = ProductFilters[ProductFilterKeys];

package/src/pages-v2/product-list/breadcrumbs.tsx

@@ -0,0 +1,39 @@
+import { Breadcrumbs, Typography } from "@mui/material";
+import React from "react";
+import Link from "next/link";
+import {
+  getCategoryTranslatedName,
+  getCategoryUrl,
+} from "./utils/search-for-category";
+import { CategoryHierarchy } from "@/lib/category-helpers";
+
+type Props = {
+  breadcrumbs: CategoryHierarchy[];
+  locale: string;
+  productName?: string;
+};
+
+export default function CategoryBreadcrumbs({
+  breadcrumbs,
+  locale,
+  productName,
+}: Props) {
+  return (
+    <Breadcrumbs>
+      {breadcrumbs.map((bc, index) =>
+        index < breadcrumbs.length - 1 || productName ? (
+          <Link href={getCategoryUrl(bc)} key={bc.Name}>
+            {getCategoryTranslatedName(locale, bc.NameTranslations)}
+          </Link>
+        ) : (
+          <Typography variant={"body1"} key={bc.Name}>
+            {getCategoryTranslatedName(locale, bc.NameTranslations)}
+          </Typography>
+        ),
+      )}
+      {productName ? (
+        <Typography variant={"body1"}>{productName}</Typography>
+      ) : undefined}
+    </Breadcrumbs>
+  );
+}

package/src/pages-v2/product-list/checkbox-label.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+// MUI
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox, { CheckboxProps } from "@mui/material/Checkbox";
+
+// ==============================================================
+interface Props extends CheckboxProps {
+  label: ReactNode;
+}
+// ==============================================================
+
+export default function CheckboxLabel({ label, ...props }: Props) {
+  return (
+    <FormControlLabel
+      label={label}
+      control={<Checkbox size="small" color="primary" {...props} />}
+      slotProps={{ typography: { fontSize: 14, lineHeight: 1 } }}
+    />
+  );
+}

package/src/pages-v2/product-list/facet-group.tsx

@@ -0,0 +1,125 @@
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import {
+  AttributeDataType,
+  DisplayTemplate,
+  ProductRefiner,
+  ProductRefinerSource,
+  ProductRefinerValue,
+} from "@msdyn365-commerce/retail-proxy";
+import { Box, ButtonBase, Collapse, FormGroup } from "@mui/material";
+import React from "react";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import Swatch from "./swatch";
+import RangeFilter from "./range-filter";
+import ListFilter from "./list-filter";
+import { areRefinersEqual } from "@/lib/refiner-utils";
+
+type Props = {
+  facet: ProductRefiner;
+  selectedRefiners: ProductRefinerValue[];
+  handleRefinerSelect(refiner: ProductRefinerValue): void;
+};
+
+export type RenderedFacetProps = {
+  facet: ProductRefiner;
+  handleRefinerSelect(refiner: ProductRefinerValue): void;
+  isRefinerSelected(r1: ProductRefinerValue): boolean;
+};
+
+export default function FacetGroup({
+  facet,
+  selectedRefiners,
+  handleRefinerSelect,
+}: Props) {
+  const isAnyRefinerFromFacetSelected = () =>
+    facet.Values?.some((v) => isRefinerSelected(v));
+  const isRefinerSelected = (r1: ProductRefinerValue) =>
+    selectedRefiners.some((r2) => areRefinersEqual(r1, r2));
+
+  const [expanded, setExpanded] = React.useState(
+    isAnyRefinerFromFacetSelected(),
+  );
+
+  const renderRefinerType = () => {
+    let component: React.ReactNode | null = null;
+    //Swatch
+    if (facet.KeyName?.toLowerCase() === "color") {
+      component = (
+        <Box mt={1}>
+          <Swatch
+            facet={facet}
+            handleRefinerSelect={handleRefinerSelect}
+            isRefinerSelected={isRefinerSelected}
+          />
+        </Box>
+      );
+    } else if (
+      facet.DataTypeValue === AttributeDataType.Currency &&
+      facet.DisplayTemplateValue === DisplayTemplate.Slider
+    ) {
+      component = (
+        <RangeFilter
+          facet={facet}
+          handleRefinerSelect={handleRefinerSelect}
+          isRefinerSelected={isRefinerSelected}
+          selectedValues={getPriceRefinerValue()}
+        />
+      );
+    } else if (facet.SourceValue === 4) {
+      const updatedFacet = {
+        ...facet,
+        Values: facet?.Values?.map((item) => ({
+          ...item,
+          RightValueBoundString: item.LeftValueBoundString,
+        })),
+      };
+      component = (
+        <ListFilter
+          facet={updatedFacet}
+          handleRefinerSelect={handleRefinerSelect}
+          isRefinerSelected={isRefinerSelected}
+        />
+      );
+    } else {
+      component = (
+        <ListFilter
+          facet={facet}
+          handleRefinerSelect={handleRefinerSelect}
+          isRefinerSelected={isRefinerSelected}
+        />
+      );
+    }
+    return component;
+  };
+
+  function getPriceRefinerValue(): ProductRefinerValue | undefined {
+    return selectedRefiners.find(
+      (refiner) => refiner.RefinerSourceValue === ProductRefinerSource.Price,
+    );
+  }
+
+  return (
+    <Box pb={2} pt={2}>
+      <ButtonBase
+        sx={{ display: "block", width: "100%", borderRadius: 1 }}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <Box display="flex" alignItems="center" pl={1}>
+          <H6 component="p" fontWeight="bold">
+            {facet.KeyName}
+          </H6>
+          <Box flexGrow={1} />
+          {expanded ? (
+            <ExpandLessIcon color="action" />
+          ) : (
+            <ExpandMoreIcon color="action" />
+          )}
+        </Box>
+      </ButtonBase>
+      <FormGroup>
+        <Collapse in={expanded}>{renderRefinerType()}</Collapse>
+      </FormGroup>
+    </Box>
+  );
+}