@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/actions.ts

@@ -0,0 +1,235 @@
+'use server';
+
+import { FragmentOf, readFragment } from '@/graphql';
+import { getAuthToken, setAuthToken } from '@/lib/auth';
+import { client } from '@/lib/vendure/api';
+import { ShoppingListFragment, ShoppingListItemFragment } from '@/lib/vendure/fragments';
+import {
+    AddToShoppingListMutation,
+    AddShoppingListItemsToOrderMutation,
+    CreateShoppingListMutation,
+    DeleteShoppingListMutation,
+    MoveShoppingListItemsMutation,
+    RemoveFromShoppingListMutation,
+    SetShoppingListVisibilityMutation,
+    UpdateShoppingListItemMutation,
+    UpdateShoppingListMutation,
+} from '@/lib/vendure/mutations';
+import {
+    GetActiveUserShoppingListQuery,
+    GetActiveUserShoppingListsQuery,
+    GetPublicShoppingListQuery,
+    GetShoppingListsWithItemVariantsQuery,
+} from '@/lib/vendure/queries';
+import { updateTag } from 'next/cache';
+import { redirect } from '@/i18n/navigation';
+
+// --- Data fetching (query + unmask) ---
+
+function unmaskShoppingListWithItems(
+    raw: FragmentOf<typeof ShoppingListFragment> & {
+        items: {
+            items: FragmentOf<typeof ShoppingListItemFragment>[];
+            totalItems: number;
+        };
+    },
+) {
+    const data = readFragment(ShoppingListFragment, raw);
+    return {
+        ...data,
+        items: raw.items.items.map((item) => readFragment(ShoppingListItemFragment, item)),
+        totalItems: raw.items.totalItems,
+    };
+}
+
+export async function getActiveUserShoppingLists() {
+    const [result, error] = await client.query(GetActiveUserShoppingListsQuery, undefined);
+    if (error) return null;
+    return result.data.activeUserShoppingLists.map((w) => ({
+        ...readFragment(ShoppingListFragment, w),
+        totalItems: w.items.totalItems,
+    }));
+}
+
+export async function getActiveUserShoppingList(id?: string) {
+    const [result, error] = await client.query(GetActiveUserShoppingListQuery, { id });
+    if (error) throw error;
+    const raw = result.data.activeUserShoppingList;
+    if (!raw) return null;
+    return unmaskShoppingListWithItems(raw);
+}
+
+export async function getPublicShoppingList(publicCode: string) {
+    const [result, error] = await client.query(GetPublicShoppingListQuery, { publicCode });
+    if (error) return null;
+    const raw = result.data.publicShoppingList;
+    if (!raw) return null;
+    return unmaskShoppingListWithItems(raw);
+}
+
+export async function getShoppingListItemsForVariants() {
+    const token = await getAuthToken();
+    if (!token) return [];
+    const [result, error] = await client.query(
+        GetActiveUserShoppingListQuery,
+        { id: undefined },
+        { authToken: token },
+    );
+    if (error) return [];
+    const rawItems = result.data.activeUserShoppingList?.items?.items ?? [];
+    return rawItems.map((raw) => {
+        const item = readFragment(ShoppingListItemFragment, raw);
+        return { variantId: item.productVariantId, id: item.id };
+    });
+}
+
+/** Transformed shopping list shape returned by getShoppingListsWithMembership. */
+export interface ShoppingListInfo {
+    id: string;
+    name: string;
+    isDefault: boolean;
+    items: Array<{ itemId: string; variantId: string }>;
+}
+
+export async function getShoppingListsWithMembership(): Promise<ShoppingListInfo[] | null> {
+    const [result, error] = await client.query(GetShoppingListsWithItemVariantsQuery, undefined);
+    if (error) return null;
+    const customerId = result.data.activeCustomer?.id;
+    if (!customerId) return null;
+    // Only return the current user's own lists — company members' lists
+    // are visible on the shopping lists page but shouldn't appear in the
+    // "add to list" picker on the PDP.
+    return result.data.activeUserShoppingLists
+        .filter((list) => list.customer?.id === customerId)
+        .map((list) => ({
+            id: list.id,
+            name: list.name,
+            isDefault: list.isDefault,
+            items: list.items.items.map((item) => ({
+                itemId: item.id,
+                variantId: item.productVariantId,
+            })),
+        }));
+}
+
+// --- Mutations ---
+
+async function refreshSessionAndInvalidate(authToken?: string, extraTags?: string[]) {
+    if (authToken) {
+        await setAuthToken(authToken);
+    }
+    updateTag('shopping-list');
+    for (const tag of extraTags ?? []) {
+        updateTag(tag);
+    }
+}
+
+export async function addToShoppingList(productVariantId: string, shoppingListId?: string) {
+    const [result, error] = await client.mutate(AddToShoppingListMutation, { productVariantId, shoppingListId });
+
+    if (error) {
+        return { success: false, error: 'Failed to add item to shopping list' };
+    }
+
+    await refreshSessionAndInvalidate(result.authToken);
+    const shoppingList = result.data.addToShoppingList;
+    const addedItem = shoppingList.items?.items?.find((i) => i.productVariant.id === productVariantId);
+    return { success: true, shoppingList, addedItemId: addedItem?.id };
+}
+
+export async function removeFromShoppingList(itemIds: string[], shoppingListId?: string) {
+    const [result, error] = await client.mutate(RemoveFromShoppingListMutation, { itemIds, shoppingListId });
+
+    if (error) {
+        return { success: false, error: 'Failed to remove item from shopping list' };
+    }
+
+    await refreshSessionAndInvalidate(result.authToken);
+    return { success: true, shoppingList: result.data.removeFromShoppingList };
+}
+
+export async function createShoppingList(name: string, description?: string) {
+    const [result, error] = await client.mutate(CreateShoppingListMutation, { input: { name, description } });
+
+    if (error) {
+        return { success: false, error: 'Failed to create shopping list' };
+    }
+
+    await refreshSessionAndInvalidate(result.authToken);
+    return { success: true, shoppingList: result.data.createShoppingList };
+}
+
+export async function updateShoppingList(id: string, name?: string, description?: string) {
+    const [result, error] = await client.mutate(UpdateShoppingListMutation, { input: { id, name, description } });
+
+    if (error) {
+        return { success: false, error: 'Failed to update shopping list' };
+    }
+
+    await refreshSessionAndInvalidate(result.authToken);
+    return { success: true, shoppingList: result.data.updateShoppingList };
+}
+
+export async function deleteShoppingList(id: string) {
+    const [result, error] = await client.mutate(DeleteShoppingListMutation, { id });
+
+    if (error) {
+        return { success: false, error: 'Failed to delete shopping list' };
+    }
+
+    await refreshSessionAndInvalidate(result.authToken);
+    await redirect('/account/shopping-lists');
+}
+
+export async function setShoppingListVisibility(id: string, isPublic: boolean) {
+    const [result, error] = await client.mutate(SetShoppingListVisibilityMutation, { id, isPublic });
+
+    if (error) {
+        return { success: false, error: 'Failed to update shopping list visibility' };
+    }
+
+    await refreshSessionAndInvalidate(result.authToken);
+    return { success: true, shoppingList: result.data.setShoppingListVisibility };
+}
+
+export async function addShoppingListItemsToOrder(itemIds: string[]) {
+    const [result, error] = await client.mutate(AddShoppingListItemsToOrderMutation, { itemIds });
+
+    if (error) {
+        return { success: false, error: 'Failed to add shopping list items to cart' };
+    }
+
+    const orderResult = result.data.addShoppingListItemsToOrder;
+    if (orderResult.__typename !== 'Order') {
+        return { success: false, error: orderResult.message };
+    }
+    await refreshSessionAndInvalidate(result.authToken, ['cart', 'active-order']);
+    return { success: true, order: orderResult };
+}
+
+export async function moveShoppingListItems(itemIds: string[], targetShoppingListId: string) {
+    const [result, error] = await client.mutate(MoveShoppingListItemsMutation, { itemIds, targetShoppingListId });
+
+    if (error) {
+        return { success: false, error: 'Failed to move shopping list items' };
+    }
+
+    await refreshSessionAndInvalidate(result.authToken);
+    return { success: true, shoppingList: result.data.moveShoppingListItems };
+}
+
+export async function updateShoppingListItem(input: {
+    id: string;
+    note?: string;
+    quantity?: number;
+    sortOrder?: number;
+}) {
+    const [result, error] = await client.mutate(UpdateShoppingListItemMutation, { input });
+
+    if (error) {
+        return { success: false, error: 'Failed to update shopping list item' };
+    }
+
+    await refreshSessionAndInvalidate(result.authToken);
+    return { success: true, item: result.data.updateShoppingListItem };
+}

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/create-shopping-list-form.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import { Plus } from 'lucide-react';
+import { createShoppingList } from './actions';
+import { toast } from 'sonner';
+import { useRouter } from '@/i18n/navigation';
+import {useTranslations} from 'next-intl';
+
+export function CreateShoppingListForm() {
+    const tRoot = useTranslations('ShoppingLists');
+    const t = useTranslations('ShoppingLists.createDialog');
+    const [open, setOpen] = useState(false);
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [isPending, startTransition] = useTransition();
+    const router = useRouter();
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!name.trim()) return;
+
+        startTransition(async () => {
+            const result = await createShoppingList(name.trim(), description.trim() || undefined);
+            if (result.success) {
+                toast.success('Shopping list created');
+                setOpen(false);
+                setName('');
+                setDescription('');
+                router.refresh();
+            } else {
+                toast.error(result.error || 'Failed to create shopping list');
+            }
+        });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button>
+                    <Plus className="mr-2 h-4 w-4" />
+                    {tRoot('newListButton')}
+                </Button>
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{t('title')}</DialogTitle>
+                </DialogHeader>
+                <form onSubmit={handleSubmit} className="space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="shopping-list-name">{t('nameLabel')}</Label>
+                        <Input
+                            id="shopping-list-name"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            placeholder={t('namePlaceholder')}
+                            required
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="shopping-list-description">{t('descriptionLabel')}</Label>
+                        <Input
+                            id="shopping-list-description"
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                            placeholder={t('descriptionPlaceholder')}
+                        />
+                    </div>
+                    <Button type="submit" disabled={isPending || !name.trim()} className="w-full">
+                        {isPending ? t('creatingButton') : t('createButton')}
+                    </Button>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/loading.tsx

