@vendure-platform/create 0.3.0 → 0.5.0

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

@@ -0,0 +1,240 @@
+'use client';
+
+import {useState, useTransition} from 'react';
+import {toast} from 'sonner';
+import {Badge} from '@/components/ui/badge';
+import {Button} from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+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,
+    transferSharedCartOwnership,
+    type SharedCartData,
+    type SharedCartRole,
+} from '../actions';
+import {AddMemberDialog} from './add-member-form';
+
+export function MembersPanel({
+    cart,
+    viewerId,
+    canManage,
+    onChanged,
+}: {
+    cart: SharedCartData;
+    viewerId: string;
+    canManage: boolean;
+    onChanged: () => void;
+}) {
+    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));
+
+    return (
+        <section className="border rounded-lg">
+            <div className="px-4 py-3 border-b">
+                <h2 className="font-semibold">
+                    Members <span className="text-muted-foreground font-normal">({cart.members.length})</span>
+                </h2>
+            </div>
+
+            <ul className="divide-y">
+                {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();
+                    const showMenu = canManage && isOpen && !isOwner;
+                    return (
+                        <li key={member.customer.id} className="flex items-center gap-2 px-4 py-3">
+                            <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>}
+                                </p>
+                                <p className="text-xs text-muted-foreground truncate">{member.customer.emailAddress}</p>
+                            </div>
+
+                            {isOwner ? (
+                                <Badge className="shrink-0 gap-1">
+                                    <Crown className="h-3 w-3" />
+                                    Owner
+                                </Badge>
+                            ) : (
+                                <Badge variant="outline" className="shrink-0">
+                                    {roleLabel(member.role)}
+                                </Badge>
+                            )}
+
+                            {showMenu && (
+                                <MemberMenu
+                                    cartId={cart.id}
+                                    member={member}
+                                    onChanged={onChanged}
+                                    onTransfer={() => setTransferTarget({customerId: member.customer.id, name})}
+                                />
+                            )}
+                        </li>
+                    );
+                })}
+            </ul>
+
+            {canManage && isOpen && (
+                <div className="px-4 py-3 border-t">
+                    <AddMemberDialog cartId={cart.id} excludeCustomerIds={existingIds} onAdded={onChanged} />
+                </div>
+            )}
+
+            <TransferOwnershipDialog
+                cartId={cart.id}
+                target={transferTarget}
+                onClose={() => setTransferTarget(null)}
+                onTransferred={onChanged}
+            />
+        </section>
+    );
+}
+
+function MemberMenu({
+    cartId,
+    member,
+    onChanged,
+    onTransfer,
+}: {
+    cartId: string;
+    member: SharedCartData['members'][number];
+    onChanged: () => void;
+    onTransfer: () => void;
+}) {
+    const [isPending, startTransition] = useTransition();
+
+    function changeRole(role: SharedCartRole) {
+        if (role === member.role) return;
+        startTransition(async () => {
+            const result = await setSharedCartMemberRole(cartId, member.customer.id, role);
+            if (!result.success) toast.error(result.message ?? 'Could not change role.');
+            onChanged();
+        });
+    }
+
+    function remove() {
+        startTransition(async () => {
+            const result = await removeSharedCartMember(cartId, member.customer.id);
+            if (!result.success) toast.error(result.message ?? 'Could not remove member.');
+            else toast.success('Member removed.');
+            onChanged();
+        });
+    }
+
+    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>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                        <ShieldCheck className="h-4 w-4 mr-2" />
+                        Change role
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuSubContent>
+                        <DropdownMenuRadioGroup value={member.role} onValueChange={v => changeRole(v as SharedCartRole)}>
+                            {ROLE_OPTIONS.map(o => (
+                                <DropdownMenuRadioItem key={o.value} value={o.value}>
+                                    {o.label}
+                                </DropdownMenuRadioItem>
+                            ))}
+                        </DropdownMenuRadioGroup>
+                    </DropdownMenuSubContent>
+                </DropdownMenuSub>
+                <DropdownMenuItem onSelect={onTransfer}>
+                    <Crown className="h-4 w-4 mr-2" />
+                    Make owner
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onSelect={remove} className="text-destructive focus:text-destructive">
+                    <UserMinus className="h-4 w-4 mr-2" />
+                    Remove
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
+
+function TransferOwnershipDialog({
+    cartId,
+    target,
+    onClose,
+    onTransferred,
+}: {
+    cartId: string;
+    target: {customerId: string; name: string} | null;
+    onClose: () => void;
+    onTransferred: () => void;
+}) {
+    const [isPending, startTransition] = useTransition();
+
+    function confirm() {
+        if (!target) return;
+        startTransition(async () => {
+            const result = await transferSharedCartOwnership(cartId, target.customerId);
+            if (!result.success) {
+                toast.error(result.message ?? 'Could not transfer ownership.');
+                return;
+            }
+            toast.success(`${target.name} is now the owner.`);
+            onTransferred();
+            onClose();
+        });
+    }
+
+    return (
+        <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.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                        onClick={e => {
+                            e.preventDefault();
+                            confirm();
+                        }}
+                        disabled={isPending}
+                    >
+                        {isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                        Transfer ownership
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}

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

@@ -0,0 +1,47 @@
+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';
+
+export const metadata: Metadata = {
+    title: 'Shared Cart',
+};
+
+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} />
+        </Suspense>
+    );
+}
+
+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}),
+    ]);
+
+    if (!activeCustomer) return await redirect('/sign-in');
+    if (error || !result.data.sharedCart) return await redirect('/account/shared-carts');
+
+    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>
+            <SharedCartDetailClient initialCart={result.data.sharedCart} viewerId={activeCustomer.id} locale={locale} />
+        </div>
+    );
+}

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

