bestraw 1.0.0

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

@@ -0,0 +1,186 @@
+import { getTranslations } from 'next-intl/server';
+import { bestraw } from '@/lib/client';
+import type { RestaurantInfo, OpeningHours } from 'bestraw-sdk';
+
+export default async function InfoPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations('info');
+
+  let info: RestaurantInfo | null = null;
+  let hours: OpeningHours | null = null;
+
+  try {
+    [info, hours] = await Promise.all([
+      bestraw.restaurant.getInfo(locale),
+      bestraw.restaurant.getHours(),
+    ]);
+  } catch {
+    // API unavailable
+  }
+
+  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>
+
+      {!info ? (
+        <p className="text-gray-500">{t('unavailable')}</p>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+          {/* Contact */}
+          <section>
+            <h2 className="text-xl font-semibold text-[var(--color-primary)] mb-4">
+              {t('contact')}
+            </h2>
+            <div className="space-y-3 text-gray-700">
+              {info.address && (
+                <p>
+                  {info.address.street}
+                  <br />
+                  {info.address.postalCode} {info.address.city}
+                  {info.address.country && `, ${info.address.country}`}
+                </p>
+              )}
+              {info.phone && (
+                <p>
+                  <a
+                    href={`tel:${info.phone}`}
+                    className="hover:text-[var(--color-primary)] transition-colors"
+                  >
+                    {info.phone}
+                  </a>
+                </p>
+              )}
+              {info.email && (
+                <p>
+                  <a
+                    href={`mailto:${info.email}`}
+                    className="hover:text-[var(--color-primary)] transition-colors"
+                  >
+                    {info.email}
+                  </a>
+                </p>
+              )}
+              {info.website && (
+                <p>
+                  <a
+                    href={info.website}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="hover:text-[var(--color-primary)] transition-colors"
+                  >
+                    {info.website}
+                  </a>
+                </p>
+              )}
+            </div>
+
+            {info.socialLinks && info.socialLinks.length > 0 && (
+              <div className="mt-6">
+                <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+                  {t('findUs')}
+                </h3>
+                <div className="flex gap-4">
+                  {info.socialLinks.map((link) => (
+                    <a
+                      key={link.platform}
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm text-[var(--color-accent)] hover:underline capitalize"
+                    >
+                      {link.platform}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            )}
+          </section>
+
+          {/* Opening hours */}
+          <section>
+            <h2 className="text-xl font-semibold text-[var(--color-primary)] mb-4">
+              {t('openingHours')}
+            </h2>
+
+            {hours?.slots && hours.slots.length > 0 ? (() => {
+              const sorted = [...hours.slots].sort((a, b) => a.dayOfWeek - b.dayOfWeek);
+              const grouped: Record<number, typeof sorted> = {};
+              for (const slot of sorted) {
+                (grouped[slot.dayOfWeek] ??= []).push(slot);
+              }
+              return (
+                <div className="space-y-3">
+                  {Object.entries(grouped).map(([day, slots]) => (
+                    <div key={day} className="border-b border-gray-100 pb-3">
+                      <p className="font-medium text-gray-700 mb-1">
+                        {t(`days.${day}`)}
+                      </p>
+                      <div className="space-y-0.5 pl-3">
+                        {slots.map((slot, i) => (
+                          <div key={i} className="flex justify-between text-gray-600">
+                            <span className="text-xs text-gray-400">
+                              {slot.label
+                                ? typeof slot.label === 'object'
+                                  ? (slot.label as Record<string, string>)[locale] ?? Object.values(slot.label)[0]
+                                  : slot.label
+                                : ''}
+                            </span>
+                            <span>{slot.openTime.slice(0, 5)} – {slot.closeTime.slice(0, 5)}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              );
+            })() : (
+              <p className="text-gray-500">{t('hoursUnavailable')}</p>
+            )}
+
+            {/* Special closures */}
+            {hours?.specialClosures && hours.specialClosures.length > 0 && (() => {
+              const today = new Date().toISOString().slice(0, 10);
+              const upcoming = hours.specialClosures
+                .filter((c) => c.date >= today)
+                .sort((a, b) => a.date.localeCompare(b.date));
+
+              if (upcoming.length === 0) return null;
+              return (
+                <div className="mt-6">
+                  <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+                    {t('specialClosures')}
+                  </h3>
+                  <div className="space-y-2">
+                    {upcoming.map((closure) => {
+                      const reason = closure.reason
+                        ? typeof closure.reason === 'object'
+                          ? (closure.reason as Record<string, string>)[locale] ?? Object.values(closure.reason)[0]
+                          : closure.reason
+                        : null;
+                      const dateStr = new Date(closure.date + 'T00:00:00').toLocaleDateString(locale, {
+                        weekday: 'long', day: 'numeric', month: 'long',
+                      });
+                      return (
+                        <div key={closure.date} className="flex items-center gap-2 text-sm">
+                          <span className="inline-block w-2 h-2 rounded-full bg-red-400 shrink-0" />
+                          <span className="text-gray-700 capitalize">{dateStr}</span>
+                          {reason && <span className="text-gray-400">— {reason}</span>}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })()}
+          </section>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/web/src/app/[locale]/layout.tsx

@@ -0,0 +1,86 @@
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages, getTranslations } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { routing } from '@/i18n/routing';
+import { bestraw } from '@/lib/client';
+import { Header } from '@/components/layout/Header';
+import { Footer } from '@/components/layout/Footer';
+import { CartProvider } from '@/providers/CartProvider';
+import { CartDrawer } from '@/components/cart/CartDrawer';
+import { hasOrdering } from '@/lib/features';
+import '../globals.css';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'metadata' });
+  return { title: t('title'), description: t('description') };
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  if (!routing.locales.includes(locale as any)) {
+    notFound();
+  }
+
+  const messages = await getMessages();
+
+  let restaurantName = 'Mon Restaurant';
+  let socialLinks: { platform: string; url: string }[] = [];
+  let themeStyle: Record<string, string> = {};
+
+  try {
+    const [info, theme] = await Promise.all([
+      bestraw.restaurant.getInfo(locale),
+      bestraw.restaurant.getTheme(),
+    ]);
+
+    restaurantName = info.name || restaurantName;
+    socialLinks = info.socialLinks ?? [];
+
+    themeStyle = {
+      '--color-primary': theme.primaryColor || '#000000',
+      '--color-accent': theme.accentColor || '#D4AF37',
+      '--font-family': theme.fontFamily || 'Inter, sans-serif',
+    };
+  } catch {
+    // API unavailable
+  }
+
+  return (
+    <html lang={locale} style={themeStyle as React.CSSProperties}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
+      <body className="min-h-screen flex flex-col bg-white text-gray-900">
+        <NextIntlClientProvider messages={messages}>
+          {hasOrdering ? (
+            <CartProvider>
+              <Header restaurantName={restaurantName} />
+              <CartDrawer />
+              <main className="flex-1">{children}</main>
+              <Footer restaurantName={restaurantName} socialLinks={socialLinks} />
+            </CartProvider>
+          ) : (
+            <>
+              <Header restaurantName={restaurantName} />
+              <main className="flex-1">{children}</main>
+              <Footer restaurantName={restaurantName} socialLinks={socialLinks} />
+            </>
+          )}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,135 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { notFound } from 'next/navigation';
+import { useRouter } from '@/i18n/routing';
+import { useCustomerClient } from '@/lib/hooks/useCustomerClient';
+import { hasLoyalty } from '@/lib/features';
+import { PointsBalance } from '@/components/loyalty/PointsBalance';
+import { RewardCard } from '@/components/loyalty/RewardCard';
+import { TransactionHistory } from '@/components/loyalty/TransactionHistory';
+
+interface LoyaltyAccount {
+  points: number;
+  tier: string;
+  totalPointsEarned: number;
+  totalPointsRedeemed: number;
+}
+
+interface Reward {
+  name: string;
+  description: string;
+  pointsCost: number;
+  type: string;
+  value: number;
+  active: boolean;
+}
+
+interface Transaction {
+  type: string;
+  points: number;
+  description: string;
+  createdAt: string;
+}
+
+export default function LoyaltyPage() {
+  if (!hasLoyalty) notFound();
+  const t = useTranslations('loyalty');
+  const router = useRouter();
+  const bestraw = useCustomerClient();
+
+  const [account, setAccount] = useState<LoyaltyAccount | null>(null);
+  const [rewards, setRewards] = useState<Reward[]>([]);
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem('bestraw-customer-token');
+    if (!token) {
+      router.push('/auth?redirect=/loyalty' as '/auth');
+      return;
+    }
+
+    async function fetchData() {
+      try {
+        const [accountData, transactionsData, programData] = await Promise.all([
+          bestraw.loyalty.getMyAccount(),
+          bestraw.loyalty.getMyTransactions(),
+          bestraw.loyalty.getProgram(),
+        ]);
+
+        setAccount(accountData as unknown as LoyaltyAccount);
+        setTransactions(
+          (transactionsData as unknown as Transaction[]) || [],
+        );
+
+        const program = programData as unknown as { rewards?: Reward[] };
+        setRewards(program.rewards || []);
+      } catch {
+        // If auth fails, redirect to login
+        localStorage.removeItem('bestraw-customer-token');
+        router.push('/auth?redirect=/loyalty' as '/auth');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [router]);
+
+  // Rewards are now redeemed at checkout, not standalone
+
+  if (loading) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="animate-pulse space-y-6">
+          <div className="h-8 w-48 bg-gray-200 rounded" />
+          <div className="h-48 bg-gray-200 rounded-2xl" />
+          <div className="h-32 bg-gray-200 rounded-2xl" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!account) return null;
+
+  const activeRewards = rewards.filter((r) => r.active);
+
+  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-8">
+        {t('title')}
+      </h1>
+
+      <div className="space-y-8">
+        <PointsBalance
+          points={account.points}
+          tier={account.tier}
+          totalEarned={account.totalPointsEarned}
+          totalRedeemed={account.totalPointsRedeemed}
+        />
+
+        {activeRewards.length > 0 && (
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">
+              {t('rewards')}
+            </h2>
+            <div className="grid gap-4 sm:grid-cols-2">
+              {activeRewards.map((reward, index) => (
+                <RewardCard
+                  key={index}
+                  reward={reward}
+                  currentPoints={account.points}
+                  checkoutMode
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        <TransactionHistory transactions={transactions} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,69 @@
+import { getTranslations } from 'next-intl/server';
+import { bestraw } from '@/lib/client';
+import { MenuContent } from '@/components/menu/MenuContent';
+import { hasOrdering } from '@/lib/features';
+
+export default async function MenuPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations('menu');
+  const apiUrl =
+    process.env.API_URL ||
+    process.env.NEXT_PUBLIC_API_URL ||
+    'http://localhost:1338';
+
+  let categories: Awaited<
+    ReturnType<typeof bestraw.menu.getActiveVariant>
+  >['categories'] = [];
+  let variantName = '';
+
+  try {
+    const menus = await bestraw.menu.getMenus(locale);
+
+    if (menus.length > 0) {
+      const menu = menus[0];
+      const variant = await bestraw.menu.getActiveVariant(
+        menu.documentId,
+        locale
+      );
+      variantName = variant.name;
+      categories = variant.categories ?? [];
+    }
+  } catch {
+    // API unavailable
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-10 flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl sm:text-4xl font-bold text-[var(--color-primary)]">
+            {t('title')}
+          </h1>
+          {variantName && (
+            <p className="mt-2 text-gray-600">{variantName}</p>
+          )}
+        </div>
+        {hasOrdering && (
+          <a
+            href={`/${locale}/order/cart`}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-[var(--color-accent)] text-white font-medium hover:opacity-90 transition-opacity"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
+            {t('viewCart')}
+          </a>
+        )}
+      </div>
+
+      <MenuContent
+        categories={categories ?? []}
+        apiUrl={apiUrl}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,199 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { notFound } from 'next/navigation';
+import { useCart } from '@/providers/CartProvider';
+import { Link } from '@/i18n/routing';
+import { useEffect, useState } from 'react';
+import { BestrawClient } from 'bestraw-sdk';
+import { hasOrdering } from '@/lib/features';
+
+function formatPrice(price: number): string {
+  return price.toFixed(2).replace('.', ',') + ' \u20AC';
+}
+
+export default function CartPage() {
+  if (!hasOrdering) notFound();
+  const t = useTranslations('cart');
+  const { items, removeItem, updateQuantity, clearCart, total, itemCount } = useCart();
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [orderingDisabled, setOrderingDisabled] = useState(false);
+
+  useEffect(() => {
+    const token = localStorage.getItem('bestraw-customer-token');
+    setIsAuthenticated(!!token);
+
+    const client = new BestrawClient({
+      baseUrl: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1338',
+    });
+    client.ordering.getPublicOrderSettings()
+      .then((settings) => {
+        if (!settings.orderingEnabled || (!settings.takeawayEnabled && !settings.dineInEnabled)) {
+          setOrderingDisabled(true);
+        }
+      })
+      .catch(() => {});
+    client.restaurant.getStatus()
+      .then((status) => {
+        if (!status.isOpen) setOrderingDisabled(true);
+      })
+      .catch(() => {});
+  }, []);
+
+  if (itemCount === 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>
+        <div className="mt-8 text-center py-12">
+          <p className="text-gray-500 text-lg">{t('empty')}</p>
+          <Link
+            href="/menu"
+            className="mt-4 inline-block px-6 py-3 rounded-md bg-[var(--color-primary)] text-white font-medium hover:opacity-90 transition-opacity"
+          >
+            {t('continueShopping')}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="flex items-center justify-between mb-10">
+        <h1 className="text-3xl sm:text-4xl font-bold text-[var(--color-primary)]">
+          {t('title')}
+        </h1>
+        <button
+          type="button"
+          onClick={clearCart}
+          className="text-sm text-gray-500 hover:text-red-500 transition-colors"
+        >
+          {t('clearCart')}
+        </button>
+      </div>
+
+      <div className="space-y-4">
+        {items.map((item, index) => (
+          <div
+            key={`${item.mealDocumentId}-${index}`}
+            className="bg-white rounded-lg border border-gray-100 p-4 flex items-start gap-4"
+          >
+            {item.picture && (
+              <div className="w-20 h-20 rounded-lg overflow-hidden bg-gray-100 shrink-0">
+                <img
+                  src={item.picture}
+                  alt={item.mealName}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            )}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-start justify-between gap-2">
+                <h3 className="font-semibold text-[var(--color-primary)]">
+                  {item.mealName}
+                </h3>
+                <span className="text-sm font-medium text-[var(--color-accent)] whitespace-nowrap">
+                  {formatPrice(item.unitPrice * item.quantity)}
+                </span>
+              </div>
+
+              <p className="mt-0.5 text-xs text-gray-500">
+                {formatPrice(item.unitPrice)} x {item.quantity}
+              </p>
+
+              {item.selectedSauces && item.selectedSauces.length > 0 && (
+                <p className="mt-1 text-xs text-gray-500">
+                  {t('sauces')}: {item.selectedSauces.join(', ')}
+                </p>
+              )}
+
+              {item.selectedSides && item.selectedSides.length > 0 && (
+                <p className="mt-0.5 text-xs text-gray-500">
+                  {t('sides')}: {item.selectedSides.join(', ')}
+                </p>
+              )}
+
+              {item.specialInstructions && (
+                <p className="mt-0.5 text-xs text-gray-400 italic">
+                  {item.specialInstructions}
+                </p>
+              )}
+
+              <div className="mt-3 flex items-center gap-3">
+                <div className="flex items-center border border-gray-200 rounded-md">
+                  <button
+                    type="button"
+                    onClick={() =>
+                      updateQuantity(index, Math.max(1, item.quantity - 1))
+                    }
+                    className="px-2 py-1 text-gray-500 hover:text-gray-700"
+                  >
+                    -
+                  </button>
+                  <span className="px-3 py-1 text-sm font-medium min-w-[2rem] text-center">
+                    {item.quantity}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => updateQuantity(index, item.quantity + 1)}
+                    className="px-2 py-1 text-gray-500 hover:text-gray-700"
+                  >
+                    +
+                  </button>
+                </div>
+
+                <button
+                  type="button"
+                  onClick={() => removeItem(index)}
+                  className="text-sm text-red-400 hover:text-red-600 transition-colors"
+                >
+                  {t('remove')}
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Totals */}
+      <div className="mt-8 border-t border-gray-200 pt-6">
+        <div className="flex items-center justify-between text-lg font-semibold">
+          <span className="text-[var(--color-primary)]">{t('total')}</span>
+          <span className="text-[var(--color-accent)]">{formatPrice(total)}</span>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="mt-8 flex flex-col sm:flex-row gap-3">
+        <Link
+          href="/menu"
+          className="flex-1 inline-block px-6 py-3 rounded-md border-2 border-[var(--color-primary)] text-[var(--color-primary)] font-medium text-center hover:bg-[var(--color-primary)] hover:text-white transition-all"
+        >
+          {t('continueShopping')}
+        </Link>
+
+        {orderingDisabled ? (
+          <div className="flex-1 px-6 py-3 rounded-md bg-amber-50 border border-amber-200 text-amber-800 text-sm font-medium text-center">
+            {t('orderingDisabled')}
+          </div>
+        ) : isAuthenticated ? (
+          <Link
+            href="/order/checkout"
+            className="flex-1 inline-block px-6 py-3 rounded-md bg-[var(--color-accent)] text-white font-medium text-center hover:opacity-90 transition-opacity"
+          >
+            {t('checkout')}
+          </Link>
+        ) : (
+          <Link
+            href="/auth"
+            className="flex-1 inline-block px-6 py-3 rounded-md bg-[var(--color-accent)] text-white font-medium text-center hover:opacity-90 transition-opacity"
+          >
+            {t('loginToOrder')}
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}