@cxpinsight/react-native 0.18.4 → 0.19.1

package/lib/survey/SurveyModal.js

@@ -239,7 +239,7 @@ function swipeRelease(g) {
 function surfaceScrolls(interactionKind) {
     return String(interactionKind || '').toLowerCase() !== 'notify';
 }
-function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
+function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
     const [currentPage, setCurrentPage] = (0, react_2.useState)(0);
     const [responses, setResponses] = (0, react_2.useState)({});
     const [showThankYou, setShowThankYou] = (0, react_2.useState)(false);
@@ -609,7 +609,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // server rejection (survey deactivated, cap hit) surfaces a retry
     // message instead of a false thank-you.
     const submitAndReset = async () => {
-        const ok = await onSubmit(buildSubmitPayload());
+        const ok = await onSubmit(buildSubmitPayload(), { via: viaRef.current });
         if (ok === false) {
             setSubmitError('We couldn’t submit your response. Please try again.');
             return; // keep the survey open for a retry
@@ -621,6 +621,15 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         if (String(survey.interactionType || '')
             .toLowerCase() === 'notify')
             return;
+        // AND WHEN THE AUTHOR TURNED THE ENDING OFF.
+        //
+        // showsConfirmation gated the OUTCOME panel below and not this state, so
+        // switching the ending off did not remove the ending — it fell through to
+        // the generic "Thank you" instead, which is a worse result than leaving it
+        // alone: the author lost the reward panel and gained a line they never
+        // wrote. Skipped here, so nothing draws and the 2.5s window never opens.
+        if (!(0, survey_spec_1.showsConfirmation)(survey))
+            return;
         setShowThankYou(true);
         const duration = survey.settings?.thankYouDuration ?? 2500;
         setTimeout(() => {
@@ -750,7 +759,19 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
      * the interaction at all, because unlike web the card here was never
      * pressable in the first place. Same defect, one step worse.
      */
-    const pressImplied = (0, react_2.useCallback)((key, a) => {
+    // WHICH SURFACE WAS PRESSED — 'button' or 'card'.
+    //
+    // Both routes end in pressImplied, so by the time the answer is built the
+    // two are the same choice and nothing downstream can tell them apart. Web
+    // has carried this since bf0c4b55 (metadata.via); mobile gained whole-card
+    // press without it, so on the platform where nearly all the traffic is, the
+    // builder's "Clicked the card" outcome could never be populated.
+    //
+    // A ref, not state: it is read during the submit that the press itself
+    // triggers, and a re-render in between would be a wasted frame.
+    const viaRef = (0, react_2.useRef)('button');
+    const pressImplied = (0, react_2.useCallback)((key, a, via = 'button') => {
+        viaRef.current = via;
         // "Remind me later" dismisses instead of answering, so the cadence records
         // a SKIP and brings the interaction back after the author's wait.
         // Answering would record a decision this person explicitly declined to
@@ -858,22 +879,16 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // MultipleChoiceQuestion accepts. hasOther appends a synthetic
     // "Other" entry — full free-text follow-up UX lands in Phase 4.5.
     function normalizeChoices(question) {
-        const out = [];
-        if (Array.isArray(question.options)) {
-            for (const o of question.options) {
-                if (!o)
-                    continue;
-                out.push({ value: String(o.value ?? ''), text: String(o.label ?? o.text ?? o.value ?? '') });
-            }
-        }
-        else if (Array.isArray(question.choices)) {
-            for (const c of question.choices) {
-                if (typeof c === 'string')
-                    out.push({ value: c, text: c });
-                else if (c)
-                    out.push({ value: String(c.value ?? ''), text: String(c.label ?? c.text ?? c.value ?? '') });
-            }
-        }
+        // WHICHEVER FIELD HAS SOMETHING IN IT — see questionChoices.
+        //
+        // This asked `Array.isArray(options)` first and took that branch. The
+        // server's schema declares `options`, so Mongoose defaults it to `[]` on
+        // every question: a question authored with `choices` arrived carrying an
+        // empty `options` beside it, this took the empty branch, and the phone
+        // drew a choice question with no choices at all. The web preview read
+        // `choices` first and was fine, so it looked like a mobile rendering bug
+        // and was a field-precedence one.
+        const out = (0, survey_spec_1.questionChoices)(question);
         if (question.hasOther) {
             out.push({ value: '__other__', text: question.otherLabel || 'Other' });
         }
@@ -1074,7 +1089,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                         // The press is both the answer and the Next — the footer is
                         // hidden on this step. Its body is pressImplied, so the CARD
                         // can do exactly the same thing when this button is not drawn.
-                        onPress: () => pressImplied(key, a), accessibilityRole: "button", accessibilityState: { selected: val === a.value }, style: [
+                        onPress: () => pressImplied(key, a, 'button'), accessibilityRole: "button", accessibilityState: { selected: val === a.value }, style: [
                             styles.impliedBtn,
                             // BESIDE THE TEXT, THE BUTTON IS AS WIDE AS ITS LABEL.
                             //
@@ -1371,7 +1386,6 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     const fs = baseScale !== 1;
     const qTitleFS = fs ? { fontSize: scaled(15) } : undefined;
     const qDescFS = fs ? { fontSize: scaled(13) } : undefined;
-    const thankYouFS = fs ? { fontSize: scaled(18) } : undefined;
     const buttonFS = fs ? { fontSize: scaled(15) } : undefined;
     // Layout tokens (spec §24). String presets map to concrete pixel
     // values; a number passes through verbatim so authors can set
@@ -1540,6 +1554,16 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         JSON.stringify(surveyPaletteOverride), JSON.stringify(initPaletteOverride),
         JSON.stringify(survey.branding?.style)]);
     const styles = (0, react_2.useMemo)(() => makeStyles(contract), [contract]);
+    // A picture band outside the header keeps the CARD'S padding. padBand exists only when a density
+    // is set; without one the band had no horizontal padding at all and ran edge to edge, like
+    // "Half the card", while the header and body below it kept theirs (styles.body carries the
+    // contract's padding either way).
+    const bandPad = (0, react_2.useMemo)(() => {
+        if (padBand)
+            return padBand;
+        const b = react_native_1.StyleSheet.flatten(styles.body) || {};
+        return { paddingLeft: b.paddingLeft, paddingRight: b.paddingRight };
+    }, [padBand, styles]);
     const themeCard = isLight ? { backgroundColor: palette.card, borderColor: palette.cardBorder } : undefined;
     const themeTextPrimary = isLight ? { color: palette.textPrimary } : undefined;
     const themeTextSecondary = isLight ? { color: palette.textSecondary } : undefined;
@@ -1750,10 +1774,12 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
      * The alternative was a Fade control that worked in the preview and did
      * nothing here, which is the thing this codebase keeps having to undo.
      */
-    const fadeSteps = (towards) => {
-        if (!imgD.fade)
+    // `fade` is a parameter now, because there are two pictures asking: the
+    // card's and the confirmation's, each with its own slider.
+    const fadeSteps = (towards, fade = imgD.fade) => {
+        if (!fade)
             return null;
-        const span = Math.max(2, Math.min(96, imgD.fade)) / 100;
+        const span = Math.max(2, Math.min(96, fade)) / 100;
         const vertical = towards === 'top' || towards === 'bottom';
         // A REAL GRADIENT WHERE THE APP HAS ONE. react-native-svg is an optional
         // peer, already loaded this way by the signature question, and it draws
@@ -1879,6 +1905,96 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     const halfPadR = contract.cardPaddingRight ?? contract.cardPadding;
     const halfOuter = imgD.side === 'right' ? halfPadR : halfPadL;
     const halfWidth = Math.round(((cardWidth - halfPadL - halfPadR) * imgD.split) / 100) + halfOuter;
+    /**
+     * THE ENDING'S OWN PICTURE, which is not the card's.
+     *
+     * An offer's card sells the thing; its ending confirms it, and those want
+     * different images far more often than the same one. It stands IN FOR the
+     * ✓ glyph rather than sitting above it — a tick over a photograph is two
+     * things saying "done", and the author chose the photograph.
+     */
+    // The card's height, as it was just before the ending replaced it — a floor
+    // for the ending, never a cap, so a taller ending can still grow.
+    const cardHeightRef = (0, react_2.useRef)(0);
+    // A FLOOR AND A FILL, MINUS THE CARD'S OWN PADDING.
+    //
+    // The floor alone left the panel at its natural height inside a taller card,
+    // so a picture told to stretch beside the words took the confirmation's few
+    // lines rather than the card's height. And the floor was the CARD's height
+    // — the outer view, padding included — applied to a panel that sits inside
+    // that padding, which asks the card to grow by twice its own inset every
+    // time the ending appears. The web measures the CONTENT; this is the same
+    // number, arrived at by subtraction because the card is what onLayout sees.
+    const endPadTop = contract.cardPaddingTop ?? contract.cardPadding ?? 0;
+    const endPadBottom = contract.cardPaddingBottom ?? contract.cardPadding ?? 0;
+    const endingHold = cardHeightRef.current > 0
+        ? {
+            minHeight: Math.max(0, cardHeightRef.current - endPadTop - endPadBottom),
+            flexGrow: 1,
+        }
+        : null;
+    // THE CONFIRMATION'S OWN DESIGN, inheriting the card's until it has one —
+    // see confirmationDesign in the spec. It used to read `contract.imageHeight`
+    // and `contract.imageRadius` directly, which tied the icon on this screen to
+    // the photograph on the card: shrinking one shrank the other.
+    // WHERE THE CARD'S WORDS SIT. `titleAlign` was already a survey field; the
+    // other two are new and follow it, because a centred headline over a
+    // left-ragged paragraph is the commonest way a card looks accidental.
+    const cardTitleAlign = (0, survey_spec_1.alignOf)(survey.titleAlign, 'left');
+    const cardDescAlign = (0, survey_spec_1.alignOf)(survey.descriptionAlign, cardTitleAlign);
+    const cardQuestionAlign = (0, survey_spec_1.alignOf)(survey.questionAlign, 'left');
+    const confirmD = (0, survey_spec_1.confirmationDesign)(survey, 'mobile');
+    const endingImgSrc = confirmD.image.src;
+    const endingAlign = confirmD.heading.align === 'start' ? 'flex-start'
+        : confirmD.heading.align === 'end' ? 'flex-end' : 'center';
+    const endingTextAlign = confirmD.heading.align === 'start' ? 'left'
+        : confirmD.heading.align === 'end' ? 'right' : 'center';
+    // LINE HEIGHT MOVES WITH THE SIZE. The stylesheet pins 26 and 20, so a
+    // heading taken to 34 would have been clipped by its own leading.
+    // scaled() FIRST, so the accessibility font scale still multiplies an
+    // authored size — it used to scale a hard-coded 18 and the authored number
+    // would have replaced it outright.
+    const endingHeadSize = scaled(confirmD.heading.size);
+    const endingSubSize = scaled(confirmD.body.size);
+    const endingBodyAlign = confirmD.body.align === 'start' ? 'left'
+        : confirmD.body.align === 'end' ? 'right' : 'center';
+    const endingHeadFS = {
+        fontSize: endingHeadSize,
+        lineHeight: Math.round(endingHeadSize * 1.45),
+        textAlign: endingTextAlign,
+    };
+    const endingSubFS = {
+        fontSize: endingSubSize,
+        lineHeight: Math.round(endingSubSize * confirmD.body.lineHeight),
+        textAlign: endingBodyAlign,
+    };
+    // THE CARD'S WHOLE IMAGE VOCABULARY, on the second screen. It was a band and
+    // nothing else — no Fade, no Dim, no Alignment, no Layout — because the
+    // screen was built as a stack and the design was a hand-picked five fields
+    // of the card's. confirmationDesign now answers with a full ImageDesign, so
+    // there is one set of layouts and both screens draw from it.
+    const cI = confirmD.image;
+    const endingLayout = endingImgSrc ? cI.layout : 'none';
+    const endingSelf = cI.align === 'start' ? 'flex-start'
+        : cI.align === 'end' ? 'flex-end' : 'center';
+    const endingScrim = cI.scrim ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0,
+            backgroundColor: contract.card, opacity: cI.scrim / 100 } })) : null;
+    const endingPicture = (fill) => ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: endingImgSrc }, style: [{ width: '100%', height: '100%' }, fill], resizeMode: cI.fit, accessibilityIgnoresInvertColors: true }));
+    /** The band — the picture as a strip, at its own width and alignment. */
+    const endingImage = (endingLayout === 'above' || endingLayout === 'below') ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+            position: 'relative', overflow: 'hidden',
+            width: `${cI.width}%`, height: cI.height, borderRadius: cI.radius,
+            alignSelf: endingSelf, marginBottom: endingLayout === 'above' ? 16 : 0,
+            marginTop: endingLayout === 'below' ? 16 : 0,
+        }, children: [endingPicture({}), fadeSteps(endingLayout === 'below' ? 'top' : 'bottom', cI.fade), endingScrim] })) : null;
+    // THE SECOND PICTURE, between the card's and the headline. Square, so one
+    // number sizes it — and it replaces the ✓ rather than sitting under it.
+    const endingIcon = confirmD.icon.src ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: confirmD.icon.src }, style: {
+            width: confirmD.icon.size,
+            height: confirmD.icon.size,
+            borderRadius: confirmD.icon.radius,
+            marginBottom: 16,
+        }, resizeMode: confirmD.icon.fit, accessibilityIgnoresInvertColors: true })) : null;
     const cardImageHalf = imgLayout === 'half' ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
             position: 'relative',
             overflow: 'hidden',
