@vendure-platform/create 0.1.0

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

@@ -0,0 +1,192 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {
+    SetOrderShippingAddressMutation,
+    SetOrderBillingAddressMutation,
+    SetOrderShippingMethodMutation,
+    AddPaymentToOrderWithStoreCreditMutation,
+    CreateCustomerAddressMutation,
+    TransitionOrderToStateMutation,
+    ApplyStoreCreditToOrderMutation,
+    RemoveStoreCreditFromOrderMutation,
+} from '@/lib/vendure/mutations';
+import {GetActiveOrderQuery} from '@/lib/vendure/queries';
+import {revalidatePath, updateTag} from 'next/cache';
+import {redirect} from "@/i18n/navigation";
+import {cartGuard} from '@/lib/cart-guard';
+import {getGuardError} from '@/lib/cart-guard-utils';
+
+interface AddressInput {
+    fullName: string;
+    streetLine1: string;
+    streetLine2?: string;
+    city: string;
+    province: string;
+    postalCode: string;
+    countryCode: string;
+    phoneNumber: string;
+    company?: string;
+}
+
+export async function setShippingAddress(
+    shippingAddress: AddressInput,
+    billingAddress?: AddressInput,
+) {
+    const [shippingResult, shippingError] = await client.mutate(
+        SetOrderShippingAddressMutation,
+        {input: shippingAddress},
+    );
+    if (shippingError) throw shippingError;
+
+    if (shippingResult.data.setOrderShippingAddress.__typename !== 'Order') {
+        throw new Error('Failed to set shipping address');
+    }
+
+    const billingInput = billingAddress ?? shippingAddress;
+    const [, billingError] = await client.mutate(
+        SetOrderBillingAddressMutation,
+        {input: billingInput},
+    );
+    if (billingError) throw billingError;
+
+    revalidatePath('/checkout');
+}
+
+export async function setShippingMethod(shippingMethodId: string) {
+    const [result, error] = await client.mutate(
+        SetOrderShippingMethodMutation,
+        {shippingMethodId: [shippingMethodId]},
+    );
+    if (error) throw error;
+
+    if (result.data.setOrderShippingMethod.__typename !== 'Order') {
+        throw new Error('Failed to set shipping method');
+    }
+
+    revalidatePath('/checkout');
+}
+
+export async function createCustomerAddress(address: AddressInput) {
+    const [result, error] = await client.mutate(
+        CreateCustomerAddressMutation,
+        {input: address},
+    );
+    if (error) throw error;
+
+    if (!result.data.createCustomerAddress) {
+        throw new Error('Failed to create customer address');
+    }
+
+    revalidatePath('/checkout');
+    return result.data.createCustomerAddress;
+}
+
+export async function applyStoreCredit(code: string) {
+    const guard = await cartGuard();
+    const guardError = getGuardError(guard);
+    if (guardError) return {error: guardError};
+
+    const [result, error] = await client.mutate(
+        ApplyStoreCreditToOrderMutation,
+        {code},
+    );
+    if (error) throw error;
+
+    if (result.data.applyStoreCreditToOrder.__typename !== 'Order') {
+        const errorResult = result.data.applyStoreCreditToOrder;
+        return {error: errorResult.message};
+    }
+
+    revalidatePath('/checkout');
+    return {success: true};
+}
+
+export async function removeStoreCredit(code: string) {
+    const guard = await cartGuard();
+    const guardError = getGuardError(guard);
+    if (guardError) return {error: guardError};
+
+    const [, error] = await client.mutate(
+        RemoveStoreCreditFromOrderMutation,
+        {code},
+    );
+
+    if (error) {
+        return {error: error.message || 'Failed to remove store credit'};
+    }
+
+    revalidatePath('/checkout');
+    return {success: true};
+}
+
+export async function placeOrder(paymentMethodCode?: string) {
+    // Check current order state — it may already be in ArrangingPayment
+    // (e.g. after an approval workflow approved the order)
+    const [orderResult, orderError] = await client.query(GetActiveOrderQuery, {});
+    if (orderError) throw orderError;
+    const currentState = orderResult.data.activeOrder?.state;
+
+    if (currentState !== 'ArrangingPayment') {
+        // Try to transition the order to ArrangingPayment state
+        const [transitionResult, transitionError] = await client.mutate(
+            TransitionOrderToStateMutation,
+            {state: 'ArrangingPayment'},
+        );
+        if (transitionError) throw transitionError;
+
+        // If the transition fails, check if the order requires approval
+        if (transitionResult.data.transitionOrderToState?.__typename === 'OrderStateTransitionError') {
+            const transitionError = transitionResult.data.transitionOrderToState;
+
+            // Try transitioning to AwaitingApproval instead
+            if (transitionError.fromState === 'AddingItems') {
+                const [approvalResult, approvalError] = await client.mutate(
+                    TransitionOrderToStateMutation,
+                    {state: 'AwaitingApproval'},
+                );
+                if (approvalError) throw approvalError;
+
+                if (approvalResult.data.transitionOrderToState?.__typename === 'Order') {
+                    const orderCode = approvalResult.data.transitionOrderToState.code;
+                    updateTag('cart');
+                    updateTag('active-order');
+                    await redirect(`/order-confirmation/${orderCode}`);
+                }
+            }
+
+            // If we get here, neither transition worked
+            throw new Error(
+                `Failed to transition order state: ${transitionError.errorCode} - ${transitionError.message}`
+            );
+        }
+    }
+
+    // Normal payment flow — uses addPaymentToOrderWithStoreCredit which
+    // auto-deducts any applied store credits before charging the remainder
+    // via the selected payment method.
+    // When store credits fully cover the order, no payment input is needed.
+    const [result, error] = await client.mutate(
+        AddPaymentToOrderWithStoreCreditMutation,
+        {
+            input: paymentMethodCode
+                ? { method: paymentMethodCode, metadata: {} }
+                : null,
+        },
+    );
+    if (error) throw error;
+
+    if (result.data.addPaymentToOrderWithStoreCredit.__typename !== 'Order') {
+        const errorResult = result.data.addPaymentToOrderWithStoreCredit;
+        throw new Error(
+            `Failed to place order: ${errorResult.errorCode} - ${errorResult.message}`
+        );
+    }
+
+    const orderCode = result.data.addPaymentToOrderWithStoreCredit.code;
+
+    updateTag('cart');
+    updateTag('active-order');
+
+    await redirect(`/order-confirmation/${orderCode}`);
+}

