@vendure-platform/create 0.3.0 → 0.5.0

package/dist/assets/storefront/src/app/[locale]/account/shared-carts/actions.ts

@@ -0,0 +1,260 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {
+    CreateSharedCartMutation,
+    UpdateSharedCartMutation,
+    DeleteSharedCartMutation,
+    AddItemToSharedCartMutation,
+    AdjustSharedCartLineMutation,
+    RemoveSharedCartLineMutation,
+    AddSharedCartMemberMutation,
+    RemoveSharedCartMemberMutation,
+    SetSharedCartMemberRoleMutation,
+    TransferSharedCartOwnershipMutation,
+    InitiateSharedCartCheckoutMutation,
+} from '@/lib/vendure/mutations';
+import {GetSharedCartQuery, GetMySharedCartsQuery, SearchVariantsQuery, GetShopCompanyUsersQuery} from '@/lib/vendure/queries';
+import {CompanyUserFragment} from '@/lib/vendure/fragments';
+import {getActiveCustomer} from '@/lib/vendure/actions';
+import {roleAtLeast} from '@/components/commerce/shared-cart-role';
+import {readFragment, type ResultOf} from '@/graphql';
+import {revalidatePath, updateTag} from 'next/cache';
+
+export type SharedCartRole = 'view' | 'edit' | 'checkout';
+type ActionResult = {success: boolean; message?: string; id?: string};
+
+function invalidateCart() {
+    updateTag('cart');
+    updateTag('active-order');
+}
+
+function revalidateCart(id: string) {
+    revalidatePath(`/account/shared-carts/${id}`);
+    revalidatePath('/account/shared-carts');
+}
+
+// --- Read (server-action wrapper for the client poll) ----------------------
+
+export type SharedCartData = NonNullable<ResultOf<typeof GetSharedCartQuery>['sharedCart']>;
+
+export async function fetchSharedCart(id: string): Promise<SharedCartData | null> {
+    const [result, error] = await client.query(GetSharedCartQuery, {id});
+    if (error) return null;
+    return result.data.sharedCart ?? null;
+}
+
+// --- Lifecycle -------------------------------------------------------------
+
+export async function createSharedCart(name: string, description?: string): Promise<ActionResult> {
+    const [result, error] = await client.mutate(CreateSharedCartMutation, {
+        input: {name, description: description || undefined},
+    });
+    if (error) return {success: false, message: error.message};
+    revalidatePath('/account/shared-carts');
+    return {success: true, id: result.data.createSharedCart.id};
+}
+
+/**
+ * "Share my cart": create a blank shared cart, then copy the active order's
+ * lines into it. Non-atomic by design for v1 — if a line fails to copy we keep
+ * the cart and surface which step failed, so the user lands on a usable cart
+ * rather than losing the whole action.
+ */
+export async function shareMyCart(
+    name: string,
+    description: string | undefined,
+    lines: Array<{productVariantId: string; quantity: number}>,
+): Promise<ActionResult> {
+    const created = await createSharedCart(name, description);
+    if (!created.success || !created.id) return created;
+    for (const line of lines) {
+        const [, err] = await client.mutate(AddItemToSharedCartMutation, {
+            sharedCartId: created.id,
+            productVariantId: line.productVariantId,
+            quantity: line.quantity,
+        });
+        if (err) {
+            return {success: false, message: `Cart created, but an item couldn't be copied: ${err.message}`, id: created.id};
+        }
+    }
+    revalidatePath('/account/shared-carts');
+    return {success: true, id: created.id};
+}
+
+export async function renameSharedCart(id: string, name: string, description?: string): Promise<ActionResult> {
+    const [, error] = await client.mutate(UpdateSharedCartMutation, {
+        input: {id, name, description: description || undefined},
+    });
+    if (error) return {success: false, message: error.message};
+    revalidateCart(id);
+    return {success: true};
+}
+
+export async function deleteSharedCart(id: string): Promise<ActionResult> {
+    const [, error] = await client.mutate(DeleteSharedCartMutation, {id});
+    if (error) return {success: false, message: error.message};
+    revalidatePath('/account/shared-carts');
+    return {success: true};
+}
+
+// --- Lines (role >= edit; server enforces) ---------------------------------
+
+export async function addItemToSharedCart(sharedCartId: string, productVariantId: string, quantity: number): Promise<ActionResult> {
+    const [, error] = await client.mutate(AddItemToSharedCartMutation, {sharedCartId, productVariantId, quantity});
+    if (error) return {success: false, message: error.message};
+    revalidateCart(sharedCartId);
+    return {success: true};
+}
+
+/**
+ * Add several lines at once — powers the "Add to shared cart" picker when it
+ * carries a whole cart (the /cart page) rather than a single product. Non-atomic
+ * like {@link shareMyCart}: if a line fails we stop and report which step broke,
+ * leaving the earlier lines in place rather than rolling the cart back.
+ */
+export async function addItemsToSharedCart(
+    sharedCartId: string,
+    lines: Array<{productVariantId: string; quantity: number}>,
+): Promise<ActionResult> {
+    for (const line of lines) {
+        const [, error] = await client.mutate(AddItemToSharedCartMutation, {
+            sharedCartId,
+            productVariantId: line.productVariantId,
+            quantity: line.quantity,
+        });
+        if (error) return {success: false, message: error.message};
+    }
+    revalidateCart(sharedCartId);
+    return {success: true};
+}
+
+export async function adjustSharedCartLine(sharedCartId: string, lineId: string, quantity: number): Promise<ActionResult> {
+    const [, error] = await client.mutate(AdjustSharedCartLineMutation, {sharedCartId, lineId, quantity});
+    if (error) return {success: false, message: error.message};
+    revalidateCart(sharedCartId);
+    return {success: true};
+}
+
+export async function removeSharedCartLine(sharedCartId: string, lineId: string): Promise<ActionResult> {
+    const [, error] = await client.mutate(RemoveSharedCartLineMutation, {sharedCartId, lineId});
+    if (error) return {success: false, message: error.message};
+    revalidateCart(sharedCartId);
+    return {success: true};
+}
+
+export type EditableSharedCart = {id: string; name: string};
+
+/**
+ * Open carts the viewer can add items to (owner, or member with role >= edit).
+ * Powers the product-page "Add to shared cart" picker.
+ */
+export async function fetchEditableOpenSharedCarts(): Promise<EditableSharedCart[]> {
+    const [customer, [result, error]] = await Promise.all([
+        getActiveCustomer(),
+        client.query(GetMySharedCartsQuery, {options: {take: 100, filter: {status: {eq: 'Open'}}}}),
+    ]);
+    if (!customer || error) return [];
+    return result.data.mySharedCarts.items
+        .filter(cart => {
+            if (cart.owner.id === customer.id) return true;
+            return roleAtLeast(cart.members.find(m => m.customer.id === customer.id)?.role, 'edit');
+        })
+        .map(cart => ({id: cart.id, name: cart.name}));
+}
+
+export type VariantSearchResult = {
+    productVariantId: string;
+    productName: string;
+    variantName: string;
+    sku: string;
+    imageUrl?: string;
+    price: number;
+    currencyCode: string;
+    inStock: boolean;
+};
+
+export async function searchVariantsForSharedCart(term: string): Promise<VariantSearchResult[]> {
+    const [result, error] = await client.query(SearchVariantsQuery, {
+        input: {term: term.trim(), take: 10, groupByProduct: false},
+    });
+    if (error) return [];
+    return result.data.search.items
+        .filter(item => item.price.__typename === 'SinglePrice')
+        .map(item => ({
+            productVariantId: item.productVariantId,
+            productName: item.productName,
+            variantName: item.productVariantName,
+            sku: item.sku,
+            imageUrl: item.productAsset?.preview ?? undefined,
+            price: (item.price as {__typename: 'SinglePrice'; value: number}).value,
+            currencyCode: item.currencyCode,
+            inStock: item.inStock,
+        }));
+}
+
+// --- Members & governance (owner OR company-admin; server enforces) --------
+
+export type CompanyMemberOption = {
+    customerId: string;
+    firstName: string;
+    lastName: string;
+    emailAddress: string;
+};
+
+export async function fetchCompanyMembers(): Promise<CompanyMemberOption[]> {
+    const [result, error] = await client.query(GetShopCompanyUsersQuery, {});
+    if (error) return [];
+    return result.data.shopCompanyUsers
+        .map(user => readFragment(CompanyUserFragment, user))
+        .map(user => ({
+            customerId: user.customer.id,
+            firstName: user.customer.firstName,
+            lastName: user.customer.lastName,
+            emailAddress: user.customer.emailAddress,
+        }));
+}
+
+
+export async function addSharedCartMember(sharedCartId: string, customerId: string, role: SharedCartRole): Promise<ActionResult> {
+    const [, error] = await client.mutate(AddSharedCartMemberMutation, {input: {sharedCartId, customerId, role}});
+    if (error) return {success: false, message: error.message};
+    revalidateCart(sharedCartId);
+    return {success: true};
+}
+
+export async function removeSharedCartMember(sharedCartId: string, customerId: string): Promise<ActionResult> {
+    const [, error] = await client.mutate(RemoveSharedCartMemberMutation, {sharedCartId, customerId});
+    if (error) return {success: false, message: error.message};
+    revalidateCart(sharedCartId);
+    return {success: true};
+}
+
+export async function setSharedCartMemberRole(sharedCartId: string, customerId: string, role: SharedCartRole): Promise<ActionResult> {
+    const [, error] = await client.mutate(SetSharedCartMemberRoleMutation, {input: {sharedCartId, customerId, role}});
+    if (error) return {success: false, message: error.message};
+    revalidateCart(sharedCartId);
+    return {success: true};
+}
+
+export async function transferSharedCartOwnership(sharedCartId: string, newOwnerCustomerId: string): Promise<ActionResult> {
+    const [, error] = await client.mutate(TransferSharedCartOwnershipMutation, {sharedCartId, newOwnerCustomerId});
+    if (error) return {success: false, message: error.message};
+    revalidateCart(sharedCartId);
+    return {success: true};
+}
+
+// --- Checkout hand-off (role >= checkout; server enforces) -----------------
+
+/**
+ * Lock the shared cart and adopt its order as the viewer's active order. The
+ * caller then sends the buyer to the normal /checkout flow; approval, if the
+ * company requires it, runs through the existing approval UI.
+ */
+export async function initiateSharedCartCheckout(sharedCartId: string): Promise<ActionResult> {
+    const [, error] = await client.mutate(InitiateSharedCartCheckoutMutation, {sharedCartId});
+    if (error) return {success: false, message: error.message};
+    invalidateCart();
+    revalidateCart(sharedCartId);
+    return {success: true};
+}

