fix: align storefront availability with inventory

Author: KaiUweCZE

apps/herbatika/src/components/herbatika-product-card.tsx

@@ -11,6 +11,7 @@ import {
 import { resolveDescription } from "@/components/product-card/product-card.description";
 import { resolveFlags } from "@/components/product-card/product-card.flags";
 import { resolveDiscountLabel } from "@/components/product-card/product-card.pricing";
+import { resolveVariantInventoryState } from "@/lib/storefront/product-availability";
 
 export { getProductPriceLabel } from "@/components/product-card/product-card.pricing";
 
@@ -27,9 +28,11 @@ export function HerbatikaProductCard(props: HerbatikaProductCardProps) {
   const { descriptionOverride, isAdding, onAddToCart } = props;
   const { handleImageError, imageSrc, price, productHref, title } =
     useHerbatikaProductCardState(product);
-  const defaultVariantId = product.variants?.[0]?.id;
+  const defaultVariant = product.variants?.[0] ?? null;
+  const defaultVariantInventory = resolveVariantInventoryState(defaultVariant);
   const canAddToCart =
-    Boolean(defaultVariantId) && typeof price.currentAmount === "number";
+    defaultVariantInventory.isPurchasable &&
+    typeof price.currentAmount === "number";
   const discountLabel = resolveDiscountLabel(price);
   const flags = resolveFlags(product, Boolean(discountLabel));
   const description =

apps/herbatika/src/components/product-detail/sections/product-detail-hero.tsx

@@ -23,6 +23,7 @@ type ProductDetailHeroProps = {
   galleryItems: GalleryItem[];
   mediaFacts: ProductMediaFact[];
   isAdding: boolean;
+  maxQuantity: number;
   offerState: ProductOfferState;
   onAddToCart: () => void;
   onQuantityChange: (quantity: number) => void;
@@ -47,6 +48,7 @@ export function ProductDetailHero({
   galleryItems,
   mediaFacts,
   isAdding,
+  maxQuantity,
   offerState,
   onAddToCart,
   onQuantityChange,
@@ -74,6 +76,7 @@ export function ProductDetailHero({
           currentAmountLabel={currentAmountLabel}
           displayOriginalLabel={displayOriginalLabel}
           isAdding={isAdding}
+          maxQuantity={maxQuantity}
           offerState={offerState}
           onAddToCart={onAddToCart}
           onQuantityChange={onQuantityChange}

apps/herbatika/src/components/product-detail/sections/product-detail-purchase-panel.tsx

@@ -56,6 +56,7 @@ type ProductDetailPurchasePanelProps = {
   currentAmountLabel: string
   displayOriginalLabel: string | null
   isAdding: boolean
+  maxQuantity: number
   offerState: ProductOfferState
   onAddToCart: () => void
   onQuantityChange: (quantity: number) => void
@@ -75,6 +76,7 @@ export function ProductDetailPurchasePanel({
   currentAmountLabel,
   displayOriginalLabel,
   isAdding,
+  maxQuantity,
   offerState,
   onAddToCart,
   onQuantityChange,
@@ -238,15 +240,15 @@ export function ProductDetailPurchasePanel({
           <NumericInput
             className="min-w-0 w-full px-0 xl:px-300"
             id="product-quantity"
-            max={50}
+            max={maxQuantity}
             min={1}
             onChange={(value) => {
               if (!Number.isFinite(value) || value < 1) {
                 onQuantityChange(1)
                 return
               }
 
-              onQuantityChange(Math.floor(value))
+              onQuantityChange(Math.min(Math.floor(value), maxQuantity))
             }}
             value={quantity}
           >

apps/herbatika/src/components/product-detail/use-product-detail-data.ts

@@ -28,6 +28,7 @@ import {
 } from "@/components/product-detail/utils/pricing-utils";
 import { asNumber, asRecord, asString } from "@/components/product-detail/utils/value-utils";
 import { resolveFreeShippingThresholdAmount } from "@/lib/storefront/free-shipping";
+import { resolveVariantInventoryState } from "@/lib/storefront/product-availability";
 import { formatCurrencyAmount } from "@/lib/storefront/price-format";
 import { STOREFRONT_PRODUCT_DETAIL_FIELDS, useProduct } from "@/lib/storefront/products";
 import { useRecordRecentlyVisitedProduct } from "@/lib/storefront/recently-visited-products";
@@ -98,6 +99,10 @@ export function useProductDetailData({ handle }: UseProductDetailDataProps) {
     () => resolveOfferState(product, selectedVariant),
     [product, selectedVariant],
   );
+  const selectedVariantInventory = useMemo(
+    () => resolveVariantInventoryState(selectedVariant, quantity),
+    [quantity, selectedVariant],
+  );
 
   const productPrice = useMemo(() => {
     if (!product) {
@@ -148,7 +153,9 @@ export function useProductDetailData({ handle }: UseProductDetailDataProps) {
   const currentCurrencyCode = productPrice?.currencyCode ?? regionCurrencyCode;
   const canAddToCart =
     Boolean(selectedVariant?.id) &&
-    typeof productPrice?.currentAmount === "number";
+    typeof productPrice?.currentAmount === "number" &&
+    selectedVariantInventory.isPurchasable;
+  const maxQuantity = selectedVariantInventory.maxPurchaseQuantity;
 
   const displayOriginalAmount = resolveDisplayOriginalAmount(productPrice);
 
@@ -194,20 +201,26 @@ export function useProductDetailData({ handle }: UseProductDetailDataProps) {
     offerState.unitLabel,
   ]);
 
-  const volumeDiscountOptions = useMemo(
-    () =>
-      resolveVolumeDiscountOptions(
-        currentAmount,
-        currentCurrencyCode,
-        offerState.applyQuantityDiscount || offerState.applyVolumeDiscount,
-      ),
-    [
+  const volumeDiscountOptions = useMemo(() => {
+    const options = resolveVolumeDiscountOptions(
       currentAmount,
       currentCurrencyCode,
-      offerState.applyQuantityDiscount,
-      offerState.applyVolumeDiscount,
-    ],
-  );
+      offerState.applyQuantityDiscount || offerState.applyVolumeDiscount,
+    );
+    const availableQuantity = selectedVariantInventory.availableQuantity;
+
+    if (availableQuantity === null) {
+      return options;
+    }
+
+    return options.filter((option) => option.quantity <= availableQuantity);
+  }, [
+    currentAmount,
+    currentCurrencyCode,
+    offerState.applyQuantityDiscount,
+    offerState.applyVolumeDiscount,
+    selectedVariantInventory.availableQuantity,
+  ]);
 
   const selectedVolumeDiscountOption = useMemo(() => {
     if (volumeDiscountOptions.length === 0) {
@@ -230,6 +243,18 @@ export function useProductDetailData({ handle }: UseProductDetailDataProps) {
     setSelectedVolumeDiscountId(null);
   }, [product?.id, product?.variants]);
 
+  useEffect(() => {
+    const availableQuantity = selectedVariantInventory.availableQuantity;
+
+    if (availableQuantity === null || availableQuantity < 1) {
+      return;
+    }
+
+    if (quantity > availableQuantity) {
+      setQuantity(availableQuantity);
+    }
+  }, [quantity, selectedVariantInventory.availableQuantity]);
+
   useEffect(() => {
     setSelectedVolumeDiscountId(volumeDiscountOptions[0]?.id ?? null);
   }, [volumeDiscountOptions]);
@@ -267,6 +292,7 @@ export function useProductDetailData({ handle }: UseProductDetailDataProps) {
         : formatCurrencyAmount(freeShippingThresholdAmount, currentCurrencyCode, { minimumFractionDigits: 0, maximumFractionDigits: 0}),
     galleryItems,
     isBootstrappingRegion: !region?.region_id,
+    maxQuantity,
     mediaFacts,
     product,
     productCategories,

apps/herbatika/src/components/product-detail/utils/metadata-parsers.ts

@@ -19,6 +19,7 @@ import {
   asRecord,
   asString,
 } from "@/components/product-detail/utils/value-utils";
+import { resolveVariantInventoryState } from "@/lib/storefront/product-availability";
 
 const normalizeSectionKey = (value: unknown): string | null => {
   const parsed = asString(value);
@@ -135,9 +136,10 @@ export const resolveOfferState = (
   const variantMetadata = asRecord(selectedVariant?.metadata);
   const source = topOffer ?? variantMetadata;
   const stock = asRecord(source?.stock);
-  const stockAmount = asNumber(stock?.amount);
-
-  const isInStock = stockAmount === null ? true : stockAmount > 0;
+  const variantInventory = resolveVariantInventoryState(selectedVariant);
+  const stockAmount =
+    variantInventory.availableQuantity ?? asNumber(stock?.amount);
+  const isInStock = variantInventory.isInStock;
 
   const inStockLabel = asString(source?.availability_in_stock) ?? "Skladom";
   const outOfStockLabel =

apps/herbatika/src/components/storefront-product-detail.tsx

@@ -81,6 +81,7 @@ export function StorefrontProductDetail({ handle }: StorefrontProductDetailProps
             galleryItems={controller.galleryItems}
             mediaFacts={controller.mediaFacts}
             isAdding={controller.isMainProductAdding}
+            maxQuantity={controller.maxQuantity}
             offerState={controller.offerState}
             onAddToCart={controller.handleAddMainProductToCart}
             onQuantityChange={controller.handleQuantityChange}

apps/herbatika/src/lib/storefront/catalog-products.ts

@@ -4,12 +4,17 @@ import type { HttpTypes } from "@medusajs/types";
 import type {
   CatalogFacets,
   CatalogListResponse,
+  UseCatalogProductsResult,
 } from "@techsio/storefront-data/catalog/types";
+import { useMemo } from "react";
 import {
   PLP_PAGE_SIZE,
   type CatalogProductsParams,
   type CatalogQueryState,
 } from "./catalog-query-state";
+import { resolveVariantInventoryState } from "./product-availability";
+import { STOREFRONT_PRODUCT_CARD_FIELDS } from "./product-query-config";
+import { useProducts } from "./products";
 import { storefront } from "./storefront";
 
 export type CatalogProductsInput = CatalogProductsParams & {
@@ -25,7 +30,117 @@ export type CatalogProductsResponse = CatalogListResponse<
 const catalogService = storefront.services.catalog;
 const catalogHooks = storefront.hooks.catalog;
 
-export const useCatalogProducts = catalogHooks.useCatalogProducts;
+type UseCatalogProductsOptions = Parameters<
+  typeof catalogHooks.useCatalogProducts
+>[1];
+
+const productNeedsInventorySnapshot = (product: HttpTypes.StoreProduct) =>
+  (product.variants ?? []).some(
+    (variant) =>
+      Boolean(variant.id) &&
+      !resolveVariantInventoryState(variant).isInventoryKnown,
+  );
+
+const resolveInventorySnapshotHandles = (products: HttpTypes.StoreProduct[]) => {
+  const handles = new Set<string>();
+
+  for (const product of products) {
+    if (product.handle && productNeedsInventorySnapshot(product)) {
+      handles.add(product.handle);
+    }
+  }
+
+  return Array.from(handles);
+};
+
+const mergeProductInventorySnapshot = (
+  product: HttpTypes.StoreProduct,
+  inventoryProduct?: HttpTypes.StoreProduct,
+): HttpTypes.StoreProduct => {
+  if (!inventoryProduct?.variants?.length) {
+    return product;
+  }
+
+  const inventoryVariantById = new Map(
+    inventoryProduct.variants.map((variant) => [variant.id, variant]),
+  );
+
+  return {
+    ...product,
+    variants:
+      product.variants?.map((variant) => {
+        const inventoryVariant = inventoryVariantById.get(variant.id);
+
+        return inventoryVariant
+          ? {
+              ...variant,
+              allow_backorder: inventoryVariant.allow_backorder,
+              inventory_quantity: inventoryVariant.inventory_quantity,
+              manage_inventory: inventoryVariant.manage_inventory,
+            }
+          : variant;
+      }) ?? product.variants,
+  };
+};
+
+export const useCatalogProducts = (
+  input: CatalogProductsInput,
+  options?: UseCatalogProductsOptions,
+): UseCatalogProductsResult<HttpTypes.StoreProduct, CatalogFacets> => {
+  const catalogQuery = catalogHooks.useCatalogProducts(input, options);
+  const inventorySnapshotHandles = useMemo(
+    () => resolveInventorySnapshotHandles(catalogQuery.products),
+    [catalogQuery.products],
+  );
+  const shouldLoadInventorySnapshots = inventorySnapshotHandles.length > 0;
+  const inventorySnapshotsQuery = useProducts({
+    handle: inventorySnapshotHandles,
+    limit: Math.max(1, inventorySnapshotHandles.length),
+    fields: STOREFRONT_PRODUCT_CARD_FIELDS,
+    enabled: catalogQuery.isSuccess && shouldLoadInventorySnapshots,
+  });
+  const inventoryProductByHandle = useMemo(
+    () =>
+      new Map(
+        inventorySnapshotsQuery.products
+          .filter((product) => product.handle)
+          .map((product) => [product.handle, product]),
+      ),
+    [inventorySnapshotsQuery.products],
+  );
+  const products = useMemo(() => {
+    if (shouldLoadInventorySnapshots && inventorySnapshotsQuery.isLoading) {
+      return [];
+    }
+
+    return catalogQuery.products.map((product) =>
+      mergeProductInventorySnapshot(
+        product,
+        product.handle
+          ? inventoryProductByHandle.get(product.handle)
+          : undefined,
+      ),
+    );
+  }, [
+    catalogQuery.products,
+    inventoryProductByHandle,
+    inventorySnapshotsQuery.isLoading,
+    shouldLoadInventorySnapshots,
+  ]);
+
+  return {
+    ...catalogQuery,
+    products,
+    isLoading:
+      catalogQuery.isLoading ||
+      (shouldLoadInventorySnapshots && inventorySnapshotsQuery.isLoading),
+    isFetching:
+      catalogQuery.isFetching ||
+      (shouldLoadInventorySnapshots && inventorySnapshotsQuery.isFetching),
+    error: catalogQuery.error ?? inventorySnapshotsQuery.error,
+  };
+};
+
 export const useSuspenseCatalogProducts = catalogHooks.useSuspenseCatalogProducts;
 export const usePrefetchCatalogProducts = catalogHooks.usePrefetchCatalogProducts;
 export const prefetchCatalogProducts = catalogHooks.prefetchCatalogProducts;