@vendure-platform/create 0.5.0 → 1.0.0-major.202609091053.0.0

package/dist/assets/storefront/src/components/commerce/quote-product-search.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { useState, useTransition, useRef, useEffect, useCallback } from 'react';
-import Image from 'next/image';
-import { Input } from '@/components/ui/input';
-import { Plus, Search, Loader2 } from 'lucide-react';
 import { searchVariantsForQuote } from '@/app/[locale]/account/quotes/actions';
-import type { QuoteLineItemDraft } from './quote-request-form';
+import { Input } from '@/components/ui/input';
+import { Loader2, Plus, Search } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
+import type { QuoteLineItemDraft } from './quote-request-form';
 
 interface QuoteProductSearchProps {
     onAddItem: (item: QuoteLineItemDraft) => void;
@@ -16,16 +16,18 @@ interface QuoteProductSearchProps {
 export function QuoteProductSearch({ onAddItem, currencyCode }: QuoteProductSearchProps) {
     const t = useTranslations('Quotes');
     const [searchTerm, setSearchTerm] = useState('');
-    const [results, setResults] = useState<Array<{
-        productVariantId: string;
-        productName: string;
-        variantName: string;
-        sku: string;
-        imageUrl?: string;
-        price: number;
-        currencyCode: string;
-        inStock: boolean;
-    }>>([]);
+    const [results, setResults] = useState<
+        Array<{
+            productVariantId: string;
+            productName: string;
+            variantName: string;
+            sku: string;
+            imageUrl?: string;
+            price: number;
+            currencyCode: string;
+            inStock: boolean;
+        }>
+    >([]);
     const [isPending, startTransition] = useTransition();
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -66,7 +68,7 @@ export function QuoteProductSearch({ onAddItem, currencyCode }: QuoteProductSear
         return () => document.removeEventListener('mousedown', handleClickOutside);
     }, []);
 
-    const handleAdd = (item: typeof results[number]) => {
+    const handleAdd = (item: (typeof results)[number]) => {
         onAddItem({
             productVariantId: item.productVariantId,
             productName: item.productName,
@@ -89,8 +91,10 @@ export function QuoteProductSearch({ onAddItem, currencyCode }: QuoteProductSear
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
                     value={searchTerm}
-                    onChange={e => handleSearch(e.target.value)}
-                    onKeyDown={e => { if (e.key === 'Escape') setIsOpen(false); }}
+                    onChange={(e) => handleSearch(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Escape') setIsOpen(false);
+                    }}
                     placeholder={t('requestForm.searchPlaceholder')}
                     className="pl-10"
                 />

package/dist/assets/storefront/src/components/commerce/quote-request-form.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import { useState, useTransition } from 'react';
-import Image from 'next/image';
+import { Price } from '@/components/commerce/price';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { Price } from '@/components/commerce/price';
-import { Minus, Plus, Trash2, Send } from 'lucide-react';
+import { Textarea } from '@/components/ui/textarea';
+import { Minus, Plus, Send, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useState, useTransition } from 'react';
 
 export interface QuoteLineItemDraft {
     productVariantId: string;
@@ -54,7 +54,7 @@ export function QuoteRequestForm({
     const [error, setError] = useState<string | null>(null);
 
     const updateQuantity = (index: number, delta: number) => {
-        setLineItems(prev =>
+        setLineItems((prev) =>
             prev.map((item, i) =>
                 i === index ? { ...item, quantity: Math.max(1, item.quantity + delta) } : item,
             ),
@@ -62,22 +62,20 @@ export function QuoteRequestForm({
     };
 
     const setQuantity = (index: number, quantity: number) => {
-        setLineItems(prev =>
+        setLineItems((prev) =>
             prev.map((item, i) => (i === index ? { ...item, quantity: Math.max(1, quantity) } : item)),
         );
     };
 
     const removeItem = (index: number) => {
-        setLineItems(prev => prev.filter((_, i) => i !== index));
+        setLineItems((prev) => prev.filter((_, i) => i !== index));
     };
 
     const addItem = (item: QuoteLineItemDraft) => {
-        setLineItems(prev => {
-            const existing = prev.findIndex(li => li.productVariantId === item.productVariantId);
+        setLineItems((prev) => {
+            const existing = prev.findIndex((li) => li.productVariantId === item.productVariantId);
             if (existing >= 0) {
-                return prev.map((li, i) =>
-                    i === existing ? { ...li, quantity: li.quantity + 1 } : li,
-                );
+                return prev.map((li, i) => (i === existing ? { ...li, quantity: li.quantity + 1 } : li));
             }
             return [...prev, item];
         });
@@ -91,7 +89,7 @@ export function QuoteRequestForm({
         setError(null);
         startTransition(async () => {
             const result = await onSubmit(
-                lineItems.map(li => ({
+                lineItems.map((li) => ({
                     productVariantId: li.productVariantId,
                     quantity: li.quantity,
                     note: li.note || undefined,
@@ -111,9 +109,7 @@ export function QuoteRequestForm({
                 <div className="text-sm">
                     <span className="font-medium">{sender.name}</span>
                     <span className="text-muted-foreground ml-2">{sender.email}</span>
-                    {sender.company && (
-                        <span className="text-muted-foreground ml-2">({sender.company})</span>
-                    )}
+                    {sender.company && <span className="text-muted-foreground ml-2">({sender.company})</span>}
                 </div>
             </div>
 
@@ -127,7 +123,10 @@ export function QuoteRequestForm({
                 ) : (
                     <div className="divide-y rounded-lg border">
                         {lineItems.map((item, index) => (
-                            <div key={`${item.productVariantId}-${index}`} className="flex items-center gap-4 p-3">
+                            <div
+                                key={`${item.productVariantId}-${index}`}
+                                className="flex items-center gap-4 p-3"
+                            >
                                 {item.imageUrl ? (
                                     <Image
                                         src={`${item.imageUrl}?preset=tiny`}
@@ -167,7 +166,9 @@ export function QuoteRequestForm({
                                         type="number"
                                         min={1}
                                         value={item.quantity}
-                                        onChange={e => setQuantity(index, parseInt(e.target.value, 10) || 1)}
+                                        onChange={(e) =>
+                                            setQuantity(index, parseInt(e.target.value, 10) || 1)
+                                        }
                                         className="h-8 w-20 text-center text-sm"
                                     />
                                     <Button
@@ -181,7 +182,10 @@ export function QuoteRequestForm({
                                     </Button>
                                 </div>
                                 <div className="text-sm text-right w-24">
-                                    <Price value={item.unitPrice * item.quantity} currencyCode={item.currencyCode} />
+                                    <Price
+                                        value={item.unitPrice * item.quantity}
+                                        currencyCode={item.currencyCode}
+                                    />
                                 </div>
                                 <Button
                                     type="button"
@@ -219,7 +223,7 @@ export function QuoteRequestForm({
                 <Textarea
                     id="quote-note"
                     value={note}
-                    onChange={e => setNote(e.target.value)}
+                    onChange={(e) => setNote(e.target.value)}
                     placeholder={t('requestForm.messagePlaceholder')}
                     rows={3}
                 />
@@ -235,16 +239,13 @@ export function QuoteRequestForm({
                         {t('requestForm.cancelButton')}
                     </Button>
                 )}
-                <Button
-                    onClick={handleSubmit}
-                    disabled={isPending || lineItems.length === 0}
-                >
+                <Button onClick={handleSubmit} disabled={isPending || lineItems.length === 0}>
                     <Send className="h-4 w-4 mr-2" />
                     {isPending
                         ? t('requestForm.submittingButton')
                         : mode === 'from-cart'
-                          ? t('requestForm.submitFromCartButton')
-                          : t('requestForm.submitButton')}
+                        ? t('requestForm.submitFromCartButton')
+                        : t('requestForm.submitButton')}
                 </Button>
             </div>
         </div>

package/dist/assets/storefront/src/components/commerce/quote-status-badge.tsx

@@ -1,40 +1,48 @@
-import {Badge} from '@/components/ui/badge';
+import { Badge } from '@/components/ui/badge';
 import {
+    Ban,
+    CheckCircle,
+    Clock,
     FileEdit,
+    MessageSquare,
     Search,
-    Clock,
     Send,
-    MessageSquare,
-    CheckCircle,
-    XCircle,
-    Ban,
     TimerOff,
+    XCircle,
     type LucideIcon,
 } from 'lucide-react';
 
 const STATUS_CONFIG: Record<string, { color: string; label: string; icon: LucideIcon }> = {
-    DRAFT: {color: 'bg-gray-100 text-gray-800', label: 'Draft', icon: FileEdit},
-    IN_REVIEW: {color: 'bg-amber-100 text-amber-800', label: 'In Review', icon: Search},
-    AWAITING_APPROVAL: {color: 'bg-amber-100 text-amber-800', label: 'Awaiting Approval', icon: Clock},
-    QUOTED: {color: 'bg-blue-100 text-blue-800', label: 'Quoted', icon: Send},
-    CHANGES_REQUESTED: {color: 'bg-orange-100 text-orange-800', label: 'Changes Requested', icon: MessageSquare},
-    ACCEPTED: {color: 'bg-green-100 text-green-800', label: 'Accepted', icon: CheckCircle},
-    REJECTED: {color: 'bg-red-100 text-red-800', label: 'Rejected', icon: XCircle},
-    CANCELLED: {color: 'bg-red-100 text-red-800', label: 'Cancelled', icon: Ban},
-    EXPIRED: {color: 'bg-gray-100 text-gray-600', label: 'Expired', icon: TimerOff},
+    DRAFT: { color: 'bg-gray-100 text-gray-800', label: 'Draft', icon: FileEdit },
+    IN_REVIEW: { color: 'bg-amber-100 text-amber-800', label: 'In Review', icon: Search },
+    AWAITING_APPROVAL: { color: 'bg-amber-100 text-amber-800', label: 'Awaiting Approval', icon: Clock },
+    QUOTED: { color: 'bg-blue-100 text-blue-800', label: 'Quoted', icon: Send },
+    CHANGES_REQUESTED: {
+        color: 'bg-orange-100 text-orange-800',
+        label: 'Changes Requested',
+        icon: MessageSquare,
+    },
+    ACCEPTED: { color: 'bg-green-100 text-green-800', label: 'Accepted', icon: CheckCircle },
+    REJECTED: { color: 'bg-red-100 text-red-800', label: 'Rejected', icon: XCircle },
+    CANCELLED: { color: 'bg-red-100 text-red-800', label: 'Cancelled', icon: Ban },
+    EXPIRED: { color: 'bg-gray-100 text-gray-600', label: 'Expired', icon: TimerOff },
 };
 
 interface QuoteStatusBadgeProps {
     status: string;
 }
 
-export function QuoteStatusBadge({status}: QuoteStatusBadgeProps) {
-    const config = STATUS_CONFIG[status] || {color: 'bg-gray-100 text-gray-800', label: status, icon: Clock};
+export function QuoteStatusBadge({ status }: QuoteStatusBadgeProps) {
+    const config = STATUS_CONFIG[status] || {
+        color: 'bg-gray-100 text-gray-800',
+        label: status,
+        icon: Clock,
+    };
     const Icon = config.icon;
 
     return (
         <Badge className={config.color} variant="secondary">
-            <Icon className="h-3 w-3 mr-1"/>
+            <Icon className="h-3 w-3 mr-1" />
             {config.label}
         </Badge>
     );

package/dist/assets/storefront/src/components/commerce/quote-validity-indicator.tsx

@@ -1,17 +1,15 @@
 'use client';
 
-import {useLocale} from 'next-intl';
-import {formatDate} from '@/lib/format';
+import { formatDate } from '@/lib/format';
+import { useLocale } from 'next-intl';
 
 interface QuoteValidityIndicatorProps {
     validUntil: string;
 }
 
-export function QuoteValidityIndicator({validUntil}: QuoteValidityIndicatorProps) {
+export function QuoteValidityIndicator({ validUntil }: QuoteValidityIndicatorProps) {
     const locale = useLocale();
-    const daysRemaining = Math.ceil(
-        (new Date(validUntil).getTime() - Date.now()) / (1000 * 60 * 60 * 24),
-    );
+    const daysRemaining = Math.ceil((new Date(validUntil).getTime() - Date.now()) / (1000 * 60 * 60 * 24));
 
     if (daysRemaining < 0) {
         return <span className="text-red-600 font-medium">Expired</span>;
@@ -23,7 +21,9 @@ export function QuoteValidityIndicator({validUntil}: QuoteValidityIndicatorProps
 
     if (daysRemaining <= 7) {
         return (
-            <span className={`font-medium ${daysRemaining <= 3 ? 'text-amber-600' : 'text-muted-foreground'}`}>
+            <span
+                className={`font-medium ${daysRemaining <= 3 ? 'text-amber-600' : 'text-muted-foreground'}`}
+            >
                 Expires in {daysRemaining} day{daysRemaining !== 1 ? 's' : ''}
             </span>
         );

package/dist/assets/storefront/src/components/commerce/quote-version-comparison.tsx

@@ -1,8 +1,8 @@
-import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
-import {Price} from '@/components/commerce/price';
-import {Badge} from '@/components/ui/badge';
-import type {QuoteDetail, QuoteVersion} from '@/lib/vendure/queries';
-import {getTranslations} from 'next-intl/server';
+import { Price } from '@/components/commerce/price';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { QuoteDetail, QuoteVersion } from '@/lib/vendure/queries';
+import { getTranslations } from 'next-intl/server';
 
 interface VersionComparisonProps {
     currentVersion: NonNullable<QuoteDetail['currentVersion']>;
@@ -10,27 +10,30 @@ interface VersionComparisonProps {
     currencyCode: string;
 }
 
-export async function QuoteVersionComparison({currentVersion, versions, currencyCode}: VersionComparisonProps) {
+export async function QuoteVersionComparison({
+    currentVersion,
+    versions,
+    currencyCode,
+}: VersionComparisonProps) {
     const t = await getTranslations('Quotes');
     const hasMultipleVersions = versions.length > 1;
-    const v1 = versions.find(v => v.versionNumber === 1);
-    const v1ItemsBySku = new Map(
-        v1?.lineItems.map(item => [item.sku, item]) ?? [],
-    );
+    const v1 = versions.find((v) => v.versionNumber === 1);
+    const v1ItemsBySku = new Map(v1?.lineItems.map((item) => [item.sku, item]) ?? []);
 
     return (
         <Card>
             <CardHeader>
-                <CardTitle>{t('lineItemsCardTitle', {version: currentVersion.versionNumber})}</CardTitle>
+                <CardTitle>{t('lineItemsCardTitle', { version: currentVersion.versionNumber })}</CardTitle>
             </CardHeader>
             <CardContent>
                 <div className="space-y-3">
                     {currentVersion.lineItems.map((item) => {
                         const v1Item = v1ItemsBySku.get(item.sku);
-                        const hasPriceDiff = hasMultipleVersions && v1Item && v1Item.unitPrice !== item.unitPrice;
+                        const hasPriceDiff =
+                            hasMultipleVersions && v1Item && v1Item.unitPrice !== item.unitPrice;
                         const isNew = hasMultipleVersions && !v1Item;
                         const diff = hasPriceDiff ? item.unitPrice - v1Item.unitPrice : 0;
-                        const pctDiff = hasPriceDiff ? ((diff / v1Item.unitPrice) * 100) : 0;
+                        const pctDiff = hasPriceDiff ? (diff / v1Item.unitPrice) * 100 : 0;
 
                         return (
                             <div key={item.id} className="flex gap-4">
@@ -38,20 +41,27 @@ export async function QuoteVersionComparison({currentVersion, versions, currency
                                     <div className="flex items-center gap-2 flex-wrap">
                                         <p className="font-medium">{item.productName}</p>
                                         {isNew && (
-                                            <Badge variant="secondary" className="text-xs">{t('lineItemNew')}</Badge>
-                                        )}
-                                        {item.productVariant?.stockLevel && item.productVariant.stockLevel !== 'IN_STOCK' && (
-                                            <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded ${
-                                                item.productVariant.stockLevel === 'OUT_OF_STOCK'
-                                                    ? 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300'
-                                                    : 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300'
-                                            }`}>
-                                                {item.productVariant.stockLevel === 'OUT_OF_STOCK' ? t('lineItemOutOfStock') : t('lineItemLowStock')}
-                                            </span>
+                                            <Badge variant="secondary" className="text-xs">
+                                                {t('lineItemNew')}
+                                            </Badge>
                                         )}
+                                        {item.productVariant?.stockLevel &&
+                                            item.productVariant.stockLevel !== 'IN_STOCK' && (
+                                                <span
+                                                    className={`text-[10px] font-medium px-1.5 py-0.5 rounded ${
+                                                        item.productVariant.stockLevel === 'OUT_OF_STOCK'
+                                                            ? 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300'
+                                                            : 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300'
+                                                    }`}
+                                                >
+                                                    {item.productVariant.stockLevel === 'OUT_OF_STOCK'
+                                                        ? t('lineItemOutOfStock')
+                                                        : t('lineItemLowStock')}
+                                                </span>
+                                            )}
                                     </div>
                                     <p className="text-sm text-muted-foreground">
-                                        {t('lineItemSku', {sku: item.sku})}
+                                        {t('lineItemSku', { sku: item.sku })}
                                     </p>
                                     {item.note && (
                                         <p className="text-sm text-muted-foreground italic mt-1">
@@ -61,19 +71,29 @@ export async function QuoteVersionComparison({currentVersion, versions, currency
                                 </div>
                                 <div className="text-right">
                                     <p className="font-medium">
-                                        <Price value={item.unitPrice * item.quantity} currencyCode={currencyCode}/>
+                                        <Price
+                                            value={item.unitPrice * item.quantity}
+                                            currencyCode={currencyCode}
+                                        />
                                     </p>
                                     <p className="text-sm text-muted-foreground">
-                                        {t('lineItemQty', {qty: item.quantity})} &times; <Price value={item.unitPrice} currencyCode={currencyCode}/>
+                                        {t('lineItemQty', { qty: item.quantity })} &times;{' '}
+                                        <Price value={item.unitPrice} currencyCode={currencyCode} />
                                     </p>
                                     {hasPriceDiff && (
                                         <div className="mt-1">
                                             <p className="text-xs text-muted-foreground line-through">
-                                                <Price value={v1Item.unitPrice} currencyCode={currencyCode}/>
+                                                <Price value={v1Item.unitPrice} currencyCode={currencyCode} />
                                             </p>
-                                            <p className={`text-xs font-medium ${diff < 0 ? 'text-green-600' : 'text-red-600'}`}>
-                                                {diff < 0 ? '' : '+'}<Price value={diff} currencyCode={currencyCode}/>
-                                                {' '}({pctDiff > 0 ? '+' : ''}{pctDiff.toFixed(1)}%)
+                                            <p
+                                                className={`text-xs font-medium ${
+                                                    diff < 0 ? 'text-green-600' : 'text-red-600'
+                                                }`}
+                                            >
+                                                {diff < 0 ? '' : '+'}
+                                                <Price value={diff} currencyCode={currencyCode} /> (
+                                                {pctDiff > 0 ? '+' : ''}
+                                                {pctDiff.toFixed(1)}%)
                                             </p>
                                         </div>
                                     )}

package/dist/assets/storefront/src/components/commerce/related-products.tsx

@@ -1,10 +1,10 @@
-import { ProductCarousel } from "@/components/commerce/product-carousel";
-import { cacheLife, cacheTag } from "next/cache";
-import { publicClient } from "@/lib/vendure/api";
-import { GetCollectionProductsQuery } from "@/lib/vendure/queries";
-import { readFragment } from "@/graphql";
-import { ProductCardFragment } from "@/lib/vendure/fragments";
-import { getTranslations } from "next-intl/server";
+import { ProductCarousel } from '@/components/commerce/product-carousel';
+import { readFragment } from '@/graphql';
+import { publicClient } from '@/lib/vendure/api';
+import { ProductCardFragment } from '@/lib/vendure/fragments';
+import { GetCollectionProductsQuery } from '@/lib/vendure/queries';
+import { getTranslations } from 'next-intl/server';
+import { cacheLife, cacheTag } from 'next/cache';
 export interface RelatedProductsProps {
     collectionSlug: string;
     currentProductId: string;
@@ -12,32 +12,46 @@ export interface RelatedProductsProps {
     channelToken?: string;
 }
 
-async function getRelatedProducts(collectionSlug: string, locale: string, currentProductId: string, channelToken?: string) {
-    'use cache'
-    cacheLife('hours')
-    cacheTag(`related-products-${collectionSlug}-${locale}${channelToken ? `-${channelToken}` : ''}`)
+async function getRelatedProducts(
+    collectionSlug: string,
+    locale: string,
+    currentProductId: string,
+    channelToken?: string,
+) {
+    'use cache';
+    cacheLife('hours');
+    cacheTag(`related-products-${collectionSlug}-${locale}${channelToken ? `-${channelToken}` : ''}`);
 
-    const [result, error] = await publicClient.query(GetCollectionProductsQuery, {
-        slug: collectionSlug,
-        input: {
-            collectionSlug: collectionSlug,
-            take: 13, // Fetch extra to account for filtering out current product
-            skip: 0,
-            groupByProduct: true
-        }
-    }, {languageCode: locale, ...(channelToken ? {channelToken} : {})});
+    const [result, error] = await publicClient.query(
+        GetCollectionProductsQuery,
+        {
+            slug: collectionSlug,
+            input: {
+                collectionSlug: collectionSlug,
+                take: 13, // Fetch extra to account for filtering out current product
+                skip: 0,
+                groupByProduct: true,
+            },
+        },
+        { languageCode: locale, ...(channelToken ? { channelToken } : {}) },
+    );
     if (error) return [];
 
     // Filter out the current product and limit to 12
     return result.data.search.items
-        .filter(item => {
+        .filter((item) => {
             const product = readFragment(ProductCardFragment, item);
             return product.productId !== currentProductId;
         })
         .slice(0, 12);
 }
 
-export async function RelatedProducts({ collectionSlug, currentProductId, locale, channelToken }: RelatedProductsProps) {
+export async function RelatedProducts({
+    collectionSlug,
+    currentProductId,
+    locale,
+    channelToken,
+}: RelatedProductsProps) {
     const [products, t] = await Promise.all([
         getRelatedProducts(collectionSlug, locale, currentProductId, channelToken),
         getTranslations('Product'),
@@ -47,10 +61,5 @@ export async function RelatedProducts({ collectionSlug, currentProductId, locale
         return null;
     }
 
-    return (
-        <ProductCarousel
-            title={t('relatedProducts')}
-            products={products}
-        />
-    );
+    return <ProductCarousel title={t('relatedProducts')} products={products} />;
 }

package/dist/assets/storefront/src/components/commerce/shared-cart-status-badge.tsx

@@ -1,18 +1,22 @@
-import {Badge} from '@/components/ui/badge';
-import {CircleDot, Lock, CheckCircle2, type LucideIcon} from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { CheckCircle2, CircleDot, Lock, type LucideIcon } from 'lucide-react';
 
-const STATUS_CONFIG: Record<string, {color: string; label: string; icon: LucideIcon}> = {
-    Open: {color: 'bg-emerald-100 text-emerald-800', label: 'Open', icon: CircleDot},
-    Locked: {color: 'bg-amber-100 text-amber-800', label: 'Checkout in progress', icon: Lock},
-    Closed: {color: 'bg-gray-100 text-gray-600', label: 'Closed', icon: CheckCircle2},
+const STATUS_CONFIG: Record<string, { color: string; label: string; icon: LucideIcon }> = {
+    Open: { color: 'bg-emerald-100 text-emerald-800', label: 'Open', icon: CircleDot },
+    Locked: { color: 'bg-amber-100 text-amber-800', label: 'Checkout in progress', icon: Lock },
+    Closed: { color: 'bg-gray-100 text-gray-600', label: 'Closed', icon: CheckCircle2 },
 };
 
 interface SharedCartStatusBadgeProps {
     status: string;
 }
 
-export function SharedCartStatusBadge({status}: SharedCartStatusBadgeProps) {
-    const config = STATUS_CONFIG[status] ?? {color: 'bg-gray-100 text-gray-800', label: status, icon: CircleDot};
+export function SharedCartStatusBadge({ status }: SharedCartStatusBadgeProps) {
+    const config = STATUS_CONFIG[status] ?? {
+        color: 'bg-gray-100 text-gray-800',
+        label: status,
+        icon: CircleDot,
+    };
     const Icon = config.icon;
 
     return (

package/dist/assets/storefront/src/components/commerce/shop-by-category.tsx

@@ -1,11 +1,12 @@
+import type { ResultOf } from '@/graphql';
+import { Link } from '@/i18n/navigation';
+import type { GetTopCollectionsQuery } from '@/lib/vendure/queries';
+import { Layers } from 'lucide-react';
 import Image from 'next/image';
-import {Layers} from 'lucide-react';
-import {Link} from '@/i18n/navigation';
-import type {ResultOf} from '@/graphql';
-import type {GetTopCollectionsQuery} from '@/lib/vendure/queries';
 
-export type ShopByCategoryCollection =
-    ResultOf<typeof GetTopCollectionsQuery>['collections']['items'][number];
+export type ShopByCategoryCollection = ResultOf<
+    typeof GetTopCollectionsQuery
+>['collections']['items'][number];
 
 export interface ShopByCategoryProps {
     collections: ShopByCategoryCollection[];
@@ -18,7 +19,7 @@ export interface ShopByCategoryProps {
  * this component is layout-neutral so it can be used on the homepage, a
  * standalone catalog landing page, or elsewhere.
  */
-export function ShopByCategory({collections}: ShopByCategoryProps) {
+export function ShopByCategory({ collections }: ShopByCategoryProps) {
     if (!collections.length) return null;
 
     return (