@vendure-platform/create 0.1.0

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

@@ -0,0 +1,190 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {client} from '@/lib/vendure/api';
+import {GetMyStoreCreditsQuery} from '@/lib/vendure/queries';
+import {getActiveCustomer} from '@/lib/vendure/actions';
+import {redirect} from '@/i18n/navigation';
+import {ErrorState} from '@/components/shared/error-state';
+import {Badge} from '@/components/ui/badge';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+} from '@/components/ui/pagination';
+import {Price} from '@/components/commerce/price';
+import {formatDate} from '@/lib/format';
+import {getTranslations, setRequestLocale} from 'next-intl/server';
+import {noIndexRobots} from '@/lib/metadata';
+import {RevealCode} from './reveal-code';
+import {ClaimStoreCreditForm} from './claim-form';
+
+export const metadata: Metadata = {
+    title: 'Store Credits',
+    robots: noIndexRobots(),
+};
+
+const ITEMS_PER_PAGE = 10;
+
+export default async function StoreCreditsPage(
+    props: {params: Promise<{locale: string}>; searchParams: Promise<Record<string, string | string[] | undefined>>},
+) {
+    return (
+        <Suspense fallback={<div><h1 className="text-3xl font-bold mb-6">Store Credits</h1><p className="text-sm text-muted-foreground">Loading...</p></div>}>
+            <StoreCreditsContent params={props.params} searchParamsPromise={props.searchParams} />
+        </Suspense>
+    );
+}
+
+async function StoreCreditsContent(
+    {params, searchParamsPromise}: {params: Promise<{locale: string}>; searchParamsPromise: Promise<Record<string, string | string[] | undefined>>},
+) {
+    const {locale} = await params;
+    setRequestLocale(locale);
+    const [t, activeCustomer] = await Promise.all([
+        getTranslations('StoreCredits'),
+        getActiveCustomer(),
+    ]);
+    if (!activeCustomer) {
+        await redirect('/sign-in');
+    }
+
+    const searchParams = await searchParamsPromise;
+    const pageParam = searchParams.page;
+    const currentPage = parseInt(Array.isArray(pageParam) ? pageParam[0] : pageParam || '1', 10);
+    const skip = (currentPage - 1) * ITEMS_PER_PAGE;
+
+    const [result, error] = await client.query(
+        GetMyStoreCreditsQuery,
+        {options: {take: ITEMS_PER_PAGE, skip, sort: {createdAt: 'DESC'}}},
+    );
+    if (error) {
+        return (
+            <ErrorState message="We couldn't load your store credits. Please try again later." />
+        );
+    }
+    const {data} = result;
+    const credits = data.myStoreCredits?.items ?? [];
+    const totalItems = data.myStoreCredits?.totalItems ?? 0;
+    const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
+    const hasCompanyCredits = credits.some(c => c.issuedTo?.id !== activeCustomer?.id);
+
+    return (
+        <div>
+            <h1 className="text-3xl font-bold mb-6">{t('pageTitle')}</h1>
+
+            <Card className="mb-6">
+                <CardHeader>
+                    <CardTitle>{t('claimCardTitle')}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <ClaimStoreCreditForm />
+                </CardContent>
+            </Card>
+
+            {credits.length === 0 ? (
+                <div className="text-center py-12">
+                    <p className="text-muted-foreground">{t('noCredits')}</p>
+                </div>
+            ) : (
+                <div className="border rounded-lg">
+                    <Table>
+                        <TableHeader className="bg-muted">
+                            <TableRow>
+                                <TableHead>{t('tableHeadCode')}</TableHead>
+                                <TableHead>{t('tableHeadType')}</TableHead>
+                                {hasCompanyCredits && <TableHead>{t('tableHeadOwner')}</TableHead>}
+                                <TableHead className="text-right">{t('tableHeadInitialValue')}</TableHead>
+                                <TableHead className="text-right">{t('tableHeadBalance')}</TableHead>
+                                <TableHead className="text-right">{t('tableHeadExpires')}</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {credits.map((credit) => (
+                                <TableRow key={credit.id} className="hover:bg-muted/50">
+                                    <TableCell>
+                                        <RevealCode code={credit.code} />
+                                    </TableCell>
+                                    <TableCell>
+                                        <Badge variant={credit.type === 'GiftCard' ? 'default' : 'secondary'}>
+                                            {credit.type === 'GiftCard' ? t('typeGiftCard') : t('typeStoreCredit')}
+                                        </Badge>
+                                    </TableCell>
+                                    {hasCompanyCredits && (
+                                        <TableCell className="text-muted-foreground">
+                                            {credit.issuedTo?.id === activeCustomer?.id
+                                                ? t('ownerYou')
+                                                : credit.issuedTo
+                                                    ? `${credit.issuedTo.firstName} ${credit.issuedTo.lastName}`
+                                                    : '—'}
+                                        </TableCell>
+                                    )}
+                                    <TableCell className="text-right">
+                                        <Price value={credit.initialValue} currencyCode={credit.currencyCode} />
+                                    </TableCell>
+                                    <TableCell className="text-right font-medium">
+                                        <Price value={credit.balance} currencyCode={credit.currencyCode} />
+                                    </TableCell>
+                                    <TableCell className="text-right text-muted-foreground">
+                                        {credit.expiryDate ? formatDate(credit.expiryDate, locale) : '—'}
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+            )}
+
+            {totalPages > 1 && (
+                <div className="mt-6">
+                    <Pagination>
+                        <PaginationContent>
+                            <PaginationItem>
+                                <PaginationPrevious
+                                    href={currentPage > 1 ? `/account/store-credits?page=${currentPage - 1}` : '#'}
+                                    className={currentPage === 1 ? 'pointer-events-none opacity-50' : ''}
+                                />
+                            </PaginationItem>
+                            {Array.from({length: totalPages}, (_, i) => i + 1).map((page) => {
+                                if (page === 1 || page === totalPages || (page >= currentPage - 1 && page <= currentPage + 1)) {
+                                    return (
+                                        <PaginationItem key={page}>
+                                            <PaginationLink href={`/account/store-credits?page=${page}`} isActive={page === currentPage}>
+                                                {page}
+                                            </PaginationLink>
+                                        </PaginationItem>
+                                    );
+                                } else if (page === currentPage - 2 || page === currentPage + 2) {
+                                    return (
+                                        <PaginationItem key={page}>
+                                            <PaginationEllipsis/>
+                                        </PaginationItem>
+                                    );
+                                }
+                                return null;
+                            })}
+                            <PaginationItem>
+                                <PaginationNext
+                                    href={currentPage < totalPages ? `/account/store-credits?page=${currentPage + 1}` : '#'}
+                                    className={currentPage === totalPages ? 'pointer-events-none opacity-50' : ''}
+                                />
+                            </PaginationItem>
+                        </PaginationContent>
+                    </Pagination>
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,38 @@
+'use client';
+
+import {useState} from 'react';
+import {Eye, Copy, Check} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {maskCode} from '@/lib/format';
+
+export function RevealCode({code}: { code: string }) {
+    const [revealed, setRevealed] = useState(false);
+    const [copied, setCopied] = useState(false);
+
+    const masked = maskCode(code);
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch {
+            // Clipboard API not available (insecure context, permissions)
+        }
+    };
+
+    return (
+        <span className="inline-flex items-center gap-1.5 font-mono text-xs">
+            {revealed ? code : masked}
+            {!revealed ? (
+                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setRevealed(true)}>
+                    <Eye className="h-3.5 w-3.5" />
+                </Button>
+            ) : (
+                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleCopy}>
+                    {copied ? <Check className="h-3.5 w-3.5 text-green-600" /> : <Copy className="h-3.5 w-3.5" />}
+                </Button>
+            )}
+        </span>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/verify-email/page.tsx

@@ -0,0 +1,117 @@
+import { Suspense } from 'react';
+import { redirect } from '@/i18n/navigation';
+import { client } from '@/lib/vendure/api';
+import { UpdateCustomerEmailAddressMutation } from '@/lib/vendure/mutations';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {Link} from '@/i18n/navigation';
+import {getTranslations} from 'next-intl/server';
+
+async function VerifyEmailContent({searchParams}: {searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    const t = await getTranslations('Account');
+    const resolvedParams = await searchParams;
+    const tokenParam = resolvedParams.token;
+    const token = Array.isArray(tokenParam) ? tokenParam[0] : tokenParam;
+
+    if (!token) {
+        return (
+            <Card className="max-w-md mx-auto">
+                <CardHeader>
+                    <CardTitle>{t('verifyEmail.invalidLink')}</CardTitle>
+                    <CardDescription>
+                        {t('verifyEmail.invalidLinkDesc')}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <p className="text-sm text-muted-foreground mb-4">
+                        {t('verifyEmail.checkEmail')}
+                    </p>
+                    <Button asChild>
+                        <Link href="/account/profile">{t('verifyEmail.goToProfile')}</Link>
+                    </Button>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    const [result, mutateError] = await client.mutate(UpdateCustomerEmailAddressMutation, { token: token! });
+
+    if (mutateError) {
+        return (
+            <Card className="max-w-md mx-auto">
+                <CardHeader>
+                    <CardTitle>{t('verifyEmail.error')}</CardTitle>
+                    <CardDescription>
+                        {t('verifyEmail.errorDesc')}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <p className="text-sm text-muted-foreground mb-4">
+                        {t('verifyEmail.errorMessage')}
+                    </p>
+                    <Button asChild>
+                        <Link href="/account/profile">{t('verifyEmail.goToProfile')}</Link>
+                    </Button>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    const updateResult = result.data.updateCustomerEmailAddress;
+
+    if (updateResult.__typename === 'Success') {
+        return (
+            <Card className="max-w-md mx-auto">
+                <CardHeader>
+                    <CardTitle>{t('verifyEmail.success')}</CardTitle>
+                    <CardDescription>
+                        {t('verifyEmail.successDesc')}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <p className="text-sm text-muted-foreground mb-4">
+                        {t('verifyEmail.successMessage')}
+                    </p>
+                    <Button asChild>
+                        <Link href="/account/profile">{t('verifyEmail.goToProfile')}</Link>
+                    </Button>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    return (
+        <Card className="max-w-md mx-auto">
+            <CardHeader>
+                <CardTitle>{t('verifyEmail.failed')}</CardTitle>
+                <CardDescription>
+                    {updateResult.message || t('verifyEmail.failedDefault')}
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <p className="text-sm text-muted-foreground mb-4">
+                    {t('verifyEmail.failedMessage')}
+                </p>
+                <Button asChild>
+                    <Link href="/account/profile">{t('verifyEmail.goToProfile')}</Link>
+                </Button>
+            </CardContent>
+        </Card>
+    );
+}
+
+export default async function VerifyEmailPage({searchParams}: {searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    return (
+        <div className="container mx-auto px-4 py-8 mt-[var(--page-top-offset)]">
+            <Suspense fallback={
+                <Card className="max-w-md mx-auto">
+                    <CardHeader>
+                        <CardTitle>Verifying Email...</CardTitle>
+                    </CardHeader>
+                </Card>
+            }>
+                <VerifyEmailContent searchParams={searchParams} />
+            </Suspense>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/cart/actions.ts

@@ -0,0 +1,128 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {
+    RemoveFromCartMutation,
+    AdjustCartItemMutation,
+    ApplyPromotionCodeMutation,
+    RemovePromotionCodeMutation,
+    ApplyStoreCreditToOrderMutation,
+    RemoveStoreCreditFromOrderMutation,
+} from '@/lib/vendure/mutations';
+import {normalizeQuantity} from '@/lib/quantity';
+import {updateTag} from 'next/cache';
+import {cartGuard} from '@/lib/cart-guard';
+import {getGuardError} from '@/lib/cart-guard-utils';
+
+function invalidateCart() {
+    updateTag('cart');
+    updateTag('active-order');
+}
+
+export async function removeFromCart(lineId: string) {
+    const guard = await cartGuard();
+    const guardError = getGuardError(guard);
+    if (guardError) return { success: false, error: guardError };
+
+    const [result, error] = await client.mutate(RemoveFromCartMutation, {lineId});
+    if (error) {
+        return { success: false, error: 'Failed to remove item from cart' };
+    }
+    if (result.data.removeOrderLine.__typename !== 'Order') {
+        const data = result.data.removeOrderLine;
+        return {
+            success: false,
+            error: 'interceptorError' in data ? data.interceptorError
+                : 'message' in data ? data.message
+                : 'Failed to remove item',
+        };
+    }
+    invalidateCart();
+    return { success: true };
+}
+
+export async function adjustQuantity(lineId: string, quantity: number) {
+    const guard = await cartGuard();
+    const guardError = getGuardError(guard);
+    if (guardError) return { success: false, error: guardError };
+
+    const nextQuantity = normalizeQuantity(quantity);
+
+    const [result, error] = await client.mutate(AdjustCartItemMutation, {lineId, quantity: nextQuantity});
+
+    if (error) {
+        return {
+            success: false,
+            error: 'Failed to update cart quantity',
+        };
+    }
+
+    if (result.data.adjustOrderLine.__typename !== 'Order') {
+        const data = result.data.adjustOrderLine;
+        return {
+            success: false,
+            error: 'interceptorError' in data ? data.interceptorError
+                : 'message' in data ? data.message
+                : 'Failed to update cart quantity',
+        };
+    }
+
+    invalidateCart();
+
+    return {success: true};
+}
+
+export async function applyCode(code: string): Promise<{ success: boolean; error?: string }> {
+    if (!code) return { success: false, error: 'Please enter a code' };
+    const guard = await cartGuard();
+    const guardError = getGuardError(guard);
+    if (guardError) return { success: false, error: guardError };
+
+    // Try coupon code first
+    const [couponRes, couponError] = await client.mutate(ApplyPromotionCodeMutation, {couponCode: code});
+    if (!couponError && couponRes.data.applyCouponCode.__typename === 'Order') {
+        invalidateCart();
+        return { success: true };
+    }
+
+    // Fall back to store credit / gift card
+    const [creditRes, creditError] = await client.mutate(ApplyStoreCreditToOrderMutation, {code});
+    if (creditError) {
+        return { success: false, error: 'Invalid code. Please check and try again.' };
+    }
+    if (creditRes.data.applyStoreCreditToOrder.__typename !== 'Order') {
+        return { success: false, error: 'Invalid code. Please check and try again.' };
+    }
+    invalidateCart();
+    return { success: true };
+}
+
+export async function removePromotionCode(formData: FormData): Promise<void> {
+    const code = formData.get('code') as string;
+    if (!code) return;
+    const guard = await cartGuard();
+    if (getGuardError(guard)) return;
+
+    await client.mutate(RemovePromotionCodeMutation, {couponCode: code});
+    invalidateCart();
+}
+
+export async function applyStoreCredit(formData: FormData): Promise<void> {
+    const code = formData.get('code') as string;
+    if (!code) return;
+    const guard = await cartGuard();
+    if (getGuardError(guard)) return;
+
+    await client.mutate(ApplyStoreCreditToOrderMutation, {code});
+    invalidateCart();
+}
+
+export async function removeStoreCredit(formData: FormData): Promise<void> {
+    const code = formData.get('code') as string;
+    if (!code) return;
+    const guard = await cartGuard();
+    if (getGuardError(guard)) return;
+
+    await client.mutate(RemoveStoreCreditFromOrderMutation, {code});
+    invalidateCart();
+}