bestraw 1.0.0

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

@@ -0,0 +1,207 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { notFound } from 'next/navigation';
+import { Link } from '@/i18n/routing';
+import { BestrawClient } from 'bestraw-sdk';
+import type { Order } from 'bestraw-sdk';
+import { OrderStatusTracker } from '@/components/order/OrderStatusTracker';
+import { hasOrdering } from '@/lib/features';
+
+const ACTIVE_STATUSES = ['pending', 'confirmed', 'preparing', 'ready'];
+
+function formatPrice(price: number): string {
+  return price.toFixed(2).replace('.', ',') + ' \u20AC';
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString(undefined, {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export default function OrderPage() {
+  if (!hasOrdering) notFound();
+
+  const t = useTranslations('order');
+  const apiUrl =
+    process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1338';
+
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem('bestraw-customer-token');
+    if (!token) {
+      setIsAuthenticated(false);
+      setLoading(false);
+      return;
+    }
+
+    setIsAuthenticated(true);
+
+    const client = new BestrawClient({ baseUrl: apiUrl, apiToken: token });
+    client.ordering
+      .getMyOrders()
+      .then((data) => setOrders(data))
+      .catch(() => setOrders([]))
+      .finally(() => setLoading(false));
+  }, [apiUrl]);
+
+  const activeOrders = orders.filter((o) => ACTIVE_STATUSES.includes(o.status));
+  const pastOrders = orders.filter((o) => !ACTIVE_STATUSES.includes(o.status));
+
+  if (!isAuthenticated && !loading) {
+    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('myOrders')}
+        </h1>
+        <div className="mt-8 text-center py-12">
+          <p className="text-gray-500 text-lg">{t('loginRequired')}</p>
+          <Link
+            href="/auth"
+            className="mt-4 inline-block px-6 py-3 rounded-md bg-[var(--color-accent)] text-white font-medium hover:opacity-90 transition-opacity"
+          >
+            {t('loginRequired')}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-10 flex items-center justify-between">
+        <h1 className="text-3xl sm:text-4xl font-bold text-[var(--color-primary)]">
+          {t('myOrders')}
+        </h1>
+        <Link
+          href="/menu"
+          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"
+        >
+          {t('orderAgain')}
+        </Link>
+      </div>
+
+      {loading ? (
+        <div className="text-center py-12">
+          <div className="inline-block w-8 h-8 border-4 border-gray-200 border-t-[var(--color-accent)] rounded-full animate-spin" />
+        </div>
+      ) : orders.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-gray-500 text-lg">{t('noOrders')}</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('orderAgain')}
+          </Link>
+        </div>
+      ) : (
+        <>
+          {/* Active orders */}
+          {activeOrders.length > 0 && (
+            <section className="mb-12">
+              <h2 className="text-xl font-semibold text-[var(--color-primary)] mb-4">
+                {t('activeOrders')}
+              </h2>
+              <div className="space-y-4">
+                {activeOrders.map((order) => (
+                  <div
+                    key={order.documentId}
+                    className="bg-white rounded-lg border border-gray-100 p-6"
+                  >
+                    <div className="flex items-start justify-between mb-4">
+                      <div>
+                        <p className="font-semibold text-[var(--color-primary)]">
+                          {order.orderNumber}
+                        </p>
+                        <p className="text-sm text-gray-500">
+                          {formatDate(order.createdAt)}
+                        </p>
+                      </div>
+                      <span className="text-sm font-medium text-[var(--color-accent)]">
+                        {formatPrice(order.total)}
+                      </span>
+                    </div>
+
+                    <div className="text-sm text-gray-600 mb-4">
+                      {order.items.map((item, i) => (
+                        <span key={i}>
+                          {i > 0 && ', '}
+                          {item.quantity}x {item.mealName}
+                        </span>
+                      ))}
+                    </div>
+
+                    <OrderStatusTracker
+                      orderId={order.documentId}
+                      initialStatus={order.status}
+                      apiUrl={apiUrl}
+                    />
+
+                    <div className="mt-4 text-right">
+                      <Link
+                        href={`/order/confirmation/${order.documentId}`}
+                        className="text-sm text-[var(--color-accent)] hover:underline"
+                      >
+                        {t('viewDetails')}
+                      </Link>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+
+          {/* Past orders */}
+          {pastOrders.length > 0 && (
+            <section>
+              <h2 className="text-xl font-semibold text-[var(--color-primary)] mb-4">
+                {t('pastOrders')}
+              </h2>
+              <div className="space-y-3">
+                {pastOrders.map((order) => (
+                  <div
+                    key={order.documentId}
+                    className="bg-white rounded-lg border border-gray-100 p-4 flex items-center justify-between"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-3">
+                        <p className="font-medium text-[var(--color-primary)]">
+                          {order.orderNumber}
+                        </p>
+                        <span
+                          className={`text-xs px-2 py-0.5 rounded-full ${
+                            order.status === 'completed'
+                              ? 'bg-green-100 text-green-700'
+                              : 'bg-red-100 text-red-600'
+                          }`}
+                        >
+                          {t(`status.${order.status}`)}
+                        </span>
+                      </div>
+                      <p className="text-sm text-gray-500 mt-0.5">
+                        {formatDate(order.createdAt)} — {order.items.length}{' '}
+                        {order.items.length > 1 ? 'articles' : 'article'}
+                      </p>
+                    </div>
+                    <span className="text-sm font-medium text-gray-700 ml-4">
+                      {formatPrice(order.total)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,119 @@
+import { getTranslations } from 'next-intl/server';
+import { bestraw } from '@/lib/client';
+import { Link } from '@/i18n/routing';
+import { hasBlog } from '@/lib/features';
+import { ArticleCard } from '@/components/blog/ArticleCard';
+import type { BlogArticle } from 'bestraw-sdk';
+
+export default async function HomePage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations('home');
+
+  let restaurantName = 'Mon Restaurant';
+  let description = t('defaultDescription');
+  let coverImageUrl: string | null = null;
+
+  const apiUrl =
+    process.env.API_URL ||
+    process.env.NEXT_PUBLIC_API_URL ||
+    'http://localhost:1338';
+
+  try {
+    const info = await bestraw.restaurant.getInfo(locale);
+    restaurantName = info.name || restaurantName;
+    description = info.description || description;
+
+    if (info.coverImage?.url) {
+      coverImageUrl = `${apiUrl}${info.coverImage.url}`;
+    }
+  } catch {
+    // API unavailable
+  }
+
+  let featuredArticles: BlogArticle[] = [];
+  if (hasBlog) {
+    try {
+      const articles = await bestraw.blog.getArticles({ locale, featured: true });
+      featuredArticles = articles.slice(0, 3);
+    } catch {
+      // API unavailable
+    }
+  }
+
+  return (
+    <>
+      {/* Hero section */}
+      <section className="relative bg-gray-900 text-white">
+        {coverImageUrl && (
+          <img
+            src={coverImageUrl}
+            alt={restaurantName}
+            className="absolute inset-0 w-full h-full object-cover opacity-50"
+          />
+        )}
+        <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32 text-center">
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
+            {restaurantName}
+          </h1>
+          <p className="mt-6 max-w-2xl mx-auto text-lg text-gray-200">
+            {description}
+          </p>
+          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Link
+              href="/menu"
+              className="inline-flex items-center justify-center px-6 py-3 rounded-lg bg-[var(--color-accent)] text-white font-medium hover:opacity-90 transition-opacity"
+            >
+              {t('viewMenu')}
+            </Link>
+            <Link
+              href="/info"
+              className="inline-flex items-center justify-center px-6 py-3 rounded-lg border border-white text-white font-medium hover:bg-white/10 transition-colors"
+            >
+              {t('ourInfo')}
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Intro section */}
+      <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
+        <h2 className="text-2xl sm:text-3xl font-bold text-[var(--color-primary)]">
+          {t('ourCuisine')}
+        </h2>
+        <p className="mt-4 text-gray-600 leading-relaxed">
+          {t('cuisineDescription')}
+        </p>
+      </section>
+
+      {/* Featured blog articles */}
+      {featuredArticles.length > 0 && (
+        <section className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-2xl sm:text-3xl font-bold text-[var(--color-primary)]">
+              {t('latestArticles')}
+            </h2>
+            <Link
+              href="/blog"
+              className="text-sm font-medium text-[var(--color-accent)] hover:opacity-80 transition-opacity"
+            >
+              {t('viewAllArticles')}
+            </Link>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {featuredArticles.map((article) => (
+              <ArticleCard
+                key={article.documentId}
+                article={article}
+                apiUrl={apiUrl}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+    </>
+  );
+}

package/templates/web/src/app/globals.css

@@ -0,0 +1,11 @@
+@import "tailwindcss";
+
+:root {
+  --color-primary: #000000;
+  --color-accent: #D4AF37;
+  --font-family: 'Inter', sans-serif;
+}
+
+body {
+  font-family: var(--font-family), sans-serif;
+}

package/templates/web/src/app/robots.ts

@@ -0,0 +1,14 @@
+import type { MetadataRoute } from 'next';
+
+const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: ['/*/order/cart', '/*/order/checkout', '/*/order/confirmation/'],
+    },
+    sitemap: `${baseUrl}/sitemap.xml`,
+  };
+}

package/templates/web/src/app/sitemap.ts

@@ -0,0 +1,56 @@
+import type { MetadataRoute } from 'next';
+import { locales, defaultLocale } from '@/i18n/config';
+import { hasOrdering, hasLoyalty, hasBlog, hasAuth } from '@/lib/features';
+import { bestraw } from '@/lib/client';
+
+const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
+
+function localizedEntry(path: string, priority: number, changeFrequency: MetadataRoute.Sitemap[number]['changeFrequency'] = 'weekly'): MetadataRoute.Sitemap[number] {
+  const languages: Record<string, string> = {};
+  for (const locale of locales) {
+    languages[locale] = `${baseUrl}/${locale}${path}`;
+  }
+
+  return {
+    url: `${baseUrl}/${defaultLocale}${path}`,
+    lastModified: new Date(),
+    changeFrequency,
+    priority,
+    alternates: { languages },
+  };
+}
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const entries: MetadataRoute.Sitemap = [
+    localizedEntry('', 1.0, 'daily'),
+    localizedEntry('/menu', 0.9, 'daily'),
+    localizedEntry('/info', 0.7, 'monthly'),
+  ];
+
+  if (hasOrdering) {
+    entries.push(localizedEntry('/order', 0.6, 'weekly'));
+  }
+
+  if (hasLoyalty) {
+    entries.push(localizedEntry('/loyalty', 0.5, 'weekly'));
+  }
+
+  if (hasAuth) {
+    entries.push(localizedEntry('/auth', 0.3, 'monthly'));
+  }
+
+  if (hasBlog) {
+    entries.push(localizedEntry('/blog', 0.8, 'daily'));
+
+    try {
+      const articles = await bestraw.blog.getArticles();
+      for (const article of articles) {
+        entries.push(localizedEntry(`/blog/${article.slug}`, 0.7, 'weekly'));
+      }
+    } catch {
+      // API unavailable — static pages only
+    }
+  }
+
+  return entries;
+}

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

@@ -0,0 +1,9 @@
+export const config = {
+  features: {
+    ordering: true,
+    loyalty: true,
+    payments: true,
+    blog: true,
+    auth: { phone: true, email: true },
+  },
+} as const;

package/templates/web/src/components/auth/OtpForm.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface OtpFormProps {
+  length?: number;
+  onComplete: (code: string) => void;
+}
+
+export function OtpForm({ length = 6, onComplete }: OtpFormProps) {
+  const [values, setValues] = useState<string[]>(Array(length).fill(''));
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  useEffect(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+
+  const handleChange = useCallback(
+    (index: number, value: string) => {
+      if (!/^\d*$/.test(value)) return;
+
+      const digit = value.slice(-1);
+      const newValues = [...values];
+      newValues[index] = digit;
+      setValues(newValues);
+
+      if (digit && index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+
+      if (digit && newValues.every((v) => v !== '')) {
+        onComplete(newValues.join(''));
+      }
+    },
+    [values, length, onComplete],
+  );
+
+  const handleKeyDown = useCallback(
+    (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Backspace' && !values[index] && index > 0) {
+        const newValues = [...values];
+        newValues[index - 1] = '';
+        setValues(newValues);
+        inputRefs.current[index - 1]?.focus();
+      }
+    },
+    [values],
+  );
+
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent<HTMLInputElement>) => {
+      e.preventDefault();
+      const pasted = e.clipboardData
+        .getData('text')
+        .replace(/\D/g, '')
+        .slice(0, length);
+
+      if (pasted.length === 0) return;
+
+      const newValues = [...values];
+      for (let i = 0; i < pasted.length; i++) {
+        newValues[i] = pasted[i];
+      }
+      setValues(newValues);
+
+      if (pasted.length === length) {
+        onComplete(newValues.join(''));
+      } else {
+        inputRefs.current[pasted.length]?.focus();
+      }
+    },
+    [values, length, onComplete],
+  );
+
+  return (
+    <div className="flex gap-3 justify-center">
+      {values.map((value, index) => (
+        <input
+          key={index}
+          ref={(el) => {
+            inputRefs.current[index] = el;
+          }}
+          type="text"
+          inputMode="numeric"
+          autoComplete="one-time-code"
+          maxLength={1}
+          value={value}
+          onChange={(e) => handleChange(index, e.target.value)}
+          onKeyDown={(e) => handleKeyDown(index, e)}
+          onPaste={handlePaste}
+          className="w-12 h-14 text-center text-xl font-semibold border-2 border-gray-300 rounded-lg
+            focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)]/20
+            transition-colors"
+        />
+      ))}
+    </div>
+  );
+}

package/templates/web/src/components/blog/ArticleCard.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/routing';
+import type { BlogArticle } from 'bestraw-sdk';
+
+interface ArticleCardProps {
+  article: BlogArticle;
+  apiUrl: string;
+}
+
+export function ArticleCard({ article, apiUrl }: ArticleCardProps) {
+  const t = useTranslations('blog');
+  const date = article.publishDate
+    ? new Date(article.publishDate).toLocaleDateString()
+    : '';
+
+  return (
+    <Link
+      href={`/blog/${article.slug}`}
+      className="group block bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
+    >
+      {article.coverImage && (
+        <div className="relative aspect-video overflow-hidden">
+          <img
+            src={`${apiUrl}${article.coverImage.url}`}
+            alt={article.coverImage.alternativeText || article.title}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+          {article.featured && (
+            <span className="absolute top-3 left-3 px-2 py-1 bg-[var(--color-accent)] text-white text-xs font-bold rounded-full">
+              {t('featured')}
+            </span>
+          )}
+        </div>
+      )}
+      <div className="p-5">
+        <div className="flex items-center gap-2">
+          {article.category && (
+            <span className="text-xs font-medium text-[var(--color-accent)] uppercase tracking-wide">
+              {article.category.name}
+            </span>
+          )}
+          {!article.coverImage && article.featured && (
+            <span className="px-2 py-0.5 bg-[var(--color-accent)] text-white text-xs font-bold rounded-full">
+              {t('featured')}
+            </span>
+          )}
+        </div>
+        <h3 className="mt-1 text-lg font-semibold text-gray-900 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
+          {article.title}
+        </h3>
+        {article.excerpt && (
+          <p className="mt-2 text-sm text-gray-600 line-clamp-3">
+            {article.excerpt}
+          </p>
+        )}
+        <div className="mt-3 flex items-center gap-3 text-xs text-gray-500">
+          {date && <span>{date}</span>}
+          {article.readingTime && (
+            <span>{t('readingTime', { minutes: article.readingTime })}</span>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}

package/templates/web/src/components/blog/ArticleContent.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+interface ArticleContentProps {
+  content: string;
+}
+
+export function ArticleContent({ content }: ArticleContentProps) {
+  return (
+    <div
+      className="prose prose-lg max-w-none prose-headings:text-gray-900 prose-a:text-[var(--color-primary)] prose-img:rounded-lg"
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  );
+}