package/dist/assets/storefront/src/app/[locale]/account/shared-carts/new/new-shared-cart-form.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import {useState, useTransition} from 'react';
+import {useRouter} from '@/i18n/navigation';
+import {toast} from 'sonner';
+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 {Loader2} from 'lucide-react';
+import {createSharedCart} from '../actions';
+
+interface NewSharedCartFormProps {
+    defaultName: string;
+}
+
+export function NewSharedCartForm({defaultName}: NewSharedCartFormProps) {
+    const router = useRouter();
+    const [name, setName] = useState(defaultName);
+    const [description, setDescription] = useState('');
+    const [isPending, startTransition] = useTransition();
+
+    const trimmed = name.trim();
+
+    function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        if (!trimmed) return;
+        startTransition(async () => {
+            const result = await createSharedCart(trimmed, description.trim() || undefined);
+            if (!result.success || !result.id) {
+                toast.error(result.message ?? 'Could not create the shared cart.');
+                return;
+            }
+            router.push(`/account/shared-carts/${result.id}`);
+        });
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="max-w-xl space-y-6">
+            <div className="space-y-2">
+                <Label htmlFor="shared-cart-name">Name</Label>
+                <Input
+                    id="shared-cart-name"
+                    value={name}
+                    onChange={e => setName(e.target.value)}
+                    placeholder="e.g. Q3 office supplies"
+                    autoFocus
+                    maxLength={255}
+                    required
+                />
+                <p className="text-xs text-muted-foreground">Give the cart a name your colleagues will recognise.</p>
+            </div>
+
+            <div className="space-y-2">
+                <Label htmlFor="shared-cart-description">Description (optional)</Label>
+                <Textarea
+                    id="shared-cart-description"
+                    value={description}
+                    onChange={e => setDescription(e.target.value)}
+                    placeholder="What is this cart for?"
+                    rows={3}
+                    maxLength={1000}
+                />
+            </div>
+
+            <div className="flex items-center gap-3">
+                <Button type="submit" disabled={!trimmed || isPending}>
+                    {isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                    Create shared cart
+                </Button>
+                <Button type="button" variant="ghost" onClick={() => router.push('/account/shared-carts')} disabled={isPending}>
+                    Cancel
+                </Button>
+            </div>
+        </form>
+    );
+}

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

