bestraw 1.0.0

package/templates/web/src/app/[locale]/order/checkout/page.tsx

@@ -0,0 +1,489 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { useLocale } from 'next-intl';
+import { notFound } from 'next/navigation';
+import { useCart } from '@/providers/CartProvider';
+import { hasOrdering, hasPayments, hasLoyalty } from '@/lib/features';
+import { StripeProvider } from '@/providers/StripeProvider';
+import { StripePaymentForm } from '@/components/checkout/StripePaymentForm';
+import { ErrorAlert } from '@/components/ui/ErrorAlert';
+import { getErrorMessage } from '@/lib/errors';
+import { BestrawClient, BestrawError } from 'bestraw-sdk';
+import type { CreateOrderInput, OrderType, LoyaltyReward, LoyaltyAccount, PublicOrderSettings, RestaurantStatus } from 'bestraw-sdk';
+
+function formatPrice(price: number): string {
+  return price.toFixed(2).replace('.', ',') + ' \u20AC';
+}
+
+function calculateDiscountPreview(
+  reward: LoyaltyReward,
+  cartItems: Array<{ mealDocumentId: string; unitPrice: number; quantity: number }>,
+  subtotal: number,
+): number {
+  switch (reward.type) {
+    case 'free-item': {
+      const match = cartItems.find((i) => i.mealDocumentId === reward.mealDocumentId);
+      return match ? match.unitPrice : 0;
+    }
+    case 'discount-percent':
+      return Math.round(subtotal * ((reward.value ?? 0) / 100) * 100) / 100;
+    case 'discount-fixed':
+      return Math.min(reward.value ?? 0, subtotal);
+    default:
+      return 0;
+  }
+}
+
+export default function CheckoutPage() {
+  if (!hasOrdering) notFound();
+  const t = useTranslations('checkout');
+  const tLoyalty = useTranslations('loyalty');
+  const locale = useLocale();
+  const { items, total, clearCart } = useCart();
+  const [orderType, setOrderType] = useState<OrderType>('takeaway');
+  const [tableNumber, setTableNumber] = useState('');
+  const [notes, setNotes] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  // Payment step state
+  const [clientSecret, setClientSecret] = useState<string | null>(null);
+  const [orderId, setOrderId] = useState<string | null>(null);
+  const [orderItems, setOrderItems] = useState<typeof items>([]);
+  const [orderTotal, setOrderTotal] = useState(0);
+
+  // Loyalty reward state
+  const [loyaltyAccount, setLoyaltyAccount] = useState<LoyaltyAccount | null>(null);
+  const [allRewards, setAllRewards] = useState<Array<LoyaltyReward & { programIndex: number }>>([]);
+  const [selectedProgramIndex, setSelectedProgramIndex] = useState<number | null>(null);
+
+  // Order settings state
+  const [orderSettings, setOrderSettings] = useState<PublicOrderSettings | null>(null);
+  const [restaurantStatus, setRestaurantStatus] = useState<RestaurantStatus | null>(null);
+
+  const apiUrl =
+    process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1338';
+
+  const tErrors = useTranslations('errors');
+
+  // Fetch order settings + loyalty data on mount
+  useEffect(() => {
+    const client = new BestrawClient({ baseUrl: apiUrl });
+
+    // Fetch public order settings (no auth needed)
+    client.ordering.getPublicOrderSettings()
+      .then((settings) => {
+        setOrderSettings(settings);
+        // Auto-select the only available order type
+        if (settings.takeawayEnabled && !settings.dineInEnabled) setOrderType('takeaway');
+        if (settings.dineInEnabled && !settings.takeawayEnabled) setOrderType('dine-in');
+      })
+      .catch(() => {
+        // If settings fetch fails, allow both types (graceful fallback)
+        setOrderSettings({ orderingEnabled: true, takeawayEnabled: true, dineInEnabled: true, estimatedPrepMinutes: 20 });
+      });
+
+    // Fetch restaurant open/closed status
+    client.restaurant.getStatus()
+      .then((status) => setRestaurantStatus(status))
+      .catch(() => {});
+
+    // Fetch loyalty data (needs auth)
+    if (hasLoyalty) {
+      const token = localStorage.getItem('bestraw-customer-token');
+      if (token) {
+        const authClient = new BestrawClient({
+          baseUrl: apiUrl,
+          getAuthToken: () => token,
+        });
+        Promise.all([
+          authClient.loyalty.getMyAccount(),
+          authClient.loyalty.getProgram(),
+        ])
+          .then(([account, program]) => {
+            setLoyaltyAccount(account);
+            if (program.enabled && program.rewards) {
+              setAllRewards(
+                program.rewards
+                  .map((r, i) => ({ ...r, programIndex: i }))
+                  .filter((r) => r.active && account.points >= r.pointsCost),
+              );
+            }
+          })
+          .catch(() => {
+            // Loyalty not available, silently ignore
+          });
+      }
+    }
+  }, [apiUrl]);
+
+  const selectedReward = selectedProgramIndex !== null
+    ? allRewards.find((r) => r.programIndex === selectedProgramIndex) ?? null
+    : null;
+
+  const currentDiscount = selectedReward
+    ? calculateDiscountPreview(selectedReward, items, total)
+    : 0;
+
+  const displayTotal = Math.max(0, total - currentDiscount);
+
+  async function handleCreateOrder(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    const token = localStorage.getItem('bestraw-customer-token');
+    if (!token) {
+      setError(tErrors('AUTH_REQUIRED'));
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const orderData: CreateOrderInput = {
+        items: items.map((item) => ({
+          mealDocumentId: item.mealDocumentId,
+          quantity: item.quantity,
+          selectedSauces: item.selectedSauces,
+          selectedSides: item.selectedSides,
+          specialInstructions: item.specialInstructions,
+        })),
+        type: orderType,
+        tableNumber: orderType === 'dine-in' ? tableNumber : undefined,
+        notes: notes.trim() || undefined,
+        rewardIndex: selectedReward ? selectedReward.programIndex : undefined,
+      };
+
+      // Create order
+      const orderResponse = await fetch(`${apiUrl}/api/ordering/orders`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(orderData),
+      });
+
+      if (!orderResponse.ok) {
+        const errorBody = await orderResponse.json().catch(() => null);
+        throw new BestrawError(orderResponse.status, errorBody?.error?.message || 'Order failed', errorBody);
+      }
+
+      const orderJson = await orderResponse.json();
+      const order = orderJson.data ?? orderJson;
+
+      if (!hasPayments) {
+        clearCart();
+        window.location.href = `/${locale}/order/confirmation/${order.documentId}`;
+        return;
+      }
+
+      // Create payment intent
+      const paymentResponse = await fetch(
+        `${apiUrl}/api/payment/payments/create-intent`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({ orderDocumentId: order.documentId }),
+        }
+      );
+
+      if (!paymentResponse.ok) {
+        const errorBody = await paymentResponse.json().catch(() => null);
+        throw new BestrawError(paymentResponse.status, errorBody?.error?.message || 'Payment failed', errorBody);
+      }
+
+      const paymentData = await paymentResponse.json();
+      setOrderItems([...items]);
+      setOrderTotal(order.total ?? total);
+      setClientSecret(paymentData.data.clientSecret);
+      setOrderId(order.documentId);
+      clearCart();
+    } catch (err: unknown) {
+      setError(getErrorMessage(err, tErrors));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const orderingDisabled = orderSettings !== null && (
+    !orderSettings.orderingEnabled || (!orderSettings.takeawayEnabled && !orderSettings.dineInEnabled)
+  );
+  const restaurantClosed = restaurantStatus !== null && !restaurantStatus.isOpen;
+
+  if (!clientSecret && items.length === 0) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <h1 className="text-3xl sm:text-4xl font-bold text-[var(--color-primary)]">
+          {t('title')}
+        </h1>
+        <p className="mt-4 text-gray-500">{t('emptyCart')}</p>
+      </div>
+    );
+  }
+
+  const returnUrl = typeof window !== 'undefined'
+    ? `${window.location.origin}/${locale}/order/confirmation/${orderId}`
+    : '';
+
+  // Filter free-item rewards to only show ones whose meal is in the cart
+  const eligibleRewards = allRewards.filter((reward) => {
+    if (reward.type === 'free-item') {
+      return items.some((item) => item.mealDocumentId === reward.mealDocumentId);
+    }
+    return true;
+  });
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <h1 className="text-3xl sm:text-4xl font-bold text-[var(--color-primary)] mb-10">
+        {t('title')}
+      </h1>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2">
+          {/* Step 1: Order form */}
+          {!clientSecret && (orderingDisabled || restaurantClosed) && (
+            <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
+              <p className="text-amber-800 text-sm font-medium">
+                {restaurantClosed
+                  ? restaurantStatus?.closureReason
+                    ? t('restaurantClosedReason', { reason: restaurantStatus.closureReason })
+                    : t('restaurantClosed')
+                  : t('orderingDisabled')}
+              </p>
+            </div>
+          )}
+
+          {!clientSecret && !orderingDisabled && !restaurantClosed && (
+            <form onSubmit={handleCreateOrder} className="space-y-6">
+              {/* Order type */}
+              {orderSettings && (orderSettings.takeawayEnabled || orderSettings.dineInEnabled) && (
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  {t('orderType')}
+                </label>
+                <div className="flex gap-3">
+                  {(!orderSettings || orderSettings.takeawayEnabled) && (
+                  <button
+                    type="button"
+                    onClick={() => setOrderType('takeaway')}
+                    className={`flex-1 px-4 py-3 rounded-md border-2 text-sm font-medium transition-all ${
+                      orderType === 'takeaway'
+                        ? 'border-[var(--color-accent)] bg-[var(--color-accent)] text-white'
+                        : 'border-gray-200 text-gray-600 hover:border-gray-300'
+                    }`}
+                  >
+                    {t('takeaway')}
+                  </button>
+                  )}
+                  {(!orderSettings || orderSettings.dineInEnabled) && (
+                  <button
+                    type="button"
+                    onClick={() => setOrderType('dine-in')}
+                    className={`flex-1 px-4 py-3 rounded-md border-2 text-sm font-medium transition-all ${
+                      orderType === 'dine-in'
+                        ? 'border-[var(--color-accent)] bg-[var(--color-accent)] text-white'
+                        : 'border-gray-200 text-gray-600 hover:border-gray-300'
+                    }`}
+                  >
+                    {t('dineIn')}
+                  </button>
+                  )}
+                </div>
+              </div>
+              )}
+
+              {/* Table number */}
+              {orderType === 'dine-in' && (
+                <div>
+                  <label
+                    htmlFor="tableNumber"
+                    className="block text-sm font-medium text-gray-700 mb-1"
+                  >
+                    {t('tableNumber')}
+                  </label>
+                  <input
+                    id="tableNumber"
+                    type="text"
+                    value={tableNumber}
+                    onChange={(e) => setTableNumber(e.target.value)}
+                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--color-accent)] focus:border-[var(--color-accent)]"
+                    required
+                  />
+                </div>
+              )}
+
+              {/* Notes */}
+              <div>
+                <label
+                  htmlFor="notes"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  {t('notes')}
+                </label>
+                <textarea
+                  id="notes"
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  rows={3}
+                  className="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--color-accent)] focus:border-[var(--color-accent)]"
+                  placeholder={t('notesPlaceholder')}
+                />
+              </div>
+
+              {/* Loyalty rewards */}
+              {hasLoyalty && eligibleRewards.length > 0 && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    {t('applyReward')}
+                    {loyaltyAccount && (
+                      <span className="ml-2 text-xs text-gray-400 font-normal">
+                        ({loyaltyAccount.points} {tLoyalty('points')})
+                      </span>
+                    )}
+                  </label>
+                  <div className="space-y-2">
+                    {/* No reward option */}
+                    <label
+                      className={`flex items-center gap-3 p-3 rounded-md border-2 cursor-pointer transition-all ${
+                        selectedProgramIndex === null
+                          ? 'border-[var(--color-accent)] bg-[var(--color-accent)]/5'
+                          : 'border-gray-200 hover:border-gray-300'
+                      }`}
+                    >
+                      <input
+                        type="radio"
+                        name="reward"
+                        checked={selectedProgramIndex === null}
+                        onChange={() => setSelectedProgramIndex(null)}
+                        className="accent-[var(--color-accent)]"
+                      />
+                      <span className="text-sm text-gray-600">{t('noReward')}</span>
+                    </label>
+
+                    {eligibleRewards.map((reward) => {
+                      const preview = calculateDiscountPreview(reward, items, total);
+                      return (
+                        <label
+                          key={reward.programIndex}
+                          className={`flex items-center gap-3 p-3 rounded-md border-2 cursor-pointer transition-all ${
+                            selectedProgramIndex === reward.programIndex
+                              ? 'border-[var(--color-accent)] bg-[var(--color-accent)]/5'
+                              : 'border-gray-200 hover:border-gray-300'
+                          }`}
+                        >
+                          <input
+                            type="radio"
+                            name="reward"
+                            checked={selectedProgramIndex === reward.programIndex}
+                            onChange={() => setSelectedProgramIndex(reward.programIndex)}
+                            className="accent-[var(--color-accent)]"
+                          />
+                          <div className="flex-1">
+                            <span className="text-sm font-medium">{reward.name}</span>
+                            <span className="ml-2 text-xs text-gray-400">
+                              {reward.pointsCost} pts
+                            </span>
+                          </div>
+                          <span className="text-sm text-green-600 font-medium">
+                            -{formatPrice(preview)}
+                          </span>
+                        </label>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+              {error && <ErrorAlert message={error} />}
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full px-6 py-3 rounded-md bg-[var(--color-accent)] text-white font-medium hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? t('processing') : t('placeOrder')}
+              </button>
+            </form>
+          )}
+
+          {/* Step 2: Stripe payment */}
+          {clientSecret && (
+            <div>
+              <h2 className="text-lg font-semibold text-[var(--color-primary)] mb-6">
+                {t('payment')}
+              </h2>
+              <StripeProvider clientSecret={clientSecret}>
+                <StripePaymentForm returnUrl={returnUrl} />
+              </StripeProvider>
+            </div>
+          )}
+        </div>
+
+        {/* Order summary sidebar */}
+        <div className="lg:col-span-1">
+          <div className="bg-gray-50 rounded-lg p-6 sticky top-24">
+            <h2 className="text-lg font-semibold text-[var(--color-primary)] mb-4">
+              {t('summary')}
+            </h2>
+
+            <div className="space-y-3">
+              {(clientSecret ? orderItems : items).map((item, index) => (
+                <div
+                  key={`${item.mealDocumentId}-${index}`}
+                  className="flex justify-between text-sm"
+                >
+                  <span className="text-gray-600">
+                    {item.quantity}x {item.mealName}
+                  </span>
+                  <span className="text-gray-800 font-medium">
+                    {formatPrice(item.unitPrice * item.quantity)}
+                  </span>
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-4 pt-4 border-t border-gray-200 space-y-2">
+              {/* Show subtotal + discount when a reward is selected */}
+              {!clientSecret && currentDiscount > 0 && (
+                <>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-gray-500">{t('subtotal')}</span>
+                    <span className="text-gray-700">{formatPrice(total)}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-green-600">{t('discount')}</span>
+                    <span className="text-green-600 font-medium">
+                      -{formatPrice(currentDiscount)}
+                    </span>
+                  </div>
+                </>
+              )}
+              <div className="flex justify-between font-semibold">
+                <span className="text-[var(--color-primary)]">{t('total')}</span>
+                <span className="text-[var(--color-accent)]">
+                  {formatPrice(
+                    clientSecret
+                      ? orderTotal
+                      : displayTotal,
+                  )}
+                </span>
+              </div>
+              {!clientSecret && orderSettings && orderSettings.estimatedPrepMinutes > 0 && (
+                <p className="mt-3 text-xs text-gray-400 text-center">
+                  {t('estimatedPrep', { minutes: orderSettings.estimatedPrepMinutes })}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/web/src/app/[locale]/order/confirmation/[id]/page.tsx

@@ -0,0 +1,159 @@
+import { getTranslations } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { bestraw } from '@/lib/client';
+import { OrderStatusTracker } from '@/components/order/OrderStatusTracker';
+import { PaymentStatus } from '@/components/order/PaymentStatus';
+import { hasOrdering, hasPayments } from '@/lib/features';
+
+function formatPrice(price: number): string {
+  return price.toFixed(2).replace('.', ',') + ' \u20AC';
+}
+
+export default async function ConfirmationPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ locale: string; id: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  if (!hasOrdering) notFound();
+  const { id } = await params;
+  const query = await searchParams;
+  const t = await getTranslations('confirmation');
+
+  const paymentClientSecret =
+    hasPayments && typeof query.payment_intent_client_secret === 'string'
+      ? query.payment_intent_client_secret
+      : null;
+  const apiUrl =
+    process.env.API_URL ||
+    process.env.NEXT_PUBLIC_API_URL ||
+    'http://localhost:1338';
+
+  let order: Awaited<ReturnType<typeof bestraw.ordering.getOrder>> | null = null;
+
+  try {
+    order = await bestraw.ordering.getOrder(id);
+  } catch {
+    // Order not found or API unavailable
+  }
+
+  if (!order) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <h1 className="text-3xl sm:text-4xl font-bold text-[var(--color-primary)]">
+          {t('title')}
+        </h1>
+        <p className="mt-4 text-gray-500">{t('notFound')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center mb-10">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
+          <svg
+            className="w-8 h-8 text-green-500"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 13l4 4L19 7"
+            />
+          </svg>
+        </div>
+        <h1 className="text-3xl sm:text-4xl font-bold text-[var(--color-primary)]">
+          {t('thankYou')}
+        </h1>
+        <p className="mt-2 text-gray-600">{t('orderReceived')}</p>
+      </div>
+
+      {/* Order number */}
+      <div className="bg-gray-50 rounded-lg p-6 mb-8 text-center">
+        <p className="text-sm text-gray-500 mb-1">{t('orderNumber')}</p>
+        <p className="text-2xl font-bold text-[var(--color-primary)]">
+          {order.orderNumber}
+        </p>
+        {order.estimatedReadyAt && (
+          <p className="mt-2 text-sm text-gray-600">
+            {t('estimatedReady')}{' '}
+            <span className="font-medium">
+              {new Date(order.estimatedReadyAt).toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit',
+              })}
+            </span>
+          </p>
+        )}
+      </div>
+
+      {/* Payment status (Stripe redirect) */}
+      {paymentClientSecret && (
+        <PaymentStatus clientSecret={paymentClientSecret} />
+      )}
+
+      {/* Status tracker */}
+      <div className="mb-8">
+        <OrderStatusTracker
+          orderId={order.documentId}
+          initialStatus={order.status}
+          apiUrl={apiUrl}
+        />
+      </div>
+
+      {/* Order details */}
+      <div className="bg-white rounded-lg border border-gray-100 p-6">
+        <h2 className="text-lg font-semibold text-[var(--color-primary)] mb-4">
+          {t('orderDetails')}
+        </h2>
+
+        <div className="space-y-3">
+          {order.items.map((item, index) => (
+            <div key={index} className="flex justify-between text-sm">
+              <span className="text-gray-600">
+                {item.quantity}x {item.mealName}
+              </span>
+              <span className="text-gray-800 font-medium">
+                {formatPrice(item.totalPrice)}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-4 pt-4 border-t border-gray-200 space-y-2">
+          <div className="flex justify-between text-sm">
+            <span className="text-gray-500">{t('subtotal')}</span>
+            <span className="text-gray-700">{formatPrice(order.subtotal)}</span>
+          </div>
+          {(order.discount ?? 0) > 0 && (
+            <div className="flex justify-between text-sm">
+              <span className="text-green-600">
+                {t('discount')} ({order.discountLabel})
+              </span>
+              <span className="text-green-600 font-medium">
+                -{formatPrice(order.discount!)}
+              </span>
+            </div>
+          )}
+          {order.tax > 0 && (
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-500">{t('tax')}</span>
+              <span className="text-gray-700">{formatPrice(order.tax)}</span>
+            </div>
+          )}
+          <div className="flex justify-between font-semibold pt-2 border-t border-gray-100">
+            <span className="text-[var(--color-primary)]">{t('total')}</span>
+            <span className="text-[var(--color-accent)]">
+              {formatPrice(order.total)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}