@upeex/ads-sdk 1.1.23 → 1.1.24

package/README.md

@@ -1,97 +1,16 @@
 # SDK-apps-React-native
-SDK oficial da Upeex para exibir anúncios em aplicativos React Native e Expo.
+SDK para aplicaçõe React Native rodarem anúncios:    
 
-## Instalação
+# Comando para inciar
+npm i @upeex/ads-sdk
 
-Instale o pacote e suas dependências via npm:
+### Como importar
 
-```bash
-npm install @upeex/ads-sdk
-```
-
-## Como Usar
-
-### Importação
-
-```javascript
+```js
 import AdBanner from '@upeex/ads-sdk';
-```
-
-### 1. Banner Simples (Padrão)
-
-Ideal para exibir em listas ou rodapés. O anúncio carrega no tamanho especificado ou padrão.
-
-```javascript
-<AdBanner
-  client="SEU_ID_CLIENTE"
-  slot="SEU_ID_SLOT"
-/>
-```
-
-### 2. Anúncio Popup (Modal)
-
-Exibe um anúncio em tela cheia (modal) sobrepondo o conteúdo. 
-**Comportamento:**
-- Abre automaticamente se houver anúncio disponível.
-- **Bloqueio de 5 segundos:** O usuário deve aguardar 5 segundos antes de fechar.
-- **Spinner:** Um indicador de carregamento aparece durante o bloqueio.
-- **Sem Auto-Refresh:** O popup carrega apenas uma vez.
-- **Visual:** Ocupa toda a tela (transparente na StatusBar) e a imagem é redimensionada para 90% da largura.
-
-#### ⚠️ Onde Colocar o Popup (Importante!)
-
-Para garantir que o popup abra corretamente e não sobreponha outros Modals de forma errada, **coloque o componente no final do seu container principal**, logo antes de fechar a view da tela.
-
-**Exemplo Correto:**
-
-```javascript
-return (
-  <View style={{ flex: 1 }}> {/* Seu Container Principal (View, SafeAreaView, etc) */}
-     <Header />
-     <Conteudo />
-     
-     {/* Outros Modals do seu App */}
-     <Modal visible={isLoading}>...</Modal>
-
-     {/* ✅ COLOCAR AQUI, NO FINAL: */}
-     <AdBanner
-       client="SEU_ID_CLIENTE"
-       slot="SEU_ID_SLOT"
-       typeads="popup"
-     />
-  </View>
-);
-```
-
-```
-
-**Evite colocar dentro de:**
-- Componentes que são desmontados condicionalmente (`{show && <AdBanner />}`).
-- Headers ou Footers com `position: absolute` ou `zIndex` restritivo.
-
-#### ⚠️ Conflito com Outros Modals (Loading, Alertas)
-
-O React Native pode ter problemas ao tentar exibir **dois Modals ao mesmo tempo** (ex: um Loading Spinner e o Anúncio Popup).
-- Se o seu app abre um Modal de "Carregando..." ao entrar na tela, aguarde ele fechar antes de renderizar o anúncio, ou use o anúncio como o próprio loading inicial.
-- O SDK possui `zIndex` alto (9999), mas o sistema operacional (especialmente Android) pode priorizar o último Modal aberto na árvore de componentes.
-
-
-### Props Disponíveis
-
-| Prop | Tipo | Descrição |
-|Data | --- | --- |
-| `client` | `string` | **Obrigatório**. ID do cliente fornecido pela Upeex. |
-| `slot` | `string` | **Obrigatório**. ID do slot (espaço) do anúncio. |
-| `typeads` | `'banner' \| 'popup'` | Define o formato. Padrão é `'banner'`. |
-| `theme` | `'light' \| 'dark'` | Define o tema (cores de fundo). Padrão `'light'`. |
-| `baseUrl` | `string` | URL base da API (opcional). |
-| `debug` | `boolean` | Ativa logs no console (avisa se o componente foi desmontado erradamente). |
-
-## Solução de Problemas
 
