@umituz/react-native-onboarding 2.2.0 → 2.3.0

package/README.md

@@ -185,6 +185,8 @@ const slides: OnboardingSlide[] = [
 | `showProgressText` | `boolean` | `true` | Show progress text (1 of 5) |
 | `storageKey` | `string` | - | Custom storage key for completion state |
 | `autoComplete` | `boolean` | `false` | Auto-complete on last slide |
+| `enableDeviceTracking` | `boolean` | `false` | Collect device info during onboarding |
+| `userId` | `string` | - | User ID for device tracking (optional) |
 
 ### OnboardingSlide Interface
 
@@ -328,6 +330,69 @@ const isComplete = userData.completedAt !== undefined;
 
 // Check if onboarding was skipped
 const wasSkipped = userData.skipped === true;
+
+// Get device info (if device tracking was enabled)
+const deviceInfo = userData.deviceInfo;
+```
+
+## 📱 Device Tracking (Optional)
+
+Collect device information during onboarding for analytics or support purposes.
+
+### Installation
+
+First, install the device tracking package:
+
+```bash
+npm install @umituz/react-native-device
+```
+
+### Usage
+
+```tsx
+import { OnboardingScreen } from '@umituz/react-native-onboarding';
+
+<OnboardingScreen
+  slides={slides}
+  enableDeviceTracking={true}
+  userId="user123" // Optional
+  onComplete={async () => {
+    const userData = onboardingStore.getUserData();
+    
+    // Device info is now available
+    console.log('Device:', userData.deviceInfo?.platform);
+    console.log('OS:', userData.deviceInfo?.osVersion);
+    console.log('App:', userData.deviceInfo?.appVersion);
+  }}
+/>
+```
+
+### Device Info Structure
+
+```typescript
+{
+  deviceId: string;
+  platform: 'ios' | 'android' | 'web';
+  osVersion: string;
+  appVersion: string;
+  deviceName: string;
+  manufacturer: string;
+  brand: string;
+  timestamp: number;
+  userId?: string; // If provided
+}
+```
+
+### Manual Device Info Collection
+
+```tsx
+import { OnboardingDeviceTrackingService } from '@umituz/react-native-onboarding';
+
+// Collect device info manually
+const deviceInfo = await OnboardingDeviceTrackingService.collectDeviceInfo('user123');
+
+// Check if device tracking is available
+const isAvailable = await OnboardingDeviceTrackingService.isDeviceTrackingAvailable();
 ```
 
 ## 🔄 Resetting Onboarding

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -44,6 +44,11 @@
     "react-native-safe-area-context": "^5.0.0",
     "zustand": "^5.0.0"
   },
+  "peerDependenciesMeta": {
+    "@umituz/react-native-device": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",

package/src/domain/entities/OnboardingOptions.ts

@@ -85,5 +85,17 @@ export interface OnboardingOptions {
    * Show paywall modal on onboarding completion (default: false)
    */
   showPaywallOnComplete?: boolean;
+
+  /**
+   * Enable device tracking (default: false)
+   * When enabled, collects device information during onboarding
+   */
+  enableDeviceTracking?: boolean;
+
+  /**
+   * User ID for device tracking (optional)
+   * Only used when enableDeviceTracking is true
+   */
+  userId?: string;
 }
 

package/src/domain/entities/OnboardingUserData.ts

@@ -39,5 +39,17 @@ export interface OnboardingUserData {
     gender?: string;
     [key: string]: any;
   };
+
+  /**
+   * Device information (optional)
+   * Only collected when enableDeviceTracking is true
+   */
+  deviceInfo?: {
+    deviceId?: string;
+    platform?: string;
+    osVersion?: string;
+    appVersion?: string;
+    [key: string]: any;
+  };
 }
 

package/src/index.ts

@@ -52,6 +52,7 @@ export {
   useOnboardingNavigation,
   type UseOnboardingNavigationReturn,
 } from "./infrastructure/hooks/useOnboardingNavigation";
+export { OnboardingDeviceTrackingService } from "./infrastructure/services/OnboardingDeviceTrackingService";
 
 // =============================================================================
 // PRESENTATION LAYER - Components and Screens

package/src/infrastructure/services/OnboardingDeviceTrackingService.ts

@@ -0,0 +1,60 @@
+/**
+ * Onboarding Device Tracking Service
+ *
+ * Handles device information collection during onboarding
+ * Single Responsibility: Device tracking only
+ */
+
+import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
+
+/**
+ * Service for device tracking during onboarding
+ * Optional feature - only used when enableDeviceTracking is true
+ */
+export class OnboardingDeviceTrackingService {
+  /**
+   * Collect device information
+   * @param userId - Optional user ID
+   * @returns Device information object
+   */
+  static async collectDeviceInfo(userId?: string): Promise<OnboardingUserData['deviceInfo']> {
+    try {
+      // Dynamic import to avoid loading @umituz/react-native-device if not needed
+      // @ts-expect-error - Optional peer dependency, may not be installed
+      const { DeviceService } = await import('@umituz/react-native-device');
+      
+      const systemInfo = await DeviceService.getSystemInfo({ userId });
+      
+      return {
+        deviceId: systemInfo.device.modelId || 'unknown',
+        platform: systemInfo.device.platform,
+        osVersion: systemInfo.device.osVersion || 'unknown',
+        appVersion: systemInfo.application.nativeApplicationVersion || 'unknown',
+        deviceName: systemInfo.device.deviceName || 'unknown',
+        manufacturer: systemInfo.device.manufacturer || 'unknown',
+        brand: systemInfo.device.brand || 'unknown',
+        timestamp: systemInfo.timestamp,
+        ...(userId && { userId }),
+      };
+    } catch (error) {
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) console.warn('Failed to collect device info:', error);
+      return undefined;
+    }
+  }
+
+  /**
+   * Check if device tracking is available
+   * @returns True if @umituz/react-native-device is available
+   */
+  static async isDeviceTrackingAvailable(): Promise<boolean> {
+    try {
+      // @ts-expect-error - Optional peer dependency, may not be installed
+      await import('@umituz/react-native-device');
+      return true;
+    } catch {
+      return false;
+    }
+  }
+}
+

package/src/infrastructure/storage/OnboardingStore.ts

@@ -12,6 +12,7 @@ import {
   unwrap,
 } from "@umituz/react-native-storage";
 import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
+import { OnboardingDeviceTrackingService } from "../services/OnboardingDeviceTrackingService";
 
 interface OnboardingStore {
   // State
@@ -23,7 +24,7 @@ interface OnboardingStore {
 
   // Actions
   initialize: (storageKey?: string) => Promise<void>;
-  complete: (storageKey?: string) => Promise<void>;
+  complete: (storageKey?: string, options?: { enableDeviceTracking?: boolean; userId?: string }) => Promise<void>;
   skip: (storageKey?: string) => Promise<void>;
   setCurrentStep: (step: number) => void;
   reset: (storageKey?: string) => Promise<void>;
@@ -33,6 +34,7 @@ interface OnboardingStore {
   getAnswer: (questionId: string) => any;
   getUserData: () => OnboardingUserData;
   setUserData: (data: OnboardingUserData) => Promise<void>;
+  collectDeviceInfo: (userId?: string) => Promise<void>;
 }
 
 const DEFAULT_STORAGE_KEY = StorageKey.ONBOARDING_COMPLETED;
@@ -67,7 +69,7 @@ export const useOnboardingStore = create<OnboardingStore>((set, get) => ({
     });
   },
 
-  complete: async (storageKey = DEFAULT_STORAGE_KEY) => {
+  complete: async (storageKey = DEFAULT_STORAGE_KEY, options?: { enableDeviceTracking?: boolean; userId?: string }) => {
     set({ loading: true, error: null });
 
     const result = await storageRepository.setString(storageKey, "true");
@@ -75,6 +77,12 @@ export const useOnboardingStore = create<OnboardingStore>((set, get) => ({
     // Update user data with completion timestamp
     const userData = get().userData;
     userData.completedAt = new Date().toISOString();
+
+    // Collect device info if enabled
+    if (options?.enableDeviceTracking) {
+      userData.deviceInfo = await OnboardingDeviceTrackingService.collectDeviceInfo(options.userId);
+    }
+
     await storageRepository.setObject(USER_DATA_STORAGE_KEY, userData);
 
     set({
@@ -144,6 +152,13 @@ export const useOnboardingStore = create<OnboardingStore>((set, get) => ({
     await storageRepository.setObject(USER_DATA_STORAGE_KEY, data);
     set({ userData: data });
   },
+
+  collectDeviceInfo: async (userId?: string) => {
+    const userData = get().userData;
+    userData.deviceInfo = await OnboardingDeviceTrackingService.collectDeviceInfo(userId);
+    await storageRepository.setObject(USER_DATA_STORAGE_KEY, userData);
+    set({ userData: { ...userData } });
+  },
 }));
 
 /**

package/src/presentation/screens/OnboardingScreen.tsx

@@ -62,6 +62,18 @@ export interface OnboardingScreenProps extends OnboardingOptions {
    * When true, shows premium paywall before completing onboarding
    */
   showPaywallOnComplete?: boolean;
+
+  /**
+   * Enable device tracking (default: false)
+   * When enabled, collects device information during onboarding
+   */
+  enableDeviceTracking?: boolean;
+
+  /**
+   * User ID for device tracking (optional)
+   * Only used when enableDeviceTracking is true
+   */
+  userId?: string;
 }
 
 /**
@@ -88,6 +100,8 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   renderSlide,
   onUpgrade,
   showPaywallOnComplete = false,
+  enableDeviceTracking = false,
+  userId,
 }) => {
   const insets = useSafeAreaInsets();
   const tokens = useAppDesignTokens();
@@ -112,7 +126,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   } = useOnboardingNavigation(
     filteredSlides.length,
     async () => {
-      await onboardingStore.complete(storageKey);
+      await onboardingStore.complete(storageKey, { enableDeviceTracking, userId });
       if (onComplete) {
         await onComplete();
       }
@@ -217,16 +231,18 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
           useGradient={useGradient}
         />
       )}
-      {renderSlide ? (
-        renderSlide(currentSlide)
-      ) : currentSlide.type === "question" && currentSlide.question ? (
-        <QuestionSlide
-          slide={currentSlide}
-          value={currentAnswer}
-          onChange={setCurrentAnswer}
-        />
-      ) : (
-        <OnboardingSlideComponent slide={currentSlide} />
+      {currentSlide && (
+        renderSlide ? (
+          renderSlide(currentSlide)
+        ) : currentSlide.type === "question" && currentSlide.question ? (
+          <QuestionSlide
+            slide={currentSlide}
+            value={currentAnswer}
+            onChange={setCurrentAnswer}
+          />
+        ) : (
+          <OnboardingSlideComponent slide={currentSlide} />
+        )
       )}
       {renderFooter ? (
         renderFooter({