@vendure-platform/create 0.5.0 → 0.5.2

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 (

package/dist/assets/storefront/src/components/commerce/shopping-list-toggle.tsx

@@ -1,16 +1,12 @@
 'use client';
 
-import { useState, useTransition } from 'react';
-import { Heart, Check, Plus } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from '@/components/ui/popover';
+import type { ShoppingListInfo } from '@/app/[locale]/account/shopping-lists/actions';
 import { addToShoppingList, removeFromShoppingList } from '@/app/[locale]/account/shopping-lists/actions';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Check, Heart, Plus } from 'lucide-react';
+import { useState, useTransition } from 'react';
 import { toast } from 'sonner';
-import type { ShoppingListInfo } from '@/app/[locale]/account/shopping-lists/actions';
 
 interface ShoppingListToggleProps {
     variantId: string;
@@ -18,14 +14,19 @@ interface ShoppingListToggleProps {
     initialIsInAnyList: boolean;
 }
 
-export function ShoppingListToggle({ variantId, shoppingLists, initialIsInAnyList }: ShoppingListToggleProps) {
+export function ShoppingListToggle({
+    variantId,
+    shoppingLists,
+    initialIsInAnyList,
+}: ShoppingListToggleProps) {
     const [lists, setLists] = useState(shoppingLists);
     const [isPending, startTransition] = useTransition();
     const [open, setOpen] = useState(false);
     // Track adds when we have no list data (0 lists → server creates default)
     const [addedToDefault, setAddedToDefault] = useState(false);
 
-    const isInAnyList = addedToDefault || lists.some((list) => list.items.some((item) => item.variantId === variantId));
+    const isInAnyList =
+        addedToDefault || lists.some((list) => list.items.some((item) => item.variantId === variantId));
 
     const handleAdd = (listId: string, listName: string) => {
         startTransition(async () => {
@@ -112,12 +113,7 @@ export function ShoppingListToggle({ variantId, shoppingLists, initialIsInAnyLis
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    size="icon"
-                    disabled={isPending}
-                    aria-label="Add to shopping list"
-                >
+                <Button variant="outline" size="icon" disabled={isPending} aria-label="Add to shopping list">
                     <Heart
                         className={`h-5 w-5 transition-colors ${
                             isInAnyList ? 'fill-red-500 text-red-500' : 'text-muted-foreground'
@@ -137,9 +133,7 @@ export function ShoppingListToggle({ variantId, shoppingLists, initialIsInAnyLis
                             type="button"
                             disabled={isPending}
                             onClick={() =>
-                                isInList
-                                    ? handleRemove(list.id, list.name)
-                                    : handleAdd(list.id, list.name)
+                                isInList ? handleRemove(list.id, list.name) : handleAdd(list.id, list.name)
                             }
                             className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
                         >

package/dist/assets/storefront/src/components/commerce/sort-dropdown.tsx

@@ -1,16 +1,9 @@
 'use client';
 
-
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select';
-import {useSearchParams} from "next/navigation";
-import {usePathname, useRouter} from "@/i18n/navigation";
-import {useTranslations} from 'next-intl';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { usePathname, useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
 
 export function SortDropdown() {
     const t = useTranslations('Sort');
@@ -19,10 +12,10 @@ export function SortDropdown() {
     const router = useRouter();
 
     const sortOptions = [
-        {value: 'name-asc', label: t('nameAsc')},
-        {value: 'name-desc', label: t('nameDesc')},
-        {value: 'price-asc', label: t('priceAsc')},
-        {value: 'price-desc', label: t('priceDesc')},
+        { value: 'name-asc', label: t('nameAsc') },
+        { value: 'name-desc', label: t('nameDesc') },
+        { value: 'price-asc', label: t('priceAsc') },
+        { value: 'price-desc', label: t('priceDesc') },
     ];
 
     const currentSort = searchParams.get('sort') || 'name-asc';
@@ -37,7 +30,7 @@ export function SortDropdown() {
     return (
         <Select value={currentSort} onValueChange={handleSortChange}>
             <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder={t('placeholder')}/>
+                <SelectValue placeholder={t('placeholder')} />
             </SelectTrigger>
             <SelectContent>
                 {sortOptions.map((option) => (

package/dist/assets/storefront/src/components/commerce/store-credit-summary.tsx

@@ -2,44 +2,42 @@
 
 import { Price } from '@/components/commerce/price';
 import { maskCode } from '@/lib/format';
+import type { StoreCredit } from '@/lib/vendure/queries';
 import { Wallet } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import type { StoreCredit } from '@/lib/vendure/queries';
 
 interface StoreCreditSummaryProps {
-  credits: StoreCredit[];
-  totalAfterCredit: number | null | undefined;
-  currencyCode: string;
+    credits: StoreCredit[];
+    totalAfterCredit: number | null | undefined;
+    currencyCode: string;
 }
 
 export function StoreCreditSummary({ credits, totalAfterCredit, currencyCode }: StoreCreditSummaryProps) {
-  const t = useTranslations('Cart');
-  if (credits.length === 0) return null;
+    const t = useTranslations('Cart');
+    if (credits.length === 0) return null;
 
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center gap-2">
-        <Wallet className="h-5 w-5 text-muted-foreground" />
-        <h4 className="font-medium">{t('storeCreditsApplied')}</h4>
-      </div>
-      <div className="text-sm space-y-1">
-        {credits.map((credit) => (
-          <div key={credit.code} className="flex justify-between">
-            <span className="text-muted-foreground">
-              {maskCode(credit.code)}
-            </span>
-            <span className="text-green-600">
-              -<Price value={credit.amountDeducted} currencyCode={currencyCode} />
-            </span>
-          </div>
-        ))}
-        {totalAfterCredit != null && (
-          <div className="flex justify-between font-medium pt-1">
-            <span>{t('amountToPay')}</span>
-            <Price value={totalAfterCredit} currencyCode={currencyCode} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center gap-2">
+                <Wallet className="h-5 w-5 text-muted-foreground" />
+                <h4 className="font-medium">{t('storeCreditsApplied')}</h4>
+            </div>
+            <div className="text-sm space-y-1">
+                {credits.map((credit) => (
+                    <div key={credit.code} className="flex justify-between">
+                        <span className="text-muted-foreground">{maskCode(credit.code)}</span>
+                        <span className="text-green-600">
+                            -<Price value={credit.amountDeducted} currencyCode={currencyCode} />
+                        </span>
+                    </div>
+                ))}
+                {totalAfterCredit != null && (
+                    <div className="flex justify-between font-medium pt-1">
+                        <span>{t('amountToPay')}</span>
+                        <Price value={totalAfterCredit} currencyCode={currencyCode} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
 }

package/dist/assets/storefront/src/components/commerce/subcollection-tiles.tsx

@@ -1,8 +1,8 @@
+import { Link } from '@/i18n/navigation';
+import type { GetCollectionProductsQuery } from '@/lib/vendure/queries';
+import type { ResultOf } from 'gql.tada';
+import { Layers } from 'lucide-react';
 import Image from 'next/image';
-import {Link} from '@/i18n/navigation';
-import {Layers} from 'lucide-react';
-import type {ResultOf} from 'gql.tada';
-import type {GetCollectionProductsQuery} from '@/lib/vendure/queries';
 
 // Derived from the GetCollectionProductsQuery so the shape stays in sync with
 // the actual GraphQL response. The `children` field is `null | undefined |
@@ -14,7 +14,7 @@ interface SubcollectionTilesProps {
     collections: SubcollectionTile[];
 }
 
-export function SubcollectionTiles({collections}: SubcollectionTilesProps) {
+export function SubcollectionTiles({ collections }: SubcollectionTilesProps) {
     if (!collections.length) return null;
 
     return (
@@ -22,10 +22,7 @@ export function SubcollectionTiles({collections}: SubcollectionTilesProps) {
             <ul className="flex gap-3 overflow-x-auto pb-1 -mx-1 px-1 snap-x">
                 {collections.map((c) => (
                     <li key={c.id} className="snap-start shrink-0">
-                        <Link
-                            href={`/collection/${c.slug}`}
-                            className="group block w-[160px]"
-                        >
+                        <Link href={`/collection/${c.slug}`} className="group block w-[160px]">
                             <div className="relative h-[120px] w-full overflow-hidden rounded-md bg-muted border border-border group-hover:border-primary/40 transition-colors">
                                 {c.featuredAsset?.preview ? (
                                     <Image
@@ -40,11 +37,12 @@ export function SubcollectionTiles({collections}: SubcollectionTilesProps) {
                                         <Layers className="h-8 w-8 text-muted-foreground/40" />
                                     </div>
                                 )}
-                                <div aria-hidden className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+                                <div
+                                    aria-hidden
+                                    className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"
+                                />
                                 <div className="absolute inset-x-0 bottom-0 p-2 text-white">
-                                    <p className="text-xs font-medium line-clamp-2 drop-shadow">
-                                        {c.name}
-                                    </p>
+                                    <p className="text-xs font-medium line-clamp-2 drop-shadow">{c.name}</p>
                                 </div>
                             </div>
                         </Link>

package/dist/assets/storefront/src/components/layout/auth-page-shell.tsx

@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react';
+import type { ReactNode } from 'react';
 
 /**
  * Wraps auth-flow pages (sign-in, register, verify, etc.) in a vertically
@@ -6,7 +6,7 @@ import type {ReactNode} from 'react';
  * `--page-top-offset` CSS variable. The content is centered horizontally
  * inside a max-width-md column.
  */
-export function AuthPageShell({children}: {children: ReactNode}) {
+export function AuthPageShell({ children }: { children: ReactNode }) {
     return (
         <div className="flex min-h-[calc(100vh-var(--page-top-offset))] mt-[var(--page-top-offset)] items-center justify-center px-4 py-8">
             <div className="w-full max-w-md space-y-6">{children}</div>