-- **Erro "Cannot find module 'react-native'"**: Certifique-se de que `react` e `react-native` estão instalados no seu projeto.
-- **Popup não abre**:
-    1. Verifique se `typeads="popup"`.
-    2. Ative `debug={true}` e olhe o console. Se aparecer "Nenhum anúncio disponível", é normal.
-    3. Se aparecer o aviso "O componente foi desmontado...", mova o `<AdBanner />` para a raiz da tela.
-- **Sobreposição**: O popup possui `zIndex: 9999` e `elevation: 11`. Se ainda estiver atrás de algum elemento, verifique se o pai não tem um `zIndex` maior.
+// Carregar anúncio
+ <AdBanner
+  client="SEU_CLIENTE"
+  slot="SEU_SLOT"
+ /

package/dist/AdBanner.d.ts

@@ -8,6 +8,5 @@ type Props = {
     style?: object;
     debug?: boolean;
 };
-export default function AdBanner({ client, slot, baseUrl, theme, typeAds, typeads, // Receive alias
-style, debug, }: Props): any;
+export default function AdBanner({ client, slot, baseUrl, theme, typeAds, typeads, style, debug, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useState, useEffect } from 'react';
-import { Platform, Dimensions, StyleSheet, View, Text, Modal, TouchableWithoutFeedback, TouchableOpacity, ActivityIndicator, Image, Linking } from 'react-native';
+import { useState, useEffect } from 'react';
+import { Platform, Dimensions, Animated, StyleSheet, Modal, View, TouchableOpacity, Image, Text, Linking } from 'react-native';
 
 async function getSignals() {
     var _a, _b, _c, _d, _e, _f;
@@ -79,8 +79,14 @@ async function fetchAd({ baseUrl, client, slot, debug = false, typeAds, }) {
     return ad;
 }
 
-function AdBanner({ client, slot, baseUrl = 'https://app.upeex.com.br/ad', theme = 'light', typeAds, typeads, // Receive alias
-style = {}, debug = false, }) {
+// Default fallback ads
+const DEFAULT_POPUP_IMAGE = 'https://app.upeex.com.br/files/show/ads_square.jpeg';
+const DEFAULT_BANNER_IMAGE = 'https://app.upeex.com.br/files/show/ads_horizontal.jpg';
+const DEFAULT_CLICK_URL = 'https://upeex.com/';
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+// Workaround for TS2604
+Animated.View;
+function AdBanner({ client, slot, baseUrl = 'https://app.upeex.com.br/ad', theme = 'light', typeAds, typeads, style = {}, debug = false, }) {
     var _a;
     const [ad, setAd] = useState(null);
     const [error, setError] = useState(null);
@@ -91,11 +97,6 @@ style = {}, debug = false, }) {
     };
     const effectiveTypeAds = (_a = (typeAds || typeads)) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     const isPopup = effectiveTypeAds === 'popup';
-    // Track visibility with ref to avoid dependency loops in useEffect
-    const isVisibleRef = React.useRef(false);
-    useEffect(() => {
-        isVisibleRef.current = modalVisible;
-    }, [modalVisible]);
     useEffect(() => {
         let refreshTimer;
         const load = async () => {
@@ -119,8 +120,7 @@ style = {}, debug = false, }) {
                 if (isPopup) {
                     setModalVisible(true);
                 }
-                // Only setup refresh if NOT a popup
-                if (!isPopup && data.refresh && data.refresh > 0) {
+                if (data.refresh && data.refresh > 0) {
                     log(`Refresh ativo: ${data.refresh}s`);
                     refreshTimer = setTimeout(() => {
                         log('Refazendo request do anúncio');
@@ -140,27 +140,32 @@ style = {}, debug = false, }) {
         return () => {
             if (refreshTimer)
                 clearTimeout(refreshTimer);
-            if (isPopup && isVisibleRef.current && debug) {
-                console.warn('[UPEEX ADS] Aviso: O componente AdBanner (Popup) foi desmontado enquanto estava visível. Verifique se ele não está dentro de uma View que foi ocultada ou removida da tela.');
+        };
+    }, [client, slot, baseUrl]);
+    // ─── FALLBACK: show default ad on error ───────────────────────────────────
+    if (error) {
+        const fallbackImage = isPopup ? DEFAULT_POPUP_IMAGE : DEFAULT_BANNER_IMAGE;
+        const handleFallbackPress = () => {
+            if (Platform.OS === 'web') {
+                window.open(DEFAULT_CLICK_URL, '_blank');
+            }
+            else {
+                Linking.openURL(DEFAULT_CLICK_URL);
             }
         };
-    }, [client, slot, baseUrl, effectiveTypeAds]); // Removed modalVisible to prevent loops
-    // Popup close delay logic
-    const [canClose, setCanClose] = useState(false);
-    useEffect(() => {
-        if (isPopup && modalVisible) {
-            setCanClose(false);
-            const timer = setTimeout(() => {
-                setCanClose(true);
-            }, 5000);
-            return () => clearTimeout(timer);
+        if (isPopup) {
+            return (jsx(Modal, { transparent: true, animationType: "fade", visible: true, onRequestClose: () => { }, children: jsx(View, { style: styles.modalOverlay, children: jsx(View, { style: styles.modalContent, children: jsx(TouchableOpacity, { onPress: handleFallbackPress, activeOpacity: 0.9, children: jsx(Image, { source: { uri: fallbackImage }, style: styles.popupImage, resizeMode: "contain" }) }) }) }) }));
         }
-    }, [isPopup, modalVisible]);
+        // Banner fallback
+        return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [styles.upeexContainer, theme === 'dark' && styles.upeexDark, style], onPress: handleFallbackPress, children: jsx(Image, { source: { uri: fallbackImage }, style: styles.bannerFallbackImage, resizeMode: "contain" }) }));
+    }
+    // ──────────────────────────────────────────────────────────────────────────
+    if (!ad) {
+        return debug ? (jsx(View, { style: [styles.upeexContainer, styles.upeexLoading], children: jsx(Text, { style: styles.upeexLoadingText, children: "Carregando an\u00FAncio\u2026" }) })) : null;
+    }
     const handlePress = () => {
         log('Clique no anúncio', ad.clickUrl);
         if (isPopup) {
-            // Allow close on click even if timer not finished?
-            // Usually ads allow clicking through immediately.
             setModalVisible(false);
         }
         if (!ad.clickUrl)
@@ -172,27 +177,11 @@ style = {}, debug = false, }) {
             Linking.openURL(ad.clickUrl);
         }
     };
