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

package/src/components/XeboSurveyModal.tsx

@@ -0,0 +1,356 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  Platform,
+  KeyboardAvoidingView,
+  Modal,
+  TouchableWithoutFeedback,
+  SafeAreaView,
+} from 'react-native';
+import { XeboSurveyManager, XEBO_EVENTS } from '../core/XeboSurveyManager';
+import {
+  XeboSurvey,
+  XeboAnswer,
+  XeboQuestion,
+  XeboQuestionType,
+} from '../models/XeboModels';
+import { getTheme } from '../theme/XeboTheme';
+
+import { XeboIntroView } from './XeboIntroView';
+import { XeboThankYouView } from './XeboThankYouView';
+import { XeboSingleChoiceView } from './XeboSingleChoiceView';
+import { XeboMultipleChoiceView } from './XeboMultipleChoiceView';
+import { XeboDropdownView } from './XeboDropdownView';
+import { XeboTextBoxView } from './XeboTextBoxView';
+import { XeboNPSView } from './XeboNPSView';
+import { XeboMultiNPSView } from './XeboMultiNPSView';
+import { XeboRatingView } from './XeboRatingView';
+import { XeboMultiRatingView } from './XeboMultiRatingView';
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+const MODAL_MAX_HEIGHT = SCREEN_HEIGHT * 0.78; // used as initial off-screen translateY value
+
+function computeSheetHeight(question: XeboQuestion | null, screen: ModalScreen): number {
+  if (screen === 'thankYou') return SCREEN_HEIGHT * 0.36;
+  if (screen === 'intro')    return SCREEN_HEIGHT * 0.42;
+  if (!question) return SCREEN_HEIGHT * 0.48;
+  switch (question.type) {
+    case XeboQuestionType.multiNps:
+    case XeboQuestionType.multiRating: {
+      const rowCount = question.options?.length ?? 3;
+      // base ~25% + ~15% per row, capped at 78%
+      return Math.min(SCREEN_HEIGHT * 0.78, SCREEN_HEIGHT * (0.25 + rowCount * 0.15));
+    }
+    case XeboQuestionType.nps:
+      return (question.conditionalFollowUps?.length ?? 0) > 0
+        ? SCREEN_HEIGHT * 0.62   // NPS Pro — space for follow-up card
+        : SCREEN_HEIGHT * 0.46;  // simple NPS
+    case XeboQuestionType.rating:
+      return question.followUpQuestion ? SCREEN_HEIGHT * 0.56 : SCREEN_HEIGHT * 0.46;
+    case XeboQuestionType.singleTextBox:
+      return SCREEN_HEIGHT * 0.44;
+    case XeboQuestionType.multipleTextBox: {
+      const fieldCount = question.options?.length ?? 1;
+      return Math.min(SCREEN_HEIGHT * 0.70, SCREEN_HEIGHT * (0.28 + fieldCount * 0.10));
+    }
+    case XeboQuestionType.singleChoice:
+    case XeboQuestionType.multipleChoice:
+    case XeboQuestionType.dropdown: {
+      const optCount = question.options?.length ?? 0;
+      return Math.min(SCREEN_HEIGHT * 0.72, SCREEN_HEIGHT * (0.30 + optCount * 0.058));
+    }
+    default:
+      return SCREEN_HEIGHT * 0.48;
+  }
+}
+
+// Which screen we show inside the modal
+type ModalScreen = 'intro' | 'question' | 'thankYou';
+
+export const XeboSurveyModal: React.FC = () => {
+  const theme = getTheme();
+
+  const [visible, setVisible] = useState(false);
+  const [survey, setSurvey] = useState<XeboSurvey | null>(null);
+  const [screen, setScreen] = useState<ModalScreen>('intro');
+  const [questionIndex, setQuestionIndex] = useState(0);
+
+  const sheetHeight = useMemo(
+    () => computeSheetHeight(survey?.questions[questionIndex] ?? null, screen),
+    [survey, questionIndex, screen]
+  );
+
+  // Spring slide-up animation
+  const slideAnim = useRef(new Animated.Value(MODAL_MAX_HEIGHT)).current;
+  const backdropAnim = useRef(new Animated.Value(0)).current;
+
+  // ─── Subscribe to manager events ─────────────────────────────────────────
+
+  useEffect(() => {
+    const onLoaded = (s: XeboSurvey) => {
+      setSurvey(s);
+      setQuestionIndex(0);
+    };
+
+    const onVisible = (v: boolean) => {
+      if (v) {
+        openModal();
+      } else {
+        closeModal();
+      }
+    };
+
+    const onQuestionChanged = (idx: number) => {
+      setQuestionIndex(idx);
+    };
+
+    XeboSurveyManager.on(XEBO_EVENTS.SURVEY_LOADED, onLoaded);
+    XeboSurveyManager.on(XEBO_EVENTS.SURVEY_VISIBLE, onVisible);
+    XeboSurveyManager.on(XEBO_EVENTS.QUESTION_CHANGED, onQuestionChanged);
+
+    return () => {
+      XeboSurveyManager.off(XEBO_EVENTS.SURVEY_LOADED, onLoaded);
+      XeboSurveyManager.off(XEBO_EVENTS.SURVEY_VISIBLE, onVisible);
+      XeboSurveyManager.off(XEBO_EVENTS.QUESTION_CHANGED, onQuestionChanged);
+    };
+  }, []);
+
+  // ─── Animations ───────────────────────────────────────────────────────────
+
+  const openModal = useCallback(() => {
+    // Sync survey into React state NOW so the modal never renders blank on first frame
+    const s = XeboSurveyManager.survey;
+    setSurvey(s);
+    setVisible(true);
+    slideAnim.setValue(MODAL_MAX_HEIGHT);
+    backdropAnim.setValue(0);
+
+    // Determine initial screen
+    if (s?.introPage?.enabled) {
+      setScreen('intro');
+    } else {
+      setScreen('question');
+      setQuestionIndex(XeboSurveyManager.currentQuestionIndex);
+    }
+
+    Animated.parallel([
+      Animated.spring(slideAnim, {
+        toValue: 0,
+        tension: 180,
+        friction: 20,
+        useNativeDriver: true,
+      }),
+      Animated.timing(backdropAnim, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
+
+  const closeModal = useCallback(() => {
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        toValue: MODAL_MAX_HEIGHT,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(backdropAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      setVisible(false);
+      setSurvey(null);
+    });
+  }, []);
+
+  // ─── User actions ─────────────────────────────────────────────────────────
+
+  const handleSkip = () => {
+    XeboSurveyManager.dismissSurvey();
+  };
+
+  const handleIntroStart = () => {
+    setScreen('question');
+    setQuestionIndex(0);
+  };
+
+  const handleAnswer = useCallback((answer: XeboAnswer) => {
+    XeboSurveyManager.recordAnswer(answer);
+    XeboSurveyManager.nextQuestion();
+    // questionIndex will be updated via QUESTION_CHANGED event
+    // But also check if we're now at the thank-you question
+    const s = XeboSurveyManager.survey;
+    const newIdx = XeboSurveyManager.currentQuestionIndex;
+    if (s && s.questions[newIdx]?.id === 'thank_you_auto') {
+      setScreen('thankYou');
+    }
+  }, []);
+
+  // ─── Question renderer ────────────────────────────────────────────────────
+
+  const renderQuestion = (question: XeboQuestion) => {
+    const questions = survey?.questions ?? [];
+    // The last "real" question before thank-you
+    const lastRealIndex = questions.findIndex(q => q.id === 'thank_you_auto') - 1;
+    const isLast = questionIndex === lastRealIndex;
+
+    const commonProps = { question, isLastQuestion: isLast, onAnswer: handleAnswer };
+
+    switch (question.type) {
+      case XeboQuestionType.singleChoice:
+        return <XeboSingleChoiceView {...commonProps} />;
+      case XeboQuestionType.multipleChoice:
+        return <XeboMultipleChoiceView {...commonProps} />;
+      case XeboQuestionType.dropdown:
+        return <XeboDropdownView {...commonProps} />;
+      case XeboQuestionType.singleTextBox:
+      case XeboQuestionType.multipleTextBox:
+        return <XeboTextBoxView {...commonProps} />;
+      case XeboQuestionType.nps:
+        return <XeboNPSView {...commonProps} />;
+      case XeboQuestionType.multiNps:
+        return <XeboMultiNPSView {...commonProps} />;
+      case XeboQuestionType.rating:
+        return <XeboRatingView {...commonProps} />;
+      case XeboQuestionType.multiRating:
+        return <XeboMultiRatingView {...commonProps} />;
+      default:
+        return null;
+    }
+  };
+
+  // ─── Content ──────────────────────────────────────────────────────────────
+
+  const renderContent = () => {
+    if (!survey) return null;
+
+    if (screen === 'intro' && survey.introPage) {
+      return <XeboIntroView introPage={survey.introPage} onStart={handleIntroStart} />;
+    }
+
+    if (screen === 'thankYou') {
+      const tyQuestion = survey.questions.find(q => q.id === 'thank_you_auto');
+      if (tyQuestion) {
+        return <XeboThankYouView question={tyQuestion} onDismiss={handleSkip} />;
+      }
+    }
+
+    if (screen === 'question') {
+      const question = survey.questions[questionIndex];
+      if (!question) return null;
+      return renderQuestion(question);
+    }
+
+    return null;
+  };
+
+  if (!visible) return null;
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={handleSkip}
+    >
+      {/* Backdrop — no dismiss on tap */}
+      <Animated.View style={[styles.backdrop, { opacity: backdropAnim }]} />
+
+      <KeyboardAvoidingView
+        style={styles.kvContainer}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        keyboardVerticalOffset={0}
+      >
+        <Animated.View
+          style={[
+            styles.sheet,
+            {
+              backgroundColor: theme.backgroundColor,
+              transform: [{ translateY: slideAnim }],
+              height: sheetHeight,
+            },
+          ]}
+        >
+          {/* Handle bar */}
+          <View style={styles.handleWrap}>
+            <View style={styles.handle} />
+          </View>
+
+          {/* Skip button — right aligned */}
+          {screen !== 'thankYou' && (
+            <View style={styles.skipRow}>
+              <TouchableOpacity onPress={handleSkip} style={styles.skipButton} activeOpacity={0.7}>
+                <Text style={[styles.skipText, { color: theme.textColor }]}>Skip</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+
+          {/* Main content */}
+          <View style={styles.content}>{renderContent()}</View>
+
+          {/* Safe area bottom padding */}
+          <SafeAreaView edges={['bottom'] as any} />
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  kvContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    overflow: 'hidden',
+    elevation: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+  },
+  handleWrap: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingBottom: 4,
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#D1D5DB',
+  },
+  skipRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingHorizontal: 16,
+    paddingBottom: 4,
+  },
+  skipButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  skipText: {
+    fontSize: 14,
+    fontWeight: '500',
+    opacity: 0.6,
+  },
+  content: {
+    flex: 1,
+  },
+});

package/src/components/XeboTextBoxView.tsx

@@ -0,0 +1,183 @@
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Animated,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { XeboQuestion, XeboAnswer } from '../models/XeboModels';
+import { XeboQuestionType } from '../models/XeboModels';
+import { getTheme } from '../theme/XeboTheme';
+
+interface Props {
+  question: XeboQuestion;
+  isLastQuestion: boolean;
+  onAnswer: (answer: XeboAnswer) => void;
+}
+
+export const XeboTextBoxView: React.FC<Props> = ({ question, isLastQuestion, onAnswer }) => {
+  const theme = getTheme();
+  const isMulti = question.type === XeboQuestionType.multipleTextBox;
+  const fields = question.options && question.options.length > 0 ? question.options : [{ id: 'default', text: '', value: '' }];
+
+  const [values, setValues] = useState<Record<string, string>>({});
+  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 handleChange = (fieldId: string, text: string) => {
+    setValues(prev => ({ ...prev, [fieldId]: text }));
+    setError('');
+  };
+
+  const handleSubmit = () => {
+    if (question.isRequired) {
+      const empty = fields.some(f => !(values[f.id] ?? '').trim());
+      if (empty) {
+        setError('Please fill in all fields.');
+        shake();
+        return;
+      }
+    }
+
+    onAnswer({
+      questionId: question.id,
+      value: fields
+        .filter(f => (values[f.id] ?? '').trim())
+        .map(f => ({ rowId: f.id, text: values[f.id] ?? '' })),
+    });
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.kvContainer}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.container}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <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>
+        )}
+
+        {fields.map((field, idx) => (
+          <View key={field.id} style={styles.fieldWrap}>
+            {isMulti && !!field.text && (
+              <Text style={[styles.fieldLabel, { color: theme.textColor, fontFamily: theme.fontFamily }]}>
+                {field.text}
+              </Text>
+            )}
+            <TextInput
+              style={[
+                styles.input,
+                {
+                  borderColor: '#E5E7EB',
+                  color: theme.textColor,
+                  fontFamily: theme.fontFamily,
+                  borderRadius: theme.cornerRadius,
+                },
+              ]}
+              placeholder={isMulti ? '' : (question.placeholder || 'Type your answer here...')}
+              placeholderTextColor="#9CA3AF"
+              value={values[field.id] ?? ''}
+              onChangeText={text => handleChange(field.id, text)}
+              multiline={!isMulti}
+              numberOfLines={isMulti ? 1 : 4}
+              textAlignVertical={isMulti ? 'center' : 'top'}
+              returnKeyType={idx === fields.length - 1 ? 'done' : 'next'}
+            />
+          </View>
+        ))}
+
+        {!!error && <Text style={styles.errorText}>{error}</Text>}
+
+        <Animated.View style={{ transform: [{ translateX: shakeAnim }] }}>
+          <TouchableOpacity
+            style={[styles.button, { backgroundColor: theme.primaryColor, borderRadius: theme.cornerRadius }]}
+            onPress={handleSubmit}
+            activeOpacity={0.8}
+          >
+            <Text style={[styles.buttonText, { fontFamily: theme.fontFamily }]}>
+              {isLastQuestion ? 'Submit' : 'Next'}
+            </Text>
+          </TouchableOpacity>
+        </Animated.View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  kvContainer: {
+    flex: 1,
+  },
+  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,
+  },
+  fieldWrap: {
+    marginBottom: 14,
+  },
+  fieldLabel: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 6,
+  },
+  input: {
+    borderWidth: 1.5,
+    padding: 12,
+    fontSize: 15,
+    minHeight: 48,
+  },
+  errorText: {
+    color: '#EF4444',
+    fontSize: 13,
+    marginBottom: 8,
+  },
+  button: {
+    paddingVertical: 14,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/components/XeboThankYouView.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  Linking,
+} from 'react-native';
+import { XeboQuestion } from '../models/XeboModels';
+import { getTheme } from '../theme/XeboTheme';
+
+interface Props {
+  question: XeboQuestion;
+  onDismiss: () => void;
+}
+
+export const XeboThankYouView: React.FC<Props> = ({ question, onDismiss }) => {
+  const theme = getTheme();
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(0.8)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, { toValue: 1, duration: 400, useNativeDriver: true }),
+      Animated.spring(scaleAnim, { toValue: 1, tension: 60, friction: 7, useNativeDriver: true }),
+    ]).start();
+
+    if (question.redirectURL) {
+      const timer = setTimeout(async () => {
+        try {
+          await Linking.openURL(question.redirectURL!);
+        } catch {
+          // ignore
+        }
+        onDismiss();
+      }, 2500);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        { opacity: fadeAnim, transform: [{ scale: scaleAnim }] },
+      ]}
+    >
+      {/* Green checkmark circle */}
+      <View style={styles.iconCircle}>
+        <Text style={styles.checkmark}>✓</Text>
+      </View>
+
+      <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>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingVertical: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconCircle: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#22C55E',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 24,
+  },
+  checkmark: {
+    color: '#FFFFFF',
+    fontSize: 40,
+    fontWeight: '700',
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  subtitle: {
+    fontSize: 15,
+    textAlign: 'center',
+    opacity: 0.7,
+    lineHeight: 22,
+  },
+});