react-native-my-survey-sdk 2.2.13 → 2.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-my-survey-sdk",
-  "version": "2.2.13",
+  "version": "2.2.15",
   "description": "Xebo survey collection SDK for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -15,13 +15,17 @@
     "react-native": ">=0.71.0",
     "@react-native-async-storage/async-storage": ">=1.0.0",
     "@react-native-community/netinfo": ">=11.0.0",
+    "react-native-device-info": ">=10.0.0",
     "react-native-modal": ">=13.0.0",
     "react-native-reanimated": ">=3.0.0"
   },
   "devDependencies": {
     "@babel/runtime": "^7.29.2",
+    "@react-native-community/netinfo": "^11.4.1",
     "@types/react": "^18.2.0",
     "@types/react-native": "^0.73.0",
+    "react-native": "^0.73.0",
+    "react-native-device-info": "^10.13.2",
     "typescript": "^5.3.0"
   }
 }

package/src/components/XeboSurveyModal.tsx

@@ -63,10 +63,12 @@ function computeSheetHeight(question: XeboQuestion | null, screen: ModalScreen):
       const fieldCount = question.options?.length ?? 1;
       return Math.min(SCREEN_HEIGHT * 0.72, SCREEN_HEIGHT * (0.30 + fieldCount * 0.12));
     }
+    case XeboQuestionType.dropdown:
+      // Must always fit: title + trigger + 200px open list + button + padding + header overhead
+      // Minimum ~0.62 regardless of whether options are parsed yet
+      return SCREEN_HEIGHT * 0.62;
     case XeboQuestionType.singleChoice:
-    case XeboQuestionType.multipleChoice:
-    case XeboQuestionType.dropdown: {
-      // each option row ≈ 58dp; base includes title + button; 0.085 per option is accurate
+    case XeboQuestionType.multipleChoice: {
       const optCount = question.options?.length ?? 0;
       return Math.min(SCREEN_HEIGHT * 0.80, SCREEN_HEIGHT * (0.28 + optCount * 0.085));
     }
@@ -289,33 +291,8 @@ export const XeboSurveyModal: React.FC = () => {
               <View style={styles.handle} />
             </View>
 
-            {/* Header row: progress bar + Skip / X close */}
+            {/* Header row: Skip / X close */}
             <View style={styles.headerRow}>
-              <View style={styles.progressArea}>
-                {screen === 'question' && survey && (() => {
-                  const realQs = survey.questions.filter((q: XeboQuestion) => q.id !== 'thank_you_auto');
-                  const total = realQs.length;
-                  if (total === 0) return null;
-                  return (
-                    <View style={styles.progressContainer}>
-                      <View style={[styles.progressTrack, { backgroundColor: '#E5E7EB' }]}>
-                        <View
-                          style={[
-                            styles.progressFill,
-                            {
-                              backgroundColor: theme.primaryColor,
-                              width: `${((questionIndex + 1) / total) * 100}%` as any,
-                            },
-                          ]}
-                        />
-                      </View>
-                      <Text style={[styles.progressText, { color: theme.textColor }]}>
-                        {questionIndex + 1} / {total}
-                      </Text>
-                    </View>
-                  );
-                })()}
-              </View>
               {screen === 'thankYou' ? (
                 <TouchableOpacity onPress={handleSkip} style={styles.closeButton} activeOpacity={0.7}>
                   <Text style={[styles.closeText, { color: theme.textColor }]}>✕</Text>
@@ -367,34 +344,9 @@ const styles = StyleSheet.create({
   },
   headerRow: {
     flexDirection: 'row',
-    alignItems: 'center',
+    justifyContent: 'flex-end',
     paddingHorizontal: 16,
     paddingBottom: 4,
-    minHeight: 36,
-  },
-  progressArea: {
-    flex: 1,
-  },
-  progressContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  progressTrack: {
-    flex: 1,
-    height: 4,
-    borderRadius: 2,
-    overflow: 'hidden',
-  },
-  progressFill: {
-    height: 4,
-    borderRadius: 2,
-  },
-  progressText: {
-    fontSize: 12,
-    opacity: 0.6,
-    minWidth: 36,
-    textAlign: 'right',
   },
   skipButton: {
     paddingHorizontal: 12,

package/src/core/XeboNetworkService.ts

@@ -6,6 +6,7 @@ import {
   XeboConditionalFollowUp,
   XeboAnswer,
   XeboEnvironment,
+  XeboUserData,
 } from '../models/XeboModels';
 import {
   APICollectorResponse,
@@ -322,20 +323,59 @@ export interface SubmitResult {
   responseJson: unknown;
 }
 
+export interface SubmitMeta {
+  userData?: XeboUserData;
+  deviceModel?: string;
+  platform?: string;
+  osVersion?: string;
+  startTime?: string;
+  endTime?: string;
+}
+
 export async function submitResponse(
   feedbackBaseURL: string,
   surveyId: string,
   collectorUUID: string,
   apiKey: string,
-  answers: XeboAnswer[]
+  answers: XeboAnswer[],
+  meta?: SubmitMeta,
 ): Promise<SubmitResult> {
   const url = `${feedbackBaseURL}/v3/survey-participation/${surveyId}/response/create-response`;
 
   // Filter out auto thank-you answer
   const filteredAnswers = answers.filter(a => a.questionId !== 'thank_you_auto');
 
-  const payload = {
+  // Calculate time spent in seconds
+  let timeSpentSeconds: number | undefined;
+  if (meta?.startTime && meta?.endTime) {
+    timeSpentSeconds = Math.round(
+      (new Date(meta.endTime).getTime() - new Date(meta.startTime).getTime()) / 1000,
+    );
+  }
+
+  const payload: Record<string, unknown> = {
     collector_id: collectorUUID,
+    mode: 'React Native SDK',
+    ...(meta?.userData && {
+      respondent: {
+        name: meta.userData.name,
+        email: meta.userData.email,
+        phone: meta.userData.phone,
+        unique_id: meta.userData.uniqueId,
+        country: meta.userData.country,
+        city: meta.userData.city,
+      },
+    }),
+    device_info: {
+      device: meta?.deviceModel ?? 'Unknown',
+      platform: meta?.platform ?? 'mobile',
+      os_version: meta?.osVersion ?? '',
+    },
+    timing: {
+      start_time: meta?.startTime,
+      end_time: meta?.endTime,
+      time_spent_seconds: timeSpentSeconds,
+    },
     responses: [
       {
         response_status: 'complete',

package/src/core/XeboSurveyManager.ts

@@ -1,4 +1,6 @@
 import NetInfo from '@react-native-community/netinfo';
+import DeviceInfo from 'react-native-device-info';
+import { Platform } from 'react-native';
 
 // Minimal inline event emitter — no external 'events' package needed
 type Listener = (...args: any[]) => void;
@@ -28,6 +30,7 @@ const uuidv4 = () =>
     const r = (Math.random() * 16) | 0;
     return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
   });
+
 import {
   XeboSurvey,
   XeboAnswer,
@@ -35,6 +38,7 @@ import {
   XeboThemeConfig,
   XeboEnvironment,
   XeboQueuedResponse,
+  XeboUserData,
 } from '../models/XeboModels';
 import {
   resolveZoneAndEnv,
@@ -67,6 +71,11 @@ class XeboSurveyManagerClass extends SimpleEventEmitter {
   private baseURL = '';
   private feedbackBaseURL = '';
 
+  // User / eData
+  private userData: XeboUserData | null = null;
+  private deviceModel = '';
+  private osVersion = '';
+
   // State
   survey: XeboSurvey | null = null;
   currentAnswers: XeboAnswer[] = [];
@@ -88,8 +97,12 @@ class XeboSurveyManagerClass extends SimpleEventEmitter {
     const { resolvedZone, environment } = resolveZoneAndEnv(config.zone, config.environment);
     this.resolvedZone = resolvedZone;
     this.environment = environment;
-    this.baseURL = buildBaseURL(resolvedZone, environment);
-    this.feedbackBaseURL = buildFeedbackBaseURL(resolvedZone, environment);
+    this.baseURL = buildBaseURL(this.resolvedZone, this.environment);
+    this.feedbackBaseURL = buildFeedbackBaseURL(this.resolvedZone, this.environment);
+
+    // Capture device info once at configure time
+    this.deviceModel = `${DeviceInfo.getModel()} (${DeviceInfo.getSystemName()})`;
+    this.osVersion = `${Platform.OS} ${DeviceInfo.getSystemVersion()}`;
 
     this._startNetworkMonitoring();
     // Pre-fetch survey in background so it's ready instantly when button is tapped
@@ -100,6 +113,16 @@ class XeboSurveyManagerClass extends SimpleEventEmitter {
     configureTheme(config);
   }
 
+  // ─── User identity ─────────────────────────────────────────────────────────
+
+  setUser(data: XeboUserData): void {
+    this.userData = data;
+  }
+
+  clearUser(): void {
+    this.userData = null;
+  }
+
   // ─── Network monitoring ────────────────────────────────────────────────────
 
   private _startNetworkMonitoring(): void {
@@ -109,7 +132,7 @@ class XeboSurveyManagerClass extends SimpleEventEmitter {
 
     let wasOffline = false;
 
-    this.netInfoUnsubscribe = NetInfo.addEventListener(state => {
+    this.netInfoUnsubscribe = NetInfo.addEventListener((state: { isConnected: boolean | null }) => {
       const isConnected = state.isConnected ?? false;
       if (wasOffline && isConnected) {
         console.log('[Xebo] Network restored — flushing offline queue');
@@ -212,7 +235,15 @@ class XeboSurveyManagerClass extends SimpleEventEmitter {
         this.survey.id,
         this.resolvedCollectorUUID,
         this.apiKey,
-        this.currentAnswers
+        this.currentAnswers,
+        {
+          userData: this.userData ?? undefined,
+          deviceModel: this.deviceModel,
+          platform: Platform.OS,
+          osVersion: this.osVersion,
+          startTime: this.surveyStartTime,
+          endTime,
+        },
       );
 
       if (!result.ok) {
@@ -242,6 +273,10 @@ class XeboSurveyManagerClass extends SimpleEventEmitter {
       startTime: this.surveyStartTime,
       endTime,
       answers: [...this.currentAnswers],
+      userData: this.userData ?? undefined,
+      deviceModel: this.deviceModel,
+      platform: Platform.OS,
+      osVersion: this.osVersion,
     };
 
     await XeboOfflineQueue.enqueue(queued);
@@ -265,7 +300,15 @@ class XeboSurveyManagerClass extends SimpleEventEmitter {
           queued.surveyId,
           queued.collectorUUID,
           this.apiKey,
-          queued.answers
+          queued.answers,
+          {
+            userData: queued.userData,
+            deviceModel: queued.deviceModel,
+            platform: queued.platform,
+            osVersion: queued.osVersion,
+            startTime: queued.startTime,
+            endTime: queued.endTime,
+          },
         );
         if (!result.ok) throw new Error(`HTTP ${result.status}`);
         console.log('[Xebo Offline] Flushed response:', queued.responseId);

package/src/index.ts

@@ -18,6 +18,7 @@ export type {
   XeboNPSLabels,
   XeboConditionalFollowUp,
   XeboSurveyPage,
+  XeboUserData,
 } from './models/XeboModels';
 
 export { XeboQuestionType } from './models/XeboModels';

package/src/models/XeboModels.ts

@@ -93,6 +93,17 @@ export interface XeboAnswer {
   value: XeboAnswerValue[];
 }
 
+// ─── User / eData ─────────────────────────────────────────────────────────────
+
+export interface XeboUserData {
+  name?: string;
+  email?: string;
+  phone?: string;
+  uniqueId?: string;
+  country?: string;
+  city?: string;
+}
+
 // ─── Offline Queue ────────────────────────────────────────────────────────────
 
 export interface XeboQueuedResponse {
@@ -104,6 +115,10 @@ export interface XeboQueuedResponse {
   startTime: string;
   endTime: string;
   answers: XeboAnswer[];
+  userData?: XeboUserData;
+  deviceModel?: string;
+  platform?: string;
+  osVersion?: string;
 }
 
 // ─── Config ───────────────────────────────────────────────────────────────────