bestraw 1.0.0

package/templates/web/src/components/loyalty/PointsBalance.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+
+interface PointsBalanceProps {
+  points: number;
+  tier: string;
+  totalEarned: number;
+  totalRedeemed: number;
+}
+
+const tierColors: Record<string, string> = {
+  bronze: '#CD7F32',
+  silver: '#C0C0C0',
+  gold: '#FFD700',
+};
+
+const tierThresholds: Record<string, number> = {
+  bronze: 1000,
+  silver: 5000,
+};
+
+export function PointsBalance({
+  points = 0,
+  tier = 'bronze',
+  totalEarned = 0,
+  totalRedeemed = 0,
+}: PointsBalanceProps) {
+  const t = useTranslations('loyalty');
+
+  const tierKey = tier.toLowerCase();
+  const tierColor = tierColors[tierKey] || tierColors.bronze;
+  const tierLabel =
+    t(tierKey as 'bronze' | 'silver' | 'gold');
+
+  const nextTierThreshold = tierThresholds[tierKey];
+  const progress = nextTierThreshold
+    ? Math.min((totalEarned / nextTierThreshold) * 100, 100)
+    : 100;
+
+  return (
+    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="text-center mb-6">
+        <p className="text-5xl font-bold text-[var(--color-primary)]">
+          {points.toLocaleString()}
+        </p>
+        <p className="text-gray-500 mt-1">{t('points')}</p>
+      </div>
+
+      <div className="flex justify-center mb-6">
+        <span
+          className="inline-flex items-center px-4 py-1.5 rounded-full text-sm font-semibold text-white"
+          style={{ backgroundColor: tierColor }}
+        >
+          {t('tier')}: {tierLabel}
+        </span>
+      </div>
+
+      {nextTierThreshold && (
+        <div className="mb-6">
+          <div className="flex justify-between text-xs text-gray-500 mb-1">
+            <span>{tierLabel}</span>
+            <span>
+              {t('nextTier')}{' '}
+              {(nextTierThreshold - totalEarned).toLocaleString()} {t('points')}
+            </span>
+          </div>
+          <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+            <div
+              className="h-full rounded-full transition-all duration-500"
+              style={{
+                width: `${progress}%`,
+                backgroundColor: tierColor,
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 gap-4 text-center">
+        <div className="bg-gray-50 rounded-lg p-3">
+          <p className="text-lg font-semibold text-green-600">
+            {totalEarned.toLocaleString()}
+          </p>
+          <p className="text-xs text-gray-500">{t('totalEarned')}</p>
+        </div>
+        <div className="bg-gray-50 rounded-lg p-3">
+          <p className="text-lg font-semibold text-red-500">
+            {totalRedeemed.toLocaleString()}
+          </p>
+          <p className="text-xs text-gray-500">{t('totalRedeemed')}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/web/src/components/loyalty/RewardCard.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+
+interface Reward {
+  name: string;
+  description: string;
+  pointsCost: number;
+  type: string;
+  value: number;
+  active: boolean;
+}
+
+interface RewardCardProps {
+  reward: Reward;
+  currentPoints: number;
+  onRedeem?: () => void;
+  checkoutMode?: boolean;
+}
+
+export function RewardCard({ reward, currentPoints, onRedeem, checkoutMode }: RewardCardProps) {
+  const t = useTranslations('loyalty');
+
+  const canRedeem = reward.active && currentPoints >= reward.pointsCost;
+
+  function getTypeLabel() {
+    switch (reward.type) {
+      case 'free_item':
+        return t('freeItem');
+      case 'percent_discount':
+        return t('discountPercent', { value: reward.value });
+      case 'fixed_discount':
+        return t('discountFixed', { value: reward.value });
+      default:
+        return reward.type;
+    }
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 flex flex-col">
+      <div className="flex-1">
+        <div className="flex items-start justify-between mb-2">
+          <h3 className="font-semibold text-gray-900">{reward.name}</h3>
+          <span className="text-xs font-medium px-2 py-1 bg-gray-100 text-gray-600 rounded-full whitespace-nowrap ml-2">
+            {getTypeLabel()}
+          </span>
+        </div>
+        <p className="text-sm text-gray-500 mb-4">{reward.description}</p>
+      </div>
+
+      <div className="flex items-center justify-between pt-3 border-t border-gray-100">
+        <span className="text-sm font-semibold text-[var(--color-primary)]">
+          {t('pointsCost', { cost: reward.pointsCost })}
+        </span>
+        {checkoutMode ? (
+          <span className="px-4 py-2 text-sm font-medium text-[var(--color-accent)]">
+            {t('useAtCheckout')}
+          </span>
+        ) : (
+          <button
+            onClick={onRedeem}
+            disabled={!canRedeem}
+            className="px-4 py-2 text-sm font-medium rounded-lg transition-all
+              bg-[var(--color-primary)] text-white hover:opacity-90
+              disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {canRedeem ? t('redeem') : t('notEnoughPoints')}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/web/src/components/loyalty/TransactionHistory.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+
+interface Transaction {
+  type: string;
+  points: number;
+  description: string;
+  createdAt: string;
+}
+
+interface TransactionHistoryProps {
+  transactions: Transaction[];
+}
+
+const typeConfig: Record<
+  string,
+  { color: string; bgColor: string; sign: string }
+> = {
+  earn: { color: 'text-green-600', bgColor: 'bg-green-100', sign: '+' },
+  redeem: { color: 'text-red-500', bgColor: 'bg-red-100', sign: '-' },
+  adjust: { color: 'text-blue-600', bgColor: 'bg-blue-100', sign: '' },
+  expire: { color: 'text-gray-500', bgColor: 'bg-gray-100', sign: '-' },
+};
+
+function TypeIcon({ type }: { type: string }) {
+  const config = typeConfig[type] || typeConfig.adjust;
+
+  const icons: Record<string, string> = {
+    earn: 'M12 4v16m8-8H4',
+    redeem: 'M20 12H4',
+    adjust: 'M4 4l16 16M4 20L20 4',
+    expire: 'M12 8v4l3 3',
+  };
+
+  return (
+    <div
+      className={`w-8 h-8 rounded-full ${config.bgColor} flex items-center justify-center flex-shrink-0`}
+    >
+      <svg
+        className={`w-4 h-4 ${config.color}`}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d={icons[type] || icons.adjust} />
+      </svg>
+    </div>
+  );
+}
+
+export function TransactionHistory({ transactions }: TransactionHistoryProps) {
+  const t = useTranslations('loyalty');
+
+  const sorted = [...transactions].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+  );
+
+  const typeLabels: Record<string, string> = {
+    earn: t('earn'),
+    redeem: t('redeemed'),
+    adjust: t('adjusted'),
+    expire: t('expired'),
+  };
+
+  return (
+    <div className="bg-white rounded-2xl shadow-sm border border-gray-100">
+      <h2 className="text-lg font-semibold text-gray-900 px-6 py-4 border-b border-gray-100">
+        {t('history')}
+      </h2>
+
+      {sorted.length === 0 ? (
+        <p className="text-sm text-gray-500 px-6 py-8 text-center">--</p>
+      ) : (
+        <ul className="divide-y divide-gray-50">
+          {sorted.map((tx, index) => {
+            const config = typeConfig[tx.type] || typeConfig.adjust;
+            const date = new Date(tx.createdAt);
+
+            return (
+              <li key={index} className="px-6 py-4 flex items-center gap-4">
+                <TypeIcon type={tx.type} />
+
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-900 truncate">
+                    {tx.description}
+                  </p>
+                  <p className="text-xs text-gray-400">
+                    {typeLabels[tx.type] || tx.type} &middot;{' '}
+                    {date.toLocaleDateString()}
+                  </p>
+                </div>
+
+                <span className={`text-sm font-semibold ${config.color}`}>
+                  {config.sign}
+                  {Math.abs(tx.points).toLocaleString()} {t('points')}
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+import type { Category } from 'bestraw-sdk';
+import { MealCard } from './MealCard';
+import { MealOrderCard } from '@/components/order/MealOrderCard';
+
+interface CategorySectionProps {
+  category: Category;
+  apiUrl: string;
+  orderable?: boolean;
+}
+
+export function CategorySection({ category, apiUrl, orderable }: CategorySectionProps) {
+  const visibleMeals = (category.meals ?? [])
+    .filter((meal) => meal.show)
+    .sort((a, b) => a.sortOrder - b.sortOrder);
+
+  if (visibleMeals.length === 0) {
+    return null;
+  }
+
+  return (
+    <section 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) =>
+          orderable ? (
+            <MealOrderCard key={meal.documentId} meal={meal} apiUrl={apiUrl} />
+          ) : (
+            <MealCard key={meal.documentId} meal={meal} apiUrl={apiUrl} />
+          )
+        )}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,55 @@
+import type { Meal } from 'bestraw-sdk';
+
+interface MealCardProps {
+  meal: Meal;
+  apiUrl: string;
+  onClick?: () => void;
+}
+
+function formatPrice(price: number): string {
+  return price.toFixed(2).replace('.', ',') + ' \u20AC';
+}
+
+export function MealCard({ meal, apiUrl, onClick }: MealCardProps) {
+  const picture = meal.pictures?.[0];
+  const imageUrl = picture
+    ? `${apiUrl}${picture.url}`
+    : null;
+
+  return (
+    <div
+      className="bg-white rounded-lg border border-gray-100 overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={onClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') onClick(); } : undefined}
+    >
+      {imageUrl && (
+        <div className="aspect-[4/3] overflow-hidden bg-gray-100">
+          <img
+            src={imageUrl}
+            alt={picture?.alternativeText || meal.name}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      )}
+
+      <div className="p-4">
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="font-semibold text-[var(--color-primary)]">
+            {meal.name}
+          </h3>
+          <span className="text-sm font-medium text-[var(--color-accent)] whitespace-nowrap">
+            {formatPrice(meal.price)}
+          </span>
+        </div>
+
+        {meal.description && (
+          <p className="mt-1 text-sm text-gray-600 line-clamp-2">
+            {meal.description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}