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

package/dist/assets/storefront/src/app/[locale]/account/quotes/page.tsx

@@ -1,18 +1,7 @@
-import type {Metadata} from 'next';
-import {Suspense} from 'react';
-import {client} from '@/lib/vendure/api';
-import {GetMyQuotesQuery} from '@/lib/vendure/queries';
-import {getActiveCustomer} from '@/lib/vendure/actions';
-import {getActiveChannelCached} from '@/lib/vendure/cached';
-import {getActiveChannelToken} from '@/lib/channel-server';
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from '@/components/ui/table';
+import { Price } from '@/components/commerce/price';
+import { QuoteStatusBadge } from '@/components/commerce/quote-status-badge';
+import { ErrorState } from '@/components/shared/error-state';
+import { Button } from '@/components/ui/button';
 import {
     Pagination,
     PaginationContent,
@@ -22,14 +11,18 @@ import {
     PaginationNext,
     PaginationPrevious,
 } from '@/components/ui/pagination';
-import {ErrorState} from '@/components/shared/error-state';
-import {ArrowRightIcon, Plus} from 'lucide-react';
-import {Button} from '@/components/ui/button';
-import {Price} from '@/components/commerce/price';
-import {QuoteStatusBadge} from '@/components/commerce/quote-status-badge';
-import {formatDate} from '@/lib/format';
-import {setRequestLocale, getTranslations} from 'next-intl/server';
-import {Link, redirect} from '@/i18n/navigation';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Link, redirect } from '@/i18n/navigation';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { formatDate } from '@/lib/format';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { client } from '@/lib/vendure/api';
+import { getActiveChannelCached } from '@/lib/vendure/cached';
+import { GetMyQuotesQuery } from '@/lib/vendure/queries';
+import { ArrowRightIcon, Plus } from 'lucide-react';
+import type { Metadata } from 'next';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { Suspense } from 'react';
 
 export const metadata: Metadata = {
     title: 'Quotes',
@@ -49,7 +42,17 @@ type QuoteRow = {
 
 type QuotesTranslations = Awaited<ReturnType<typeof getTranslations<'Quotes'>>>;
 
-function QuoteTable({quotes, locale, currencyCode, t}: {quotes: QuoteRow[]; locale: string; currencyCode: string; t: QuotesTranslations}) {
+function QuoteTable({
+    quotes,
+    locale,
+    currencyCode,
+    t,
+}: {
+    quotes: QuoteRow[];
+    locale: string;
+    currencyCode: string;
+    t: QuotesTranslations;
+}) {
     return (
         <div className="border rounded-lg">
             <Table>
@@ -69,22 +72,16 @@ function QuoteTable({quotes, locale, currencyCode, t}: {quotes: QuoteRow[]; loca
                             <TableCell className="font-medium">
                                 <Button asChild variant="outline">
                                     <Link href={`/account/quotes/${quote.id}`}>
-                                        {quote.quoteNumber} <ArrowRightIcon/>
+                                        {quote.quoteNumber} <ArrowRightIcon />
                                     </Link>
                                 </Button>
                             </TableCell>
+                            <TableCell>{formatDate(quote.createdAt, locale)}</TableCell>
+                            <TableCell>{quote.requestedBy}</TableCell>
                             <TableCell>
-                                {formatDate(quote.createdAt, locale)}
-                            </TableCell>
-                            <TableCell>
-                                {quote.requestedBy}
-                            </TableCell>
-                            <TableCell>
-                                <QuoteStatusBadge status={quote.status}/>
-                            </TableCell>
-                            <TableCell>
-                                {t('itemCount', {count: quote.itemCount})}
+                                <QuoteStatusBadge status={quote.status} />
                             </TableCell>
+                            <TableCell>{t('itemCount', { count: quote.itemCount })}</TableCell>
                             <TableCell className="text-right">
                                 {quote.total != null ? (
                                     <Price value={quote.total} currencyCode={currencyCode} taxLabel="excl" />
@@ -100,16 +97,34 @@ function QuoteTable({quotes, locale, currencyCode, t}: {quotes: QuoteRow[]; loca
     );
 }
 
-export default async function QuotesPage(props: {params: Promise<{locale: string}>; searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+export default async function QuotesPage(props: {
+    params: Promise<{ locale: string }>;
+    searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
     return (
-        <Suspense fallback={<div><div className="flex items-center justify-between mb-6"><h1 className="text-3xl font-bold">Quotes</h1></div><p className="text-sm text-muted-foreground">Loading quotes...</p></div>}>
+        <Suspense
+            fallback={
+                <div>
+                    <div className="flex items-center justify-between mb-6">
+                        <h1 className="text-3xl font-bold">Quotes</h1>
+                    </div>
+                    <p className="text-sm text-muted-foreground">Loading quotes...</p>
+                </div>
+            }
+        >
             <QuotesContent params={props.params} searchParamsPromise={props.searchParams} />
         </Suspense>
     );
 }
 
-async function QuotesContent({params, searchParamsPromise}: {params: Promise<{locale: string}>; searchParamsPromise: Promise<Record<string, string | string[] | undefined>>}) {
-    const {locale} = await params;
+async function QuotesContent({
+    params,
+    searchParamsPromise,
+}: {
+    params: Promise<{ locale: string }>;
+    searchParamsPromise: Promise<Record<string, string | string[] | undefined>>;
+}) {
+    const { locale } = await params;
     setRequestLocale(locale);
     const channelToken = await getActiveChannelToken();
     const [t, searchParams, activeCustomer, channel] = await Promise.all([
@@ -124,16 +139,13 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
     const skip = (currentPage - 1) * ITEMS_PER_PAGE;
     if (!activeCustomer) return await redirect('/sign-in');
 
-    const [result, error] = await client.query(
-        GetMyQuotesQuery,
-        {
-            options: {
-                take: ITEMS_PER_PAGE,
-                skip,
-                sort: {createdAt: 'DESC' as any},
-            },
+    const [result, error] = await client.query(GetMyQuotesQuery, {
+        options: {
+            take: ITEMS_PER_PAGE,
+            skip,
+            sort: { createdAt: 'DESC' as any },
         },
-    );
+    });
     if (error) {
         return (
             <div>
@@ -158,9 +170,7 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
             quoteNumber: quote.quoteNumber,
             createdAt: quote.createdAt,
             status: quote.status,
-            requestedBy: quote.customer
-                ? `${quote.customer.firstName} ${quote.customer.lastName}`
-                : '—',
+            requestedBy: quote.customer ? `${quote.customer.firstName} ${quote.customer.lastName}` : '—',
             itemCount: quote.currentVersion?.lineItems.length ?? 0,
             total: quote.currentVersion?.total ?? null,
         };
@@ -192,14 +202,24 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
                     {myQuoteRows.length > 0 && (
                         <section>
                             <h2 className="text-2xl font-bold mb-4">{t('myQuotesHeading')}</h2>
-                            <QuoteTable quotes={myQuoteRows} locale={locale} currencyCode={currencyCode} t={t} />
+                            <QuoteTable
+                                quotes={myQuoteRows}
+                                locale={locale}
+                                currencyCode={currencyCode}
+                                t={t}
+                            />
                         </section>
                     )}
 
                     {companyQuoteRows.length > 0 && (
                         <section>
                             <h2 className="text-2xl font-bold mb-4">{t('companyQuotesHeading')}</h2>
-                            <QuoteTable quotes={companyQuoteRows} locale={locale} currencyCode={currencyCode} t={t} />
+                            <QuoteTable
+                                quotes={companyQuoteRows}
+                                locale={locale}
+                                currencyCode={currencyCode}
+                                t={t}
+                            />
                         </section>
                     )}
                 </div>
@@ -215,11 +235,18 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
                                     className={currentPage === 1 ? 'pointer-events-none opacity-50' : ''}
                                 />
                             </PaginationItem>
-                            {Array.from({length: totalPages}, (_, i) => i + 1).map((page) => {
-                                if (page === 1 || page === totalPages || (page >= currentPage - 1 && page <= currentPage + 1)) {
+                            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {
+                                if (
+                                    page === 1 ||
+                                    page === totalPages ||
+                                    (page >= currentPage - 1 && page <= currentPage + 1)
+                                ) {
                                     return (
                                         <PaginationItem key={page}>
-                                            <PaginationLink href={`/account/quotes?page=${page}`} isActive={page === currentPage}>
+                                            <PaginationLink
+                                                href={`/account/quotes?page=${page}`}
+                                                isActive={page === currentPage}
+                                            >
                                                 {page}
                                             </PaginationLink>
                                         </PaginationItem>
@@ -227,7 +254,7 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
                                 } else if (page === currentPage - 2 || page === currentPage + 2) {
                                     return (
                                         <PaginationItem key={page}>
-                                            <PaginationEllipsis/>
+                                            <PaginationEllipsis />
                                         </PaginationItem>
                                     );
                                 }
@@ -235,8 +262,14 @@ async function QuotesContent({params, searchParamsPromise}: {params: Promise<{lo
                             })}
                             <PaginationItem>
                                 <PaginationNext
-                                    href={currentPage < totalPages ? `/account/quotes?page=${currentPage + 1}` : '#'}
-                                    className={currentPage === totalPages ? 'pointer-events-none opacity-50' : ''}
+                                    href={
+                                        currentPage < totalPages
+                                            ? `/account/quotes?page=${currentPage + 1}`
+                                            : '#'
+                                    }
+                                    className={
+                                        currentPage === totalPages ? 'pointer-events-none opacity-50' : ''
+                                    }
                                 />
                             </PaginationItem>
                         </PaginationContent>

package/dist/assets/storefront/src/app/[locale]/account/shared-carts/[id]/add-item-search.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import {useEffect, useRef, useState, useTransition} from 'react';
+import { Input } from '@/components/ui/input';
+import { Loader2, Plus, Search } from 'lucide-react';
 import Image from 'next/image';
-import {toast} from 'sonner';
-import {Input} from '@/components/ui/input';
-import {Search, Plus, Loader2} from 'lucide-react';
-import {searchVariantsForSharedCart, addItemToSharedCart, type VariantSearchResult} from '../actions';
+import { useEffect, useRef, useState, useTransition } from 'react';
+import { toast } from 'sonner';
+import { addItemToSharedCart, searchVariantsForSharedCart, type VariantSearchResult } from '../actions';
 
-export function AddItemSearch({sharedCartId, onAdded}: {sharedCartId: string; onAdded: () => void}) {
+export function AddItemSearch({ sharedCartId, onAdded }: { sharedCartId: string; onAdded: () => void }) {
     const [term, setTerm] = useState('');
     const [results, setResults] = useState<VariantSearchResult[]>([]);
     const [open, setOpen] = useState(false);
@@ -72,12 +72,14 @@ export function AddItemSearch({sharedCartId, onAdded}: {sharedCartId: string; on
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
                     value={term}
-                    onChange={e => onTermChange(e.target.value)}
+                    onChange={(e) => onTermChange(e.target.value)}
                     onFocus={() => results.length > 0 && setOpen(true)}
                     placeholder="Search products to add…"
                     className="pl-9"
                 />
-                {isSearching && <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />}
+                {isSearching && (
+                    <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
+                )}
             </div>
 
             {open && (
@@ -85,7 +87,7 @@ export function AddItemSearch({sharedCartId, onAdded}: {sharedCartId: string; on
                     {results.length === 0 ? (
                         <p className="p-3 text-sm text-muted-foreground">No products found.</p>
                     ) : (
-                        results.map(item => (
+                        results.map((item) => (
                             <button
                                 key={item.productVariantId}
                                 type="button"

package/dist/assets/storefront/src/app/[locale]/account/shared-carts/[id]/add-member-form.tsx

@@ -1,16 +1,24 @@
 'use client';
 
-import {useState, useTransition} from 'react';
-import {toast} from 'sonner';
-import {Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger} from '@/components/ui/dialog';
-import {Button} from '@/components/ui/button';
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
-import {Label} from '@/components/ui/label';
-import {UserPlus, Loader2} from 'lucide-react';
-import {ROLE_OPTIONS} from '@/components/commerce/shared-cart-role';
+import { ROLE_OPTIONS } from '@/components/commerce/shared-cart-role';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Loader2, UserPlus } from 'lucide-react';
+import { useState, useTransition } from 'react';
+import { toast } from 'sonner';
 import {
-    fetchCompanyMembers,
     addSharedCartMember,
+    fetchCompanyMembers,
     type CompanyMemberOption,
     type SharedCartRole,
 } from '../actions';
@@ -37,7 +45,7 @@ export function AddMemberDialog({
         }
     }
 
-    const available = (candidates ?? []).filter(c => !excludeCustomerIds.has(c.customerId));
+    const available = (candidates ?? []).filter((c) => !excludeCustomerIds.has(c.customerId));
 
     function add() {
         if (!selected) return;
@@ -65,7 +73,9 @@ export function AddMemberDialog({
             <DialogContent>
                 <DialogHeader>
                     <DialogTitle>Add a colleague</DialogTitle>
-                    <DialogDescription>Choose someone from your company and the access they should have.</DialogDescription>
+                    <DialogDescription>
+                        Choose someone from your company and the access they should have.
+                    </DialogDescription>
                 </DialogHeader>
 
                 <div className="space-y-4 py-2">
@@ -74,14 +84,16 @@ export function AddMemberDialog({
                         {candidates === null ? (
                             <p className="text-sm text-muted-foreground">Loading colleagues…</p>
                         ) : available.length === 0 ? (
-                            <p className="text-sm text-muted-foreground">Everyone in your company is already a member.</p>
+                            <p className="text-sm text-muted-foreground">
+                                Everyone in your company is already a member.
+                            </p>
                         ) : (
                             <Select value={selected} onValueChange={setSelected} disabled={isPending}>
                                 <SelectTrigger className="w-full">
                                     <SelectValue placeholder="Select a colleague" />
                                 </SelectTrigger>
                                 <SelectContent>
-                                    {available.map(c => (
+                                    {available.map((c) => (
                                         <SelectItem key={c.customerId} value={c.customerId}>
                                             {c.firstName} {c.lastName} — {c.emailAddress}
                                         </SelectItem>
@@ -93,12 +105,16 @@ export function AddMemberDialog({
 
                     <div className="space-y-2">
                         <Label>Role</Label>
-                        <Select value={role} onValueChange={v => setRole(v as SharedCartRole)} disabled={isPending}>
+                        <Select
+                            value={role}
+                            onValueChange={(v) => setRole(v as SharedCartRole)}
+                            disabled={isPending}
+                        >
                             <SelectTrigger className="w-full">
                                 <SelectValue />
                             </SelectTrigger>
                             <SelectContent>
-                                {ROLE_OPTIONS.map(o => (
+                                {ROLE_OPTIONS.map((o) => (
                                     <SelectItem key={o.value} value={o.value}>
                                         <span className="font-medium">{o.label}</span>
                                         <span className="text-muted-foreground"> — {o.hint}</span>

package/dist/assets/storefront/src/app/[locale]/account/shared-carts/[id]/members-panel.tsx

@@ -1,9 +1,18 @@
 'use client';
 
-import {useState, useTransition} from 'react';
-import {toast} from 'sonner';
-import {Badge} from '@/components/ui/badge';
-import {Button} from '@/components/ui/button';
+import { ROLE_OPTIONS, roleLabel } from '@/components/commerce/shared-cart-role';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -16,26 +25,17 @@ import {
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Crown, Loader2, MoreHorizontal, ShieldCheck, UserMinus } from 'lucide-react';
+import { useState, useTransition } from 'react';
+import { toast } from 'sonner';
 import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import {Crown, MoreHorizontal, ShieldCheck, UserMinus, Loader2} from 'lucide-react';
-import {ROLE_OPTIONS, roleLabel} from '@/components/commerce/shared-cart-role';
-import {
-    setSharedCartMemberRole,
     removeSharedCartMember,
+    setSharedCartMemberRole,
     transferSharedCartOwnership,
     type SharedCartData,
     type SharedCartRole,
 } from '../actions';
-import {AddMemberDialog} from './add-member-form';
+import { AddMemberDialog } from './add-member-form';
 
 export function MembersPanel({
     cart,
@@ -48,9 +48,9 @@ export function MembersPanel({
     canManage: boolean;
     onChanged: () => void;
 }) {
-    const [transferTarget, setTransferTarget] = useState<{customerId: string; name: string} | null>(null);
+    const [transferTarget, setTransferTarget] = useState<{ customerId: string; name: string } | null>(null);
     const isOpen = cart.status === 'Open';
-    const existingIds = new Set(cart.members.map(m => m.customer.id));
+    const existingIds = new Set(cart.members.map((m) => m.customer.id));
 
     return (
         <section className="border rounded-lg">
@@ -61,7 +61,7 @@ export function MembersPanel({
             </div>
 
             <ul className="divide-y">
-                {cart.members.map(member => {
+                {cart.members.map((member) => {
                     const isOwner = member.customer.id === cart.owner.id;
                     const isYou = member.customer.id === viewerId;
                     const name = `${member.customer.firstName} ${member.customer.lastName}`.trim();
@@ -71,9 +71,13 @@ export function MembersPanel({
                             <div className="min-w-0 flex-1">
                                 <p className="text-sm font-medium truncate">
                                     {name}
-                                    {isYou && <span className="text-muted-foreground font-normal"> (you)</span>}
+                                    {isYou && (
+                                        <span className="text-muted-foreground font-normal"> (you)</span>
+                                    )}
+                                </p>
+                                <p className="text-xs text-muted-foreground truncate">
+                                    {member.customer.emailAddress}
                                 </p>
-                                <p className="text-xs text-muted-foreground truncate">{member.customer.emailAddress}</p>
                             </div>
 
                             {isOwner ? (
@@ -92,7 +96,9 @@ export function MembersPanel({
                                     cartId={cart.id}
                                     member={member}
                                     onChanged={onChanged}
-                                    onTransfer={() => setTransferTarget({customerId: member.customer.id, name})}
+                                    onTransfer={() =>
+                                        setTransferTarget({ customerId: member.customer.id, name })
+                                    }
                                 />
                             )}
                         </li>
@@ -150,8 +156,18 @@ function MemberMenu({
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" disabled={isPending} aria-label="Member actions">
-                    {isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <MoreHorizontal className="h-4 w-4" />}
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 shrink-0"
+                    disabled={isPending}
+                    aria-label="Member actions"
+                >
+                    {isPending ? (
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                        <MoreHorizontal className="h-4 w-4" />
+                    )}
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-48">
@@ -161,8 +177,11 @@ function MemberMenu({
                         Change role
                     </DropdownMenuSubTrigger>
                     <DropdownMenuSubContent>
-                        <DropdownMenuRadioGroup value={member.role} onValueChange={v => changeRole(v as SharedCartRole)}>
-                            {ROLE_OPTIONS.map(o => (
+                        <DropdownMenuRadioGroup
+                            value={member.role}
+                            onValueChange={(v) => changeRole(v as SharedCartRole)}
+                        >
+                            {ROLE_OPTIONS.map((o) => (
                                 <DropdownMenuRadioItem key={o.value} value={o.value}>
                                     {o.label}
                                 </DropdownMenuRadioItem>
@@ -191,7 +210,7 @@ function TransferOwnershipDialog({
     onTransferred,
 }: {
     cartId: string;
-    target: {customerId: string; name: string} | null;
+    target: { customerId: string; name: string } | null;
     onClose: () => void;
     onTransferred: () => void;
 }) {
@@ -212,19 +231,19 @@ function TransferOwnershipDialog({
     }
 
     return (
-        <AlertDialog open={target !== null} onOpenChange={open => !open && onClose()}>
+        <AlertDialog open={target !== null} onOpenChange={(open) => !open && onClose()}>
             <AlertDialogContent>
                 <AlertDialogHeader>
                     <AlertDialogTitle>Transfer ownership?</AlertDialogTitle>
                     <AlertDialogDescription>
-                        {target?.name} will become the owner and gain full control of this cart. You&apos;ll keep your current
-                        role.
+                        {target?.name} will become the owner and gain full control of this cart. You&apos;ll
+                        keep your current role.
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
                     <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
                     <AlertDialogAction
-                        onClick={e => {
+                        onClick={(e) => {
                             e.preventDefault();
                             confirm();
                         }}

package/dist/assets/storefront/src/app/[locale]/account/shared-carts/[id]/page.tsx

@@ -1,18 +1,18 @@
-import type {Metadata} from 'next';
-import {Suspense} from 'react';
-import {client} from '@/lib/vendure/api';
-import {GetSharedCartQuery} from '@/lib/vendure/queries';
-import {getActiveCustomer} from '@/lib/vendure/actions';
-import {redirect, Link} from '@/i18n/navigation';
-import {setRequestLocale} from 'next-intl/server';
-import {ArrowLeft} from 'lucide-react';
-import {SharedCartDetailClient} from './shared-cart-detail-client';
+import { Link, redirect } from '@/i18n/navigation';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { client } from '@/lib/vendure/api';
+import { GetSharedCartQuery } from '@/lib/vendure/queries';
+import { ArrowLeft } from 'lucide-react';
+import type { Metadata } from 'next';
+import { setRequestLocale } from 'next-intl/server';
+import { Suspense } from 'react';
+import { SharedCartDetailClient } from './shared-cart-detail-client';
 
 export const metadata: Metadata = {
     title: 'Shared Cart',
 };
 
-export default function SharedCartDetailPage(props: {params: Promise<{locale: string; id: string}>}) {
+export default function SharedCartDetailPage(props: { params: Promise<{ locale: string; id: string }> }) {
     return (
         <Suspense fallback={<p className="text-sm text-muted-foreground">Loading shared cart…</p>}>
             <SharedCartDetailContent paramsPromise={props.params} />
@@ -20,13 +20,17 @@ export default function SharedCartDetailPage(props: {params: Promise<{locale: st
     );
 }
 
-async function SharedCartDetailContent({paramsPromise}: {paramsPromise: Promise<{locale: string; id: string}>}) {
-    const {locale, id} = await paramsPromise;
+async function SharedCartDetailContent({
+    paramsPromise,
+}: {
+    paramsPromise: Promise<{ locale: string; id: string }>;
+}) {
+    const { locale, id } = await paramsPromise;
     setRequestLocale(locale);
 
     const [activeCustomer, [result, error]] = await Promise.all([
         getActiveCustomer(),
-        client.query(GetSharedCartQuery, {id}),
+        client.query(GetSharedCartQuery, { id }),
     ]);
 
     if (!activeCustomer) return await redirect('/sign-in');
@@ -41,7 +45,11 @@ async function SharedCartDetailContent({paramsPromise}: {paramsPromise: Promise<
                 <ArrowLeft className="h-4 w-4" />
                 Shared carts
             </Link>
-            <SharedCartDetailClient initialCart={result.data.sharedCart} viewerId={activeCustomer.id} locale={locale} />
+            <SharedCartDetailClient
+                initialCart={result.data.sharedCart}
+                viewerId={activeCustomer.id}
+                locale={locale}
+            />
         </div>
     );
 }