react-native-my-survey-sdk 2.0.6 → 2.0.8

package/src/components/XeboMultipleChoiceView.tsx

@@ -0,0 +1,184 @@
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Animated,
+} from 'react-native';
+import { XeboQuestion, XeboAnswer, XeboChoice } from '../models/XeboModels';
+import { getTheme } from '../theme/XeboTheme';
+
+interface Props {
+  question: XeboQuestion;
+  isLastQuestion: boolean;
+  onAnswer: (answer: XeboAnswer) => void;
+}
+
+export const XeboMultipleChoiceView: React.FC<Props> = ({ question, isLastQuestion, onAnswer }) => {
+  const theme = getTheme();
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [error, setError] = useState('');
+  const shakeAnim = useRef(new Animated.Value(0)).current;
+
+  const shake = () => {
+    Animated.sequence([
+      Animated.timing(shakeAnim, { toValue: 8, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: -8, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 6, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 0, duration: 60, useNativeDriver: true }),
+    ]).start();
+  };
+
+  const toggleChoice = (choice: XeboChoice) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (next.has(choice.id)) {
+        next.delete(choice.id);
+      } else {
+        next.add(choice.id);
+      }
+      return next;
+    });
+    setError('');
+  };
+
+  const handleNext = () => {
+    if (question.isRequired && selectedIds.size === 0) {
+      setError('Please select at least one option.');
+      shake();
+      return;
+    }
+    onAnswer({
+      questionId: question.id,
+      value: Array.from(selectedIds).map(id => ({
+        rowId: id,
+        text: question.options?.find(o => o.id === id)?.text,
+      })),
+    });
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.title, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+        {question.title}
+      </Text>
+      {!!question.subtitle && (
+        <Text style={[styles.subtitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+          {question.subtitle}
+        </Text>
+      )}
+
+      <ScrollView style={styles.optionsList} showsVerticalScrollIndicator={false}>
+        {(question.options ?? []).map(choice => {
+          const selected = selectedIds.has(choice.id);
+          return (
+            <TouchableOpacity
+              key={choice.id}
+              style={[
+                styles.optionRow,
+                { borderColor: selected ? theme.primaryColor : '#E5E7EB' },
+              ]}
+              onPress={() => toggleChoice(choice)}
+              activeOpacity={0.7}
+            >
+              <View
+                style={[
+                  styles.checkbox,
+                  {
+                    borderColor: selected ? theme.primaryColor : '#9CA3AF',
+                    backgroundColor: selected ? theme.primaryColor : 'transparent',
+                  },
+                ]}
+              >
+                {selected && <Text style={styles.checkmark}>✓</Text>}
+              </View>
+              <Text style={[styles.optionText, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+                {choice.text}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+
+      {!!error && <Text style={styles.errorText}>{error}</Text>}
+
+      <Animated.View style={{ transform: [{ translateX: shakeAnim }] }}>
+        <TouchableOpacity
+          style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
+          onPress={handleNext}
+          activeOpacity={0.8}
+        >
+          <Text style={[styles.buttonText, { fontFamily: theme.fontFamily }]}>
+            {isLastQuestion ? 'Submit' : 'Next'}
+          </Text>
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 24,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 6,
+  },
+  subtitle: {
+    fontSize: 14,
+    opacity: 0.6,
+    marginBottom: 16,
+  },
+  optionsList: {
+    flex: 1,
+    marginBottom: 12,
+  },
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1.5,
+    borderRadius: 10,
+    padding: 14,
+    marginBottom: 10,
+  },
+  checkbox: {
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  checkmark: {
+    color: '#FFFFFF',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  optionText: {
+    fontSize: 15,
+    flex: 1,
+  },
+  errorText: {
+    color: '#EF4444',
+    fontSize: 13,
+    marginBottom: 8,
+  },
+  button: {
+    paddingVertical: 14,
+    alignItems: 'center',
+    marginTop: 4,
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/components/XeboNPSView.tsx

@@ -0,0 +1,292 @@
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Animated,
+  TextInput,
+} from 'react-native';
+import { XeboQuestion, XeboAnswer, XeboConditionalFollowUp, XeboQuestionType } from '../models/XeboModels';
+import { getTheme } from '../theme/XeboTheme';
+
+interface Props {
+  question: XeboQuestion;
+  isLastQuestion: boolean;
+  onAnswer: (answer: XeboAnswer) => void;
+}
+
+// NPS zone colors — matches iOS SDK defaults
+const DETRACTOR_COLOR = '#F24236'; // UIColor(red:0.95,green:0.26,blue:0.21)
+const PASSIVE_COLOR   = '#FFC208'; // UIColor(red:1.00,green:0.76,blue:0.03)
+const PROMOTER_COLOR  = '#2ECC70'; // UIColor(red:0.18,green:0.80,blue:0.44)
+
+function npsColor(score: number, npsLabels?: XeboQuestion['npsLabels']): string {
+  if (score <= 6) return npsLabels?.detractorColor ?? DETRACTOR_COLOR;
+  if (score <= 8) return npsLabels?.passiveColor   ?? PASSIVE_COLOR;
+  return              npsLabels?.promoterColor      ?? PROMOTER_COLOR;
+}
+
+/** Returns true if the hex color is perceived as dark (use white text on top) */
+function isColorDark(hex: string): boolean {
+  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!m) return false;
+  const r = parseInt(m[1], 16) / 255;
+  const g = parseInt(m[2], 16) / 255;
+  const b = parseInt(m[3], 16) / 255;
+  return 0.299 * r + 0.587 * g + 0.114 * b < 0.5;
+}
+
+export const XeboNPSView: React.FC<Props> = ({ question, isLastQuestion, onAnswer }) => {
+  const theme = getTheme();
+  const [selectedScore, setSelectedScore] = useState<number | null>(null);
+  const [followUpText, setFollowUpText] = useState('');
+  const [followUpChoice, setFollowUpChoice] = useState<string | null>(null);
+  const [error, setError] = useState('');
+  const shakeAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef<Animated.Value[]>(
+    Array.from({ length: 11 }, () => new Animated.Value(1))
+  ).current;
+
+  const shake = () => {
+    Animated.sequence([
+      Animated.timing(shakeAnim, { toValue: 8, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: -8, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 6, duration: 60, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 0, duration: 60, useNativeDriver: true }),
+    ]).start();
+  };
+
+  const handleScorePress = (score: number) => {
+    setSelectedScore(score);
+    setError('');
+    setFollowUpText('');
+    setFollowUpChoice(null);
+    Animated.spring(scaleAnim[score], { toValue: 1.15, useNativeDriver: true }).start(() => {
+      Animated.spring(scaleAnim[score], { toValue: 1, useNativeDriver: true }).start();
+    });
+  };
+
+  // Find applicable conditional follow-up
+  const activeFollowUp: XeboConditionalFollowUp | undefined =
+    selectedScore !== null
+      ? (question.conditionalFollowUps ?? []).find(
+          f => selectedScore >= f.minRating && selectedScore <= f.maxRating
+        )
+      : undefined;
+
+  const hasTextFollowUp = !!question.followUpQuestion && !activeFollowUp;
+
+  const handleNext = () => {
+    if (question.isRequired && selectedScore === null) {
+      setError('Please select a score.');
+      shake();
+      return;
+    }
+
+    const score = selectedScore ?? 0;
+    const colId = question.columns?.[score]?.id ?? score.toString();
+    const rowId = question.options?.[0]?.id ?? score.toString();
+
+    const followUpAnswerText = activeFollowUp
+      ? followUpChoice
+        ? activeFollowUp.followUpOptions.find(o => o.id === followUpChoice)?.text
+        : followUpText
+      : hasTextFollowUp
+      ? followUpText
+      : undefined;
+
+    onAnswer({
+      questionId: question.id,
+      value: [{ rowId, colId, text: followUpAnswerText }],
+    });
+  };
+
+  return (
+    <ScrollView
+      style={styles.scroll}
+      contentContainerStyle={styles.container}
+      showsVerticalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+    >
+      <Text style={[styles.title, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+        {question.title}
+      </Text>
+      {!!question.subtitle && (
+        <Text style={[styles.subtitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+          {question.subtitle}
+        </Text>
+      )}
+
+      {/* NPS Scale — single row, always-visible category colors */}
+      <View style={styles.scaleRow}>
+        {Array.from({ length: 11 }, (_, i) => {
+          const selected = selectedScore === i;
+          const color = npsColor(i, question.npsLabels);
+          return (
+            <Animated.View key={i} style={[styles.scoreCell, { transform: [{ scale: scaleAnim[i] }] }]}>
+              <TouchableOpacity
+                style={[
+                  styles.scoreButton,
+                  {
+                    backgroundColor: color,
+                    borderColor: selected ? '#000000' : color,
+                    borderWidth: selected ? 2.5 : 1.5,
+                  },
+                ]}
+                onPress={() => handleScorePress(i)}
+                activeOpacity={0.8}
+              >
+                <Text style={[
+                  styles.scoreText,
+                  { color: isColorDark(color) ? '#FFFFFF' : selected ? '#111111' : '#444444' },
+                ]}>
+                  {i}
+                </Text>
+              </TouchableOpacity>
+            </Animated.View>
+          );
+        })}
+      </View>
+
+      {/* Lower / Upper labels */}
+      {(question.npsLabels?.lower || question.npsLabels?.upper) && (
+        <View style={styles.labelsRow}>
+          <Text style={[styles.label, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+            {question.npsLabels?.lower ?? ''}
+          </Text>
+          <Text style={[styles.label, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+            {question.npsLabels?.upper ?? ''}
+          </Text>
+        </View>
+      )}
+
+      {/* Conditional follow-up (NPS Pro) */}
+      {selectedScore !== null && activeFollowUp && (
+        <View style={[styles.followUpCard, { borderColor: '#E5E7EB', borderRadius: theme.cornerRadius }]}>
+          <Text style={[styles.followUpTitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+            {activeFollowUp.followUpQuestion}
+          </Text>
+          {activeFollowUp.followUpType === XeboQuestionType.singleChoice && activeFollowUp.followUpOptions.length > 0 ? (
+            activeFollowUp.followUpOptions.map(opt => (
+              <TouchableOpacity
+                key={opt.id}
+                style={[
+                  styles.followUpOption,
+                  followUpChoice === opt.id && { borderColor: theme.primaryColor },
+                ]}
+                onPress={() => setFollowUpChoice(opt.id)}
+                activeOpacity={0.7}
+              >
+                <Text style={[styles.followUpOptionText, { color: theme.textColor }]}>{opt.text}</Text>
+              </TouchableOpacity>
+            ))
+          ) : (
+            <TextInput
+              style={[styles.followUpInput, { borderColor: '#E5E7EB', color: theme.textColor, borderRadius: theme.cornerRadius }]}
+              placeholder="Your comment..."
+              placeholderTextColor="#9CA3AF"
+              value={followUpText}
+              onChangeText={setFollowUpText}
+              multiline
+              numberOfLines={3}
+              textAlignVertical="top"
+            />
+          )}
+        </View>
+      )}
+
+      {/* Simple text follow-up */}
+      {selectedScore !== null && hasTextFollowUp && (
+        <View style={[styles.followUpCard, { borderColor: '#E5E7EB', borderRadius: theme.cornerRadius }]}>
+          <Text style={[styles.followUpTitle, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+            {question.followUpQuestion}
+          </Text>
+          <TextInput
+            style={[styles.followUpInput, { borderColor: '#E5E7EB', color: theme.textColor, borderRadius: theme.cornerRadius }]}
+            placeholder="Your comment..."
+            placeholderTextColor="#9CA3AF"
+            value={followUpText}
+            onChangeText={setFollowUpText}
+            multiline
+            numberOfLines={3}
+            textAlignVertical="top"
+          />
+        </View>
+      )}
+
+      {!!error && <Text style={styles.errorText}>{error}</Text>}
+
+      {selectedScore !== null && (
+        <Animated.View style={{ transform: [{ translateX: shakeAnim }] }}>
+          <TouchableOpacity
+            style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
+            onPress={handleNext}
+            activeOpacity={0.8}
+          >
+            <Text style={[styles.buttonText, { fontFamily: theme.fontFamily }]}>
+              {isLastQuestion ? 'Submit' : 'Next'}
+            </Text>
+          </TouchableOpacity>
+        </Animated.View>
+      )}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1 },
+  container: {
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 24,
+    flexGrow: 1,
+  },
+  title: { fontSize: 18, fontWeight: '700', marginBottom: 6 },
+  subtitle: { fontSize: 14, opacity: 0.6, marginBottom: 16 },
+  scaleRow: {
+    flexDirection: 'row',
+    gap: 3,
+    marginBottom: 8,
+  },
+  scoreCell: {
+    flex: 1,
+  },
+  scoreButton: {
+    height: 44,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scoreText: { fontSize: 13, fontWeight: '700' },
+  labelsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 20,
+  },
+  label: { fontSize: 12, opacity: 0.6 },
+  followUpCard: {
+    borderWidth: 1.5,
+    padding: 14,
+    marginBottom: 16,
+  },
+  followUpTitle: { fontSize: 15, fontWeight: '600', marginBottom: 12 },
+  followUpOption: {
+    borderWidth: 1.5,
+    borderColor: '#E5E7EB',
+    borderRadius: 8,
+    padding: 10,
+    marginBottom: 8,
+  },
+  followUpOptionText: { fontSize: 14 },
+  followUpInput: {
+    borderWidth: 1.5,
+    padding: 10,
+    fontSize: 14,
+    minHeight: 80,
+  },
+  errorText: { color: '#EF4444', fontSize: 13, marginBottom: 8 },
+  button: { paddingVertical: 14, alignItems: 'center', marginTop: 4 },
+  buttonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
+});