-    const handleClose = () => {
-        if (canClose) {
-            setModalVisible(false);
-        }
-    };
-    if (error) {
-        return debug ? (jsx(View, { style: [styles.upeexContainer, styles.upeexDebug], children: jsx(Text, { style: styles.upeexDebugText, children: error }) })) : null;
-    }
-    if (!ad) {
-        return debug ? (jsx(View, { style: [styles.upeexContainer, styles.upeexLoading], children: jsx(Text, { style: styles.upeexLoadingText, children: "Carregando an\u00FAncio\u2026" }) })) : null;
-    }
+    // ─── POPUP ─────────────────────────────────────────────────────────────────
     if (isPopup) {
-        return (jsx(Modal, { transparent: true, visible: modalVisible, onRequestClose: handleClose, animationType: "fade", statusBarTranslucent: true, hardwareAccelerated: true, children: jsx(TouchableWithoutFeedback, { onPress: handleClose, children: jsx(View, { style: styles.upeexOverlay, children: jsx(TouchableWithoutFeedback, { onPress: () => { }, children: jsxs(View, { style: [
-                                styles.upeexPopupContainer,
-                                theme === 'dark' && styles.upeexDark,
-                            ], children: [canClose ? (jsx(TouchableOpacity, { onPress: handleClose, style: styles.upeexCloseButton, children: jsx(Text, { style: styles.upeexCloseText, children: "\u2715" }) })) : (jsx(View, { style: styles.upeexCloseButton, children: jsx(ActivityIndicator, { size: "small", color: "#999" }) })), jsx(TouchableOpacity, { activeOpacity: 0.9, onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: {
-                                            width: Dimensions.get('window').width * 0.9,
-                                            height: Dimensions.get('window').height * 0.8,
-                                            resizeMode: 'contain',
-                                        } }) })] }) }) }) }) }));
+        return (jsx(Modal, { transparent: true, animationType: "fade", visible: modalVisible, onRequestClose: () => setModalVisible(false), children: jsx(View, { style: styles.modalOverlay, children: jsxs(View, { style: styles.modalContent, children: [jsx(TouchableOpacity, { style: styles.modalClose, onPress: () => setModalVisible(false), children: jsx(Text, { style: styles.modalCloseText, children: "\u2715" }) }), jsx(TouchableOpacity, { onPress: handlePress, activeOpacity: 0.9, children: jsx(Image, { source: { uri: ad.image }, style: styles.popupImage, resizeMode: "contain" }) })] }) }) }));
     }
