@cxpinsight/react-native 0.21.0 → 0.23.0

package/lib/survey/SurveyModal.js

@@ -49,7 +49,6 @@ const react_native_1 = require("react-native");
 const types_1 = require("../types");
 const storage = __importStar(require("../core/storage"));
 const NPSQuestion_1 = require("./questions/NPSQuestion");
-const CSATQuestion_1 = require("./questions/CSATQuestion");
 const TextQuestion_1 = require("./questions/TextQuestion");
 const MultipleChoiceQuestion_1 = require("./questions/MultipleChoiceQuestion");
 const RankingQuestion_1 = require("./questions/RankingQuestion");
@@ -59,6 +58,7 @@ const ImagePickerQuestion_1 = require("./questions/ImagePickerQuestion");
 const MatrixDropdownQuestion_1 = require("./questions/MatrixDropdownQuestion");
 const MatrixDynamicQuestion_1 = require("./questions/MatrixDynamicQuestion");
 const PanelDynamicQuestion_1 = require("./questions/PanelDynamicQuestion");
+const RatingQuestion_1 = require("./questions/RatingQuestion");
 const DateQuestion_1 = require("./questions/DateQuestion");
 const survey_spec_1 = require("@cxpinsight/survey-spec");
 const mobileRecorder_1 = require("../core/mobileRecorder");
@@ -502,7 +502,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
             if (!q)
                 return prev;
             // Same rule as the page pass: a locked question raises no error.
-            const err = isEnabled(q) ? (0, validate_1.validateAnswer)(forValidation(q), value) : null;
+            const err = isEnabled(q) ? (0, validate_1.validateAnswer)(forValidation(q), value, currentLanguage) : null;
             if (err)
                 return prev; // still invalid → keep the error
             const { [name]: _dropped, ...rest } = prev;
@@ -598,7 +598,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
             if (!isEnabled(q))
                 continue;
             const k = q.id || q.name;
-            const err = (0, validate_1.validateAnswer)(forValidation(q), responses[k]);
+            const err = (0, validate_1.validateAnswer)(forValidation(q), responses[k], currentLanguage);
             if (err)
                 out[k] = err;
         }
@@ -609,7 +609,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
     // server rejection (survey deactivated, cap hit) surfaces a retry
     // message instead of a false thank-you.
     const submitAndReset = async () => {
-        const ok = await onSubmit(buildSubmitPayload(), { via: viaRef.current });
+        const ok = await onSubmit(buildSubmitPayload(), { via: viaRef.current, language: currentLanguage || survey.defaultLanguage || undefined });
         if (ok === false) {
             setSubmitError('We couldn’t submit your response. Please try again.');
             return; // keep the survey open for a retry
@@ -949,7 +949,18 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
                 return ((0, jsx_runtime_1.jsx)(NPSQuestion_1.NPSQuestion, { value: val ?? null, onChange: (v) => updateResponse(key, v), contract: contract }));
             },
             'rating': () => {
-                return ((0, jsx_runtime_1.jsx)(CSATQuestion_1.CSATQuestion, { value: val ?? null, onChange: (v) => updateResponse(key, v), maxStars: question.maxValue ?? question.rateMax ?? 5, contract: contract }));
+                // ONE scale for every ratingType. This drew CSATQuestion — stars only,
+                // always from 1 — so a number, smiley or thumb scale, a 0-based range
+                // and the end captions all rendered as five stars on the phone. The
+                // keys and the aliases are the web SDK's (_cxpQ_rating): minValue /
+                // maxValue (v1.1, also what render.props min/max become above), then
+                // the SurveyJS-era rateMin / rateMax; rateLabels' ends win as captions.
+                const qx = question;
+                const num = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : (typeof v === 'string' && v.trim() !== '' && Number.isFinite(Number(v)) ? Number(v) : undefined));
+                const labels = Array.isArray(qx.rateLabels) ? qx.rateLabels : [];
+                return ((0, jsx_runtime_1.jsx)(RatingQuestion_1.RatingQuestion, { value: val ?? null, onChange: (v) => updateResponse(key, v), rateMin: num(qx.minValue) ?? num(qx.rateMin) ?? 1, rateMax: num(qx.maxValue) ?? num(qx.rateMax) ?? 5, 
+                    // Unset is a star — the web SDK's default, and what this always drew.
+                    ratingType: typeof qx.ratingType === 'string' && qx.ratingType ? qx.ratingType : 'star', minLabel: labels.length ? labels[0] : (qx.minLabel || qx.minRateDescription), maxLabel: labels.length ? labels[labels.length - 1] : (qx.maxLabel || qx.maxRateDescription), contract: contract, explicit: explicitFields }));
             },
             'csat': () => RENDERERS['rating'](),
             'ces': () => RENDERERS['rating'](),