@@ -2227,7 +2343,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         // uses, which is what keeps a deliberate flick from also counting as a tap.
         if (!st.moved) {
             if (cardTakesPress && cardImpliedList.length) {
-                pressImplied(cardImpliedKey, cardImpliedList[0]);
+                pressImplied(cardImpliedKey, cardImpliedList[0], 'card');
             }
             return;
         }
@@ -2273,11 +2389,14 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         const last = qs[qs.length - 1];
         const id = last?.name ?? last?.id ?? '';
         const action = id ? (responses[id] ?? null) : null;
-        return (0, survey_spec_1.outcomeFor)({
+        // The SCREEN, not the outcome the host hears: an accepted offer with no
+        // code is 'fulfil' to the host and the author's confirmation here — the
+        // web renderer asks the same question.
+        return (0, survey_spec_1.endingScreenFor)((0, survey_spec_1.outcomeFor)({
             interactionType: sv.interactionType, action,
             affirmative: String(action) === String(acts[0].value),
             reward: sv.reward, compliance: sv.compliance,
-        });
+        }), sv);
     }, [survey, responses]);
     const dismissMs = (0, survey_spec_1.autoDismissMs)(display, survey.delivery);
     const engagedRef = (0, react_2.useRef)(false);
@@ -2511,9 +2630,21 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         // Announced politely: urgency a sighted respondent gets from watching the
         // number should not be information only they receive.
         accessibilityLiveRegion: "polite", children: ["Ends in ", countdown.text] })) : null;
