bestraw 1.0.0

package/templates/web/src/components/menu/MealDetailModal.tsx

@@ -0,0 +1,355 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import type { Meal } from 'bestraw-sdk';
+import type { CartItem } from '@/providers/CartProvider';
+
+const ALLERGEN_LABELS: Record<number, string> = {
+  1: 'gluten',
+  2: 'crustaceans',
+  3: 'eggs',
+  4: 'fish',
+  5: 'peanuts',
+  6: 'soy',
+  7: 'dairy',
+  8: 'nuts',
+  9: 'celery',
+  10: 'mustard',
+  11: 'sesame',
+  12: 'sulphites',
+  13: 'lupin',
+  14: 'molluscs',
+};
+
+interface MealDetailModalProps {
+  meal: Meal;
+  apiUrl: string;
+  onClose: () => void;
+  onAddToCart?: (item: CartItem) => void;
+}
+
+function formatPrice(price: number): string {
+  return price.toFixed(2).replace('.', ',') + ' \u20AC';
+}
+
+export function MealDetailModal({ meal, apiUrl, onClose, onAddToCart }: MealDetailModalProps) {
+  const t = useTranslations('mealDetail');
+  const tOrder = useTranslations('order');
+  const [imageIndex, setImageIndex] = useState(0);
+  const [quantity, setQuantity] = useState(1);
+  const [selectedSauces, setSelectedSauces] = useState<string[]>([]);
+  const [selectedSides, setSelectedSides] = useState<string[]>([]);
+  const [specialInstructions, setSpecialInstructions] = useState('');
+
+  const pictures = meal.pictures ?? [];
+  const hasSauces = meal.sauces && meal.sauces.length > 0;
+  const hasSides = meal.sides && meal.sides.length > 0;
+  const hasFields = meal.fields && meal.fields.length > 0;
+  const hasAllergens = meal.allergens && meal.allergens.length > 0;
+
+  // Lock body scroll
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, []);
+
+  // Close on Escape
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [onClose]);
+
+  function handleAddToCart() {
+    if (!onAddToCart) return;
+    onAddToCart({
+      mealDocumentId: meal.documentId,
+      mealName: meal.name,
+      unitPrice: meal.price,
+      quantity,
+      selectedSauces,
+      selectedSides,
+      specialInstructions: specialInstructions.trim(),
+      picture: pictures[0] ? `${apiUrl}${pictures[0].url}` : undefined,
+    });
+    setQuantity(1);
+    setSelectedSauces([]);
+    setSelectedSides([]);
+    setSpecialInstructions('');
+    onClose();
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/50"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="relative bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl">
+        {/* Close button */}
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute top-3 right-3 z-10 w-8 h-8 flex items-center justify-center rounded-full bg-white/80 hover:bg-white text-gray-600 hover:text-gray-900 transition-colors shadow"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+
+        {/* Image gallery */}
+        {pictures.length > 0 && (
+          <div className="relative">
+            <div className="aspect-[16/9] overflow-hidden rounded-t-xl bg-gray-100">
+              <img
+                src={`${apiUrl}${pictures[imageIndex].url}`}
+                alt={pictures[imageIndex].alternativeText || meal.name}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            {pictures.length > 1 && (
+              <div className="flex gap-2 p-3 justify-center">
+                {pictures.map((pic, i) => (
+                  <button
+                    key={pic.id}
+                    type="button"
+                    onClick={() => setImageIndex(i)}
+                    className={`w-12 h-12 rounded-md overflow-hidden border-2 transition-colors ${
+                      i === imageIndex
+                        ? 'border-[var(--color-accent)]'
+                        : 'border-transparent hover:border-gray-300'
+                    }`}
+                  >
+                    <img
+                      src={`${apiUrl}${pic.formats?.thumbnail?.url || pic.url}`}
+                      alt=""
+                      className="w-full h-full object-cover"
+                    />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className="p-6">
+          {/* Header */}
+          <div className="flex items-start justify-between gap-4 mb-4">
+            <h2 className="text-2xl font-bold text-[var(--color-primary)]">
+              {meal.name}
+            </h2>
+            <span className="text-xl font-semibold text-[var(--color-accent)] whitespace-nowrap">
+              {formatPrice(meal.price)}
+            </span>
+          </div>
+
+          {/* Description */}
+          {meal.description && (
+            <p className="text-gray-600 mb-4">{meal.description}</p>
+          )}
+
+          {/* Fields (metadata) */}
+          {hasFields && (
+            <div className="mb-4">
+              <div className="grid grid-cols-2 gap-2">
+                {meal.fields!.map((field) => (
+                  <div
+                    key={field.name}
+                    className="text-sm bg-gray-50 rounded-md px-3 py-2"
+                  >
+                    <span className="text-gray-500">{field.name}</span>
+                    <span className="ml-2 font-medium text-gray-800">{field.value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Allergens */}
+          {hasAllergens && (
+            <div className="mb-4">
+              <h3 className="text-sm font-semibold text-gray-700 mb-2">
+                {t('allergens')}
+              </h3>
+              <div className="flex flex-wrap gap-2">
+                {meal.allergens!.map((id) => (
+                  <span
+                    key={id}
+                    className="text-xs px-2 py-1 rounded-full bg-amber-100 text-amber-800 font-medium"
+                  >
+                    {t(`allergen.${ALLERGEN_LABELS[id] || id}`)}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Sauces (info) */}
+          {hasSauces && (
+            <div className="mb-4">
+              <h3 className="text-sm font-semibold text-gray-700 mb-2">
+                {tOrder('sauces')}
+              </h3>
+              <div className="grid grid-cols-2 gap-2">
+                {meal.sauces!.map((s) => (
+                  <div
+                    key={s.name}
+                    className="text-sm bg-gray-50 rounded-md px-3 py-2"
+                  >
+                    <span className="text-gray-500">{s.name}</span>
+                    {s.description && (
+                      <span className="ml-2 font-medium text-gray-800">{s.description}</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Sides (info) */}
+          {hasSides && (
+            <div className="mb-4">
+              <h3 className="text-sm font-semibold text-gray-700 mb-2">
+                {tOrder('sides')}
+              </h3>
+              <div className="grid grid-cols-2 gap-2">
+                {meal.sides!.map((s) => (
+                  <div
+                    key={s.name}
+                    className="text-sm bg-gray-50 rounded-md px-3 py-2"
+                  >
+                    <span className="text-gray-500">{s.name}</span>
+                    {s.description && (
+                      <span className="ml-2 font-medium text-gray-800">{s.description}</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Availability */}
+          {!meal.available && (
+            <div className="mb-4 px-3 py-2 rounded-md bg-red-50 text-red-600 text-sm font-medium">
+              {t('unavailable')}
+            </div>
+          )}
+
+          {/* Ordering section */}
+          {onAddToCart && meal.available && (
+            <div className="border-t border-gray-100 pt-4 mt-4">
+              {/* Sauce/Side selection (checkboxes) */}
+              {hasSauces && (
+                <div className="mb-3">
+                  <p className="text-sm font-semibold text-gray-700 mb-2">
+                    {tOrder('sauces')}
+                  </p>
+                  <div className="space-y-1.5">
+                    {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={() =>
+                            setSelectedSauces((prev) =>
+                              prev.includes(sauce.name)
+                                ? prev.filter((s) => s !== sauce.name)
+                                : [...prev, sauce.name]
+                            )
+                          }
+                          className="rounded border-gray-300 text-[var(--color-accent)] focus:ring-[var(--color-accent)]"
+                        />
+                        {sauce.name}
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {hasSides && (
+                <div className="mb-3">
+                  <p className="text-sm font-semibold text-gray-700 mb-2">
+                    {tOrder('sides')}
+                  </p>
+                  <div className="space-y-1.5">
+                    {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={() =>
+                            setSelectedSides((prev) =>
+                              prev.includes(side.name)
+                                ? prev.filter((s) => s !== side.name)
+                                : [...prev, side.name]
+                            )
+                          }
+                          className="rounded border-gray-300 text-[var(--color-accent)] focus:ring-[var(--color-accent)]"
+                        />
+                        {side.name}
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Special instructions */}
+              <div className="mb-4">
+                <input
+                  type="text"
+                  placeholder={tOrder('specialInstructions')}
+                  value={specialInstructions}
+                  onChange={(e) => setSpecialInstructions(e.target.value)}
+                  className="w-full text-sm 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)]"
+                />
+              </div>
+
+              {/* Quantity + Add to cart */}
+              <div className="flex items-center gap-3">
+                <div className="flex items-center border border-gray-200 rounded-md">
+                  <button
+                    type="button"
+                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                    className="px-3 py-2 text-gray-500 hover:text-gray-700"
+                  >
+                    -
+                  </button>
+                  <span className="px-4 py-2 text-sm font-medium min-w-[2.5rem] text-center">
+                    {quantity}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => setQuantity(quantity + 1)}
+                    className="px-3 py-2 text-gray-500 hover:text-gray-700"
+                  >
+                    +
+                  </button>
+                </div>
+
+                <button
+                  type="button"
+                  onClick={handleAddToCart}
+                  className="flex-1 px-4 py-2.5 rounded-md bg-[var(--color-accent)] text-white font-medium hover:opacity-90 transition-opacity"
+                >
+                  {tOrder('addToCart')} — {formatPrice(meal.price * quantity)}
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/web/src/components/menu/MenuContent.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { useState, useMemo, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { BestrawClient } from 'bestraw-sdk';
+import type { Category, Meal } from 'bestraw-sdk';
+import { MealCard } from './MealCard';
+import { MealOrderCard } from '@/components/order/MealOrderCard';
+import { MealDetailModal } from './MealDetailModal';
+import { useCart } from '@/providers/CartProvider';
+import { hasOrdering } from '@/lib/features';
+import type { CartItem } from '@/providers/CartProvider';
+
+interface MenuContentProps {
+  categories: Category[];
+  apiUrl: string;
+}
+
+function normalize(str: string): string {
+  return str
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+}
+
+/**
+ * When ordering is disabled, CartProvider is not mounted.
+ * This wrapper safely extracts addItem only when CartProvider exists.
+ */
+function WithCart({ children }: { children: (addItem: (item: CartItem) => void) => React.ReactNode }) {
+  const { addItem } = useCart();
+  return <>{children(addItem)}</>;
+}
+
+export function MenuContent({ categories, apiUrl }: MenuContentProps) {
+  if (hasOrdering) {
+    return (
+      <WithCart>
+        {(addItem) => (
+          <MenuContentInner
+            categories={categories}
+            apiUrl={apiUrl}
+            addItem={addItem}
+          />
+        )}
+      </WithCart>
+    );
+  }
+  return <MenuContentInner categories={categories} apiUrl={apiUrl} />;
+}
+
+function MenuContentInner({
+  categories,
+  apiUrl,
+  addItem,
+}: MenuContentProps & { addItem?: (item: CartItem) => void }) {
+  const t = useTranslations('menu');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedMeal, setSelectedMeal] = useState<Meal | null>(null);
+  const [orderingActive, setOrderingActive] = useState(true);
+
+  const [restaurantOpen, setRestaurantOpen] = useState(true);
+  const [closureReason, setClosureReason] = useState<string | undefined>();
+
+  // Check backend ordering settings and restaurant status at runtime
+  useEffect(() => {
+    if (!hasOrdering) return;
+    const client = new BestrawClient({
+      baseUrl: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1338',
+    });
+    client.ordering.getPublicOrderSettings()
+      .then((settings) => {
+        setOrderingActive(settings.orderingEnabled);
+      })
+      .catch(() => {});
+    client.restaurant.getStatus()
+      .then((status) => {
+        setRestaurantOpen(status.isOpen);
+        if (!status.isOpen) setClosureReason(status.closureReason);
+      })
+      .catch(() => {});
+  }, []);
+
+  const canOrder = hasOrdering && orderingActive && restaurantOpen;
+
+  const filteredCategories = useMemo(() => {
+    const sorted = [...categories].sort((a, b) => a.sortOrder - b.sortOrder);
+    if (!searchQuery.trim()) return sorted;
+
+    const q = normalize(searchQuery.trim());
+    return sorted
+      .map((cat) => ({
+        ...cat,
+        meals: (cat.meals ?? []).filter(
+          (meal) =>
+            meal.show &&
+            (normalize(meal.name).includes(q) ||
+              normalize(meal.description || '').includes(q))
+        ),
+      }))
+      .filter((cat) => cat.meals && cat.meals.length > 0);
+  }, [categories, searchQuery]);
+
+  return (
+    <>
+      {/* Closed banner */}
+      {hasOrdering && !canOrder && (
+        <div className="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-lg flex items-center gap-3">
+          <svg className="w-5 h-5 text-amber-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <p className="text-amber-800 text-sm font-medium">
+            {closureReason
+              ? `${t('closedReason', { reason: closureReason })}`
+              : t('closed')}
+          </p>
+        </div>
+      )}
+
+      {/* Search bar */}
+      <div className="mb-8">
+        <div className="relative max-w-md">
+          <svg
+            className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder={t('searchPlaceholder')}
+            className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)] focus:border-transparent"
+          />
+          {searchQuery && (
+            <button
+              type="button"
+              onClick={() => setSearchQuery('')}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Categories & meals */}
+      {filteredCategories.length === 0 ? (
+        <p className="text-gray-500">
+          {searchQuery ? t('noResults') : t('empty')}
+        </p>
+      ) : (
+        filteredCategories.map((category) => {
+          const visibleMeals = (category.meals ?? [])
+            .filter((meal) => meal.show)
+            .sort((a, b) => a.sortOrder - b.sortOrder);
+
+          if (visibleMeals.length === 0) return null;
+
+          return (
+            <section key={category.documentId} className="mb-12">
+              <div className="mb-6">
+                <h2 className="text-2xl font-bold text-[var(--color-primary)]">
+                  {category.name}
+                </h2>
+                {category.description && (
+                  <p className="mt-1 text-gray-600">{category.description}</p>
+                )}
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {visibleMeals.map((meal) =>
+                  canOrder ? (
+                    <MealOrderCard
+                      key={meal.documentId}
+                      meal={meal}
+                      apiUrl={apiUrl}
+                      onShowDetail={() => setSelectedMeal(meal)}
+                    />
+                  ) : (
+                    <MealCard
+                      key={meal.documentId}
+                      meal={meal}
+                      apiUrl={apiUrl}
+                      onClick={() => setSelectedMeal(meal)}
+                    />
+                  )
+                )}
+              </div>
+            </section>
+          );
+        })
+      )}
+
+      {/* Detail modal */}
+      {selectedMeal && (
+        <MealDetailModal
+          meal={selectedMeal}
+          apiUrl={apiUrl}
+          onClose={() => setSelectedMeal(null)}
+          onAddToCart={canOrder ? addItem : undefined}
+        />
+      )}
+    </>
+  );
+}