@vendure-platform/create 0.4.0 → 0.5.1

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

@@ -1,48 +1,43 @@
-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 { ApprovalStatusBadge } from '@/components/commerce/approval-status-badge';
+import { OrderStatusBadge } from '@/components/commerce/order-status-badge';
+import { Price } from '@/components/commerce/price';
+import { ErrorState } from '@/components/shared/error-state';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { Link, redirect } from '@/i18n/navigation';
+import { formatDate, maskCode } from '@/lib/format';
+import { client } from '@/lib/vendure/api';
+import { getLatestApprovalForOrder } from '@/lib/vendure/approval-utils';
+import { GetOrderDetailQuery } from '@/lib/vendure/queries';
+import { ChevronLeft, MessageSquare, ShoppingCart } from 'lucide-react';
+import type { Metadata } from 'next';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 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';
+import { Suspense } from 'react';
+import { ReorderDialog } from './reorder-dialog';
 
-type OrderDetailPageProps = {params: Promise<{locale: string; code: string}>};
+type OrderDetailPageProps = { params: Promise<{ locale: string; code: string }> };
 
-export async function generateMetadata({params}: OrderDetailPageProps): Promise<Metadata> {
-    const {code} = await params;
+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;
+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}),
+        client.query(GetOrderDetailQuery, { code }),
     ]);
     if (error) {
-        return (
-            <ErrorState message="We couldn't load this page. Please try again later." />
-        );
+        return <ErrorState message="We couldn't load this page. Please try again later." />;
     }
-    const {data} = result;
+    const { data } = result;
 
     if (!data.orderByCode) {
         return await redirect('/account/orders');
@@ -68,22 +63,22 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
             <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"/>
+                        <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>
+                        <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')})}
+                            {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}/>
+                        <OrderStatusBadge state={order.state} />
                     </div>
                 </div>
             </div>
@@ -91,12 +86,13 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
             {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"/>
+                        <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.'}
+                                {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">
@@ -108,24 +104,28 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                 </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>
+            {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>
-                        <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">
@@ -137,8 +137,7 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                             <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">
+                                        <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}
@@ -159,16 +158,22 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                                                 {line.productVariant.name}
                                             </p>
                                             <p className="text-sm text-muted-foreground">
-                                                {t('skuLabel', {sku: line.productVariant.sku})}
+                                                {t('skuLabel', { sku: line.productVariant.sku })}
                                             </p>
                                         </div>
                                         <div className="text-right">
                                             <p className="font-medium">
-                                                <Price value={line.linePrice} currencyCode={order.currencyCode}/>
+                                                <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}/>
+                                                {t('qty', { quantity: line.quantity })} ×{' '}
+                                                <Price
+                                                    value={line.unitPrice}
+                                                    currencyCode={order.currencyCode}
+                                                />
                                             </p>
                                         </div>
                                     </div>
@@ -189,11 +194,16 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                                             <div>
                                                 <p className="font-medium">{surcharge.description}</p>
                                                 {surcharge.sku && (
-                                                    <p className="text-sm text-muted-foreground">SKU: {surcharge.sku}</p>
+                                                    <p className="text-sm text-muted-foreground">
+                                                        SKU: {surcharge.sku}
+                                                    </p>
                                                 )}
                                             </div>
                                             <p className="font-medium">
-                                                <Price value={surcharge.price} currencyCode={order.currencyCode}/>
+                                                <Price
+                                                    value={surcharge.price}
+                                                    currencyCode={order.currencyCode}
+                                                />
                                             </p>
                                         </div>
                                     ))}
@@ -209,14 +219,18 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                         <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>
+                                    <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>
+                                    <span>
+                                        <Price value={order.shipping} currencyCode={order.currencyCode} />
+                                    </span>
                                 </div>
                                 {order.discounts.length > 0 && (
                                     <>
@@ -226,8 +240,11 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                                                     {discount.description}
                                                 </span>
                                                 <span className="text-green-600">
-                                                    -<Price value={discount.amount}
-                                                            currencyCode={order.currencyCode}/>
+                                                    -
+                                                    <Price
+                                                        value={discount.amount}
+                                                        currencyCode={order.currencyCode}
+                                                    />
                                                 </span>
                                             </div>
                                         ))}
