@cxpinsight/react-native 0.8.0 → 0.10.0

package/lib/survey/SurveyModal.js

@@ -51,6 +51,7 @@ const MatrixDropdownQuestion_1 = require("./questions/MatrixDropdownQuestion");
 const MatrixDynamicQuestion_1 = require("./questions/MatrixDynamicQuestion");
 const PanelDynamicQuestion_1 = require("./questions/PanelDynamicQuestion");
 const DateQuestion_1 = require("./questions/DateQuestion");
+const survey_spec_1 = require("@cxpinsight/survey-spec");
 const SignatureQuestion_1 = require("./questions/SignatureQuestion");
 const FileUploadQuestion_1 = require("./questions/FileUploadQuestion");
 const MultiTextQuestion_1 = require("./questions/MultiTextQuestion");
@@ -241,13 +242,22 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // defaults to "visible". Fail-open on parse errors — see
     // expressionEval.ts.
     const isVisible = (q) => {
-        if (q.showWhen && !(0, expressionEval_1.evaluateCondition)(q.showWhen, evalCtx))
+        // Prefer the tree the server compiled; fall back to parsing the string.
+        // Guarded inside evaluateConditionCompiled, because an app on
+        // survey-spec@0.4.0 has no tree walker at all.
+        const qc = q;
+        if (q.showWhen && !(0, expressionEval_1.evaluateConditionCompiled)(q.showWhen, qc.showWhenCompiled, evalCtx))
             return false;
-        if (q.hideWhen && (0, expressionEval_1.evaluateCondition)(q.hideWhen, evalCtx))
+        if (q.hideWhen && (0, expressionEval_1.evaluateConditionCompiled)(q.hideWhen, qc.hideWhenCompiled, evalCtx))
             return false;
         return true;
     };
     const currentQuestions = (pages[currentPage]?.elements ?? []).filter(isVisible);
+    // A step ending in an implied question has no Next/Submit — its action
+    // buttons are the answer, and pressing one commits. Shared with the web SDK
+    // and the React renderer so a Notify/Offer/Comply template behaves the same
+    // on a phone as it does on a website. Suppresses the footer below.
+    const impliedNow = (0, survey_spec_1.impliedStepActions)(currentQuestions);
     const updateResponse = (0, react_1.useCallback)((name, value) => {
         setResponses((prev) => ({ ...prev, [name]: value }));
         // Live-clear the error entry the moment the new answer passes
@@ -275,7 +285,8 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             if (!Array.isArray(q.branches) || q.branches.length === 0)
                 continue;
             for (const b of q.branches) {
-                if (b.when && !(0, expressionEval_1.evaluateCondition)(b.when, evalCtx))
+                const bc = b;
+                if (b.when && !(0, expressionEval_1.evaluateConditionCompiled)(b.when, bc.whenCompiled, evalCtx))
                     continue;
                 if (b?.target === 'flow') {
                     if (!b.flowId)
@@ -382,6 +393,9 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             setForkStack([]);
         }, duration);
     };
+    // Kept fresh on every render so an implied action's deferred press runs the
+    // current closure rather than the one captured when the button mounted.
+    const handleNextRef = react_1.default.useRef(() => { });
     const handleNext = () => {
         const pageErrors = validateCurrentPage();
         if (Object.keys(pageErrors).length > 0) {
@@ -437,6 +451,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         setHistory((h) => [...h, { pageIndex: currentPage, flow: currentFlow }]);
         setCurrentPage(linearNext);
     };
+    handleNextRef.current = handleNext;
     const handleBack = () => {
         // Non-linear navigation: pop the actual history stack, not just
         // currentPage - 1 (which would skip over a jump). Any errors
@@ -462,6 +477,9 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             setCurrentPage((p) => p - 1);
         }
     };
+    // Kept fresh so the memoized pan responder never dismisses through a stale
+    // closure — the same reason handleNextRef exists.
+    const handleDismissRef = (0, react_1.useRef)(() => { });
     const handleDismiss = () => {
         setCurrentPage(0);
         setResponses({});
@@ -473,6 +491,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         setForkStack([]);
         onDismiss();
     };
+    handleDismissRef.current = handleDismiss;
     // Normalize the v1.1 options[] {value,label} and the legacy
     // choices[] (string | {value,text}) into a single shape that
     // MultipleChoiceQuestion accepts. hasOther appends a synthetic
@@ -499,7 +518,30 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         }
         return out;
     }
