bestraw 1.0.0

package/templates/web/node_modules/.bin/tsserver

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/bestraw/bestraw/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/bestraw/bestraw/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/bestraw/bestraw/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/bestraw/bestraw/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/bestraw/bestraw/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/bestraw/bestraw/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/bestraw/bestraw/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/bestraw/bestraw/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi

package/templates/web/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bestraw-web",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3000",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@stripe/react-stripe-js": "^3.1.0",
+    "@stripe/stripe-js": "^5.5.0",
+    "bestraw-sdk": "workspace:*",
+    "next": "^15.0.0",
+    "next-intl": "^4.8.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/templates/web/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

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

@@ -0,0 +1,222 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { notFound } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
+import { useRouter } from '@/i18n/routing';
+import { useCustomerClient, setCustomerToken } from '@/lib/hooks/useCustomerClient';
+import { OtpForm } from '@/components/auth/OtpForm';
+import { ErrorAlert } from '@/components/ui/ErrorAlert';
+import { getErrorMessage } from '@/lib/errors';
+import { hasAuth, hasPhoneAuth, hasEmailAuth } from '@/lib/features';
+
+type Step = 'identifier' | 'otp';
+type AuthMethod = 'phone' | 'email';
+
+export default function AuthPage() {
+  if (!hasAuth) notFound();
+
+  const t = useTranslations('auth');
+  const tErrors = useTranslations('errors');
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const bestraw = useCustomerClient();
+  const redirectTo = searchParams.get('redirect') || '/order';
+
+  const defaultMethod: AuthMethod = hasEmailAuth ? 'email' : 'phone';
+
+  const [step, setStep] = useState<Step>('identifier');
+  const [authMethod, setAuthMethod] = useState<AuthMethod>(defaultMethod);
+  const [phone, setPhone] = useState('');
+  const [countryCode, setCountryCode] = useState('+33');
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const fullPhone = `${countryCode}${phone.replace(/\s/g, '')}`;
+
+  async function handleRequestOtp(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      if (authMethod === 'phone') {
+        const cleaned = phone.replace(/\s/g, '');
+        if (!cleaned || cleaned.length < 6) {
+          setError(tErrors('INVALID_PHONE'));
+          setLoading(false);
+          return;
+        }
+        await bestraw.customer.requestOtp(fullPhone);
+      } else {
+        if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+          setError(tErrors('INVALID_EMAIL'));
+          setLoading(false);
+          return;
+        }
+        await bestraw.customer.requestEmailOtp(email);
+      }
+      setStep('otp');
+    } catch (err: unknown) {
+      setError(getErrorMessage(err, tErrors));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleVerifyOtp(code: string) {
+    setError('');
+    setLoading(true);
+    try {
+      let result;
+      if (authMethod === 'phone') {
+        result = await bestraw.customer.verifyOtp(fullPhone, code);
+      } else {
+        result = await bestraw.customer.verifyEmailOtp(email, code);
+      }
+      const token = (result as { token: string }).token;
+      setCustomerToken(token);
+      router.push(redirectTo as '/order');
+    } catch (err: unknown) {
+      setError(getErrorMessage(err, tErrors));
+      setLoading(false);
+    }
+  }
+
+  const showToggle = hasPhoneAuth && hasEmailAuth;
+
+  return (
+    <div className="min-h-[calc(100vh-8rem)] flex items-center justify-center px-4">
+      <div className="w-full max-w-sm">
+        <h1 className="text-2xl font-bold text-center text-[var(--color-primary)] mb-8">
+          {t('title')}
+        </h1>
+
+        {/* Auth method toggle */}
+        {showToggle && step === 'identifier' && (
+          <div className="flex rounded-lg border border-gray-200 mb-6 overflow-hidden">
+            <button
+              type="button"
+              onClick={() => { setAuthMethod('email'); setError(''); }}
+              className={`flex-1 py-2.5 text-sm font-medium transition-colors ${
+                authMethod === 'email'
+                  ? 'bg-[var(--color-primary)] text-white'
+                  : 'text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              {t('useEmail')}
+            </button>
+            <button
+              type="button"
+              onClick={() => { setAuthMethod('phone'); setError(''); }}
+              className={`flex-1 py-2.5 text-sm font-medium transition-colors ${
+                authMethod === 'phone'
+                  ? 'bg-[var(--color-primary)] text-white'
+                  : 'text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              {t('usePhone')}
+            </button>
+          </div>
+        )}
+
+        {step === 'identifier' && (
+          <form onSubmit={handleRequestOtp} className="space-y-6">
+            {authMethod === 'phone' ? (
+              <div>
+                <label
+                  htmlFor="phone"
+                  className="block text-sm font-medium text-gray-700 mb-2"
+                >
+                  {t('phone')}
+                </label>
+                <div className="flex gap-2">
+                  <select
+                    value={countryCode}
+                    onChange={(e) => setCountryCode(e.target.value)}
+                    className="w-24 px-3 py-3 border border-gray-300 rounded-lg text-sm focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)]/20"
+                  >
+                    <option value="+33">+33</option>
+                    <option value="+1">+1</option>
+                    <option value="+44">+44</option>
+                    <option value="+49">+49</option>
+                    <option value="+34">+34</option>
+                    <option value="+39">+39</option>
+                    <option value="+81">+81</option>
+                  </select>
+                  <input
+                    id="phone"
+                    type="tel"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                    placeholder={t('phonePlaceholder')}
+                    className="flex-1 px-4 py-3 border border-gray-300 rounded-lg text-sm focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)]/20"
+                  />
+                </div>
+              </div>
+            ) : (
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700 mb-2"
+                >
+                  {t('email')}
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder={t('emailPlaceholder')}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)]/20"
+                />
+              </div>
+            )}
+
+            {error && <ErrorAlert message={error} />}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-3 bg-[var(--color-primary)] text-white rounded-lg font-medium hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? '...' : t('sendCode')}
+            </button>
+          </form>
+        )}
+
+        {step === 'otp' && (
+          <div className="space-y-6">
+            <p className="text-sm text-gray-600 text-center">
+              {authMethod === 'phone' ? t('otpSent') : t('otpSentEmail')}
+            </p>
+            <p className="text-sm font-medium text-center">
+              {authMethod === 'phone' ? t('enterCode') : t('enterCodeEmail')}
+            </p>
+
+            <OtpForm length={6} onComplete={handleVerifyOtp} />
+
+            {error && <ErrorAlert message={error} />}
+
+            {loading && (
+              <p className="text-sm text-gray-500 text-center">...</p>
+            )}
+
+            <button
+              type="button"
+              onClick={() => {
+                setStep('identifier');
+                setError('');
+              }}
+              className="w-full py-3 text-sm text-gray-600 hover:text-[var(--color-primary)] transition-colors"
+            >
+              {t('back')}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,104 @@
+import { getTranslations } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { bestraw } from '@/lib/client';
+import { ArticleContent } from '@/components/blog/ArticleContent';
+import { hasBlog } from '@/lib/features';
+import type { BlogArticle } from 'bestraw-sdk';
+
+export default async function BlogArticlePage({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  if (!hasBlog) notFound();
+
+  const { locale, slug } = await params;
+  const t = await getTranslations('blog');
+  const apiUrl =
+    process.env.API_URL ||
+    process.env.NEXT_PUBLIC_API_URL ||
+    'http://localhost:1338';
+
+  let article: BlogArticle | null = null;
+
+  try {
+    article = await bestraw.blog.getArticle(slug, locale);
+  } catch {
+    // API unavailable or article not found
+  }
+
+  if (!article) {
+    notFound();
+  }
+
+  const date = article.publishDate
+    ? new Date(article.publishDate).toLocaleDateString()
+    : '';
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <a
+        href={`/${locale}/blog`}
+        className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-[var(--color-primary)] transition-colors mb-8"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+        </svg>
+        {t('backToBlog')}
+      </a>
+
+      {/* Cover image */}
+      {article.coverImage && (
+        <div className="rounded-xl overflow-hidden mb-8">
+          <img
+            src={`${apiUrl}${article.coverImage.url}`}
+            alt={article.coverImage.alternativeText || article.title}
+            className="w-full h-64 sm:h-96 object-cover"
+          />
+        </div>
+      )}
+
+      {/* Header */}
+      <header className="mb-8">
+        {article.category && (
+          <span className="text-sm font-medium text-[var(--color-accent)] uppercase tracking-wide">
+            {article.category.name}
+          </span>
+        )}
+        <h1 className="mt-2 text-3xl sm:text-4xl font-bold text-gray-900">
+          {article.title}
+        </h1>
+        <div className="mt-4 flex flex-wrap items-center gap-4 text-sm text-gray-500">
+          {article.authorName && (
+            <span>
+              {t('by')} {article.authorName}
+            </span>
+          )}
+          {date && (
+            <span>
+              {t('publishedOn')} {date}
+            </span>
+          )}
+          {article.readingTime && (
+            <span>{t('readingTime', { minutes: article.readingTime })}</span>
+          )}
+        </div>
+        {article.tags && article.tags.length > 0 && (
+          <div className="mt-4 flex flex-wrap gap-2">
+            {article.tags.map((tag) => (
+              <span
+                key={tag}
+                className="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+      </header>
+
+      {/* Content */}
+      {article.content && <ArticleContent content={article.content} />}
+    </div>
+  );
+}

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

@@ -0,0 +1,90 @@
+import { getTranslations } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { bestraw } from '@/lib/client';
+import { ArticleCard } from '@/components/blog/ArticleCard';
+import { hasBlog } from '@/lib/features';
+import type { BlogArticle, BlogCategory } from 'bestraw-sdk';
+
+export default async function BlogPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<{ category?: string }>;
+}) {
+  if (!hasBlog) notFound();
+
+  const { locale } = await params;
+  const { category: categoryFilter } = await searchParams;
+  const t = await getTranslations('blog');
+  const apiUrl =
+    process.env.API_URL ||
+    process.env.NEXT_PUBLIC_API_URL ||
+    'http://localhost:1338';
+
+  let articles: BlogArticle[] = [];
+  let categories: BlogCategory[] = [];
+
+  try {
+    const [fetchedArticles, fetchedCategories] = await Promise.all([
+      bestraw.blog.getArticles({ locale, category: categoryFilter }),
+      bestraw.blog.getCategories(locale),
+    ]);
+    articles = fetchedArticles;
+    categories = fetchedCategories;
+  } catch {
+    // API unavailable
+  }
+
+  return (
+    <div className="max-w-6xl 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>
+
+      {/* Category filter */}
+      {categories.length > 0 && (
+        <div className="flex flex-wrap gap-2 mb-8">
+          <a
+            href={`/${locale}/blog`}
+            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+              !categoryFilter
+                ? 'bg-[var(--color-primary)] text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            {t('allCategories')}
+          </a>
+          {categories.map((cat) => (
+            <a
+              key={cat.documentId}
+              href={`/${locale}/blog?category=${cat.slug}`}
+              className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                categoryFilter === cat.slug
+                  ? 'bg-[var(--color-primary)] text-white'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              }`}
+            >
+              {cat.name}
+            </a>
+          ))}
+        </div>
+      )}
+
+      {/* Articles grid */}
+      {articles.length > 0 ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {articles.map((article) => (
+            <ArticleCard
+              key={article.documentId}
+              article={article}
+              apiUrl={apiUrl}
+            />
+          ))}
+        </div>
+      ) : (
+        <p className="text-center text-gray-500 py-12">{t('noArticles')}</p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+
+export default function ErrorPage({
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const t = useTranslations('errors');
+
+  return (
+    <div className="min-h-[calc(100vh-8rem)] flex items-center justify-center px-4">
+      <div className="text-center max-w-sm">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-4">
+          <svg
+            className="w-8 h-8 text-red-500"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
+            />
+          </svg>
+        </div>
+        <p className="text-gray-600 mb-6">{t('unknown')}</p>
+        <button
+          onClick={reset}
+          className="px-6 py-3 rounded-md bg-[var(--color-accent)] text-white font-medium hover:opacity-90 transition-opacity"
+        >
+          {t('retry')}
+        </button>
+      </div>
+    </div>
+  );
+}