-    const progressEl = totalPages > 1 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [effShowPageNumbers && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.progress, children: [currentPage + 1, " / ", totalPages] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressBarTrack, accessible: true, accessibilityRole: "progressbar", accessibilityLabel: `Page ${currentPage + 1} of ${totalPages}`, accessibilityValue: { min: 1, max: totalPages, now: currentPage + 1 }, accessibilityLiveRegion: "polite", children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+    // Across pages the bar counts pages. On a single page it counts answered
+    // questions, as web and link do, so the setting never silently does nothing.
+    const _countable = currentQuestions.filter((q) => {
+        const t = String(q.type || '').toLowerCase();
+        return t !== 'html' && t !== 'pagebreak' && t !== 'content' && t !== 'implied';
+    });
+    const _answeredN = _countable.filter((q) => {
+        const v = responses[q.id || q.name];
+        return v != null && v !== '' && !(Array.isArray(v) && v.length === 0);
+    }).length;
+    const progressNow = totalPages > 1 ? currentPage + 1 : _answeredN;
+    const progressMax = totalPages > 1 ? totalPages : _countable.length;
+    const progressEl = (totalPages > 1 || _countable.length > 1) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [effShowPageNumbers && totalPages > 1 && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.progress, children: [currentPage + 1, " / ", totalPages] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressBarTrack, accessible: true, accessibilityRole: "progressbar", accessibilityLabel: totalPages > 1 ? `Page ${currentPage + 1} of ${totalPages}` : `${progressNow} of ${progressMax} answered`, accessibilityValue: { min: 0, max: progressMax, now: progressNow }, accessibilityLiveRegion: "polite", children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                         styles.progressBarFill,
-                        { width: `${((currentPage + 1) / totalPages) * 100}%`, backgroundColor: primaryColor },
+                        { width: `${(progressNow / progressMax) * 100}%`, backgroundColor: primaryColor },
                     ] }) })] })) : null;
     return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: visible, transparent: true, animationType: modalAnimation, 
         // Android's back gesture. Wrapped rather than passed: the handler now