@@ -968,18 +979,18 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
             'email': () => RENDERERS['text'](),
             'number': () => RENDERERS['text'](),
             'radio': () => {
-                return ((0, jsx_runtime_1.jsx)(MultipleChoiceQuestion_1.MultipleChoiceQuestion, { choices: normalizeChoices(question), value: val ?? '', onChange: (v) => updateResponse(key, v), mode: "radiogroup", isRtl: isRtl, contract: contract }));
+                return ((0, jsx_runtime_1.jsx)(MultipleChoiceQuestion_1.MultipleChoiceQuestion, { choices: normalizeChoices(question), value: val ?? '', onChange: (v) => updateResponse(key, v), mode: "radiogroup", isRtl: isRtl, contract: contract, optionLayout: question.optionLayout, explicit: explicitFields }));
             },
             'radiogroup': () => RENDERERS['radio'](),
             'dropdown': () => RENDERERS['radio'](),
             'checkbox': () => {
-                return ((0, jsx_runtime_1.jsx)(MultipleChoiceQuestion_1.MultipleChoiceQuestion, { choices: normalizeChoices(question), value: val ?? [], onChange: (v) => updateResponse(key, v), mode: "checkbox", isRtl: isRtl, contract: contract }));
+                return ((0, jsx_runtime_1.jsx)(MultipleChoiceQuestion_1.MultipleChoiceQuestion, { choices: normalizeChoices(question), value: val ?? [], onChange: (v) => updateResponse(key, v), mode: "checkbox", isRtl: isRtl, contract: contract, optionLayout: question.optionLayout, explicit: explicitFields }));
             },
             'binary': () => {
                 return ((0, jsx_runtime_1.jsx)(MultipleChoiceQuestion_1.MultipleChoiceQuestion, { choices: [
-                        { value: 'true', text: question.yesLabel || 'Yes' },
-                        { value: 'false', text: question.noLabel || 'No' },
-                    ], value: val ?? '', onChange: (v) => updateResponse(key, v), mode: "radiogroup", isRtl: isRtl, contract: contract }));
+                        { value: 'true', text: question.yesLabel || (0, survey_spec_1.chromeWord)('yes', currentLanguage) },
+                        { value: 'false', text: question.noLabel || (0, survey_spec_1.chromeWord)('no', currentLanguage) },
+                    ], value: val ?? '', onChange: (v) => updateResponse(key, v), mode: "radiogroup", isRtl: isRtl, contract: contract, hideIndicator: !(0, survey_spec_1.showsYesNoIndicator)(display) }));
             },
             'boolean': () => RENDERERS['binary'](),
             'yesno': () => RENDERERS['binary'](),
@@ -1561,6 +1572,12 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
     [resolvedTheme, primaryColor,
         JSON.stringify(surveyPaletteOverride), JSON.stringify(initPaletteOverride),
         JSON.stringify(survey.branding?.style)]);
+    // The fields set BY NAME, same layers and order as the contract above
+    // (palette < style slice < host init). Answer surfaces that had no box or
+    // shape before — a bare star, a chip — read these, so a value the contract
+    // only holds as a default cannot redraw them.
+    const explicitFields = (0, react_2.useMemo)(() => (0, styleContract_1.explicitContractFields)(surveyPaletteOverride, stylePlatformSlice(survey.branding?.style), initPaletteOverride), [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
@@ -2103,6 +2120,10 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
     // plain merge that leaves the value undefined — never enabled the swipe
     // either. One authored survey, dismissable two different ways depending on
     // which screen you were looking at.
+    // The headline and body switches — the same rule the web card and the link
+    // page ask (survey-spec showsTitle / showsDescription).
+    const titleShown = (0, survey_spec_1.showsTitle)(display);
+    const descriptionShown = (0, survey_spec_1.showsDescription)(display);
     const closeShown = (0, survey_spec_1.showsClose)(display, interactionKind, survey.delivery);
     const closeReserve = !closeShown ? null : {
         [isRtl ? 'paddingLeft' : 'paddingRight']: contract.closeSize + contract.closeInset + 8,
@@ -2885,13 +2906,13 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
                                                         // it belongs to unless the author says otherwise.
                                                         alignSelf: imgD.align === 'start' ? 'flex-start'
                                                             : 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,
+                                                    }, resizeMode: imgD.fit })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: (besideImage || notifyBeside) ? { flex: 1, minWidth: 0 } : undefined, children: [titleShown ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, dirText, fontStyle, themeTextPrimary, titleFS, notifyTitleFS,
                                                                 closeReserve,
                                                                 { 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) || '')
-                                                                .replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' '), evalCtx) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: notifyBeside ? {
+                                                                .replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' '), evalCtx) })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: notifyBeside ? {
                                                                 flexDirection: 'row',
                                                                 alignItems: 'center',
                                                                 justifyContent: 'space-between',
@@ -2900,7 +2921,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
                                                                     // markup, so strip tags + decode &nbsp; to plain text.
                                                                     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,
+                                                                    return desc && descriptionShown ? ((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;
@@ -2996,7 +3017,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
                                                         // 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 || !(0, survey_spec_1.drawsOwnSubmit)(survey.interactionType) ? null : (() => {
+                                                    ], onPress: handleBack, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.backButtonText, fontStyle, themeTextSecondary, buttonFS], children: (0, survey_spec_1.chromeWord)('back', currentLanguage) }) })), 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
@@ -3014,7 +3035,7 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss, reply = null }) {
                                                         // explicitly 'full'. When the author picked right/center/left,
                                                         // respect it even on the first page (was forced full-width,
                                                         // so mobile ignored the setting on page 1 — unlike web).
-                                                        style: [styles.nextButton, ((isSingleButton && !alignsAuto) || buttonAlign === 'full') && styles.nextButtonFull, btnAutoWidth, { backgroundColor: primaryColor }], onPress: handleNext, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.nextButtonText, fontStyle, buttonFS], children: willSubmit ? 'Submit' : 'Next' }) }));
+                                                        style: [styles.nextButton, ((isSingleButton && !alignsAuto) || buttonAlign === 'full') && styles.nextButtonFull, btnAutoWidth, { backgroundColor: primaryColor }], onPress: handleNext, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.nextButtonText, fontStyle, buttonFS], children: willSubmit ? (0, survey_spec_1.chromeWord)('submit', currentLanguage) : (0, survey_spec_1.chromeWord)('next', currentLanguage) }) }));
                                                 })()] })] })] }))] }), (0, jsx_runtime_1.jsx)(handsFreeVoice_1.VoiceOverlay, { visible: voiceActive, phase: voicePhase, transcript: voiceTranscript, onStop: () => (0, handsFreeVoice_1.stopVoice)() })] }) }));
 }
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');