@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/pages-v2/confirmation/ordered-products.tsx

@@ -1,115 +1,147 @@
-import useCurrencyFormatter from "@/lib/currency-formatter";
-import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
+"use client";
+
+import React, { ReactNode, createContext, useContext } from "react";
 import { Card, Avatar, Box } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import { SalesLine } from "@/api-manager/schemas/order.schema";
 import {
   FlexBetween,
   FlexBox,
-} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import {
   H6,
   Paragraph,
   Span,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { useFormatter, useTranslations } from "next-intl";
-import React from "react";
-import { Fragment } from "react";
-
-type Props = {
-  salesLines: SalesLine[];
-  orderId: string;
-  transactionDate: Date;
-  receiptEmail: string;
+import { useTranslations, useFormatter } from "next-intl";
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
+import { SalesLine, SalesOrder } from "@/api-manager/schemas/order.schema";
+
+const OrderedProductsContext = createContext<SalesOrder | null>(null);
+
+type Props = { order: SalesOrder; children?: ReactNode };
+
+export const OrderedProducts = ({ order, children }: Props) => {
+  return (
+    <OrderedProductsContext.Provider value={order}>
+      <Card sx={{ p: 0, mb: "30px" }}>{children}</Card>
+    </OrderedProductsContext.Provider>
+  );
 };
 
-export default function OrderedProducts({
-  salesLines,
-  orderId,
-  transactionDate,
-  receiptEmail,
-}: Props) {
+OrderedProducts.Header = () => {
+  const ctx = useContext(OrderedProductsContext);
+  if (!ctx) return null;
   const t = useTranslations("Confirmation");
+  const order = ctx;
   const { dateTime } = useFormatter();
+
+  return (
+    <FlexBetween
+      px={3}
+      py={2}
+      flexWrap="wrap"
+      borderBottom="1px solid"
+      borderColor="divider"
+    >
+      <FlexBox gap={1} alignItems="center">
+        <Paragraph color="grey.600">{t("orderNumber")}</Paragraph>
+        <Paragraph>{order.ChannelReferenceId}</Paragraph>
+      </FlexBox>
+      {order.TransactionDate && (
+        <FlexBox gap={1} alignItems="center">
+          <Paragraph color="grey.600">{t("orderDate")}</Paragraph>
+          <Paragraph>
+            {dateTime(new Date(order.TransactionDate), { dateStyle: "medium" })}
+          </Paragraph>
+        </FlexBox>
+      )}
+      <FlexBox gap={1} alignItems="center">
+        <Paragraph color="grey.600">{t("orderEmail")}</Paragraph>
+        <Paragraph>{order.ReceiptEmail}</Paragraph>
+      </FlexBox>
+    </FlexBetween>
+  );
+};
+
+OrderedProducts.List = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Grid container spacing={2} alignItems="center" padding="15px 5px">
+      {children}
+    </Grid>
+  );
+};
+
+// Line: single product row
+type LineProps = { line: SalesLine };
+OrderedProducts.Row = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+OrderedProducts.ColumnOne = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Grid size={{ xs: 12, sm: 6 }}>
+      <FlexBox gap={2.5} alignItems="center">
+        {children}
+      </FlexBox>
+    </Grid>
+  );
+};
+
+OrderedProducts.Image = ({ src, alt }: { src?: string; alt?: string }) => (
+  <Avatar alt={alt} src={src} sx={{ mx: 1, width: 75, height: 75 }} />
+);
+
+OrderedProducts.Info = ({ children }: { children: React.ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+OrderedProducts.Title = ({ line }: LineProps) => {
   const { formatCurrency } = useCurrencyFormatter();
+  return (
+    <>
+      <H6>{line.Product?.Name}</H6>
+      <Paragraph color="grey.600">
+        {formatCurrency(line.Price ?? 0)} x {line.Quantity}
+      </Paragraph>
+    </>
+  );
+};
 
-  const checkValidDate = (date: Date | string) => {
-    return new Date(date) instanceof Date;
-  };
+OrderedProducts.Comment = ({ line }: LineProps) => {
+  const t = useTranslations("Confirmation");
+  if (!line.Comment) return null;
+  return (
+    <Paragraph mt={1}>
+      <H6 sx={{ display: "inline" }}>{t("commentLabel")}: </H6>
+      {line.Comment}
+    </Paragraph>
+  );
+};
 
-  const renderItem = (title: string, value: string) => (
-    <FlexBox gap={1} alignItems="center">
-      <Paragraph color="grey.600">{title}</Paragraph>
-      <Paragraph>{value}</Paragraph>
-    </FlexBox>
+OrderedProducts.Dimensions = ({ line }: LineProps) => {
+  if (!line.Product?.Dimensions?.length) return <Box />;
+  return (
+    <Grid size={{ xs: 8, sm: 4 }}>
+      {line.Product.Dimensions.map((dim, i) => (
+        <Paragraph key={i} paddingLeft="15px">
+          <Span>{ProductDimensionType[dim.DimensionTypeValue || 0]}:</Span>
+          <Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
+        </Paragraph>
+      ))}
+    </Grid>
   );
+};
+
+OrderedProducts.Total = ({ line }: LineProps) => {
+  const { formatCurrency } = useCurrencyFormatter();
   return (
-    <Card sx={{ p: 0, mb: "30px" }}>
-      <FlexBetween
-        px={3}
-        py={2}
-        flexWrap="wrap"
-        borderBottom="1px solid"
-        borderColor="divider"
-      >
-        {renderItem(t("orderNumber"), orderId)}
-        {checkValidDate(transactionDate)
-          ? renderItem(
-              t("orderDate"),
-              dateTime(new Date(transactionDate), { dateStyle: "medium" }),
-            )
-          : null}
-        {renderItem(t("orderEmail"), receiptEmail)}
-      </FlexBetween>
-
-      <Grid container spacing={2} alignItems={"center"} padding={"15px 5px"}>
-        {salesLines.map((item, ind) => (
-          <Fragment key={ind}>
-            <Grid size={{ xs: 12, sm: 6 }}>
-              <FlexBox gap={2.5} alignItems="center">
-                <Avatar
-                  alt={item.Product?.Name}
-                  src={item.Product?.PrimaryImageUrl}
-                  sx={{ mx: 1, width: 75, height: 75 }}
-                />
-                <div>
-                  <H6>{item.Product?.Name}</H6>
-                  <Paragraph color="grey.600">
-                    {formatCurrency(item.Price ?? 0)} x {item.Quantity}
-                  </Paragraph>
-                  {item.Comment ? (
-                    <Paragraph mt={1}>
-                      <H6 sx={{ display: "inline" }}>{t("commentLabel")}: </H6>
-                      {item.Comment}
-                    </Paragraph>
-                  ) : null}
-                </div>
-              </FlexBox>
-            </Grid>
-
-            <Grid size={{ xs: 8, sm: 4 }}>
-              {item.Product?.Dimensions?.length ? (
-                item.Product.Dimensions.map((dim, dimInd) => (
-                  <Paragraph key={dimInd} paddingLeft={"15px"}>
-                    <Span>
-                      {ProductDimensionType[dim.DimensionTypeValue || 0]}:
-                    </Span>
-                    <Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
-                  </Paragraph>
-                ))
-              ) : (
-                <Box />
-              )}
-            </Grid>
-
-            <Grid size={{ xs: 4, sm: 2 }}>
-              <Box justifySelf={"end"} paddingRight={"15px"}>
-                <Paragraph>{formatCurrency(item.TotalAmount ?? 0)}</Paragraph>
-              </Box>
-            </Grid>
-          </Fragment>
-        ))}
-      </Grid>
-    </Card>
+    <Grid size={{ xs: 4, sm: 2 }}>
+      <Box justifySelf="end" paddingRight="15px">
+        <Paragraph>{formatCurrency(line.TotalAmount ?? 0)}</Paragraph>
+      </Box>
+    </Grid>
   );
-}
+};
+
+export default OrderedProducts;

package/src/pages-v2/product-details/bopis/find-in-store-button.tsx

@@ -1,14 +1,14 @@
 import { Button } from "@mui/material";
 import React from "react";
-import FindInStoreModal from "./find-in-store-modal";
-import { AddToCartBopisInput } from "../../../hooks/use-cart";
+import FindInStoreModal from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/find-in-store-modal";
+import { AddToCartBopisInput } from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import { useTranslations } from "next-intl";
 
 type Props = {
   productId: number;
-  canOpenModal(): boolean;
-  handleAddToCart: (bopisInput: AddToCartBopisInput) => void;
   allDimensionsSelected: boolean;
+  handleAddToCart: (bopisInput: AddToCartBopisInput) => void;
+  setDimensionsError: (state: boolean) => void;
 };
 
 /**
@@ -16,7 +16,6 @@ type Props = {
  *
  * @param props - The component props
  * @param props.productId - The ID of the product to find in stores
- * @param props.canOpenModal - Optional function that determines if the modal can be opened; if undefined, modal can always open
  * @param props.handleAddToCart - Function to call when adding the item to cart with BOPIS information
  * @param props.allDimensionsSelected - Flag indicating if all product dimensions/variations have been selected
  *
@@ -24,17 +23,18 @@ type Props = {
  */
 const FindInStoreButton = ({
   productId,
-  canOpenModal,
-  handleAddToCart,
   allDimensionsSelected,
+  handleAddToCart,
+  setDimensionsError,
 }: Props) => {
   const [open, setOpen] = React.useState(false);
   const t = useTranslations("productDetail.Bopis");
-  const modalShouldOpen = () => canOpenModal === undefined || canOpenModal();
   const handleOpen = () => {
-    if (modalShouldOpen()) {
-      setOpen(true);
+    if (!allDimensionsSelected) {
+      setDimensionsError(true);
+      return;
     }
+    setOpen(true);
   };
   const handleClose = () => {
     setOpen(false);
@@ -44,6 +44,7 @@ const FindInStoreButton = ({
     handleAddToCart(bopisInput);
     handleClose();
   };
+
   return (
     <React.Fragment>
       <Button onClick={handleOpen} variant={"contained"} color={"secondary"}>

package/src/pages-v2/product-details/bopis/find-in-store-modal.tsx

@@ -9,18 +9,18 @@ import {
 } from "@mui/material";
 import { Box } from "@mui/system";
 import React from "react";
-import SearchHeader from "./search-header";
-import ShopCard from "@evenicanpm/storefront-core/src/components-v2/shop-card";
+import SearchHeader from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/search-header";
+import ShopCard from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/store-card";
 import {
   DeliveryOption,
   ProductWarehouseInventoryAvailability,
   QueryResultSettings,
   SearchArea,
 } from "@msdyn365-commerce/retail-proxy";
-import PickupOptionSelect from "./pickup-option-select";
+import PickupOptionSelect from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/pickup-option-select";
 import { geolocate } from "@/lib/map-helper";
 import getStores from "@/api-manager/services/organization/queries/get-stores";
-import { AddToCartBopisInput } from "../../../hooks/use-cart";
+import { AddToCartBopisInput } from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import getProductAvailability from "@/api-manager/services/product/queries/get-product-availability";
 import { InventorySearchCriteriaInput } from "@/api-manager/schemas/product.schema";
 import { OrgUnitLocationReturnType } from "@/api-manager/schemas/organization.schema";
@@ -200,7 +200,7 @@ const FindInStoreModal = ({
 
   const renderShopCard = (store: OrgUnitLocationReturnType) => {
     const { location, storeHours, pickupOptions } = store;
-    if (!location.OrgUnitNumber) {
+    if (!location?.OrgUnitNumber) {
       return null;
     }
     const inventoryRecord = getInventoryRecordByStoreId(location.OrgUnitNumber);

package/src/pages-v2/product-details/bopis/pickup-option-select.tsx

@@ -9,7 +9,7 @@ import {
   Typography,
 } from "@mui/material";
 import React from "react";
-import { AddToCartBopisInput } from "../../../hooks/use-cart";
+import { AddToCartBopisInput } from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import { useTranslations } from "next-intl";
 
 type Props = {

package/src/pages-v2/product-details/bopis/store-card/index.ts

@@ -0,0 +1 @@
+export { default } from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/store-card/shop-card";

package/src/{components-v2/shop-card → pages-v2/product-details/bopis/store-card}/shop-card.tsx

@@ -4,21 +4,24 @@ import AccessTimeFilledIcon from "@mui/icons-material/AccessTimeFilled";
 import Place from "@mui/icons-material/Place";
 import InventoryIcon from "@mui/icons-material/Inventory";
 // GLOBAL CUSTOM COMPONENTS
-import { H3, Span } from "../Typography";
-import { FlexBetween, FlexBox } from "../flex-box/index";
+import {
+  H3,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 // STYLED COMPONENT
-import { ContentWrapper } from "./styles";
+import { ContentWrapper } from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/store-card/styles";
 import {
   ProductWarehouseInventoryAvailability,
   StoreHours,
 } from "@msdyn365-commerce/retail-proxy";
-import {
-  buildStoreHours,
-  IHoursDisplayInfo,
-  IStoreSelectorLocationLineItemResources,
-} from "@/lib/store-hours-helper";
+import { buildStoreHours, IHoursDisplayInfo } from "@/lib/store-hours-helper";
 import { Box } from "@mui/system";
-import { useTranslations } from "next-intl";
+import { convertSecondsToTime } from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/store-card/utils/convertSecondsToTime";
+import { getDaysResources } from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/store-card/utils/getDaysResources";
 
 type Props = {
   name: string;
@@ -33,37 +36,8 @@ type Props = {
 export default function ShopCard(props: Props) {
   const { name, address, actionArea, openFrom, openTo, storeHours } =
     props || {};
-  const daysTrans = useTranslations("StoreHours");
 
-  const convertNumberToTime = (numberinSeconds: number) => {
-    const date = new Date(numberinSeconds * 1000);
-    const hours = date.getUTCHours();
-    const minutes = date.getUTCMinutes();
-    const ampm = hours >= 12 ? "PM" : "AM";
-    const formattedHours = hours % 12 || 12; // Convert to 12-hour format
-    const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
-    return `${formattedHours}:${formattedMinutes} ${ampm}`;
-  };
-
-  const resources: IStoreSelectorLocationLineItemResources = {
-    days: {
-      monday: daysTrans("mon"),
-      tuesday: daysTrans("tue"),
-      wednesday: daysTrans("wed"),
-      thursday: daysTrans("thu"),
-      friday: daysTrans("fri"),
-      saturday: daysTrans("sat"),
-      sunday: daysTrans("sun"),
-      mondayFull: daysTrans("monday"),
-      tuesdayFull: daysTrans("tuesday"),
-      wednesdayFull: daysTrans("wednesday"),
-      thursdayFull: daysTrans("thursday"),
-      fridayFull: daysTrans("friday"),
-      saturdayFull: daysTrans("saturday"),
-      sundayFull: daysTrans("sunday"),
-    },
-    closedText: daysTrans("closed"),
-  };
+  const resources = getDaysResources();
 
   const renderStoreHours = () => {
     if (storeHours?.RegularStoreHours) {
@@ -72,12 +46,9 @@ export default function ShopCard(props: Props) {
         resources,
       );
       return (
-        <div className="ms-store-select__store-hours-details-group">
+        <Box>
           {storeHoursList.map((displayTime) => (
-            <div
-              className="ms-store-select__store-hours-details"
-              key={JSON.stringify(displayTime)}
-            >
+            <Box key={JSON.stringify(displayTime)}>
               {displayTime.endDayShort ? (
                 <Box>
                   <Span>
@@ -102,14 +73,14 @@ export default function ShopCard(props: Props) {
                 </Box>
               )}
               <Box>{displayTime.timeRange}</Box>
-            </div>
+            </Box>
           ))}
-        </div>
+        </Box>
       );
     }
     return (
       <Span color="white">
-        {convertNumberToTime(openFrom)} - {convertNumberToTime(openTo)}
+        {convertSecondsToTime(openFrom)} - {convertSecondsToTime(openTo)}
       </Span>
     );
   };
@@ -121,8 +92,6 @@ export default function ShopCard(props: Props) {
           {name}
         </H3>
 
-        {/* <Rating value={rating || 0} color="warn" size="small" readOnly className="mb-1" /> */}
-
         <FlexBox mb={1} gap={1}>
           <Place fontSize="small" sx={{ fontSize: 17, mt: "3px" }} />
           <Span color="white">{address}</Span>

package/src/pages-v2/product-details/bopis/store-card/utils/convertSecondsToTime.ts

@@ -0,0 +1,8 @@
+export const convertSecondsToTime = (numberinSeconds: number) => {
+  return new Date(numberinSeconds * 1000).toLocaleTimeString("en-US", {
+    hour12: true,
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: "UTC",
+  });
+};

package/src/pages-v2/product-details/bopis/store-card/utils/getDaysResources.ts

@@ -0,0 +1,25 @@
+import { IStoreSelectorLocationLineItemResources } from "@/lib/store-hours-helper";
+import { useTranslations } from "next-intl";
+
+export const getDaysResources = (): IStoreSelectorLocationLineItemResources => {
+  const daysTrans = useTranslations("StoreHours");
+  return {
+    days: {
+      monday: daysTrans("mon"),
+      tuesday: daysTrans("tue"),
+      wednesday: daysTrans("wed"),
+      thursday: daysTrans("thu"),
+      friday: daysTrans("fri"),
+      saturday: daysTrans("sat"),
+      sunday: daysTrans("sun"),
+      mondayFull: daysTrans("monday"),
+      tuesdayFull: daysTrans("tuesday"),
+      wednesdayFull: daysTrans("wednesday"),
+      thursdayFull: daysTrans("thursday"),
+      fridayFull: daysTrans("friday"),
+      saturdayFull: daysTrans("saturday"),
+      sundayFull: daysTrans("sunday"),
+    },
+    closedText: daysTrans("closed"),
+  };
+};

package/src/pages-v2/product-details/frequently-bought.tsx

@@ -15,7 +15,7 @@ import {
   FlexRowCenter,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 // LOCAL CUSTOM COMPONENT
-import FrequentlyProductCard from "./frequently-product-card";
+import FrequentlyProductCard from "@evenicanpm/storefront-core/src/pages-v2/product-details/frequently-product-card";
 // CUSTOM UTILS LIBRARY FUNCTION
 import { currency } from "@/lib/lib";
 // CUSTOM DATA MODEL

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

@@ -9,7 +9,7 @@ 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";
+import CheckboxLabel from "@evenicanpm/storefront-core/src/pages-v2/product-details/checkbox-label";
 // GLOBAL CUSTOM COMPONENTS
 import {
   FlexBetween,
@@ -27,7 +27,7 @@ import {
   ProductFilterKeys,
   ProductFilterValues,
   ProductFilters,
-} from "./types";
+} from "@evenicanpm/storefront-core/src/pages-v2/product-details/types";
 import { Slider } from "@mui/material";
 
 // FILTER OPTIONS

package/src/pages-v2/product-details/product-intro/compound/context.ts

@@ -0,0 +1,49 @@
+import { createContext } from "react";
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import { SelectedDimensions } from "@evenicanpm/storefront-core/src/hooks/use-variants";
+import { ProductWarehouseInventoryInformation } from "@msdyn365-commerce/retail-proxy";
+
+export interface ProductIntroContext {
+  /** The current master product of the PDP */
+  masterProduct: ProductDetails;
+  /** The currently selected variant that is deduced from dimensions */
+  selectedVariant: ProductDetails;
+  /** Is the data for variant loading? */
+  variantPending: boolean;
+  /** State that tracks which dimensions are currently selected */
+  selectDimensions: SelectedDimensions;
+  /** Handler for when dimensions are selected **/
+  handleChangeVariant: () => void;
+  /** Calculated value are all dimensions selected? **/
+  allDimensionsSelected: boolean;
+}
+
+export interface ProductImagesContext {
+  /** Currently selected index from images array of product details */
+  selectedImageIndex?: number;
+  /** The default image to show on PDP */
+  primaryImageUrl: string;
+  /* Handler when thumbnails are clicked */
+  handleImageClick: (ind: number) => () => void;
+  /* The array of images to display, comes from */
+  images: string[];
+  /* Name */
+  name: string | undefined;
+}
+
+export interface ProductInfoContext {
+  /** Currently selected index from images array of product details */
+  isOOS: boolean;
+  /** **/
+  inventoryPending: boolean;
+  /** */
+  shippingInventoryData: ProductWarehouseInventoryInformation;
+  /** */
+  showDimensionError: boolean;
+  /** */
+  setShowDimensionError: () => void;
+}
+
+export const ProductImagesContext = createContext(null);
+export const ProductIntroContext = createContext(null);
+export const ProductInfoContext = createContext(null);