@vendure-platform/create 0.4.0 → 0.5.1

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

@@ -0,0 +1,259 @@
+'use client';
+
+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,
+    DropdownMenuItem,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    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 {
+    removeSharedCartMember,
+    setSharedCartMemberRole,
+    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,55 @@
+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 }> }) {
+    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,117 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Loader2 } from 'lucide-react';
+import { useState, useTransition } from 'react';
+import { toast } from 'sonner';
+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>
+    );
+}