@evenicanpm/storefront-core 1.0.2 → 1.0.4

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

@@ -0,0 +1,49 @@
+"use client";
+import React from "react";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import useVariants from "../../../../hooks/use-variants";
+import ProductImages from "./product-intro-images";
+import ProductInfo from "./product-info";
+import { ProductIntroContext } from "./context";
+
+/**
+ * Master product data comes in as prop, selected variant details are called
+ * every render, if there is a valid variant id selected (based on dimensions).
+ */
+type Props = { product: ProductDetails; children: React.ReactNode };
+
+export default function ProductIntro({ product, children }: Props) {
+  // HOOKS
+  const {
+    selectedVariant,
+    selectDimensions,
+    handleChangeVariant,
+    allDimensionsSelected,
+    variantPending,
+  } = useVariants(product);
+
+  return (
+    <ProductIntroContext.Provider
+      value={{
+        masterProduct: product,
+        allDimensionsSelected,
+        variantPending,
+        selectedVariant,
+        selectDimensions,
+        handleChangeVariant,
+      }}
+    >
+      <Box width="100%">
+        <Grid container spacing={3} justifyContent="space-around">
+          {children}
+          {/* PRODUCT INFO AREA */}
+        </Grid>
+      </Box>
+    </ProductIntroContext.Provider>
+  );
+}
+
+ProductIntro.Images = ProductImages;
+ProductIntro.Info = ProductInfo;

package/src/pages-v2/product-details/product-intro/compound/thumbnail-with-skeleton.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { Skeleton } from "@mui/material";
+
+/**
+ * Shows a skeleton until the image loads
+ * @category Sub-Component
+ */
+function ThumbnailWithSkeleton({ src }: { src: string }) {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <>
+      {!loaded && <Skeleton variant="rounded" width={50} height={50} />}
+      <img
+        src={src}
+        onLoad={() => setLoaded(true)}
+        style={{
+          display: loaded ? "block" : "none",
+          width: "80%",
+          height: "80%",
+          objectFit: "cover",
+        }}
+      />
+    </>
+  );
+}
+
+export default ThumbnailWithSkeleton;

package/src/pages-v2/product-details/product-intro/utils.ts

@@ -0,0 +1,42 @@
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import { ProductWarehouseInventoryInformation } from "@msdyn365-commerce/retail-proxy";
+
+export const getInventoryLabel = (
+  shippingInventoryData: ProductWarehouseInventoryInformation,
+): string | null => {
+  const aggregate =
+    shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
+    shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+  if (aggregate) {
+    const { TotalAvailableInventoryLevelLabel } = aggregate;
+    return TotalAvailableInventoryLevelLabel || null;
+  }
+  return null;
+};
+
+export const checkProductOOS = (
+  shippingInventoryData: ProductWarehouseInventoryInformation,
+) => {
+  //TODO: Incorporate global inventory enabled flag.
+  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;
+};
+
+/**
+ * Simple object building for inventory query.
+ */
+export const buildInventorySearchCriteria = (productId: number) => {
+  return {
+    searchCriteria: {
+      defaultWarehouseOnly: true,
+      productIds: [productId],
+    },
+  };
+};

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,117 @@
+"use client";
+
+import React, { useContext, useState, createContext } 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[]; children: React.ReactNode };
+
+export interface TabsContext {
+  selectedOption: number;
+  productAttributes: AttributeValue[];
+  handleOptionClick: (_: React.SyntheticEvent, value: number) => void;
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div role="tabpanel" hidden={value !== index} {...other}>
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+const TabsContext = createContext<TabsContext>(null);
+
+/**
+ * @category Compound Component
+ */
+export default function ProductTabs({ productAttributes, children }: Props) {
+  const [selectedOption, setSelectedOption] = useState(0);
+  const handleOptionClick = (_: React.SyntheticEvent, value: number) =>
+    setSelectedOption(value);
+
+  return (
+    <TabsContext.Provider
+      value={{ selectedOption, handleOptionClick, productAttributes }}
+    >
+      <Box mb={6}>{children}</Box>
+    </TabsContext.Provider>
+  );
+}
+
+/**
+ * @category Sub-Component
+ */
+ProductTabs.Tabs = ({ children }: { children: React.ReactNode }) => {
+  const { selectedOption, handleOptionClick } = useContext(TabsContext);
+  return (
+    <StyledTabs
+      textColor="primary"
+      value={selectedOption}
+      indicatorColor="primary"
+      onChange={handleOptionClick}
+    >
+      {children}
+    </StyledTabs>
+  );
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductTabs.Option = (props: { label: string; value: number }) => {
+  return <Tab className="inner-tab" {...props} />;
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductTabs.Content = ({
+  index,
+  children,
+}: {
+  index: number;
+  children: React.ReactNode;
+}) => {
+  const { selectedOption } = useContext(TabsContext);
+  return (
+    <CustomTabPanel value={selectedOption} index={index}>
+      {children}
+    </CustomTabPanel>
+  );
+};
+
+/**
+ * @category Sub-Component
+ */
+ProductTabs.Description = () => {
+  const { productAttributes } = useContext(TabsContext);
+  return <ProductDescription attributes={productAttributes} />;
+};

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

@@ -0,0 +1,56 @@
+"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 ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/product-card";
+// 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}>
+            <ProductCard
+              product={{
+                id: item.ItemId ?? "",
+                slug: String(item?.RecordId) ?? "",
+                title: item.Name ?? "",
+                price: item.Price ?? 0,
+                imgUrl: item.PrimaryImageUrl ?? "",
+                rating: 0,
+                discount: 0,
+                hoverEffect: true,
+              }}
+            >
+              <ProductCard.Image />
+              <ProductCard.Body>
+                <ProductCard.Info>
+                  <ProductCard.Title />
+                  <ProductCard.Rating />
+                  <ProductCard.Price />
+                </ProductCard.Info>
+                <ProductCard.Actions>
+                  <ProductCard.QuantityButtons />
+                  {/* <ProductCard.HoverActions /> */}
+                </ProductCard.Actions>
+              </ProductCard.Body>
+            </ProductCard>
+          </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>
+  );
+}

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

@@ -0,0 +1,36 @@
+import {
+  ProductRefiner,
+  ProductRefinerValue,
+} from "@msdyn365-commerce/retail-proxy";
+import React from "react";
+import FacetGroup from "./facet-group";
+import { Box, Divider } from "@mui/material";
+
+type Props = {
+  facets: ProductRefiner[];
+  selectedRefiners: ProductRefinerValue[];
+  handleRefinerSelect(refiner: ProductRefinerValue): void;
+};
+
+export default function Facet({
+  facets,
+  selectedRefiners,
+  handleRefinerSelect,
+}: Props) {
+  return (
+    <div>
+      {facets.map((facetGroup, index) => {
+        return (
+          <Box key={facetGroup.KeyName}>
+            <FacetGroup
+              facet={facetGroup}
+              selectedRefiners={selectedRefiners}
+              handleRefinerSelect={handleRefinerSelect}
+            />
+            {index < facets.length - 1 && <Divider />}
+          </Box>
+        );
+      })}
+    </div>
+  );
+}