@@ -0,0 +1,47 @@
+import type {Metadata} from 'next';
+import {client} from '@/lib/vendure/api';
+import {readFragment} from '@/graphql';
+import {GetActiveCustomerQuery} from '@/lib/vendure/queries';
+import {ActiveCustomerFragment} from '@/lib/vendure/fragments';
+import {getCompanyAccount} from '@/lib/vendure/actions';
+import {canCreateSharedCarts} from '@/components/commerce/shared-cart-role';
+import {redirect, Link} from '@/i18n/navigation';
+import {ArrowLeft} from 'lucide-react';
+import {NewSharedCartForm} from './new-shared-cart-form';
+
+export const metadata: Metadata = {
+    title: 'New Shared Cart',
+};
+
+export default async function NewSharedCartPage() {
+    const [[customerResult, customerError], companyAccount] = await Promise.all([
+        client.query(GetActiveCustomerQuery, {}),
+        getCompanyAccount(),
+    ]);
+    if (customerError || !customerResult.data.activeCustomer) {
+        return await redirect('/sign-in');
+    }
+
+    if (!canCreateSharedCarts(companyAccount?.permissions)) {
+        return await redirect('/account/shared-carts');
+    }
+    const customer = readFragment(ActiveCustomerFragment, customerResult.data.activeCustomer);
+    const defaultName = `${customer.firstName}'s shared cart`;
+
+    return (
+        <div>
+            <Link
+                href="/account/shared-carts"
+                className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
+            >
+                <ArrowLeft className="h-4 w-4" />
+                Shared carts
+            </Link>
+            <h1 className="text-3xl font-bold mb-1">New shared cart</h1>
+            <p className="text-sm text-muted-foreground mb-6">
+                Create an empty cart, then invite colleagues and add items.
+            </p>
+            <NewSharedCartForm defaultName={defaultName} />
+        </div>
+    );
+}

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

