@vendure-platform/create 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.5.0 (2026-08-04)
+
+Version bump only — no functional changes in @vendure-platform/create.
+
 ## 0.4.0 (2026-07-03)
 
 Version bump only — no functional changes in @vendure-platform/create.

package/dist/assets/storefront/messages/de.json

@@ -19,6 +19,7 @@
     "greeting": "Hallo, {name}",
     "catalog": "Katalog",
     "quotes": "Angebote",
+    "sharedCarts": "Geteilte Warenkörbe",
     "company": "Unternehmen",
     "businessUnit": "Geschäftseinheit",
     "shoppingCart": "Warenkorb",
@@ -565,6 +566,7 @@
       "orders": "Bestellungen",
       "storeCredits": "Guthaben",
       "quotes": "Angebote",
+      "sharedCarts": "Geteilte Warenkörbe",
       "shoppingLists": "Einkaufslisten",
       "quickOrder": "Schnellbestellung",
       "approvals": "Genehmigungen",

package/dist/assets/storefront/messages/en.json

@@ -19,6 +19,7 @@
     "greeting": "Hi, {name}",
     "catalog": "Catalog",
     "quotes": "Quotes",
+    "sharedCarts": "Shared Carts",
     "company": "Company",
     "businessUnit": "Business Unit",
     "shoppingCart": "Shopping Cart",
@@ -565,6 +566,7 @@
       "orders": "Orders",
       "storeCredits": "Store Credits",
       "quotes": "Quotes",
+      "sharedCarts": "Shared Carts",
       "shoppingLists": "Shopping Lists",
       "quickOrder": "Quick Order",
       "approvals": "Approvals",

package/dist/assets/storefront/package.json

@@ -37,7 +37,7 @@
         "@radix-ui/react-toggle": "^1.1.10",
         "@radix-ui/react-toggle-group": "^1.1.11",
         "@radix-ui/react-tooltip": "^1.2.8",
-        "@vendure-platform/storefront-client": "^0.4.0",
+        "@vendure-platform/storefront-client": "^0.5.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",

package/dist/assets/storefront/src/app/[locale]/(catalog)/product/[slug]/page.tsx

@@ -27,6 +27,8 @@ import { getActiveChannelCached } from '@/lib/vendure/cached';
 import { getActiveChannelToken } from '@/lib/channel-server';
 import { addGiftCardToCart, evaluateConfiguration, addConfigurationToOrder } from './actions';
 import { getShoppingListsWithMembership } from '@/app/[locale]/account/shopping-lists/actions';
