Add Foodstar Rasa Rasa campaign

package.json

@@ -1,36 +1,38 @@
-{
-  "name": "matcha-moments-frontend",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Matcha Moments — guided cafe video review experience. Calls Humeo's deployed public review APIs.",
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "type-check": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@ffmpeg/ffmpeg": "^0.12.15",
-    "@ffmpeg/util": "^0.12.2",
-    "@supabase/supabase-js": "^2.105.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.469.0",
-    "next": "14.2.35",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.5.5",
-    "zod": "^3.23.8"
-  },
-  "devDependencies": {
-    "@types/node": "^20.16.11",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.1",
-    "eslint-config-next": "14.2.35",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3"
-  }
-}
+{
+  "name": "matcha-moments-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Matcha Moments — guided cafe video review experience. Calls Humeo's deployed public review APIs.",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/util": "^0.12.2",
+    "@supabase/supabase-js": "^2.105.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
+    "next": "14.2.35",
+    "qrcode": "^1.5.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.5",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20.16.11",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "14.2.35",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3"
+  }
+}

src/app/admin/reviews/page.tsx

@@ -3,6 +3,7 @@ import {
   listAdminReviewSubmissions,
   type AdminReviewSubmission,
 } from '@/lib/server/reviewStore';
+import { RASA_RASA_SLUG } from '@/lib/foodstar';
 
 export const dynamic = 'force-dynamic';
 export const runtime = 'nodejs';
@@ -53,12 +54,12 @@ function remoteRecorderHref() {
   if (explicit) return explicit;
 
   const remote = remoteAdminConfig();
-  if (!remote) return '/c/sageandstone';
+  if (!remote) return `/c/${RASA_RASA_SLUG}`;
 
   try {
-    return new URL('/c/sageandstone', remote.url).toString();
+    return new URL(`/c/${RASA_RASA_SLUG}`, remote.url).toString();
   } catch {
-    return '/c/sageandstone';
+    return `/c/${RASA_RASA_SLUG}`;
   }
 }
 