package/dist/assets/storefront/src/app/[locale]/checkout/cancel-quote-checkout-button.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import {useRouter} from '@/i18n/navigation';
+import {useTransition} from 'react';
+import {useTranslations} from 'next-intl';
+import {Button} from '@/components/ui/button';
+import {cancelQuoteCheckout} from '@/app/[locale]/account/quotes/actions';
+
+export function CancelQuoteCheckoutButton() {
+    const router = useRouter();
+    const [isPending, startTransition] = useTransition();
+    const t = useTranslations('Checkout');
+
+    return (
+        <Button
+            variant="outline"
+            size="sm"
+            className="border-blue-300 text-blue-800 hover:bg-blue-100"
+            disabled={isPending}
+            onClick={() => {
+                startTransition(async () => {
+                    await cancelQuoteCheckout();
+                    router.push('/account/quotes');
+                });
+            }}
+        >
+            {isPending ? t('cancelling') : t('cancelQuote')}
+        </Button>
+    );
+}

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

@@ -0,0 +1,214 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+import ShippingAddressStep from './steps/shipping-address-step';
+import DeliveryStep from './steps/delivery-step';
+import PaymentStep from './steps/payment-step';
+import ReviewStep from './steps/review-step';
+import OrderSummary from './order-summary';
+import { useCheckout } from './checkout-provider';
+
+type CheckoutStep = 'shipping' | 'delivery' | 'payment' | 'review';
+
+export default function CheckoutFlow() {
+  const { order, storeCreditsCoverOrder } = useCheckout();
+  const t = useTranslations('Checkout');
+
+  // Determine initial step and completed steps based on order state
+  const getInitialState = () => {
+    const completed = new Set<CheckoutStep>();
+    let current: CheckoutStep = 'shipping';
+
+    // Check if shipping address has required fields, not just if the object exists
+    if (order.shippingAddress?.streetLine1 && order.shippingAddress?.country) {
+      completed.add('shipping');
+      current = 'delivery';
+    }
+
+    if (order.shippingLines && order.shippingLines.length > 0) {
+      completed.add('delivery');
+      current = 'payment';
+
+      // When store credits cover the full order, skip the payment step
+      if (storeCreditsCoverOrder) {
+        completed.add('payment');
+        current = 'review';
+      }
+    }
+
+    return { completed, current };
+  };
+
+  const initialState = getInitialState();
+  const [currentStep, setCurrentStep] = useState<CheckoutStep>(initialState.current);
+  const [completedSteps, setCompletedSteps] = useState<Set<CheckoutStep>>(initialState.completed);
+
+  const handleStepComplete = (step: CheckoutStep) => {
+    setCompletedSteps(prev => new Set([...prev, step]));
+
+    const stepOrder: CheckoutStep[] = ['shipping', 'delivery', 'payment', 'review'];
+    const currentIndex = stepOrder.indexOf(step);
+
+    // If all subsequent steps are already completed, jump straight to review
+    for (let i = currentIndex + 1; i < stepOrder.length; i++) {
+      if (!completedSteps.has(stepOrder[i])) {
+        setCurrentStep(stepOrder[i]);
+        return;
+      }
+    }
+    setCurrentStep('review');
+  };
+
+  const willReturnToReview = (step: CheckoutStep): boolean => {
+    const stepOrder: CheckoutStep[] = ['shipping', 'delivery', 'payment', 'review'];
+    const currentIndex = stepOrder.indexOf(step);
+    return stepOrder.slice(currentIndex + 1).every(s => completedSteps.has(s) || s === 'review');
+  };
+
+  const canAccessStep = (step: CheckoutStep): boolean => {
+    const stepOrder: CheckoutStep[] = ['shipping', 'delivery', 'payment', 'review'];
+    const stepIndex = stepOrder.indexOf(step);
+
+    if (stepIndex === 0) return true;
+
+    const previousStep = stepOrder[stepIndex - 1];
+    return completedSteps.has(previousStep);
+  };
+
+  return (
+    <div className="grid lg:grid-cols-3 gap-8">
+      <div className="lg:col-span-2">
+        <Accordion
+          type="single"
+          collapsible
+          value={currentStep}
+          onValueChange={(value) => {
+            if (value && canAccessStep(value as CheckoutStep)) {
+              setCurrentStep(value as CheckoutStep);
+            }
+          }}
+          className="space-y-4"
+        >
+          <AccordionItem value="shipping" className="border rounded-lg px-6">
+            <AccordionTrigger className="hover:no-underline">
+              <div className="flex items-center gap-3">
+                <div className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold ${
+                  completedSteps.has('shipping')
+                    ? 'bg-green-500 text-white'
+                    : currentStep === 'shipping'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground'
+                }`}>
+                  {completedSteps.has('shipping') ? '✓' : '1'}
+                </div>
+                <span className="text-lg font-semibold">{t('shippingAddress')}</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="pt-4">
+              <ShippingAddressStep
+                onComplete={() => handleStepComplete('shipping')}
+                returnsToReview={willReturnToReview('shipping')}
+              />
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem
+            value="delivery"
+            className="border rounded-lg px-6"
+            disabled={!canAccessStep('delivery')}
+          >
+            <AccordionTrigger
+              className="hover:no-underline"
+              disabled={!canAccessStep('delivery')}
+            >
+              <div className="flex items-center gap-3">
+                <div className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold ${
+                  completedSteps.has('delivery')
+                    ? 'bg-green-500 text-white'
+                    : currentStep === 'delivery'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground'
+                }`}>
+                  {completedSteps.has('delivery') ? '✓' : '2'}
+                </div>
+                <span className="text-lg font-semibold">{t('deliveryMethod')}</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="pt-4">
+              <DeliveryStep
+                onComplete={() => handleStepComplete('delivery')}
+                returnsToReview={willReturnToReview('delivery')}
+              />
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem
+            value="payment"
+            className="border rounded-lg px-6"
+            disabled={!canAccessStep('payment')}
+          >
+            <AccordionTrigger
+              className="hover:no-underline"
+              disabled={!canAccessStep('payment')}
+            >
+              <div className="flex items-center gap-3">
+                <div className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold ${
+                  completedSteps.has('payment')
+                    ? 'bg-green-500 text-white'
+                    : currentStep === 'payment'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground'
+                }`}>
+                  {completedSteps.has('payment') ? '✓' : '3'}
+                </div>
+                <span className="text-lg font-semibold">{t('paymentMethod')}</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="pt-4">
+              <PaymentStep
+                onComplete={() => handleStepComplete('payment')}
+              />
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem
+            value="review"
+            className="border rounded-lg px-6 last:border-b"
+            disabled={!canAccessStep('review')}
+          >
+            <AccordionTrigger
+              className="hover:no-underline"
+              disabled={!canAccessStep('review')}
+            >
+              <div className="flex items-center gap-3">
+                <div className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold ${
+                  currentStep === 'review'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground'
+                }`}>
+                  4
+                </div>
+                <span className="text-lg font-semibold">{t('reviewAndPlaceOrder')}</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="pt-4">
+              <ReviewStep
+                onEditStep={setCurrentStep}
+                onStartOver={() => {
+                  setCompletedSteps(new Set());
+                  setCurrentStep('shipping');
+                }}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+
+      <div className="lg:col-span-1">
+        <OrderSummary />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,181 @@
+'use client';
+
+import { createContext, useContext, ReactNode, useState } from 'react';
+import { CheckoutOrder } from './types';
+
+interface CustomerAddress {
+  id: string;
+  fullName?: string | null;
+  company?: string | null;
+  streetLine1: string;
+  streetLine2?: string | null;
+  city?: string | null;
+  province?: string | null;
+  postalCode?: string | null;
+  country: { id: string; code: string; name: string };
+  phoneNumber?: string | null;
+  defaultShippingAddress?: boolean | null;
+  defaultBillingAddress?: boolean | null;
+}
+
+interface CompanyAddress {
+  id: string;
+  fullName: string;
+  streetLine1: string;
+  streetLine2?: string | null;
+  province?: string | null;
+  country: { id: string; code: string; name: string };
+  city?: string | null;
+  postalCode?: string | null;
+  phoneNumber?: string | null;
+  defaultShippingAddress: boolean;
+  defaultBillingAddress: boolean;
+  businessUnit?: { id: string; name: string } | null;
+}
+
+interface CompanyPaymentMethod {
+  id: string;
+  name: string;
+  description?: string | null;
+  terms?: string | null;
+}
+
+interface Country {
+  id: string;
+  code: string;
+  name: string;
+}
+
+interface ShippingMethod {
+  id: string;
+  name: string;
+  code: string;
+  description?: string | null;
+  price: number;
+  priceWithTax: number;
+}
+
+interface PaymentMethod {
+  id: string;
+  name: string;
+  code: string;
+  description?: string | null;
+  isEligible: boolean;
+  eligibilityMessage?: string | null;
+}
+
+interface CheckoutContextType {
+  order: CheckoutOrder;
+  addresses: CustomerAddress[];
+  companyAddresses: CompanyAddress[];
+  companyPaymentMethods: CompanyPaymentMethod[];
+  countries: Country[];
+  shippingMethods: ShippingMethod[];
+  paymentMethods: PaymentMethod[];
+  selectedPaymentMethodCode: string | null;
+  setSelectedPaymentMethodCode: (code: string | null) => void;
+  selectedAddressId: string | null;
+  setSelectedAddressId: (id: string | null) => void;
+  selectedCompanyAddressId: string | null;
+  setSelectedCompanyAddressId: (id: string | null) => void;
+  addressSource: 'personal' | 'company';
+  setAddressSource: (source: 'personal' | 'company') => void;
+  useSameForBilling: boolean;
+  setUseSameForBilling: (value: boolean) => void;
+  selectedBillingAddressId: string | null;
+  setSelectedBillingAddressId: (id: string | null) => void;
+  storeCreditsCoverOrder: boolean;
+}
+
+const CheckoutContext = createContext<CheckoutContextType | null>(null);
+
+interface CheckoutProviderProps {
+  children: ReactNode;
+  order: CheckoutOrder;
+  addresses: CustomerAddress[];
+  companyAddresses: CompanyAddress[];
+  companyPaymentMethods: CompanyPaymentMethod[];
+  countries: Country[];
+  shippingMethods: ShippingMethod[];
+  paymentMethods: PaymentMethod[];
+}
+
+export function CheckoutProvider({
+  children,
+  order,
+  addresses,
+  companyAddresses,
+  companyPaymentMethods,
+  countries,
+  shippingMethods,
+  paymentMethods,
+}: CheckoutProviderProps) {
+  const [selectedPaymentMethodCode, setSelectedPaymentMethodCode] = useState<string | null>(
+    paymentMethods.length === 1 ? paymentMethods[0].code : null
+  );
+
+  const hasCompanyAddresses = companyAddresses.length > 0;
+  const [addressSource, setAddressSource] = useState<'personal' | 'company'>(
+    hasCompanyAddresses ? 'company' : 'personal'
+  );
+  const [selectedAddressId, setSelectedAddressId] = useState<string | null>(() => {
+    if (order.shippingAddress) {
+      const match = addresses.find(
+        (a) => a.streetLine1 === order.shippingAddress?.streetLine1 &&
+               a.postalCode === order.shippingAddress?.postalCode
+      );
+      if (match) return match.id;
+    }
+    const defaultAddr = addresses.find((a) => a.defaultShippingAddress);
+    if (defaultAddr) return defaultAddr.id;
+    if (addresses.length === 1) return addresses[0].id;
+    return null;
+  });
+  const [selectedCompanyAddressId, setSelectedCompanyAddressId] = useState<string | null>(() => {
+    const defaultAddr = companyAddresses.find((a) => a.defaultShippingAddress);
+    return defaultAddr?.id || null;
+  });
+  const [useSameForBilling, setUseSameForBilling] = useState(true);
+  const [selectedBillingAddressId, setSelectedBillingAddressId] = useState<string | null>(null);
+
+  const storeCreditsCoverOrder =
+    (order.storeCreditsApplied ?? []).length > 0 &&
+    order.totalWithTaxAfterStoreCredit === 0;
+
+  return (
+    <CheckoutContext.Provider
+      value={{
+        order,
+        addresses,
+        companyAddresses,
+        companyPaymentMethods,
+        countries,
+        shippingMethods,
+        paymentMethods,
+        selectedPaymentMethodCode,
+        setSelectedPaymentMethodCode,
+        selectedAddressId,
+        setSelectedAddressId,
+        selectedCompanyAddressId,
+        setSelectedCompanyAddressId,
+        addressSource,
+        setAddressSource,
+        useSameForBilling,
+        setUseSameForBilling,
+        selectedBillingAddressId,
+        setSelectedBillingAddressId,
+        storeCreditsCoverOrder,
+      }}
+    >
+      {children}
+    </CheckoutContext.Provider>
+  );
+}
+
+export function useCheckout() {
+  const context = useContext(CheckoutContext);
+  if (!context) {
+    throw new Error('useCheckout must be used within CheckoutProvider');
+  }
+  return context;
+}