@@ -0,0 +1,48 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function ShoppingListsLoading() {
+    return (
+        <div>
+            <div className="flex items-center justify-between mb-6">
+                <h1 className="text-3xl font-bold">My Shopping Lists</h1>
+                <Skeleton className="h-9 w-32" />
+            </div>
+
+            <div className="border rounded-lg">
+                <Table>
+                    <TableHeader className="bg-muted">
+                        <TableRow>
+                            <TableHead>Name</TableHead>
+                            <TableHead>Items</TableHead>
+                            <TableHead>Visibility</TableHead>
+                            <TableHead>Created</TableHead>
+                            <TableHead />
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {Array.from({ length: 3 }).map((_, i) => (
+                            <TableRow key={i}>
+                                <TableCell>
+                                    <Skeleton className="h-4 w-32" />
+                                </TableCell>
+                                <TableCell>
+                                    <Skeleton className="h-4 w-16" />
+                                </TableCell>
+                                <TableCell>
+                                    <Skeleton className="h-6 w-16" />
+                                </TableCell>
+                                <TableCell>
+                                    <Skeleton className="h-4 w-24" />
+                                </TableCell>
+                                <TableCell>
+                                    <Skeleton className="h-9 w-20" />
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/page.tsx

@@ -0,0 +1,176 @@
+import type { Metadata } from 'next';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { getActiveUserShoppingLists } from './actions';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import { ErrorState } from '@/components/shared/error-state';
+import { ArrowRightIcon } from 'lucide-react';
+import { formatDate } from '@/lib/format';
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import {Link} from '@/i18n/navigation';
+import { redirect } from '@/i18n/navigation';
+import { CreateShoppingListForm } from './create-shopping-list-form';
+
+export const metadata: Metadata = {
+    title: 'My Shopping Lists',
+};
+
+type ShoppingListRow = {
+    id: string;
+    name: string;
+    description: string | null;
+    isDefault: boolean;
+    isPublic: boolean;
+    totalItems: number;
+    createdAt: string;
+    owner?: string;
+};
+
+type ShoppingListsTranslations = Awaited<ReturnType<typeof getTranslations<'ShoppingLists'>>>;
+
+function ShoppingListTable({ lists, showOwner, locale, t }: { lists: ShoppingListRow[]; showOwner?: boolean; locale: string; t: ShoppingListsTranslations }) {
+    return (
+        <div className="border rounded-lg">
+            <Table>
+                <TableHeader className="bg-muted">
+                    <TableRow>
+                        <TableHead>{t('tableHeadName')}</TableHead>
+                        {showOwner && <TableHead>{t('tableHeadOwner')}</TableHead>}
+                        <TableHead>{t('tableHeadItems')}</TableHead>
+                        <TableHead>{t('tableHeadVisibility')}</TableHead>
+                        <TableHead>{t('tableHeadCreated')}</TableHead>
+                        <TableHead />
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {lists.map((list) => (
+                        <TableRow key={list.id} className="hover:bg-muted/50">
+                            <TableCell className="font-medium">
+                                <span className="flex items-center gap-2">
+                                    <Link href={`/account/shopping-lists/${list.id}`} className="hover:underline">
+                                        {list.name}
+                                    </Link>
+                                    {list.isDefault && (
+                                        <Badge variant="outline">{t('defaultBadge')}</Badge>
+                                    )}
+                                </span>
+                                {list.description && (
+                                    <p className="text-sm text-muted-foreground mt-1">
+                                        {list.description}
+                                    </p>
+                                )}
+                            </TableCell>
+                            {showOwner && (
+                                <TableCell>{list.owner}</TableCell>
+                            )}
+                            <TableCell>
+                                {t('itemCount', {count: list.totalItems})}
+                            </TableCell>
+                            <TableCell>
+                                <Badge variant={list.isPublic ? 'default' : 'secondary'}>
+                                    {list.isPublic ? t('publicBadge') : t('privateBadge')}
+                                </Badge>
+                            </TableCell>
+                            <TableCell>
+                                {formatDate(list.createdAt, locale)}
+                            </TableCell>
+                            <TableCell>
+                                <Button asChild variant="outline" size="sm">
+                                    <Link href={`/account/shopping-lists/${list.id}`}>
+                                        {t('viewButton')} <ArrowRightIcon className="ml-1 h-4 w-4" />
+                                    </Link>
+                                </Button>
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}
+
+export default async function ShoppingListsPage({params}: {params: Promise<{locale: string}>}) {
+    const {locale} = await params;
+    setRequestLocale(locale);
+    const [t, customer] = await Promise.all([
+        getTranslations('ShoppingLists'),
+        getActiveCustomer(),
+    ]);
+    if (!customer) {
+        return await redirect('/sign-in');
+    }
+
+    const shoppingLists = await getActiveUserShoppingLists();
+    if (!shoppingLists) {
+        return (
+            <div>
+                <h1 className="text-3xl font-bold mb-6">{t('pageTitle')}</h1>
+                <ErrorState message="We couldn't load your shopping lists. Please try again later." />
+            </div>
+        );
+    }
+
+    const myLists: ShoppingListRow[] = [];
+    const companyLists: ShoppingListRow[] = [];
+
+    for (const list of shoppingLists) {
+        const row: ShoppingListRow = {
+            id: list.id,
+            name: list.name,
+            description: list.description ?? null,
+            isDefault: list.isDefault,
+            isPublic: list.isPublic,
+            totalItems: list.totalItems,
+            createdAt: list.createdAt,
+            owner: list.customer
+                ? `${list.customer.firstName} ${list.customer.lastName}`
+                : undefined,
+        };
+        if (list.customer?.id === customer.id) {
+            myLists.push(row);
+        } else {
+            companyLists.push(row);
+        }
+    }
+
+    return (
+        <div>
+            <div className="flex items-center justify-between mb-6">
+                <h1 className="text-3xl font-bold">{t('pageTitle')}</h1>
+                <CreateShoppingListForm />
+            </div>
+
+            {shoppingLists.length === 0 ? (
+                <div className="text-center py-12">
+                    <p className="text-muted-foreground">{t('noLists')}</p>
+                </div>
+            ) : (
+                <div className="space-y-10">
+                    {myLists.length > 0 && (
+                        <section>
+                            {companyLists.length > 0 && (
+                                <h2 className="text-2xl font-bold mb-4">{t('myListsHeading')}</h2>
+                            )}
+                            <ShoppingListTable lists={myLists} locale={locale} t={t} />
+                        </section>
+                    )}
+
+                    {companyLists.length > 0 && (
+                        <section>
+                            <h2 className="text-2xl font-bold mb-4">{t('companyListsHeading')}</h2>
+                            <ShoppingListTable lists={companyLists} showOwner locale={locale} t={t} />
+                        </section>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/store-credits/actions.ts

@@ -0,0 +1,31 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {ClaimStoreCreditMutation} from '@/lib/vendure/mutations';
+import {revalidatePath} from 'next/cache';
+
+export async function claimStoreCreditAction(
+    prevState: { error?: string; success?: string } | undefined,
+    formData: FormData,
+) {
+    const code = formData.get('code') as string;
+    if (!code?.trim()) {
+        return {error: 'Please enter a code'};
+    }
+
+    const [result, error] = await client.mutate(ClaimStoreCreditMutation, {code: code.trim()});
+
+    if (error) {
+        return {error: 'An unexpected error occurred. Please try again.'};
+    }
+
+    const data = result.data.claimStoreCredit;
+
+    if (data.__typename !== 'StoreCredit') {
+        return {error: data.message};
+    }
+
+    revalidatePath('/account/store-credits');
+    const label = data.type === 'GiftCard' ? 'Gift card' : 'Store credit';
+    return {success: `${label} claimed successfully!`};
+}

package/dist/assets/storefront/src/app/[locale]/account/store-credits/claim-form.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import {useActionState, useRef, useEffect} from 'react';
+import {claimStoreCreditAction} from './actions';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+
+export function ClaimStoreCreditForm() {
+    const [state, formAction, isPending] = useActionState(claimStoreCreditAction, undefined);
+    const formRef = useRef<HTMLFormElement>(null);
+
+    useEffect(() => {
+        if (state?.success) {
+            formRef.current?.reset();
+        }
+    }, [state]);
+
+    return (
+        <div className="space-y-2">
+            <form ref={formRef} action={formAction} className="flex gap-2">
+                <Input
+                    type="text"
+                    name="code"
+                    placeholder="Enter gift card or store credit code"
+                    className="flex-1"
+                    required
+                    disabled={isPending}
+                />
+                <Button type="submit" disabled={isPending}>
+                    {isPending ? 'Claiming...' : 'Claim'}
+                </Button>
+            </form>
+            {state?.error && (
+                <p className="text-sm text-destructive">{state.error}</p>
+            )}
+            {state?.success && (
+                <p className="text-sm text-green-600">{state.success}</p>
+            )}
+        </div>
+    );
+}