@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/account/orders/page.tsx

@@ -0,0 +1,309 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {client} from '@/lib/vendure/api';
+import {GetCustomerOrdersQuery, GetCompanyOrdersQuery} from '@/lib/vendure/queries';
+import {getActiveCustomer, getCompanyAccount} from '@/lib/vendure/actions';
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
+import {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+} from '@/components/ui/pagination';
+import {RotateCcw, ShoppingBag} from "lucide-react";
+import {Button} from '@/components/ui/button';
+import {EmptyState} from '@/components/ui/empty-state';
+import {ErrorState} from '@/components/shared/error-state';
+
+import {Price} from '@/components/commerce/price';
+import {OrderStatusBadge} from '@/components/commerce/order-status-badge';
+import {formatDate} from '@/lib/format';
+import {getTranslations, setRequestLocale} from 'next-intl/server';
+import {Link} from "@/i18n/navigation";
+import {redirect} from "@/i18n/navigation";
+
+export const metadata: Metadata = {
+    title: 'Orders',
+};
+
+const ITEMS_PER_PAGE = 10;
+
+type OrderRow = {
+    id: string;
+    code: string;
+    createdAt: string;
+    state: string;
+    totalWithTax: number;
+    currencyCode: string;
+    placedBy: string;
+};
+
+// Match the server-side allowlist in ReorderFromHistoryPlugin.
+const REORDERABLE_STATES = new Set([
+    'PaymentAuthorized',
+    'PaymentSettled',
+    'PartiallyShipped',
+    'Shipped',
+    'PartiallyDelivered',
+    'Delivered',
+]);
+
+function OrderTable({orders, locale, t, tReorder}: {orders: OrderRow[]; locale: string; t: Awaited<ReturnType<typeof getTranslations<'Account'>>>; tReorder: Awaited<ReturnType<typeof getTranslations<'Reorder'>>>}) {
+    return (
+        <div className="border rounded-lg">
+            <Table>
+                <TableHeader className="bg-muted">
+                    <TableRow>
+                        <TableHead>{t('orderNumber')}</TableHead>
+                        <TableHead>Placed By</TableHead>
+                        <TableHead>{t('date')}</TableHead>
+                        <TableHead>{t('status')}</TableHead>
+                        <TableHead className="text-right">{t('totalHeader')}</TableHead>
+                        <TableHead className="text-right w-28"><span className="sr-only">Actions</span></TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {orders.map((order) => (
+                        <TableRow key={order.id} className="hover:bg-muted/50">
+                            <TableCell className="font-medium">
+                                <Link
+                                    href={`/account/orders/${order.code}`}
+                                    className="text-primary hover:underline"
+                                >
+                                    {order.code}
+                                </Link>
+                            </TableCell>
+                            <TableCell className="text-sm">{order.placedBy}</TableCell>
+                            <TableCell>{formatDate(order.createdAt, locale)}</TableCell>
+                            <TableCell><OrderStatusBadge state={order.state}/></TableCell>
+                            <TableCell className="text-right">
+                                <Price value={order.totalWithTax} currencyCode={order.currencyCode} taxLabel="incl" />
+                            </TableCell>
+                            <TableCell className="text-right">
+                                {REORDERABLE_STATES.has(order.state) && (
+                                    <Button asChild variant="ghost" size="sm">
+                                        <Link href={`/account/orders/${order.code}?reorder=1`}>
+                                            <RotateCcw className="h-3.5 w-3.5 mr-1.5"/>
+                                            {tReorder('trigger')}
+                                        </Link>
+                                    </Button>
+                                )}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}
+
+async function MyOrdersSection({
+    searchParams,
+    activeCustomerName,
+    locale,
+    showHeading,
+}: {
+    searchParams: Promise<Record<string, string | string[] | undefined>>;
+    activeCustomerName: string;
+    locale: string;
+    showHeading: boolean;
+}) {
+    const t = await getTranslations('Account');
+    const tReorder = await getTranslations('Reorder');
+    const resolvedParams = await searchParams;
+    const pageParam = resolvedParams.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(
+        GetCustomerOrdersQuery,
+        {
+            options: {
+                take: ITEMS_PER_PAGE,
+                skip,
+                sort: { createdAt: 'DESC' },
+                filter: { state: { notEq: 'AddingItems' } },
+            },
+        },
+    );
+    if (error) {
+        return <ErrorState message="We couldn't load your orders. Please try again later." />;
+    }
+    const {data} = result;
+
+    if (!data.activeCustomer) {
+        return await redirect('/sign-in');
+    }
+
+    const orders = data.activeCustomer.orders.items;
+    const totalItems = data.activeCustomer.orders.totalItems;
+    const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
+
+    if (orders.length === 0) {
+        return null;
+    }
+
+    const rows: OrderRow[] = orders.map((order) => ({
+        id: order.id,
+        code: order.code,
+        createdAt: order.createdAt,
+        state: order.state,
+        totalWithTax: order.totalWithTax,
+        currencyCode: order.currencyCode,
+        placedBy: activeCustomerName,
+    }));
+
+    return (
+        <section>
+            {showHeading && <h2 className="text-2xl font-bold mb-4">{t('myOrders')}</h2>}
+            <OrderTable orders={rows} locale={locale} t={t} tReorder={tReorder} />
+
+            {totalPages > 1 && (
+                <div className="mt-6">
+                    <Pagination>
+                        <PaginationContent>
+                            <PaginationItem>
+                                <PaginationPrevious
+                                    href={currentPage > 1 ? `/account/orders?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/orders?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/orders?page=${currentPage + 1}` : '#'}
+                                    className={currentPage === totalPages ? 'pointer-events-none opacity-50' : ''}
+                                />
+                            </PaginationItem>
+                        </PaginationContent>
+                    </Pagination>
+                </div>
+            )}
+        </section>
+    );
+}
+
+async function CompanyOrdersSection({activeCustomerId, locale}: {activeCustomerId: string; locale: string}) {
+    const t = await getTranslations('Account');
+    const tReorder = await getTranslations('Reorder');
+    const [result, error] = await client.query(
+        GetCompanyOrdersQuery,
+        {options: {take: 50, sort: {createdAt: 'DESC'}}},
+    );
+    if (error) {
+        return <ErrorState message="We couldn't load company orders. Please try again later." />;
+    }
+    const {data} = result;
+    const allOrders = data.companyOrders?.items ?? [];
+
+    // Exclude the current user's own orders — those are already in "My Orders"
+    const otherOrders = allOrders.filter((o) => o.customer?.id !== activeCustomerId);
+
+    if (otherOrders.length === 0) {
+        return null;
+    }
+
+    const rows: OrderRow[] = otherOrders.map((order) => ({
+        id: order.id,
+        code: order.code,
+        createdAt: order.createdAt,
+        state: order.state,
+        totalWithTax: order.totalWithTax,
+        currencyCode: order.currencyCode,
+        placedBy: order.customer
+            ? `${order.customer.firstName} ${order.customer.lastName}`
+            : '—',
+    }));
+
+    return (
+        <section>
+            <h2 className="text-2xl font-bold mb-4">Company Orders</h2>
+            <OrderTable orders={rows} locale={locale} t={t} tReorder={tReorder} />
+        </section>
+    );
+}
+
+async function OrdersEmptyState() {
+    const [tAccount, tCommon] = await Promise.all([
+        getTranslations('Account'),
+        getTranslations('Common'),
+    ]);
+    return (
+        <EmptyState
+            icon={ShoppingBag}
+            heading={tAccount('noOrders')}
+            action={{label: tCommon('startShopping'), href: '/'}}
+        />
+    );
+}
+
+export default async function OrdersPage(props: {params: Promise<{locale: string}>; searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    return (
+        <Suspense fallback={<div><h1 className="text-3xl font-bold mb-6">Orders</h1><p className="text-sm text-muted-foreground">Loading orders...</p></div>}>
+            <OrdersContent params={props.params} searchParams={props.searchParams} />
+        </Suspense>
+    );
+}
+
+async function OrdersContent({params, searchParams}: {params: Promise<{locale: string}>; searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    const {locale} = await params;
+    setRequestLocale(locale);
+    const t = await getTranslations('Account');
+    const [activeCustomer, companyAccount] = await Promise.all([
+        getActiveCustomer(),
+        getCompanyAccount(),
+    ]);
+    if (!activeCustomer) return await redirect('/sign-in');
+
+    const permissions = companyAccount?.permissions ?? [];
+    const canViewCompanyOrders = permissions.includes('ViewAllOrders');
+    const activeCustomerName = `${activeCustomer.firstName} ${activeCustomer.lastName}`;
+
+    // Resolve company orders first so we know whether to render the
+    // "My Orders" subheading — with only one section there's no need
+    // to duplicate the page title as a section heading.
+    const companyOrders = canViewCompanyOrders
+        ? await CompanyOrdersSection({activeCustomerId: activeCustomer.id, locale})
+        : null;
+    const myOrders = await MyOrdersSection({
+        searchParams,
+        activeCustomerName,
+        locale,
+        showHeading: companyOrders !== null,
+    });
+    const hasAnyContent = myOrders !== null || companyOrders !== null;
+
+    return (
+        <div>
+            <h1 className="text-3xl font-bold mb-6">{t('ordersPageTitle')}</h1>
+            {hasAnyContent ? (
+                <div className="space-y-10">
+                    {myOrders}
+                    {companyOrders}
+                </div>
+            ) : (
+                <OrdersEmptyState />
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,106 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {
+    UpdateCustomerPasswordMutation,
+    UpdateCustomerMutation,
+    RequestUpdateCustomerEmailAddressMutation,
+} from '@/lib/vendure/mutations';
+import {revalidatePath, revalidateTag} from 'next/cache';
+
+export async function updatePasswordAction(prevState: { error?: string; success?: boolean } | undefined, formData: FormData) {
+    const currentPassword = formData.get('currentPassword') as string;
+    const newPassword = formData.get('newPassword') as string;
+    const confirmPassword = formData.get('confirmPassword') as string;
+
+    if (!currentPassword || !newPassword || !confirmPassword) {
+        return {error: 'All fields are required'};
+    }
+
+    if (newPassword !== confirmPassword) {
+        return {error: 'New passwords do not match'};
+    }
+
+    if (currentPassword === newPassword) {
+        return {error: 'New password must be different from current password'};
+    }
+
+    const [result, error] = await client.mutate(UpdateCustomerPasswordMutation, {
+        currentPassword,
+        newPassword,
+    });
+
+    if (error) {
+        return {error: 'An unexpected error occurred. Please try again.'};
+    }
+
+    const updateResult = result.data.updateCustomerPassword;
+
+    if (updateResult.__typename !== 'Success') {
+        return {error: updateResult.message};
+    }
+
+    return {success: true};
+}
+
+export async function updateCustomerAction(prevState: { error?: string; success?: boolean } | undefined, formData: FormData) {
+    const firstName = formData.get('firstName') as string;
+    const lastName = formData.get('lastName') as string;
+
+    if (!firstName || !lastName) {
+        return {error: 'First name and last name are required'};
+    }
+
+    const [result, error] = await client.mutate(UpdateCustomerMutation, {
+        input: {
+            firstName,
+            lastName,
+        },
+    });
+
+    if (error) {
+        return {error: 'An unexpected error occurred. Please try again.'};
+    }
+
+    const updateResult = result.data.updateCustomer;
+
+    if (!updateResult || !updateResult.id) {
+        return {error: 'Failed to update customer information'};
+    }
+
+    revalidateTag('active-customer', {expire: 0});
+    revalidatePath('/account/profile');
+    return {success: true};
+}
+
+export async function requestEmailUpdateAction(prevState: { error?: string; success?: boolean } | undefined, formData: FormData) {
+    const password = formData.get('password') as string;
+    const newEmailAddress = formData.get('newEmailAddress') as string;
+
+    if (!password || !newEmailAddress) {
+        return {error: 'Password and new email address are required'};
+    }
+
+    // Basic email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(newEmailAddress)) {
+        return {error: 'Please enter a valid email address'};
+    }
+
+    const [result, error] = await client.mutate(RequestUpdateCustomerEmailAddressMutation, {
+        password,
+        newEmailAddress,
+    });
+
+    if (error) {
+        return {error: 'An unexpected error occurred. Please try again.'};
+    }
+
+    const updateResult = result.data.requestUpdateCustomerEmailAddress;
+
+    if (updateResult.__typename !== 'Success') {
+        return {error: updateResult.message};
+    }
+
+    return {success: true};
+}

package/dist/assets/storefront/src/app/[locale]/account/profile/change-password-form.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useActionState, useEffect } from 'react';
+import { updatePasswordAction } from './actions';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useTranslations } from 'next-intl';
+
+export function ChangePasswordForm() {
+    const t = useTranslations('Account');
+    const [state, formAction, isPending] = useActionState(updatePasswordAction, undefined);
+
+    useEffect(() => {
+        if (state?.success) {
+            const form = document.getElementById('change-password-form') as HTMLFormElement;
+            form?.reset();
+        }
+    }, [state?.success]);
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{t('changePassword')}</CardTitle>
+                <CardDescription>
+                    {t('changePasswordDescription')}
+                </CardDescription>
+            </CardHeader>
+            <form id="change-password-form" action={formAction}>
+                <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="currentPassword">{t('currentPassword')}</Label>
+                        <Input
+                            id="currentPassword"
+                            name="currentPassword"
+                            type="password"
+                            placeholder="••••••••"
+                            required
+                            disabled={isPending}
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="newPassword">{t('newPassword')}</Label>
+                        <Input
+                            id="newPassword"
+                            name="newPassword"
+                            type="password"
+                            placeholder="••••••••"
+                            required
+                            disabled={isPending}
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="confirmPassword">{t('confirmNewPassword')}</Label>
+                        <Input
+                            id="confirmPassword"
+                            name="confirmPassword"
+                            type="password"
+                            placeholder="••••••••"
+                            required
+                            disabled={isPending}
+                        />
+                    </div>
+                    {state?.error && (
+                        <div className="text-sm text-destructive">
+                            {state.error}
+                        </div>
+                    )}
+                    {state?.success && (
+                        <div className="text-sm text-green-600">
+                            {t('passwordUpdated')}
+                        </div>
+                    )}
+                    <Button type="submit" disabled={isPending}>
+                        {isPending ? t('updating') : t('updatePassword')}
+                    </Button>
+                </CardContent>
+            </form>
+        </Card>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/profile/edit-email-form.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useActionState, useEffect } from 'react';
+import { requestEmailUpdateAction } from './actions';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useTranslations } from 'next-intl';
+
+interface EditEmailFormProps {
+    currentEmail: string;
+}
+
+export function EditEmailForm({ currentEmail }: EditEmailFormProps) {
+    const t = useTranslations('Account');
+    const [state, formAction, isPending] = useActionState(requestEmailUpdateAction, undefined);
+
+    useEffect(() => {
+        if (state?.success) {
+            const form = document.getElementById('edit-email-form') as HTMLFormElement;
+            form?.reset();
+        }
+    }, [state?.success]);
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{t('emailAddress')}</CardTitle>
+                <CardDescription>
+                    {t('updateEmailDescription')}
+                </CardDescription>
+            </CardHeader>
+            <form id="edit-email-form" action={formAction}>
+                <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="currentEmail">{t('currentEmail')}</Label>
+                        <Input
+                            id="currentEmail"
+                            type="email"
+                            value={currentEmail}
+                            disabled
+                            className="bg-muted"
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="newEmailAddress">{t('newEmailAddress')}</Label>
+                        <Input
+                            id="newEmailAddress"
+                            name="newEmailAddress"
+                            type="email"
+                            placeholder="new.email@example.com"
+                            required
+                            disabled={isPending}
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="password">{t('currentPassword')}</Label>
+                        <Input
+                            id="password"
+                            name="password"
+                            type="password"
+                            placeholder="••••••••"
+                            required
+                            disabled={isPending}
+                        />
+                        <p className="text-xs text-muted-foreground">
+                            {t('confirmPasswordChange')}
+                        </p>
+                    </div>
+                    {state?.error && (
+                        <div className="text-sm text-destructive">
+                            {state.error}
+                        </div>
+                    )}
+                    {state?.success && (
+                        <div className="text-sm text-green-600">
+                            {t('verificationEmailSent')}
+                        </div>
+                    )}
+                    <Button type="submit" disabled={isPending}>
+                        {isPending ? t('updating') : t('updateEmail')}
+                    </Button>
+                </CardContent>
+            </form>
+        </Card>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/profile/edit-profile-form.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useActionState, useEffect, useRef } from 'react';
+import { updateCustomerAction } from './actions';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useTranslations } from 'next-intl';
+
+interface EditProfileFormProps {
+    customer: {
+        firstName: string;
+        lastName: string;
+    } | null;
+}
+
+export function EditProfileForm({ customer }: EditProfileFormProps) {
+    const t = useTranslations('Account');
+    const [state, formAction, isPending] = useActionState(updateCustomerAction, undefined);
+    const formRef = useRef<HTMLFormElement>(null);
+
+    useEffect(() => {
+        if (state?.success) {
+            formRef.current?.reset();
+        }
+    }, [state?.success]);
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{t('personalInformation')}</CardTitle>
+                <CardDescription>
+                    {t('updatePersonalDetails')}
+                </CardDescription>
+            </CardHeader>
+            <form ref={formRef} action={formAction}>
+                <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="firstName">{t('firstName')}</Label>
+                        <Input
+                            id="firstName"
+                            name="firstName"
+                            type="text"
+                            placeholder="John"
+                            defaultValue={customer?.firstName || ''}
+                            required
+                            disabled={isPending}
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="lastName">{t('lastName')}</Label>
+                        <Input
+                            id="lastName"
+                            name="lastName"
+                            type="text"
+                            placeholder="Doe"
+                            defaultValue={customer?.lastName || ''}
+                            required
+                            disabled={isPending}
+                        />
+                    </div>
+                    {state?.error && (
+                        <div className="text-sm text-destructive">
+                            {state.error}
+                        </div>
+                    )}
+                    {state?.success && (
+                        <div className="text-sm text-green-600">
+                            {t('profileUpdated')}
+                        </div>
+                    )}
+                    <Button type="submit" disabled={isPending}>
+                        {isPending ? t('updating') : t('updateProfile')}
+                    </Button>
+                </CardContent>
+            </form>
+        </Card>
+    );
+}