-    function renderQuestion(question) {
+    /**
+     * Compiled props, under the names the existing renderers already read.
+     *
+     * The renderers were written against the author's question shape
+     * (minValue/maxValue, options); the server's compiler emits the contract's
+     * names (min/max). Translating onto a COPY avoids touching thirty-nine
+     * renderers, and author fields win — the compiler derives csat's 1..5 because
+     * the author stated none, and must never override a range they did state.
+     */
+    function applyRenderProps(q) {
+        const r = q.render;
+        if (!r || !r.props)
+            return q;
+        const out = { ...q };
+        const MAP = { min: 'minValue', max: 'maxValue' };
+        for (const [k, v] of Object.entries(r.props)) {
+            const target = MAP[k] || k;
+            if (out[target] === undefined || out[target] === null)
+                out[target] = v;
+        }
+        return out;
+    }
+    function renderQuestion(rawQuestion) {
+        const question = applyRenderProps(rawQuestion);
         const key = question.id || question.name;
         const val = responses[key];
         // Shown when a question type needs an optional peer the host app did not
@@ -644,6 +686,51 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             // they render for real; when it did not, they fall back to the hint that
             // used to be the ONLY behaviour. Nothing is forced into an app's bundle
             // for a question type it never asks.
+            // A Notify, Offer or Comply interaction asks one question and the answer
+            // is which action was taken. The choices ARE the buttons, and their
+            // labels come from the shared spec so "Activate discount" reads the same
+            // here as on a website and on a link.
+            'implied': () => {
+                // Same resolver the thank-you text uses, so `myapp://cart/{{id}}`
+                // opens the customer's cart rather than a literal deep link nothing
+                // can handle.
+                const actions = (0, survey_spec_1.impliedActions)(question, (t) => (0, interpolate_1.interpolatePlain)(t, evalCtx));
+                const list = actions.length ? actions : [{ value: 'acknowledged', label: 'Continue' }];
+                // Consent choices render identically — see impliedEqualProminence.
+                const equal = (0, survey_spec_1.impliedEqualProminence)([question]);
+                return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.impliedActions, children: list.map((a, i) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { 
+                        // The press is both the answer and the Next — the footer is
+                        // hidden on this step. Deferred a tick so setResponses has
+                        // flushed before handleNext validates what it just replaced.
+                        onPress: () => {
+                            // "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 make and retire it
+                            // against maxSubmissions. It does not follow the action's
+                            // link either — postponing is not a request to go anywhere.
+                            if (a.defer) {
+                                handleDismissRef.current();
+                                return;
+                            }
+                            updateResponse(key, a.value);
+                            setTimeout(() => handleNextRef.current(), 0);
+                            // Follow the action's deep link. `myapp://cart` is the point
+                            // of this on a phone; Linking refuses a scheme the OS has no
+                            // handler for, so a bad target fails quietly rather than
+                            // crashing the survey. The href already passed
+                            // safeActionHref in the shared spec.
+                            if (a.href) {
+                                react_native_1.Linking.openURL(a.href).catch(() => { });
+                            }
+                        }, accessibilityRole: "button", accessibilityState: { selected: val === a.value }, style: [
+                            styles.impliedBtn,
+                            // The first action is the affirmative one. An author who
+                            // lists "Decline" first gets it emphasised — their call.
+                            (i === 0 && !equal) ? styles.impliedPrimary : styles.impliedSecondary,
+                            val === a.value && styles.impliedChosen,
+                        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: (i === 0 && !equal) ? styles.impliedPrimaryLabel : styles.impliedSecondaryLabel, children: a.label }) }, a.value || String(i)))) }));
+            },
             'signature': () => {
                 if (!(0, SignatureQuestion_1.isSignatureAvailable)())
                     return renderDesktopHint();
@@ -661,6 +748,37 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             // still runs. Server-side validation will reject any junk.
             return ((0, jsx_runtime_1.jsx)(TextQuestion_1.TextQuestion, { value: val ?? '', onChange: (v) => updateResponse(key, v), placeholder: question.placeholder, contract: contract }));
         };
