apps-sdk 1.1.30 → 1.1.31

package/EJEMPLO_USO_SDK.md

@@ -0,0 +1,281 @@
+# Ejemplo de Uso del SDK Unificado
+
+## Función Storage - Mismo Código, Diferentes Plataformas
+
+### 📱 Uso desde App Expo/React Native
+
+```javascript
+import SDK from '@apps-sdk/expo';
+
+// Inicializar SDK
+await SDK.init();
+
+// Guardar datos
+await SDK.storage.storeData('user_preferences', {
+  theme: 'dark',
+  language: 'es',
+  notifications: true
+});
+
+// Obtener datos
+const preferences = await SDK.storage.getData('user_preferences');
+console.log(preferences); // { theme: 'dark', language: 'es', notifications: true }
+
+// Guardar imagen en galería (funcionalidad móvil)
+await SDK.storage.handleDownloadImageToGallery('file://path/to/image.jpg');
+
+// Comprimir imagen
+const compressedUri = await SDK.storage.compressImage('file://image.jpg', 2); // 2MB max
+```
+
+### 🌐 Uso desde App Web/Next.js
+
+```javascript
+import SDK from '@apps-sdk/web';
+
+// Inicializar SDK
+await SDK.init();
+
+// Guardar datos (MISMA API)
+await SDK.storage.storeData('user_preferences', {
+  theme: 'dark',
+  language: 'es',
+  notifications: true
+});
+
+// Obtener datos (MISMA API)
+const preferences = await SDK.storage.getData('user_preferences');
+console.log(preferences); // { theme: 'dark', language: 'es', notifications: true }
+
+// Descargar imagen (adaptado para web)
+await SDK.storage.handleDownloadImage('https://example.com/image.jpg', 'my-image');
+
+// Comprimir imagen (usando Canvas API)
+const compressedBlob = await SDK.storage.compressImage(file, 2); // 2MB max
+```
+
+## 🔧 Implementación Interna (Cómo Funciona)
+
+### Core Compartido (`@apps-sdk/core`)
+
+```javascript
+// src/storage/StorageCore.js
+export class StorageCore {
+  constructor(adapter) {
+    this.adapter = adapter; // Inyección de dependencia
+  }
+
+  async storeData(key, value) {
+    const serialized = JSON.stringify(value);
+    return await this.adapter.setItem(key, serialized);
+  }
+
+  async getData(key) {
+    const serialized = await this.adapter.getItem(key);
+    return serialized ? JSON.parse(serialized) : null;
+  }
+
+  async removeData(key) {
+    return await this.adapter.removeItem(key);
+  }
+
+  // Funciones específicas que delegan al adaptador
+  async compressImage(source, maxSizeMB) {
+    return await this.adapter.compressImage(source, maxSizeMB);
+  }
+
+  async handleDownloadImage(source, filename) {
+    return await this.adapter.downloadImage(source, filename);
+  }
+}
+```
+
+### Adaptador Expo (`@apps-sdk/expo`)
+
+```javascript
+// src/adapters/StorageAdapter.js
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as MediaLibrary from 'expo-media-library';
+import { ImageManipulator } from 'expo-image-manipulator';
+
+export class ExpoStorageAdapter {
+  // Implementación básica
+  async setItem(key, value) {
+    return await AsyncStorage.setItem(key, value);
+  }
+
+  async getItem(key) {
+    return await AsyncStorage.getItem(key);
+  }
+
+  async removeItem(key) {
+    return await AsyncStorage.removeItem(key);
+  }
+
+  // Funcionalidades específicas de móvil
+  async compressImage(imageUri, maxSizeMB) {
+    const qualities = [0.8, 0.6, 0.4, 0.2];
+    for (const quality of qualities) {
+      const compressed = await ImageManipulator.manipulateAsync(
+        imageUri,
+        [],
+        { compress: quality, format: 'jpeg' }
+      );
+      
+      const fileSize = await this.getFileSize(compressed.uri);
+      if (fileSize < maxSizeMB) {
+        return compressed.uri;
+      }
+    }
+    return null;
+  }
+
+  async downloadImage(source, filename) {
+    // Lógica específica para guardar en galería móvil
+    const { status } = await MediaLibrary.requestPermissionsAsync();
+    if (status === 'granted') {
+      return await MediaLibrary.createAssetAsync(source);
+    }
+    throw new Error('Gallery permission denied');
+  }
+}
+```
+
+### Adaptador Web (`@apps-sdk/web`)
+
+```javascript
+// src/adapters/StorageAdapter.js
+export class WebStorageAdapter {
+  // Implementación básica
+  async setItem(key, value) {
+    localStorage.setItem(key, value);
+  }
+
+  async getItem(key) {
+    return localStorage.getItem(key);
+  }
+
+  async removeItem(key) {
+    localStorage.removeItem(key);
+  }
+
+  // Funcionalidades adaptadas para web
+  async compressImage(file, maxSizeMB) {
+    return new Promise((resolve) => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      const img = new Image();
+      
+      img.onload = () => {
+        // Lógica de compresión usando Canvas API
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.drawImage(img, 0, 0);
+        
+        const qualities = [0.8, 0.6, 0.4, 0.2];
+        for (const quality of qualities) {
+          canvas.toBlob((blob) => {
+            if (blob.size / 1024 / 1024 < maxSizeMB) {
+              resolve(blob);
+            }
+          }, 'image/jpeg', quality);
+        }
+      };
+      
+      img.src = URL.createObjectURL(file);
+    });
+  }
+
+  async downloadImage(source, filename) {
+    // Lógica específica para descargar en navegador
+    const response = await fetch(source);
+    const blob = await response.blob();
+    
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  }
+}
+```
+
+### Inicialización por Plataforma
+
+#### Expo Package (`@apps-sdk/expo/index.js`)
+```javascript
+import { StorageCore } from '@apps-sdk/core';
+import { ExpoStorageAdapter } from './adapters/StorageAdapter';
+
+const storageAdapter = new ExpoStorageAdapter();
+const storage = new StorageCore(storageAdapter);
+
+export default {
+  storage,
+  // ... otros módulos
+};
+```
+
+#### Web Package (`@apps-sdk/web/index.js`)
+```javascript
+import { StorageCore } from '@apps-sdk/core';
+import { WebStorageAdapter } from './adapters/StorageAdapter';
+
+const storageAdapter = new WebStorageAdapter();
+const storage = new StorageCore(storageAdapter);
+
+export default {
+  storage,
+  // ... otros módulos
+};
+```
+
+## 🎯 Ventajas de Esta Arquitectura
+
+### Para el Desarrollador
+- **API Idéntica** - Mismo código en ambas plataformas
+- **IntelliSense** - Mismos tipos TypeScript
+- **Documentación única** - Una sola referencia
+
+### Para el Mantenimiento
+- **Lógica centralizada** - Bugs se arreglan una vez
+- **Testing unificado** - Tests del core sirven para ambas plataformas
+- **Features sincronizadas** - Nuevas funcionalidades llegan a ambas plataformas
+
+### Ejemplo de Migración
+
+#### Antes (SDK actual)
+```javascript
+// Solo funciona en Expo
+import SDK from 'apps-sdk';
+await SDK.storage.storeData('key', 'value');
+```
+
+#### Después (SDK unificado)
+```javascript
+// Funciona en Expo
+import SDK from '@apps-sdk/expo';
+await SDK.storage.storeData('key', 'value');
+
+// Funciona en Web (MISMA API)
+import SDK from '@apps-sdk/web';
+await SDK.storage.storeData('key', 'value');
+```
+
+## 📦 Instalación
+
+```bash
+# Para proyectos Expo
+npm install @apps-sdk/expo
+
+# Para proyectos Web/Next.js
+npm install @apps-sdk/web
+
+# Para proyectos que necesiten ambos (monorepo)
+npm install @apps-sdk/core @apps-sdk/expo @apps-sdk/web
+```
+
+Esta arquitectura permite que el 90% del código de tu aplicación sea idéntico entre plataformas, mientras que las diferencias específicas se manejan transparentemente en los adaptadores.