+    // ─── BANNER ────────────────────────────────────────────────────────────────
     return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [
             styles.upeexContainer,
             theme === 'dark' && styles.upeexDark,
@@ -227,38 +216,44 @@ const styles = StyleSheet.create({
         fontSize: 11,
         color: '#c00',
     },
-    upeexOverlay: {
+    bannerFallbackImage: {
+        width: 320,
+        height: 50,
+    },
+    // Modal / Popup styles
+    modalOverlay: {
         flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        justifyContent: 'center',
+        backgroundColor: 'rgba(0,0,0,0.6)',
         alignItems: 'center',
-        zIndex: 9999,
-        elevation: 10,
+        justifyContent: 'center',
     },
-    upeexPopupContainer: {
-        backgroundColor: 'transparent',
-        padding: 0,
-        alignItems: 'center',
+    modalContent: {
         position: 'relative',
-        zIndex: 10000,
+        borderRadius: 8,
+        overflow: 'hidden',
     },
-    upeexCloseButton: {
+    modalClose: {
         position: 'absolute',
-        top: -10,
-        right: -10,
-        zIndex: 1,
-        backgroundColor: '#fff',
-        borderRadius: 15,
-        width: 30,
-        height: 30,
-        justifyContent: 'center',
+        top: 8,
+        right: 8,
+        zIndex: 10,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        borderRadius: 16,
+        width: 28,
+        height: 28,
         alignItems: 'center',
-        elevation: 5,
+        justifyContent: 'center',
     },
-    upeexCloseText: {
-        fontSize: 18,
+    modalCloseText: {
+        color: '#fff',
+        fontSize: 14,
         fontWeight: 'bold',
-        color: '#333',
+    },
+    popupImage: {
+        width: screenWidth * 0.85,
+        height: screenWidth * 0.85,
+        maxWidth: 400,
+        maxHeight: 400,
     },
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upeex/ads-sdk",
-  "version": "1.1.23",
+  "version": "1.1.24",
   "description": "Upeex Ads SDK for React Native and universal apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,10 +27,11 @@
   "author": "Upeex",
   "license": "MIT",
   "dependencies": {
-    "@upeex/ads-sdk": "^1.1.10",
     "expo-localization": "^17.0.8"
   },
   "devDependencies": {
+    "@types/react": "^19.2.13",
+    "@types/react-native": "^0.73.0",
     "rollup": "^4.57.0",
     "rollup-plugin-typescript2": "^0.36.0",
     "tslib": "^2.8.1",