@vendure-platform/create 0.4.0 → 0.5.1

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

@@ -1,8 +1,11 @@
-import type {Metadata} from 'next';
-import {Suspense} from 'react';
-import {readFragment} from '@/graphql';
-import {FileText} from 'lucide-react';
-import {client} from '@/lib/vendure/api';
+import { readFragment } from '@/graphql';
+import { redirect } from '@/i18n/navigation';
+import { type Locale } from '@/i18n/routing';
+import { noIndexRobots } from '@/lib/metadata';
+import { getActiveCustomer, getCompanyAccount } from '@/lib/vendure/actions';
+import { client } from '@/lib/vendure/api';
+import { getAvailableCountriesCached } from '@/lib/vendure/cached';
+import { CompanyAddressFragment, CompanyPaymentMethodFragment } from '@/lib/vendure/fragments';
 import {
     GetActiveOrderForCheckoutQuery,
     GetCompanyAddressesQuery,
@@ -11,23 +14,20 @@ import {
     GetEligiblePaymentMethodsQuery,
     GetEligibleShippingMethodsQuery,
 } from '@/lib/vendure/queries';
-import {CompanyAddressFragment, CompanyPaymentMethodFragment} from '@/lib/vendure/fragments';
-import {redirect} from '@/i18n/navigation';
-import {CancelQuoteCheckoutButton} from './cancel-quote-checkout-button';
+import { FileText } from 'lucide-react';
+import type { Metadata } from 'next';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { locale as rootLocale } from 'next/root-params';
+import { Suspense } from 'react';
+import { CancelQuoteCheckoutButton } from './cancel-quote-checkout-button';
 import CheckoutFlow from './checkout-flow';
-import {CheckoutProvider} from './checkout-provider';
-import {noIndexRobots} from '@/lib/metadata';
-import {getActiveCustomer, getCompanyAccount} from '@/lib/vendure/actions';
-import {getAvailableCountriesCached} from '@/lib/vendure/cached';
-import {getTranslations, setRequestLocale} from 'next-intl/server';
-import {locale as rootLocale} from 'next/root-params';
-import {type Locale} from '@/i18n/routing';
+import { CheckoutProvider } from './checkout-provider';
 
 const STORE_CREDIT_PAYMENT_METHOD_CODE = 'store-credit-payment';
 
 export async function generateMetadata(): Promise<Metadata> {
     const locale = (await rootLocale()) as Locale;
-    const t = await getTranslations({locale, namespace: 'Checkout'});
+    const t = await getTranslations({ locale, namespace: 'Checkout' });
     return {
         title: t('pageTitle'),
         description: t('description'),
@@ -45,19 +45,20 @@ async function fetchCompanyCheckoutData() {
     const [companyPaymentMethodsRes, companyPaymentMethodsError] = companyPaymentMethodsResult;
     if (companyPaymentMethodsError) throw companyPaymentMethodsError;
     return {
-        companyAddresses: (companyAddressesRes.data.companyAddresses ?? []).map(a => readFragment(CompanyAddressFragment, a)),
-        companyPaymentMethods: (companyPaymentMethodsRes.data.companyPaymentMethods ?? []).map(pm => readFragment(CompanyPaymentMethodFragment, pm)),
+        companyAddresses: (companyAddressesRes.data.companyAddresses ?? []).map((a) =>
+            readFragment(CompanyAddressFragment, a),
+        ),
+        companyPaymentMethods: (companyPaymentMethodsRes.data.companyPaymentMethods ?? []).map((pm) =>
+            readFragment(CompanyPaymentMethodFragment, pm),
+        ),
     };
 }
 
-async function CheckoutContent({params}: {params: Promise<{locale: string}>}) {
-    const {locale} = await params;
+async function CheckoutContent({ params }: { params: Promise<{ locale: string }> }) {
+    const { locale } = await params;
     setRequestLocale(locale);
     const t = await getTranslations('Checkout');
-    const [customer, companyAccount] = await Promise.all([
-        getActiveCustomer(),
-        getCompanyAccount(),
-    ]);
+    const [customer, companyAccount] = await Promise.all([getActiveCustomer(), getCompanyAccount()]);
     if (!customer) {
         await redirect('/sign-in?redirectTo=/checkout');
     }
@@ -67,17 +68,25 @@ async function CheckoutContent({params}: {params: Promise<{locale: string}>}) {
         await redirect('/cart');
     }
 
-    const [orderResult, addressesResult, countries, shippingMethodsResult, paymentMethodsResult, companyData] =
-        await Promise.all([
-            client.query(GetActiveOrderForCheckoutQuery, {}),
-            client.query(GetCustomerAddressesQuery, {}),
-            getAvailableCountriesCached(locale),
-            client.query(GetEligibleShippingMethodsQuery, {}),
-            client.query(GetEligiblePaymentMethodsQuery, {}),
-            companyAccount
-                ? fetchCompanyCheckoutData()
-                : Promise.resolve({companyAddresses: [], companyPaymentMethods: []} as Awaited<ReturnType<typeof fetchCompanyCheckoutData>>),
-        ]);
+    const [
+        orderResult,
+        addressesResult,
+        countries,
+        shippingMethodsResult,
+        paymentMethodsResult,
+        companyData,
+    ] = await Promise.all([
+        client.query(GetActiveOrderForCheckoutQuery, {}),
+        client.query(GetCustomerAddressesQuery, {}),
+        getAvailableCountriesCached(locale),
+        client.query(GetEligibleShippingMethodsQuery, {}),
+        client.query(GetEligiblePaymentMethodsQuery, {}),
+        companyAccount
+            ? fetchCompanyCheckoutData()
+            : Promise.resolve({ companyAddresses: [], companyPaymentMethods: [] } as Awaited<
+                  ReturnType<typeof fetchCompanyCheckoutData>
+              >),
+    ]);
 
     const [orderRes, orderError] = orderResult;
     if (orderError) throw orderError;
@@ -105,7 +114,7 @@ async function CheckoutContent({params}: {params: Promise<{locale: string}>}) {
             (m) => m.isEligible && m.code !== STORE_CREDIT_PAYMENT_METHOD_CODE,
         ) || [];
 
-    const {companyAddresses, companyPaymentMethods} = companyData;
+    const { companyAddresses, companyPaymentMethods } = companyData;
 
     return (
         <>
@@ -114,9 +123,7 @@ async function CheckoutContent({params}: {params: Promise<{locale: string}>}) {
                     <div className="flex items-center justify-between">
                         <div className="flex gap-3">
                             <FileText className="h-5 w-5 text-blue-600 flex-shrink-0" />
-                            <p className="text-sm text-blue-800">
-                                {t('quoteBanner')}
-                            </p>
+                            <p className="text-sm text-blue-800">{t('quoteBanner')}</p>
                         </div>
                         <CancelQuoteCheckoutButton />
                     </div>
@@ -131,23 +138,25 @@ async function CheckoutContent({params}: {params: Promise<{locale: string}>}) {
                 shippingMethods={shippingMethods}
                 paymentMethods={paymentMethods}
             >
-                <CheckoutFlow/>
+                <CheckoutFlow />
             </CheckoutProvider>
         </>
     );
 }
 
-export default async function CheckoutPage({params}: {params: Promise<{locale: string}>}) {
+export default async function CheckoutPage({ params }: { params: Promise<{ locale: string }> }) {
     const t = await getTranslations('Checkout');
     return (
         <div className="container mx-auto px-4 py-8 mt-[var(--page-top-offset)]">
             <h1 className="text-3xl font-bold mb-8">{t('pageTitle')}</h1>
-            <Suspense fallback={
-                <div className="text-center py-12">
-                    <p className="text-sm text-muted-foreground">{t('loading')}</p>
-                </div>
-            }>
-                <CheckoutContent params={params}/>
+            <Suspense
+                fallback={
+                    <div className="text-center py-12">
+                        <p className="text-sm text-muted-foreground">{t('loading')}</p>
+                    </div>
+                }
+            >
+                <CheckoutContent params={params} />
             </Suspense>
         </div>
     );

package/dist/assets/storefront/src/app/[locale]/checkout/steps/delivery-step.tsx

@@ -1,107 +1,105 @@
 'use client';
 
-import { useEffect, useState, useTransition } from 'react';
-import { useTranslations } from 'next-intl';
+import { Price } from '@/components/commerce/price';
 import { Button } from '@/components/ui/button';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Label } from '@/components/ui/label';
 import { Card } from '@/components/ui/card';
-import { Loader2, Truck } from 'lucide-react';
-import { Price } from '@/components/commerce/price';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { useRouter } from '@/i18n/navigation';
-import { useCheckout } from '../checkout-provider';
+import { Loader2, Truck } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState, useTransition } from 'react';
 import { setShippingMethod as setShippingMethodAction } from '../actions';
+import { useCheckout } from '../checkout-provider';
 
 interface DeliveryStepProps {
-  onComplete: () => void;
-  returnsToReview?: boolean;
+    onComplete: () => void;
+    returnsToReview?: boolean;
 }
 
 export default function DeliveryStep({ onComplete, returnsToReview }: DeliveryStepProps) {
-  const router = useRouter();
-  const { shippingMethods, order } = useCheckout();
-  const t = useTranslations('Checkout');
-  const [selectedMethodId, setSelectedMethodId] = useState<string | null>(() => {
-    // If order already has a shipping method selected, pre-select it
-    if (order.shippingLines && order.shippingLines.length > 0) {
-      return order.shippingLines[0].shippingMethod.id;
-    }
-    // Otherwise default to first method if there's only one
-    return shippingMethods.length === 1 ? shippingMethods[0].id : null;
-  });
-  const [isPending, startTransition] = useTransition();
+    const router = useRouter();
+    const { shippingMethods, order } = useCheckout();
+    const t = useTranslations('Checkout');
+    const [selectedMethodId, setSelectedMethodId] = useState<string | null>(() => {
+        // If order already has a shipping method selected, pre-select it
+        if (order.shippingLines && order.shippingLines.length > 0) {
+            return order.shippingLines[0].shippingMethod.id;
+        }
+        // Otherwise default to first method if there's only one
+        return shippingMethods.length === 1 ? shippingMethods[0].id : null;
+    });
+    const [isPending, startTransition] = useTransition();
 
-  // Sync selection from server state (e.g. after back-navigation triggers router.refresh)
-  useEffect(() => {
-    if (order.shippingLines && order.shippingLines.length > 0) {
-      setSelectedMethodId(order.shippingLines[0].shippingMethod.id);
-    }
-  }, [order.shippingLines]);
+    // Sync selection from server state (e.g. after back-navigation triggers router.refresh)
+    useEffect(() => {
+        if (order.shippingLines && order.shippingLines.length > 0) {
+            setSelectedMethodId(order.shippingLines[0].shippingMethod.id);
+        }
+    }, [order.shippingLines]);
 
-  const handleContinue = () => {
-    if (!selectedMethodId) return;
+    const handleContinue = () => {
+        if (!selectedMethodId) return;
 
-    startTransition(async () => {
-      try {
-        await setShippingMethodAction(selectedMethodId);
-        router.refresh();
-        onComplete();
-      } catch (error) {
-        console.error('Error setting shipping method:', error);
-      }
-    });
-  };
+        startTransition(async () => {
+            try {
+                await setShippingMethodAction(selectedMethodId);
+                router.refresh();
+                onComplete();
+            } catch (error) {
+                console.error('Error setting shipping method:', error);
+            }
+        });
+    };
 
-  if (shippingMethods.length === 0) {
-    return (
-      <div className="text-center py-8">
-        <p className="text-muted-foreground">{t('noShippingMethods')}</p>
-      </div>
-    );
-  }
+    if (shippingMethods.length === 0) {
+        return (
+            <div className="text-center py-8">
+                <p className="text-muted-foreground">{t('noShippingMethods')}</p>
+            </div>
+        );
+    }
 
-  return (
-    <div className="space-y-6">
-      <h3 className="font-semibold">{t('selectShippingMethod')}</h3>
+    return (
+        <div className="space-y-6">
+            <h3 className="font-semibold">{t('selectShippingMethod')}</h3>
 
-      <RadioGroup value={selectedMethodId || ''} onValueChange={setSelectedMethodId}>
-        {shippingMethods.map((method) => (
-          <Label key={method.id} htmlFor={method.id} className="cursor-pointer">
-            <Card className="p-4">
-              <div className="flex items-center justify-between gap-4">
-                <div className="flex items-center gap-3 flex-1">
-                  <RadioGroupItem value={method.id} id={method.id} />
-                  <Truck className="h-5 w-5 text-muted-foreground" />
-                  <div>
-                    <p className="font-medium">{method.name}</p>
-                    {method.description && (
-                      <p className="text-sm text-muted-foreground mt-1">
-                        {method.description}
-                      </p>
-                    )}
-                  </div>
-                </div>
-                <div className="text-right flex-shrink-0">
-                  <p className="font-semibold">
-                    {method.price === 0
-                      ? t('free')
-                      : <Price value={method.price} currencyCode={order.currencyCode} />}
-                  </p>
-                </div>
-              </div>
-            </Card>
-          </Label>
-        ))}
-      </RadioGroup>
+            <RadioGroup value={selectedMethodId || ''} onValueChange={setSelectedMethodId}>
+                {shippingMethods.map((method) => (
+                    <Label key={method.id} htmlFor={method.id} className="cursor-pointer">
+                        <Card className="p-4">
+                            <div className="flex items-center justify-between gap-4">
+                                <div className="flex items-center gap-3 flex-1">
+                                    <RadioGroupItem value={method.id} id={method.id} />
+                                    <Truck className="h-5 w-5 text-muted-foreground" />
+                                    <div>
+                                        <p className="font-medium">{method.name}</p>
+                                        {method.description && (
+                                            <p className="text-sm text-muted-foreground mt-1">
+                                                {method.description}
+                                            </p>
+                                        )}
+                                    </div>
+                                </div>
+                                <div className="text-right flex-shrink-0">
+                                    <p className="font-semibold">
+                                        {method.price === 0 ? (
+                                            t('free')
+                                        ) : (
+                                            <Price value={method.price} currencyCode={order.currencyCode} />
+                                        )}
+                                    </p>
+                                </div>
+                            </div>
+                        </Card>
+                    </Label>
+                ))}
+            </RadioGroup>
 
-      <Button
-        onClick={handleContinue}
-        disabled={!selectedMethodId || isPending}
-        className="w-full"
-      >
-        {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-        {returnsToReview ? t('saveAndReturn') : t('continueToPayment')}
-      </Button>
-    </div>
-  );
+            <Button onClick={handleContinue} disabled={!selectedMethodId || isPending} className="w-full">
+                {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {returnsToReview ? t('saveAndReturn') : t('continueToPayment')}
+            </Button>
+        </div>
+    );
 }

package/dist/assets/storefront/src/app/[locale]/checkout/steps/payment-step.tsx

@@ -1,110 +1,109 @@
 'use client';
 
-import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/button';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Label } from '@/components/ui/label';
 import { Card } from '@/components/ui/card';
-import { CreditCard, Building2, Wallet } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Building2, CreditCard, Wallet } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useCheckout } from '../checkout-provider';
 
 interface PaymentStepProps {
-  onComplete: () => void;
+    onComplete: () => void;
 }
 
 export default function PaymentStep({ onComplete }: PaymentStepProps) {
-  const {
-    paymentMethods,
-    companyPaymentMethods,
-    selectedPaymentMethodCode,
-    setSelectedPaymentMethodCode,
-    storeCreditsCoverOrder,
-  } = useCheckout();
-  const t = useTranslations('Checkout');
+    const {
+        paymentMethods,
+        companyPaymentMethods,
+        selectedPaymentMethodCode,
+        setSelectedPaymentMethodCode,
+        storeCreditsCoverOrder,
+    } = useCheckout();
+    const t = useTranslations('Checkout');
 
-  const handleContinue = () => {
-    if (!storeCreditsCoverOrder && !selectedPaymentMethodCode) return;
-    onComplete();
-  };
+    const handleContinue = () => {
+        if (!storeCreditsCoverOrder && !selectedPaymentMethodCode) return;
+        onComplete();
+    };
 
-  if (storeCreditsCoverOrder) {
-    return (
-      <div className="space-y-6">
-        <div className="flex items-center gap-3 p-4 rounded-lg bg-green-50 border border-green-200 text-green-800">
-          <Wallet className="h-5 w-5 flex-shrink-0" />
-          <p className="text-sm font-medium">
-            {t('storeCreditsFullCoverage')}
-          </p>
-        </div>
-        <Button onClick={handleContinue} className="w-full">
-          {t('continueToReview')}
-        </Button>
-      </div>
-    );
-  }
+    if (storeCreditsCoverOrder) {
+        return (
+            <div className="space-y-6">
+                <div className="flex items-center gap-3 p-4 rounded-lg bg-green-50 border border-green-200 text-green-800">
+                    <Wallet className="h-5 w-5 flex-shrink-0" />
+                    <p className="text-sm font-medium">{t('storeCreditsFullCoverage')}</p>
+                </div>
+                <Button onClick={handleContinue} className="w-full">
+                    {t('continueToReview')}
+                </Button>
+            </div>
+        );
+    }
 
-  if (paymentMethods.length === 0) {
-    return (
-      <div className="text-center py-8">
-        <p className="text-muted-foreground">{t('noPaymentMethods')}</p>
-      </div>
-    );
-  }
+    if (paymentMethods.length === 0) {
+        return (
+            <div className="text-center py-8">
+                <p className="text-muted-foreground">{t('noPaymentMethods')}</p>
+            </div>
+        );
+    }
 
-  return (
-    <div className="space-y-6">
-      {companyPaymentMethods.length > 0 && (
-        <div className="space-y-3">
-          <h3 className="font-semibold">{t('companyPaymentArrangements')}</h3>
-          {companyPaymentMethods.map((method) => (
-            <Card key={method.id} className="p-4">
-              <div className="flex items-start gap-3">
-                <Building2 className="h-5 w-5 text-muted-foreground mt-0.5" />
-                <div className="flex-1">
-                  <p className="font-medium">{method.name}</p>
-                  {method.description && (
-                    <p className="text-sm text-muted-foreground mt-1">{method.description}</p>
-                  )}
-                  {method.terms && (
-                    <p className="text-sm text-muted-foreground mt-1">{t('terms')}{method.terms}</p>
-                  )}
+    return (
+        <div className="space-y-6">
+            {companyPaymentMethods.length > 0 && (
+                <div className="space-y-3">
+                    <h3 className="font-semibold">{t('companyPaymentArrangements')}</h3>
+                    {companyPaymentMethods.map((method) => (
+                        <Card key={method.id} className="p-4">
+                            <div className="flex items-start gap-3">
+                                <Building2 className="h-5 w-5 text-muted-foreground mt-0.5" />
+                                <div className="flex-1">
+                                    <p className="font-medium">{method.name}</p>
+                                    {method.description && (
+                                        <p className="text-sm text-muted-foreground mt-1">
+                                            {method.description}
+                                        </p>
+                                    )}
+                                    {method.terms && (
+                                        <p className="text-sm text-muted-foreground mt-1">
+                                            {t('terms')}
+                                            {method.terms}
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+                        </Card>
+                    ))}
                 </div>
-              </div>
-            </Card>
-          ))}
-        </div>
-      )}
+            )}
 
-      <h3 className="font-semibold">{t('selectPaymentMethod')}</h3>
+            <h3 className="font-semibold">{t('selectPaymentMethod')}</h3>
 
-      <RadioGroup value={selectedPaymentMethodCode || ''} onValueChange={setSelectedPaymentMethodCode}>
-        {paymentMethods.map((method) => (
-          <Label key={method.code} htmlFor={method.code} className="cursor-pointer">
-            <Card className="p-4">
-              <div className="flex items-center gap-3">
-                <RadioGroupItem value={method.code} id={method.code} />
-                <CreditCard className="h-5 w-5 text-muted-foreground" />
-                <div className="flex-1">
-                  <p className="font-medium">{method.name}</p>
-                  {method.description && (
-                    <p className="text-sm text-muted-foreground mt-1">
-                      {method.description}
-                    </p>
-                  )}
-                </div>
-              </div>
-            </Card>
-          </Label>
-        ))}
-      </RadioGroup>
+            <RadioGroup value={selectedPaymentMethodCode || ''} onValueChange={setSelectedPaymentMethodCode}>
+                {paymentMethods.map((method) => (
+                    <Label key={method.code} htmlFor={method.code} className="cursor-pointer">
+                        <Card className="p-4">
+                            <div className="flex items-center gap-3">
+                                <RadioGroupItem value={method.code} id={method.code} />
+                                <CreditCard className="h-5 w-5 text-muted-foreground" />
+                                <div className="flex-1">
+                                    <p className="font-medium">{method.name}</p>
+                                    {method.description && (
+                                        <p className="text-sm text-muted-foreground mt-1">
+                                            {method.description}
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+                        </Card>
+                    </Label>
+                ))}
+            </RadioGroup>
 
-      <Button
-        onClick={handleContinue}
-        disabled={!selectedPaymentMethodCode}
-        className="w-full"
-      >
-        {t('continueToReview')}
-      </Button>
-    </div>
-  );
+            <Button onClick={handleContinue} disabled={!selectedPaymentMethodCode} className="w-full">
+                {t('continueToReview')}
+            </Button>
+        </div>
+    );
 }