@upeex/ads-sdk 1.1.23 → 1.1.25

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, useRef, useEffect } from 'react';
+import { Platform, Dimensions, Animated, StyleSheet, Modal, View, ActivityIndicator, TouchableOpacity, Text, Image, Linking } from 'react-native';
 
 async function getSignals() {
     var _a, _b, _c, _d, _e, _f;
@@ -79,22 +79,41 @@ 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 shown when server returns an error
+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: JSX element type 'Animated.View' does not have any construct or call signatures.
+const AnimatedView = 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);
     const [modalVisible, setModalVisible] = useState(false);
+    const [canClose, setCanClose] = useState(false);
+    const progressAnim = useRef(new Animated.Value(0)).current;
     const log = (...args) => {
         if (debug)
             console.log('[UPEEX ADS]', ...args);
     };
     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);
+    // Start 5-second progress bar when popup becomes visible
     useEffect(() => {
-        isVisibleRef.current = modalVisible;
+        if (modalVisible) {
+            setCanClose(false);
+            progressAnim.setValue(0);
+            Animated.timing(progressAnim, {
+                toValue: 1,
+                duration: 5000,
+                useNativeDriver: false,
+            }).start(({ finished }) => {
+                if (finished) {
+                    setCanClose(true);
+                }
+            });
+        }
     }, [modalVisible]);
     useEffect(() => {
         let refreshTimer;
@@ -119,8 +138,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 +158,41 @@ 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: 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: jsxs(View, { style: styles.modalBackground, children: [jsx(View, { style: styles.progressBarContainer, children: jsx(AnimatedView, { style: [
+                                    styles.progressBar,
+                                    {
+                                        width: progressAnim.interpolate({
+                                            inputRange: [0, 1],
+                                            outputRange: ['0%', '100%'],
+                                        }),
+                                        backgroundColor: '#fff',
+                                    },
+                                ] }) }), !canClose && (jsx(View, { style: styles.spinnerOverlay, children: jsx(ActivityIndicator, { size: "small", color: "#fff" }) })), canClose && (jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => { }, children: jsx(Text, { style: styles.closeButtonText, children: "X" }) })), jsx(TouchableOpacity, { style: styles.fullScreenTouch, activeOpacity: 1, onPress: handleFallbackPress, children: jsx(Image, { source: { uri: fallbackImage }, style: styles.fullScreenImage, resizeMode: "contain" }) })] }) }));
         }
-    }, [isPopup, modalVisible]);
+        // Banner fallback
+        return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [styles.container, theme === 'dark' && styles.dark, style], onPress: handleFallbackPress, children: jsx(Image, { source: { uri: fallbackImage }, style: { width: 320, height: 50, resizeMode: 'contain' } }) }));
+    }
+    // ──────────────────────────────────────────────────────────────────────────
+    if (!ad) {
+        return debug ? (jsx(View, { style: [styles.container, styles.loading], children: jsx(Text, { style: styles.loadingText, 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.
+        if (isPopup && canClose) {
             setModalVisible(false);
         }
         if (!ad.clickUrl)
@@ -172,93 +204,102 @@ 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: () => canClose && setModalVisible(false), children: jsxs(View, { style: styles.modalBackground, children: [jsx(View, { style: styles.progressBarContainer, children: jsx(AnimatedView, { style: [
+                                styles.progressBar,
+                                {
+                                    width: progressAnim.interpolate({
+                                        inputRange: [0, 1],
+                                        outputRange: ['0%', '100%'],
+                                    }),
+                                    backgroundColor: '#fff',
+                                },
+                            ] }) }), !canClose && (jsx(View, { style: styles.spinnerOverlay, children: jsx(ActivityIndicator, { size: "small", color: "#fff" }) })), canClose && (jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => setModalVisible(false), children: jsx(Text, { style: styles.closeButtonText, children: "X" }) })), jsx(TouchableOpacity, { style: styles.fullScreenTouch, activeOpacity: 1, onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: styles.fullScreenImage, resizeMode: "contain" }) })] }) }));
     }
-    return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [
-            styles.upeexContainer,
-            theme === 'dark' && styles.upeexDark,
-            style,
-        ], onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: {
+    // ─── BANNER ────────────────────────────────────────────────────────────────
+    return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [styles.container, theme === 'dark' && styles.dark, style], onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: {
                 width: ad.width || 320,
                 height: ad.height || 50,
                 resizeMode: 'contain',
             } }) }));
 }
 const styles = StyleSheet.create({
-    upeexContainer: {
+    container: {
         backgroundColor: '#f2f2f2',
         padding: 8,
         alignItems: 'center',
         justifyContent: 'center',
     },
-    upeexDark: {
+    dark: {
         backgroundColor: '#121212',
     },
-    upeexLoading: {
+    loading: {
         backgroundColor: '#fafafa',
     },
-    upeexLoadingText: {
+    loadingText: {
         fontSize: 11,
         color: '#999',
     },
-    upeexDebug: {
+    debug: {
         backgroundColor: '#ffecec',
     },
-    upeexDebugText: {
+    debugText: {
         fontSize: 11,
         color: '#c00',
     },
-    upeexOverlay: {
+    // Modal / Popup
+    modalBackground: {
         flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        backgroundColor: 'rgba(0,0,0,0.9)',
         justifyContent: 'center',
         alignItems: 'center',
-        zIndex: 9999,
-        elevation: 10,
     },
-    upeexPopupContainer: {
-        backgroundColor: 'transparent',
-        padding: 0,
+    fullScreenTouch: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+        justifyContent: 'center',
         alignItems: 'center',
-        position: 'relative',
-        zIndex: 10000,
     },
-    upeexCloseButton: {
+    fullScreenImage: {
+        width: '90%',
+        height: '90%',
+    },
+    closeButton: {
         position: 'absolute',
-        top: -10,
-        right: -10,
-        zIndex: 1,
-        backgroundColor: '#fff',
-        borderRadius: 15,
-        width: 30,
-        height: 30,
+        top: 50,
+        right: 20,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        width: 40,
+        height: 40,
+        borderRadius: 20,
         justifyContent: 'center',
         alignItems: 'center',
-        elevation: 5,
+        zIndex: 999,
     },
-    upeexCloseText: {
+    closeButtonText: {
+        color: '#fff',
         fontSize: 18,
         fontWeight: 'bold',
-        color: '#333',
+    },
+    progressBarContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: 5,
+        backgroundColor: 'rgba(255,255,255,0.3)',
+        zIndex: 1000,
+    },
+    progressBar: {
+        height: '100%',
+    },
+    spinnerOverlay: {
+        position: 'absolute',
+        top: 12,
+        right: 20,
+        zIndex: 1000,
     },
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upeex/ads-sdk",
-  "version": "1.1.23",
+  "version": "1.1.25",
   "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",