@scalebun-release/react-native 2.5.0

package/lib/module/features/engage/EngagePromptView.js

@@ -0,0 +1,1243 @@
+/**
+ * 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 } from 'react';
+import { ActivityIndicator, Modal, View, Text, TextInput, Pressable } from 'react-native';
+import { captureScreenshotAttachment } from './attachmentCapture';
+import { startVoiceAttachment, stopVoiceAttachment, cancelVoiceAttachment, VOICE_MAX_DURATION_MS } from './captureVoiceAttachment';
+
+/**
+ * [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.
+ */
+
+/** How a RATING_PROMPT star selection should be routed by the host app. */
+
+/** Normalized result a prompt branch raises on submit. */
+
+/** Props every prompt-type render branch receives (the Open/Closed contract). */
+
+/** Host-app-supplied RATING_PROMPT routing config (deeplink is NEVER hardcoded). */
+
+/** A render branch for one campaign type. Add entries to extend the renderer. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ─── NPS render branch (0–10 scale + optional reason) ────────────────────────
+
+function NpsPrompt({
+  campaign,
+  onSubmit,
+  onDismiss,
+  onStart
+}) {
+  const [score, setScore] = useState(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 = [];
+  for (let i = 0; i <= max; i += 1) points.push(i);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.card,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.question,
+      children: campaign.question
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.scaleRow,
+      children: points.map(n => {
+        const selected = score === n;
+        return /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: `Score ${n}`,
+          onPress: () => {
+            onStart?.();
+            setScore(n);
+          },
+          style: [styles.scaleCell, selected ? styles.scaleCellSelected : null],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.scaleText, selected ? styles.scaleTextSelected : null],
+            children: n
+          })
+        }, n);
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.scaleLabels,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.scaleLabelText,
+        children: "Not likely"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.scaleLabelText,
+        children: "Very likely"
+      })]
+    }), /*#__PURE__*/_jsx(TextInput, {
+      style: styles.reasonInput,
+      placeholder: "What's the main reason for your score? (optional)",
+      placeholderTextColor: "#9097A3",
+      value: reason,
+      onChangeText: value => {
+        onStart?.();
+        setReason(value);
+      },
+      multiline: true
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.actions,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Dismiss",
+        onPress: onDismiss,
+        style: styles.dismissBtn,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.dismissText,
+          children: "Not now"
+        })
+      }), /*#__PURE__*/_jsx(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],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.submitText,
+          children: "Submit"
+        })
+      })]
+    })]
+  });
+}
+
+// ─── 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
+}) {
+  const [stars, setStars] = useState(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 /*#__PURE__*/_jsxs(View, {
+    style: styles.card,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.question,
+      children: campaign.question
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.starsRow,
+      children: STARS.map(n => {
+        const filled = stars !== null && n <= stars;
+        return /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: `${n} star${n > 1 ? 's' : ''}`,
+          onPress: () => {
+            onStart?.();
+            setStars(n);
+          },
+          style: styles.starCell,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.star, filled ? styles.starFilled : null],
+            children: filled ? '★' : '☆'
+          })
+        }, n);
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.actions,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Dismiss",
+        onPress: onDismiss,
+        style: styles.dismissBtn,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.dismissText,
+          children: "Not now"
+        })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Submit rating",
+        disabled: stars === null,
+        onPress: () => {
+          if (stars === null) return;
+          const route = stars >= threshold ? 'store' : lowToFeedback ? 'feedback' : 'submit';
+          onSubmit({
+            score: stars,
+            route
+          });
+        },
+        style: [styles.submitBtn, stars === null ? styles.submitBtnDisabled : null],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.submitText,
+          children: "Submit"
+        })
+      })]
+    })]
+  });
+}
+
+// ─── FEEDBACK render branch (free text + optional category/tags) ─────────────
+
+function FeedbackPrompt(props) {
+  // 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 /*#__PURE__*/_jsx(SurveyPrompt, {
+    ...props
+  });
+  return /*#__PURE__*/_jsx(FeedbackTextPrompt, {
+    ...props
+  });
+}
+function FeedbackTextPrompt({
+  campaign,
+  onSubmit,
+  onDismiss,
+  onStart
+}) {
+  const [text, setText] = useState('');
+  const [selectedTags, setSelectedTags] = useState([]);
+
+  // 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 => {
+    onStart?.();
+    setSelectedTags(prev => prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.card,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.question,
+      children: campaign.question
+    }), categories.length > 0 ? /*#__PURE__*/_jsx(View, {
+      style: styles.chipsRow,
+      children: categories.map(cat => {
+        const on = selectedTags.includes(cat);
+        return /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: `Tag ${cat}`,
+          onPress: () => toggleTag(cat),
+          style: [styles.chip, on ? styles.chipSelected : null],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.chipText, on ? styles.chipTextSelected : null],
+            children: cat
+          })
+        }, cat);
+      })
+    }) : null, /*#__PURE__*/_jsx(TextInput, {
+      style: styles.reasonInput,
+      placeholder: "Tell us what's on your mind",
+      placeholderTextColor: "#9097A3",
+      value: text,
+      onChangeText: value => {
+        onStart?.();
+        setText(value);
+      },
+      multiline: true
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.actions,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Dismiss",
+        onPress: onDismiss,
+        style: styles.dismissBtn,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.dismissText,
+          children: "Not now"
+        })
+      }), /*#__PURE__*/_jsx(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],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.submitText,
+          children: "Send"
+        })
+      })]
+    })]
+  });
+}
+
+// ─── 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) {
+  return typeof q.scaleMax === 'number' && q.scaleMax > 0 ? q.scaleMax : 5;
+}
+function scaleMinFor(q) {
+  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: 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'];
+function SurveyPrompt({
+  campaign,
+  onSubmit,
+  onDismiss,
+  onStart
+}) {
+  const questions = 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({});
+  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({});
+  const [capturing, setCapturing] = useState(null);
+  // [Slice D] Voice recorder state: which question is mid-record + the live elapsed ms.
+  const [recordingKey, setRecordingKey] = useState(null);
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const voiceTimerRef = useRef(null);
+  const recordStartRef = useRef(0);
+  const clearVoiceTimer = () => {
+    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, value) => {
+    onStart?.();
+    setAnswers(prev => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  // ─── Voice note: record (≤30s auto-stop) → on-device transcript → edit → approve
+  const startVoice = async key => {
+    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 => {
+    clearVoiceTimer();
+    setRecordingKey(null);
+    const draft = await stopVoiceAttachment();
+    if (draft) setAttachments(prev => ({
+      ...prev,
+      [key]: draft
+    }));
+  };
+  const cancelVoice = async key => {
+    clearVoiceTimer();
+    setRecordingKey(null);
+    setElapsedMs(0);
+    await cancelVoiceAttachment();
+    clearAttachment(key);
+  };
+  const editTranscript = (key, text) => {
+    setAttachments(prev => {
+      const d = prev[key];
+      if (!d) return prev;
+      return {
+        ...prev,
+        [key]: {
+          ...d,
+          transcript: text
+        }
+      };
+    });
+  };
+  const approveVoice = key => {
+    setAttachments(prev => {
+      const d = prev[key];
+      if (!d) return prev;
+      return {
+        ...prev,
+        [key]: {
+          ...d,
+          transcriptApproved: true
+        }
+      };
+    });
+  };
+  const captureScreenshot = async key => {
+    setCapturing(key);
+    try {
+      const draft = await captureScreenshotAttachment();
+      if (draft) setAttachments(prev => ({
+        ...prev,
+        [key]: draft
+      }));
+    } finally {
+      setCapturing(null);
+    }
+  };
+  const clearAttachment = key => {
+    setAttachments(prev => {
+      const next = {
+        ...prev
+      };
+      delete next[key];
+      return next;
+    });
+  };
+  const toggleMulti = (key, choice) => {
+    onStart?.();
+    setAnswers(prev => {
+      const current = Array.isArray(prev[key]) ? prev[key] : [];
+      const next = current.includes(choice) ? current.filter(c => c !== choice) : [...current, choice];
+      return {
+        ...prev,
+        [key]: next
+      };
+    });
+  };
+  const isAnswered = q => {
+    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 = () => questions.filter(q => q.kind !== 'screenshot' && q.kind !== 'voice').reduce((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 = () => questions.some(q => isAnswered(q));
+  const submit = () => {
+    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 = () => {
+    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 /*#__PURE__*/_jsxs(View, {
+    style: styles.card,
+    children: [step === -1 ? /*#__PURE__*/_jsxs(View, {
+      style: styles.questionBlock,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.questionLabel,
+        children: campaign.startScreen
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.scaleLabelText,
+        children: [questions.length, " question", questions.length === 1 ? '' : 's']
+      })]
+    }) : null, current ? (() => {
+      const q = current;
+      const v = answers[q.key];
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.questionBlock,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.questionLabel,
+          children: q.prompt
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.scaleLabelText,
+          children: ["Question ", step + 1, " of ", questions.length, q.required ? ' · required' : ' · optional']
+        }), q.kind === 'scale' ? /*#__PURE__*/_jsx(View, {
+          style: styles.scaleRow,
+          children: buildScalePoints(scaleMinFor(q), scaleMaxFor(q)).map(n => {
+            const selected = v === n;
+            return /*#__PURE__*/_jsx(Pressable, {
+              accessibilityRole: "button",
+              accessibilityLabel: `${q.prompt} ${n}`,
+              onPress: () => setAnswer(q.key, n),
+              style: [styles.scaleCell, selected ? styles.scaleCellSelected : null],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.scaleText, selected ? styles.scaleTextSelected : null],
+                children: n
+              })
+            }, n);
+          })
+        }) : null, q.kind === 'text' ? /*#__PURE__*/_jsx(TextInput, {
+          style: styles.reasonInput,
+          placeholder: "Your answer",
+          placeholderTextColor: "#9097A3",
+          value: typeof v === 'string' ? v : '',
+          onChangeText: t => setAnswer(q.key, t),
+          multiline: true
+        }) : null, q.kind === 'single' || q.kind === 'choice' ? /*#__PURE__*/_jsx(View, {
+          style: styles.chipsRow,
+          children: (q.choices ?? []).map(choice => {
+            const on = v === choice;
+            return /*#__PURE__*/_jsx(Pressable, {
+              accessibilityRole: "button",
+              accessibilityLabel: `${q.prompt} ${choice}`,
+              onPress: () => setAnswer(q.key, choice),
+              style: [styles.chip, on ? styles.chipSelected : null],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.chipText, on ? styles.chipTextSelected : null],
+                children: choice
+              })
+            }, choice);
+          })
+        }) : null, q.kind === 'multi' ? /*#__PURE__*/_jsx(View, {
+          style: styles.chipsRow,
+          children: (q.choices ?? []).map(choice => {
+            const on = Array.isArray(v) && v.includes(choice);
+            return /*#__PURE__*/_jsx(Pressable, {
+              accessibilityRole: "button",
+              accessibilityLabel: `${q.prompt} ${choice}`,
+              onPress: () => toggleMulti(q.key, choice),
+              style: [styles.chip, on ? styles.chipSelected : null],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.chipText, on ? styles.chipTextSelected : null],
+                children: choice
+              })
+            }, choice);
+          })
+        }) : null, q.kind === 'emoji' ? /*#__PURE__*/_jsx(View, {
+          style: styles.emojiRow,
+          children: EMOJI_SCALE.map(e => {
+            const on = v === e.value;
+            return /*#__PURE__*/_jsx(Pressable, {
+              accessibilityRole: "button",
+              accessibilityLabel: `${q.prompt} ${e.label}`,
+              onPress: () => setAnswer(q.key, e.value),
+              style: [styles.emojiCell, on ? styles.emojiCellSelected : null],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.emojiGlyph,
+                children: e.glyph
+              })
+            }, e.value);
+          })
+        }) : null, q.kind === 'screenshot' ? /*#__PURE__*/_jsxs(View, {
+          children: [/*#__PURE__*/_jsx(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],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.chipText, attachments[q.key] ? styles.chipTextSelected : null],
+              children: capturing === q.key ? 'Capturing…' : attachments[q.key] ? '✓ Screenshot attached — retake' : '📷 Add screenshot'
+            })
+          }), attachments[q.key] ? /*#__PURE__*/_jsx(Pressable, {
+            accessibilityRole: "button",
+            accessibilityLabel: "Remove screenshot",
+            onPress: () => clearAttachment(q.key),
+            style: styles.dismissBtn,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.dismissText,
+              children: "Remove"
+            })
+          }) : null]
+        }) : null, q.kind === 'voice' ? /*#__PURE__*/_jsx(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' ? /*#__PURE__*/_jsx(View, {
+          style: styles.chipsRow,
+          children: YES_NO.map(opt => {
+            const on = v === opt;
+            return /*#__PURE__*/_jsx(Pressable, {
+              accessibilityRole: "button",
+              accessibilityLabel: `${q.prompt} ${opt}`,
+              onPress: () => setAnswer(q.key, opt),
+              style: [styles.yesNoBtn, on ? styles.chipSelected : null],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.chipText, on ? styles.chipTextSelected : null],
+                children: opt
+              })
+            }, opt);
+          })
+        }) : null]
+      }, q.key);
+    })() : null, /*#__PURE__*/_jsxs(View, {
+      style: styles.actions,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Dismiss",
+        onPress: onDismiss,
+        style: styles.dismissBtn,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.dismissText,
+          children: "Not now"
+        })
+      }), step === -1 ? /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Start survey",
+        onPress: () => {
+          onStart?.();
+          setStep(0);
+        },
+        style: styles.submitBtn,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.submitText,
+          children: "Start"
+        })
+      }) : 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 /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: isSubmitStep ? 'Submit survey' : 'Continue survey',
+          disabled: blocked,
+          onPress: advance,
+          style: [styles.submitBtn, blocked ? styles.submitBtnDisabled : null],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.submitText,
+            children: isSubmitStep ? 'Submit' : 'Continue'
+          })
+        });
+      })() : null]
+    })]
+  });
+}
+function buildScalePoints(min, max) {
+  const points = [];
+  for (let i = min; i <= max; i += 1) points.push(i);
+  return points;
+}
+function formatElapsed(ms) {
+  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.
+
+function VoiceQuestion({
+  draft,
+  recording,
+  elapsedMs,
+  onStart,
+  onStop,
+  onCancel,
+  onEditTranscript,
+  onApprove
+}) {
+  const capSec = Math.floor(VOICE_MAX_DURATION_MS / 1000);
+  if (recording) {
+    return /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.voiceRecordingRow,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.voiceDot
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.voiceTimer,
+          children: [formatElapsed(elapsedMs), " / 0:", capSec]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.chipsRow,
+        children: [/*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: "Stop recording",
+          onPress: onStop,
+          style: styles.voiceStopBtn,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.chipTextSelected,
+            children: "\u25A0 Stop"
+          })
+        }), /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: "Cancel recording",
+          onPress: onCancel,
+          style: styles.dismissBtn,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.dismissText,
+            children: "Cancel"
+          })
+        })]
+      })]
+    });
+  }
+  if (!draft) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: "Record voice note",
+      onPress: onStart,
+      style: styles.chip,
+      children: /*#__PURE__*/_jsxs(Text, {
+        style: styles.chipText,
+        children: ["\uD83C\uDF99 Record voice note (max ", capSec, "s)"]
+      })
+    });
+  }
+
+  // Recorded: show editable transcript prefill + explicit approve gate.
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsxs(Text, {
+      style: styles.voiceMeta,
+      children: ["\uD83C\uDF99 Voice note recorded \xB7 ", formatElapsed(draft.durationMs ?? 0)]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.voiceHint,
+      children: (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.'
+    }), /*#__PURE__*/_jsx(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: true
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.chipsRow,
+      children: [draft.transcriptApproved ? /*#__PURE__*/_jsx(View, {
+        style: styles.voiceApprovedBadge,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.chipTextSelected,
+          children: "\u2713 Approved"
+        })
+      }) : /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Approve transcript",
+        onPress: onApprove,
+        style: styles.voiceApproveBtn,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.chipTextSelected,
+          children: "\u2713 Approve & keep"
+        })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Re-record voice note",
+        onPress: onStart,
+        style: styles.dismissBtn,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.dismissText,
+          children: "Re-record"
+        })
+      })]
+    })]
+  });
+}
+
+// ─── 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.
+
+function stageLabel(stage) {
+  return stage === 'uploading' ? 'Uploading attachment…' : 'Saving your feedback…';
+}
+function SubmitStatusOverlay({
+  status,
+  onRetry,
+  onClose,
+  successMessage
+}) {
+  if (status.phase === 'idle') return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.submitOverlay,
+    children: [status.phase === 'submitting' ? /*#__PURE__*/_jsxs(View, {
+      style: styles.submitCenter,
+      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "large",
+        color: "#2F6BFF"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.submitStageText,
+        children: stageLabel(status.stage)
+      })]
+    }) : null, status.phase === 'success' ? /*#__PURE__*/_jsxs(View, {
+      style: styles.submitCenter,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.submitSuccessMark,
+        children: "\u2713"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.submitStageText,
+        children: successMessage?.trim() || 'Sent — thank you!'
+      })]
+    }) : null, status.phase === 'error' ? /*#__PURE__*/_jsxs(View, {
+      style: styles.submitCenter,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.submitErrorMark,
+        children: "!"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.submitStageText,
+        children: "Couldn't send. Please retry."
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.actions,
+        children: [/*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: "Close",
+          onPress: onClose,
+          style: styles.dismissBtn,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.dismissText,
+            children: "Close"
+          })
+        }), /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: "Retry submit",
+          onPress: onRetry,
+          style: styles.submitBtn,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.submitText,
+            children: "Retry"
+          })
+        })]
+      })]
+    }) : null]
+  });
+}
+
+// ─── 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 = {
+  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) {
+  return PROMPT_RENDERERS[type] ?? null;
+}
+
+// ─── Overlay shell ───────────────────────────────────────────────────────────
+
+/**
+ * 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
+}) {
+  if (!campaign || !visible) return null;
+  const Branch = resolvePromptRenderer(campaign.type);
+  if (!Branch) return null;
+  const status = submitStatus ?? {
+    phase: 'idle'
+  };
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: onDismiss,
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.backdrop,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.promptWrapper,
+        children: [/*#__PURE__*/_jsx(Branch, {
+          campaign: campaign,
+          onSubmit: onSubmit,
+          onDismiss: onDismiss,
+          onStart: onStart,
+          rating: rating
+        }), /*#__PURE__*/_jsx(SubmitStatusOverlay, {
+          status: status,
+          onRetry: () => onRetrySubmit?.(),
+          onClose: () => onCloseSubmit?.(),
+          successMessage: campaign.thankYouScreen
+        })]
+      })
+    })
+  });
+}
+
+// ─── 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: {
+    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'
+  }
+};
+//# sourceMappingURL=EngagePromptView.js.map