@vendure-platform/create 0.4.0 → 0.5.1

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>
+    );
 }