feat(cart): check stock and disable checkout if items unavailable

core/app/[locale]/(default)/cart/page.tsx

@@ -5,6 +5,7 @@ import { Cart as CartComponent, CartEmptyState } from '@/vibes/soul/sections/car
 import { getCartId } from '~/lib/cart';
 import { exists } from '~/lib/utils';
 
+import { getStreamableProduct } from '../product/[slug]/page-data';
 import { redirectToCheckout } from './_actions/redirect-to-checkout';
 import { updateCouponCode } from './_actions/update-coupon-code';
 import { updateLineItem } from './_actions/update-line-item';
@@ -63,43 +64,64 @@ export default async function Cart({ params }: Props) {
 
   const lineItems = [...cart.lineItems.physicalItems, ...cart.lineItems.digitalItems];
 
-  const formattedLineItems = lineItems.map((item) => ({
-    id: item.entityId,
-    quantity: item.quantity,
-    price: format.number(item.listPrice.value, {
-      style: 'currency',
-      currency: item.listPrice.currencyCode,
-    }),
-    subtitle: item.selectedOptions
-      .map((option) => {
-        switch (option.__typename) {
-          case 'CartSelectedMultipleChoiceOption':
-          case 'CartSelectedCheckboxOption':
-            return `${option.name}: ${option.value}`;
+  const formattedLineItems = await Promise.all(lineItems.map(async (item) => {
+    const optionValueIds = item.selectedOptions?.map((opt) =>
+      'optionEntityId' in opt && 'valueEntityId' in opt &&
+      typeof opt.optionEntityId === 'number' &&
+      typeof opt.valueEntityId === 'number'
+        ? { optionEntityId: opt.optionEntityId, valueEntityId: opt.valueEntityId }
+        : null
+    ).filter(Boolean);
 
-          case 'CartSelectedNumberFieldOption':
-            return `${option.name}: ${option.number}`;
+    const product = await getStreamableProduct({
+      entityId: item.productEntityId,
+      optionValueIds,
+      useDefaultOptionSelections: true,
+    });
 
-          case 'CartSelectedMultiLineTextFieldOption':
-          case 'CartSelectedTextFieldOption':
-            return `${option.name}: ${option.text}`;
+    const isInStock = product?.inventory?.isInStock ?? false;
 
-          case 'CartSelectedDateFieldOption':
-            return `${option.name}: ${format.dateTime(new Date(option.date.utc))}`;
+    return {
+      id: item.entityId,
+      quantity: item.quantity,
+      price: format.number(item.listPrice.value, {
+        style: 'currency',
+        currency: item.listPrice.currencyCode,
+      }),
+      subtitle: item.selectedOptions
+        .map((option) => {
+          switch (option.__typename) {
+            case 'CartSelectedMultipleChoiceOption':
+            case 'CartSelectedCheckboxOption':
+              return `${option.name}: ${option.value}`;
 
-          default:
-            return '';
-        }
-      })
-      .join(', '),
-    title: item.name,
-    image: { src: item.image?.url || '', alt: item.name },
-    href: new URL(item.url).pathname,
-    selectedOptions: item.selectedOptions,
-    productEntityId: item.productEntityId,
-    variantEntityId: item.variantEntityId,
+            case 'CartSelectedNumberFieldOption':
+              return `${option.name}: ${option.number}`;
+
+            case 'CartSelectedMultiLineTextFieldOption':
+            case 'CartSelectedTextFieldOption':
+              return `${option.name}: ${option.text}`;
+
+            case 'CartSelectedDateFieldOption':
+              return `${option.name}: ${format.dateTime(new Date(option.date.utc))}`;
+
+            default:
+              return '';
+          }
+        })
+        .join(', '),
+      title: item.name,
+      image: { src: item.image?.url || '', alt: item.name },
+      href: new URL(item.url).pathname,
+      selectedOptions: item.selectedOptions,
+      productEntityId: item.productEntityId,
+      variantEntityId: item.variantEntityId,
+      isInStock,
+    };
   }));
 
+  const canProceed = formattedLineItems.every((item) => item.isInStock);
+
   const totalCouponDiscount =
     checkout?.coupons.reduce((sum, coupon) => sum + coupon.discountedAmount.value, 0) ?? 0;
 
@@ -128,6 +150,7 @@ export default async function Cart({ params }: Props) {
   return (
     <>
       <CartComponent
+        canProceedToCheckout={canProceed}
         cart={{
           lineItems: formattedLineItems,
           total: format.number(checkout?.grandTotal?.value || 0, {
@@ -189,6 +212,7 @@ export default async function Cart({ params }: Props) {
         incrementLineItemLabel={t('increment')}
         key={`${cart.entityId}-${cart.version}`}
         lineItemAction={updateLineItem}
+        outOfStockMessage={t('outOfStockMessage')}
         shipping={{
           action: updateShippingInfo,
           countries,

core/messages/en.json

@@ -273,6 +273,7 @@
     "removeItem": "Remove item",
     "cartCombined": "We noticed you had items saved in a previous cart, so we've added them to your current cart for you.",
     "cartRestored": "You started a cart on another device, and we've restored it here so you can pick up where you left off.",
+    "outOfStockMessage": "This product is currently out of stock",
     "CheckoutSummary": {
       "title": "Summary",
       "subTotal": "Subtotal",

core/vibes/soul/sections/cart/client.tsx

@@ -126,6 +126,8 @@ export interface CartProps<LineItem extends CartLineItem> {
   cart: Cart<LineItem>;
   couponCode?: CouponCode;
   shipping?: Shipping;
+  canProceedToCheckout?: boolean;
+  outOfStockMessage?: string;
 }
 
 const defaultEmptyState = {
@@ -172,6 +174,8 @@ export function CartClient<LineItem extends CartLineItem>({
   emptyState = defaultEmptyState,
   summaryTitle,
   shipping,
+  canProceedToCheckout,
+  outOfStockMessage,
 }: CartProps<LineItem>) {
   const [state, formAction] = useActionState(lineItemAction, {
     lineItems: cart.lineItems,
@@ -265,7 +269,7 @@ export function CartClient<LineItem extends CartLineItem>({
               <dl>{cart.total}</dl>
             </div>
           </dl>
-          <CheckoutButton action={checkoutAction} className="mt-4 w-full">
+          <CheckoutButton action={checkoutAction} className="mt-4 w-full" disabled={!canProceedToCheckout}>
             {checkoutLabel}
             <ArrowRight size={20} strokeWidth={1} />
           </CheckoutButton>
@@ -299,7 +303,14 @@ export function CartClient<LineItem extends CartLineItem>({
               </div>
               <div className="flex grow flex-col flex-wrap justify-between gap-y-2 @xl:flex-row">
                 <div className="flex w-full flex-1 flex-col @xl:w-1/2 @xl:pr-4">
-                  <span className="font-medium">{lineItem.title}</span>
+                  <span className="font-medium">
+                    {lineItem.title}
+                    {!('isInStock' in lineItem) || lineItem.isInStock ? null : (
+                      <span className="block mt-1 text-red-600 text-sm font-normal">
+                        {outOfStockMessage}
+                      </span>
+                    )}
+                  </span>
                   <span className="text-[var(--cart-subtext-text,hsl(var(--contrast-300)))] contrast-more:text-[var(--cart-subtitle-text,hsl(var(--contrast-500)))]">
                     {lineItem.subtitle}
                   </span>
@@ -426,6 +437,7 @@ function CounterForm({
 
 function CheckoutButton({
   action,
+  disabled,
   ...props
 }: { action: Action<SubmissionResult | null, FormData> } & ComponentPropsWithoutRef<
   typeof Button
@@ -434,6 +446,8 @@ function CheckoutButton({
 
   const [form] = useForm({ lastResult });
 
+  props.disabled = disabled;
+
   useEffect(() => {
     if (form.errors) {
       form.errors.forEach((error) => {
@@ -444,13 +458,15 @@ function CheckoutButton({
 
   return (
     <form action={formAction}>
-      <SubmitButton {...props} />
+      <SubmitButton {...props} disabled={disabled} />
     </form>
   );
 }
 
 function SubmitButton(props: ComponentPropsWithoutRef<typeof Button>) {
   const { pending } = useFormStatus();
 
-  return <Button {...props} disabled={pending} loading={pending} type="submit" />;
+  const disabled = props.disabled || pending;
+
+  return <Button {...props} disabled={disabled} loading={pending} type="submit" />;
 }