@vendure-platform/create 0.3.0 → 0.5.0

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

@@ -3,6 +3,8 @@ import {Button} from '@/components/ui/button';
 import {Price} from '@/components/commerce/price';
 import {maskCode} from '@/lib/format';
 import {RequestQuoteButton} from './request-quote-button';
+import {AddToSharedCart} from '@/components/commerce/add-to-shared-cart';
+import {canCreateSharedCarts} from '@/components/commerce/shared-cart-role';
 import {getAuthToken} from '@/lib/auth';
 import {getActiveCustomer, getCompanyAccount} from '@/lib/vendure/actions';
 import {getTranslations} from 'next-intl/server';
@@ -71,6 +73,13 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
         }
     }
 
+    const canShareCart = canCreateSharedCarts(companyAccount?.permissions);
+    let shareDefaultName = 'Shared cart';
+    if (canShareCart) {
+        const customer = await getActiveCustomer();
+        if (customer?.firstName) shareDefaultName = `${customer.firstName}'s shared cart`;
+    }
+
     return (
         <div className="border rounded-lg p-6 bg-card">
             <h2 className="text-xl font-bold mb-4">{t('orderSummary')}</h2>
@@ -170,6 +179,20 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
                 />
             )}
 
+            {canShareCart && activeOrder.lines.length > 0 && (
+                <AddToSharedCart
+                    lines={activeOrder.lines.map(line => ({
+                        productVariantId: line.productVariant.id,
+                        quantity: line.quantity,
+                    }))}
+                    canCreate
+                    defaultName={shareDefaultName}
+                    label="Share this cart"
+                    size="default"
+                    className="w-full mt-2 gap-2"
+                />
+            )}
+
             <Button variant="outline" className="w-full mt-2" asChild>
                 <Link href="/">{t('continueShopping')}</Link>
             </Button>

package/dist/assets/storefront/src/components/commerce/account-nav-items.ts

