bestraw 1.0.0

package/templates/web/src/components/order/MealOrderCard.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { useCart } from '@/providers/CartProvider';
+import type { Meal } from 'bestraw-sdk';
+
+interface MealOrderCardProps {
+  meal: Meal;
+  apiUrl: string;
+  onShowDetail?: () => void;
+}
+
+function formatPrice(price: number): string {
+  return price.toFixed(2).replace('.', ',') + ' \u20AC';
+}
+
+export function MealOrderCard({ meal, apiUrl, onShowDetail }: MealOrderCardProps) {
+  const t = useTranslations('order');
+  const { addItem } = useCart();
+  const [quantity, setQuantity] = useState(1);
+  const [selectedSauces, setSelectedSauces] = useState<string[]>([]);
+  const [selectedSides, setSelectedSides] = useState<string[]>([]);
+  const [specialInstructions, setSpecialInstructions] = useState('');
+  const [showDetails, setShowDetails] = useState(false);
+
+  const picture = meal.pictures?.[0];
+  const imageUrl = picture ? `${apiUrl}${picture.url}` : null;
+  const hasSauces = meal.sauces && meal.sauces.length > 0;
+  const hasSides = meal.sides && meal.sides.length > 0;
+  const hasOptions = hasSauces || hasSides;
+
+  function handleSauceToggle(sauceName: string) {
+    setSelectedSauces((prev) =>
+      prev.includes(sauceName)
+        ? prev.filter((s) => s !== sauceName)
+        : [...prev, sauceName]
+    );
+  }
+
+  function handleSideToggle(sideName: string) {
+    setSelectedSides((prev) =>
+      prev.includes(sideName)
+        ? prev.filter((s) => s !== sideName)
+        : [...prev, sideName]
+    );
+  }
+
+  function handleAddToCart() {
+    addItem({
+      mealDocumentId: meal.documentId,
+      mealName: meal.name,
+      unitPrice: meal.price,
+      quantity,
+      selectedSauces,
+      selectedSides,
+      specialInstructions: specialInstructions.trim(),
+      picture: imageUrl || undefined,
+    });
+
+    // Reset form
+    setQuantity(1);
+    setSelectedSauces([]);
+    setSelectedSides([]);
+    setSpecialInstructions('');
+    setShowDetails(false);
+  }
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-100 overflow-hidden hover:shadow-md transition-shadow">
+      {imageUrl && (
+        <div className="aspect-[4/3] overflow-hidden bg-gray-100">
+          <img
+            src={imageUrl}
+            alt={picture?.alternativeText || meal.name}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      )}
+
+      <div className="p-4">
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="font-semibold text-[var(--color-primary)]">
+            {meal.name}
+          </h3>
+          <span className="text-sm font-medium text-[var(--color-accent)] whitespace-nowrap">
+            {formatPrice(meal.price)}
+          </span>
+        </div>
+
+        {meal.description && (
+          <p className="mt-1 text-sm text-gray-600 line-clamp-2">
+            {meal.description}
+          </p>
+        )}
+
+        {/* Options toggle */}
+        {hasOptions && (
+          <button
+            type="button"
+            onClick={() => setShowDetails(!showDetails)}
+            className="mt-2 text-xs text-[var(--color-accent)] hover:underline"
+          >
+            {showDetails ? t('hideOptions') : t('showOptions')}
+          </button>
+        )}
+
+        {/* Expanded options */}
+        {showDetails && (
+          <div className="mt-3 space-y-3">
+            {hasSauces && (
+              <div>
+                <p className="text-xs font-medium text-gray-700 mb-1">
+                  {t('sauces')}
+                </p>
+                <div className="space-y-1">
+                  {meal.sauces!.map((sauce) => (
+                    <label
+                      key={sauce.name}
+                      className="flex items-center gap-2 text-sm text-gray-600 cursor-pointer"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedSauces.includes(sauce.name)}
+                        onChange={() => handleSauceToggle(sauce.name)}
+                        className="rounded border-gray-300 text-[var(--color-accent)] focus:ring-[var(--color-accent)]"
+                      />
+                      {sauce.name}
+                    </label>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {hasSides && (
+              <div>
+                <p className="text-xs font-medium text-gray-700 mb-1">
+                  {t('sides')}
+                </p>
+                <div className="space-y-1">
+                  {meal.sides!.map((side) => (
+                    <label
+                      key={side.name}
+                      className="flex items-center gap-2 text-sm text-gray-600 cursor-pointer"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedSides.includes(side.name)}
+                        onChange={() => handleSideToggle(side.name)}
+                        className="rounded border-gray-300 text-[var(--color-accent)] focus:ring-[var(--color-accent)]"
+                      />
+                      {side.name}
+                    </label>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Special instructions */}
+        <div className="mt-3">
+          <input
+            type="text"
+            placeholder={t('specialInstructions')}
+            value={specialInstructions}
+            onChange={(e) => setSpecialInstructions(e.target.value)}
+            className="w-full text-sm px-3 py-1.5 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--color-accent)] focus:border-[var(--color-accent)]"
+          />
+        </div>
+
+        {/* Quantity + Detail + Add to cart */}
+        <div className="mt-3 flex items-center gap-2">
+          <div className="flex items-center border border-gray-200 rounded-md">
+            <button
+              type="button"
+              onClick={() => setQuantity(Math.max(1, quantity - 1))}
+              className="px-2 py-1 text-gray-500 hover:text-gray-700"
+              aria-label={t('decreaseQuantity')}
+            >
+              -
+            </button>
+            <span className="px-3 py-1 text-sm font-medium min-w-[2rem] text-center">
+              {quantity}
+            </span>
+            <button
+              type="button"
+              onClick={() => setQuantity(quantity + 1)}
+              className="px-2 py-1 text-gray-500 hover:text-gray-700"
+              aria-label={t('increaseQuantity')}
+            >
+              +
+            </button>
+          </div>
+
+          {onShowDetail && (
+            <button
+              type="button"
+              onClick={onShowDetail}
+              className="p-2 rounded-md border border-gray-200 text-gray-500 hover:text-[var(--color-primary)] hover:border-[var(--color-primary)] transition-colors"
+              aria-label={t('viewDetails')}
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </button>
+          )}
+
+          <button
+            type="button"
+            onClick={handleAddToCart}
+            className="flex-1 px-4 py-2 rounded-md bg-[var(--color-accent)] text-white text-sm font-medium hover:opacity-90 transition-opacity"
+          >
+            {t('addToCart')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/web/src/components/order/OrderStatusTracker.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import type { OrderStatus } from 'bestraw-sdk';
+
+interface OrderStatusTrackerProps {
+  orderId: string;
+  initialStatus: string;
+  apiUrl: string;
+}
+
+const STATUS_STEPS: OrderStatus[] = [
+  'pending',
+  'confirmed',
+  'preparing',
+  'ready',
+  'completed',
+];
+
+export function OrderStatusTracker({
+  orderId,
+  initialStatus,
+  apiUrl,
+}: OrderStatusTrackerProps) {
+  const t = useTranslations('orderStatus');
+  const [currentStatus, setCurrentStatus] = useState<string>(initialStatus);
+
+  useEffect(() => {
+    const eventSource = new EventSource(
+      `${apiUrl}/api/realtime/events`
+    );
+
+    function handleStatusChanged(event: MessageEvent) {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.order?.documentId === orderId && data.order?.status) {
+          setCurrentStatus(data.order.status);
+        }
+      } catch {
+        // Ignore parse errors
+      }
+    }
+
+    function handleCancelled(event: MessageEvent) {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.order?.documentId === orderId) {
+          setCurrentStatus('cancelled');
+        }
+      } catch {
+        // Ignore parse errors
+      }
+    }
+
+    eventSource.addEventListener('order.statusChanged', handleStatusChanged);
+    eventSource.addEventListener('order.cancelled', handleCancelled);
+
+    return () => {
+      eventSource.close();
+    };
+  }, [orderId, apiUrl]);
+
+  const currentIndex = STATUS_STEPS.indexOf(currentStatus as OrderStatus);
+  const isCancelled = currentStatus === 'cancelled';
+
+  return (
+    <div className="py-4">
+      {isCancelled ? (
+        <div className="text-center p-4 bg-red-50 rounded-lg border border-red-200">
+          <p className="text-red-600 font-medium">{t('cancelled')}</p>
+        </div>
+      ) : (
+        <div className="flex items-center justify-between">
+          {STATUS_STEPS.map((step, index) => {
+            const isCompleted = index < currentIndex;
+            const isActive = index === currentIndex;
+
+            return (
+              <div key={step} className="flex-1 flex flex-col items-center relative">
+                {/* Connector line */}
+                {index > 0 && (
+                  <div
+                    className={`absolute top-4 right-1/2 w-full h-0.5 -translate-y-1/2 ${
+                      index <= currentIndex ? 'bg-[var(--color-accent)]' : 'bg-gray-200'
+                    }`}
+                  />
+                )}
+
+                {/* Step circle */}
+                <div
+                  className={`relative z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all ${
+                    isCompleted
+                      ? 'bg-[var(--color-accent)] text-white'
+                      : isActive
+                        ? 'bg-[var(--color-accent)] text-white ring-4 ring-[var(--color-accent)]/20'
+                        : 'bg-gray-200 text-gray-500'
+                  }`}
+                >
+                  {isCompleted ? (
+                    <svg
+                      className="w-4 h-4"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M5 13l4 4L19 7"
+                      />
+                    </svg>
+                  ) : (
+                    <span>{index + 1}</span>
+                  )}
+                </div>
+
+                {/* Step label */}
+                <span
+                  className={`mt-2 text-xs text-center ${
+                    isActive
+                      ? 'font-semibold text-[var(--color-accent)]'
+                      : isCompleted
+                        ? 'font-medium text-gray-700'
+                        : 'text-gray-400'
+                  }`}
+                >
+                  {t(step)}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/web/src/components/order/PaymentStatus.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { loadStripe } from '@stripe/stripe-js';
+import { useTranslations } from 'next-intl';
+
+const stripePromise = loadStripe(
+  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
+);
+
+type Status = 'loading' | 'succeeded' | 'processing' | 'failed';
+
+interface PaymentStatusProps {
+  clientSecret: string;
+}
+
+export function PaymentStatus({ clientSecret }: PaymentStatusProps) {
+  const t = useTranslations('confirmation');
+  const [status, setStatus] = useState<Status>('loading');
+
+  useEffect(() => {
+    stripePromise.then(async (stripe) => {
+      if (!stripe) return;
+      const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);
+      if (!paymentIntent) {
+        setStatus('failed');
+        return;
+      }
+      switch (paymentIntent.status) {
+        case 'succeeded':
+          setStatus('succeeded');
+          break;
+        case 'processing':
+          setStatus('processing');
+          break;
+        default:
+          setStatus('failed');
+      }
+    });
+  }, [clientSecret]);
+
+  if (status === 'loading') return null;
+
+  if (status === 'failed') {
+    return (
+      <div className="p-4 bg-red-50 rounded-lg border border-red-200 text-center mb-8">
+        <p className="text-red-600 font-medium">{t('paymentFailed')}</p>
+        <p className="text-red-500 text-sm mt-1">{t('paymentFailedHint')}</p>
+      </div>
+    );
+  }
+
+  if (status === 'processing') {
+    return (
+      <div className="p-4 bg-amber-50 rounded-lg border border-amber-200 text-center mb-8">
+        <p className="text-amber-600 font-medium">{t('paymentProcessing')}</p>
+      </div>
+    );
+  }
+
+  return null;
+}

package/templates/web/src/components/ui/Button.tsx

@@ -0,0 +1,40 @@
+type ButtonVariant = 'primary' | 'secondary' | 'outline';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  children: React.ReactNode;
+  href?: string;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    'bg-[var(--color-primary)] text-white hover:opacity-90',
+  secondary:
+    'bg-[var(--color-accent)] text-white hover:opacity-90',
+  outline:
+    'border-2 border-[var(--color-primary)] text-[var(--color-primary)] hover:bg-[var(--color-primary)] hover:text-white',
+};
+
+export function Button({
+  variant = 'primary',
+  children,
+  href,
+  className = '',
+  ...props
+}: ButtonProps) {
+  const classes = `inline-block px-6 py-3 rounded-md font-medium transition-all duration-200 text-center ${variantClasses[variant]} ${className}`;
+
+  if (href) {
+    return (
+      <a href={href} className={classes}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button className={classes} {...props}>
+      {children}
+    </button>
+  );
+}

package/templates/web/src/components/ui/ErrorAlert.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+interface ErrorAlertProps {
+  message: string;
+}
+
+export function ErrorAlert({ message }: ErrorAlertProps) {
+  if (!message) return null;
+
+  return (
+    <div className="p-3 bg-red-50 border border-red-200 rounded-md">
+      <p className="text-sm text-red-600">{message}</p>
+    </div>
+  );
+}

package/templates/web/src/i18n/config.ts

@@ -0,0 +1,3 @@
+export const locales = ['fr', 'en'] as const;
+export type Locale = (typeof locales)[number];
+export const defaultLocale: Locale = 'fr';

package/templates/web/src/i18n/request.ts

@@ -0,0 +1,13 @@
+import { getRequestConfig } from 'next-intl/server';
+import { routing } from './routing';
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  let locale = await requestLocale;
+  if (!locale || !routing.locales.includes(locale as any)) {
+    locale = routing.defaultLocale;
+  }
+  return {
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default,
+  };
+});

package/templates/web/src/i18n/routing.ts

@@ -0,0 +1,10 @@
+import { defineRouting } from 'next-intl/routing';
+import { createNavigation } from 'next-intl/navigation';
+
+export const routing = defineRouting({
+  locales: ['fr', 'en'],
+  defaultLocale: 'fr',
+});
+
+export const { Link, redirect, usePathname, useRouter } =
+  createNavigation(routing);

package/templates/web/src/lib/client.ts

@@ -0,0 +1,5 @@
+import { BestrawClient } from 'bestraw-sdk';
+
+export const bestraw = new BestrawClient({
+  baseUrl: process.env.API_URL || process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1338',
+});

package/templates/web/src/lib/errors.ts

@@ -0,0 +1,31 @@
+import { BestrawError } from 'bestraw-sdk';
+
+/**
+ * Extracts an error code from any caught error.
+ * Returns the structured code from BestrawError, or 'UNKNOWN'.
+ */
+export function getErrorCode(error: unknown): string {
+  if (error instanceof BestrawError && error.code) {
+    return error.code;
+  }
+  return 'UNKNOWN';
+}
+
+/**
+ * Maps a caught error to a user-facing translated message.
+ * Uses the error code to look up the i18n key under "errors.<CODE>".
+ *
+ * @param error - The caught error (BestrawError, Error, or unknown)
+ * @param t - The next-intl translation function scoped to "errors"
+ * @returns A localized, user-friendly error message
+ */
+export function getErrorMessage(
+  error: unknown,
+  t: { (key: string): string; has(key: string): boolean },
+): string {
+  const code = getErrorCode(error);
+  if (t.has(code)) {
+    return t(code);
+  }
+  return t('unknown');
+}

package/templates/web/src/lib/features.ts

@@ -0,0 +1,10 @@
+import { config } from '@/bestraw.config';
+
+export const features = config.features;
+export const hasOrdering = features.ordering;
+export const hasLoyalty = features.loyalty;
+export const hasPayments = features.payments;
+export const hasPhoneAuth = features.auth.phone;
+export const hasEmailAuth = features.auth.email;
+export const hasAuth = hasPhoneAuth || hasEmailAuth;
+export const hasBlog = features.blog;

package/templates/web/src/lib/hooks/useCustomerClient.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { useMemo } from 'react';
+import { BestrawClient } from 'bestraw-sdk';
+
+const STORAGE_KEY = 'bestraw-customer-token';
+
+export function getCustomerToken(): string | null {
+  if (typeof window === 'undefined') return null;
+  return localStorage.getItem(STORAGE_KEY);
+}
+
+export function setCustomerToken(token: string): void {
+  localStorage.setItem(STORAGE_KEY, token);
+}
+
+export function removeCustomerToken(): void {
+  localStorage.removeItem(STORAGE_KEY);
+}
+
+export function useCustomerClient(): BestrawClient {
+  return useMemo(() => {
+    return new BestrawClient({
+      baseUrl: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1338',
+      getAuthToken: () => getCustomerToken(),
+    });
+  }, []);
+}

package/templates/web/src/lib/hooks/useMenu.ts

@@ -0,0 +1,46 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import type { Variant } from 'bestraw-sdk';
+import { BestrawClient } from 'bestraw-sdk';
+
+const client = new BestrawClient({
+  baseUrl: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337',
+});
+
+interface UseMenuResult {
+  variant: Variant | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+export function useMenu(menuDocumentId: string): UseMenuResult {
+  const [variant, setVariant] = useState<Variant | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetch = () => {
+    setLoading(true);
+    setError(null);
+
+    client.menu
+      .getActiveVariant(menuDocumentId)
+      .then((data) => {
+        setVariant(data);
+      })
+      .catch((err) => {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    fetch();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menuDocumentId]);
+
+  return { variant, loading, error, refetch: fetch };
+}