+import { getCompanyAccount } from '@/lib/vendure/actions';
+import { canCreateSharedCarts } from '@/components/commerce/shared-cart-role';
 import { ConfiguratorForm } from '@/components/commerce/configurator-form';
 
 async function getProductData(slug: string, locale: string, ctx?: VendureContext, channelToken?: string) {
@@ -176,11 +178,14 @@ async function ProductDetailContent({
 
     const isGiftCard = product.customFields?.isGiftCard === true;
 
-    const [channel, shoppingLists] = await Promise.all([
+    const [channel, shoppingLists, companyAccount] = await Promise.all([
         getActiveChannelCached(ctx.channelToken),
         getShoppingListsWithMembership(),
+        getCompanyAccount(),
     ]);
     const currencyCode = channel.defaultCurrencyCode;
+    const isCompanyUser = !!companyAccount;
+    const canCreateSharedCart = canCreateSharedCarts(companyAccount?.permissions);
 
     let giftCardTemplates: GiftCardTemplate[] = [];
     if (isGiftCard) {
@@ -309,7 +314,7 @@ async function ProductDetailContent({
                             {productDescription && <div className="mt-6">{productDescription}</div>}
                         </div>
                         <div>
-                            <InfoComponent product={product} searchParams={searchParamsResolved} shoppingLists={shoppingLists} currencyCode={currencyCode} />
+                            <InfoComponent product={product} searchParams={searchParamsResolved} shoppingLists={shoppingLists} currencyCode={currencyCode} isCompanyUser={isCompanyUser} canCreateSharedCart={canCreateSharedCart} />
                         </div>
                     </div>
 

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

@@ -0,0 +1,152 @@
+'use client';
+
+import { roleLabel } from '@/components/commerce/shared-cart-role';
+import { formatDateTime } from '@/lib/format';
+import {
+    CircleDot,
+    CreditCard,
+    Crown,
+    Lock,
+    MinusCircle,
+    PencilLine,
+    PlusCircle,
+    ShieldCheck,
+    UserMinus,
+    UserPlus,
+    type LucideIcon,
+} from 'lucide-react';
+import type { SharedCartData } from '../actions';
+
+type Activity = SharedCartData['activity'][number];
+type Lines = SharedCartData['order']['lines'];
+
+const ICONS: Record<string, LucideIcon> = {
+    'cart-created': CircleDot,
+    'line-added': PlusCircle,
+    'line-removed': MinusCircle,
+    'line-adjusted': PencilLine,
+    'member-added': UserPlus,
+    'member-removed': UserMinus,
+    'role-changed': ShieldCheck,
+    'ownership-transferred': Crown,
+    'checkout-initiated': CreditCard,
+    'cart-closed': Lock,
+};
+
+// This activity-describing logic has a near-twin in the dashboard's shared-cart-detail
+// route. They're deliberately kept separate copies: dashboard code can't import from the
+// storefront (different bundle, no server-side deps allowed), so there's no shared module
+// to reach for. If you change how an activity reads here, mirror it there.
+function actorName(activity: Activity): string {
+    return activity.actorLabel;
+}
+
+// The product an item entry refers to, resolved from the cart's current lines: the affected line
+// for adds/adjusts, or the recorded variant id as a fallback. A removed line is gone, so those
+// entries fall back to the generic "an item".
+function lineName(activity: Activity, lines: Lines): string | null {
+    if (activity.targetLineId) {
+        const byLine = lines.find((l) => String(l.id) === String(activity.targetLineId));
+        if (byLine) return byLine.productVariant.name;
+    }
+    const variantId = (activity.detail as Record<string, unknown> | null)?.productVariantId;
+    if (variantId != null) {
+        const byVariant = lines.find((l) => String(l.productVariant.id) === String(variantId));
+        if (byVariant) return byVariant.productVariant.name;
+    }
+    return null;
+}
+
+function targetName(activity: Activity): string | null {
+    if (!activity.targetCustomer) return null;
+    return `${activity.targetCustomer.firstName} ${activity.targetCustomer.lastName}`.trim() || null;
+}
+
+function describe(activity: Activity, lines: Lines): string {
+    const detail = (activity.detail ?? {}) as Record<string, unknown>;
+    const qty = typeof detail.quantity === 'number' ? detail.quantity : undefined;
+    const item = lineName(activity, lines);
+    const who = targetName(activity);
+    switch (activity.action) {
+        case 'cart-created':
+            return 'created the cart';
+        case 'line-added':
+            if (item) return qty ? `added ${item} (×${qty})` : `added ${item}`;
+            return qty ? `added ${qty} × an item` : 'added an item';
+        case 'line-removed':
+            return item ? `removed ${item}` : 'removed an item';
+        case 'line-adjusted':
+            if (item) return qty != null ? `changed ${item} to qty ${qty}` : `changed ${item}`;
+            return qty != null ? `changed an item to qty ${qty}` : 'changed an item quantity';
+        case 'member-added':
+            if (who)
+                return detail.role ? `added ${who} as ${roleLabel(String(detail.role))}` : `added ${who}`;
+            return detail.role ? `added a member as ${roleLabel(String(detail.role))}` : 'added a member';
+        case 'member-removed':
+            return who ? `removed ${who}` : 'removed a member';
+        case 'role-changed':
+            if (who)
+                return detail.to
+                    ? `changed ${who}'s role to ${roleLabel(String(detail.to))}`
+                    : `changed ${who}'s role`;
+            return detail.to
+                ? `changed a member's role to ${roleLabel(String(detail.to))}`
+                : "changed a member's role";
+        case 'ownership-transferred':
+            return who ? `transferred ownership to ${who}` : 'transferred ownership';
+        case 'checkout-initiated':
+            return 'started checkout';
+        case 'cart-closed':
+            return 'closed the cart';
+        default:
+            return activity.action;
+    }
+}
+
+export function ActivityFeed({
+    activity,
+    lines,
+    locale,
+}: {
+    activity: ReadonlyArray<Activity>;
+    lines: Lines;
+    locale: string;
+}) {
+    // Newest first.
+    const items = [...activity].sort(
+        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+    );
+
+    return (
+        <section className="border rounded-lg">
+            <div className="px-4 py-3 border-b">
+                <h2 className="font-semibold">Activity</h2>
+            </div>
+            {items.length === 0 ? (
+                <p className="px-4 py-6 text-sm text-muted-foreground">No activity yet.</p>
+            ) : (
+                <ul className="divide-y">
+                    {items.map((item) => {
+                        const Icon = ICONS[item.action] ?? CircleDot;
+                        return (
+                            <li key={item.id} className="flex items-start gap-3 px-4 py-3">
+                                <div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-muted">
+                                    <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+                                </div>
+                                <div className="min-w-0 flex-1">
+                                    <p className="text-sm">
+                                        <span className="font-medium">{actorName(item)}</span>{' '}
+                                        <span className="text-muted-foreground">{describe(item, lines)}</span>
+                                    </p>
+                                    <p className="text-xs text-muted-foreground">
+                                        {formatDateTime(item.createdAt, locale)}
+                                    </p>
+                                </div>
+                            </li>
+                        );
+                    })}
+                </ul>
+            )}
+        </section>
+    );
+}

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

@@ -0,0 +1,130 @@
+'use client';
+
+import {useEffect, useRef, useState, useTransition} from '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';
+
+export function AddItemSearch({sharedCartId, onAdded}: {sharedCartId: string; onAdded: () => void}) {
+    const [term, setTerm] = useState('');
+    const [results, setResults] = useState<VariantSearchResult[]>([]);
+    const [open, setOpen] = useState(false);
+    const [isSearching, setIsSearching] = useState(false);
+    const [addingId, setAddingId] = useState<string | null>(null);
+    const [, startTransition] = useTransition();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    // Debounce in the change handler (not an effect) to match the storefront's
+    // search convention and avoid cascading effect re-renders.
+    function onTermChange(value: string) {
+        setTerm(value);
+        clearTimeout(debounceRef.current);
+        const q = value.trim();
+        if (q.length < 2) {
+            setResults([]);
+            setOpen(false);
+            setIsSearching(false);
+            return;
+        }
+        setIsSearching(true);
+        debounceRef.current = setTimeout(async () => {
+            const items = await searchVariantsForSharedCart(q);
+            setResults(items);
+            setOpen(true);
+            setIsSearching(false);
+        }, 300);
+    }
+
+    useEffect(() => {
+        function onClickOutside(e: MouseEvent) {
+            if (containerRef.current && !containerRef.current.contains(e.target as Node)) setOpen(false);
+        }
+        document.addEventListener('mousedown', onClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', onClickOutside);
+            clearTimeout(debounceRef.current);
+        };
+    }, []);
+
+    function add(item: VariantSearchResult) {
+        setAddingId(item.productVariantId);
+        startTransition(async () => {
+            const result = await addItemToSharedCart(sharedCartId, item.productVariantId, 1);
+            setAddingId(null);
+            if (!result.success) {
+                toast.error(result.message ?? 'Could not add item.');
+                return;
+            }
+            toast.success(`Added ${item.productName}`);
+            setTerm('');
+            setResults([]);
+            setOpen(false);
+            onAdded();
+        });
+    }
+
+    return (
+        <div className="relative" ref={containerRef}>
+            <div className="relative">
+                <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)}
+                    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" />}
+            </div>
+
+            {open && (
+                <div className="absolute z-10 mt-1 w-full rounded-lg border bg-background shadow-lg max-h-72 overflow-y-auto">
+                    {results.length === 0 ? (
+                        <p className="p-3 text-sm text-muted-foreground">No products found.</p>
+                    ) : (
+                        results.map(item => (
+                            <button
+                                key={item.productVariantId}
+                                type="button"
+                                className="flex items-center gap-3 w-full p-3 hover:bg-muted/50 text-left disabled:opacity-60"
+                                onClick={() => add(item)}
+                                disabled={addingId !== null}
+                            >
+                                <div className="h-8 w-8 shrink-0 rounded border bg-muted overflow-hidden">
+                                    {item.imageUrl && (
+                                        <Image
+                                            src={`${item.imageUrl}?preset=tiny`}
+                                            alt={item.productName}
+                                            width={32}
+                                            height={32}
+                                            className="h-full w-full object-cover"
+                                        />
+                                    )}
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                    <div className="flex items-center gap-1.5">
+                                        <p className="text-sm font-medium truncate">{item.productName}</p>
+                                        {!item.inStock && (
+                                            <span className="shrink-0 text-[10px] font-medium px-1 py-0.5 rounded bg-red-100 text-red-700">
+                                                Out of stock
+                                            </span>
+                                        )}
+                                    </div>
+                                    <p className="text-xs text-muted-foreground">{item.sku}</p>
+                                </div>
+                                {addingId === item.productVariantId ? (
+                                    <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                                ) : (
+                                    <Plus className="h-4 w-4 text-muted-foreground" />
+                                )}
+                            </button>
+                        ))
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,124 @@
+'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 {
+    fetchCompanyMembers,
+    addSharedCartMember,
+    type CompanyMemberOption,
+    type SharedCartRole,
+} from '../actions';
+
+export function AddMemberDialog({
+    cartId,
+    excludeCustomerIds,
+    onAdded,
+}: {
+    cartId: string;
+    excludeCustomerIds: Set<string>;
+    onAdded: () => void;
+}) {
+    const [open, setOpen] = useState(false);
+    const [candidates, setCandidates] = useState<CompanyMemberOption[] | null>(null);
+    const [selected, setSelected] = useState<string>('');
+    const [role, setRole] = useState<SharedCartRole>('edit');
+    const [isPending, startTransition] = useTransition();
+
+    function loadOnOpen(next: boolean) {
+        setOpen(next);
+        if (next && candidates === null) {
+            fetchCompanyMembers().then(setCandidates);
+        }
+    }
+
+    const available = (candidates ?? []).filter(c => !excludeCustomerIds.has(c.customerId));
+
+    function add() {
+        if (!selected) return;
+        startTransition(async () => {
+            const result = await addSharedCartMember(cartId, selected, role);
+            if (!result.success) {
+                toast.error(result.message ?? 'Could not add member.');
+                return;
+            }
+            toast.success('Member added.');
+            setSelected('');
+            setOpen(false);
+            onAdded();
+        });
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={loadOnOpen}>
+            <DialogTrigger asChild>
+                <Button variant="outline" className="w-full">
+                    <UserPlus className="h-4 w-4 mr-2" />
+                    Add colleague
+                </Button>
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Add a colleague</DialogTitle>
+                    <DialogDescription>Choose someone from your company and the access they should have.</DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-4 py-2">
+                    <div className="space-y-2">
+                        <Label>Colleague</Label>
+                        {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>
+                        ) : (
+                            <Select value={selected} onValueChange={setSelected} disabled={isPending}>
+                                <SelectTrigger className="w-full">
+                                    <SelectValue placeholder="Select a colleague" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {available.map(c => (
+                                        <SelectItem key={c.customerId} value={c.customerId}>
+                                            {c.firstName} {c.lastName} — {c.emailAddress}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        )}
+                    </div>
+
+                    <div className="space-y-2">
+                        <Label>Role</Label>
+                        <Select value={role} onValueChange={v => setRole(v as SharedCartRole)} disabled={isPending}>
+                            <SelectTrigger className="w-full">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {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>
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+
+                <DialogFooter>
+                    <Button type="button" variant="ghost" onClick={() => setOpen(false)} disabled={isPending}>
+                        Cancel
+                    </Button>
+                    <Button onClick={add} disabled={!selected || isPending}>
+                        {isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                        Add colleague
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}