+        // ── Primitive dispatch ────────────────────────────────────────────
+        //
+        // The server compiles a question type to one of eight primitives plus a
+        // presentation hint. Dispatching on THAT means a question type this build
+        // has never heard of still renders — which matters more here than on the
+        // web, where a new type arrives with the next SDK fetch. On mobile it would
+        // otherwise need an App Store release and every respondent updating.
+        //
+        // The markup is the existing markup: this maps a primitive onto the
+        // renderer that already draws it. Anything without an entry — slider, and
+        // the grid/group/display/capture families — falls through to the type
+        // table exactly as before.
+        const PRIMITIVES = {
+            'choice_one:list': 'radio',
+            'choice_one:dropdown': 'dropdown',
+            'choice_one:toggle': 'binary',
+            'choice_one:images': 'image_picker',
+            'choice_one:scale': 'nps',
+            'choice_one:stars': 'rating',
+            'choice_one:actions': 'implied',
+            'choice_many:list': 'checkbox',
+            'choice_many:rank': 'ranking',
+            'text:single': 'text',
+            'text:multi': 'comment',
+        };
+        const render = question.render;
+        const primName = render && render.primitive
+            ? PRIMITIVES[`${render.primitive}:${render.presentation || ''}`]
+            : undefined;
+        if (primName && RENDERERS[primName])
+            return RENDERERS[primName]();
         const _fn = RENDERERS[String(question.type || '')] || renderUnsupported;
         return _fn();
     }
@@ -1138,6 +1256,75 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
             useNativeDriver: true,
         }).start();
     }, [visible, needsTopSlide, enterAnim]);
+    // ── Swipe to dismiss ────────────────────────────────────────────────
+    //
+    // A push notification goes away when you flick it. The mobile display slice
+    // drops the ✕ for exactly that reason, so this is the affordance that
+    // replaces it — without it the banner would simply be stuck on screen.
+    //
+    // canSwipeToDismiss requires a popup and vetoes `mustShow`, which is what
+    // keeps a compliance takeover — showClose:false for the OPPOSITE reason —
+    // from ever becoming flickable.
+    const swipeable = (0, survey_spec_1.canSwipeToDismiss)(display, survey.delivery);
+    const swipeXY = (0, react_1.useRef)(new react_native_1.Animated.ValueXY({ x: 0, y: 0 })).current;
+    const swipeResponder = (0, react_1.useMemo)(() => react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => false,
+        // Claim the gesture only once it is clearly a drag, so a tap on the action
+        // button still presses the button.
+        onMoveShouldSetPanResponder: (_e, g) => swipeable && (Math.abs(g.dx) > 8 || Math.abs(g.dy) > 8),
+        onPanResponderMove: (_e, g) => {
+            const horizontal = Math.abs(g.dx) > Math.abs(g.dy);
+            // A top banner travels up, never down — dragging it down is a pull.
+            const dy = placement === 'top' ? Math.min(0, g.dy) : placement === 'bottom' ? Math.max(0, g.dy) : g.dy;
+            swipeXY.setValue(horizontal ? { x: g.dx, y: 0 } : { x: 0, y: dy });
+        },
+        onPanResponderRelease: (_e, g) => {
+            const horizontal = Math.abs(g.dx) > Math.abs(g.dy);
+            const moved = horizontal ? g.dx : g.dy;
+            const fast = Math.abs(horizontal ? g.vx : g.vy) > 0.5;
+            if (Math.abs(moved) >= 56 || fast) {
+                const to = moved < 0 ? -SCREEN_HEIGHT : SCREEN_HEIGHT;
+                react_native_1.Animated.timing(swipeXY, {
+                    toValue: horizontal ? { x: moved < 0 ? -SCREEN_WIDTH : SCREEN_WIDTH, y: 0 } : { x: 0, y: to },
+                    duration: 180, useNativeDriver: true,
+                }).start(() => { swipeXY.setValue({ x: 0, y: 0 }); handleDismissRef.current(); });
+                return;
+            }
+            react_native_1.Animated.spring(swipeXY, { toValue: { x: 0, y: 0 }, useNativeDriver: true, bounciness: 6 }).start();
+        },
+    }), [swipeable, placement, swipeXY]);
+    // Auto-dismiss. Same rule as web (autoDismissMs vetoes fullscreen and
+    // mustShow, clamps to 2s). Cancelled for good once the respondent touches
+    // anything — a timer that fires after someone has started answering would
+    // pull the survey out from under them.
+    // Which ending this interaction gets — see the render block below.
+    const endingKind = (0, react_1.useMemo)(() => {
+        const sv = survey;
+        const qs = (survey.rawQuestions ?? []);
+        const acts = (0, survey_spec_1.impliedStepActions)(qs) || [];
+        if (!acts.length)
+            return 'thanks';
+        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)({
+            interactionType: sv.interactionType, action,
+            affirmative: String(action) === String(acts[0].value),
+            reward: sv.reward, compliance: sv.compliance,
+        });
+    }, [survey, responses]);
+    const dismissMs = (0, survey_spec_1.autoDismissMs)(display, survey.delivery);
+    const engagedRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!visible || !dismissMs)
+            return;
+        engagedRef.current = false;
+        const t = setTimeout(() => {
+            if (!engagedRef.current)
+                handleDismissRef.current();
+        }, dismissMs);
+        return () => clearTimeout(t);
+    }, [visible, dismissMs]);
     const enterStyle = needsTopSlide
         ? {
             opacity: enterAnim,
@@ -1293,10 +1480,11 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                 // A sheet sits flush against its edge, so the overlay loses its gutter.
                 isSheet && { paddingHorizontal: 0, paddingTop: 0, paddingBottom: 0 },
                 isFullscreen && styles.overlayFullscreen,
-            ], behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height', children: [(0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [
+            ], behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height', children: [(0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { onTouchStart: () => { engagedRef.current = true; }, ...(swipeable ? swipeResponder.panHandlers : {}), style: [
                         styles.card,
                         themeCard,
                         enterStyle,
