@vendure-platform/create 0.1.0

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

@@ -0,0 +1,90 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function CheckoutLoading() {
+    return (
+        <div className="container mx-auto px-4 py-8 mt-[var(--page-top-offset)]">
+            <Skeleton className="h-9 w-32 mb-8" />
+
+            <div className="grid lg:grid-cols-3 gap-8">
+                {/* Checkout Steps */}
+                <div className="lg:col-span-2 space-y-6">
+                    {/* Step Indicator */}
+                    <div className="flex items-center justify-between mb-8">
+                        {Array.from({ length: 4 }).map((_, i) => (
+                            <div key={i} className="flex items-center">
+                                <Skeleton className="h-8 w-8 rounded-full" />
+                                {i < 3 && <Skeleton className="h-1 w-16 mx-2" />}
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Shipping Address Form */}
+                    <div className="border rounded-lg p-6 space-y-4">
+                        <Skeleton className="h-6 w-40" />
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-2">
+                                <Skeleton className="h-4 w-20" />
+                                <Skeleton className="h-10 w-full" />
+                            </div>
+                            <div className="space-y-2">
+                                <Skeleton className="h-4 w-20" />
+                                <Skeleton className="h-10 w-full" />
+                            </div>
+                        </div>
+                        <div className="space-y-2">
+                            <Skeleton className="h-4 w-24" />
+                            <Skeleton className="h-10 w-full" />
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-2">
+                                <Skeleton className="h-4 w-16" />
+                                <Skeleton className="h-10 w-full" />
+                            </div>
+                            <div className="space-y-2">
+                                <Skeleton className="h-4 w-20" />
+                                <Skeleton className="h-10 w-full" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Order Summary */}
+                <div className="lg:col-span-1">
+                    <div className="border rounded-lg p-6 space-y-4 sticky top-24">
+                        <Skeleton className="h-6 w-32" />
+
+                        {/* Order Items */}
+                        <div className="space-y-3">
+                            {Array.from({ length: 2 }).map((_, i) => (
+                                <div key={i} className="flex gap-3">
+                                    <Skeleton className="h-16 w-16 rounded-md" />
+                                    <div className="flex-1 space-y-1">
+                                        <Skeleton className="h-4 w-32" />
+                                        <Skeleton className="h-3 w-16" />
+                                    </div>
+                                    <Skeleton className="h-4 w-16" />
+                                </div>
+                            ))}
+                        </div>
+
+                        {/* Totals */}
+                        <div className="border-t pt-4 space-y-2">
+                            <div className="flex justify-between">
+                                <Skeleton className="h-4 w-16" />
+                                <Skeleton className="h-4 w-16" />
+                            </div>
+                            <div className="flex justify-between">
+                                <Skeleton className="h-4 w-16" />
+                                <Skeleton className="h-4 w-16" />
+                            </div>
+                            <div className="flex justify-between font-bold pt-2 border-t">
+                                <Skeleton className="h-5 w-12" />
+                                <Skeleton className="h-5 w-20" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/checkout/order-summary.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { Button } from '@/components/ui/button';
+import { X } from 'lucide-react';
+import { OrderLine } from './types';
+import { useCheckout } from './checkout-provider';
+import { removeStoreCredit } from './actions';
+import { Price } from '@/components/commerce/price';
+import { maskCode } from '@/lib/format';
+
+export default function OrderSummary() {
+  const { order } = useCheckout();
+  const t = useTranslations('Checkout');
+
+  const storeCreditsApplied = order.storeCreditsApplied ?? [];
+  const totalAfterCredit = order.totalWithTaxAfterStoreCredit;
+  const hasCreditsApplied = storeCreditsApplied.length > 0;
+  const taxTotal = order.totalWithTax - order.total;
+
+  return (
+    <Card className="sticky top-4">
+      <CardHeader>
+        <CardTitle>{t('orderSummary')}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-3">
+          {order.lines.map((line: OrderLine) => (
+            <div key={line.id} className="flex gap-3">
+              {line.productVariant.product.featuredAsset && (
+                <div className="flex-shrink-0 w-15 h-15">
+                  <Image
+                    src={line.productVariant.product.featuredAsset.preview}
+                    alt={line.productVariant.name}
+                    width={60}
+                    height={60}
+                    className="rounded object-cover w-full h-full"
+                  />
+                </div>
+              )}
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium line-clamp-2">
+                  {line.productVariant.product.name}
+                </p>
+                {line.productVariant.name !== line.productVariant.product.name && (
+                  <p className="text-xs text-muted-foreground">
+                    {line.productVariant.name}
+                  </p>
+                )}
+                <p className="text-xs text-muted-foreground">
+                  {t('qty', {quantity: line.quantity})}
+                </p>
+              </div>
+              <div className="text-sm font-medium">
+                <Price value={line.linePrice} currencyCode={order.currencyCode} />
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <Separator />
+
+        <div className="space-y-2">
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">{t('subtotal')}</span>
+            <span>
+              <Price value={order.subTotal} currencyCode={order.currencyCode} />
+            </span>
+          </div>
+
+          {order.discounts && order.discounts.length > 0 && (
+            <>
+              {order.discounts.map((discount, index: number) => (
+                <div key={index} className="flex justify-between text-sm text-green-600">
+                  <span>{discount.description}</span>
+                  <span>
+                    <Price value={discount.amount} currencyCode={order.currencyCode} />
+                  </span>
+                </div>
+              ))}
+            </>
+          )}
+
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">{t('shipping')}</span>
+            <span>
+              {order.shipping > 0
+                ? <Price value={order.shipping} currencyCode={order.currencyCode} />
+                : t('toBeCalculated')}
+            </span>
+          </div>
+
+          {order.taxSummary && order.taxSummary.length > 0 ? (
+            order.taxSummary.map((tax, index: number) => (
+              <div key={index} 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">{t('tax')}</span>
+              <span>
+                <Price value={taxTotal} currencyCode={order.currencyCode} />
+              </span>
+            </div>
+          )}
+
+          {hasCreditsApplied && (
+            <>
+              {storeCreditsApplied.map((credit) => (
+                <div key={credit.code} className="flex justify-between items-center text-sm text-green-600">
+                  <span className="flex items-center gap-1">
+                    {t('storeCredit', {code: maskCode(credit.code)})}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-5 w-5 text-muted-foreground hover:text-destructive"
+                      onClick={() => removeStoreCredit(credit.code)}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </span>
+                  <span>-<Price value={credit.amountDeducted} currencyCode={order.currencyCode} /></span>
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+
+        <Separator />
+
+        <div>
+          <div className="flex justify-between font-bold text-lg">
+            <span>{t('total')}</span>
+            <span>
+              {hasCreditsApplied && totalAfterCredit != null ? (
+                <span className="flex items-center gap-2">
+                  <span className="text-sm font-normal text-muted-foreground line-through">
+                    <Price value={order.totalWithTax} currencyCode={order.currencyCode} />
+                  </span>
+                  <Price value={totalAfterCredit} currencyCode={order.currencyCode} taxLabel="incl" />
+                </span>
+              ) : (
+                <Price value={order.totalWithTax} currencyCode={order.currencyCode} taxLabel="incl" />
+              )}
+            </span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,154 @@
+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 {
+    GetActiveOrderForCheckoutQuery,
+    GetCompanyAddressesQuery,
+    GetCompanyPaymentMethodsQuery,
+    GetCustomerAddressesQuery,
+    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 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';
+
+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'});
+    return {
+        title: t('pageTitle'),
+        description: t('description'),
+        robots: noIndexRobots(),
+    };
+}
+
+async function fetchCompanyCheckoutData() {
+    const [companyAddressesResult, companyPaymentMethodsResult] = await Promise.all([
+        client.query(GetCompanyAddressesQuery, {}),
+        client.query(GetCompanyPaymentMethodsQuery, {}),
+    ]);
+    const [companyAddressesRes, companyAddressesError] = companyAddressesResult;
+    if (companyAddressesError) throw companyAddressesError;
+    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)),
+    };
+}
+
+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(),
+    ]);
+    if (!customer) {
+        await redirect('/sign-in?redirectTo=/checkout');
+    }
+
+    // Gate checkout for company users without PlaceOrders permission
+    if (companyAccount && !companyAccount.permissions.includes('PlaceOrders')) {
+        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 [orderRes, orderError] = orderResult;
+    if (orderError) throw orderError;
+    const [addressesRes, addressesError] = addressesResult;
+    if (addressesError) throw addressesError;
+    const [shippingMethodsRes, shippingMethodsError] = shippingMethodsResult;
+    if (shippingMethodsError) throw shippingMethodsError;
+    const [paymentMethodsRes, paymentMethodsError] = paymentMethodsResult;
+    if (paymentMethodsError) throw paymentMethodsError;
+
+    const activeOrder = orderRes.data.activeOrder;
+
+    if (!activeOrder || activeOrder.lines.length === 0) {
+        return await redirect('/cart');
+    }
+
+    if (activeOrder.state !== 'AddingItems' && activeOrder.state !== 'ArrangingPayment') {
+        return await redirect(`/order-confirmation/${activeOrder.code}`);
+    }
+
+    const addresses = addressesRes.data.activeCustomer?.addresses || [];
+    const shippingMethods = shippingMethodsRes.data.eligibleShippingMethods || [];
+    const paymentMethods =
+        paymentMethodsRes.data.eligiblePaymentMethods?.filter(
+            (m) => m.isEligible && m.code !== STORE_CREDIT_PAYMENT_METHOD_CODE,
+        ) || [];
+
+    const {companyAddresses, companyPaymentMethods} = companyData;
+
+    return (
+        <>
+            {activeOrder.customFields?.sourceQuoteId && (
+                <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 mb-6">
+                    <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>
+                        </div>
+                        <CancelQuoteCheckoutButton />
+                    </div>
+                </div>
+            )}
+            <CheckoutProvider
+                order={activeOrder}
+                addresses={addresses}
+                companyAddresses={companyAddresses}
+                companyPaymentMethods={companyPaymentMethods}
+                countries={countries}
+                shippingMethods={shippingMethods}
+                paymentMethods={paymentMethods}
+            >
+                <CheckoutFlow/>
+            </CheckoutProvider>
+        </>
+    );
+}
+
+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>
+        </div>
+    );
+}

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

@@ -0,0 +1,107 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+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 { Loader2, Truck } from 'lucide-react';
+import { Price } from '@/components/commerce/price';
+import { useRouter } from '@/i18n/navigation';
+import { useCheckout } from '../checkout-provider';
+import { setShippingMethod as setShippingMethodAction } from '../actions';
+
+interface DeliveryStepProps {
+  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();
+
+  // 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;
+
+    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>
+    );
+  }
+
+  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>
+
+      <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

@@ -0,0 +1,110 @@
+'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 { useCheckout } from '../checkout-provider';
+
+interface PaymentStepProps {
+  onComplete: () => void;
+}
+
+export default function PaymentStep({ onComplete }: PaymentStepProps) {
+  const {
+    paymentMethods,
+    companyPaymentMethods,
+    selectedPaymentMethodCode,
+    setSelectedPaymentMethodCode,
+    storeCreditsCoverOrder,
+  } = useCheckout();
+  const t = useTranslations('Checkout');
+
+  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 (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>
+                  )}
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <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>
+
+      <Button
+        onClick={handleContinue}
+        disabled={!selectedPaymentMethodCode}
+        className="w-full"
+      >
+        {t('continueToReview')}
+      </Button>
+    </div>
+  );
+}