package/PLAN_SDK_UNIFICADO.md

@@ -0,0 +1,319 @@
+# Plan para Crear SDK Unificado (Expo + Web)
+
+## Objetivo
+Crear un SDK único que funcione tanto para aplicaciones Expo/React Native como para aplicaciones web (Next.js/React), maximizando la reutilización de código y manteniendo una API consistente.
+
+## Análisis del Estado Actual
+
+### Funcionalidades Existentes en SDK Expo
+- ✅ **Networking** - Gestión de APIs y comunicación con backend
+- ✅ **Storage** - Almacenamiento local y gestión de archivos/imágenes
+- ✅ **Session** - Gestión de sesión de usuario y datos del dispositivo
+- ✅ **Analytics** - MixPanel, Adjust, tracking de eventos
+- ✅ **Monetización** - Adapty, PayWall, suscripciones
+- ✅ **Notificaciones Push** - Expo notifications
+- ✅ **Utilidades** - Funciones helper, validaciones
+- ✅ **Voz** - Reconocimiento y síntesis de voz
+- ✅ **Rating** - Sistema de valoraciones
+- ✅ **Quick Actions** - Acciones rápidas del sistema
+- ✅ **Tracking Transparency** - Permisos de tracking iOS
+
+### Código Reutilizable para Web
+
+#### 🟢 Altamente Reutilizable (80-90%)
+- **Networking.js** - Lógica de APIs, fetch, gestión de eventos
+- **Session.js** - Gestión de sesión (adaptando detección de dispositivo)
+- **Utils.js** - Funciones helper, validaciones base64
+- **PayWallLogic.js** - Lógica de negocio de suscripciones
+- **MixPanel.js** - Analytics (con SDK web de MixPanel)
+- **AdJust.js** - Attribution (con SDK web de Adjust)
+
+#### 🟡 Parcialmente Reutilizable (40-60%)
+- **Storage.js** - Lógica de almacenamiento (localStorage/IndexedDB vs AsyncStorage)
+- **Adapty.js** - Monetización (con adaptaciones para web)
+- **Notifications.js** - Web Push API vs Expo notifications
+
+#### 🔴 No Reutilizable Directamente
+- **Voice.js** - Requiere Web Speech API
+- **TrackingTransparency.js** - Específico de iOS
+- **QuickActions.js** - Específico de móvil
+- **Rating.js** - Requiere implementación web custom
+
+## Arquitectura Propuesta
+
+### Estructura del Proyecto
+```
+apps-sdk-unified/
+├── packages/
+│   ├── core/                    # Lógica compartida
+│   │   ├── src/
+│   │   │   ├── networking/
+│   │   │   ├── session/
+│   │   │   ├── analytics/
+│   │   │   ├── monetization/
+│   │   │   ├── utils/
+│   │   │   └── types/
+│   │   ├── package.json
+│   │   └── tsconfig.json
+│   ├── expo/                    # Adaptadores Expo
+│   │   ├── src/
+│   │   │   ├── adapters/
+│   │   │   ├── components/
+│   │   │   └── index.ts
+│   │   ├── package.json
+│   │   └── tsconfig.json
+│   ├── web/                     # Adaptadores Web
+│   │   ├── src/
+│   │   │   ├── adapters/
+│   │   │   ├── components/
+│   │   │   └── index.ts
+│   │   ├── package.json
+│   │   └── tsconfig.json
+│   └── shared/                  # Tipos y utilidades compartidas
+│       ├── src/
+│       │   ├── types/
+│       │   └── constants/
+│       ├── package.json
+│       └── tsconfig.json
+├── tools/
+│   ├── build/
+│   └── scripts/
+├── docs/
+├── examples/
+│   ├── expo-example/
+│   └── web-example/
+├── package.json
+├── lerna.json
+└── tsconfig.json
+```
+
+## Plan de Implementación
+
+### Fase 1: Preparación y Core (Semanas 1-2)
+
+#### 1.1 Configuración del Monorepo
+- [ ] Configurar Lerna/Nx para gestión de monorepo
+- [ ] Configurar TypeScript workspace
+- [ ] Configurar ESLint y Prettier compartidos
+- [ ] Configurar scripts de build y testing
+
+#### 1.2 Extracción del Core
+- [ ] Crear package `@apps-sdk/core`
+- [ ] Migrar lógica de negocio compartida:
+  - [ ] Networking (sin dependencias de React Native)
+  - [ ] Session management (abstracto)
+  - [ ] Utils y validaciones
+  - [ ] Constantes y configuración
+- [ ] Definir interfaces y tipos compartidos
+- [ ] Crear sistema de adaptadores (Strategy Pattern)
+
+#### 1.3 Definición de Interfaces
+```typescript
+// Ejemplo de interfaz para adaptadores
+interface StorageAdapter {
+  setItem(key: string, value: string): Promise<void>;
+  getItem(key: string): Promise<string | null>;
+  removeItem(key: string): Promise<void>;
+  clear(): Promise<void>;
+}
+
+interface DeviceAdapter {
+  getDeviceInfo(): DeviceInfo;
+  getLanguage(): string;
+  getPlatform(): 'ios' | 'android' | 'web';
+}
+```
+
+### Fase 2: Adaptadores Expo (Semanas 3-4)
+
+#### 2.1 Package Expo
+- [ ] Crear `@apps-sdk/expo`
+- [ ] Implementar adaptadores específicos de Expo:
+  - [ ] StorageAdapter (AsyncStorage)
+  - [ ] DeviceAdapter (expo-device, expo-constants)
+  - [ ] NotificationAdapter (expo-notifications)
+  - [ ] VoiceAdapter (@react-native-voice/voice)
+  - [ ] FileSystemAdapter (expo-file-system)
+
+#### 2.2 Componentes Expo
+- [ ] Migrar PayWall component
+- [ ] Adaptar para nueva arquitectura
+- [ ] Mantener compatibilidad con API actual
+
+#### 2.3 Testing Expo
+- [ ] Configurar Jest para React Native
+- [ ] Tests unitarios para adaptadores
+- [ ] Tests de integración
+
+### Fase 3: Adaptadores Web (Semanas 5-6)
+
+#### 3.1 Package Web
+- [ ] Crear `@apps-sdk/web`
+- [ ] Implementar adaptadores web:
+  - [ ] StorageAdapter (localStorage/sessionStorage/IndexedDB)
+  - [ ] DeviceAdapter (navigator APIs)
+  - [ ] NotificationAdapter (Web Push API)
+  - [ ] VoiceAdapter (Web Speech API)
+  - [ ] FileSystemAdapter (File API)
+
+#### 3.2 Componentes Web
+- [ ] Crear PayWall component para React/Next.js
+- [ ] Implementar rating system para web
+- [ ] Crear equivalentes web de funcionalidades móviles
+
+#### 3.3 Librerías Web Específicas
+```json
+{
+  "dependencies": {
+    "mixpanel-browser": "^2.47.0",
+    "@adjust/web-sdk": "^5.7.0",
+    "idb": "^7.1.1",
+    "js-cookie": "^3.0.5"
+  }
+}
+```
+
+### Fase 4: Analytics y Monetización (Semanas 7-8)
+
+#### 4.1 Analytics Unificados
+- [ ] Adaptar MixPanel para ambas plataformas
+- [ ] Adaptar Adjust para web
+- [ ] Crear sistema de eventos unificado
+- [ ] Implementar queue de eventos offline
+
+#### 4.2 Monetización
+- [ ] Investigar Adapty Web SDK
+- [ ] Implementar alternativas web (Stripe, PayPal)
+- [ ] Crear interfaz unificada de pagos
+- [ ] Adaptar lógica de suscripciones
+
+### Fase 5: Testing y Documentación (Semanas 9-10)
+
+#### 5.1 Testing Integral
+- [ ] Tests unitarios para todos los packages
+- [ ] Tests de integración cross-platform
+- [ ] Tests E2E con ejemplos
+- [ ] Performance testing
+
+#### 5.2 Documentación
+- [ ] API documentation
+- [ ] Migration guide desde SDK actual
+- [ ] Ejemplos de uso
+- [ ] Best practices
+
+#### 5.3 Ejemplos
+- [ ] App Expo de ejemplo
+- [ ] App Next.js de ejemplo
+- [ ] Casos de uso comunes
+
+### Fase 6: Migración y Deploy (Semanas 11-12)
+
+#### 6.1 Migración Gradual
+- [ ] Crear herramientas de migración
+- [ ] Backward compatibility layer
+- [ ] Deprecation warnings
+- [ ] Migration scripts
+
+#### 6.2 CI/CD
+- [ ] Configurar GitHub Actions/GitLab CI
+- [ ] Automated testing
+- [ ] Automated publishing a npm
+- [ ] Semantic versioning
+
+#### 6.3 Release
+- [ ] Alpha release para testing interno
+- [ ] Beta release para early adopters
+- [ ] Stable release
+- [ ] Post-release monitoring
+
+## Consideraciones Técnicas
+
+### Gestión de Dependencias
+```json
+{
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0" // Solo para package expo
+  },
+  "optionalDependencies": {
+    "expo": ">=45.0.0" // Solo si se usa Expo
+  }
+}
+```
+
+### Tree Shaking y Bundle Size
+- Configurar builds optimizados para cada plataforma
+- Lazy loading de módulos pesados
+- Conditional imports basados en plataforma
+
+### Versionado
+- Semantic versioning para todos los packages
+- Synchronized releases
+- Changelog automatizado
+
+## Riesgos y Mitigaciones
+
+### Riesgos Identificados
+1. **Complejidad de mantenimiento** - Mitigar con buena arquitectura y testing
+2. **Bundle size** - Mitigar con tree shaking y lazy loading
+3. **Breaking changes** - Mitigar con versionado semántico y deprecation warnings
+4. **Platform-specific bugs** - Mitigar with comprehensive testing
+
+### Plan de Contingencia
+- Mantener SDK Expo actual como fallback
+- Implementación gradual por módulos
+- Rollback strategy para cada fase
+
+## Métricas de Éxito
+
+### Técnicas
+- [ ] 90%+ de cobertura de tests
+- [ ] Bundle size < 50KB para web
+- [ ] Performance similar o mejor que SDK actual
+- [ ] Zero breaking changes en migración
+
+### Negocio
+- [ ] Reducción 50% tiempo de desarrollo de nuevas features
+- [ ] Adopción 80%+ en proyectos existentes
+- [ ] Feedback positivo de desarrolladores
+- [ ] Mantenimiento más eficiente
+
+## Timeline Estimado
+
+| Fase | Duración | Entregables |
+|------|----------|-------------|
+| 1 | 2 semanas | Core setup, monorepo |
+| 2 | 2 semanas | Expo adapters |
+| 3 | 2 semanas | Web adapters |
+| 4 | 2 semanas | Analytics & monetization |
+| 5 | 2 semanas | Testing & docs |
+| 6 | 2 semanas | Migration & release |
+
+**Total: 12 semanas (3 meses)**
+
+## Recursos Necesarios
+
+### Equipo
+- 1 Senior Developer (lead)
+- 1 Frontend Developer (web specialist)
+- 1 Mobile Developer (Expo specialist)
+- 1 QA Engineer (testing)
+
+### Herramientas
+- Lerna/Nx para monorepo
+- TypeScript
+- Jest para testing
+- GitHub Actions para CI/CD
+- Storybook para component documentation
+
+## Próximos Pasos Inmediatos
+
+1. **Validar el plan** con stakeholders
+2. **Configurar el monorepo** básico
+3. **Crear POC** con un módulo simple (Utils)
+4. **Definir APIs finales** para adaptadores
+5. **Comenzar migración** del core
+
+---
+
+*Este plan está sujeto a revisiones basadas en feedback y descubrimientos durante la implementación.*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apps-sdk",
-  "version": "1.1.30",
+  "version": "1.1.31",
   "description": "Apps SDK",
   "main": "index.js",
   "scripts": {
@@ -14,7 +14,6 @@
     "@react-native-community/netinfo": "11.4.1",
     "@react-native-voice/voice": "^3.2.4",
     "apps-sdk": "^1.0.120",
-    "crypto-es": "^2.1.0",
     "expo": "~52.0.38",
     "expo-constants": "~17.0.5",
     "expo-device": "~7.0.2",

package/src/libraries/Adapty.js

@@ -82,6 +82,11 @@ class Adapty {
         }
     }
 