+                        swipeable && { transform: swipeXY.getTranslateTransform() },
                         maxWidth !== undefined && !isFullscreen && { width: Math.min(SCREEN_WIDTH - 40, maxWidth), maxWidth },
                         cornerRadius !== undefined && !isFullscreen && { borderRadius: cornerRadius },
                         // cardFullscreen fills; an explicit content height/width below OVERRIDES
@@ -1309,7 +1497,24 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                     ], children: [display?.showClose !== false && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
                                 styles.closeButton,
                                 isRtl ? { left: 12 } : { right: 12 },
-                            ], onPress: handleDismiss, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.closeText, themeTextSecondary], children: "\u2715" }) })), showThankYou ? (() => {
+                            ], onPress: handleDismiss, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.closeText, themeTextSecondary], children: "\u2715" }) })), showThankYou && endingKind !== 'thanks' ? (() => {
+                            const rw = (0, survey_spec_1.rewardToShow)(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: "It\u2019s yours" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouSub, fontStyle, themeTextSecondary], children: "Use this at checkout." }), (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
+                                                ?? (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.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.' }) }));
+                        })() : 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
@@ -1392,7 +1597,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" }) })), (() => {
+                                            ], 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 : (() => {
                                             // 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
@@ -1606,6 +1811,18 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
     // "Please complete on desktop" hint shown for question types that
     // require heavy native UX (matrix, panelDynamic, signature, etc.).
     // Phase 4.5 will bring native implementations for the priority ones.
+    // Implied actions: the buttons ARE the answer, so they get real button
+    // weight rather than looking like an option list.
+    impliedActions: { flexDirection: 'row', flexWrap: 'wrap', gap: 10, marginTop: 4 },
+    impliedBtn: {
+        flexGrow: 1, flexBasis: 140, paddingVertical: 13, paddingHorizontal: 18,
+        borderRadius: 8, alignItems: 'center', borderWidth: 1, borderColor: 'transparent',
+    },
+    impliedPrimary: { backgroundColor: '#2b6cb0' },
+    impliedSecondary: { backgroundColor: 'transparent', borderColor: '#d4d4d4' },
+    impliedChosen: { opacity: 0.75 },
+    impliedPrimaryLabel: { color: '#fff', fontWeight: '600', fontSize: 15 },
+    impliedSecondaryLabel: { color: '#1a1a1a', fontWeight: '600', fontSize: 15 },
     desktopHint: {
         color: c.hintText,
         fontSize: 13,
@@ -1691,5 +1908,22 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
         textAlign: 'center',
         lineHeight: 26,
     },
+    thankYouSub: {
+        fontSize: 14,
+        textAlign: 'center',
+        lineHeight: 20,
+        marginTop: 6,
+    },
+    // Selectable so the code can be copied by long-press — there is no clipboard
+    // 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: {
+        fontSize: 22,
+        fontWeight: '700',
+        letterSpacing: 1.5,
+        textAlign: 'center',
+        marginTop: 14,
+        marginBottom: 10,
+    },
 });
 //# sourceMappingURL=SurveyModal.js.map