@vendure-platform/create 0.5.0 → 0.5.2

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

@@ -1,21 +1,21 @@
 'use server';
 
-import {client} from '@/lib/vendure/api';
+import { redirect } from '@/i18n/navigation';
+import { cartGuard } from '@/lib/cart-guard';
+import { getGuardError } from '@/lib/cart-guard-utils';
+import { client } from '@/lib/vendure/api';
 import {
-    SetOrderShippingAddressMutation,
-    SetOrderBillingAddressMutation,
-    SetOrderShippingMethodMutation,
     AddPaymentToOrderWithStoreCreditMutation,
-    CreateCustomerAddressMutation,
-    TransitionOrderToStateMutation,
     ApplyStoreCreditToOrderMutation,
+    CreateCustomerAddressMutation,
     RemoveStoreCreditFromOrderMutation,
+    SetOrderBillingAddressMutation,
+    SetOrderShippingAddressMutation,
+    SetOrderShippingMethodMutation,
+    TransitionOrderToStateMutation,
 } 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';
+import { GetActiveOrderQuery } from '@/lib/vendure/queries';
+import { revalidatePath, updateTag } from 'next/cache';
 
 interface AddressInput {
     fullName: string;
@@ -29,14 +29,10 @@ interface AddressInput {
     company?: string;
 }
 
-export async function setShippingAddress(
-    shippingAddress: AddressInput,
-    billingAddress?: AddressInput,
-) {
-    const [shippingResult, shippingError] = await client.mutate(
-        SetOrderShippingAddressMutation,
-        {input: shippingAddress},
-    );
+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') {
@@ -44,20 +40,16 @@ export async function setShippingAddress(
     }
 
     const billingInput = billingAddress ?? shippingAddress;
-    const [, billingError] = await client.mutate(
-        SetOrderBillingAddressMutation,
-        {input: billingInput},
-    );
+    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]},
-    );
+    const [result, error] = await client.mutate(SetOrderShippingMethodMutation, {
+        shippingMethodId: [shippingMethodId],
+    });
     if (error) throw error;
 
     if (result.data.setOrderShippingMethod.__typename !== 'Order') {
@@ -68,10 +60,7 @@ export async function setShippingMethod(shippingMethodId: string) {
 }
 
 export async function createCustomerAddress(address: AddressInput) {
-    const [result, error] = await client.mutate(
-        CreateCustomerAddressMutation,
-        {input: address},
-    );
+    const [result, error] = await client.mutate(CreateCustomerAddressMutation, { input: address });
     if (error) throw error;
 
     if (!result.data.createCustomerAddress) {
@@ -85,39 +74,33 @@ export async function createCustomerAddress(address: AddressInput) {
 export async function applyStoreCredit(code: string) {
     const guard = await cartGuard();
     const guardError = getGuardError(guard);
-    if (guardError) return {error: guardError};
+    if (guardError) return { error: guardError };
 
-    const [result, error] = await client.mutate(
-        ApplyStoreCreditToOrderMutation,
-        {code},
-    );
+    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};
+        return { error: errorResult.message };
     }
 
     revalidatePath('/checkout');
-    return {success: true};
+    return { success: true };
 }
 
 export async function removeStoreCredit(code: string) {
     const guard = await cartGuard();
     const guardError = getGuardError(guard);
-    if (guardError) return {error: guardError};
+    if (guardError) return { error: guardError };
 
-    const [, error] = await client.mutate(
-        RemoveStoreCreditFromOrderMutation,
-        {code},
-    );
+    const [, error] = await client.mutate(RemoveStoreCreditFromOrderMutation, { code });
 
     if (error) {
-        return {error: error.message || 'Failed to remove store credit'};
+        return { error: error.message || 'Failed to remove store credit' };
     }
 
     revalidatePath('/checkout');
-    return {success: true};
+    return { success: true };
 }
 
 export async function placeOrder(paymentMethodCode?: string) {
@@ -129,10 +112,9 @@ export async function placeOrder(paymentMethodCode?: string) {
 
     if (currentState !== 'ArrangingPayment') {
         // Try to transition the order to ArrangingPayment state
-        const [transitionResult, transitionError] = await client.mutate(
-            TransitionOrderToStateMutation,
-            {state: 'ArrangingPayment'},
-        );
+        const [transitionResult, transitionError] = await client.mutate(TransitionOrderToStateMutation, {
+            state: 'ArrangingPayment',
+        });
         if (transitionError) throw transitionError;
 
         // If the transition fails, check if the order requires approval
@@ -141,10 +123,9 @@ export async function placeOrder(paymentMethodCode?: string) {
 
             // Try transitioning to AwaitingApproval instead
             if (transitionError.fromState === 'AddingItems') {
-                const [approvalResult, approvalError] = await client.mutate(
-                    TransitionOrderToStateMutation,
-                    {state: 'AwaitingApproval'},
-                );
+                const [approvalResult, approvalError] = await client.mutate(TransitionOrderToStateMutation, {
+                    state: 'AwaitingApproval',
+                });
                 if (approvalError) throw approvalError;
 
                 if (approvalResult.data.transitionOrderToState?.__typename === 'Order') {
@@ -157,7 +138,7 @@ export async function placeOrder(paymentMethodCode?: string) {
 
             // If we get here, neither transition worked
             throw new Error(
-                `Failed to transition order state: ${transitionError.errorCode} - ${transitionError.message}`
+                `Failed to transition order state: ${transitionError.errorCode} - ${transitionError.message}`,
             );
         }
     }
@@ -166,21 +147,14 @@ export async function placeOrder(paymentMethodCode?: string) {
     // 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,
-        },
-    );
+    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}`
-        );
+        throw new Error(`Failed to place order: ${errorResult.errorCode} - ${errorResult.message}`);
     }
 
     const orderCode = result.data.addPaymentToOrderWithStoreCredit.code;

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

@@ -1,10 +1,10 @@
 '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';
+import { cancelQuoteCheckout } from '@/app/[locale]/account/quotes/actions';
+import { Button } from '@/components/ui/button';
+import { useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+import { useTransition } from 'react';
 
 export function CancelQuoteCheckoutButton() {
     const router = useRouter();

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

@@ -1,214 +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 { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { useCheckout } from './checkout-provider';
+import OrderSummary from './order-summary';
 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';
+import ShippingAddressStep from './steps/shipping-address-step';
 
 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);
+    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;
             }
-          }}
-          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>
-  );
+        }
+        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>
+    );
 }