apps-sdk 1.0.30 → 1.0.32

package/index.js

@@ -19,5 +19,4 @@ export default {
     session:                     Session,
     utils:                       Utils,
     paywall:                     PayWall,
-    paywall2:                    PayWall2
 }

package/package.json

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

package/src/libraries/PayWall.js

@@ -1,14 +1,18 @@
-import React from 'react';
-import { WebView } from 'react-native-webview';
+import React, { useRef, useEffect } from 'react';
 import { BottomSheet } from 'react-native-btr';
+import { WebView } from 'react-native-webview';
+import {Dimensions} from "react-native";
 import Utils from "./Utils";
-import { StyleSheet, View, Dimensions } from 'react-native';
 
-export default class PayWall extends React.Component {
-    webviewRef = React.createRef();
-    bottomSheetRef = React.createRef();
+export default function PayWall({ visible, onClose }) {
+    const webviewRef = useRef(null);
+
+
+    const getPayWallJS = () => {
+        return "window.subInfoInterval = setInterval(() => window.Appquiles && Appquiles.setSubscriptionPlans(" + JSON.stringify(information.subsPlansInfo) + "), 300);";
+    }
 
-    handleMessage = (message) => {
+    const handleMessage = (message) => {
         const data = JSON.parse(message.nativeEvent.data);
         const event = "event" + Utils.capitalize(data.query);
         if (typeof this[event] === 'function') {
@@ -18,46 +22,35 @@ export default class PayWall extends React.Component {
         }
     }
 
-    getPayWallJS = () => {
-        return "window.subInfoInterval = setInterval(() => window.Appquiles && Appquiles.setSubscriptionPlans(" + JSON.stringify(information.subsPlansInfo) + "), 300);";
-    }
+    useEffect(() => {
+        if (visible) {
+            webviewRef.current.injectJavaScript(getPayWallJS());
+        }
+    }, [visible]);
 
-    render() {
-        return (
-            this.props.isVisible &&
-            <View style={styles.container}>
-                <BottomSheet
-                    ref={this.bottomSheetRef}
-                    height={0.9 * Dimensions.get('window').height} // 90% de la altura de la pantalla
-                    open={true}
-                    customStyles={{
-                        container: {
-                            flex: 1,
-                            borderTopLeftRadius: 10,
-                            borderTopRightRadius: 10,
-                        }
-                    }}
-                >
-                    <WebView
-                        style={styles.webview}
-                        source={{ uri: this.props.url }}
-                        javaScriptEnabled
-                        ref={this.webviewRef}
-                        onMessage={this.handleMessage}
-                        onError={(err) => {console.log('Error al cargar webview:',err)}}
-                        injectedJavaScript={this.getPayWallJS()}
-                    />
-                </BottomSheet>
-            </View>
-        );
-    }
+    return (
+        <BottomSheet
+            visible={visible}
+            onBackButtonPress={onClose}
+            onBackdropPress={onClose}
+            height={0.9 * Dimensions.get('window').height}
+            customStyles={{
+                container: {
+                    flex: 1,
+                    borderTopLeftRadius: 10,
+                    borderTopRightRadius: 10,
+                }
+            }}
+        >
+            <WebView
+                style={styles.webview}
+                source={{ uri: this.props.url }}
+                javaScriptEnabled
+                ref={this.webviewRef}
+                onMessage={handleMessage}
+                onError={(err) => {console.log('Error al cargar webview:',err)}}
+                injectedJavaScript={getPayWallJS()}
+            />
+        </BottomSheet>
+    );
 }
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    webview: {
-        flex: 1,
-    }
-});

package/src/libraries/index.js

@@ -4,5 +4,3 @@ export { default as Storage }           from './Storage';
 export { default as Session }           from './Session';
 export { default as Utils }             from './Utils';
 export { default as PayWall }           from './PayWall';
-export { default as PayWall2 }          from './PayWall2';
-

package/types/index.d.ts

@@ -1,4 +1,8 @@
 declare module 'apps-sdk' {
+    import { ComponentType } from 'react';
+    import { WebViewProps } from 'react-native-webview';
+    import { BottomSheetProps } from 'react-native-btr';
+
     export interface SessionData {
         app: {
             shortVersion: string;
@@ -83,6 +87,13 @@ declare module 'apps-sdk' {
         registerForPushNotificationsAsync(): Promise<string>;
     }
 
+    export interface PayWallProps extends BottomSheetProps {
+        visible: boolean;
+        onClose: () => void;
+    }
+
+    export const PayWall: ComponentType<PayWallProps>;
+
     export class AppsSDK {
         initializePushNotifications(): Promise<string>;
     }

package/src/libraries/PayWall2.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { BottomSheet } from 'react-native-btr';
-import { WebView } from 'react-native-webview';
-
-export default function PayWall2({ visible, onClose }) {
-    return (
-        <BottomSheet
-            visible={visible}
-            onBackButtonPress={onClose}
-            onBackdropPress={onClose}
-        >
-            <WebView source={{ uri: 'https://www.google.es' }} />
-        </BottomSheet>
-    );
-}