+    async checkPlacementExists(placementID, lang) {
+        const paywall = await this.getPaywallForPlacement(placementID, lang);
+        return paywall !== null;
+    }   
+
     async preloadPaywall(placementID, lang) {
         try {
             const paywall = await this.getPaywallForPlacement(placementID, lang);

package/src/libraries/Notifications.js

@@ -25,9 +25,9 @@ class NotificationsPush {
 
         Notifications.addNotificationResponseReceivedListener(response => {
             console.log('addNotificationResponseReceivedListener',JSON.stringify(response));
+            Storage.storeData('PUSH_ACTION', response.notification.request.content.data);
             Networking.sendEvent('action', 'click_notification', {"date_notification": response.notification.date, "content": response.notification.request.content});
             MixPanel.trackEvent('Push Notification CTA' ,{ "action": response.notification.request.content.data.action || "", "placement": response.notification.request.content.data.placement || "" });
-            Storage.storeData('PUSH_ACTION', response.notification.request.content.data);
         });
     };
 

package/types/index.d.ts

@@ -215,9 +215,10 @@ declare module 'apps-sdk' {
         getPaywallForPlacement(placementID: string, lang: string): Promise<any>;
         isActivated(): Promise<boolean>;
         createPaywallView(paywall: any): Promise<any>;
-        showPaywall(placementID: any, lang: any, eventHandlers?: PaywallEventHandlers): Promise<void>;
-        preloadPaywall(placementID: any, lang: any): Promise<any>
+        showPaywall(placementID: any, lang: string, eventHandlers?: PaywallEventHandlers): Promise<void>;
+        preloadPaywall(placementID: any, lang: string): Promise<any>
         showPaywallPreloaded(paywallView: any, eventHandlers?: PaywallEventHandlers): Promise<void>;
+        checkPlacementExists(placementID: any, lang: string): Promise<boolean>;
         getProfile(): Promise<any>;
         updateAdjustAttributionData(attribution: any): Promise<void>;
         setAdjustIntegrationIdentifier(adjustIntegrationIdentifier: string): Promise<void>;