@@ -0,0 +1,263 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {client} from '@/lib/vendure/api';
+import {GetMySharedCartsQuery, GetCompanySharedCartsQuery} from '@/lib/vendure/queries';
+import {getActiveCustomer, getCompanyAccount} from '@/lib/vendure/actions';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import {Pagination} from '@/components/shared/pagination';
+import {Badge} from '@/components/ui/badge';
+import {ErrorState} from '@/components/shared/error-state';
+import {ArrowRight, Plus, Users, ShoppingCart} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {Price} from '@/components/commerce/price';
+import {SharedCartStatusBadge} from '@/components/commerce/shared-cart-status-badge';
+import {roleLabel, canCreateSharedCarts, canManageSharedCarts} from '@/components/commerce/shared-cart-role';
+import {formatDate} from '@/lib/format';
+import {cn} from '@/lib/utils';
+import {setRequestLocale} from 'next-intl/server';
+import {Link, redirect} from '@/i18n/navigation';
+
+export const metadata: Metadata = {
+    title: 'Shared Carts',
+};
+
+const ITEMS_PER_PAGE = 10;
+
+export default function SharedCartsPage(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">Shared Carts</h1>
+                    </div>
+                    <p className="text-sm text-muted-foreground">Loading shared carts…</p>
+                </div>
+            }
+        >
+            <SharedCartsContent params={props.params} searchParamsPromise={props.searchParams} />
+        </Suspense>
+    );
+}
+
+async function SharedCartsContent({
+    params,
+    searchParamsPromise,
+}: {
+    params: Promise<{locale: string}>;
+    searchParamsPromise: Promise<Record<string, string | string[] | undefined>>;
+}) {
+    const {locale} = await params;
+    setRequestLocale(locale);
+    const [searchParams, activeCustomer, companyAccount] = await Promise.all([
+        searchParamsPromise,
+        getActiveCustomer(),
+        getCompanyAccount(),
+    ]);
+    if (!activeCustomer) return await redirect('/sign-in');
+    const canCreate = canCreateSharedCarts(companyAccount?.permissions);
+    const isAdmin = canManageSharedCarts(companyAccount?.permissions);
+
+    // Company admins get a second "All company carts" view; everyone else only ever sees their own.
+    const scopeParam = searchParams.scope;
+    const scope =
+        isAdmin && (Array.isArray(scopeParam) ? scopeParam[0] : scopeParam) === 'company'
+            ? 'company'
+            : 'mine';
+
+    const pageParam = searchParams.page;
+    const parsedPage = parseInt(Array.isArray(pageParam) ? pageParam[0] : pageParam || '1', 10);
+    const currentPage = Number.isFinite(parsedPage) && parsedPage > 0 ? parsedPage : 1;
+    const skip = (currentPage - 1) * ITEMS_PER_PAGE;
+
+    const options = {take: ITEMS_PER_PAGE, skip, sort: {updatedAt: 'DESC' as never}};
+    const [result, error] =
+        scope === 'company'
+            ? await client.query(GetCompanySharedCartsQuery, {options})
+            : await client.query(GetMySharedCartsQuery, {options});
+
+    if (error) {
+        return (
+            <div>
+                <Header canCreate={canCreate} />
+                {isAdmin && <ScopeTabs scope={scope} />}
+                <ErrorState message="We couldn't load your shared carts. Please try again later." />
+            </div>
+        );
+    }
+
+    const list = 'companySharedCarts' in result.data ? result.data.companySharedCarts : result.data.mySharedCarts;
+    const carts = list.items;
+    const totalItems = list.totalItems;
+    const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
+
+    return (
+        <div>
+            <Header canCreate={canCreate} />
+            {isAdmin && <ScopeTabs scope={scope} />}
+
+            {carts.length === 0 ? (
+                <EmptyState canCreate={canCreate} scope={scope} />
+            ) : (
+                <div className="border rounded-lg overflow-hidden">
+                    <Table>
+                        <TableHeader className="bg-muted">
+                            <TableRow>
+                                <TableHead>Name</TableHead>
+                                <TableHead>Status</TableHead>
+                                <TableHead>Your role</TableHead>
+                                <TableHead>Owner</TableHead>
+                                <TableHead className="text-center">Members</TableHead>
+                                <TableHead className="text-center">Items</TableHead>
+                                <TableHead className="text-right">Total</TableHead>
+                                <TableHead>Updated</TableHead>
+                                <TableHead className="w-12" />
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {carts.map(cart => {
+                                const isOwner = cart.owner.id === activeCustomer.id;
+                                const membership = cart.members.find(m => m.customer.id === activeCustomer.id);
+                                const yourRole = isOwner ? 'owner' : membership?.role;
+                                return (
+                                    <TableRow key={cart.id} className="hover:bg-muted/50">
+                                        <TableCell className="font-medium">
+                                            <Link
+                                                href={`/account/shared-carts/${cart.id}`}
+                                                className="hover:underline underline-offset-4"
+                                            >
+                                                {cart.name}
+                                            </Link>
+                                        </TableCell>
+                                        <TableCell>
+                                            <SharedCartStatusBadge status={cart.status} />
+                                        </TableCell>
+                                        <TableCell>
+                                            {yourRole ? (
+                                                <Badge variant={isOwner ? 'default' : 'outline'}>
+                                                    {isOwner ? 'Owner' : roleLabel(yourRole)}
+                                                </Badge>
+                                            ) : (
+                                                <span className="text-muted-foreground">—</span>
+                                            )}
+                                        </TableCell>
+                                        <TableCell>
+                                            {cart.owner.firstName} {cart.owner.lastName}
+                                        </TableCell>
+                                        <TableCell className="text-center tabular-nums">{cart.members.length}</TableCell>
+                                        <TableCell className="text-center tabular-nums">{cart.order.totalQuantity}</TableCell>
+                                        <TableCell className="text-right">
+                                            <Price value={cart.order.totalWithTax} currencyCode={cart.order.currencyCode} taxLabel="incl" />
+                                        </TableCell>
+                                        <TableCell className="text-muted-foreground whitespace-nowrap">
+                                            {formatDate(cart.updatedAt, locale)}
+                                        </TableCell>
+                                        <TableCell>
+                                            <Button asChild variant="ghost" size="icon">
+                                                <Link href={`/account/shared-carts/${cart.id}`} aria-label={`Open ${cart.name}`}>
+                                                    <ArrowRight className="h-4 w-4" />
+                                                </Link>
+                                            </Button>
+                                        </TableCell>
+                                    </TableRow>
+                                );
+                            })}
+                        </TableBody>
+                    </Table>
+                </div>
+            )}
+
+            {totalPages > 1 && (
+                <div className="mt-6">
+                    <Pagination currentPage={currentPage} totalPages={totalPages} />
+                </div>
+            )}
+        </div>
+    );
+}
+
+function Header({canCreate}: {canCreate: boolean}) {
+    return (
+        <div className="flex flex-wrap items-start justify-between gap-4 mb-6">
+            <div>
+                <h1 className="text-3xl font-bold">Shared Carts</h1>
+                <p className="text-sm text-muted-foreground mt-1 max-w-prose">
+                    Build orders together with your colleagues. Add items, set who can edit, and hand off to
+                    checkout when you&apos;re ready.
+                </p>
+            </div>
+            {canCreate && (
+                <Button asChild>
+                    <Link href="/account/shared-carts/new">
+                        <Plus className="h-4 w-4 mr-2" />
+                        New shared cart
+                    </Link>
+                </Button>
+            )}
+        </div>
+    );
+}
+
+// Segmented control letting a company admin switch between their own carts and every cart in the
+// company. Rendered only for admins; the query and access check are enforced server-side.
+function ScopeTabs({scope}: {scope: 'mine' | 'company'}) {
+    const tabClass = (active: boolean) =>
+        cn(
+            'px-3 py-1.5 text-sm font-medium rounded-md transition-colors',
+            active ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground',
+        );
+    return (
+        <div className="mb-6 inline-flex rounded-lg border bg-muted p-1">
+            <Link href="/account/shared-carts" className={tabClass(scope === 'mine')}>
+                My carts
+            </Link>
+            <Link href="/account/shared-carts?scope=company" className={tabClass(scope === 'company')}>
+                All company carts
+            </Link>
+        </div>
+    );
+}
+
+function EmptyState({canCreate, scope}: {canCreate: boolean; scope: 'mine' | 'company'}) {
+    return (
+        <div className="border border-dashed rounded-lg py-16 px-6 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+                <Users className="h-6 w-6 text-muted-foreground" />
+            </div>
+            <h2 className="text-lg font-semibold">No shared carts yet</h2>
+            <p className="text-sm text-muted-foreground mt-1 mx-auto max-w-sm">
+                {scope === 'company'
+                    ? 'No one in your company has created a shared cart yet.'
+                    : canCreate
+                    ? 'Start a cart your team can build together, or share your current cart from the cart page.'
+                    : "You're not a member of any shared carts yet. A colleague can add you to one."}
+            </p>
+            {canCreate && (
+                <div className="mt-6 flex items-center justify-center gap-3">
+                    <Button asChild>
+                        <Link href="/account/shared-carts/new">
+                            <Plus className="h-4 w-4 mr-2" />
+                            New shared cart
+                        </Link>
+                    </Button>
+                    <Button asChild variant="outline">
+                        <Link href="/cart">
+                            <ShoppingCart className="h-4 w-4 mr-2" />
+                            Go to cart
+                        </Link>
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/cart/cart.tsx

@@ -19,6 +19,11 @@ import {getScenarioConfig} from "@/config/scenario";
 // configurator BOMs) without forking the whole cart orchestration.
 const CartItems = getScenarioConfig().overrides?.cart?.CartItems ?? DefaultCartItems;
 
+// Scenario-provided banner slot, rendered above the cart content. Used by
+// b2b-wholesale to surface an active PunchOut session ("Send to Procurement"
+// CTA). Null when the active scenario doesn't register one.
+const ScenarioCartBanner = getScenarioConfig().overrides?.cart?.Banner ?? null;
+
 export async function Cart() {
     const [ctx, t] = await Promise.all([
         getVendureContext(),
@@ -67,7 +72,12 @@ async function CartCached({
 
     // Handle empty cart case
     if (!activeOrder || activeOrder.lines.length === 0) {
-        return <CartItems activeOrder={null}/>;
+        return (
+            <div className="space-y-6">
+                {ScenarioCartBanner && <ScenarioCartBanner />}
+                <CartItems activeOrder={null} />
+            </div>
+        );
     }
 
     // Order is awaiting approval — show a message instead of editable cart
@@ -115,6 +125,7 @@ async function CartCached({
 
     return (
         <div className="space-y-6">
+            {ScenarioCartBanner && <ScenarioCartBanner />}
             {wasApproved && (
                 <p className="text-sm text-muted-foreground">
                     {approvedOrderWarning}