@@ -2527,7 +2658,28 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             // The OVERLAY, not the card — a screen-shaped image with the card in
             // its real position, rather than a card-shaped one the replay player
             // would stretch across the whole device frame.
-            ref: (v) => { cardViewRef.current = v; }, pointerEvents: isPopupOverlay ? 'box-none' : 'auto', style: [
+            ref: (v) => { cardViewRef.current = v; }, 
+            // WITHOUT THIS THE VIEW MAY NOT EXIST NATIVELY, AND THE CAPTURE FAILS.
+            //
+            // React Native collapses views that have no native side effects. For a
+            // POPUP this overlay is exactly that: backgroundColor transparent and
+            // pointerEvents box-none, a container that only positions its child. So
+            // it was optimised away, findNodeHandle had nothing to resolve,
+            // captureRef rejected, captureView returned null, and the recorder fell
+            // back to the host captureScreen — which on iOS returns the TOPMOST
+            // UIWindow.
+            //
+            // That is why every offer and notification frame came back as whatever
+            // native alert happened to be up, floating on flat grey, with the card
+            // nowhere in it. Measured: three survey_shown frames at 73,548 / 73,512
+            // / 73,528 bytes — the same wrong image each time — in a session where
+            // the respondent demonstrably swiped one card away, closed another and
+            // completed a third.
+            //
+            // It fails for popups specifically BECAUSE popups are the transparent
+            // ones; a modal paints a scrim and survives collapsing, which is why
+            // this looked like "offers are broken" rather than "capture is".
+            collapsable: false, pointerEvents: isPopupOverlay ? 'box-none' : 'auto', style: [
                 styles.overlay,
                 // Transparent for a popup — the app behind it is not being taken over.
                 isPopupOverlay && { backgroundColor: 'transparent' },
@@ -2552,10 +2704,19 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                     // Feeds the authored-coordinate maths above. Only tracked when a
                     // coordinate is actually in play, and only on a real change, so the
                     // common case costs nothing and this cannot loop.
-                    onLayout: hasPopupY ? (e) => {
+                    // MEASURED ALWAYS, not only for a coordinate. The second reader is
+                    // the confirmation: it replaces the card's whole content, and the
+                    // two screens hold different amounts — so the card shrank under a
+                    // respondent who had just pressed a button on it, which reads as a
+                    // different card arriving rather than the same one answering. The
+                    // last height measured BEFORE the ending becomes its floor.
+                    onLayout: (e) => {
                         const h = Math.round(e.nativeEvent.layout.height);
-                        setMeasuredCardH((prev) => (Math.abs(prev - h) > 1 ? h : prev));
-                    } : undefined, style: [
+                        if (!showThankYou && h > 0)
+                            cardHeightRef.current = h;
+                        if (hasPopupY)
+                            setMeasuredCardH((prev) => (Math.abs(prev - h) > 1 ? h : prev));
+                    }, style: [
                         styles.card,
                         themeCard,
                         enterStyle,
@@ -2575,34 +2736,96 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                     ], children: [cardImageBack, closeShown && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { ...swipeExempt, style: [
                                 styles.closeButton,
                                 isRtl ? { left: contract.closeInset } : { right: contract.closeInset },
-                            ], onPress: () => handleDismiss('close'), activeOpacity: 0.7, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.closeGlyph, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.closeBar, { transform: [{ rotate: '45deg' }] }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.closeBar, { transform: [{ rotate: '-45deg' }] }] })] }) })), showThankYou && endingKind !== 'thanks' && (0, survey_spec_1.showsConfirmation)(survey) ? (() => {
-                            const rw = (0, survey_spec_1.rewardToShow)(survey);
+                            ], onPress: () => handleDismiss('close'), activeOpacity: 0.7, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.closeGlyph, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.closeBar, { transform: [{ rotate: '45deg' }] }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.closeBar, { transform: [{ rotate: '-45deg' }] }] })] }) })), showThankYou && endingKind !== 'thanks' && endingKind !== 'fulfil' && (0, survey_spec_1.showsConfirmation)(survey) ? (() => {
                             const comp = survey.compliance;
-                            if (endingKind === 'fulfil' && rw) {
-                                const exp = rw.expiresAt ? new Date(rw.expiresAt) : null;
-                                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.thankYou, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, fontStyle, themeTextPrimary], children: (0, survey_spec_1.confirmationText)(survey, 'It’s yours') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: true, style: [styles.rewardCode, fontStyle, themeTextPrimary], children: rw.value }), !!rw.whereValid && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: rw.whereValid })), !!exp && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: ["Expires ", exp.toLocaleString()] }))] }));
-                            }
                             if (endingKind === 'hold') {
-                                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.thankYou, accessibilityLiveRegion: "polite", children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, fontStyle, themeTextPrimary], children: comp?.reviewRequired ? 'Under review' : 'Not completed' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: comp?.blockedMessage
+                                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.thankYou, endingHold, { alignItems: endingAlign }], accessibilityLiveRegion: "polite", children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, fontStyle, themeTextPrimary, endingHeadFS], children: comp?.reviewRequired ? 'Under review' : 'Not completed' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary, endingSubFS], children: comp?.blockedMessage
                                                 ?? (comp?.reviewRequired
                                                     ? 'We’re checking your details. You’ll be able to continue once that’s done.'
                                                     : 'You need to accept this before you can continue.') })] }));
                             }
                             if (endingKind === 'unblock') {
-                                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.thankYou, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, fontStyle, themeTextPrimary], children: "Recorded" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: "You can carry on." })] }));
+                                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.thankYou, endingHold, { alignItems: endingAlign }], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, fontStyle, themeTextPrimary, endingHeadFS], children: "Recorded" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary, endingSubFS], children: "You can carry on." })] }));
                             }