@@ -14,6 +14,7 @@ import {
     Receipt,
     Heart,
     Zap,
+    ShoppingCart,
 } from 'lucide-react';
 
 export interface NavItem {
@@ -31,6 +32,7 @@ export const personalNavItems: NavItem[] = [
     { href: '/account/orders', label: 'orders', icon: Package },
     { href: '/account/store-credits', label: 'storeCredits', icon: CreditCard },
     { href: '/account/quotes', label: 'quotes', icon: FileText },
+    { href: '/account/shared-carts', label: 'sharedCarts', icon: ShoppingCart },
     { href: '/account/shopping-lists', label: 'shoppingLists', icon: Heart },
     { href: '/account/quick-order', label: 'quickOrder', icon: Zap },
     { href: '/account/approvals', label: 'approvals', icon: ShieldCheck },

package/dist/assets/storefront/src/components/commerce/add-to-shared-cart.tsx

@@ -0,0 +1,225 @@
+'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 {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {Users, Plus, Loader2, ChevronDown} from 'lucide-react';
+import {
+    fetchEditableOpenSharedCarts,
+    addItemsToSharedCart,
+    shareMyCart,
+    type EditableSharedCart,
+} from '@/app/[locale]/account/shared-carts/actions';
+
+type CartLine = {productVariantId: string; quantity: number};
+
+export function AddToSharedCart({
+    lines,
+    disabled,
+    canCreate,
+    defaultName,
+    label = 'Add to shared cart',
+    size = 'lg',
+    className,
+}: {
+    /** Items to add to (or seed a new) shared cart — one line on a PDP, the whole order on the cart page. */
+    lines: CartLine[];
+    disabled?: boolean;
+    canCreate?: boolean;
+    /** Pre-filled name for the create dialog. */
+    defaultName?: string;
+    label?: string;
+    size?: 'default' | 'lg';
+    className?: string;
+}) {
+    const router = useRouter();
+    const [carts, setCarts] = useState<EditableSharedCart[] | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isPending, startTransition] = useTransition();
+    const [createOpen, setCreateOpen] = useState(false);
+
+    function loadCarts(open: boolean) {
+        if (!open || carts !== null) return;
+        setIsLoading(true);
+        fetchEditableOpenSharedCarts().then(result => {
+            setCarts(result);
+            setIsLoading(false);
+        });
+    }
+
+    function add(cart: EditableSharedCart) {
+        if (lines.length === 0) return;
+        startTransition(async () => {
+            const result = await addItemsToSharedCart(cart.id, lines);
+            if (!result.success) {
+                toast.error(result.message ?? 'Could not add to the shared cart.');
+                return;
+            }
+            toast.success(`Added to “${cart.name}”`, {
+                description: 'Personal discounts don’t apply to shared carts — priced at your company rate.',
+                action: {label: 'View', onClick: () => router.push(`/account/shared-carts/${cart.id}`)},
+            });
+        });
+    }
+
+    const hasCarts = carts !== null && carts.length > 0;
+
+    return (
+        <>
+            <DropdownMenu onOpenChange={loadCarts}>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size={size} disabled={disabled || isPending} className={className ?? 'gap-2'}>
+                        {isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Users className="h-4 w-4" />}
+                        {label}
+                        <ChevronDown className="h-4 w-4 opacity-60" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-64">
+                    <DropdownMenuLabel>Add to a shared cart</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    {isLoading || carts === null ? (
+                        <div className="px-2 py-3 text-sm text-muted-foreground flex items-center gap-2">
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                            Loading…
+                        </div>
+                    ) : (
+                        <>
+                            {hasCarts &&
+                                carts.map(cart => (
+                                    <DropdownMenuItem key={cart.id} onSelect={() => add(cart)} disabled={isPending}>
+                                        <Users className="h-4 w-4 mr-2 opacity-70" />
+                                        <span className="truncate">{cart.name}</span>
+                                    </DropdownMenuItem>
+                                ))}
+                            {canCreate ? (
+                                <>
+                                    {hasCarts && <DropdownMenuSeparator />}
+                                    <DropdownMenuItem onSelect={() => setCreateOpen(true)} disabled={isPending}>
+                                        <Plus className="h-4 w-4 mr-2" />
+                                        Create new shared cart
+                                    </DropdownMenuItem>
+                                </>
+                            ) : (
+                                !hasCarts && (
+                                    <div className="px-2 py-2 text-sm text-muted-foreground">
+                                        No shared carts you can add to.
+                                    </div>
+                                )
+                            )}
+                        </>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+
+            <CreateSharedCartDialog
+                open={createOpen}
+                onOpenChange={setCreateOpen}
+                lines={lines}
+                defaultName={defaultName ?? 'Shared cart'}
+            />
+        </>
+    );
+}
+
+function CreateSharedCartDialog({
+    open,
+    onOpenChange,
+    lines,
+    defaultName,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    lines: CartLine[];
+    defaultName: string;
+}) {
+    const router = useRouter();
+    const [name, setName] = useState(defaultName);
+    const [description, setDescription] = useState('');
+    const [isPending, startTransition] = useTransition();
+
+    function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        const trimmed = name.trim();
+        if (!trimmed || lines.length === 0) return;
+        startTransition(async () => {
+            const result = await shareMyCart(trimmed, description.trim() || undefined, lines);
+            // The cart may be created even if some items failed to copy; land on
+            // it regardless so the user isn't stranded, warning on partial copy.
+            if (!result.id) {
+                toast.error(result.message ?? 'Could not create the shared cart.');
+                return;
+            }
+            if (!result.success && result.message) toast.warning(result.message);
+            router.push(`/account/shared-carts/${result.id}`);
+        });
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <form onSubmit={handleSubmit}>
+                    <DialogHeader>
+                        <DialogTitle>Create a shared cart</DialogTitle>
+                        <DialogDescription>
+                            Start a new shared cart with {lines.length} {lines.length === 1 ? 'item' : 'items'} so colleagues
+                            can build the order with you.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="space-y-4 py-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="create-shared-cart-name">Name</Label>
+                            <Input
+                                id="create-shared-cart-name"
+                                value={name}
+                                onChange={e => setName(e.target.value)}
+                                maxLength={255}
+                                required
+                                autoFocus
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <Label htmlFor="create-shared-cart-description">Description (optional)</Label>
+                            <Textarea
+                                id="create-shared-cart-description"
+                                value={description}
+                                onChange={e => setDescription(e.target.value)}
+                                rows={3}
+                                maxLength={1000}
+                                placeholder="What is this cart for?"
+                            />
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button type="button" variant="ghost" onClick={() => onOpenChange(false)} disabled={isPending}>
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={!name.trim() || isPending}>
+                            {isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                            Create shared cart
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}

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

@@ -21,6 +21,7 @@ import {MIN_ORDER_QUANTITY, normalizeQuantity, sanitizeQuantityInput} from '@/li
 import {useCartCount} from '@/lib/cart-count-context';
 import {PackagingUnitSelector} from '@/components/commerce/packaging-unit-selector';
 import {ShoppingListToggle} from '@/components/commerce/shopping-list-toggle';
+import {AddToSharedCart} from '@/components/commerce/add-to-shared-cart';
 import type {ProductDetail, PackagingUnitOption} from '@/lib/vendure/queries';
 import type {ShoppingListInfo} from '@/app/[locale]/account/shopping-lists/actions';
 
@@ -29,9 +30,11 @@ export interface ProductInfoProps {
     searchParams: { [key: string]: string | string[] | undefined };
     shoppingLists?: ShoppingListInfo[] | null;
     currencyCode?: string;
+    isCompanyUser?: boolean;
+    canCreateSharedCart?: boolean;
 }
 
-export function ProductInfo({ product, searchParams, shoppingLists, currencyCode }: ProductInfoProps) {
+export function ProductInfo({ product, searchParams, shoppingLists, currencyCode, isCompanyUser, canCreateSharedCart }: ProductInfoProps) {
     const tProduct = useTranslations('Product');
     const tCart = useTranslations('Cart');
     const pathname = usePathname();
@@ -503,6 +506,16 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
                         />
                     )}
                 </div>
+
+                {selectedVariant && isCompanyUser && (
+                    <div className="mt-2">
+                        <AddToSharedCart
+                            lines={[{productVariantId: selectedVariant.id, quantity}]}
+                            disabled={!canAddToCart}
+                            canCreate={canCreateSharedCart}
+                        />
+                    </div>
+                )}
             </div>
 
             {/* Volume Pricing — reference material, post-action */}

package/dist/assets/storefront/src/components/commerce/shared-cart-role.ts

@@ -0,0 +1,39 @@
+// Shared-cart role helpers. Roles are ordered view < edit < checkout; the
+// server is the source of truth for permissions, these drive UI gating only.
+import type { SharedCartRole } from '@/app/[locale]/account/shared-carts/actions';
+
+const ROLE_RANK: Record<SharedCartRole, number> = { view: 0, edit: 1, checkout: 2 };
+
+// Company permission to create and own a shared cart. Most buyers hold this; it also lets you
+// govern carts you own, but nothing else.
+export const USE_SHARED_CARTS_PERMISSION = 'UseSharedCarts';
+
+// Company permission to govern *any* cart in the company — manage members, transfer, rename,
+// delete — regardless of ownership. Admin-level; holding it also lets you create.
+export const MANAGE_SHARED_CARTS_PERMISSION = 'ManageSharedCarts';
+
+export function canCreateSharedCarts(permissions: readonly string[] | null | undefined): boolean {
+    return (
+        permissions?.some((p) => p === USE_SHARED_CARTS_PERMISSION || p === MANAGE_SHARED_CARTS_PERMISSION) ??
+        false
+    );
+}
+
+export function canManageSharedCarts(permissions: readonly string[] | null | undefined): boolean {
+    return permissions?.includes(MANAGE_SHARED_CARTS_PERMISSION) ?? false;
+}
+
+export const ROLE_OPTIONS: ReadonlyArray<{ value: SharedCartRole; label: string; hint: string }> = [
+    { value: 'view', label: 'Viewer', hint: 'Can view the cart and activity' },
+    { value: 'edit', label: 'Editor', hint: 'Can add, change, and remove items' },
+    { value: 'checkout', label: 'Checkout', hint: 'Can edit and place the order' },
+];
+
+export function roleLabel(role: string): string {
+    return ROLE_OPTIONS.find((o) => o.value === role)?.label ?? role;
+}
+
+export function roleAtLeast(role: SharedCartRole | undefined, min: SharedCartRole): boolean {
+    if (!role) return false;
+    return ROLE_RANK[role] >= ROLE_RANK[min];
+}

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

@@ -0,0 +1,24 @@
+import {Badge} from '@/components/ui/badge';
+import {CircleDot, Lock, CheckCircle2, 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},
+};
+
+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};
+    const Icon = config.icon;
+
+    return (
+        <Badge className={config.color} variant="secondary">
+            <Icon className="h-3 w-3 mr-1" />
+            {config.label}
+        </Badge>
+    );
+}