@scalebun-release/react-native 2.5.0

package/src/features/engage/EngagePromptView.tsx

@@ -0,0 +1,1400 @@
+/**
+ * ScaleBun SDK — Engage Prompt View (shared cross-platform JS overlay, D4)
+ *
+ * The ONE reusable campaign renderer. It is parameterized by config (Open/Closed):
+ * a `PROMPT_RENDERERS` registry maps an `EngageCampaignType` to a render branch.
+ * NPS is implemented now; ratings/feedback/survey plug in later as ADDITIONAL
+ * entries in that registry — NOT four copies of this overlay.
+ *
+ * The view is presentation-minimal but real (a genuine 0–10 NPS selector + an
+ * optional reason field). It is fully controlled: it owns no transport/throttle
+ * logic — it raises `onSubmit(result)` / `onDismiss()` and the provider wires
+ * those to `facade.engage.submitResponse` / `facade.engage.trackEvent`.
+ */
+
+import React, { useEffect, useRef, useState, type ReactElement } from 'react';
+import {
+    ActivityIndicator,
+    Modal,
+    View,
+    Text,
+    TextInput,
+    Pressable,
+    type ViewStyle,
+    type TextStyle,
+} from 'react-native';
+import type {
+    EngageAttachmentDraft,
+    EngageCampaignConfig,
+    EngageCampaignType,
+    QuestionSpec,
+    SurveyAnswer,
+} from './engageTypes';
+import { captureScreenshotAttachment } from './attachmentCapture';
+import {
+    startVoiceAttachment,
+    stopVoiceAttachment,
+    cancelVoiceAttachment,
+    VOICE_MAX_DURATION_MS,
+} from './captureVoiceAttachment';
+import type { SubmitStage } from './EngageTransport';
+
+/**
+ * [Slice D5] The ONE submit state machine status, shared by EVERY question type.
+ * The overlay renders from this — bespoke per-type submit UIs are not allowed.
+ */
+export type EngageSubmitStatus =
+    | { phase: 'idle' }
+    | { phase: 'submitting'; stage: SubmitStage }
+    | { phase: 'success' }
+    | { phase: 'error'; message?: string };
+
+/** How a RATING_PROMPT star selection should be routed by the host app. */
+export type RatingRoute = 'store' | 'feedback' | 'submit';
+
+/** Normalized result a prompt branch raises on submit. */
+export interface EngagePromptResult {
+    /** Selected numeric value (NPS 0–10 / CSAT 1–5 / RATING_PROMPT 1–5 stars). */
+    score?: number;
+    /** Optional free-text follow-up (NPS reason / feedback body). */
+    reason?: string;
+    /** Optional categorization tags (FEEDBACK). */
+    tags?: string[];
+    /** Per-question answers (SURVEY multi-question). */
+    answers?: SurveyAnswer[];
+    /** [P3-e] Native attachments captured in the prompt (screenshot/voice). */
+    attachments?: EngageAttachmentDraft[];
+    /**
+     * For RATING_PROMPT: how the provider should route this rating. `store` =
+     * high rating → app-store deeplink; `feedback` = low rating → feedback form;
+     * `submit` = record only. The provider, not the view, owns the side effect.
+     */
+    route?: RatingRoute;
+}
+
+/** Props every prompt-type render branch receives (the Open/Closed contract). */
+export interface PromptBranchProps {
+    campaign: EngageCampaignConfig;
+    onSubmit: (result: EngagePromptResult) => void;
+    onDismiss: () => void;
+    onStart?: () => void;
+    /**
+     * RATING_PROMPT routing config (host-app supplied, never hardcoded). The star
+     * branch reads `highRatingThreshold` to decide store vs feedback routing.
+     */
+    rating?: RatingPromptConfig;
+}
+
+/** Host-app-supplied RATING_PROMPT routing config (deeplink is NEVER hardcoded). */
+export interface RatingPromptConfig {
+    /** Ratings >= this go to the app-store route; below go to feedback. Default 4. */
+    highRatingThreshold?: number;
+    /** Whether a low rating routes to the in-app feedback form (else just submits). */
+    routeLowToFeedback?: boolean;
+}
+
+/** A render branch for one campaign type. Add entries to extend the renderer. */
+export type PromptRenderer = (props: PromptBranchProps) => ReactElement | null;
+
+// ─── NPS render branch (0–10 scale + optional reason) ────────────────────────
+
+function NpsPrompt({ campaign, onSubmit, onDismiss, onStart }: PromptBranchProps): ReactElement {
+    const [score, setScore] = useState<number | null>(null);
+    const [reason, setReason] = useState('');
+
+    // NPS scale is 0..scale (default 10 per contract §1.5). Config drives the range.
+    const max = typeof campaign.scale === 'number' && campaign.scale > 0 ? campaign.scale : 10;
+    const points: number[] = [];
+    for (let i = 0; i <= max; i += 1) points.push(i);
+
+    return (
+        <View style={styles.card}>
+            <Text style={styles.question}>{campaign.question}</Text>
+
+            <View style={styles.scaleRow}>
+                {points.map((n) => {
+                    const selected = score === n;
+                    return (
+                        <Pressable
+                            key={n}
+                            accessibilityRole="button"
+                            accessibilityLabel={`Score ${n}`}
+                            onPress={() => { onStart?.(); setScore(n); }}
+                            style={[styles.scaleCell, selected ? styles.scaleCellSelected : null]}
+                        >
+                            <Text style={[styles.scaleText, selected ? styles.scaleTextSelected : null]}>
+                                {n}
+                            </Text>
+                        </Pressable>
+                    );
+                })}
+            </View>
+
+            <View style={styles.scaleLabels}>
+                <Text style={styles.scaleLabelText}>Not likely</Text>
+                <Text style={styles.scaleLabelText}>Very likely</Text>
+            </View>
+
+            <TextInput
+                style={styles.reasonInput}
+                placeholder="What's the main reason for your score? (optional)"
+                placeholderTextColor="#9097A3"
+                value={reason}
+                onChangeText={(value) => { onStart?.(); setReason(value); }}
+                multiline
+            />
+
+            <View style={styles.actions}>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Dismiss"
+                    onPress={onDismiss}
+                    style={styles.dismissBtn}
+                >
+                    <Text style={styles.dismissText}>Not now</Text>
+                </Pressable>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Submit"
+                    disabled={score === null}
+                    onPress={() =>
+                        score !== null
+                            ? onSubmit({ score, reason: reason.trim() || undefined })
+                            : undefined
+                    }
+                    style={[styles.submitBtn, score === null ? styles.submitBtnDisabled : null]}
+                >
+                    <Text style={styles.submitText}>Submit</Text>
+                </Pressable>
+            </View>
+        </View>
+    );
+}
+
+// ─── RATING_PROMPT render branch (1–5 stars → store deeplink / feedback) ─────
+// On submit the branch does NOT itself open any store URL — it raises a `route`
+// (`store` for a high rating, `feedback`/`submit` for a low one) and the provider
+// hands off to the host-app callback. The deeplink is never hardcoded here.
+
+function RatingPrompt({ campaign, onSubmit, onDismiss, onStart, rating }: PromptBranchProps): ReactElement {
+    const [stars, setStars] = useState<number | null>(null);
+
+    const threshold =
+        typeof campaign.highRatingThreshold === 'number' && campaign.highRatingThreshold > 0
+            ? campaign.highRatingThreshold
+            : typeof rating?.highRatingThreshold === 'number' && rating.highRatingThreshold > 0
+            ? rating.highRatingThreshold
+            : 4;
+    const lowToFeedback = campaign.routeLowToFeedback ?? rating?.routeLowToFeedback ?? false;
+    const STARS = [1, 2, 3, 4, 5];
+
+    return (
+        <View style={styles.card}>
+            <Text style={styles.question}>{campaign.question}</Text>
+
+            <View style={styles.starsRow}>
+                {STARS.map((n) => {
+                    const filled = stars !== null && n <= stars;
+                    return (
+                        <Pressable
+                            key={n}
+                            accessibilityRole="button"
+                            accessibilityLabel={`${n} star${n > 1 ? 's' : ''}`}
+                            onPress={() => { onStart?.(); setStars(n); }}
+                            style={styles.starCell}
+                        >
+                            <Text style={[styles.star, filled ? styles.starFilled : null]}>
+                                {filled ? '★' : '☆'}
+                            </Text>
+                        </Pressable>
+                    );
+                })}
+            </View>
+
+            <View style={styles.actions}>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Dismiss"
+                    onPress={onDismiss}
+                    style={styles.dismissBtn}
+                >
+                    <Text style={styles.dismissText}>Not now</Text>
+                </Pressable>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Submit rating"
+                    disabled={stars === null}
+                    onPress={() => {
+                        if (stars === null) return;
+                        const route: RatingRoute =
+                            stars >= threshold ? 'store' : lowToFeedback ? 'feedback' : 'submit';
+                        onSubmit({ score: stars, route });
+                    }}
+                    style={[styles.submitBtn, stars === null ? styles.submitBtnDisabled : null]}
+                >
+                    <Text style={styles.submitText}>Submit</Text>
+                </Pressable>
+            </View>
+        </View>
+    );
+}
+
+// ─── FEEDBACK render branch (free text + optional category/tags) ─────────────
+
+function FeedbackPrompt(props: PromptBranchProps): ReactElement {
+    // A FEEDBACK campaign authored with structured questions (voice, scale, emoji,
+    // screenshot, multiple prompts) IS a survey — this branch only knows how to draw
+    // one text box plus category chips, and used to silently render a voice question
+    // as text (found live: "it was supposed to be a voice input but showed text").
+    // Anything beyond chips delegates to the full survey renderer, which owns the
+    // record → transcribe → approve voice flow.
+    const structured = (props.campaign.questions ?? []).some(
+        (q) => q.kind !== 'choice' && q.kind !== 'single' && q.kind !== 'multi',
+    );
+    if (structured) return <SurveyPrompt {...props} />;
+    return <FeedbackTextPrompt {...props} />;
+}
+
+function FeedbackTextPrompt({ campaign, onSubmit, onDismiss, onStart }: PromptBranchProps): ReactElement {
+    const [text, setText] = useState('');
+    const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+    // Categories come from the campaign's first `choice`-style question (optional).
+    const categoryQuestion = (campaign.questions ?? []).find(
+        (q) => q.kind === 'choice' || q.kind === 'single' || q.kind === 'multi',
+    );
+    const categories = categoryQuestion?.choices ?? [];
+
+    const toggleTag = (tag: string): void => {
+        onStart?.();
+        setSelectedTags((prev) =>
+            prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],
+        );
+    };
+
+    return (
+        <View style={styles.card}>
+            <Text style={styles.question}>{campaign.question}</Text>
+
+            {categories.length > 0 ? (
+                <View style={styles.chipsRow}>
+                    {categories.map((cat) => {
+                        const on = selectedTags.includes(cat);
+                        return (
+                            <Pressable
+                                key={cat}
+                                accessibilityRole="button"
+                                accessibilityLabel={`Tag ${cat}`}
+                                onPress={() => toggleTag(cat)}
+                                style={[styles.chip, on ? styles.chipSelected : null]}
+                            >
+                                <Text style={[styles.chipText, on ? styles.chipTextSelected : null]}>
+                                    {cat}
+                                </Text>
+                            </Pressable>
+                        );
+                    })}
+                </View>
+            ) : null}
+
+            <TextInput
+                style={styles.reasonInput}
+                placeholder="Tell us what's on your mind"
+                placeholderTextColor="#9097A3"
+                value={text}
+                onChangeText={(value) => { onStart?.(); setText(value); }}
+                multiline
+            />
+
+            <View style={styles.actions}>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Dismiss"
+                    onPress={onDismiss}
+                    style={styles.dismissBtn}
+                >
+                    <Text style={styles.dismissText}>Not now</Text>
+                </Pressable>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Submit feedback"
+                    disabled={text.trim().length === 0}
+                    onPress={() =>
+                        text.trim().length > 0
+                            ? onSubmit({
+                                  reason: text.trim(),
+                                  tags: selectedTags.length > 0 ? selectedTags : undefined,
+                              })
+                            : undefined
+                    }
+                    style={[
+                        styles.submitBtn,
+                        text.trim().length === 0 ? styles.submitBtnDisabled : null,
+                    ]}
+                >
+                    <Text style={styles.submitText}>Send</Text>
+                </Pressable>
+            </View>
+        </View>
+    );
+}
+
+// ─── SURVEY render branch (multi-question: single/multi choice, scale, text) ──
+// Driven by `campaign.questions` (QuestionSpec[]). Collects one answer per
+// question and raises a single `answers[]` array the provider submits as one
+// response. Falls back to the single `question` as a lone text question.
+
+function scaleMaxFor(q: QuestionSpec): number {
+    return typeof q.scaleMax === 'number' && q.scaleMax > 0 ? q.scaleMax : 5;
+}
+
+function scaleMinFor(q: QuestionSpec): number {
+    return typeof q.scaleMin === 'number' && q.scaleMin >= 0 ? q.scaleMin : 1;
+}
+
+/** 5-point emoji reaction scale (😡🙁😐🙂😍 → value 1..5). Value persisted as a number. */
+const EMOJI_SCALE: { value: number; glyph: string; label: string }[] = [
+    { value: 1, glyph: '😡', label: 'Very bad' },
+    { value: 2, glyph: '🙁', label: 'Bad' },
+    { value: 3, glyph: '😐', label: 'Okay' },
+    { value: 4, glyph: '🙂', label: 'Good' },
+    { value: 5, glyph: '😍', label: 'Great' },
+];
+
+/** Yes/No boolean question options. Value persisted as the literal string. */
+const YES_NO = ['Yes', 'No'] as const;
+
+function SurveyPrompt({ campaign, onSubmit, onDismiss, onStart }: PromptBranchProps): ReactElement {
+    const questions: QuestionSpec[] =
+        campaign.questions && campaign.questions.length > 0
+            ? campaign.questions
+            : [{ key: 'q1', prompt: campaign.question, kind: 'text' }];
+
+    // One answer slot per question key. string | number | string[] per kind.
+    const [answers, setAnswers] = useState<Record<string, string | number | string[]>>({});
+    const [step, setStep] = useState(campaign.startScreen?.trim() ? -1 : 0);
+    // [P3-e] Captured native attachments, keyed by question. Optional — never blocks submit.
+    const [attachments, setAttachments] = useState<Record<string, EngageAttachmentDraft>>({});
+    const [capturing, setCapturing] = useState<string | null>(null);
+    // [Slice D] Voice recorder state: which question is mid-record + the live elapsed ms.
+    const [recordingKey, setRecordingKey] = useState<string | null>(null);
+    const [elapsedMs, setElapsedMs] = useState(0);
+    const voiceTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+    const recordStartRef = useRef<number>(0);
+
+    const clearVoiceTimer = (): void => {
+        if (voiceTimerRef.current) {
+            clearInterval(voiceTimerRef.current);
+            voiceTimerRef.current = null;
+        }
+    };
+    // Clean up a running recording if the prompt unmounts mid-record.
+    useEffect(() => () => clearVoiceTimer(), []);
+
+    const setAnswer = (key: string, value: string | number | string[]): void => {
+        onStart?.();
+        setAnswers((prev) => ({ ...prev, [key]: value }));
+    };
+
+    // ─── Voice note: record (≤30s auto-stop) → on-device transcript → edit → approve
+    const startVoice = async (key: string): Promise<void> => {
+        if (recordingKey) return;
+        clearAttachment(key);
+        recordStartRef.current = Date.now();
+        setElapsedMs(0);
+        setRecordingKey(key);
+        try {
+            await startVoiceAttachment();
+        } catch {
+            setRecordingKey(null);
+            return;
+        }
+        // Live timer; auto-stop enforces the 30s cap on the UI leg (1 of 3).
+        voiceTimerRef.current = setInterval(() => {
+            const ms = Date.now() - recordStartRef.current;
+            setElapsedMs(ms);
+            if (ms >= VOICE_MAX_DURATION_MS) {
+                void stopVoice(key);
+            }
+        }, 100);
+    };
+
+    const stopVoice = async (key: string): Promise<void> => {
+        clearVoiceTimer();
+        setRecordingKey(null);
+        const draft = await stopVoiceAttachment();
+        if (draft) setAttachments((prev) => ({ ...prev, [key]: draft }));
+    };
+
+    const cancelVoice = async (key: string): Promise<void> => {
+        clearVoiceTimer();
+        setRecordingKey(null);
+        setElapsedMs(0);
+        await cancelVoiceAttachment();
+        clearAttachment(key);
+    };
+
+    const editTranscript = (key: string, text: string): void => {
+        setAttachments((prev) => {
+            const d = prev[key];
+            if (!d) return prev;
+            return { ...prev, [key]: { ...d, transcript: text } };
+        });
+    };
+
+    const approveVoice = (key: string): void => {
+        setAttachments((prev) => {
+            const d = prev[key];
+            if (!d) return prev;
+            return { ...prev, [key]: { ...d, transcriptApproved: true } };
+        });
+    };
+
+    const captureScreenshot = async (key: string): Promise<void> => {
+        setCapturing(key);
+        try {
+            const draft = await captureScreenshotAttachment();
+            if (draft) setAttachments((prev) => ({ ...prev, [key]: draft }));
+        } finally {
+            setCapturing(null);
+        }
+    };
+
+    const clearAttachment = (key: string): void => {
+        setAttachments((prev) => {
+            const next = { ...prev };
+            delete next[key];
+            return next;
+        });
+    };
+
+    const toggleMulti = (key: string, choice: string): void => {
+        onStart?.();
+        setAnswers((prev) => {
+            const current = Array.isArray(prev[key]) ? (prev[key] as string[]) : [];
+            const next = current.includes(choice)
+                ? current.filter((c) => c !== choice)
+                : [...current, choice];
+            return { ...prev, [key]: next };
+        });
+    };
+
+    const isAnswered = (q: QuestionSpec): boolean => {
+        if (q.kind === 'screenshot') return attachments[q.key] !== undefined;
+        // [Slice D] Voice is optional, BUT: a mid-record clip blocks submit, and a
+        // recorded clip must be explicitly APPROVED before anything is sent (the user
+        // owns the final wording — nothing leaves until they approve).
+        if (q.kind === 'voice') {
+            if (recordingKey === q.key) return false;
+            const d = attachments[q.key];
+            if (!d) return false;
+            return d.transcriptApproved === true;
+        }
+        const v = answers[q.key];
+        if (q.kind === 'multi') return Array.isArray(v) && v.length > 0;
+        if (q.kind === 'text') return typeof v === 'string' && v.trim().length > 0;
+        return v !== undefined && v !== '';
+    };
+    // Only scalar/text questions become answers[]; media questions raise attachments.
+    const assemble = (): SurveyAnswer[] =>
+        questions
+            .filter((q) => q.kind !== 'screenshot' && q.kind !== 'voice')
+            .reduce<SurveyAnswer[]>((result, q) => {
+                const v = answers[q.key];
+                if (v === undefined || v === '' || (Array.isArray(v) && v.length === 0)) return result;
+                if (q.kind === 'multi') {
+                    result.push({ key: q.key, value: Array.isArray(v) ? v : [] });
+                    return result;
+                }
+                if (q.kind === 'scale' || q.kind === 'emoji') {
+                    result.push({ key: q.key, value: typeof v === 'number' ? v : 0 });
+                    return result;
+                }
+                result.push({ key: q.key, value: typeof v === 'string' ? v.trim() : String(v ?? '') });
+                return result;
+            }, []);
+
+    // A survey where every question is optional could be submitted with nothing
+    // answered and nothing attached — an empty response row polluting analytics
+    // (found live: voice question, Submit tapped without ever recording). Content
+    // is what gates the final Submit; "Not now" remains the way out.
+    const hasAnyContent = (): boolean => questions.some((q) => isAnswered(q));
+
+    const submit = (): void => {
+        if (!hasAnyContent()) return;
+        const drafts = Object.values(attachments);
+        onSubmit({
+            answers: assemble(),
+            ...(drafts.length > 0 ? { attachments: drafts } : {}),
+        });
+    };
+
+    const current = step >= 0 && step < questions.length ? questions[step] : null;
+    const advance = (): void => {
+        if (!current) return;
+        if (current.required === true && !isAnswered(current)) return;
+        if (current.skipTo === 'end') {
+            submit();
+            return;
+        }
+        if (current.skipTo) {
+            const target = questions.findIndex((question) => question.key === current.skipTo);
+            if (target >= 0) {
+                setStep(target);
+                return;
+            }
+        }
+        if (step >= questions.length - 1) submit();
+        else setStep(step + 1);
+    };
+
+    return (
+        <View style={styles.card}>
+            {step === -1 ? (
+                <View style={styles.questionBlock}>
+                    <Text style={styles.questionLabel}>{campaign.startScreen}</Text>
+                    <Text style={styles.scaleLabelText}>{questions.length} question{questions.length === 1 ? '' : 's'}</Text>
+                </View>
+            ) : null}
+            {current ? (() => {
+                const q = current;
+                const v = answers[q.key];
+                return (
+                    <View key={q.key} style={styles.questionBlock}>
+                        <Text style={styles.questionLabel}>{q.prompt}</Text>
+                        <Text style={styles.scaleLabelText}>Question {step + 1} of {questions.length}{q.required ? ' · required' : ' · optional'}</Text>
+
+                        {q.kind === 'scale' ? (
+                            <View style={styles.scaleRow}>
+                                {buildScalePoints(scaleMinFor(q), scaleMaxFor(q)).map((n) => {
+                                    const selected = v === n;
+                                    return (
+                                        <Pressable
+                                            key={n}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`${q.prompt} ${n}`}
+                                            onPress={() => setAnswer(q.key, n)}
+                                            style={[
+                                                styles.scaleCell,
+                                                selected ? styles.scaleCellSelected : null,
+                                            ]}
+                                        >
+                                            <Text
+                                                style={[
+                                                    styles.scaleText,
+                                                    selected ? styles.scaleTextSelected : null,
+                                                ]}
+                                            >
+                                                {n}
+                                            </Text>
+                                        </Pressable>
+                                    );
+                                })}
+                            </View>
+                        ) : null}
+
+                        {q.kind === 'text' ? (
+                            <TextInput
+                                style={styles.reasonInput}
+                                placeholder="Your answer"
+                                placeholderTextColor="#9097A3"
+                                value={typeof v === 'string' ? v : ''}
+                                onChangeText={(t) => setAnswer(q.key, t)}
+                                multiline
+                            />
+                        ) : null}
+
+                        {q.kind === 'single' || q.kind === 'choice' ? (
+                            <View style={styles.chipsRow}>
+                                {(q.choices ?? []).map((choice) => {
+                                    const on = v === choice;
+                                    return (
+                                        <Pressable
+                                            key={choice}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`${q.prompt} ${choice}`}
+                                            onPress={() => setAnswer(q.key, choice)}
+                                            style={[styles.chip, on ? styles.chipSelected : null]}
+                                        >
+                                            <Text
+                                                style={[
+                                                    styles.chipText,
+                                                    on ? styles.chipTextSelected : null,
+                                                ]}
+                                            >
+                                                {choice}
+                                            </Text>
+                                        </Pressable>
+                                    );
+                                })}
+                            </View>
+                        ) : null}
+
+                        {q.kind === 'multi' ? (
+                            <View style={styles.chipsRow}>
+                                {(q.choices ?? []).map((choice) => {
+                                    const on = Array.isArray(v) && v.includes(choice);
+                                    return (
+                                        <Pressable
+                                            key={choice}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`${q.prompt} ${choice}`}
+                                            onPress={() => toggleMulti(q.key, choice)}
+                                            style={[styles.chip, on ? styles.chipSelected : null]}
+                                        >
+                                            <Text
+                                                style={[
+                                                    styles.chipText,
+                                                    on ? styles.chipTextSelected : null,
+                                                ]}
+                                            >
+                                                {choice}
+                                            </Text>
+                                        </Pressable>
+                                    );
+                                })}
+                            </View>
+                        ) : null}
+
+                        {q.kind === 'emoji' ? (
+                            <View style={styles.emojiRow}>
+                                {EMOJI_SCALE.map((e) => {
+                                    const on = v === e.value;
+                                    return (
+                                        <Pressable
+                                            key={e.value}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`${q.prompt} ${e.label}`}
+                                            onPress={() => setAnswer(q.key, e.value)}
+                                            style={[styles.emojiCell, on ? styles.emojiCellSelected : null]}
+                                        >
+                                            <Text style={styles.emojiGlyph}>{e.glyph}</Text>
+                                        </Pressable>
+                                    );
+                                })}
+                            </View>
+                        ) : null}
+
+                        {q.kind === 'screenshot' ? (
+                            <View>
+                                <Pressable
+                                    accessibilityRole="button"
+                                    accessibilityLabel={attachments[q.key] ? 'Retake screenshot' : 'Add screenshot'}
+                                    disabled={capturing === q.key}
+                                    onPress={() => captureScreenshot(q.key)}
+                                    style={[styles.chip, attachments[q.key] ? styles.chipSelected : null]}
+                                >
+                                    <Text style={[styles.chipText, attachments[q.key] ? styles.chipTextSelected : null]}>
+                                        {capturing === q.key
+                                            ? 'Capturing…'
+                                            : attachments[q.key]
+                                              ? '✓ Screenshot attached — retake'
+                                              : '📷 Add screenshot'}
+                                    </Text>
+                                </Pressable>
+                                {attachments[q.key] ? (
+                                    <Pressable
+                                        accessibilityRole="button"
+                                        accessibilityLabel="Remove screenshot"
+                                        onPress={() => clearAttachment(q.key)}
+                                        style={styles.dismissBtn}
+                                    >
+                                        <Text style={styles.dismissText}>Remove</Text>
+                                    </Pressable>
+                                ) : null}
+                            </View>
+                        ) : null}
+
+                        {q.kind === 'voice' ? (
+                            <VoiceQuestion
+                                draft={attachments[q.key]}
+                                recording={recordingKey === q.key}
+                                elapsedMs={recordingKey === q.key ? elapsedMs : 0}
+                                onStart={() => void startVoice(q.key)}
+                                onStop={() => void stopVoice(q.key)}
+                                onCancel={() => void cancelVoice(q.key)}
+                                onEditTranscript={(t) => editTranscript(q.key, t)}
+                                onApprove={() => approveVoice(q.key)}
+                            />
+                        ) : null}
+
+                        {q.kind === 'boolean' ? (
+                            <View style={styles.chipsRow}>
+                                {YES_NO.map((opt) => {
+                                    const on = v === opt;
+                                    return (
+                                        <Pressable
+                                            key={opt}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`${q.prompt} ${opt}`}
+                                            onPress={() => setAnswer(q.key, opt)}
+                                            style={[styles.yesNoBtn, on ? styles.chipSelected : null]}
+                                        >
+                                            <Text
+                                                style={[
+                                                    styles.chipText,
+                                                    on ? styles.chipTextSelected : null,
+                                                ]}
+                                            >
+                                                {opt}
+                                            </Text>
+                                        </Pressable>
+                                    );
+                                })}
+                            </View>
+                        ) : null}
+                    </View>
+                );
+            })() : null}
+
+            <View style={styles.actions}>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Dismiss"
+                    onPress={onDismiss}
+                    style={styles.dismissBtn}
+                >
+                    <Text style={styles.dismissText}>Not now</Text>
+                </Pressable>
+                {step === -1 ? (
+                    <Pressable accessibilityRole="button" accessibilityLabel="Start survey" onPress={() => { onStart?.(); setStep(0); }} style={styles.submitBtn}>
+                        <Text style={styles.submitText}>Start</Text>
+                    </Pressable>
+                ) : current ? (() => {
+                    const isSubmitStep = step === questions.length - 1 || current.skipTo === 'end';
+                    // A required question blocks its own step; the submit step
+                    // additionally requires the survey to carry ANY content at all.
+                    const blocked =
+                        (current.required === true && !isAnswered(current)) ||
+                        (isSubmitStep && !hasAnyContent());
+                    return (
+                        <Pressable
+                            accessibilityRole="button"
+                            accessibilityLabel={isSubmitStep ? 'Submit survey' : 'Continue survey'}
+                            disabled={blocked}
+                            onPress={advance}
+                            style={[styles.submitBtn, blocked ? styles.submitBtnDisabled : null]}
+                        >
+                            <Text style={styles.submitText}>{isSubmitStep ? 'Submit' : 'Continue'}</Text>
+                        </Pressable>
+                    );
+                })() : null}
+            </View>
+        </View>
+    );
+}
+
+function buildScalePoints(min: number, max: number): number[] {
+    const points: number[] = [];
+    for (let i = min; i <= max; i += 1) points.push(i);
+    return points;
+}
+
+function formatElapsed(ms: number): string {
+    const totalSec = Math.floor(ms / 1000);
+    const s = totalSec % 60;
+    return `0:${s < 10 ? '0' : ''}${s}`;
+}
+
+// ─── Voice note sub-view (record ≤30s → on-device transcript → edit → approve) ─
+// Reusable inside SurveyPrompt for any `voice` question. Owns no transport: it
+// raises record/stop/approve callbacks; the parent holds the draft + transcript.
+
+interface VoiceQuestionProps {
+    draft?: EngageAttachmentDraft;
+    recording: boolean;
+    elapsedMs: number;
+    onStart: () => void;
+    onStop: () => void;
+    onCancel: () => void;
+    onEditTranscript: (text: string) => void;
+    onApprove: () => void;
+}
+
+function VoiceQuestion({
+    draft,
+    recording,
+    elapsedMs,
+    onStart,
+    onStop,
+    onCancel,
+    onEditTranscript,
+    onApprove,
+}: VoiceQuestionProps): ReactElement {
+    const capSec = Math.floor(VOICE_MAX_DURATION_MS / 1000);
+
+    if (recording) {
+        return (
+            <View>
+                <View style={styles.voiceRecordingRow}>
+                    <View style={styles.voiceDot} />
+                    <Text style={styles.voiceTimer}>
+                        {formatElapsed(elapsedMs)} / 0:{capSec}
+                    </Text>
+                </View>
+                <View style={styles.chipsRow}>
+                    <Pressable
+                        accessibilityRole="button"
+                        accessibilityLabel="Stop recording"
+                        onPress={onStop}
+                        style={styles.voiceStopBtn}
+                    >
+                        <Text style={styles.chipTextSelected}>■ Stop</Text>
+                    </Pressable>
+                    <Pressable
+                        accessibilityRole="button"
+                        accessibilityLabel="Cancel recording"
+                        onPress={onCancel}
+                        style={styles.dismissBtn}
+                    >
+                        <Text style={styles.dismissText}>Cancel</Text>
+                    </Pressable>
+                </View>
+            </View>
+        );
+    }
+
+    if (!draft) {
+        return (
+            <Pressable
+                accessibilityRole="button"
+                accessibilityLabel="Record voice note"
+                onPress={onStart}
+                style={styles.chip}
+            >
+                <Text style={styles.chipText}>🎙 Record voice note (max {capSec}s)</Text>
+            </Pressable>
+        );
+    }
+
+    // Recorded: show editable transcript prefill + explicit approve gate.
+    return (
+        <View>
+            <Text style={styles.voiceMeta}>
+                🎙 Voice note recorded · {formatElapsed(draft.durationMs ?? 0)}
+            </Text>
+            <Text style={styles.voiceHint}>
+                {(draft.transcript ?? '').trim().length > 0
+                    ? 'Review the transcript below — edit it, then approve to send. Nothing is sent until you approve.'
+                    : // An empty prefill is a device limitation (on many phones the recorder
+                      // holds the microphone, so the on-device engine hears silence) — the
+                      // recording itself was captured fine. Say so, or the blank field reads
+                      // as a bug and the typed-transcript path goes undiscovered.
+                      'Your recording was captured, but automatic transcription wasn’t available on this device. Type what you said (optional), then approve to send.'}
+            </Text>
+            <TextInput
+                style={styles.reasonInput}
+                placeholder={(draft.transcript ?? '').trim().length > 0
+                    ? 'Transcript (edit before approving)'
+                    : 'Type what you said (optional)'}
+                placeholderTextColor="#9097A3"
+                value={draft.transcript ?? ''}
+                onChangeText={onEditTranscript}
+                editable={!draft.transcriptApproved}
+                multiline
+            />
+            <View style={styles.chipsRow}>
+                {draft.transcriptApproved ? (
+                    <View style={styles.voiceApprovedBadge}>
+                        <Text style={styles.chipTextSelected}>✓ Approved</Text>
+                    </View>
+                ) : (
+                    <Pressable
+                        accessibilityRole="button"
+                        accessibilityLabel="Approve transcript"
+                        onPress={onApprove}
+                        style={styles.voiceApproveBtn}
+                    >
+                        <Text style={styles.chipTextSelected}>✓ Approve &amp; keep</Text>
+                    </Pressable>
+                )}
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Re-record voice note"
+                    onPress={onStart}
+                    style={styles.dismissBtn}
+                >
+                    <Text style={styles.dismissText}>Re-record</Text>
+                </Pressable>
+            </View>
+        </View>
+    );
+}
+
+// ─── Reusable submit state overlay (submitting → success → error) ──────────────
+// The SINGLE submit UI for EVERY question type. Covers the card while non-idle so
+// inputs/submit are blocked in-flight (no double-submit). Renders real stages and a
+// retryable error. NOT bespoke to voice — the shell mounts it over any prompt branch.
+
+interface SubmitStatusOverlayProps {
+    status: EngageSubmitStatus;
+    onRetry: () => void;
+    onClose: () => void;
+    successMessage?: string;
+}
+
+function stageLabel(stage: SubmitStage): string {
+    return stage === 'uploading' ? 'Uploading attachment…' : 'Saving your feedback…';
+}
+
+function SubmitStatusOverlay({
+    status,
+    onRetry,
+    onClose,
+    successMessage,
+}: SubmitStatusOverlayProps): ReactElement | null {
+    if (status.phase === 'idle') return null;
+
+    return (
+        <View style={styles.submitOverlay}>
+            {status.phase === 'submitting' ? (
+                <View style={styles.submitCenter}>
+                    <ActivityIndicator size="large" color="#2F6BFF" />
+                    <Text style={styles.submitStageText}>{stageLabel(status.stage)}</Text>
+                </View>
+            ) : null}
+
+            {status.phase === 'success' ? (
+                <View style={styles.submitCenter}>
+                    <Text style={styles.submitSuccessMark}>✓</Text>
+                    <Text style={styles.submitStageText}>{successMessage?.trim() || 'Sent — thank you!'}</Text>
+                </View>
+            ) : null}
+
+            {status.phase === 'error' ? (
+                <View style={styles.submitCenter}>
+                    <Text style={styles.submitErrorMark}>!</Text>
+                    <Text style={styles.submitStageText}>Couldn't send. Please retry.</Text>
+                    <View style={styles.actions}>
+                        <Pressable
+                            accessibilityRole="button"
+                            accessibilityLabel="Close"
+                            onPress={onClose}
+                            style={styles.dismissBtn}
+                        >
+                            <Text style={styles.dismissText}>Close</Text>
+                        </Pressable>
+                        <Pressable
+                            accessibilityRole="button"
+                            accessibilityLabel="Retry submit"
+                            onPress={onRetry}
+                            style={styles.submitBtn}
+                        >
+                            <Text style={styles.submitText}>Retry</Text>
+                        </Pressable>
+                    </View>
+                </View>
+            ) : null}
+        </View>
+    );
+}
+
+// ─── Open/Closed registry: config.type → render branch ───────────────────────
+// NPS first; RATING_PROMPT/FEEDBACK/SURVEY plug in as ADDITIONAL entries. The
+// overlay shell, modal, throttle, and transport wiring stay untouched. SURVEY is
+// keyed on the contract's CSAT/CUSTOM campaign subtypes (multi-question surveys).
+export const PROMPT_RENDERERS: Partial<Record<EngageCampaignType, PromptRenderer>> = {
+    NPS: NpsPrompt,
+    RATING_PROMPT: RatingPrompt,
+    RATINGS_PROMPT: RatingPrompt,
+    FEEDBACK: FeedbackPrompt,
+    CSAT: SurveyPrompt,
+    CUSTOM: SurveyPrompt,
+};
+
+/** Resolve the render branch for a campaign, or null if its type isn't supported yet. */
+export function resolvePromptRenderer(type: EngageCampaignType): PromptRenderer | null {
+    return PROMPT_RENDERERS[type] ?? null;
+}
+
+// ─── Overlay shell ───────────────────────────────────────────────────────────
+
+export interface EngagePromptViewProps {
+    campaign: EngageCampaignConfig | null;
+    visible: boolean;
+    onSubmit: (result: EngagePromptResult) => void;
+    onDismiss: () => void;
+    onStart?: () => void;
+    /** RATING_PROMPT routing config forwarded to the star branch (host-supplied). */
+    rating?: RatingPromptConfig;
+    /** [Slice D5] Reusable submit state — drives the in-prompt submitting/success/error overlay. */
+    submitStatus?: EngageSubmitStatus;
+    /** Retry the last submit (same idempotent responseId). */
+    onRetrySubmit?: () => void;
+    /** Close the prompt after a terminal submit state (success/error). */
+    onCloseSubmit?: () => void;
+}
+
+/**
+ * Modal overlay shell. Branches on `campaign.type` via the registry — renders the
+ * matching prompt or nothing. This is the single mount point a host app shows.
+ */
+export function EngagePromptView({
+    campaign,
+    visible,
+    onSubmit,
+    onDismiss,
+    onStart,
+    rating,
+    submitStatus,
+    onRetrySubmit,
+    onCloseSubmit,
+}: EngagePromptViewProps): ReactElement | null {
+    if (!campaign || !visible) return null;
+
+    const Branch = resolvePromptRenderer(campaign.type);
+    if (!Branch) return null;
+
+    const status: EngageSubmitStatus = submitStatus ?? { phase: 'idle' };
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="fade"
+            onRequestClose={onDismiss}
+        >
+            <View style={styles.backdrop}>
+                {/* The branch + the reusable submit overlay share one positioned wrapper
+                    so the overlay covers the branch (blocking input) while submitting. */}
+                <View style={styles.promptWrapper}>
+                    <Branch
+                        campaign={campaign}
+                        onSubmit={onSubmit}
+                        onDismiss={onDismiss}
+                        onStart={onStart}
+                        rating={rating}
+                    />
+                    <SubmitStatusOverlay
+                        status={status}
+                        onRetry={() => onRetrySubmit?.()}
+                        onClose={() => onCloseSubmit?.()}
+                        successMessage={campaign.thankYouScreen}
+                    />
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+// Plain objects (not StyleSheet.create) to match the bridgeless-safe pattern in
+// ScaleBunDebugRoot — avoids touching DeviceInfo TurboModule at module-load time.
+
+const styles: {
+    backdrop: ViewStyle;
+    card: ViewStyle;
+    question: TextStyle;
+    scaleRow: ViewStyle;
+    scaleCell: ViewStyle;
+    scaleCellSelected: ViewStyle;
+    scaleText: TextStyle;
+    scaleTextSelected: TextStyle;
+    scaleLabels: ViewStyle;
+    scaleLabelText: TextStyle;
+    reasonInput: TextStyle;
+    actions: ViewStyle;
+    dismissBtn: ViewStyle;
+    dismissText: TextStyle;
+    submitBtn: ViewStyle;
+    submitBtnDisabled: ViewStyle;
+    submitText: TextStyle;
+    starsRow: ViewStyle;
+    starCell: ViewStyle;
+    star: TextStyle;
+    starFilled: TextStyle;
+    chipsRow: ViewStyle;
+    chip: ViewStyle;
+    chipSelected: ViewStyle;
+    chipText: TextStyle;
+    chipTextSelected: TextStyle;
+    questionBlock: ViewStyle;
+    questionLabel: TextStyle;
+    emojiRow: ViewStyle;
+    emojiCell: ViewStyle;
+    emojiCellSelected: ViewStyle;
+    emojiGlyph: TextStyle;
+    yesNoBtn: ViewStyle;
+    promptWrapper: ViewStyle;
+    voiceRecordingRow: ViewStyle;
+    voiceDot: ViewStyle;
+    voiceTimer: TextStyle;
+    voiceStopBtn: ViewStyle;
+    voiceMeta: TextStyle;
+    voiceHint: TextStyle;
+    voiceApproveBtn: ViewStyle;
+    voiceApprovedBadge: ViewStyle;
+    submitOverlay: ViewStyle;
+    submitCenter: ViewStyle;
+    submitStageText: TextStyle;
+    submitSuccessMark: TextStyle;
+    submitErrorMark: TextStyle;
+} = {
+    backdrop: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.45)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    card: {
+        width: '100%',
+        maxWidth: 420,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        padding: 20,
+    },
+    question: {
+        fontSize: 17,
+        fontWeight: '600',
+        color: '#11151C',
+        marginBottom: 16,
+    },
+    scaleRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+    },
+    scaleCell: {
+        width: 30,
+        height: 36,
+        marginBottom: 8,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#D7DBE2',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    scaleCellSelected: {
+        backgroundColor: '#2F6BFF',
+        borderColor: '#2F6BFF',
+    },
+    scaleText: {
+        fontSize: 14,
+        color: '#3A4250',
+    },
+    scaleTextSelected: {
+        color: '#FFFFFF',
+        fontWeight: '700',
+    },
+    scaleLabels: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 2,
+        marginBottom: 14,
+    },
+    scaleLabelText: {
+        fontSize: 11,
+        color: '#9097A3',
+    },
+    reasonInput: {
+        minHeight: 64,
+        borderWidth: 1,
+        borderColor: '#D7DBE2',
+        borderRadius: 10,
+        padding: 12,
+        fontSize: 14,
+        color: '#11151C',
+        textAlignVertical: 'top',
+        marginBottom: 16,
+    },
+    actions: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+    },
+    dismissBtn: {
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        marginRight: 8,
+    },
+    dismissText: {
+        fontSize: 15,
+        color: '#6B7280',
+        fontWeight: '500',
+    },
+    submitBtn: {
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        borderRadius: 10,
+        backgroundColor: '#2F6BFF',
+    },
+    submitBtnDisabled: {
+        backgroundColor: '#A9C0FF',
+    },
+    submitText: {
+        fontSize: 15,
+        color: '#FFFFFF',
+        fontWeight: '600',
+    },
+    starsRow: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginBottom: 18,
+    },
+    starCell: {
+        paddingHorizontal: 6,
+        paddingVertical: 4,
+    },
+    star: {
+        fontSize: 36,
+        color: '#D7DBE2',
+    },
+    starFilled: {
+        color: '#F5A623',
+    },
+    chipsRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginBottom: 12,
+    },
+    chip: {
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: '#D7DBE2',
+        marginRight: 8,
+        marginBottom: 8,
+    },
+    chipSelected: {
+        backgroundColor: '#2F6BFF',
+        borderColor: '#2F6BFF',
+    },
+    chipText: {
+        fontSize: 13,
+        color: '#3A4250',
+    },
+    chipTextSelected: {
+        color: '#FFFFFF',
+        fontWeight: '600',
+    },
+    questionBlock: {
+        marginBottom: 16,
+    },
+    questionLabel: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#11151C',
+        marginBottom: 10,
+    },
+    emojiRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginBottom: 12,
+    },
+    emojiCell: {
+        width: 52,
+        height: 52,
+        borderRadius: 26,
+        borderWidth: 1,
+        borderColor: '#D7DBE2',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    emojiCellSelected: {
+        backgroundColor: '#EAF1FF',
+        borderColor: '#2F6BFF',
+    },
+    emojiGlyph: {
+        fontSize: 26,
+    },
+    yesNoBtn: {
+        paddingVertical: 10,
+        paddingHorizontal: 28,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: '#D7DBE2',
+        marginRight: 10,
+        marginBottom: 8,
+    },
+    promptWrapper: {
+        width: '100%',
+        maxWidth: 420,
+        position: 'relative',
+    },
+    voiceRecordingRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    voiceDot: {
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: '#E5484D',
+        marginRight: 8,
+    },
+    voiceTimer: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#11151C',
+    },
+    voiceStopBtn: {
+        paddingVertical: 6,
+        paddingHorizontal: 16,
+        borderRadius: 16,
+        backgroundColor: '#E5484D',
+        marginRight: 8,
+        marginBottom: 8,
+    },
+    voiceMeta: {
+        fontSize: 13,
+        fontWeight: '600',
+        color: '#11151C',
+        marginBottom: 6,
+    },
+    voiceHint: {
+        fontSize: 12,
+        color: '#6B7280',
+        marginBottom: 8,
+    },
+    voiceApproveBtn: {
+        paddingVertical: 6,
+        paddingHorizontal: 16,
+        borderRadius: 16,
+        backgroundColor: '#1F9D55',
+        marginRight: 8,
+        marginBottom: 8,
+    },
+    voiceApprovedBadge: {
+        paddingVertical: 6,
+        paddingHorizontal: 16,
+        borderRadius: 16,
+        backgroundColor: '#1F9D55',
+        marginRight: 8,
+        marginBottom: 8,
+        opacity: 0.7,
+    },
+    submitOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(255,255,255,0.94)',
+        borderRadius: 16,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    submitCenter: {
+        alignItems: 'center',
+    },
+    submitStageText: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#11151C',
+        marginTop: 12,
+        textAlign: 'center',
+    },
+    submitSuccessMark: {
+        fontSize: 44,
+        color: '#1F9D55',
+        fontWeight: '700',
+    },
+    submitErrorMark: {
+        fontSize: 44,
+        color: '#E5484D',
+        fontWeight: '700',
+    },
+};