-                            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.thankYou, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: endingKind === 'navigate' ? 'Taking you there…' : 'Closed.' }) }));
+                            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.thankYou, endingHold, { alignItems: endingAlign }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary, endingSubFS], children: endingKind === 'navigate' ? 'Taking you there…' : 'Closed.' }) }));
+                        })() : (showThankYou && (reply === 'pending' || reply === 'failed' || reply === 'later')) ? (() => {
+                            // WAITING FOR THE APP, or what came of it — the author's words for
+                            // each state (appReply), in the confirmation's own header style.
+                            const ar = (0, survey_spec_1.appReply)(survey);
+                            const words = reply === 'pending' ? ar.pending : reply === 'failed' ? ar.failed : ar.later;
+                            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.thankYou, endingHold, { alignItems: endingAlign }], accessibilityLiveRegion: reply === 'failed' ? 'assertive' : 'polite', children: [reply === 'pending' && (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: primaryColor, style: { marginBottom: 12 } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, dirText, fontStyle, themeTextPrimary, endingHeadFS], children: (0, interpolate_1.interpolatePlain)(words, evalCtx) })] }));
                         })() : showThankYou ? (() => {
                             // The thank-you message can be rich HTML from the web builder.
                             // Pull out an embedded <img> (often a data: URI icon) and render
                             // it as a real Image — stripHtml would otherwise drop it — then
                             // show the remaining text. When an image is present it stands in
                             // for the default ✓ glyph.
+                            // THE CONFIRMATION'S COMPONENTS, under its headline and body — the
+                            // schema's list, derived for anything made before v1.2 (a code
+                            // offer gets its code). Same rule the web renderer asks.
+                            const endParts = (0, survey_spec_1.confirmationQuestions)(survey);
+                            const endReward = (0, survey_spec_1.rewardToShow)(survey);
+                            const hasCode = !!endReward && endReward.type === 'code'
+                                && endParts.some((q) => String(q.type).toLowerCase() === 'reward');
                             const rawThankYou = (0, interpolate_1.interpolatePlain)((0, translationLookup_1.surveyText)(survey, currentLanguage, 'thankYouMessage', survey.settings?.thankYouMessage)
-                                ?? 'Thank you for your feedback!', evalCtx);
+                                ?? (0, survey_spec_1.confirmationDefaults)(survey, hasCode).title, evalCtx);
+                            const partViews = endParts.map((q) => {
+                                const t = String(q.type).toLowerCase();
+                                if (t === 'reward') {
+                                    if (!hasCode || !endReward)
+                                        return null;
+                                    const exp = endReward.expiresAt ? new Date(endReward.expiresAt) : null;
+                                    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { marginTop: 14, alignItems: endingAlign }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: true, style: [styles.rewardCode, fontStyle, themeTextPrimary], children: endReward.value }), !!endReward.whereValid && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, dirText, fontStyle, themeTextSecondary, endingSubFS], children: endReward.whereValid })), !!exp && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.thankYouSub, dirText, fontStyle, themeTextSecondary, endingSubFS], children: ["Expires ", exp.toLocaleString()] }))] }, q.id));
+                                }
+                                const words = stripHtml((0, interpolate_1.interpolatePlain)(String(q.html ?? q.text ?? ''), evalCtx));
+                                return words ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, dirText, fontStyle, themeTextPrimary, endingSubFS, { marginTop: 12 }], children: words }, q.id)) : null;
+                            });
                             const imgSrc = firstImageSrc(rawThankYou);
                             const thankYouText = stripHtml(rawThankYou);