@@ -239,23 +256,36 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                                             <span className="text-muted-foreground">
                                                 {tax.description} ({tax.taxRate}%)
                                             </span>
-                                            <span><Price value={tax.taxTotal}
-                                                         currencyCode={order.currencyCode}/></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>
+                                        <span>
+                                            <Price
+                                                value={order.totalWithTax - order.total}
+                                                currencyCode={order.currencyCode}
+                                            />
+                                        </span>
                                     </div>
                                 )}
                                 {hasCreditsApplied && (
                                     <>
-                                        <Separator className="my-2"/>
+                                        <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>
+                                            <span>
+                                                <Price
+                                                    value={order.totalWithTax}
+                                                    currencyCode={order.currencyCode}
+                                                />
+                                            </span>
                                         </div>
                                         {order.storeCreditsApplied.map((credit) => (
                                             <div key={credit.code} className="flex justify-between text-sm">
@@ -263,20 +293,26 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                                                     Store Credit ({maskCode(credit.code)})
                                                 </span>
                                                 <span className="text-green-600">
-                                                    -<Price value={credit.amountDeducted} currencyCode={order.currencyCode}/>
+                                                    -
+                                                    <Price
+                                                        value={credit.amountDeducted}
+                                                        currencyCode={order.currencyCode}
+                                                    />
                                                 </span>
                                             </div>
                                         ))}
                                     </>
                                 )}
-                                <Separator className="my-2"/>
+                                <Separator className="my-2" />
                                 <div className="flex justify-between font-bold text-lg">
-                                    <span>
-                                        {hasCreditsApplied ? 'Amount Paid' : t('total')}
-                                    </span>
+                                    <span>{hasCreditsApplied ? 'Amount Paid' : t('total')}</span>
                                     <span>
                                         <Price
-                                            value={hasCreditsApplied ? order.totalWithTaxAfterStoreCredit : order.totalWithTax}
+                                            value={
+                                                hasCreditsApplied
+                                                    ? order.totalWithTaxAfterStoreCredit
+                                                    : order.totalWithTax
+                                            }
                                             currencyCode={order.currencyCode}
                                             taxLabel="incl"
                                         />
@@ -295,9 +331,7 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                             </CardHeader>
                             <CardContent className="text-sm">
                                 <p className="font-medium">{order.shippingAddress.fullName}</p>
-                                {order.shippingAddress.company && (
-                                    <p>{order.shippingAddress.company}</p>
-                                )}
+                                {order.shippingAddress.company && <p>{order.shippingAddress.company}</p>}
                                 <p>{order.shippingAddress.streetLine1}</p>
                                 {order.shippingAddress.streetLine2 && (
                                     <p>{order.shippingAddress.streetLine2}</p>
@@ -321,9 +355,7 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                             </CardHeader>
                             <CardContent className="text-sm">
                                 <p className="font-medium">{order.billingAddress.fullName}</p>
-                                {order.billingAddress.company && (
-                                    <p>{order.billingAddress.company}</p>
-                                )}
+                                {order.billingAddress.company && <p>{order.billingAddress.company}</p>}
                                 <p>{order.billingAddress.streetLine1}</p>
                                 {order.billingAddress.streetLine2 && (
                                     <p>{order.billingAddress.streetLine2}</p>
@@ -354,18 +386,26 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                                         </div>
                                         <div className="flex justify-between">
                                             <span className="text-muted-foreground">{t('amount')}</span>
-                                            <span><Price value={payment.amount}
-                                                         currencyCode={order.currencyCode}/></span>
+                                            <span>
+                                                <Price
+                                                    value={payment.amount}
+                                                    currencyCode={order.currencyCode}
+                                                />
+                                            </span>
                                         </div>
                                         <div className="flex justify-between">
-                                            <span className="text-muted-foreground">{t('paymentStatus')}</span>
+                                            <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="text-muted-foreground">
+                                                    {t('transactionId')}
+                                                </span>
                                                 <span className="font-mono text-xs">
                                                     {payment.transactionId}
                                                 </span>
@@ -392,7 +432,7 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                                             </p>
                                         )}
                                         <p className="font-medium">
-                                            <Price value={line.price} currencyCode={order.currencyCode}/>
+                                            <Price value={line.price} currencyCode={order.currencyCode} />
                                         </p>
                                     </div>
                                 ))}
