apps-sdk 1.1.57 → 1.1.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apps-sdk",
-  "version": "1.1.57",
+  "version": "1.1.58",
   "description": "Apps SDK",
   "main": "index.js",
   "scripts": {

package/src/components/AdaptyOnboarding.js

@@ -1,203 +1,217 @@
 import React from 'react';
+import { Modal } from 'react-native';
+import { AdaptyOnboardingView } from 'react-native-adapty/dist/ui';
+import { View } from "react-native";
 import Adapty from '../libraries/Adapty';
 import * as config from '../../config';
 
 class AdaptyOnboarding extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onboardingView = null;
-    this.isPresenting = false;
-    this.remoteConfig = null;
-    this.termsAccepted = false;
-    this.currentStep = 0;
-    this.totalSteps = 0;
-  }
-
-  async componentDidMount() {
-    if (this.props.visible) {
-      await this.presentOnboarding();
+    constructor(props) {
+        super(props);
+        this.state = {
+            onboarding: null,
+            isLoading: true,
+        };
+        this.remoteConfig = null;
+        this.termsAccepted = false;
+        this.currentStep = 0;
+        this.totalSteps = 0;
     }
-  }
 
-  async componentDidUpdate(prevProps) {
-    if (this.props.visible && !prevProps.visible && !this.isPresenting) {
-      await this.presentOnboarding();
-    } else if (!this.props.visible && prevProps.visible) {
-      await this.dismissOnboarding();
+    componentDidMount() {
+        const { placementID, lang } = this.props;
+        this.loadOnboarding(placementID, lang);
     }
-  }
-
-  componentWillUnmount() {
-    this.dismissOnboarding();
-  }
-
-  presentOnboarding = async () => {
-    const { 
-      placementID, 
-      lang, 
-      onCustom, 
-      onClose, 
-      onError,
-      onRemoteConfigLoaded,
-      ...handlers 
-    } = this.props;
-    
-    try {
-      this.isPresenting = true;
-      const onboarding = await Adapty.getOnboardingForPlacement(placementID, lang);
-      
-      if (onboarding) {
-        // Extraer y guardar remote config
-        this.remoteConfig = onboarding.remoteConfig || {};
-        
-        // Callback inicial con el config
-        if (onRemoteConfigLoaded && this.remoteConfig) {
-          config.DEBUG_MODE && console.log('Remote config loaded:', this.remoteConfig);
-          onRemoteConfigLoaded(this.remoteConfig);
+
+    async componentDidUpdate(prevProps) {
+        if (this.props.visible && !prevProps.visible) {
+            const { placementID, lang } = this.props;
+            await this.loadOnboarding(placementID, lang);
         }
-        
-        this.onboardingView = await Adapty.createOnboardingView(onboarding);
-        
-        this.onboardingView.registerEventHandlers({
-          onCustom: (actionId, meta) => {
-            config.DEBUG_MODE && console.log('Onboarding custom action:', actionId, meta);
-            
-            // Marcar términos aceptados solo cuando se dispara este action
-            if (actionId === 'accept_terms') {
-              this.termsAccepted = true;
-              config.DEBUG_MODE && console.log('Terms accepted - can close when reaching last step');
-            }
-            
-            // Pasar remoteConfig en el handler
-            if (onCustom) {
-              onCustom(actionId, meta, this.remoteConfig);
-            }
-          },
-          onClose: async (actionId, meta) => {
-            const isLastStep = this.totalSteps > 0 && this.currentStep === this.totalSteps - 1;
-            const canClose = this.termsAccepted && isLastStep;
-            
-            config.DEBUG_MODE && console.log('Onboarding close attempt:', {
-              actionId,
-              meta,
-              termsAccepted: this.termsAccepted,
-              currentStep: this.currentStep,
-              totalSteps: this.totalSteps,
-              isLastStep,
-              canClose
-            });
+    }
+
+    loadOnboarding = async (placementID, lang) => {
+        try {
+            this.setState({ isLoading: true });
+            const onboarding = await Adapty.getOnboardingForPlacement(placementID, lang);
             
-            // Solo permitir cerrar si:
-            // 1. El usuario aceptó los términos Y
-            // 2. Está en el último paso del onboarding
-            if (!canClose) {
-              config.DEBUG_MODE && console.log('Onboarding close prevented - must accept terms and reach last step');
-              return false; // Bloquear cierre
+            if (onboarding) {
+                this.remoteConfig = onboarding.remoteConfig || {};
+                
+                if (this.props.onRemoteConfigLoaded && this.remoteConfig) {
+                    config.DEBUG_MODE && console.log('Remote config loaded:', this.remoteConfig);
+                    this.props.onRemoteConfigLoaded(this.remoteConfig);
+                }
+                
+                this.setState({ onboarding, isLoading: false });
+            } else {
+                console.log('Onboarding not found for placement:', placementID, 'and language:', lang);
+                this.setState({ isLoading: false });
+                if (this.props.onError) {
+                    this.props.onError(new Error('Onboarding not found'), this.remoteConfig);
+                }
             }
-            
-            // Permitir cerrar
-            config.DEBUG_MODE && console.log('Onboarding close allowed - terms accepted and last step reached');
-            this.isPresenting = false;
-            
-            // Pasar remoteConfig en el handler
-            if (onClose) {
-              onClose(actionId, meta, this.remoteConfig);
+        } catch (error) {
+            console.log('Error loading onboarding:', error);
+            this.setState({ isLoading: false });
+            if (this.props.onError) {
+                this.props.onError(error, this.remoteConfig);
             }
+        }
+    }
+
+    //  --------------------------------------- Event Handlers ---------------------------------------
+    handleCustom = (actionId, meta) => {
+        config.DEBUG_MODE && console.log('Onboarding custom action:', actionId, meta);
+        
+        if (actionId === 'accept_terms') {
+            this.termsAccepted = true;
+            config.DEBUG_MODE && console.log('Terms accepted');
+        }
+        
+        if (this.props.onCustom) {
+            this.props.onCustom(actionId, meta, this.remoteConfig);
+        }
+    }
+
+    handleClose = (actionId, meta) => {
+        const isLastStep = this.totalSteps > 0 && this.currentStep === this.totalSteps - 1;
+        const canClose = this.termsAccepted && isLastStep;
+        
+        config.DEBUG_MODE && console.log('Onboarding close attempt:', {
+            actionId,
+            meta,
+            termsAccepted: this.termsAccepted,
+            currentStep: this.currentStep,
+            totalSteps: this.totalSteps,
+            isLastStep,
+            canClose
+        });
+        
+        if (!canClose) {
+            config.DEBUG_MODE && console.log('Close prevented');
+            return false;
+        }
+        
+        config.DEBUG_MODE && console.log('Close allowed');
+        
+        if (this.props.onClose) {
+            this.props.onClose(actionId, meta, this.remoteConfig);
+        }
+        
+        this.termsAccepted = false;
+        this.currentStep = 0;
+        this.totalSteps = 0;
+        
+        return true;
+    }
+
+    handleStateUpdated = (action, meta) => {
+        if (meta && typeof meta === 'object') {
+            this.currentStep = meta.screen_index ?? this.currentStep;
+            this.totalSteps = meta.total_screens ?? this.totalSteps;
             
-            await this.onboardingView.dismiss();
-            
-            // Reset para próxima vez
-            this.termsAccepted = false;
-            this.currentStep = 0;
-            this.totalSteps = 0;
-            
-            return true;
-          },
-          onError: (error) => {
-            console.error('Onboarding error:', error);
-            this.isPresenting = false;
-            // Pasar remoteConfig en el handler
-            if (onError) {
-              onError(error, this.remoteConfig);
-            }
-            return true;
-          },
-          onAnalytics: (event, data) => {
-            config.DEBUG_MODE && console.log('Onboarding analytics:', event, data);
-            if (handlers.onAnalytics) {
-              handlers.onAnalytics(event, data, this.remoteConfig);
-            }
-          },
-          onPaywall: () => {
-            config.DEBUG_MODE && console.log('Onboarding paywall event');
-            if (handlers.onPaywall) {
-              handlers.onPaywall(this.remoteConfig);
-            }
-          },
-          onStateUpdated: (action, meta) => {
-            // Extraer información del paso actual desde meta
-            if (meta && typeof meta === 'object') {
-              this.currentStep = meta.screen_index ?? this.currentStep;
-              this.totalSteps = meta.total_screens ?? this.totalSteps;
-              
-              config.DEBUG_MODE && console.log('Onboarding state updated:', {
+            config.DEBUG_MODE && console.log('State updated:', {
                 action,
                 meta,
                 currentStep: this.currentStep,
                 totalSteps: this.totalSteps,
                 termsAccepted: this.termsAccepted
-              });
-            }
-            
-            if (handlers.onStateUpdated) {
-              handlers.onStateUpdated(action, meta, this.remoteConfig);
-            }
-          },
-          onFinishedLoading: (meta) => {
-            config.DEBUG_MODE && console.log('Onboarding finished loading', meta);
-            if (handlers.onFinishedLoading) {
-              handlers.onFinishedLoading(meta, this.remoteConfig);
-            }
-          },
-        });
+            });
+        }
+        
+        if (this.props.onStateUpdated) {
+            this.props.onStateUpdated(action, meta, this.remoteConfig);
+        }
+    }
+
+    handleError = (error) => {
+        console.log('Onboarding error:', error);
         
-        await this.onboardingView.present();
-      } else {
-        console.warn('Onboarding not found for placement:', placementID, 'and language:', lang);
         if (this.props.onError) {
-          this.props.onError(new Error('Onboarding not found'), this.remoteConfig);
+            this.props.onError(error, this.remoteConfig);
         }
-      }
-    } catch (error) {
-      console.error('Error presenting onboarding:', error);
-      this.isPresenting = false;
-      if (this.props.onError) {
-        this.props.onError(error, this.remoteConfig);
-      }
+        return true;
     }
-  }
 
-  dismissOnboarding = async () => {
-    if (this.onboardingView && this.isPresenting) {
-      try {
-        await this.onboardingView.dismiss();
-        this.isPresenting = false;
-        this.remoteConfig = null;
-      } catch (error) {
-        console.error('Error dismissing onboarding:', error);
-      }
+    handleAnalytics = (event, data) => {
+        config.DEBUG_MODE && console.log('Onboarding analytics:', event, data);
+        
+        if (this.props.onAnalytics) {
+            this.props.onAnalytics(event, data, this.remoteConfig);
+        }
     }
-  }
 
-  // Método público para acceder al config desde el componente padre (opcional)
-  getRemoteConfig = () => {
-    return this.remoteConfig;
-  }
+    handlePaywall = (actionId, meta) => {
+        config.DEBUG_MODE && console.log('Onboarding paywall:', actionId, meta);
+        
+        if (this.props.onPaywall) {
+            this.props.onPaywall(this.remoteConfig);
+        }
+    }
+
+    handleFinishedLoading = (meta) => {
+        config.DEBUG_MODE && console.log('Onboarding finished loading', meta);
+        
+        if (this.props.onFinishedLoading) {
+            this.props.onFinishedLoading(meta, this.remoteConfig);
+        }
+    }
+    //  --------------------------------------- Event Handlers ---------------------------------------
+
+    render() {
+        const { visible } = this.props;
+        const { onboarding, isLoading } = this.state;
+
+        if (!visible) {
+            return null;
+        }
+
+        const content = (
+            <View style={styles.container}>
+                {!isLoading && onboarding ? (
+                    <AdaptyOnboardingView
+                        onboarding={onboarding}
+                        style={styles.onboardingView}
+                        eventHandlers={{
+                            onAnalytics: this.handleAnalytics,
+                            onClose: this.handleClose,
+                            onCustom: this.handleCustom,
+                            onPaywall: this.handlePaywall,
+                            onStateUpdated: this.handleStateUpdated,
+                            onFinishedLoading: this.handleFinishedLoading,
+                            onError: this.handleError,
+                        }}
+                    />
+                ) : null}
+            </View>
+        );
+
+        return (
+            <Modal
+                visible={visible}
+                animationType="slide"
+                presentationStyle="fullScreen"
+                onRequestClose={() => {
+                    config.DEBUG_MODE && console.log('Modal onRequestClose prevented');
+                    return false;
+                }}
+            >
+                {content}
+            </Modal>
+        );
+    }
+}
 
-  render() {
-    // Componente invisible, el onboarding se presenta nativamente
-    return null;
-  }
+const styles = {
+    container: {
+        backgroundColor: '#000',
+        width: '100%',
+        height: '100%',
+    },
+    onboardingView: {
+        flex: 1,
+    },
 }
 
 export default AdaptyOnboarding;

package/types/index.d.ts

@@ -162,14 +162,14 @@ declare module 'apps-sdk' {
         visible: boolean;
         placementID: string;
         lang: string;
-        onCustom?: (actionId: string, meta?: Record<string, any>, remoteConfig?: Record<string, any>) => void;
-        onClose?: (actionId: string, meta?: Record<string, any>, remoteConfig?: Record<string, any>) => void;
-        onError?: (error: Error | string | any, remoteConfig?: Record<string, any>) => void;
+        onCustom?: (actionId: string, meta: Record<string, any> | undefined, remoteConfig: Record<string, any> | null) => void;
+        onClose?: (actionId: string, meta: Record<string, any> | undefined, remoteConfig: Record<string, any> | null) => boolean;
+        onError?: (error: Error | any, remoteConfig: Record<string, any> | null) => boolean;
         onRemoteConfigLoaded?: (remoteConfig: Record<string, any>) => void;
-        onAnalytics?: (event: string | any, data?: Record<string, any>, remoteConfig?: Record<string, any>) => void;
-        onPaywall?: (remoteConfig?: Record<string, any>) => void;
-        onStateUpdated?: (action: any, meta?: Record<string, any>, remoteConfig?: Record<string, any>) => void;
-        onFinishedLoading?: (meta?: Record<string, any>, remoteConfig?: Record<string, any>) => void;
+        onAnalytics?: (event: any, data: any, remoteConfig: Record<string, any> | null) => void;
+        onPaywall?: (actionId: string, meta: Record<string, any> | undefined) => void;
+        onStateUpdated?: (action: any, meta: Record<string, any> | undefined, remoteConfig: Record<string, any> | null) => void;
+        onFinishedLoading?: (meta: Record<string, any> | undefined, remoteConfig: Record<string, any> | null) => void;
     }
 
     export class AdaptyOnboarding extends Component<AdaptyOnboardingProps, {}> {}