@evenicanpm/storefront-core 1.0.5 → 1.1.0

package/src/pages-v2/checkout/checkout-alt-form/steps/address/delivery-address.tsx

@@ -29,7 +29,7 @@ import AddressCard from "@evenicanpm/storefront-core/src/pages-v2/checkout/check
 import { CheckoutStepComponentProps } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
 import { AddressDropDownHandler } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/steps/address/styles";
 
-type Translator = (key: string, values?: Record<string, unknown>) => string;
+type Translator = ReturnType<typeof useTranslations>;
 
 type DeliveryAddressCompound = React.FC<DeliveryAddressProps> & {
   Modal: React.FC;
@@ -261,10 +261,14 @@ const DeliveryAddress: DeliveryAddressCompound = ({
     setModalOpen(true);
   };
   const openEdit = (addr: Address) => {
-    setEditAddress(addr);
+    setEditAddress({ ...addr });
     setModalOpen(true);
   };
-  const closeModal = () => setModalOpen(false);
+
+  const closeModal = () => {
+    setModalOpen(false);
+    setEditAddress(undefined);
+  };
 
   // context value
   const ctx: DeliveryAddressContextValue = {
@@ -322,6 +326,7 @@ DeliveryAddress.Modal = () => {
 
   return (
     <NewAddressForm
+      key={editAddress?.Id ?? "new"}
       countries={countries ?? []}
       open={modalOpen}
       isGuest={isGuest}
@@ -336,7 +341,8 @@ DeliveryAddress.Modal = () => {
 DeliveryAddress.Dropdown = () => {
   const ctx = useContext(DeliveryAddressCtx);
   if (!ctx) return null;
-  const { showDropDown, title, addressList, pickAddress } = ctx;
+  const { showDropDown, title, addressList, pickAddress, handleSaveAddress } =
+    ctx;
 
   if (!showDropDown) return null;
 
@@ -355,9 +361,10 @@ DeliveryAddress.Dropdown = () => {
           addressList.map((value, index) => (
             <MenuItem
               key={index}
-              onClick={() => {
+              onClick={async () => {
                 pickAddress(value.RecordId as number);
                 onClose();
+                await handleSaveAddress(value);
               }}
             >
               {`${value.Name}, ${value.FullAddress}`}

package/src/pages-v2/checkout/checkout-alt-form/steps/address/new-address-form.tsx

@@ -73,10 +73,12 @@ const NewAddressForm = ({
   const [selectedCountry, setSelectedCountry] =
     React.useState<CountryRegionInfo | null>(defaultCountry);
 
-  const { data: states } = getStates.useData({
+  const { data } = getStates.useData({
     countryId: selectedCountry?.CountryRegionId,
   });
 
+  const states = data ?? [];
+
   const validationSchema = z.object({
     name: z
       .string()
@@ -145,6 +147,20 @@ const NewAddressForm = ({
     }
   }, [address, setValue, reset]);
 
+  // sync selectedCountry whenever address changes, not only on initial mount, so that state field populates.
+  React.useEffect(() => {
+    if (address) {
+      const sel =
+        countries.find(
+          (c) => c.CountryRegionId === address.ThreeLetterISORegionName,
+        ) ?? null;
+      setSelectedCountry(sel);
+      if (sel) {
+        setValue("country", sel.CountryRegionId ?? "");
+      }
+    }
+  }, [address, countries, setValue]);
+
   const onFormSubmit = (data: AddressFormInput) => {
     const tempAddress: Address = {
       Name: data.name,
@@ -165,7 +181,7 @@ const NewAddressForm = ({
     form,
     countries,
     states: states
-      ? states.map((s) => ({
+      ? states?.map((s) => ({
           StateName: s.StateName ?? "",
           StateId: s.StateId ?? "",
         }))
@@ -216,7 +232,13 @@ const NewAddressForm = ({
 };
 
 // Generic text field
-NewAddressForm.Field = ({ name, label }) => {
+NewAddressForm.Field = ({
+  name,
+  label,
+}: {
+  name: keyof AddressFormInput;
+  label: string;
+}) => {
   const ctx = React.useContext(FormContext);
   if (!ctx) return null;
 
@@ -260,8 +282,8 @@ NewAddressForm.CountrySelect = () => {
               }}
             >
               <MenuItem value="">Select country</MenuItem>
-              {countries.map((c) => (
-                <MenuItem key={c.CountryRegionId} value={c.CountryRegionId}>
+              {countries.map((c, index) => (
+                <MenuItem key={`${c.CountryRegionId}-${index}`} value={c.CountryRegionId}>
                   {c.ShortName}
                 </MenuItem>
               ))}

package/src/pages-v2/checkout/checkout-alt-form/steps/address/styles.ts

@@ -1,7 +1,8 @@
 import Box from "@mui/material/Box";
 import styled from "@mui/material/styles/styled";
+import { Theme } from "@mui/material/styles";
 
-const dropDownHandlerStyles = (theme) => ({
+const dropDownHandlerStyles = (theme: Theme) => ({
   width: 260,
   minWidth: 260,
   height: "100%",

package/src/pages-v2/checkout/checkout-alt-form/steps/customer-info/customer-information.tsx

@@ -9,11 +9,20 @@ import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typogra
 import * as yup from "yup";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
+import type { SubmitHandler, UseFormReturn } from "react-hook-form";
+import getUser from "@/api-manager/services/user/queries/get-user";
+
+const vSchema = yup.object({
+  email: yup.string().email().required(),
+});
+
+type CustomerFormValues = yup.InferType<typeof vSchema>;
+
 interface CustomerCtx extends CheckoutStepComponentProps {
   email: string | null;
   cartId: string;
-  form: ReturnType<typeof useForm<{ email?: string }>>;
-  handleSave: (formData: { email: string }) => void;
+  form: UseFormReturn<CustomerFormValues, undefined, CustomerFormValues>;
+  handleSave: SubmitHandler<CustomerFormValues>;
 }
 const CustomerContext = createContext<CustomerCtx | null>(null);
 
@@ -22,13 +31,24 @@ const CustomerInformation = (
 ) => {
   const {
     stepViewState,
-    cart: { Id: cartId, ReceiptEmail: email },
+    cart: { Id: cartId, ReceiptEmail: cartEmail },
     stepSubmissionState,
     setStepSubmissionState,
     handleStepCompletion,
     children,
   } = props;
 
+  const { data: user, isLoading: userLoading } = getUser.useData();
+  const isGuest = !userLoading && !user?.RecordId;
+
+  const resolveEmail = () => {
+    if (isGuest) return cartEmail;
+    // In case of authenticated user, pick user email when no email in cart
+    return cartEmail || user?.Email || "";
+  };
+
+  const email = resolveEmail();
+
   const { mutateAsync: updateCart } = useUpdateCart();
   const t = useTranslations("Checkout.CustomerInformation");
 
@@ -36,7 +56,7 @@ const CustomerInformation = (
     email: yup.string().email(t("emailInvalid")).required(t("emailRequired")),
   });
 
-  const form = useForm({
+  const form = useForm<CustomerFormValues, undefined, CustomerFormValues>({
     defaultValues: { email: email || "" },
     resolver: yupResolver(validationSchema),
   });
@@ -47,8 +67,8 @@ const CustomerInformation = (
     setValue("email", email || "");
   }, [email, setValue]);
 
-  const handleSave = React.useCallback(
-    (formData: { email: string }) => {
+  const handleSave: SubmitHandler<CustomerFormValues> = React.useCallback(
+    (formData) => {
       updateCart({
         cart: { ReceiptEmail: formData.email, Id: cartId },
       })
@@ -79,7 +99,7 @@ const CustomerInformation = (
 
   const ctx: CustomerCtx = {
     ...props,
-    email,
+    email: email ?? null,
     cartId,
     form,
     handleSave,

package/src/pages-v2/checkout/checkout-alt-form/steps/shipping/delivery-options.tsx

@@ -115,7 +115,14 @@ const DeliveryOptions: DeliveryOptionsCompound = (props) => {
   React.useEffect(() => {
     if (currentShippingAddress) {
       const { Id, CartLines } = cart;
-      const cartLineIds = CartLines.map((cl) => cl.LineId).filter(Boolean);
+      // Filter out undefined values and assert string[]
+      const cartLineIds: string[] = CartLines.map((cl) => cl.LineId).filter(
+        (id): id is string => Boolean(id),
+      );
+      if (!Id || !cartLineIds?.length) {
+        setDeliveryOptions([]);
+        return;
+      }
       getDeliveryOptions({
         cartId: Id,
         cartLineIds,

package/src/pages-v2/confirmation/address.tsx

@@ -33,7 +33,11 @@ OrderAddress.Heading = ({ children }: { children?: ReactNode }) => {
   );
 };
 
-OrderAddress.Field = ({ property }) => {
+OrderAddress.Field = ({
+  property,
+}: {
+  property: Exclude<keyof Address, "ExtensionProperties">;
+}) => {
   const ctx = useContext(AddressContext);
   if (!ctx) return null;
   const address = ctx;

package/src/pages-v2/product-details/available-shops.tsx

@@ -6,7 +6,10 @@ import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid2";
 import Avatar from "@mui/material/Avatar";
 // GLOBAL CUSTOM COMPONENTS
-import { H3, H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import {
+  H3,
+  H4,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import FlexRowCenter from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-row-center";
 
 export default function AvailableShops() {

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

@@ -5,7 +5,7 @@ import { AddToCartBopisInput } from "@evenicanpm/storefront-core/src/hooks/use-c
 import { useTranslations } from "next-intl";
 
 type Props = {
-  productId: number;
+  productId?: number;
   allDimensionsSelected: boolean;
   handleAddToCart: (bopisInput: AddToCartBopisInput) => void;
   setDimensionsError: (state: boolean) => void;

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

@@ -22,7 +22,6 @@ import { geolocate } from "@/lib/map-helper";
 import getStores from "@/api-manager/services/organization/queries/get-stores";
 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";
 import { useTranslations } from "next-intl";
 import getChannelConfiguration from "@/api-manager/services/organization/queries/get-channel-configuration";
@@ -31,7 +30,7 @@ type Props = {
   open: boolean;
   handleClose: () => void;
   handleAddToCart: (bopisInput: AddToCartBopisInput) => void;
-  productId: number;
+  productId?: number;
   allDimensionsSelected: boolean;
 };
 
@@ -87,12 +86,11 @@ const FindInStoreModal = ({
     searchArea,
   });
 
-  const inventoryInput: InventorySearchCriteriaInput = React.useMemo(
+  const inventoryInput = React.useMemo(
     () => ({
-      allDimensionsSelected,
       searchCriteria: {
         defaultWarehouseOnly: false,
-        productIds: [productId],
+        productIds: [productId || 0],
         searchArea,
       },
     }),

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

@@ -1,26 +1,31 @@
-import { createContext } from "react";
+import { createContext, Dispatch, SetStateAction, useContext } 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";
+import {
+  ProductWarehouseInventoryInformation,
+  ProductDimensionValueInventoryAvailability,
+} 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;
+  selectedVariant: ProductDetails | undefined;
   /** 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;
+  handleChangeVariant: (
+    dimensionValue: ProductDimensionValueInventoryAvailability,
+  ) => void;
   /** Calculated value are all dimensions selected? **/
   allDimensionsSelected: boolean;
 }
 
 export interface ProductImagesContext {
   /** Currently selected index from images array of product details */
-  selectedImageIndex?: number;
+  selectedImageIndex: number;
   /** The default image to show on PDP */
   primaryImageUrl: string;
   /* Handler when thumbnails are clicked */
@@ -32,18 +37,70 @@ export interface ProductImagesContext {
 }
 
 export interface ProductInfoContext {
-  /** Currently selected index from images array of product details */
-  isOOS: boolean;
+  /** Does the product have variants? If not we do not verify dimensions before adding to cart etc. **/
+  hasVariants: boolean;
   /** **/
   inventoryPending: boolean;
   /** */
-  shippingInventoryData: ProductWarehouseInventoryInformation;
+  shippingInventoryData: ProductWarehouseInventoryInformation | undefined;
   /** */
   showDimensionError: boolean;
   /** */
-  setShowDimensionError: () => void;
+  setShowDimensionError: Dispatch<SetStateAction<boolean>>;
 }
 
-export const ProductImagesContext = createContext(null);
-export const ProductIntroContext = createContext(null);
-export const ProductInfoContext = createContext(null);
+export const ProductImagesContext = createContext<ProductImagesContext | null>(
+  null,
+);
+export const ProductIntroContext = createContext<ProductIntroContext | null>(
+  null,
+);
+export const ProductInfoContext = createContext<ProductInfoContext | null>(
+  null,
+);
+
+/**
+ * Hook to safely access ProductImagesContext
+ * @throws {Error} When used outside of ProductImagesProvider
+ */
+export const useProductImages = () => {
+  const context = useContext(ProductImagesContext);
+
+  if (context === null) {
+    throw new Error(
+      "useProductImages must be used within a ProductImagesProvider",
+    );
+  }
+
+  return context;
+};
+
+/**
+ * Hook to safely access ProductIntroContext
+ * @throws {Error} When used outside of ProductIntroProvider
+ */
+export const useProductIntro = () => {
+  const context = useContext(ProductIntroContext);
+
+  if (context === null) {
+    throw new Error(
+      "useProductIntro must be used within a ProductIntroProvider",
+    );
+  }
+
+  return context;
+};
+
+/**
+ * Hook to safely access ProductInfoContext
+ * @throws {Error} When used outside of ProductInfoProvider
+ */
+export const useProductInfo = () => {
+  const context = useContext(ProductInfoContext);
+
+  if (context === null) {
+    throw new Error("useProductInfo must be used within a ProductInfoProvider");
+  }
+
+  return context;
+};

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

@@ -29,7 +29,8 @@ import useCart, {
 import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
 import FindInStoreButton from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/find-in-store-button";
 import {
-  ProductIntroContext,
+  useProductInfo,
+  useProductIntro,
   ProductInfoContext,
 } from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/context";
 
@@ -48,19 +49,27 @@ export interface Props {
  */
 const ProductInfo = ({ children }: Props) => {
   const [showDimensionError, setShowDimensionError] = useState(false);
-  const { selectedVariant } = useContext(ProductIntroContext);
+  const { masterProduct, selectedVariant } = useProductIntro();
 
-  const shippingInventorySearchCriteria = selectedVariant
-    ? buildInventorySearchCriteria(selectedVariant?.RecordId)
-    : null;
+  const hasVariants = masterProduct?.Dimensions?.length !== 0;
+
+  const id = hasVariants ? selectedVariant?.RecordId : masterProduct?.RecordId;
+
+  const shippingInventorySearchCriteria =
+    !hasVariants || selectedVariant
+      ? buildInventorySearchCriteria(id as number)
+      : null;
 
   // Query disabled if the input is null
   const { data: shippingInventoryData, isLoading: inventoryPending } =
-    getProductAvailability.useData(shippingInventorySearchCriteria);
+    getProductAvailability.useData(shippingInventorySearchCriteria, {
+      enabled: !!shippingInventorySearchCriteria,
+    });
 
   return (
     <ProductInfoContext.Provider
       value={{
+        hasVariants,
         inventoryPending,
         shippingInventoryData,
         showDimensionError,
@@ -78,7 +87,12 @@ const ProductInfo = ({ children }: Props) => {
  * @category Sub-Component
  */
 ProductInfo.Name = () => {
-  const { masterProduct } = useContext(ProductIntroContext);
+  const IntroCtx = useProductIntro();
+  if (!IntroCtx)
+    throw new Error(
+      "ProductInfo.Inventory must be wrapped in ProductInfoContext and a ProductIntroContext",
+    );
+  const { masterProduct } = IntroCtx;
   return <H1 mb={1}>{masterProduct.Name}</H1>;
 };
 
@@ -86,7 +100,12 @@ ProductInfo.Name = () => {
  * @category Sub-Component
  */
 ProductInfo.Sku = () => {
-  const { masterProduct, selectedVariant } = useContext(ProductIntroContext);
+  const IntroCtx = useProductIntro();
+  if (!IntroCtx)
+    throw new Error(
+      "ProductInfo.Inventory must be wrapped in ProductInfoContext and a ProductIntroContext",
+    );
+  const { masterProduct, selectedVariant } = IntroCtx;
   return (
     <FlexBox alignItems="center" mb={1}>
       <H6>SKU: {selectedVariant?.ItemId || masterProduct.ItemId}</H6>
@@ -111,9 +130,19 @@ ProductInfo.Sku = () => {
  * @category Sub-Component
  */
 ProductInfo.Dimensions = () => {
-  const { masterProduct, selectDimensions, handleChangeVariant } =
-    useContext(ProductIntroContext);
-  const { showDimensionError } = useContext(ProductInfoContext);
+  const InfoCtx = useContext(ProductInfoContext);
+  const IntroCtx = useProductIntro();
+  if (!InfoCtx || !IntroCtx)
+    throw new Error(
+      "ProductInfo.Inventory must be wrapped in ProductInfoContext and a ProductIntroContext",
+    );
+  if (!IntroCtx)
+    throw new Error(
+      "ProductInfo.Inventory must be wrapped in ProductInfoContext and a ProductIntroContext",
+    );
+
+  const { masterProduct, selectDimensions, handleChangeVariant } = IntroCtx;
+  const { showDimensionError } = InfoCtx;
   return (
     <ProductDimensions
       dimensionGroups={masterProduct.DimensionValues}
@@ -125,7 +154,12 @@ ProductInfo.Dimensions = () => {
 };
 
 ProductInfo.Price = () => {
-  const { masterProduct, selectedVariant } = useContext(ProductIntroContext);
+  const IntroCtx = useProductIntro();
+  if (!IntroCtx)
+    throw new Error(
+      "ProductInfo.Inventory must be wrapped in ProductInfoContext and a ProductIntroContext",
+    );
+  const { masterProduct, selectedVariant } = IntroCtx;
   const { formatCurrency } = useCurrencyFormatter();
 
   const { data: productPrices, isPending: pricesPending } =
@@ -139,7 +173,7 @@ ProductInfo.Price = () => {
         {pricesPending || !productPrices ? (
           <CircularProgress size={20} />
         ) : (
-          formatCurrency(productPrices?.[0]?.CustomerContextualPrice)
+          formatCurrency(productPrices?.[0]?.CustomerContextualPrice || 0)
         )}
       </H2>
       <Box color="inherit">{}</Box>
@@ -151,11 +185,14 @@ ProductInfo.Price = () => {
  * @category Sub-Component
  */
 ProductInfo.Inventory = () => {
-  const { variantPending, allDimensionsSelected } =
-    useContext(ProductIntroContext);
-  const { shippingInventoryData, inventoryPending } =
-    useContext(ProductInfoContext);
-
+  const InfoCtx = useContext(ProductInfoContext);
+  const IntroCtx = useProductIntro();
+  if (!InfoCtx || !IntroCtx)
+    throw new Error(
+      "ProductInfo.Inventory must be wrapped in ProductInfoContext and a ProductIntroContext",
+    );
+  const { variantPending, allDimensionsSelected } = IntroCtx;
+  const { shippingInventoryData, inventoryPending } = InfoCtx;
   if (!allDimensionsSelected)
     return (
       <FlexBox alignItems="center" gap={1}>
@@ -186,14 +223,21 @@ ProductInfo.Inventory = () => {
 };
 
 /**
+ * These are grouped together because they have similar functionality and callbacks
+ * addToCart Etc
  * @category Sub-Component
  */
 ProductInfo.Buttons = () => {
   const { masterProduct, selectedVariant, allDimensionsSelected } =
-    useContext(ProductIntroContext);
-  const { setShowDimensionError, shippingInventoryData } =
-    useContext(ProductInfoContext);
-  const { handleAddToCart } = useCart(selectedVariant?.RecordId);
+    useProductIntro();
+  const { setShowDimensionError, shippingInventoryData, hasVariants } =
+    useProductInfo();
+
+  const productId = hasVariants
+    ? selectedVariant?.RecordId
+    : masterProduct?.RecordId;
+
+  const { handleAddToCart } = useCart(productId);
 
   /**
    * A wrapper around the add to cart handler that
@@ -208,24 +252,26 @@ ProductInfo.Buttons = () => {
     handleAddToCart(bopisInput);
   };
 
-  const isOOS = allDimensionsSelected && checkProductOOS(shippingInventoryData);
+  const isOOS = hasVariants
+    ? allDimensionsSelected && checkProductOOS(shippingInventoryData)
+    : checkProductOOS(shippingInventoryData);
 
   return (
     <FlexBox gap={2}>
       <QuantityButtons
         customAddToCart={onAddToCart}
         isOOS={isOOS}
-        productId={selectedVariant?.RecordId}
+        productId={productId}
       />
       <FindInStoreButton
         setDimensionsError={setShowDimensionError}
-        productId={selectedVariant?.RecordId || masterProduct.RecordId}
-        handleAddToCart={() => handleAddToCart(selectedVariant?.RecordId)}
+        productId={productId}
+        handleAddToCart={handleAddToCart}
         allDimensionsSelected={allDimensionsSelected}
       />
       <AddToWishlistButton
         path="Account.Wishlists.btnAddToWishlist"
-        product={masterProduct}
+        productId={masterProduct?.RecordId}
       />
     </FlexBox>
   );

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

@@ -23,7 +23,10 @@ type Props = {
 export default function ProductImages({ children }: Props) {
   const [selectedImageIndex, setSelectedImageIndex] = useState<number>(0);
 
-  const { selectedVariant, masterProduct } = useContext(ProductIntroContext);
+  const ctx = useContext(ProductIntroContext);
+  if (!ctx)
+    throw new Error("ProductImages must be used inside a ProductIntroContext");
+  const { selectedVariant, masterProduct } = ctx;
   const { Name } = masterProduct;
 
   /**
@@ -38,7 +41,7 @@ export default function ProductImages({ children }: Props) {
         : [];
 
   const primaryImageUrl =
-    selectedVariant?.primaryImageUrl || masterProduct?.primaryImageUrl;
+    selectedVariant?.PrimaryImageUrl || masterProduct?.PrimaryImageUrl || "";
 
   // HANDLE SELECT IMAGE
   const handleImageClick = (ind: number) => () => {
@@ -67,8 +70,13 @@ export default function ProductImages({ children }: Props) {
  * @category Sub-Component
  */
 ProductImages.Thumbnails = () => {
-  const { images, handleImageClick, selectedImageIndex } =
-    useContext(ProductImagesContext);
+  const ctx = useContext(ProductImagesContext);
+  if (!ctx)
+    throw new Error(
+      "ProductImages.Main must be used inside a product images context",
+    );
+
+  const { images, handleImageClick, selectedImageIndex } = ctx;
 
   return (
     <>
@@ -104,8 +112,13 @@ ProductImages.Thumbnails = () => {
  * @category Sub-Component
  */
 ProductImages.Main = () => {
-  const { name, images, primaryImageUrl, selectedImageIndex } =
-    useContext(ProductImagesContext);
+  const ctx = useContext(ProductImagesContext);
+  if (!ctx)
+    throw new Error(
+      "ProductImages.Main must be used inside a product images context",
+    );
+  const { name, images, primaryImageUrl, selectedImageIndex } = ctx;
+
   return (
     <FlexBox borderRadius={3} overflow="hidden" justifyContent="center" mb={6}>
       <ImageWithFallback

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

@@ -1,7 +1,7 @@
 import { ProductWarehouseInventoryInformation } from "@msdyn365-commerce/retail-proxy";
 
 export const getInventoryLabel = (
-  shippingInventoryData: ProductWarehouseInventoryInformation,
+  shippingInventoryData?: ProductWarehouseInventoryInformation,
 ): string | null => {
   const aggregate =
     shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
@@ -14,7 +14,7 @@ export const getInventoryLabel = (
 };
 
 export const checkProductOOS = (
-  shippingInventoryData: ProductWarehouseInventoryInformation,
+  shippingInventoryData?: ProductWarehouseInventoryInformation,
 ) => {
   //TODO: Incorporate global inventory enabled flag.
   const OOSCode = "OOS"; // Always means out of stock