@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -56,37 +56,40 @@ export default function ProductIntro({ product, cart }: Props) {
 
   // HOOKS
   const {
-    productVariant,
-    selectVariantId,
+    selectedVariant,
     selectDimensions,
     handleChangeVariant,
     allDimensionsSelected,
-  } = useVariants({ product });
+  } = useVariants(product);
 
-  const { handleCartAmountChange, handleAddToCart, loading } = useCart({
-    cart,
-    selectVariantId,
-    recordId: RecordId,
-  });
+  const { handleCartAmountChange, handleAddToCart, loading } = useCart(
+    selectedVariant.RecordId,
+    RecordId,
+  );
 
   const { formatCurrency } = useCurrencyFormatter();
 
   const searchCriteria = useMemo<InventorySearchCriteriaInput>(
     () => ({
-      allDimensionsSelected: allDimensionsSelected(selectDimensions),
+      allDimensionsSelected: allDimensionsSelected,
       searchCriteria: {
         defaultWarehouseOnly: true,
-        productIds: [selectVariantId || RecordId],
+        productIds: [selectedVariant?.RecordId || RecordId],
       },
     }),
-    [allDimensionsSelected, selectDimensions, selectVariantId, RecordId],
+    [
+      allDimensionsSelected,
+      selectDimensions,
+      selectedVariant?.RecordId,
+      RecordId,
+    ],
   );
 
   const { data: shippingInventoryData, isLoading: inventoryLoading } =
     getProductAvailability.useData(searchCriteria);
   // HELPERS
   const currentCartLine = cart?.CartLines?.find((item) => {
-    return item?.ProductId === (Number(selectVariantId) || RecordId);
+    return item?.ProductId === (Number(selectedVariant?.RecordId) || RecordId);
   });
 
   const getInventoryLabel = (): string | null => {
@@ -102,7 +105,7 @@ export default function ProductIntro({ product, cart }: Props) {
 
   const shouldDisableAddToCart = () => {
     //TODO: Incorporate global inventory enabled flag.
-    if (!allDimensionsSelected(selectDimensions)) {
+    if (!allDimensionsSelected) {
       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
@@ -122,8 +125,8 @@ export default function ProductIntro({ product, cart }: Props) {
   };
 
   const images =
-    Array.isArray(productVariant?.Images) && productVariant.Images.length > 0
-      ? productVariant.Images
+    Array.isArray(selectedVariant?.Images) && selectedVariant.Images.length > 0
+      ? selectedVariant.Images
       : Array.isArray(Images) && Images.length > 0
         ? Images
         : [];
@@ -138,7 +141,7 @@ export default function ProductIntro({ product, cart }: Props) {
   };
 
   const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
-    if (!allDimensionsSelected(selectDimensions)) {
+    if (!allDimensionsSelected) {
       setShowDimensionError(true);
       return;
     }
@@ -147,7 +150,7 @@ export default function ProductIntro({ product, cart }: Props) {
   };
 
   const shouldOpenHelperModal = () => {
-    if (!allDimensionsSelected(selectDimensions)) {
+    if (!allDimensionsSelected) {
       setShowDimensionError(true);
       return false;
     }
@@ -162,9 +165,9 @@ export default function ProductIntro({ product, cart }: Props) {
           name={Name}
           selectedImageIndex={selectedImageIndex}
           primaryImageUrl={
-            Array.isArray(productVariant?.Images) &&
-            productVariant.Images.length > 0
-              ? productVariant.Images[0]
+            Array.isArray(selectedVariant?.Images) &&
+            selectedVariant.Images.length > 0
+              ? selectedVariant.Images[0]
               : Array.isArray(Images) && Images.length > 0
                 ? Images[0]
                 : ""
@@ -180,7 +183,7 @@ export default function ProductIntro({ product, cart }: Props) {
 
           {/* PRODUCT BRAND */}
           <FlexBox alignItems="center" mb={1}>
-            <H6>SKU: {productVariant?.ItemId || ItemId}</H6>
+            <H6>SKU: {selectedVariant?.ItemId || ItemId}</H6>
           </FlexBox>
 
           {/* PRODUCT RATING */}
@@ -234,10 +237,10 @@ export default function ProductIntro({ product, cart }: Props) {
                 isOOS={shouldDisableAddToCart()}
               />
               <FindInStoreButton
-                productId={selectVariantId || RecordId}
+                productId={selectedVariant?.RecordId || RecordId}
                 canOpenModal={shouldOpenHelperModal}
                 handleAddToCart={handleAddToCart}
-                allDimensionsSelected={allDimensionsSelected(selectDimensions)}
+                allDimensionsSelected={allDimensionsSelected}
               />
               <AddToWishlistButton
                 path="Account.Wishlists.btnAddToWishlist"

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

@@ -49,11 +49,12 @@ 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 +62,43 @@ 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),
+      allDimensionsSelected: allDimensionsSelected,
       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/src/pages-v2/product-details/bopis/find-in-store-button.tsx

@@ -6,9 +6,9 @@ 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

@@ -10,7 +10,7 @@ import {
 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 ShopCard from "./store-card";
 import {
   DeliveryOption,
   ProductWarehouseInventoryAvailability,
@@ -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/{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 {
   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 "./utils/convertSecondsToTime";
+import { getDaysResources } from "./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/product-intro/compound/context.ts

@@ -0,0 +1,52 @@
+import { createContext } from "react";
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import { SelectedDimensions } from "@evenicanpm/storefront-core/src/hooks/use-variants";
+import {
+  ProductWarehouseInventoryAvailability,
+  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);