@vendure-platform/create 0.1.0

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

@@ -0,0 +1,180 @@
+'use client';
+
+import { useState } from 'react';
+import { isRedirectError } from 'next/dist/client/components/redirect-error';
+import { useTranslations } from 'next-intl';
+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 { placeOrder as placeOrderAction } from '../actions';
+import { Price } from '@/components/commerce/price';
+import { StoreCreditSummary } from '@/components/commerce/store-credit-summary';
+
+interface ReviewStepProps {
+  onEditStep: (step: 'shipping' | 'delivery' | 'payment') => void;
+  onStartOver: () => void;
+}
+
+function ReviewCard({
+  icon: Icon,
+  title,
+  onEdit,
+  children,
+}: {
+  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>
+        </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>
+            </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>
+
+      <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>
+  );
+}