-                            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.thankYou, children: [imgSrc ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: imgSrc }, style: styles.thankYouImage, resizeMode: "contain" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouEmoji, { color: primaryColor }], children: "\u2713" })), thankYouText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, dirText, fontStyle, themeTextPrimary, thankYouFS], children: thankYouText })) : null] }));
+                            // THE WORDS, AS ONE BLOCK — so a layout can put them beside the
+                            // picture, after it, or on top of it without three copies. The ✓
+                            // stands in only when NEITHER picture is set; it used to stand in
+                            // for the first alone, so a badge added to a card that already had
+                            // a photograph drew the photograph and swallowed the badge.
+                            const endWords = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [endingIcon || ((endingImgSrc || imgSrc || hasCode) ? null : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouEmoji, { color: primaryColor }], children: "\u2713" }))), thankYouText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, dirText, fontStyle, themeTextPrimary, endingHeadFS], children: thankYouText })) : null, (() => {
+                                        const sub = (0, survey_spec_1.confirmationSubtext)(survey, (0, survey_spec_1.confirmationDefaults)(survey, hasCode).body);
+                                        return sub ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, dirText, fontStyle, themeTextSecondary, endingSubFS], children: (0, interpolate_1.interpolatePlain)(sub, evalCtx) })) : null;
+                                    })(), partViews] }));
+                            // THE CARD'S OWN PADDING, undone on the picture's side only. The
+                            // panel's 48 used to sit INSIDE the card's, so the same picture at
+                            // the same Height drew smaller here than on the card.
+                            const endPad = 0;
+                            if (endingLayout === 'beside') {
+                                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.thankYou, endingHold, {
+                                            alignItems: 'stretch', flexDirection: 'row', gap: 12,
+                                        }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                                                position: 'relative', overflow: 'hidden', alignSelf: endingSelf,
+                                                width: cI.size, height: cI.size, borderRadius: cI.radius,
+                                            }, children: [endingPicture({}), endingScrim] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1, minWidth: 0, alignItems: endingAlign, justifyContent: 'center' }, children: endWords })] }));
+                            }
+                            if (endingLayout === 'half') {
+                                const vert = cI.side === 'top';
+                                // Negative margins undo the panel's own padding on the picture's
+                                // side only — the words keep theirs, which is what "bleeds to
+                                // the edges" means on the card too.
+                                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.thankYou, endingHold, {
+                                            alignItems: 'stretch',
+                                            flexDirection: vert ? 'column' : (cI.side === 'right' ? 'row-reverse' : 'row'),
+                                            gap: vert ? 0 : 14,
+                                        }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                                                position: 'relative', overflow: 'hidden',
+                                                ...(vert
+                                                    ? { marginTop: -endPad, marginLeft: -endPad, marginRight: -endPad,
+                                                        marginBottom: 16, height: cI.height }
+                                                    : { marginTop: -endPad, marginBottom: -endPad,
+                                                        [cI.side === 'right' ? 'marginRight' : 'marginLeft']: -endPad,
+                                                        width: `${cI.split}%` }),
+                                            }, children: [endingPicture({}), fadeSteps(vert ? 'bottom' : (cI.side === 'right' ? 'left' : 'right'), cI.fade), endingScrim] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1, minWidth: 0, alignItems: endingAlign, justifyContent: 'center' }, children: endWords })] }));
+                            }
+                            if (endingLayout === 'background') {
+                                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.thankYou, endingHold, { alignItems: endingAlign }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, overflow: 'hidden' }, children: [endingPicture({}), endingScrim] }), endWords] }));
+                            }
+                            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.thankYou, endingHold, { alignItems: endingAlign }], children: [endingLayout === 'above' ? endingImage : null, (!endingImgSrc && imgSrc) ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: imgSrc }, style: styles.thankYouImage, resizeMode: "contain" })) : null, endWords, endingLayout === 'below' ? endingImage : null] }));
                         })() : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: halfSide
                                 ? { flexDirection: imgD.side === 'right' ? 'row-reverse' : 'row',
                                     alignItems: 'stretch' }
