@vendure-platform/create 0.1.0

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

@@ -0,0 +1,463 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {ChevronLeft, MessageSquare} from 'lucide-react';
+import {client} from '@/lib/vendure/api';
+import {GetOrderDetailQuery} from '@/lib/vendure/queries';
+import {getLatestApprovalForOrder} from '@/lib/vendure/approval-utils';
+import {Badge} from '@/components/ui/badge';
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {ErrorState} from '@/components/shared/error-state';
+import {Separator} from '@/components/ui/separator';
+import Image from 'next/image';
+import {redirect} from "@/i18n/navigation";
+import {Price} from '@/components/commerce/price';
+import {maskCode} from '@/lib/format';
+import {OrderStatusBadge} from '@/components/commerce/order-status-badge';
+import {ApprovalStatusBadge} from '@/components/commerce/approval-status-badge';
+import {formatDate} from '@/lib/format';
+import {getTranslations, setRequestLocale} from 'next-intl/server';
+import {Link} from "@/i18n/navigation";
+import {ShoppingCart} from "lucide-react";
+import {ReorderDialog} from './reorder-dialog';
+
+type OrderDetailPageProps = {params: Promise<{locale: string; code: string}>};
+
+export async function generateMetadata({params}: OrderDetailPageProps): Promise<Metadata> {
+    const {code} = await params;
+    return {
+        title: `Order ${code}`,
+    };
+}
+
+async function OrderDetailContent({params}: {params: Promise<{locale: string; code: string}>}) {
+    const {locale, code} = await params;
+    setRequestLocale(locale);
+    const [t, [result, error]] = await Promise.all([
+        getTranslations('Account'),
+        client.query(GetOrderDetailQuery, {code}),
+    ]);
+    if (error) {
+        return (
+            <ErrorState message="We couldn't load this page. Please try again later." />
+        );
+    }
+    const {data} = result;
+
+    if (!data.orderByCode) {
+        return await redirect('/account/orders');
+    }
+
+    const order = data.orderByCode;
+    const hasCreditsApplied = (order.storeCreditsApplied ?? []).length > 0;
+    // Match the server-side allowlist in ReorderFromHistoryPlugin —
+    // only surface the "Reorder" CTA for orders that the API will accept.
+    const canReorder = [
+        'PaymentAuthorized',
+        'PaymentSettled',
+        'PartiallyShipped',
+        'Shipped',
+        'PartiallyDelivered',
+        'Delivered',
+    ].includes(order.state);
+
+    const { latestApproval, changesRequested, changesComment } = await getLatestApprovalForOrder(order.id);
+
+    return (
+        <div>
+            <div className="mb-6">
+                <Button variant="ghost" size="sm" asChild className="mb-4">
+                    <Link href="/account/orders">
+                        <ChevronLeft className="h-4 w-4 mr-2"/>
+                        {t('backToOrders')}
+                    </Link>
+                </Button>
+                <div className="flex items-center justify-between">
+                    <div>
+                        <h1 className="text-3xl font-bold">{t('order', {code: order.code})}</h1>
+                        <p className="text-muted-foreground mt-1">
+                            {t('placedOn', {date: formatDate(order.createdAt, locale, 'long')})}
+                        </p>
+                    </div>
+                    <div className="flex items-center gap-3">
+                        {canReorder && (
+                            <ReorderDialog sourceOrderId={order.id} sourceOrderCode={order.code} />
+                        )}
+                        <OrderStatusBadge state={order.state}/>
+                    </div>
+                </div>
+            </div>
+
+            {changesRequested && (
+                <div className="rounded-lg border border-orange-200 bg-orange-50 p-4 mb-6">
+                    <div className="flex gap-3">
+                        <MessageSquare className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5"/>
+                        <div>
+                            <h3 className="font-medium text-orange-900">Changes Requested</h3>
+                            <p className="text-sm text-orange-800 mt-1">
+                                A reviewer has requested changes to this order.
+                                {order.state === 'AddingItems' && ' You can modify the order and re-submit it for approval.'}
+                            </p>
+                            {changesComment && (
+                                <blockquote className="mt-2 border-l-2 border-orange-300 pl-3 text-sm text-orange-800 italic">
+                                    &ldquo;{changesComment}&rdquo;
+                                </blockquote>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {order.state === 'AddingItems' && !changesRequested && (order.lines.length > 0 || order.surcharges.length > 0) && (
+                <div className="rounded-lg border border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950 p-4 mb-6">
+                    <div className="flex items-center justify-between gap-4">
+                        <div>
+                            <h3 className="font-medium text-blue-900 dark:text-blue-100">Ready to Complete</h3>
+                            <p className="text-sm text-blue-800 dark:text-blue-200 mt-1">
+                                This order needs shipping and payment details to be completed.
+                            </p>
+                        </div>
+                        <Button asChild>
+                            <Link href="/checkout">
+                                <ShoppingCart className="h-4 w-4 mr-2"/>
+                                Complete Checkout
+                            </Link>
+                        </Button>
+                    </div>
+                </div>
+            )}
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div className="lg:col-span-2 space-y-6">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>{t('orderItems')}</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="space-y-4">
+                                {order.lines.map((line) => (
+                                    <div key={line.id} className="flex gap-4">
+                                        <div
+                                            className="relative h-20 w-20 rounded-md overflow-hidden bg-gray-100 flex-shrink-0">
+                                            {line.productVariant.product.featuredAsset && (
+                                                <Image
+                                                    src={line.productVariant.product.featuredAsset.preview}
+                                                    alt={line.productVariant.name}
+                                                    fill
+                                                    className="object-cover"
+                                                />
+                                            )}
+                                        </div>
+                                        <div className="flex-1">
+                                            <Link
+                                                href={`/product/${line.productVariant.product.slug}`}
+                                                className="font-medium hover:underline"
+                                            >
+                                                {line.productVariant.product.name}
+                                            </Link>
+                                            <p className="text-sm text-muted-foreground">
+                                                {line.productVariant.name}
+                                            </p>
+                                            <p className="text-sm text-muted-foreground">
+                                                {t('skuLabel', {sku: line.productVariant.sku})}
+                                            </p>
+                                        </div>
+                                        <div className="text-right">
+                                            <p className="font-medium">
+                                                <Price value={line.linePrice} currencyCode={order.currencyCode}/>
+                                            </p>
+                                            <p className="text-sm text-muted-foreground">
+                                                {t('qty', {quantity: line.quantity})} × <Price value={line.unitPrice}
+                                                                              currencyCode={order.currencyCode}/>
+                                            </p>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    {order.surcharges.length > 0 && (
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>Additional Charges</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="space-y-3">
+                                    {order.surcharges.map((surcharge) => (
+                                        <div key={surcharge.id} className="flex justify-between items-center">
+                                            <div>
+                                                <p className="font-medium">{surcharge.description}</p>
+                                                {surcharge.sku && (
+                                                    <p className="text-sm text-muted-foreground">SKU: {surcharge.sku}</p>
+                                                )}
+                                            </div>
+                                            <p className="font-medium">
+                                                <Price value={surcharge.price} currencyCode={order.currencyCode}/>
+                                            </p>
+                                        </div>
+                                    ))}
+                                </div>
+                            </CardContent>
+                        </Card>
+                    )}
+
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>{t('orderSummary')}</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="space-y-2">
+                                <div className="flex justify-between text-sm">
+                                    <span className="text-muted-foreground">{t('subtotal')} <span className="text-[10px]">(excl. tax)</span></span>
+                                    <span><Price value={order.subTotal}
+                                                 currencyCode={order.currencyCode}/></span>
+                                </div>
+                                <div className="flex justify-between text-sm">
+                                    <span className="text-muted-foreground">{t('shipping')}</span>
+                                    <span><Price value={order.shipping}
+                                                 currencyCode={order.currencyCode}/></span>
+                                </div>
+                                {order.discounts.length > 0 && (
+                                    <>
+                                        {order.discounts.map((discount, idx) => (
+                                            <div key={idx} className="flex justify-between text-sm">
+                                                <span className="text-muted-foreground">
+                                                    {discount.description}
+                                                </span>
+                                                <span className="text-green-600">
+                                                    -<Price value={discount.amount}
+                                                            currencyCode={order.currencyCode}/>
+                                                </span>
+                                            </div>
+                                        ))}
+                                    </>
+                                )}
+                                {order.taxSummary && order.taxSummary.length > 0 ? (
+                                    order.taxSummary.map((tax, idx) => (
+                                        <div key={idx} className="flex justify-between text-sm">
+                                            <span className="text-muted-foreground">
+                                                {tax.description} ({tax.taxRate}%)
+                                            </span>
+                                            <span><Price value={tax.taxTotal}
+                                                         currencyCode={order.currencyCode}/></span>
+                                        </div>
+                                    ))
+                                ) : (
+                                    <div className="flex justify-between text-sm">
+                                        <span className="text-muted-foreground">Tax</span>
+                                        <span><Price value={order.totalWithTax - order.total}
+                                                     currencyCode={order.currencyCode}/></span>
+                                    </div>
+                                )}
+                                {hasCreditsApplied && (
+                                    <>
+                                        <Separator className="my-2"/>
+                                        <div className="flex justify-between text-sm font-medium">
+                                            <span>Subtotal</span>
+                                            <span><Price value={order.totalWithTax} currencyCode={order.currencyCode}/></span>
+                                        </div>
+                                        {order.storeCreditsApplied.map((credit) => (
+                                            <div key={credit.code} className="flex justify-between text-sm">
+                                                <span className="text-muted-foreground">
+                                                    Store Credit ({maskCode(credit.code)})
+                                                </span>
+                                                <span className="text-green-600">
+                                                    -<Price value={credit.amountDeducted} currencyCode={order.currencyCode}/>
+                                                </span>
+                                            </div>
+                                        ))}
+                                    </>
+                                )}
+                                <Separator className="my-2"/>
+                                <div className="flex justify-between font-bold text-lg">
+                                    <span>
+                                        {hasCreditsApplied ? 'Amount Paid' : t('total')}
+                                    </span>
+                                    <span>
+                                        <Price
+                                            value={hasCreditsApplied ? order.totalWithTaxAfterStoreCredit : order.totalWithTax}
+                                            currencyCode={order.currencyCode}
+                                            taxLabel="incl"
+                                        />
+                                    </span>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                <div className="space-y-6">
+                    {order.shippingAddress && (
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>{t('shippingAddress')}</CardTitle>
+                            </CardHeader>
+                            <CardContent className="text-sm">
+                                <p className="font-medium">{order.shippingAddress.fullName}</p>
+                                {order.shippingAddress.company && (
+                                    <p>{order.shippingAddress.company}</p>
+                                )}
+                                <p>{order.shippingAddress.streetLine1}</p>
+                                {order.shippingAddress.streetLine2 && (
+                                    <p>{order.shippingAddress.streetLine2}</p>
+                                )}
+                                <p>
+                                    {order.shippingAddress.city}, {order.shippingAddress.province}{' '}
+                                    {order.shippingAddress.postalCode}
+                                </p>
+                                <p>{order.shippingAddress.country}</p>
+                                {order.shippingAddress.phoneNumber && (
+                                    <p className="mt-2">{order.shippingAddress.phoneNumber}</p>
+                                )}
+                            </CardContent>
+                        </Card>
+                    )}
+
+                    {order.billingAddress && (
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>{t('billingAddress')}</CardTitle>
+                            </CardHeader>
+                            <CardContent className="text-sm">
+                                <p className="font-medium">{order.billingAddress.fullName}</p>
+                                {order.billingAddress.company && (
+                                    <p>{order.billingAddress.company}</p>
+                                )}
+                                <p>{order.billingAddress.streetLine1}</p>
+                                {order.billingAddress.streetLine2 && (
+                                    <p>{order.billingAddress.streetLine2}</p>
+                                )}
+                                <p>
+                                    {order.billingAddress.city}, {order.billingAddress.province}{' '}
+                                    {order.billingAddress.postalCode}
+                                </p>
+                                <p>{order.billingAddress.country}</p>
+                                {order.billingAddress.phoneNumber && (
+                                    <p className="mt-2">{order.billingAddress.phoneNumber}</p>
+                                )}
+                            </CardContent>
+                        </Card>
+                    )}
+
+                    {order.payments && order.payments.length > 0 && (
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>{t('payment')}</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                {order.payments.map((payment) => (
+                                    <div key={payment.id} className="space-y-1 text-sm">
+                                        <div className="flex justify-between">
+                                            <span className="text-muted-foreground">{t('method')}</span>
+                                            <span className="font-medium">{payment.method}</span>
+                                        </div>
+                                        <div className="flex justify-between">
+                                            <span className="text-muted-foreground">{t('amount')}</span>
+                                            <span><Price value={payment.amount}
+                                                         currencyCode={order.currencyCode}/></span>
+                                        </div>
+                                        <div className="flex justify-between">
+                                            <span className="text-muted-foreground">{t('paymentStatus')}</span>
+                                            <Badge variant="secondary" className="text-xs">
+                                                {payment.state}
+                                            </Badge>
+                                        </div>
+                                        {payment.transactionId && (
+                                            <div className="flex justify-between">
+                                                <span className="text-muted-foreground">{t('transactionId')}</span>
+                                                <span className="font-mono text-xs">
+                                                    {payment.transactionId}
+                                                </span>
+                                            </div>
+                                        )}
+                                    </div>
+                                ))}
+                            </CardContent>
+                        </Card>
+                    )}
+
+                    {order.shippingLines && order.shippingLines.length > 0 && (
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>{t('shippingMethod')}</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                {order.shippingLines.map((line, idx) => (
+                                    <div key={idx} className="space-y-1 text-sm">
+                                        <p className="font-medium">{line.shippingMethod.name}</p>
+                                        {line.shippingMethod.description && (
+                                            <p className="text-muted-foreground">
+                                                {line.shippingMethod.description}
+                                            </p>
+                                        )}
+                                        <p className="font-medium">
+                                            <Price value={line.price} currencyCode={order.currencyCode}/>
+                                        </p>
+                                    </div>
+                                ))}
+                            </CardContent>
+                        </Card>
+                    )}
+
+                    {latestApproval && (
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>Approval Status</CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-3">
+                                <div className="flex items-center gap-2">
+                                    <span className="text-sm text-muted-foreground">Status:</span>
+                                    <ApprovalStatusBadge status={latestApproval.status}/>
+                                </div>
+                                {latestApproval.decisions && latestApproval.decisions.length > 0 && (
+                                    <div className="space-y-2">
+                                        <Separator/>
+                                        <p className="text-xs font-medium text-muted-foreground">Decision History</p>
+                                        {latestApproval.decisions
+                                            .filter((d) => d.decision !== 'PENDING')
+                                            .map((d) => (
+                                                <div key={d.id} className="text-xs space-y-1">
+                                                    <div className="flex items-center gap-2 flex-wrap">
+                                                        <span className="font-medium">
+                                                            {d.customer
+                                                                ? `${d.customer.firstName} ${d.customer.lastName}`
+                                                                : 'Admin'}
+                                                        </span>
+                                                        <ApprovalStatusBadge status={d.decision}/>
+                                                    </div>
+                                                    {d.comment && (
+                                                        <p className="text-muted-foreground italic">&ldquo;{d.comment}&rdquo;</p>
+                                                    )}
+                                                    {d.decidedAt && (
+                                                        <p className="text-muted-foreground">{formatDate(d.decidedAt, locale)}</p>
+                                                    )}
+                                                </div>
+                                            ))}
+                                    </div>
+                                )}
+                                <div className="pt-1">
+                                    <Button variant="outline" size="sm" asChild className="w-full">
+                                        <Link href="/account/approvals">View All Requests</Link>
+                                    </Button>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default function OrderDetailPage({params}: OrderDetailPageProps) {
+    return (
+        <Suspense fallback={
+            <div className="text-center py-12">
+                <p className="text-sm text-muted-foreground">Loading...</p>
+            </div>
+        }>
+            <OrderDetailContent params={params} />
+        </Suspense>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/orders/[code]/reorder-actions.ts

@@ -0,0 +1,160 @@
+'use server';
+
+import { updateTag } from 'next/cache';
+
+import { client } from '@/lib/vendure/api';
+import { AddReorderToActiveOrderMutation } from '@/lib/vendure/mutations';
+import { PreviewReorderQuery } from '@/lib/vendure/queries';
+import type { ResultOf } from '@/graphql';
+
+// Guard against pathological payloads. The server enforces its own limits too,
+// but failing fast here means we don't spend an HTTP round-trip to discover.
+const MAX_LINES_PER_COMMIT = 200;
+
+type PreviewReorderSummary = ResultOf<typeof PreviewReorderQuery>['previewReorder']['summary'];
+type PreviewReorderCurrencyCode = PreviewReorderSummary['currencyCode'];
+
+export type ReorderLineStatus =
+    | 'AVAILABLE'
+    | 'LOW_STOCK'
+    | 'OUT_OF_STOCK'
+    | 'UNAVAILABLE'
+    | 'SUBSTITUTED'
+    | 'PRICE_CHANGED'
+    | 'UNSUPPORTED';
+
+export interface PreviewLineView {
+    sourceLineId: string;
+    productVariantId: string | null;
+    productName: string | null;
+    variantName: string | null;
+    sku: string | null;
+    slug: string | null;
+    imagePreview: string | null;
+    quantity: number;
+    status: ReorderLineStatus;
+    originalUnitPriceWithTax: number;
+    currentCatalogUnitPriceWithTax: number;
+    priceChanged: boolean;
+    messages: Array<{ type: 'ERROR' | 'WARNING' | 'INFO'; message: string }>;
+}
+
+export interface PreviewReorderResult {
+    lines: PreviewLineView[];
+    availableCount: number;
+    unavailableCount: number;
+    indicativeTotal: number;
+    currencyCode: PreviewReorderCurrencyCode;
+}
+
+/**
+ * Stable error codes surfaced from the server actions. The client maps these
+ * to translated strings via the `Reorder.toast.*` namespace.
+ */
+export type ReorderActionError =
+    | { code: 'previewFailed' }
+    | { code: 'commitFailed' }
+    | { code: 'noItemsSelected' }
+    | { code: 'tooManyLines'; count: number; max: number };
+
+export async function previewReorder(
+    sourceOrderId: string,
+    quantityOverrides?: Array<{ sourceLineId: string; quantity: number }>,
+): Promise<{ success: true; data: PreviewReorderResult } | { success: false; error: ReorderActionError }> {
+    const [result, error] = await client.query(PreviewReorderQuery, {
+        input: { sourceOrderId, quantityOverrides },
+    });
+    if (error) {
+        return { success: false, error: { code: 'previewFailed' } };
+    }
+    const preview = result.data.previewReorder;
+    return {
+        success: true,
+        data: {
+            lines: preview.lines.map(line => ({
+                sourceLineId: line.sourceLineId,
+                productVariantId: line.productVariant?.id ?? null,
+                productName: line.productVariant?.product?.name ?? null,
+                variantName: line.productVariant?.name ?? null,
+                sku: line.productVariant?.sku ?? null,
+                slug: line.productVariant?.product?.slug ?? null,
+                imagePreview: line.productVariant?.product?.featuredAsset?.preview ?? null,
+                quantity: line.quantity,
+                status: line.status as ReorderLineStatus,
+                originalUnitPriceWithTax: line.originalUnitPriceWithTax,
+                currentCatalogUnitPriceWithTax: line.currentCatalogUnitPriceWithTax,
+                priceChanged:
+                    line.originalUnitPriceWithTax !== line.currentCatalogUnitPriceWithTax,
+                messages: line.messages.map(m => ({
+                    type: m.type as 'ERROR' | 'WARNING' | 'INFO',
+                    message: m.message,
+                })),
+            })),
+            availableCount: preview.summary.availableCount,
+            unavailableCount: preview.summary.unavailableCount,
+            indicativeTotal: preview.summary.indicativeTotal,
+            currencyCode: preview.summary.currencyCode,
+        },
+    };
+}
+
+export interface CommitReorderResult {
+    addedCount: number;
+    filteredCount: number;
+    failedCount: number;
+    orderCode: string;
+    lines: Array<{
+        sourceLineId: string;
+        status: ReorderLineStatus;
+        message: string | null;
+    }>;
+    messages: Array<{ type: 'ERROR' | 'WARNING' | 'INFO'; message: string }>;
+}
+
+export async function commitReorder(
+    sourceOrderId: string,
+    lines: Array<{ sourceLineId: string; productVariantId: string; quantity: number }>,
+): Promise<{ success: true; data: CommitReorderResult } | { success: false; error: ReorderActionError }> {
+    if (lines.length === 0) {
+        return { success: false, error: { code: 'noItemsSelected' } };
+    }
+    if (lines.length > MAX_LINES_PER_COMMIT) {
+        return {
+            success: false,
+            error: { code: 'tooManyLines', count: lines.length, max: MAX_LINES_PER_COMMIT },
+        };
+    }
+
+    const [result, error] = await client.mutate(AddReorderToActiveOrderMutation, {
+        input: { sourceOrderId, lines },
+    });
+    if (error) {
+        return { success: false, error: { code: 'commitFailed' } };
+    }
+
+    const response = result.data.addReorderToActiveOrder;
+
+    // Re-sync the cart caches — the active order now has new items and new
+    // totals (promotions, bulk discounts etc. may have just applied).
+    updateTag('cart');
+    updateTag('active-order');
+
+    return {
+        success: true,
+        data: {
+            addedCount: response.addedCount,
+            filteredCount: response.filteredCount,
+            failedCount: response.failedCount,
+            orderCode: response.order.code,
+            lines: response.lines.map(l => ({
+                sourceLineId: l.sourceLineId,
+                status: l.status as ReorderLineStatus,
+                message: l.message ?? null,
+            })),
+            messages: response.messages.map(m => ({
+                type: m.type as 'ERROR' | 'WARNING' | 'INFO',
+                message: m.message,
+            })),
+        },
+    };
+}