bestraw 1.0.0

package/templates/web/src/components/cart/CartDrawer.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { useCart } from '@/providers/CartProvider';
+import { CartItem } from './CartItem';
+import { Button } from '@/components/ui/Button';
+
+function formatPrice(price: number): string {
+  return price.toFixed(2).replace('.', ',') + ' \u20AC';
+}
+
+export function CartDrawer() {
+  const t = useTranslations('order');
+  const {
+    items,
+    removeItem,
+    updateQuantity,
+    total,
+    isOpen,
+    closeCart,
+  } = useCart();
+
+  // Lock body scroll when drawer is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  // Close on Escape
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') closeCart();
+    }
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [isOpen, closeCart]);
+
+  return (
+    <>
+      {/* Overlay */}
+      <div
+        className={`fixed inset-0 z-40 bg-black/40 transition-opacity duration-300 ${
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={closeCart}
+        aria-hidden="true"
+      />
+
+      {/* Drawer */}
+      <aside
+        className={`fixed top-0 right-0 z-50 h-full w-full max-w-md bg-white shadow-xl flex flex-col transition-transform duration-300 ease-in-out ${
+          isOpen ? 'translate-x-0' : 'translate-x-full'
+        }`}
+        role="dialog"
+        aria-modal="true"
+        aria-label={t('cart')}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-4 border-b border-gray-100">
+          <h2 className="text-lg font-bold text-[var(--color-primary)]">
+            {t('cart')}
+          </h2>
+          <button
+            type="button"
+            onClick={closeCart}
+            className="p-2 text-gray-500 hover:text-gray-800 transition-colors rounded-md hover:bg-gray-50"
+            aria-label={t('close')}
+          >
+            <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>
+        </div>
+
+        {/* Items */}
+        <div className="flex-1 overflow-y-auto px-4">
+          {items.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-gray-400">
+              <svg
+                className="w-12 h-12 mb-3"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"
+                />
+              </svg>
+              <p className="text-sm">{t('emptyCart')}</p>
+            </div>
+          ) : (
+            <div className="py-2">
+              {items.map((item, index) => (
+                <CartItem
+                  key={`${item.mealDocumentId}-${index}`}
+                  item={item}
+                  index={index}
+                  onUpdateQuantity={updateQuantity}
+                  onRemove={removeItem}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        {items.length > 0 && (
+          <div className="border-t border-gray-100 px-4 py-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-gray-700">
+                {t('subtotal')}
+              </span>
+              <span className="text-lg font-bold text-[var(--color-primary)]">
+                {formatPrice(total)}
+              </span>
+            </div>
+            <Button
+              variant="primary"
+              href="/order/cart"
+              className="w-full"
+              onClick={closeCart}
+            >
+              {t('checkout')}
+            </Button>
+          </div>
+        )}
+      </aside>
+    </>
+  );
+}

package/templates/web/src/components/cart/CartItem.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import type { CartItem as CartItemType } from '@/providers/CartProvider';
+
+interface CartItemProps {
+  item: CartItemType;
+  index: number;
+  onUpdateQuantity: (index: number, quantity: number) => void;
+  onRemove: (index: number) => void;
+}
+
+function formatPrice(price: number): string {
+  return price.toFixed(2).replace('.', ',') + ' \u20AC';
+}
+
+export function CartItem({
+  item,
+  index,
+  onUpdateQuantity,
+  onRemove,
+}: CartItemProps) {
+  const lineTotal = item.unitPrice * item.quantity;
+
+  return (
+    <div className="flex gap-3 py-3 border-b border-gray-100 last:border-b-0">
+      {/* Thumbnail */}
+      {item.picture && (
+        <div className="w-14 h-14 rounded-md overflow-hidden bg-gray-100 shrink-0">
+          <img
+            src={item.picture}
+            alt={item.mealName}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      )}
+
+      {/* Details */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-start justify-between gap-2">
+          <h4 className="text-sm font-semibold text-gray-900 truncate">
+            {item.mealName}
+          </h4>
+          <button
+            type="button"
+            onClick={() => onRemove(index)}
+            className="shrink-0 p-1 text-gray-400 hover:text-red-500 transition-colors"
+            aria-label="Remove"
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <p className="text-xs text-gray-500 mt-0.5">
+          {formatPrice(item.unitPrice)}
+        </p>
+
+        {/* Selected sauces */}
+        {item.selectedSauces.length > 0 && (
+          <p className="text-xs text-gray-400 mt-0.5 truncate">
+            {item.selectedSauces.join(', ')}
+          </p>
+        )}
+
+        {/* Selected sides */}
+        {item.selectedSides.length > 0 && (
+          <p className="text-xs text-gray-400 truncate">
+            {item.selectedSides.join(', ')}
+          </p>
+        )}
+
+        {/* Quantity controls and line total */}
+        <div className="flex items-center justify-between mt-2">
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => onUpdateQuantity(index, item.quantity - 1)}
+              className="w-7 h-7 flex items-center justify-center rounded-md border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium"
+            >
+              -
+            </button>
+            <span className="text-sm font-medium text-gray-900 w-5 text-center">
+              {item.quantity}
+            </span>
+            <button
+              type="button"
+              onClick={() => onUpdateQuantity(index, item.quantity + 1)}
+              className="w-7 h-7 flex items-center justify-center rounded-md border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium"
+            >
+              +
+            </button>
+          </div>
+          <span className="text-sm font-semibold text-[var(--color-accent)]">
+            {formatPrice(lineTotal)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/web/src/components/checkout/StripePaymentForm.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
+import { useTranslations } from 'next-intl';
+import { ErrorAlert } from '@/components/ui/ErrorAlert';
+
+interface StripePaymentFormProps {
+  returnUrl: string;
+}
+
+export function StripePaymentForm({ returnUrl }: StripePaymentFormProps) {
+  const t = useTranslations('checkout');
+  const stripe = useStripe();
+  const elements = useElements();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!stripe || !elements) return;
+
+    setLoading(true);
+    setError('');
+
+    const { error: stripeError } = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: returnUrl,
+      },
+    });
+
+    if (stripeError) {
+      setError(stripeError.message || t('paymentError'));
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <PaymentElement />
+
+      {error && <ErrorAlert message={error} />}
+
+      <button
+        type="submit"
+        disabled={!stripe || 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('payNow')}
+      </button>
+    </form>
+  );
+}

package/templates/web/src/components/layout/Footer.tsx

@@ -0,0 +1,40 @@
+import { getTranslations } from 'next-intl/server';
+import type { SocialLink } from 'bestraw-sdk';
+
+interface FooterProps {
+  restaurantName: string;
+  socialLinks?: SocialLink[];
+}
+
+export async function Footer({ restaurantName, socialLinks }: FooterProps) {
+  const t = await getTranslations('footer');
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="bg-gray-50 border-t border-gray-100">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="text-sm text-gray-500">
+            {year} {restaurantName}. {t('rights')}
+          </p>
+
+          {socialLinks && socialLinks.length > 0 && (
+            <div className="flex items-center gap-4">
+              {socialLinks.map((link) => (
+                <a
+                  key={link.platform}
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-gray-500 hover:text-[var(--color-primary)] transition-colors capitalize"
+                >
+                  {link.platform}
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/web/src/components/layout/Header.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { Link, useRouter } from '@/i18n/routing';
+import { LocaleSwitcher } from './LocaleSwitcher';
+import { useCart } from '@/providers/CartProvider';
+import { hasOrdering, hasLoyalty, hasBlog, hasAuth } from '@/lib/features';
+import { getCustomerToken, removeCustomerToken } from '@/lib/hooks/useCustomerClient';
+
+interface HeaderProps {
+  restaurantName: string;
+}
+
+function CartButton({ onClick }: { onClick: () => void }) {
+  const { itemCount } = useCart();
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="relative p-2 text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+      aria-label="Cart"
+    >
+      <svg
+        className="w-5 h-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" />
+        <line x1="3" y1="6" x2="21" y2="6" />
+        <path d="M16 10a4 4 0 01-8 0" />
+      </svg>
+      {itemCount > 0 && (
+        <span className="absolute -top-1 -right-1 w-5 h-5 bg-[var(--color-accent)] text-white text-xs font-bold rounded-full flex items-center justify-center">
+          {itemCount}
+        </span>
+      )}
+    </button>
+  );
+}
+
+export function Header({ restaurantName }: HeaderProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(() => !!getCustomerToken());
+  const t = useTranslations('nav');
+  const router = useRouter();
+  const { openCart } = useCart();
+
+  function handleLogout() {
+    removeCustomerToken();
+    setIsLoggedIn(false);
+    setMenuOpen(false);
+    router.push('/');
+  }
+
+  return (
+    <header className="sticky top-0 z-50 bg-white border-b border-gray-100">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <Link
+            href="/"
+            className="text-xl font-bold text-[var(--color-primary)] tracking-tight"
+          >
+            {restaurantName}
+          </Link>
+
+          {/* Desktop nav */}
+          <nav className="hidden md:flex items-center gap-8">
+            <Link
+              href="/menu"
+              className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+            >
+              {t('menu')}
+            </Link>
+            {hasOrdering && (
+              <Link
+                href="/order"
+                className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+              >
+                {t('order')}
+              </Link>
+            )}
+            {hasLoyalty && (
+              <Link
+                href="/loyalty"
+                className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+              >
+                {t('loyalty')}
+              </Link>
+            )}
+            {hasBlog && (
+              <Link
+                href="/blog"
+                className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+              >
+                {t('blog')}
+              </Link>
+            )}
+            <Link
+              href="/info"
+              className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+            >
+              {t('info')}
+            </Link>
+
+            {hasOrdering && <CartButton onClick={openCart} />}
+
+            <LocaleSwitcher />
+
+            {hasAuth && (
+              isLoggedIn ? (
+                <button
+                  type="button"
+                  onClick={handleLogout}
+                  className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+                >
+                  {t('logout')}
+                </button>
+              ) : (
+                <Link
+                  href="/auth"
+                  className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+                >
+                  {t('login')}
+                </Link>
+              )
+            )}
+          </nav>
+
+          {/* Mobile: cart + menu button */}
+          <div className="md:hidden flex items-center gap-2">
+            {hasOrdering && <CartButton onClick={openCart} />}
+
+            <button
+              type="button"
+              className="p-2 text-gray-700"
+              onClick={() => setMenuOpen(!menuOpen)}
+              aria-label="Menu"
+            >
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                {menuOpen ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                ) : (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
+                )}
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile nav */}
+        {menuOpen && (
+          <nav className="md:hidden pb-4 flex flex-col gap-3">
+            <Link
+              href="/menu"
+              className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+              onClick={() => setMenuOpen(false)}
+            >
+              {t('menu')}
+            </Link>
+            {hasOrdering && (
+              <Link
+                href="/order"
+                className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+                onClick={() => setMenuOpen(false)}
+              >
+                {t('order')}
+              </Link>
+            )}
+            {hasLoyalty && (
+              <Link
+                href="/loyalty"
+                className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+                onClick={() => setMenuOpen(false)}
+              >
+                {t('loyalty')}
+              </Link>
+            )}
+            {hasBlog && (
+              <Link
+                href="/blog"
+                className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+                onClick={() => setMenuOpen(false)}
+              >
+                {t('blog')}
+              </Link>
+            )}
+            <Link
+              href="/info"
+              className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+              onClick={() => setMenuOpen(false)}
+            >
+              {t('info')}
+            </Link>
+            <LocaleSwitcher />
+
+            {hasAuth && (
+              isLoggedIn ? (
+                <button
+                  type="button"
+                  onClick={handleLogout}
+                  className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+                >
+                  {t('logout')}
+                </button>
+              ) : (
+                <Link
+                  href="/auth"
+                  className="text-sm font-medium text-gray-700 hover:text-[var(--color-primary)] transition-colors"
+                  onClick={() => setMenuOpen(false)}
+                >
+                  {t('login')}
+                </Link>
+              )
+            )}
+          </nav>
+        )}
+      </div>
+    </header>
+  );
+}

package/templates/web/src/components/layout/LocaleSwitcher.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useLocale } from 'next-intl';
+import { usePathname, useRouter } from '@/i18n/routing';
+import { routing } from '@/i18n/routing';
+
+export function LocaleSwitcher() {
+  const locale = useLocale();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  function onChange(nextLocale: string) {
+    router.replace(pathname, { locale: nextLocale });
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      {routing.locales.map((l) => (
+        <button
+          key={l}
+          onClick={() => onChange(l)}
+          disabled={l === locale}
+          className={`px-2 py-1 text-xs font-medium rounded transition-colors ${
+            l === locale
+              ? 'bg-[var(--color-primary)] text-white'
+              : 'text-gray-500 hover:text-[var(--color-primary)]'
+          }`}
+        >
+          {l.toUpperCase()}
+        </button>
+      ))}
+    </div>
+  );
+}