@@ -2625,7 +2848,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                                 ? { marginRight: 12 - halfPadR }
                                                 : { marginLeft: 12 - halfPadL }),
                                         }
-                                        : undefined, children: [langSwitcher, imgLayout === 'above' ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: padBand, children: cardImageBand }) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                        : undefined, children: [langSwitcher, imgLayout === 'above' && (besideImage || notifyBeside) ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: bandPad, children: cardImageBand }) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                                 styles.header,
                                                 padHeader,
                                                 // No ✕ reservation here in either direction — the title carries
@@ -2644,7 +2867,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                                             : survey.branding?.logoAlign === 'right'
                                                                 ? { justifyContent: 'flex-end' }
                                                                 : null),
-                                                    ], children: [survey.branding?.showLogo !== false && survey.branding?.logo ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: survey.branding.logo }, style: styles.brandLogo, resizeMode: "contain", accessible: !!survey.branding.brandName, accessibilityLabel: survey.branding.brandName })) : null, survey.branding?.brandName ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.brandName, dirText, fontStyle, themeTextSecondary], children: survey.branding.brandName })) : null] })), besideImage ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: cardImageQ?.imageUrl }, accessibilityLabel: cardImageQ?.alt || undefined, accessible: !!cardImageQ?.alt, style: {
+                                                    ], children: [survey.branding?.showLogo !== false && survey.branding?.logo ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: survey.branding.logo }, style: styles.brandLogo, resizeMode: "contain", accessible: !!survey.branding.brandName, accessibilityLabel: survey.branding.brandName })) : null, survey.branding?.brandName ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.brandName, dirText, fontStyle, themeTextSecondary], children: survey.branding.brandName })) : null] })), imgLayout === 'above' && !(besideImage || notifyBeside) ? cardImageBand : null, besideImage ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: cardImageQ?.imageUrl }, accessibilityLabel: cardImageQ?.alt || undefined, accessible: !!cardImageQ?.alt, style: {
                                                         width: contract.imageSize,
                                                         height: contract.imageSize,
                                                         borderRadius: contract.imageRadius,
@@ -2656,9 +2879,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                                             : imgD.align === 'end' ? 'flex-end' : 'center',
                                                     }, resizeMode: imgD.fit })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: (besideImage || notifyBeside) ? { flex: 1, minWidth: 0 } : undefined, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, dirText, fontStyle, themeTextPrimary, titleFS, notifyTitleFS,
                                                                 closeReserve,
-                                                                survey.titleAlign
-                                                                    ? { textAlign: survey.titleAlign }
-                                                                    : null], children: (0, interpolate_1.interpolatePlain)(
+                                                                { textAlign: cardTitleAlign }], children: (0, interpolate_1.interpolatePlain)(
                                                             // Title is plain text; strip any stray rich-text markup +
                                                             // decode &nbsp; so it never shows literal HTML on native.
                                                             String((0, translationLookup_1.surveyText)(survey, currentLanguage, 'title', survey.title) || '')
@@ -2672,6 +2893,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                                                     const descRaw = (0, translationLookup_1.surveyText)(survey, currentLanguage, 'description', survey.description);
                                                                     const desc = String(descRaw || '').replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' ').trim();
                                                                     return desc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.description, dirText, fontStyle, themeTextSecondary, descFS, notifyDescFS,
+                                                                            { textAlign: cardDescAlign },
                                                                             // Takes the width the button leaves, and no more.
                                                                             notifyBeside && { flex: 1, minWidth: 0, marginTop: 2 }], children: (0, interpolate_1.interpolatePlain)(desc, evalCtx) })) : null;
                                                                 })(), notifyActionQ ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexShrink: 0, marginLeft: 12 }, children: renderQuestion(notifyActionQ) })) : null] })] }), deadlineEl, (() => {
@@ -2681,7 +2903,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                                             { fontSize: Math.round((_num(_authoredStyle.fontSizeDescription) ?? 14) * 0.85),
                                                                 marginTop: 6 },
                                                         ], children: (0, interpolate_1.interpolatePlain)(terms, evalCtx) })) : null;