@@ -408,12 +448,14 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                             <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}/>
+                                    <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>
+                                        <Separator />
+                                        <p className="text-xs font-medium text-muted-foreground">
+                                            Decision History
+                                        </p>
                                         {latestApproval.decisions
                                             .filter((d) => d.decision !== 'PENDING')
                                             .map((d) => (
@@ -424,13 +466,17 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
                                                                 ? `${d.customer.firstName} ${d.customer.lastName}`
                                                                 : 'Admin'}
                                                         </span>
-                                                        <ApprovalStatusBadge status={d.decision}/>
+                                                        <ApprovalStatusBadge status={d.decision} />
                                                     </div>
                                                     {d.comment && (
-                                                        <p className="text-muted-foreground italic">&ldquo;{d.comment}&rdquo;</p>
+                                                        <p className="text-muted-foreground italic">
+                                                            &ldquo;{d.comment}&rdquo;
+                                                        </p>
                                                     )}
                                                     {d.decidedAt && (
-                                                        <p className="text-muted-foreground">{formatDate(d.decidedAt, locale)}</p>
+                                                        <p className="text-muted-foreground">
+                                                            {formatDate(d.decidedAt, locale)}
+                                                        </p>
                                                     )}
                                                 </div>
                                             ))}
@@ -450,13 +496,15 @@ async function OrderDetailContent({params}: {params: Promise<{locale: string; co
     );
 }
 
-export default function OrderDetailPage({params}: OrderDetailPageProps) {
+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>
-        }>
+        <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

@@ -2,10 +2,10 @@
 
 import { updateTag } from 'next/cache';
 
+import type { ResultOf } from '@/graphql';
 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.
@@ -71,7 +71,7 @@ export async function previewReorder(
     return {
         success: true,
         data: {
-            lines: preview.lines.map(line => ({
+            lines: preview.lines.map((line) => ({
                 sourceLineId: line.sourceLineId,
                 productVariantId: line.productVariant?.id ?? null,
                 productName: line.productVariant?.product?.name ?? null,
@@ -83,9 +83,8 @@ export async function previewReorder(
                 status: line.status as ReorderLineStatus,
                 originalUnitPriceWithTax: line.originalUnitPriceWithTax,
                 currentCatalogUnitPriceWithTax: line.currentCatalogUnitPriceWithTax,
-                priceChanged:
-                    line.originalUnitPriceWithTax !== line.currentCatalogUnitPriceWithTax,
-                messages: line.messages.map(m => ({
+                priceChanged: line.originalUnitPriceWithTax !== line.currentCatalogUnitPriceWithTax,
+                messages: line.messages.map((m) => ({
                     type: m.type as 'ERROR' | 'WARNING' | 'INFO',
                     message: m.message,
                 })),
@@ -146,12 +145,12 @@ export async function commitReorder(
             filteredCount: response.filteredCount,
             failedCount: response.failedCount,
             orderCode: response.order.code,
-            lines: response.lines.map(l => ({
+            lines: response.lines.map((l) => ({
                 sourceLineId: l.sourceLineId,
                 status: l.status as ReorderLineStatus,
                 message: l.message ?? null,
             })),
-            messages: response.messages.map(m => ({
+            messages: response.messages.map((m) => ({
                 type: m.type as 'ERROR' | 'WARNING' | 'INFO',
                 message: m.message,
             })),