@@ -210,6 +211,22 @@ export default async function AdminReviewsPage() {
                         </dt>
                         <dd className="mt-1 text-cream/85">{submission.tableId ?? '-'}</dd>
                       </div>
+                      <div className="rounded-md bg-cream/[0.04] px-3 py-2">
+                        <dt className="font-mono text-[10px] uppercase tracking-[0.14em] text-cream/45">
+                          Instagram
+                        </dt>
+                        <dd className="mt-1 truncate text-cream/85">
+                          {submission.instagramHandle ?? '-'}
+                        </dd>
+                      </div>
+                      <div className="rounded-md bg-cream/[0.04] px-3 py-2">
+                        <dt className="font-mono text-[10px] uppercase tracking-[0.14em] text-cream/45">
+                          TikTok
+                        </dt>
+                        <dd className="mt-1 truncate text-cream/85">
+                          {submission.tiktokHandle ?? '-'}
+                        </dd>
+                      </div>
                     </dl>
 
                     <div className="rounded-md bg-cream/[0.04] px-3 py-2 text-sm leading-5 text-cream/70">

src/app/api/public/reviews/submit-clips/route.ts

@@ -40,6 +40,8 @@ export async function POST(req: NextRequest) {
     const slug = sanitizeText(form.get('slug'), 120);
     const consentAccepted = sanitizeText(form.get('consentAccepted'), 10) === 'true';
     const socialHandle = sanitizeText(form.get('socialHandle'), 120) || null;
+    const instagramHandle = sanitizeText(form.get('instagramHandle'), 80) || null;
+    const tiktokHandle = sanitizeText(form.get('tiktokHandle'), 80) || null;
     const deviceKey = sanitizeText(form.get('deviceKey'), 200) || null;
     const tableId = sanitizeText(form.get('tableId'), 80) || null;
 
@@ -71,6 +73,8 @@ export async function POST(req: NextRequest) {
       slug,
       consentAccepted,
       socialHandle,
+      instagramHandle,
+      tiktokHandle,
       deviceKey,
       tableId,
       durationSeconds: rendered.durationSeconds,

src/app/api/public/reviews/submit-session/route.ts

@@ -35,6 +35,8 @@ export async function POST(req: NextRequest) {
     const slug = sanitizeText(form.get('slug'), 120);
     const consentAccepted = sanitizeText(form.get('consentAccepted'), 10) === 'true';
     const socialHandle = sanitizeText(form.get('socialHandle'), 120) || null;
+    const instagramHandle = sanitizeText(form.get('instagramHandle'), 80) || null;
+    const tiktokHandle = sanitizeText(form.get('tiktokHandle'), 80) || null;
     const deviceKey = sanitizeText(form.get('deviceKey'), 200) || null;
     const tableId = sanitizeText(form.get('tableId'), 80) || null;
     const sessionId = sanitizeText(form.get('sessionId'), 100);
@@ -68,6 +70,8 @@ export async function POST(req: NextRequest) {
       slug,
       consentAccepted,
       socialHandle,
+      instagramHandle,
+      tiktokHandle,
       deviceKey,
       tableId,
       durationSeconds: rendered.durationSeconds,

src/app/api/public/reviews/submit/route.ts

@@ -20,6 +20,8 @@ export async function POST(req: NextRequest) {
     const slug = sanitizeText(form.get('slug'), 120);
     const consentAccepted = sanitizeText(form.get('consentAccepted'), 10) === 'true';
     const socialHandle = sanitizeText(form.get('socialHandle'), 120) || null;
+    const instagramHandle = sanitizeText(form.get('instagramHandle'), 80) || null;
+    const tiktokHandle = sanitizeText(form.get('tiktokHandle'), 80) || null;
     const deviceKey = sanitizeText(form.get('deviceKey'), 200) || null;
     const tableId = sanitizeText(form.get('tableId'), 80) || null;
     const durationSecondsRaw = Number(sanitizeText(form.get('durationSeconds'), 20));
@@ -39,6 +41,8 @@ export async function POST(req: NextRequest) {
       slug,
       consentAccepted,
       socialHandle,
+      instagramHandle,
+      tiktokHandle,
       deviceKey,
       tableId,
       durationSeconds,

src/app/c/[slug]/LandingClient.tsx

@@ -1,34 +1,141 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
+'use client';
+
+import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Button } from '@/components/Button';
 import { MatchaCircle } from '@/components/MatchaCircle';
 import { MobileShell } from '@/components/MobileShell';
 import { recordingStore } from '@/lib/recordingStore';
+import { socialHandleSummary } from '@/lib/foodstar';
 import type { PublicReviewCampaign } from '@/lib/reviews/types';
-
-type Props = {
-  slug: string;
-  tableId: string | null;
-  campaign: PublicReviewCampaign;
-};
-
+
+type Props = {
+  slug: string;
+  tableId: string | null;
+  campaign: PublicReviewCampaign;
+};
+
 export function LandingClient({ slug, tableId, campaign }: Props) {
   const router = useRouter();
   const [consentAccepted, setConsentAccepted] = useState(false);
-
-  useEffect(() => {
-    recordingStore.setMeta({ slug, tableId });
-  }, [slug, tableId]);
-
+  const [instagramHandle, setInstagramHandle] = useState('');
+  const [tiktokHandle, setTiktokHandle] = useState('');
+  const isFoodstar = campaign.theme === 'foodstar-humeo';
+
+  useEffect(() => {
+    recordingStore.setMeta({ slug, tableId });
+  }, [slug, tableId]);
+
   const handleStart = () => {
     if (!consentAccepted) return;
+    const instagram = normalizeHandle(instagramHandle);
+    const tiktok = normalizeHandle(tiktokHandle);
+    recordingStore.setMeta({
+      slug,
+      tableId,
+      instagramHandle: instagram,
+      tiktokHandle: tiktok,
+      socialHandle: socialHandleSummary(instagram, tiktok),
+    });
     window.sessionStorage.setItem(`matcha-moments-consent:${slug}`, 'true');
     const tableQuery = tableId ? `?t=${encodeURIComponent(tableId)}` : '';
     router.push(`/c/${encodeURIComponent(slug)}/record${tableQuery}`);
   };
-
+
+  if (isFoodstar) {
+    return (
+      <MobileShell tone="dark">
+        <main className="relative flex min-h-dvh flex-col overflow-hidden bg-[#0D0E0C] text-[#F8F3E7]">
+          <div
+            className="pointer-events-none absolute inset-0"
+            style={{
+              background:
+                'radial-gradient(circle at 50% 12%, rgba(184,201,168,0.24), transparent 34%), radial-gradient(circle at 82% 78%, rgba(239,92,54,0.16), transparent 34%), linear-gradient(160deg, #10110F 0%, #231F18 58%, #0D0E0C 100%)',
+            }}
+          />
+
+          <section className="relative flex flex-1 flex-col px-7 pt-8 [@media(max-height:740px)]:pt-5">
+            <div className="flex items-center justify-between font-mono text-[10px] uppercase tracking-[0.18em] text-[#B8C9A8]">
+              <span>foodstar.co</span>
+              <span>{campaign.restaurantName}</span>
+            </div>
+
+            <div className="mt-10 [@media(max-height:740px)]:mt-6">
+              <div className="mb-3 font-mono text-[10px] uppercase tracking-[0.22em] text-[#F0C7A6]">
+                Review food for {campaign.restaurantName}
+              </div>
+              <h1 className="font-serif text-[42px] font-light leading-[1.02] text-[#F8F3E7] [@media(max-height:740px)]:text-[36px]">
+                Get a free piece
+                <br />
+                of chicken.
+              </h1>
+              <p className="mt-4 max-w-[320px] text-[15px] leading-[1.55] text-[#DAD2C4]/78 [@media(max-height:740px)]:mt-3">
+                Record a quick food review for Rasa Rasa: what you ordered, what you loved, and three food shots.
+              </p>
+            </div>
+
+            <div className="mt-6 rounded-[8px] border border-[#B8C9A8]/18 bg-[#F8F3E7]/7 p-4 [@media(max-height:740px)]:mt-4 [@media(max-height:740px)]:p-3">
+              <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-[#B8C9A8]">
+                Tag me
+              </div>
+              <div className="mt-3 grid gap-2.5">
+                <input
+                  value={instagramHandle}
+                  onChange={(event) => setInstagramHandle(event.target.value)}
+                  placeholder="Instagram handle"
+                  className="h-12 rounded-full border border-[#F8F3E7]/12 bg-black/22 px-4 text-[14px] text-[#F8F3E7] outline-none placeholder:text-[#F8F3E7]/42 focus:border-[#B8C9A8]/55"
+                  autoCapitalize="none"
+                  autoCorrect="off"
+                  inputMode="text"
+                />
+                <input
+                  value={tiktokHandle}
+                  onChange={(event) => setTiktokHandle(event.target.value)}
+                  placeholder="TikTok handle"
+                  className="h-12 rounded-full border border-[#F8F3E7]/12 bg-black/22 px-4 text-[14px] text-[#F8F3E7] outline-none placeholder:text-[#F8F3E7]/42 focus:border-[#B8C9A8]/55"
+                  autoCapitalize="none"
+                  autoCorrect="off"
+                  inputMode="text"
+                />
+              </div>
+            </div>
+
+            <label className="mt-4 flex cursor-pointer items-start gap-3 rounded-[8px] border border-[#F8F3E7]/12 bg-black/18 px-4 py-3 text-left">
+              <input
+                type="checkbox"
+                checked={consentAccepted}
+                onChange={(event) => setConsentAccepted(event.target.checked)}
+                className="mt-0.5 h-4 w-4 accent-[#B8C9A8]"
+              />
+              <span className="text-[12.5px] leading-[1.45] text-[#DAD2C4]/76">
+                I allow {campaign.restaurantName} and Foodstar to review, edit, and use my video and voice on social media.
+              </span>
+            </label>
+          </section>
+
+          <footer className="relative px-7 pb-6 pt-2">
+            <Button
+              onClick={handleStart}
+              disabled={!consentAccepted}
+              className={
+                consentAccepted
+                  ? 'bg-[#B8C9A8] text-[#151711] hover:bg-[#DDE8C8] active:bg-[#DDE8C8]'
+                  : 'bg-[#5D6556] text-[#F8F3E7] disabled:cursor-not-allowed disabled:opacity-80'
+              }
+            >
+              {campaign.startCta ?? 'Start food review'} -&gt;
+            </Button>
+            {tableId ? (
+              <p className="mt-3 text-center font-mono text-[10px] uppercase tracking-[0.15em] text-[#F8F3E7]/38">
+                Table {tableId}
+              </p>
+            ) : null}
+          </footer>
+        </main>
+      </MobileShell>
+    );
+  }
+
   return (
     <MobileShell>
       <main className="relative flex h-dvh max-h-dvh flex-col overflow-hidden bg-[#EDE5D2] text-[#1B1A14]">
@@ -94,3 +201,9 @@ export function LandingClient({ slug, tableId, campaign }: Props) {
     </MobileShell>
   );
 }
+
+function normalizeHandle(value: string) {
+  const trimmed = value.trim();
+  if (!trimmed) return '';
+  return trimmed.startsWith('@') ? trimmed : `@${trimmed}`;
+}

src/app/layout.tsx

@@ -1,46 +1,46 @@
-import type { Metadata, Viewport } from 'next';
-import { Fraunces, DM_Sans, DM_Mono } from 'next/font/google';
-import './globals.css';
-
-const fraunces = Fraunces({
-  subsets: ['latin'],
-  weight: ['300', '400'],
-  style: ['normal', 'italic'],
-  variable: '--font-fraunces',
-  display: 'swap',
-});
-
-const dmSans = DM_Sans({
-  subsets: ['latin'],
-  weight: ['400', '500', '600', '700'],
-  variable: '--font-dm-sans',
-  display: 'swap',
-});
-
-const dmMono = DM_Mono({
-  subsets: ['latin'],
-  weight: ['400', '500'],
-  variable: '--font-dm-mono',
-  display: 'swap',
-});
-
-export const metadata: Metadata = {
-  title: 'Matcha Moments',
-  description: 'Free matcha for an honest review.',
-};
-
-export const viewport: Viewport = {
-  width: 'device-width',
-  initialScale: 1,
-  maximumScale: 1,
-  userScalable: false,
-  themeColor: '#F5EFE2',
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en" className={`${fraunces.variable} ${dmSans.variable} ${dmMono.variable}`}>
-      <body className="font-sans bg-cream text-ink min-h-dvh">{children}</body>
-    </html>
-  );
-}
+import type { Metadata, Viewport } from 'next';
+import { Fraunces, DM_Sans, DM_Mono } from 'next/font/google';
+import './globals.css';
+
+const fraunces = Fraunces({
+  subsets: ['latin'],
+  weight: ['300', '400'],
+  style: ['normal', 'italic'],
+  variable: '--font-fraunces',
+  display: 'swap',
+});
+
+const dmSans = DM_Sans({
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+  variable: '--font-dm-sans',
+  display: 'swap',
+});
+
+const dmMono = DM_Mono({
+  subsets: ['latin'],
+  weight: ['400', '500'],
+  variable: '--font-dm-mono',
+  display: 'swap',
+});
+
+export const metadata: Metadata = {
+  title: 'Foodstar',
+  description: 'Scan the QR code, leave a food review, and claim your reward.',
+};
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  themeColor: '#0D0E0C',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={`${fraunces.variable} ${dmSans.variable} ${dmMono.variable}`}>
+      <body className="font-sans bg-cream text-ink min-h-dvh">{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -1,77 +1,5 @@
-'use client';
-
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { Button } from '@/components/Button';
-import { MobileShell } from '@/components/MobileShell';
-
-const DEFAULT_SLUG = 'sageandstone';
+import { FoodstarTvScreen } from '@/components/FoodstarTvScreen';
 
 export default function HomePage() {
-  const [scanY, setScanY] = useState(0);
-
-  useEffect(() => {
-    let raf = 0;
-    const start = performance.now();
-    const tick = (now: number) => {
-      const t = ((now - start) / 2000) % 1;
-      // up-down ping-pong
-      setScanY(Math.abs(Math.sin(t * Math.PI)));
-      raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, []);
-
-  return (
-    <MobileShell>
-      <main className="flex min-h-dvh flex-col bg-cream">
-      <section className="flex flex-1 flex-col items-center justify-center px-7 text-center">
-        <div className="relative mb-5 h-40 w-40 overflow-hidden rounded-2xl border border-ink/10 bg-white p-3.5">
-          <div
-            className="h-full w-full rounded-md"
-            style={{
-              backgroundImage:
-                'linear-gradient(90deg, #2A2520 25%, transparent 25% 50%, #2A2520 50% 75%, transparent 75%), linear-gradient(#2A2520 25%, transparent 25% 50%, #2A2520 50% 75%, transparent 75%)',
-              backgroundSize: '8px 8px',
-              backgroundBlendMode: 'multiply',
-            }}
-          />
-          <div className="absolute left-3.5 top-3.5 h-[30px] w-[30px] border-[6px] border-ink bg-white" />
-          <div className="absolute right-3.5 top-3.5 h-[30px] w-[30px] border-[6px] border-ink bg-white" />
-          <div className="absolute bottom-3.5 left-3.5 h-[30px] w-[30px] border-[6px] border-ink bg-white" />
-          <div
-            className="pointer-events-none absolute left-3.5 right-3.5 h-[2px]"
-            style={{
-              top: `${10 + scanY * 75}%`,
-              background:
-                'linear-gradient(90deg, transparent, #4A6B3D, transparent)',
-            }}
-          />
-        </div>
-
-        <div className="text-eyebrow mb-3 text-matcha">Step 00 · context</div>
-        <h2 className="text-display max-w-[280px] text-[26px] text-ink">
-          She scans the QR <em className="text-matcha">on the table</em>
-        </h2>
-        <p className="mt-3 max-w-[300px] text-[14px] leading-[1.5] text-ink/65">
-          Tabletop card reads:{' '}
-          <em className="font-serif italic text-matcha">
-            &ldquo;Free matcha for an honest review.&rdquo;
-          </em>{' '}
-          She points her camera. Browser opens.
-        </p>
-      </section>
-
-      <footer className="px-7 pb-6 pt-4">
-        <Link href={`/c/${DEFAULT_SLUG}`} prefetch>
-          <Button>Tap to load the page →</Button>
-        </Link>
-        <p className="mt-3 text-center font-mono text-[10px] text-muted">
-          Dev note: in production, the QR camera scan deep-links to /c/[slug].
-        </p>
-      </footer>
-      </main>
-    </MobileShell>
-  );
+  return <FoodstarTvScreen />;
 }

src/app/preview/page.tsx

@@ -10,6 +10,7 @@ import { useSubmissionPolling } from '@/hooks/useSubmissionPolling';
 import { concatClips } from '@/lib/ffmpeg';
 import { submit, submitSession, uploadClip } from '@/lib/humeoApi';
 import { recordingStore, useRecordingStore } from '@/lib/recordingStore';
+import { RASA_RASA_SLUG } from '@/lib/foodstar';
 import type { PublicSubmitResult } from '@/lib/reviews/types';
 import { ensureDeviceKey } from '@/lib/utils';
 import { addVoiceoverToVideo } from '@/lib/voiceover';
@@ -40,6 +41,9 @@ export default function PreviewPage() {
   const store = useRecordingStore();
   const [phase, setPhase] = useState<Phase>({ kind: 'idle' });
   const triggeredRef = useRef(false);
+  const activeSlug = store.slug ?? RASA_RASA_SLUG;
+  const isFoodstar = activeSlug === RASA_RASA_SLUG;
+  const restaurantName = isFoodstar ? 'Rasa Rasa' : 'Sage & Stone Cafe';
 
   const submissionId =
     phase.kind === 'polling' || phase.kind === 'ready' ? phase.result.submissionId : null;
@@ -116,9 +120,11 @@ export default function PreviewPage() {
 
         setPhase({ kind: 'server_processing' });
         const result = await submitSession({
-          slug: store.slug ?? 'sageandstone',
+          slug: activeSlug,
           consentAccepted: true,
           socialHandle: store.socialHandle || undefined,
+          instagramHandle: store.instagramHandle || undefined,
+          tiktokHandle: store.tiktokHandle || undefined,
           deviceKey: ensureDeviceKey(),
           tableId: store.tableId,
           sessionId: store.sessionId,
@@ -150,9 +156,11 @@ export default function PreviewPage() {
       setPhase({ kind: 'uploading' });
 
       const result = await submit({
-        slug: store.slug ?? 'sageandstone',
+        slug: activeSlug,
         consentAccepted: true,
         socialHandle: store.socialHandle || undefined,
+        instagramHandle: store.instagramHandle || undefined,
+        tiktokHandle: store.tiktokHandle || undefined,
         deviceKey: ensureDeviceKey(),
         tableId: store.tableId,
         durationSeconds: finalVideo.durationSeconds,
@@ -169,12 +177,14 @@ export default function PreviewPage() {
       });
     }
   }, [
+    activeSlug,
     router,
+    store.instagramHandle,
     store.orderedClips,
     store.sessionId,
-    store.slug,
     store.socialHandle,
     store.tableId,
+    store.tiktokHandle,
   ]);
 
   useEffect(() => {
@@ -190,13 +200,17 @@ export default function PreviewPage() {
 
   const handleApproveFinal = () => {
     if (phase.kind === 'ready') {
-      router.push(`/reward?code=${encodeURIComponent(phase.result.reward?.value ?? '')}`);
+      router.push(
+        `/reward?code=${encodeURIComponent(phase.result.reward?.value ?? '')}&slug=${encodeURIComponent(
+          activeSlug,
+        )}`,
+      );
     }
   };
 
   const handleRerecord = () => {
     recordingStore.reset();
-    router.replace(`/c/${encodeURIComponent(store.slug ?? 'sageandstone')}/record`);
+    router.replace(`/c/${encodeURIComponent(activeSlug)}/record`);
   };
 
   const isReady = phase.kind === 'ready';
@@ -261,31 +275,39 @@ export default function PreviewPage() {
 
   return (
     <MobileShell>
-      <main className="flex min-h-dvh flex-col bg-cream">
+      <main
+        className={`flex min-h-dvh flex-col ${
+          isFoodstar ? 'bg-[#0D0E0C] text-[#F8F3E7]' : 'bg-cream'
+        }`}
+      >
       <section className="flex flex-1 flex-col px-7 pt-8">
         <div className="mb-6">
           {isReady ? (
             <>
-              <div className="text-eyebrow mb-3 text-matcha">preview ready</div>
-              <h1 className="text-display text-[32px] text-ink">
+              <div className={`text-eyebrow mb-3 ${isFoodstar ? 'text-[#B8C9A8]' : 'text-matcha'}`}>preview ready</div>
+              <h1 className={`text-display text-[32px] ${isFoodstar ? 'text-[#F8F3E7]' : 'text-ink'}`}>
                 Watch your
                 <br />
-                <em className="text-matcha">finished review.</em>
+                <em className={isFoodstar ? 'text-[#F0C7A6]' : 'text-matcha'}>finished review.</em>
               </h1>
             </>
           ) : (
             <>
-              <div className="text-eyebrow mb-3 text-matcha">processing</div>
-              <h1 className="text-display text-[32px] text-ink">
+              <div className={`text-eyebrow mb-3 ${isFoodstar ? 'text-[#B8C9A8]' : 'text-matcha'}`}>processing</div>
+              <h1 className={`text-display text-[32px] ${isFoodstar ? 'text-[#F8F3E7]' : 'text-ink'}`}>
                 Saving your
                 <br />
-                <em className="text-matcha">video review.</em>
+                <em className={isFoodstar ? 'text-[#F0C7A6]' : 'text-matcha'}>video review.</em>
               </h1>
             </>
           )}
         </div>
 
-        <div className="rounded-[22px] border border-ink/10 bg-paper p-5 shadow-[0_18px_50px_rgba(42,37,32,0.12)]">
+        <div
+          className={`rounded-[8px] border p-5 shadow-[0_18px_50px_rgba(42,37,32,0.12)] ${
+            isFoodstar ? 'border-[#F8F3E7]/10 bg-[#191713]' : 'border-ink/10 bg-paper'
+          }`}
+        >
           <div className="relative mx-auto mb-5 flex aspect-[9/16] w-full max-w-[260px] items-center justify-center overflow-hidden rounded-[18px] bg-[#15120f]">
             {!isReady ? (
               <div className="flex flex-col items-center px-5 text-center">
@@ -319,10 +341,19 @@ export default function PreviewPage() {
           ) : null}
 
           {isReady ? (
-            <div className="mb-5 rounded-2xl bg-cream px-4 py-4 text-sm leading-6 text-ink/70">
-              <p>Watch the edit, then approve it for Sage & Stone Cafe to review and use.</p>
+            <div
+              className={`mb-5 rounded-[8px] px-4 py-4 text-sm leading-6 ${
+                isFoodstar ? 'bg-[#F8F3E7]/8 text-[#DAD2C4]/78' : 'bg-cream text-ink/70'
+              }`}
+            >
+              <p>Watch the edit, then approve it for {restaurantName} to review and use.</p>
               <div className="mt-3">
-                <Button onClick={handleApproveFinal}>Approve for Sage & Stone</Button>
+                <Button
+                  onClick={handleApproveFinal}
+                  className={isFoodstar ? 'bg-[#B8C9A8] text-[#151711] hover:bg-[#DDE8C8]' : undefined}
+                >
+                  Approve for {restaurantName}
+                </Button>
               </div>
             </div>
           ) : null}
@@ -331,7 +362,11 @@ export default function PreviewPage() {
             {renderSteps.map((step) => (
               <li
                 key={step.label}
-                className="flex items-center gap-3 rounded-xl border border-ink/10 bg-cream px-3.5 py-3 text-[13px] text-ink/75"
+                className={`flex items-center gap-3 rounded-[8px] border px-3.5 py-3 text-[13px] ${
+                  isFoodstar
+                    ? 'border-[#F8F3E7]/10 bg-[#F8F3E7]/7 text-[#DAD2C4]/78'
+                    : 'border-ink/10 bg-cream text-ink/75'
+                }`}
               >
                 <span
                   className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold ${

src/app/reward/page.tsx

@@ -1,75 +1,105 @@
-'use client';
-
-import { Hand } from 'lucide-react';
-import { useRouter, useSearchParams } from 'next/navigation';
+'use client';
+
+import { Hand } from 'lucide-react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { Suspense } from 'react';
 import { Button } from '@/components/Button';
 import { Confetti } from '@/components/Confetti';
 import { MobileShell } from '@/components/MobileShell';
 import { RewardCard } from '@/components/RewardCard';
-import { recordingStore } from '@/lib/recordingStore';
-
-export default function RewardPage() {
-  return (
-    <Suspense fallback={null}>
-      <RewardScreen />
-    </Suspense>
-  );
-}
-
-function RewardScreen() {
-  const router = useRouter();
-  const params = useSearchParams();
-  const code = params.get('code') || 'MATCHA-7K2Q';
-
-  const handleRestart = () => {
-    recordingStore.reset();
-    router.replace('/');
-  };
-
+import { RASA_RASA_SLUG } from '@/lib/foodstar';
+import { recordingStore } from '@/lib/recordingStore';
+
+export default function RewardPage() {
   return (
-    <MobileShell>
+    <Suspense fallback={null}>
+      <RewardScreen />
+    </Suspense>
+  );
+}
+
+function RewardScreen() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const slug = params.get('slug') || RASA_RASA_SLUG;
+  const isFoodstar = slug === RASA_RASA_SLUG;
+  const code = params.get('code') || (isFoodstar ? 'FREE-CHICKEN' : 'MATCHA-7K2Q');
+
+  const handleRestart = () => {
+    recordingStore.reset();
+    router.replace(isFoodstar ? '/' : `/c/${encodeURIComponent(slug)}`);
+  };
+
+  return (
+    <MobileShell tone={isFoodstar ? 'dark' : 'cream'}>
       <main
-      className="relative flex min-h-dvh flex-col overflow-hidden bg-cream"
-      style={{
-        backgroundImage:
-          'radial-gradient(ellipse at 50% 0%, rgba(184,201,168,0.5), transparent 60%)',
-      }}
-    >
-      <Confetti />
-
-      <section className="relative z-10 flex flex-1 flex-col items-center px-7 pt-10 text-center">
-        <div className="mb-4 animate-bounce text-[64px]">🎉</div>
-        <div className="text-eyebrow mb-2 text-matcha">submitted · thank you</div>
-        <h1 className="text-display text-[38px] text-ink">
-          You&apos;re a <em className="text-matcha">star.</em>
-        </h1>
-        <p className="mt-2.5 max-w-[300px] text-[14px] leading-[1.5] text-ink/65">
-          Your video is on its way to the team&apos;s social. Now &mdash; about that matcha.
-        </p>
-
-        <div className="my-7 w-full">
-          <RewardCard code={code} />
-        </div>
-
-        <div className="mb-4 flex items-center gap-2.5 rounded-2xl bg-sage px-5 py-3.5 text-[13px] font-semibold text-matcha-deep">
-          <Hand className="h-[18px] w-[18px]" />
-          Show this screen to your server
-        </div>
-
-        <p className="max-w-[300px] text-[11px] leading-[1.5] text-muted">
-          Want a copy of your video?{' '}
-          <span className="cursor-pointer text-matcha underline">
-            Send it to my email →
-          </span>
-        </p>
-      </section>
-
-      <footer className="relative z-10 px-7 pb-6 pt-2">
-        <Button variant="secondary" onClick={handleRestart}>
-          ↺ Restart prototype
-        </Button>
-      </footer>
+        className={`relative flex min-h-dvh flex-col overflow-hidden ${
+          isFoodstar ? 'bg-[#0D0E0C] text-[#F8F3E7]' : 'bg-cream'
+        }`}
+        style={{
+          backgroundImage: isFoodstar
+            ? 'radial-gradient(ellipse at 50% 0%, rgba(184,201,168,0.24), transparent 62%), radial-gradient(circle at 85% 78%, rgba(239,92,54,0.14), transparent 34%)'
+            : 'radial-gradient(ellipse at 50% 0%, rgba(184,201,168,0.5), transparent 60%)',
+        }}
+      >
+        <Confetti />
+
+        <section className="relative z-10 flex flex-1 flex-col items-center px-7 pt-10 text-center">
+          <div className={`text-eyebrow mb-2 ${isFoodstar ? 'text-[#B8C9A8]' : 'text-matcha'}`}>
+            submitted / thank you
+          </div>
+          <h1
+            className={`text-display text-[38px] ${
+              isFoodstar ? 'text-[#F8F3E7]' : 'text-ink'
+            }`}
+          >
+            You&apos;re a{' '}
+            <em className={isFoodstar ? 'text-[#F0C7A6]' : 'text-matcha'}>star.</em>
+          </h1>
+          <p
+            className={`mt-2.5 max-w-[300px] text-[14px] leading-[1.5] ${
+              isFoodstar ? 'text-[#DAD2C4]/72' : 'text-ink/65'
+            }`}
+          >
+            {isFoodstar
+              ? 'Your video is on its way to Rasa Rasa. Show this screen for your chicken reward.'
+              : 'Your video is on its way to the team. Now, about that matcha.'}
+          </p>
+
+          <div className="my-7 w-full">
+            <RewardCard code={code} />
+          </div>
+
+          <div
+            className={`mb-4 flex items-center gap-2.5 rounded-[8px] px-5 py-3.5 text-[13px] font-semibold ${
+              isFoodstar ? 'bg-[#B8C9A8] text-[#151711]' : 'bg-sage text-matcha-deep'
+            }`}
+          >
+            <Hand className="h-[18px] w-[18px]" />
+            Show this screen to your server
+          </div>
+
+          {isFoodstar ? null : (
+            <p className="max-w-[300px] text-[11px] leading-[1.5] text-muted">
+              Want a copy of your video?{' '}
+              <span className="cursor-pointer text-matcha underline">Send it to my email -&gt;</span>
+            </p>
+          )}
+        </section>
+
+        <footer className="relative z-10 px-7 pb-6 pt-2">
+          <Button
+            variant="secondary"
+            onClick={handleRestart}
+            className={
+              isFoodstar
+                ? 'border-[#F8F3E7]/40 text-[#F8F3E7] hover:bg-[#F8F3E7]/8'
+                : undefined
+            }
+          >
+            Restart
+          </Button>
+        </footer>
       </main>
     </MobileShell>
   );

src/app/tv/[slug]/page.tsx

@@ -0,0 +1,14 @@
+import { notFound } from 'next/navigation';
+import { FoodstarTvScreen } from '@/components/FoodstarTvScreen';
+import { getCampaignBySlug } from '@/lib/server/reviewStore';
+
+type PageProps = {
+  params: { slug: string };
+};
+
+export default function TvQrPage({ params }: PageProps) {
+  const campaign = getCampaignBySlug(params.slug);
+  if (!campaign) notFound();
+
+  return <FoodstarTvScreen slug={params.slug} restaurantName={campaign.restaurantName} />;
+}

src/components/FoodstarQr.tsx

@@ -0,0 +1,26 @@
+import QRCode from 'qrcode';
+
+type Props = {
+  value: string;
+  size?: number;
+};
+
+export async function FoodstarQr({ value, size = 356 }: Props) {
+  const svg = await QRCode.toString(value, {
+    type: 'svg',
+    width: size,
+    margin: 1,
+    errorCorrectionLevel: 'M',
+    color: {
+      dark: '#17140F',
+      light: '#F8F3E7',
+    },
+  });
+
+  return (
+    <div
+      className="overflow-hidden rounded-[7px] bg-[#F8F3E7] p-3 shadow-[0_24px_80px_rgba(0,0,0,0.26)]"
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

src/components/FoodstarTvScreen.tsx

@@ -0,0 +1,55 @@
+import { FoodstarQr } from '@/components/FoodstarQr';
+import { foodstarUrl, RASA_RASA_SLUG } from '@/lib/foodstar';
+
+type Props = {
+  slug?: string;
+  restaurantName?: string;
+};
+
+export async function FoodstarTvScreen({
+  slug = RASA_RASA_SLUG,
+  restaurantName = 'Rasa Rasa',
+}: Props) {
+  const reviewUrl = foodstarUrl(`/c/${slug}`);
+
+  return (
+    <main className="min-h-dvh overflow-hidden bg-[#0D0E0C] text-[#F8F3E7]">
+      <div className="relative flex min-h-dvh items-center justify-center px-12 py-10">
+        <div
+          className="absolute inset-0"
+          style={{
+            background:
+              'radial-gradient(circle at 22% 18%, rgba(184,201,168,0.24), transparent 28%), radial-gradient(circle at 82% 62%, rgba(239,92,54,0.18), transparent 30%), linear-gradient(135deg, #10110F 0%, #211D18 52%, #0D0E0C 100%)',
+          }}
+          aria-hidden
+        />
+
+        <section className="relative grid w-full max-w-6xl items-center gap-14 lg:grid-cols-[1.05fr_0.95fr]">
+          <div>
+            <div className="font-mono text-[13px] uppercase tracking-[0.24em] text-[#B8C9A8]">
+              foodstar.co
+            </div>
+            <h1 className="mt-5 max-w-3xl font-serif text-[72px] font-light leading-[0.98] tracking-normal text-[#F8F3E7]">
+              Scan the QR code.
+              <br />
+              Leave a review.
+            </h1>
+            <p className="mt-8 max-w-2xl text-[30px] leading-[1.2] text-[#F0C7A6]">
+              Get a free piece of chicken from {restaurantName}.
+            </p>
+            <div className="mt-9 inline-flex rounded-full border border-[#B8C9A8]/30 bg-[#B8C9A8]/12 px-6 py-3 font-mono text-[14px] uppercase tracking-[0.18em] text-[#DDE8C8]">
+              {reviewUrl}
+            </div>
+          </div>
+
+          <div className="flex flex-col items-center justify-center">
+            <FoodstarQr value={reviewUrl} size={390} />
+            <p className="mt-6 text-center font-mono text-[13px] uppercase tracking-[0.18em] text-[#F8F3E7]/62">
+              Review food for {restaurantName}
+            </p>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}

src/lib/foodstar.ts

@@ -0,0 +1,17 @@
+export const RASA_RASA_SLUG = 'rasarasa';
+export const FOODSTAR_PUBLIC_ORIGIN =
+  (process.env.NEXT_PUBLIC_FOODSTAR_PUBLIC_URL || 'https://foodstar.co').replace(/\/$/, '');
+
+export function foodstarUrl(path: string) {
+  const cleanPath = path.startsWith('/') ? path : `/${path}`;
+  return `${FOODSTAR_PUBLIC_ORIGIN}${cleanPath}`;
+}
+
+export function socialHandleSummary(instagramHandle?: string | null, tiktokHandle?: string | null) {
+  const handles = [
+    instagramHandle ? `IG ${instagramHandle}` : '',
+    tiktokHandle ? `TikTok ${tiktokHandle}` : '',
+  ].filter(Boolean);
+
+  return handles.join(' / ');
+}

src/lib/humeoApi.ts

@@ -42,6 +42,8 @@ export type SubmitInput = {
   slug: string;
   consentAccepted: boolean;
   socialHandle?: string;
+  instagramHandle?: string;
+  tiktokHandle?: string;
   deviceKey: string;
   tableId?: string | null;
   durationSeconds: number;
@@ -97,6 +99,8 @@ export async function submit(input: SubmitInput): Promise<PublicSubmitResult> {
   form.append('slug', input.slug);
   form.append('consentAccepted', input.consentAccepted ? 'true' : 'false');
   form.append('socialHandle', input.socialHandle ?? '');
+  form.append('instagramHandle', input.instagramHandle ?? '');
+  form.append('tiktokHandle', input.tiktokHandle ?? '');
   form.append('deviceKey', input.deviceKey);
   form.append('durationSeconds', String(Math.round(input.durationSeconds)));
   if (input.tableId) form.append('tableId', input.tableId);
@@ -120,6 +124,8 @@ export async function submitClips(input: SubmitClipsInput): Promise<PublicSubmit
   form.append('slug', input.slug);
   form.append('consentAccepted', input.consentAccepted ? 'true' : 'false');
   form.append('socialHandle', input.socialHandle ?? '');
+  form.append('instagramHandle', input.instagramHandle ?? '');
+  form.append('tiktokHandle', input.tiktokHandle ?? '');
   form.append('deviceKey', input.deviceKey);
   if (input.tableId) form.append('tableId', input.tableId);
 
@@ -173,6 +179,8 @@ export async function submitSession(input: SubmitSessionInput): Promise<PublicSu
   form.append('slug', input.slug);
   form.append('consentAccepted', input.consentAccepted ? 'true' : 'false');
   form.append('socialHandle', input.socialHandle ?? '');
+  form.append('instagramHandle', input.instagramHandle ?? '');
+  form.append('tiktokHandle', input.tiktokHandle ?? '');
   form.append('deviceKey', input.deviceKey);
   form.append('sessionId', input.sessionId);
   if (input.tableId) form.append('tableId', input.tableId);

src/lib/recordingStore.ts

@@ -1,16 +1,16 @@
-/**
- * Module-level store for the customer's session of recorded clips.
- *
- * Lives in memory only — survives across route navigations within a single tab,
- * doesn't survive a hard reload (and shouldn't, because the customer would have
- * to re-grant camera permission anyway).
- *
- * Browser-only. Importing on the server is a no-op.
- */
-
+/**
+ * Module-level store for the customer's session of recorded clips.
+ *
+ * Lives in memory only — survives across route navigations within a single tab,
+ * doesn't survive a hard reload (and shouldn't, because the customer would have
+ * to re-grant camera permission anyway).
+ *
+ * Browser-only. Importing on the server is a no-op.
+ */
+
 import { useEffect, useState } from 'react';
 import type { UploadedClipRef } from '@/lib/humeoApi';
-
+
 export type RecordedClip = {
   step: number;
   takeId: number;
@@ -35,6 +35,8 @@ type Snapshot = {
   clipUploadsByStep: Record<number, ClipUploadState>;
   skippedSteps: Record<number, true>;
   socialHandle: string;
+  instagramHandle: string;
+  tiktokHandle: string;
   tableId: string | null;
   slug: string | null;
   sessionId: string;
@@ -46,6 +48,8 @@ let clipUploadPromises: Record<number, { takeId: number; promise: Promise<Upload
 let takeIdsByStep: Record<number, number> = {};
 let skippedSteps: Record<number, true> = {};
 let socialHandle = '';
+let instagramHandle = '';
+let tiktokHandle = '';
 let tableId: string | null = null;
 let slug: string | null = null;
 let sessionId = newSessionId();
@@ -61,20 +65,22 @@ function newSessionId() {
 function emit() {
   for (const l of listeners) l();
 }
-
-function buildSnapshot(): Snapshot {
-  return {
+
+function buildSnapshot(): Snapshot {
+  return {
     clipsByStep,
     orderedClips: Object.values(clipsByStep).sort((a, b) => a.step - b.step),
     clipUploadsByStep,
     skippedSteps,
     socialHandle,
+    instagramHandle,
+    tiktokHandle,
     tableId,
     slug,
     sessionId,
   };
 }
-
+
 export const recordingStore = {
   setClip(clip: Omit<RecordedClip, 'takeId'>) {
     const takeId = (takeIdsByStep[clip.step] ?? 0) + 1;
@@ -155,12 +161,20 @@ export const recordingStore = {
     skippedSteps = { ...skippedSteps, [step]: true };
     emit();
   },
-  setMeta(meta: { slug?: string; tableId?: string | null; socialHandle?: string }) {
-    if (meta.slug !== undefined) slug = meta.slug;
-    if (meta.tableId !== undefined) tableId = meta.tableId;
-    if (meta.socialHandle !== undefined) socialHandle = meta.socialHandle;
-    emit();
-  },
+  setMeta(meta: {
+    slug?: string;
+    tableId?: string | null;
+    socialHandle?: string;
+    instagramHandle?: string;
+    tiktokHandle?: string;
+  }) {
+    if (meta.slug !== undefined) slug = meta.slug;
+    if (meta.tableId !== undefined) tableId = meta.tableId;
+    if (meta.socialHandle !== undefined) socialHandle = meta.socialHandle;
+    if (meta.instagramHandle !== undefined) instagramHandle = meta.instagramHandle;
+    if (meta.tiktokHandle !== undefined) tiktokHandle = meta.tiktokHandle;
+    emit();
+  },
   reset() {
     clipsByStep = {};
     clipUploadsByStep = {};
@@ -168,29 +182,31 @@ export const recordingStore = {
     takeIdsByStep = {};
     skippedSteps = {};
     socialHandle = '';
+    instagramHandle = '';
+    tiktokHandle = '';
     tableId = null;
     slug = null;
     sessionId = newSessionId();
     emit();
   },
-  snapshot(): Snapshot {
-    return buildSnapshot();
-  },
-  subscribe(listener: Listener) {
-    listeners.add(listener);
-    return () => {
-      listeners.delete(listener);
-    };
-  },
-};
-
-export function useRecordingStore(): Snapshot {
-  const [snap, setSnap] = useState<Snapshot>(() => buildSnapshot());
-  useEffect(() => {
-    const unsubscribe = recordingStore.subscribe(() => setSnap(buildSnapshot()));
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-  return snap;
-}
+  snapshot(): Snapshot {
+    return buildSnapshot();
+  },
+  subscribe(listener: Listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+};
+
+export function useRecordingStore(): Snapshot {
+  const [snap, setSnap] = useState<Snapshot>(() => buildSnapshot());
+  useEffect(() => {
+    const unsubscribe = recordingStore.subscribe(() => setSnap(buildSnapshot()));
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return snap;
+}

src/lib/reviews/types.ts

@@ -1,60 +1,60 @@
-/**
- * Review types — copied (and extended) from reference/src/lib/reviews/types.ts
- * (Humeo's source of truth). Stays aligned with whatever
- * ${NEXT_PUBLIC_HUMEO_API_URL}/api/public/reviews/* returns.
- *
- * Extensions for matcha-moments (cafe pilot):
- *   - CampaignMode: 'single_take' | 'guided_clips'
- *   - ClipPrompt: per-clip config (camera direction, hard-cap)
- *   - mode / prompts / theme fields on PublicReviewCampaign
- *
- * If Humeo's review_campaigns table doesn't yet have these columns,
- * humeoApi.getCampaign() falls back to a hardcoded prompts list.
- * See src/lib/humeoApi.ts for that fallback.
- */
-
-import { z } from 'zod';
-
-export const REVIEW_CAMPAIGN_STATUSES = ['draft', 'active', 'paused', 'archived'] as const;
-export const REVIEW_REWARD_TYPES = ['static_code', 'message_only', 'external_redirect'] as const;
-export const REVIEW_SUBMISSION_STATUSES = [
-  'opened',
-  'uploading',
-  'processing_interview',
-  'evaluating_rules',
-  'pass',
-  'fail_and_retry',
-  'reward_issued',
-  'processing_failed',
-] as const;
-
-export type ReviewCampaignStatus = (typeof REVIEW_CAMPAIGN_STATUSES)[number];
-export type ReviewRewardType = (typeof REVIEW_REWARD_TYPES)[number];
-export type ReviewSubmissionStatus = (typeof REVIEW_SUBMISSION_STATUSES)[number];
-
-export const ReviewRulesConfigSchema = z.object({
-  minDurationSeconds: z.number().int().min(0).max(600).default(8),
-  maxDurationSeconds: z.number().int().min(1).max(1200).default(90),
-  minWordCount: z.number().int().min(1).max(500).default(8),
-  requireRestaurantMention: z.boolean().default(false),
-  blockedTerms: z.array(z.string().trim().min(1).max(80)).max(100).default([]),
-});
-
-export const ReviewCampaignSettingsSchema = z.object({
-  dailyRewardLimitPerDevice: z.number().int().min(1).max(10).default(1),
-});
-
-export type ReviewRulesConfig = z.infer<typeof ReviewRulesConfigSchema>;
-export type ReviewCampaignSettings = z.infer<typeof ReviewCampaignSettingsSchema>;
-
-// === matcha-moments extensions ===
-
-export const CAMPAIGN_MODES = ['single_take', 'guided_clips'] as const;
-export type CampaignMode = (typeof CAMPAIGN_MODES)[number];
-
-export const CAMPAIGN_THEMES = ['default', 'cafe-cream'] as const;
-export type CampaignTheme = (typeof CAMPAIGN_THEMES)[number];
-
+/**
+ * Review types — copied (and extended) from reference/src/lib/reviews/types.ts
+ * (Humeo's source of truth). Stays aligned with whatever
+ * ${NEXT_PUBLIC_HUMEO_API_URL}/api/public/reviews/* returns.
+ *
+ * Extensions for matcha-moments (cafe pilot):
+ *   - CampaignMode: 'single_take' | 'guided_clips'
+ *   - ClipPrompt: per-clip config (camera direction, hard-cap)
+ *   - mode / prompts / theme fields on PublicReviewCampaign
+ *
+ * If Humeo's review_campaigns table doesn't yet have these columns,
+ * humeoApi.getCampaign() falls back to a hardcoded prompts list.
+ * See src/lib/humeoApi.ts for that fallback.
+ */
+
+import { z } from 'zod';
+
+export const REVIEW_CAMPAIGN_STATUSES = ['draft', 'active', 'paused', 'archived'] as const;
+export const REVIEW_REWARD_TYPES = ['static_code', 'message_only', 'external_redirect'] as const;
+export const REVIEW_SUBMISSION_STATUSES = [
+  'opened',
+  'uploading',
+  'processing_interview',
+  'evaluating_rules',
+  'pass',
+  'fail_and_retry',
+  'reward_issued',
+  'processing_failed',
+] as const;
+
+export type ReviewCampaignStatus = (typeof REVIEW_CAMPAIGN_STATUSES)[number];
+export type ReviewRewardType = (typeof REVIEW_REWARD_TYPES)[number];
+export type ReviewSubmissionStatus = (typeof REVIEW_SUBMISSION_STATUSES)[number];
+
+export const ReviewRulesConfigSchema = z.object({
+  minDurationSeconds: z.number().int().min(0).max(600).default(8),
+  maxDurationSeconds: z.number().int().min(1).max(1200).default(90),
+  minWordCount: z.number().int().min(1).max(500).default(8),
+  requireRestaurantMention: z.boolean().default(false),
+  blockedTerms: z.array(z.string().trim().min(1).max(80)).max(100).default([]),
+});
+
+export const ReviewCampaignSettingsSchema = z.object({
+  dailyRewardLimitPerDevice: z.number().int().min(1).max(10).default(1),
+});
+
+export type ReviewRulesConfig = z.infer<typeof ReviewRulesConfigSchema>;
+export type ReviewCampaignSettings = z.infer<typeof ReviewCampaignSettingsSchema>;
+
+// === matcha-moments extensions ===
+
+export const CAMPAIGN_MODES = ['single_take', 'guided_clips'] as const;
+export type CampaignMode = (typeof CAMPAIGN_MODES)[number];
+
+export const CAMPAIGN_THEMES = ['default', 'cafe-cream', 'foodstar-humeo'] as const;
+export type CampaignTheme = (typeof CAMPAIGN_THEMES)[number];
+
 export const ClipPromptSchema = z.object({
   step: z.number().int().min(1).max(20),
   title: z.string().trim().min(1).max(160),
@@ -64,27 +64,31 @@ export const ClipPromptSchema = z.object({
   maxSeconds: z.number().int().min(1).max(60).default(10),
   optional: z.boolean().default(false),
 });
-export type ClipPrompt = z.infer<typeof ClipPromptSchema>;
-
-// === Public API contract ===
-
-export type PublicReviewCampaign = {
-  id: string;
-  slug: string;
-  restaurantName: string;
-  status: ReviewCampaignStatus;
-  rulesConfig: ReviewRulesConfig;
-  settings: ReviewCampaignSettings;
-
-  // matcha-moments extensions; safe defaults if Humeo BE doesn't return them yet.
-  mode: CampaignMode;
-  prompts: ClipPrompt[];
-  rewardType: ReviewRewardType;
-  rewardValue: string | null;
-  theme: CampaignTheme;
-  accentColor?: string;
-};
-
+export type ClipPrompt = z.infer<typeof ClipPromptSchema>;
+
+// === Public API contract ===
+
+export type PublicReviewCampaign = {
+  id: string;
+  slug: string;
+  restaurantName: string;
+  status: ReviewCampaignStatus;
+  rulesConfig: ReviewRulesConfig;
+  settings: ReviewCampaignSettings;
+
+  // matcha-moments extensions; safe defaults if Humeo BE doesn't return them yet.
+  mode: CampaignMode;
+  prompts: ClipPrompt[];
+  rewardType: ReviewRewardType;
+  rewardValue: string | null;
+  theme: CampaignTheme;
+  accentColor?: string;
+  publicUrl?: string;
+  offerHeadline?: string;
+  offerDetail?: string;
+  startCta?: string;
+};
+
 export type PublicSubmitResult = {
   submissionId: string;
   interviewId?: string;
@@ -96,19 +100,19 @@ export type PublicSubmitResult = {
   previewUrl?: string;
   updatedAt: string;
 };
-
-export const POLLING_SUBMISSION_STATUSES = new Set<ReviewSubmissionStatus>([
-  'opened',
-  'uploading',
-  'processing_interview',
-  'evaluating_rules',
-  'fail_and_retry',
-]);
-
-export function normalizeReviewRulesConfig(value: unknown): ReviewRulesConfig {
-  return ReviewRulesConfigSchema.parse(value ?? {});
-}
-
-export function normalizeReviewCampaignSettings(value: unknown): ReviewCampaignSettings {
-  return ReviewCampaignSettingsSchema.parse(value ?? {});
-}
+
+export const POLLING_SUBMISSION_STATUSES = new Set<ReviewSubmissionStatus>([
+  'opened',
+  'uploading',
+  'processing_interview',
+  'evaluating_rules',
+  'fail_and_retry',
+]);
+
+export function normalizeReviewRulesConfig(value: unknown): ReviewRulesConfig {
+  return ReviewRulesConfigSchema.parse(value ?? {});
+}
+
+export function normalizeReviewCampaignSettings(value: unknown): ReviewCampaignSettings {
+  return ReviewCampaignSettingsSchema.parse(value ?? {});
+}

src/lib/server/reviewStore.ts

@@ -8,6 +8,7 @@ import type {
   ReviewRewardType,
   ReviewSubmissionStatus,
 } from '@/lib/reviews/types';
+import { foodstarUrl, RASA_RASA_SLUG, socialHandleSummary } from '@/lib/foodstar';
 
 /**
  * Review store for the standalone prototype.
@@ -30,6 +31,8 @@ export type LocalSubmission = {
   reasons: string[];
   consentAccepted: boolean;
   socialHandle: string | null;
+  instagramHandle: string | null;
+  tiktokHandle: string | null;
   deviceKey: string | null;
   tableId: string | null;
   durationSeconds: number;
@@ -143,6 +146,76 @@ const SAGE_AND_STONE: PublicReviewCampaign = {
   theme: 'cafe-cream',
 };
 
+const RASA_RASA: PublicReviewCampaign = {
+  id: 'rasa-rasa-foodstar',
+  slug: RASA_RASA_SLUG,
+  restaurantName: 'Rasa Rasa',
+  status: 'active',
+  rulesConfig: {
+    minDurationSeconds: 8,
+    maxDurationSeconds: 90,
+    minWordCount: 8,
+    requireRestaurantMention: false,
+    blockedTerms: [],
+  },
+  settings: { dailyRewardLimitPerDevice: 1 },
+  mode: 'guided_clips',
+  prompts: [
+    {
+      step: 1,
+      title: 'What dish / drink did you order?',
+      tip: 'Voice only. Say the name of the dish or drink clearly.',
+      mediaType: 'audio',
+      camera: 'front',
+      maxSeconds: 10,
+      optional: false,
+    },
+    {
+      step: 2,
+      title: 'What did you like about it?',
+      tip: 'Tell us the flavor, crunch, sauce, texture, or anything you loved.',
+      mediaType: 'audio',
+      camera: 'front',
+      maxSeconds: 10,
+      optional: false,
+    },
+    {
+      step: 3,
+      title: 'Record a close up shot of the food.',
+      tip: 'Move slowly across the crisp edges, sauce, steam, and texture.',
+      mediaType: 'video',
+      camera: 'rear',
+      maxSeconds: 10,
+      optional: false,
+    },
+    {
+      step: 4,
+      title: 'Record a table shot of the food.',
+      tip: 'Show the dish on the table so the whole plate feels clear.',
+      mediaType: 'video',
+      camera: 'rear',
+      maxSeconds: 10,
+      optional: false,
+    },
+    {
+      step: 5,
+      title: 'Record an action shot.',
+      tip: 'Take a bite, pull it apart, dip it, stir it, or show a reaction.',
+      mediaType: 'video',
+      camera: 'rear',
+      maxSeconds: 10,
+      optional: false,
+    },
+  ],
+  rewardType: 'static_code',
+  rewardValue: 'FREE-CHICKEN',
+  theme: 'foodstar-humeo',
+  publicUrl: foodstarUrl(`/c/${RASA_RASA_SLUG}`),
+  offerHeadline: 'Leave a review, get a free piece of chicken.',
+  offerDetail: 'Scan the QR, record a quick food review for Rasa Rasa, then show the reward screen to the team.',
+  startCta: 'Start food review',
+};
+
 let supabaseAdmin: SupabaseClient | null = null;
 let bucketReady = false;
 let envFileCache: Record<string, string> | null = null;
@@ -254,8 +327,13 @@ function isLocalSubmission(value: unknown): value is LocalSubmission {
 }
 
 function normalizeSubmission(value: LocalSubmission): LocalSubmission {
+  const instagramHandle = value.instagramHandle ?? null;
+  const tiktokHandle = value.tiktokHandle ?? null;
   return {
     ...value,
+    instagramHandle,
+    tiktokHandle,
+    socialHandle: value.socialHandle ?? (socialHandleSummary(instagramHandle, tiktokHandle) || null),
     storageBackend: value.storageBackend ?? 'local',
   };
 }
@@ -263,6 +341,7 @@ function normalizeSubmission(value: LocalSubmission): LocalSubmission {
 function createState(): StoreState {
   const campaigns = new Map<string, PublicReviewCampaign>();
   campaigns.set(SAGE_AND_STONE.slug, SAGE_AND_STONE);
+  campaigns.set(RASA_RASA.slug, RASA_RASA);
 
   const submissions = new Map<string, LocalSubmission>();
   for (const submission of readPersistedSubmissions()) {
@@ -279,6 +358,7 @@ const globalForStore = globalThis as unknown as {
 
 const state = globalForStore.__matchaReviewStore ?? createState();
 state.campaigns.set(SAGE_AND_STONE.slug, SAGE_AND_STONE);
+state.campaigns.set(RASA_RASA.slug, RASA_RASA);
 for (const [id, submission] of state.submissions.entries()) {
   if (!isLocalSubmission(submission)) {
     state.submissions.delete(id);
@@ -491,7 +571,10 @@ function advanceSubmission(submission: LocalSubmission) {
   if (submission.status === 'evaluating_rules' && elapsed >= 4000) {
     submission.status = 'reward_issued';
     submission.decision = 'pass';
-    submission.feedback = 'Office prototype approved. Show the matcha code to staff.';
+    submission.feedback =
+      campaign.slug === RASA_RASA_SLUG
+        ? 'Approved. Show the chicken reward screen to the Rasa Rasa team.'
+        : 'Office prototype approved. Show the matcha code to staff.';
     submission.reward = {
       type: campaign.rewardType,
       value: campaign.rewardValue ?? rewardCode(),
@@ -510,6 +593,8 @@ export type CreateSubmissionInput = {
   slug: string;
   consentAccepted: boolean;
   socialHandle?: string | null;
+  instagramHandle?: string | null;
+  tiktokHandle?: string | null;
   deviceKey?: string | null;
   tableId?: string | null;
   durationSeconds: number;
@@ -574,6 +659,8 @@ export async function createSubmission(input: CreateSubmissionInput):
   }
 
   const now = new Date().toISOString();
+  const instagramHandle = input.instagramHandle?.trim() || null;
+  const tiktokHandle = input.tiktokHandle?.trim() || null;
   const submission: LocalSubmission = {
     submissionId,
     interviewId,
@@ -584,7 +671,10 @@ export async function createSubmission(input: CreateSubmissionInput):
     reward: null,
     reasons: [],
     consentAccepted: input.consentAccepted,
-    socialHandle: input.socialHandle?.trim() || null,
+    socialHandle:
+      input.socialHandle?.trim() || socialHandleSummary(instagramHandle, tiktokHandle) || null,
+    instagramHandle,
+    tiktokHandle,
     deviceKey: input.deviceKey?.trim() || null,
     tableId: input.tableId?.trim() || null,
     durationSeconds: Math.max(0, Math.round(input.durationSeconds)),