-                                                })(), showProgressTop && progressEl] }), imgLayout === 'below' ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: padBand, children: cardImageBand }) : null, (0, jsx_runtime_1.jsx)(BodyContainer, { style: [styles.body, padBody, fsContent], showsVerticalScrollIndicator: false, children: currentQuestions.filter((q) => {
+                                                })(), showProgressTop && progressEl] }), imgLayout === 'below' ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: bandPad, children: cardImageBand }) : null, (0, jsx_runtime_1.jsx)(BodyContainer, { style: [styles.body, padBody, fsContent], showsVerticalScrollIndicator: false, children: currentQuestions.filter((q) => {
                                                 // The card composes the picture itself — beside the text, in
                                                 // a band, or behind everything. Leaving it here too would
                                                 // render it twice, the second time full-bleed.
@@ -2727,7 +2949,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                                         // have. Web spends 12px above the action and nothing
                                                         // below it (`.cxp-notify-action-below`); this matches.
                                                         isNotifyBanner && { marginTop: 12, marginBottom: 0 },
-                                                    ], children: [!(0, survey_spec_1.showsQuestionLabel)(q) ? null : ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.questionTitle, dirText, fontStyle, themeTextPrimary, qTitleFS], 
+                                                    ], children: [!(0, survey_spec_1.showsQuestionLabel)(q) ? null : ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.questionTitle, dirText, fontStyle, themeTextPrimary, qTitleFS, { textAlign: cardQuestionAlign }], 
                                                             // The asterisk below is decoration: a screen reader
                                                             // reads it as "star", or skips it, so a required
                                                             // question sounded exactly like an optional one until
@@ -2736,7 +2958,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                                             if (isImplied)
                                                                 return null;
                                                             const qDesc = (0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'description', q.description);
-                                                            return qDesc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.questionDesc, dirText, fontStyle, themeTextMuted, qDescFS], children: (0, interpolate_1.interpolatePlain)(qDesc, evalCtx) })) : null;
+                                                            return qDesc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.questionDesc, dirText, fontStyle, themeTextMuted, qDescFS, { textAlign: cardQuestionAlign }], children: (0, interpolate_1.interpolatePlain)(qDesc, evalCtx) })) : null;
                                                         })(), renderQuestion(q), errors[rowKey] ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.errorText, dirText, fontStyle], 
                                                             // Announced when it appears, and reachable afterwards:
                                                             // a message that is only spoken once leaves someone who
@@ -2766,7 +2988,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                                         // Right-align parity with web: Back hugs the left edge while
                                                         // Next/Submit sits on the right (web uses margin-right:auto).
                                                         buttonAlign === 'right' && { marginRight: 'auto' },
-                                                    ], onPress: handleBack, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.backButtonText, fontStyle, themeTextSecondary, buttonFS], children: "Back" }) })), impliedNow.length > 0 ? null : (() => {
+                                                    ], onPress: handleBack, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.backButtonText, fontStyle, themeTextSecondary, buttonFS], children: "Back" }) })), impliedNow.length > 0 || !(0, survey_spec_1.drawsOwnSubmit)(survey.interactionType) ? null : (() => {
                                                     // Reflect the actual outcome of pressing Next: if a
                                                     // branch resolves to __end__ we're submitting even
                                                     // when we're not on the last page. Cheap to evaluate
@@ -3139,7 +3361,12 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
         fontWeight: '700',
     },
     thankYou: {
-        padding: 48,
+        // NO PADDING OF ITS OWN. The card already pads its content; a second inset
+        // here made the confirmation's box narrower and shorter than the card's,
+        // so the same picture at the same Width and Height drew smaller on the
+        // second screen with no control to explain it. The components space
+        // themselves with their own margins, exactly as they do on the card.
+        paddingVertical: 8,
         alignItems: 'center',
         justifyContent: 'center',
     },
@@ -3149,8 +3376,9 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
         marginBottom: 16,
     },
     thankYouImage: {
-        width: 72,
-        height: 72,
+        // FULL WIDTH, and the height comes from the contract at the render site.
+        // 72x72 was a glyph's footprint, not a picture's.
+        width: '100%',
         marginBottom: 16,
     },
     thankYouTitle: {
@@ -3161,6 +3389,15 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
         lineHeight: 26,
     },
     thankYouSub: {
+        // A COLOUR OF ITS OWN, because the override beside it is LIGHT-ONLY.
+        //
+        // themeTextSecondary is `isLight ? {...} : undefined`, on the assumption
+        // that every style it decorates already carries the DARK colour. This one
+        // carried none, so on a dark card it fell through to React Native's
+        // default Text colour — black — and the confirmation's sub-line was dark
+        // text on a dark background. The title above it was fine because it had
+        // `c.headingColor`; that difference is the whole bug.
+        color: c.textSecondary,
         fontSize: 14,
         textAlign: 'center',
         lineHeight: 20,
@@ -3170,6 +3407,8 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
     // button here because RN's clipboard is an optional peer, and a code you can
     // select is better than a button that may not exist.
     rewardCode: {
+        // Same fault, and worse: this is the discount code itself.
+        color: c.textPrimary,
         fontSize: 22,
         fontWeight: '700',
         letterSpacing: 1.5,