@@ -0,0 +1,96 @@
+'use client';
+
+import {useState, useTransition} from 'react';
+import {toast} from 'sonner';
+import {Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle} from '@/components/ui/dialog';
+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 {renameSharedCart} from '../actions';
+
+export function RenameSharedCartDialog({
+    open,
+    onOpenChange,
+    cartId,
+    currentName,
+    currentDescription,
+    onRenamed,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    cartId: string;
+    currentName: string;
+    currentDescription: string;
+    onRenamed: () => void;
+}) {
+    const [name, setName] = useState(currentName);
+    const [description, setDescription] = useState(currentDescription);
+    const [wasOpen, setWasOpen] = useState(open);
+    const [isPending, startTransition] = useTransition();
+
+    // Re-seed the fields each time the dialog opens, without an effect (React's
+    // "adjust state during render" pattern).
+    if (open && !wasOpen) {
+        setWasOpen(true);
+        setName(currentName);
+        setDescription(currentDescription);
+    } else if (!open && wasOpen) {
+        setWasOpen(false);
+    }
+
+    function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        const trimmed = name.trim();
+        if (!trimmed) return;
+        startTransition(async () => {
+            const result = await renameSharedCart(cartId, trimmed, description.trim() || undefined);
+            if (!result.success) {
+                toast.error(result.message ?? 'Could not rename the cart.');
+                return;
+            }
+            toast.success('Cart updated.');
+            onRenamed();
+            onOpenChange(false);
+        });
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <form onSubmit={handleSubmit}>
+                    <DialogHeader>
+                        <DialogTitle>Rename shared cart</DialogTitle>
+                        <DialogDescription>Update the name and description your colleagues see.</DialogDescription>
+                    </DialogHeader>
+                    <div className="space-y-4 py-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="rename-name">Name</Label>
+                            <Input id="rename-name" value={name} onChange={e => setName(e.target.value)} maxLength={255} required autoFocus />
+                        </div>
+                        <div className="space-y-2">
+                            <Label htmlFor="rename-description">Description</Label>
+                            <Textarea
+                                id="rename-description"
+                                value={description}
+                                onChange={e => setDescription(e.target.value)}
+                                rows={3}
+                                maxLength={1000}
+                            />
+                        </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" />}
+                            Save
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}