Move Foodstar handles to reward

src/app/api/public/reviews/submission/[submissionId]/route.ts

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import {
   getSubmission,
   toPublicSubmitResult,
+  updateSubmissionSocialHandles,
 } from '@/lib/server/reviewStore';
 
 export const dynamic = 'force-dynamic';
@@ -9,11 +10,17 @@ export const runtime = 'nodejs';
 
 type Params = { params: { submissionId: string } };
 
-const sanitizeText = (value: string | null, max = 200) => {
+const sanitizeText = (value: unknown, max = 200) => {
   if (typeof value !== 'string') return '';
   return value.trim().slice(0, max);
 };
 
+function normalizeHandle(value: unknown) {
+  const trimmed = sanitizeText(value, 80);
+  if (!trimmed) return null;
+  return trimmed.startsWith('@') ? trimmed : `@${trimmed}`;
+}
+
 /**
  * GET /api/public/reviews/submission/[submissionId]?slug=…
  *
@@ -33,3 +40,27 @@ export async function GET(req: NextRequest, { params }: Params) {
 
   return NextResponse.json({ submission: toPublicSubmitResult(result.submission) });
 }
+
+export async function PATCH(req: NextRequest, { params }: Params) {
+  const body = (await req.json().catch(() => ({}))) as {
+    slug?: unknown;
+    instagramHandle?: unknown;
+    tiktokHandle?: unknown;
+  };
+  const slug = sanitizeText(body.slug, 120);
+  if (!slug) {
+    return NextResponse.json({ error: 'Missing campaign slug' }, { status: 400 });
+  }
+
+  const result = await updateSubmissionSocialHandles({
+    submissionId: params.submissionId,
+    slug,
+    instagramHandle: normalizeHandle(body.instagramHandle),
+    tiktokHandle: normalizeHandle(body.tiktokHandle),
+  });
+  if (!result.ok) {
+    return NextResponse.json({ error: result.error }, { status: result.status });
+  }
+
+  return NextResponse.json({ submission: toPublicSubmitResult(result.submission) });
+}

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

@@ -6,7 +6,6 @@ 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 = {
@@ -18,8 +17,6 @@ type Props = {
 export function LandingClient({ slug, tableId, campaign }: Props) {
   const router = useRouter();
   const [consentAccepted, setConsentAccepted] = useState(false);
-  const [instagramHandle, setInstagramHandle] = useState('');
-  const [tiktokHandle, setTiktokHandle] = useState('');
   const isFoodstar = campaign.theme === 'foodstar-humeo';
 
   useEffect(() => {
@@ -28,15 +25,6 @@ export function LandingClient({ slug, tableId, campaign }: Props) {
 
   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}`);
@@ -74,33 +62,7 @@ export function LandingClient({ slug, tableId, campaign }: Props) {
               </p>
             </div>
 
-            <div className="mt-6 rounded-[8px] border border-[#706A5E] bg-[#15130F] p-4 shadow-[inset_0_1px_0_rgba(248,243,231,0.06)] [@media(max-height:740px)]:mt-4 [@media(max-height:740px)]:p-3">
-              <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-[#AEB9A0]">
-                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-[#3D392F] bg-[#201E18] px-4 text-[14px] text-[#DCD4C4] outline-none selection:bg-[#A9B898] selection:text-[#12130F] placeholder:text-[#81796A] focus:border-[#9EAD8E] focus:bg-[#232018]"
-                  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-[#3D392F] bg-[#201E18] px-4 text-[14px] text-[#DCD4C4] outline-none selection:bg-[#A9B898] selection:text-[#12130F] placeholder:text-[#81796A] focus:border-[#9EAD8E] focus:bg-[#232018]"
-                  autoCapitalize="none"
-                  autoCorrect="off"
-                  inputMode="text"
-                />
-              </div>
-            </div>
-
-            <label className="mt-4 flex cursor-pointer items-start gap-3 rounded-[8px] border border-[#3D392F] bg-[#15130F] px-4 py-3 text-left">
+            <label className="mt-8 flex cursor-pointer items-start gap-3 rounded-[8px] border border-[#3D392F] bg-[#15130F] px-4 py-3 text-left">
               <input
                 type="checkbox"
                 checked={consentAccepted}
@@ -201,9 +163,3 @@ 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/preview/page.tsx

@@ -48,7 +48,7 @@ export default function PreviewPage() {
   const submissionId =
     phase.kind === 'polling' || phase.kind === 'ready' ? phase.result.submissionId : null;
 
-  const { result: pollResult } = useSubmissionPolling(submissionId, store.slug, 1500);
+  const { result: pollResult } = useSubmissionPolling(submissionId, activeSlug, 1500);
 
   useEffect(() => {
     if (!pollResult) return;
@@ -122,9 +122,6 @@ export default function PreviewPage() {
         const result = await submitSession({
           slug: activeSlug,
           consentAccepted: true,
-          socialHandle: store.socialHandle || undefined,
-          instagramHandle: store.instagramHandle || undefined,
-          tiktokHandle: store.tiktokHandle || undefined,
           deviceKey: ensureDeviceKey(),
           tableId: store.tableId,
           sessionId: store.sessionId,
@@ -158,9 +155,6 @@ export default function PreviewPage() {
       const result = await submit({
         slug: activeSlug,
         consentAccepted: true,
-        socialHandle: store.socialHandle || undefined,
-        instagramHandle: store.instagramHandle || undefined,
-        tiktokHandle: store.tiktokHandle || undefined,
         deviceKey: ensureDeviceKey(),
         tableId: store.tableId,
         durationSeconds: finalVideo.durationSeconds,
@@ -179,12 +173,9 @@ export default function PreviewPage() {
   }, [
     activeSlug,
     router,
-    store.instagramHandle,
     store.orderedClips,
     store.sessionId,
-    store.socialHandle,
     store.tableId,
-    store.tiktokHandle,
   ]);
 
   useEffect(() => {
@@ -201,7 +192,9 @@ export default function PreviewPage() {
   const handleApproveFinal = () => {
     if (phase.kind === 'ready') {
       router.push(
-        `/reward?code=${encodeURIComponent(phase.result.reward?.value ?? '')}&slug=${encodeURIComponent(
+        `/reward?code=${encodeURIComponent(phase.result.reward?.value ?? '')}&submissionId=${encodeURIComponent(
+          phase.result.submissionId,
+        )}&slug=${encodeURIComponent(
           activeSlug,
         )}`,
       );

src/app/reward/page.tsx

@@ -2,11 +2,12 @@
 
 import { Hand } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { Suspense } from 'react';
+import { Suspense, useState } from 'react';
 import { Button } from '@/components/Button';
 import { Confetti } from '@/components/Confetti';
 import { MobileShell } from '@/components/MobileShell';
 import { RewardCard } from '@/components/RewardCard';
+import { updateSubmissionHandles } from '@/lib/humeoApi';
 import { RASA_RASA_SLUG } from '@/lib/foodstar';
 import { recordingStore } from '@/lib/recordingStore';
 
@@ -24,12 +25,33 @@ function RewardScreen() {
   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 submissionId = params.get('submissionId') || '';
+  const [instagramHandle, setInstagramHandle] = useState('');
+  const [tiktokHandle, setTiktokHandle] = useState('');
+  const [tagStatus, setTagStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
 
   const handleRestart = () => {
     recordingStore.reset();
     router.replace(isFoodstar ? '/' : `/c/${encodeURIComponent(slug)}`);
   };
 
+  const handleSaveHandles = async () => {
+    if (!submissionId || tagStatus === 'saving') return;
+
+    setTagStatus('saving');
+    try {
+      await updateSubmissionHandles({
+        slug,
+        submissionId,
+        instagramHandle: normalizeHandle(instagramHandle),
+        tiktokHandle: normalizeHandle(tiktokHandle),
+      });
+      setTagStatus('saved');
+    } catch {
+      setTagStatus('error');
+    }
+  };
+
   return (
     <MobileShell tone={isFoodstar ? 'dark' : 'cream'}>
       <main
@@ -44,7 +66,7 @@ function RewardScreen() {
       >
         <Confetti />
 
-        <section className="relative z-10 flex flex-1 flex-col items-center px-7 pt-10 text-center">
+        <section className="relative z-10 flex flex-1 flex-col items-center px-7 pt-9 text-center">
           <div className={`text-eyebrow mb-2 ${isFoodstar ? 'text-[#B8C9A8]' : 'text-matcha'}`}>
             submitted / thank you
           </div>
@@ -66,7 +88,7 @@ function RewardScreen() {
               : 'Your video is on its way to the team. Now, about that matcha.'}
           </p>
 
-          <div className="my-7 w-full">
+          <div className="my-6 w-full">
             <RewardCard code={code} />
           </div>
 
@@ -79,7 +101,55 @@ function RewardScreen() {
             Show this screen to your server
           </div>
 
-          {isFoodstar ? null : (
+          {isFoodstar ? (
+            <div className="w-full rounded-[8px] border border-[#3D392F] bg-[#15130F] p-4 text-left shadow-[inset_0_1px_0_rgba(248,243,231,0.06)]">
+              <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-[#AEB9A0]">
+                Tag me optional
+              </div>
+              <div className="mt-3 grid gap-2.5">
+                <input
+                  value={instagramHandle}
+                  onChange={(event) => {
+                    setInstagramHandle(event.target.value);
+                    if (tagStatus !== 'idle') setTagStatus('idle');
+                  }}
+                  placeholder="Instagram handle"
+                  className="h-12 rounded-full border border-[#3D392F] bg-[#201E18] px-4 text-[14px] text-[#DCD4C4] outline-none selection:bg-[#A9B898] selection:text-[#12130F] placeholder:text-[#81796A] focus:border-[#9EAD8E] focus:bg-[#232018]"
+                  autoCapitalize="none"
+                  autoCorrect="off"
+                  inputMode="text"
+                />
+                <input
+                  value={tiktokHandle}
+                  onChange={(event) => {
+                    setTiktokHandle(event.target.value);
+                    if (tagStatus !== 'idle') setTagStatus('idle');
+                  }}
+                  placeholder="TikTok handle"
+                  className="h-12 rounded-full border border-[#3D392F] bg-[#201E18] px-4 text-[14px] text-[#DCD4C4] outline-none selection:bg-[#A9B898] selection:text-[#12130F] placeholder:text-[#81796A] focus:border-[#9EAD8E] focus:bg-[#232018]"
+                  autoCapitalize="none"
+                  autoCorrect="off"
+                  inputMode="text"
+                />
+              </div>
+              <button
+                type="button"
+                onClick={handleSaveHandles}
+                disabled={!submissionId || tagStatus === 'saving'}
+                className="mt-3 h-11 w-full rounded-full bg-[#A9B898] px-4 text-[13px] font-semibold text-[#151711] transition hover:bg-[#C6D1B8] disabled:cursor-not-allowed disabled:opacity-55"
+              >
+                {tagStatus === 'saving' ? 'Saving handles...' : 'Save tag handles'}
+              </button>
+              {tagStatus === 'saved' ? (
+                <p className="mt-2 text-center text-[12px] text-[#AEB9A0]">Handles saved.</p>
+              ) : null}
+              {tagStatus === 'error' ? (
+                <p className="mt-2 text-center text-[12px] text-[#D7B89A]">
+                  Video is saved. Handles did not update.
+                </p>
+              ) : null}
+            </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 -&gt;</span>
@@ -104,3 +174,9 @@ function RewardScreen() {
     </MobileShell>
   );
 }
+
+function normalizeHandle(value: string) {
+  const trimmed = value.trim();
+  if (!trimmed) return '';
+  return trimmed.startsWith('@') ? trimmed : `@${trimmed}`;
+}

src/lib/humeoApi.ts

@@ -94,6 +94,13 @@ export type SubmitSessionInput = Omit<
   }>;
 };
 
+export type UpdateSubmissionHandlesInput = {
+  slug: string;
+  submissionId: string;
+  instagramHandle?: string;
+  tiktokHandle?: string;
+};
+
 export async function submit(input: SubmitInput): Promise<PublicSubmitResult> {
   const form = new FormData();
   form.append('slug', input.slug);
@@ -222,4 +229,28 @@ export async function getSubmission(
   return body.submission;
 }
 
+export async function updateSubmissionHandles(
+  input: UpdateSubmissionHandlesInput,
+): Promise<PublicSubmitResult> {
+  const res = await fetch(
+    endpoint(`/api/public/reviews/submission/${encodeURIComponent(input.submissionId)}`),
+    {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        slug: input.slug,
+        instagramHandle: input.instagramHandle ?? '',
+        tiktokHandle: input.tiktokHandle ?? '',
+      }),
+    },
+  );
+
+  const body = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    throw new Error((body as { error?: string }).error || `Handle update failed (${res.status})`);
+  }
+
+  return (body as { submission: PublicSubmitResult }).submission;
+}
+
 export { POLLING_SUBMISSION_STATUSES };

src/lib/server/reviewStore.ts

@@ -720,6 +720,39 @@ export async function getSubmission(
   return { ok: true, submission };
 }
 
+export async function updateSubmissionSocialHandles(input: {
+  submissionId: string;
+  slug: string;
+  instagramHandle?: string | null;
+  tiktokHandle?: string | null;
+}): Promise<
+  | { ok: true; submission: LocalSubmission }
+  | { ok: false; status: number; error: string }
+> {
+  const campaign = getCampaignBySlug(input.slug);
+  if (!campaign) return { ok: false, status: 404, error: 'Campaign not found' };
+
+  const client = getSupabaseAdmin();
+  const submission =
+    (client ? await loadSupabaseSubmission(client, input.submissionId) : null) ??
+    state.submissions.get(input.submissionId);
+
+  if (!submission || submission.campaignSlug !== input.slug) {
+    return { ok: false, status: 404, error: 'Submission not found' };
+  }
+
+  const instagramHandle = input.instagramHandle?.trim() || null;
+  const tiktokHandle = input.tiktokHandle?.trim() || null;
+  submission.instagramHandle = instagramHandle;
+  submission.tiktokHandle = tiktokHandle;
+  submission.socialHandle = socialHandleSummary(instagramHandle, tiktokHandle) || null;
+  submission.updatedAt = new Date().toISOString();
+
+  await persistSubmission(submission);
+
+  return { ok: true, submission };
+}
+
 export async function listAdminReviewSubmissions(): Promise<AdminReviewSubmission[]> {
   const client = getSupabaseAdmin();
   const supabaseSubmissions = client ? await listSupabaseSubmissions(client) : [];