apps-sdk 1.0.28 → 1.0.29

package/package.json

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

package/src/libraries/PayWall.js

@@ -1,9 +1,17 @@
 import React from "react";
 import { WebView } from 'react-native-webview';
-import Utils from "./utils";
+import { BottomSheet } from 'react-native-btr';
+import Utils from "./Utils";
+import { StyleSheet, View, Dimensions } from 'react-native';
+
+class PayWall extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { isVisible: false, url: null };
+    }
 
-class PayWall {
     webviewRef = React.createRef();
+    bottomSheetRef = React.createRef();
 
     handleMessage = (message) => {
         const data = JSON.parse(message.nativeEvent.data);
@@ -19,15 +27,49 @@ class PayWall {
         return "window.subInfoInterval = setInterval(() => window.Appquiles && Appquiles.setSubscriptionPlans(" + JSON.stringify(information.subsPlansInfo) + "), 300);";
     }
 
-    async showPayWall(url) {
+    show = (url) => {
+        this.setState({ isVisible: true, url: url });
+    }
+
+    hide = () => {
+        this.setState({ isVisible: false, url: null });
+    }
+
+    render() {
         return (
-            <WebView style={styles.webview} source={{ uri: url }} javaScriptEnabled ref={webviewRef} onMessage={handleMessage} onError={(err) => {console.log('Error al cargar webview:',err)}} injectedJavaScript={getPayWallJS()} >
-            </WebView>
+            this.state.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.state.url }}
+                        javaScriptEnabled
+                        ref={this.webviewRef}
+                        onMessage={this.handleMessage}
+                        onError={(err) => {console.log('Error al cargar webview:',err)}}
+                        injectedJavaScript={this.getPayWallJS()}
+                    />
+                </BottomSheet>
+            </View>
         );
     }
 }
 
 const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
     webview: {
         flex: 1,
     }

package/types/index.d.ts

@@ -84,7 +84,8 @@ declare module 'apps-sdk' {
     }
 
     export class PayWall {
-        showPayWall(url: string): Promise<void>;
+        show(url: string): void;
+        hide(): void;
     }
 
     export class AppsSDK {
@@ -97,7 +98,7 @@ declare module 'apps-sdk' {
         storage: Storage;
         session: Session;
         utils: Utils;
-        payWall: PayWall;
+        paywall: PayWall;
     }
 
     const Core: AppsSDK;