@vendure-platform/create 0.4.0 → 0.5.1

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

@@ -1,180 +1,185 @@
 'use client';
 
-import { useState } from 'react';
-import { isRedirectError } from 'next/dist/client/components/redirect-error';
-import { useTranslations } from 'next-intl';
+import { Price } from '@/components/commerce/price';
+import { StoreCreditSummary } from '@/components/commerce/store-credit-summary';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
-import { Loader2, MapPin, Truck, CreditCard, Pencil, RotateCcw } from 'lucide-react';
-import { useCheckout } from '../checkout-provider';
+import { CreditCard, Loader2, MapPin, Pencil, RotateCcw, Truck } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { isRedirectError } from 'next/dist/client/components/redirect-error';
+import { useState } from 'react';
 import { placeOrder as placeOrderAction } from '../actions';
-import { Price } from '@/components/commerce/price';
-import { StoreCreditSummary } from '@/components/commerce/store-credit-summary';
+import { useCheckout } from '../checkout-provider';
 
 interface ReviewStepProps {
-  onEditStep: (step: 'shipping' | 'delivery' | 'payment') => void;
-  onStartOver: () => void;
+    onEditStep: (step: 'shipping' | 'delivery' | 'payment') => void;
+    onStartOver: () => void;
 }
 
 function ReviewCard({
-  icon: Icon,
-  title,
-  onEdit,
-  children,
+    icon: Icon,
+    title,
+    onEdit,
+    children,
 }: {
-  icon: React.ComponentType<{ className?: string }>;
-  title: string;
-  onEdit?: () => void;
-  children: React.ReactNode;
+    icon: React.ComponentType<{ className?: string }>;
+    title: string;
+    onEdit?: () => void;
+    children: React.ReactNode;
 }) {
-  const t = useTranslations('Checkout');
-  return (
-    <div className="@container rounded-lg border bg-card">
-      <div className="flex items-center justify-between gap-2 px-4 py-3">
-        <div className="flex items-center gap-2.5 min-w-0">
-          <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
-          <h4 className="text-sm font-semibold tracking-tight truncate">{title}</h4>
+    const t = useTranslations('Checkout');
+    return (
+        <div className="@container rounded-lg border bg-card">
+            <div className="flex items-center justify-between gap-2 px-4 py-3">
+                <div className="flex items-center gap-2.5 min-w-0">
+                    <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
+                    <h4 className="text-sm font-semibold tracking-tight truncate">{title}</h4>
+                </div>
+                {onEdit && (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        aria-label={t('edit')}
+                        className="h-7 px-1.5 @[15rem]:px-2 text-xs text-muted-foreground hover:text-foreground shrink-0"
+                        onClick={onEdit}
+                    >
+                        <Pencil className="h-3 w-3 @[15rem]:mr-1" />
+                        <span className="sr-only @[15rem]:not-sr-only">{t('edit')}</span>
+                    </Button>
+                )}
+            </div>
+            <Separator />
+            <div className="px-4 py-3 text-sm">{children}</div>
         </div>
-        {onEdit && (
-          <Button
-            variant="ghost"
-            size="sm"
-            aria-label={t('edit')}
-            className="h-7 px-1.5 @[15rem]:px-2 text-xs text-muted-foreground hover:text-foreground shrink-0"
-            onClick={onEdit}
-          >
-            <Pencil className="h-3 w-3 @[15rem]:mr-1" />
-            <span className="sr-only @[15rem]:not-sr-only">{t('edit')}</span>
-          </Button>
-        )}
-      </div>
-      <Separator />
-      <div className="px-4 py-3 text-sm">
-        {children}
-      </div>
-    </div>
-  );
+    );
 }
 
 export default function ReviewStep({ onEditStep, onStartOver }: ReviewStepProps) {
-  const { order, paymentMethods, selectedPaymentMethodCode, storeCreditsCoverOrder } = useCheckout();
-  const [loading, setLoading] = useState(false);
-  const t = useTranslations('Checkout');
-
-  const selectedPaymentMethod = paymentMethods.find(
-    (method) => method.code === selectedPaymentMethodCode
-  );
-
-  const storeCreditsApplied = order.storeCreditsApplied ?? [];
-  const totalAfterCredit = order.totalWithTaxAfterStoreCredit;
-
-  const canPlaceOrder = storeCreditsCoverOrder || !!selectedPaymentMethodCode;
-
-  const handlePlaceOrder = async () => {
-    if (!canPlaceOrder) return;
-
-    setLoading(true);
-    try {
-      await placeOrderAction(selectedPaymentMethodCode ?? undefined);
-    } catch (error) {
-      if (isRedirectError(error)) throw error;
-      console.error('Error placing order:', error);
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="space-y-5">
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-        <ReviewCard icon={MapPin} title={t('shippingAddress')} onEdit={() => onEditStep('shipping')}>
-          {order.shippingAddress ? (
-            <div className="space-y-0.5">
-              <p className="font-medium">{order.shippingAddress.fullName}</p>
-              <p className="text-muted-foreground">
-                {order.shippingAddress.streetLine1}
-                {order.shippingAddress.streetLine2 && `, ${order.shippingAddress.streetLine2}`}
-              </p>
-              <p className="text-muted-foreground">
-                {order.shippingAddress.city}, {order.shippingAddress.province} {order.shippingAddress.postalCode}
-              </p>
-              <p className="text-muted-foreground">{order.shippingAddress.country}</p>
-              {order.shippingAddress.phoneNumber && (
-                <p className="text-muted-foreground">{order.shippingAddress.phoneNumber}</p>
-              )}
-            </div>
-          ) : (
-            <p className="text-muted-foreground">{t('notSet')}</p>
-          )}
-        </ReviewCard>
-
-        <ReviewCard icon={Truck} title={t('steps.delivery')} onEdit={() => onEditStep('delivery')}>
-          {order.shippingLines && order.shippingLines.length > 0 ? (
-            <div className="space-y-0.5">
-              <p className="font-medium">{order.shippingLines[0].shippingMethod.name}</p>
-              <p className="text-muted-foreground">
-                {order.shippingLines[0].price === 0
-                  ? t('free')
-                  : <Price value={order.shippingLines[0].price} currencyCode={order.currencyCode} />}
-              </p>
+    const { order, paymentMethods, selectedPaymentMethodCode, storeCreditsCoverOrder } = useCheckout();
+    const [loading, setLoading] = useState(false);
+    const t = useTranslations('Checkout');
+
+    const selectedPaymentMethod = paymentMethods.find((method) => method.code === selectedPaymentMethodCode);
+
+    const storeCreditsApplied = order.storeCreditsApplied ?? [];
+    const totalAfterCredit = order.totalWithTaxAfterStoreCredit;
+
+    const canPlaceOrder = storeCreditsCoverOrder || !!selectedPaymentMethodCode;
+
+    const handlePlaceOrder = async () => {
+        if (!canPlaceOrder) return;
+
+        setLoading(true);
+        try {
+            await placeOrderAction(selectedPaymentMethodCode ?? undefined);
+        } catch (error) {
+            if (isRedirectError(error)) throw error;
+            console.error('Error placing order:', error);
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="space-y-5">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <ReviewCard icon={MapPin} title={t('shippingAddress')} onEdit={() => onEditStep('shipping')}>
+                    {order.shippingAddress ? (
+                        <div className="space-y-0.5">
+                            <p className="font-medium">{order.shippingAddress.fullName}</p>
+                            <p className="text-muted-foreground">
+                                {order.shippingAddress.streetLine1}
+                                {order.shippingAddress.streetLine2 &&
+                                    `, ${order.shippingAddress.streetLine2}`}
+                            </p>
+                            <p className="text-muted-foreground">
+                                {order.shippingAddress.city}, {order.shippingAddress.province}{' '}
+                                {order.shippingAddress.postalCode}
+                            </p>
+                            <p className="text-muted-foreground">{order.shippingAddress.country}</p>
+                            {order.shippingAddress.phoneNumber && (
+                                <p className="text-muted-foreground">{order.shippingAddress.phoneNumber}</p>
+                            )}
+                        </div>
+                    ) : (
+                        <p className="text-muted-foreground">{t('notSet')}</p>
+                    )}
+                </ReviewCard>
+
+                <ReviewCard icon={Truck} title={t('steps.delivery')} onEdit={() => onEditStep('delivery')}>
+                    {order.shippingLines && order.shippingLines.length > 0 ? (
+                        <div className="space-y-0.5">
+                            <p className="font-medium">{order.shippingLines[0].shippingMethod.name}</p>
+                            <p className="text-muted-foreground">
+                                {order.shippingLines[0].price === 0 ? (
+                                    t('free')
+                                ) : (
+                                    <Price
+                                        value={order.shippingLines[0].price}
+                                        currencyCode={order.currencyCode}
+                                    />
+                                )}
+                            </p>
+                        </div>
+                    ) : (
+                        <p className="text-muted-foreground">{t('notSelected')}</p>
+                    )}
+                </ReviewCard>
+
+                <ReviewCard
+                    icon={CreditCard}
+                    title={t('steps.payment')}
+                    onEdit={!storeCreditsCoverOrder ? () => onEditStep('payment') : undefined}
+                >
+                    {storeCreditsCoverOrder ? (
+                        <p className="font-medium text-green-600 dark:text-green-400">
+                            {t('coveredByStoreCredits')}
+                        </p>
+                    ) : selectedPaymentMethod ? (
+                        <div className="space-y-0.5">
+                            <p className="font-medium">{selectedPaymentMethod.name}</p>
+                            {selectedPaymentMethod.description && (
+                                <p className="text-muted-foreground">{selectedPaymentMethod.description}</p>
+                            )}
+                        </div>
+                    ) : (
+                        <p className="text-muted-foreground">{t('notSelected')}</p>
+                    )}
+                </ReviewCard>
             </div>
-          ) : (
-            <p className="text-muted-foreground">{t('notSelected')}</p>
-          )}
-        </ReviewCard>
-
-        <ReviewCard
-          icon={CreditCard}
-          title={t('steps.payment')}
-          onEdit={!storeCreditsCoverOrder ? () => onEditStep('payment') : undefined}
-        >
-          {storeCreditsCoverOrder ? (
-            <p className="font-medium text-green-600 dark:text-green-400">{t('coveredByStoreCredits')}</p>
-          ) : selectedPaymentMethod ? (
-            <div className="space-y-0.5">
-              <p className="font-medium">{selectedPaymentMethod.name}</p>
-              {selectedPaymentMethod.description && (
-                <p className="text-muted-foreground">{selectedPaymentMethod.description}</p>
-              )}
+
+            <StoreCreditSummary
+                credits={storeCreditsApplied}
+                totalAfterCredit={totalAfterCredit}
+                currencyCode={order.currencyCode}
+            />
+
+            {(!order.shippingAddress || !order.shippingLines?.length || !canPlaceOrder) && (
+                <p className="text-sm text-destructive text-center py-1">{t('completeAllSteps')}</p>
+            )}
+
+            <div className="space-y-2 pt-1">
+                <Button
+                    onClick={handlePlaceOrder}
+                    disabled={
+                        loading || !order.shippingAddress || !order.shippingLines?.length || !canPlaceOrder
+                    }
+                    size="lg"
+                    className="w-full"
+                >
+                    {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    {t('placeOrder')}
+                </Button>
+
+                <button
+                    type="button"
+                    className="w-full text-center text-xs text-muted-foreground/60 hover:text-muted-foreground transition-colors py-1 flex items-center justify-center gap-1.5"
+                    onClick={onStartOver}
+                    disabled={loading}
+                >
+                    <RotateCcw className="h-3 w-3" />
+                    {t('resetCheckout')}
+                </button>
             </div>
-          ) : (
-            <p className="text-muted-foreground">{t('notSelected')}</p>
-          )}
-        </ReviewCard>
-      </div>
-
-      <StoreCreditSummary
-        credits={storeCreditsApplied}
-        totalAfterCredit={totalAfterCredit}
-        currencyCode={order.currencyCode}
-      />
-
-      {(!order.shippingAddress || !order.shippingLines?.length || !canPlaceOrder) && (
-        <p className="text-sm text-destructive text-center py-1">
-          {t('completeAllSteps')}
-        </p>
-      )}
-
-      <div className="space-y-2 pt-1">
-        <Button
-          onClick={handlePlaceOrder}
-          disabled={loading || !order.shippingAddress || !order.shippingLines?.length || !canPlaceOrder}
-          size="lg"
-          className="w-full"
-        >
-          {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          {t('placeOrder')}
-        </Button>
-
-        <button
-          type="button"
-          className="w-full text-center text-xs text-muted-foreground/60 hover:text-muted-foreground transition-colors py-1 flex items-center justify-center gap-1.5"
-          onClick={onStartOver}
-          disabled={loading}
-        >
-          <RotateCcw className="h-3 w-3" />
-          {t('resetCheckout')}
-        </button>
-      </div>
-    </div>
-  );
+        </div>
+    );
 }