apps-sdk 1.0.112 → 1.0.114

package/package.json

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

package/src/components/PayWall.js

@@ -1,7 +1,7 @@
-import React, {useEffect} from 'react';
-import {BottomSheet} from 'react-native-btr';
-import {WebView} from 'react-native-webview';
-import {View} from "react-native";
+import React from 'react';
+import { BottomSheet } from 'react-native-btr';
+import { WebView } from 'react-native-webview';
+import { View, Platform } from "react-native";
 import Utils from "../libraries/Utils";
 import Networking from "../libraries/Networking";
 import Storage from "../libraries/Storage";
@@ -16,6 +16,13 @@ class PayWall extends React.Component {
         this.webviewRef = React.createRef();
         this.paywallData = {};
         this.paywallJS = '';
+        this.state = {
+            htmlContent: null,
+        };
+    }
+
+    componentDidMount() {
+        this.initPayWall();
     }
 
     initPayWall = async () => {
@@ -49,11 +56,49 @@ class PayWall extends React.Component {
         }
     }
 
+    fetchAndModifyHTML = async () => {
+        try {
+            const response = await fetch(this.paywallData.url);
+            let html = await response.text();
+
+            for (let ind in config.PAYWALL_DATA.paywall_info) {
+                let paywallInfo = config.PAYWALL_DATA.paywall_info[ind];
+                let os = Platform.OS === 'ios' ? 'i' : 'a';
+                let product_id = paywallInfo.productIdentifier;
+                if (paywallInfo.localizedPriceYear) {
+                    html = html.replace(new RegExp(`\\[PRICE_YEAR\\|[^\\]]*${os}:${product_id}[^\\]]*\\]`, 'g'), paywallInfo.localizedPrice);
+                }
+                if (paywallInfo.localizedPriceWeek) {
+                    html = html.replace(new RegExp(`\\[PRICE_WEEK\\|[^\\]]*${os}:${product_id}[^\\]]*\\]`, 'g'), paywallInfo.localizedPriceWeek);
+                }
+                if (paywallInfo.localizedPriceMonth) {
+                    html = html.replace(new RegExp(`\\[PRICE_MONTH\\|[^\\]]*${os}:${product_id}[^\\]]*\\]`, 'g'), paywallInfo.localizedPriceMonth);
+                }
+                if (paywallInfo.localizedPriceDay) {
+                    html = html.replace(new RegExp(`\\[PRICE_DAY\\|[^\\]]*${os}:${product_id}[^\\]]*\\]`, 'g'), paywallInfo.localizedPriceDay);
+                }
+            }
+
+            let paywallJS = await PayWallLogic.getPayWallJS(this.props);
+            html = html.replace(
+                '</body>',
+                `<script>${paywallJS}</script></body>`
+            );
+
+            let tokens = html.match(/\[PRICE.*\]/g);
+            if (tokens) {
+                Networking.sendEvent('other', 'cp_price_token_not_replaced', { tokens: tokens, url: this.paywallData.url });
+            }
+
+            this.setState({ htmlContent: html });
+        } catch (error) {
+            console.log('Error al obtener el HTML:', error);
+        }
+    }
+
     async componentDidUpdate(prevProps) {
         if (this.props.visible && !prevProps.visible && this.paywallData.url) {
-            this.webviewRef.current.injectJavaScript(PayWallLogic.paywallJS);
-            Networking.sendEvent('scene', 'payment_card', { user_id: Session.getUserID(), card_id: this.getCardID(), scene: 'payment_card' });
-            Storage.storeData('PAYWALL_DSNID', this.getCardID());
+            await this.fetchAndModifyHTML();
         }
     }
 
@@ -69,6 +114,15 @@ class PayWall extends React.Component {
 
     eventClickSubscribe = (data) => {
         Networking.sendEvent('other', 'cta_click_init');
+
+        if (Platform.OS === 'ios' && data.iid) {
+            data.id = data.iid;
+        } else {
+            if (data.aid) {
+                data.id = data.aid;
+            }
+        }
+
         if (this.paywallData && data.id && data.id.length > 0 && this.paywallData.products_id && this.paywallData.products_id.length > 0) {
             Storage.getData('PAYWALL_DSNID').then((dsn_id) => {
                 Networking.sendEvent('action', 'cta', {product_id: data.id, dsn_id: dsn_id || ''});
@@ -150,21 +204,32 @@ class PayWall extends React.Component {
             Storage.storeData('PAYWALL_DSNID', this.getCardID());
         }
 
+        console.log('this.paywallData.url', this.paywallData.url);
+
         return (
             <BottomSheet visible={visible}>
                 <View style={styles.bottomNavigationView}>
-                    <WebView style={{flex:1}} source={{ uri: this.paywallData.url }} javaScriptEnabled ref={this.webviewRef} onMessage={this.handleMessage} onError={(err) => {console.log('Error al cargar webview:',err)}} injectedJavaScript={PayWallLogic.paywallJS}
-                             onShouldStartLoadWithRequest={request => {
-                                 console.log('request', request);
-                                 if (request.url !== this.paywallData.url) {
-                                     Networking.sendEvent('action', 'click_link', {url: request.url });
-                                     Linking.openURL(request.url);
-                                     return false;
-                                 } else {
-                                     return true;
-                                 }
-                             }}
-                    />
+                    {this.state.htmlContent ? (
+                        <WebView
+                            style={{ flex: 1 }}
+                            originWhitelist={['*']}
+                            source={{ html: this.state.htmlContent }}
+                            javaScriptEnabled
+                            ref={this.webviewRef}
+                            onMessage={this.handleMessage}
+                            onError={(err) => { console.log('Error al cargar webview:', err) }}
+                            injectedJavaScript={PayWallLogic.paywallJS}
+                            onShouldStartLoadWithRequest={request => {
+                                if (request.url !== 'about:blank' && request.url !== this.paywallData.url) {
+                                    Networking.sendEvent('action', 'click_link', { url: request.url });
+                                    Linking.openURL(request.url);
+                                    return false;
+                                } else {
+                                    return true;
+                                }
+                            }}
+                        />
+                    ) : null}
                 </View>
             </BottomSheet>
         );

package/src/libraries/PayWallLogic.js

@@ -207,6 +207,7 @@ class PayWallLogic {
             payWallInfo['localizedPrice'] = "";
             this.paywallJS = "window.subInfoInterval = setInterval(() => window.Appquiles && Appquiles.setSubscriptionPlans(" + JSON.stringify(payWallInfo) + "), 300);";
             config.DEBUG_MODE && console.log('getPayWallJS', this.paywallJS);
+            return this.paywallJS;
         } catch (error) {
             console.error(error);
         }
@@ -218,22 +219,49 @@ class PayWallLogic {
     }
 
     preparePayWallPurchaseInfo = () => {
-        let payWallInfo = [];
+        const payWallInfo = [];
 
         if (config.PAYWALL_DATA && config.PAYWALL_DATA.products_metadata) {
-            for (let key in config.PAYWALL_DATA.products_metadata) {
-                let product = config.PAYWALL_DATA.products_metadata[key];
+            for (const key in config.PAYWALL_DATA.products_metadata) {
+                const product = config.PAYWALL_DATA.products_metadata[key];
+                let price = 0;
+                let yearPrice = 0;
+                let monthPrice = 0;
+                let weekPrice = 0;
+                let dayPrice = 0;
                 let period = 'M';
+                let currencySymbol = '';
+                let symbolPositionStart = false;
+                let localizedPrice = '';
+
                 if (product.subscriptionPeriodUnitIOS) {
+                    price = product.price;
+                    currencySymbol = product.localizedPrice.replace(/[0-9,.\s]/g, '').trim();
+                    localizedPrice = product.localizedPrice;
+                    symbolPositionStart = product.localizedPrice.trim().startsWith(currencySymbol);
                     if (product.subscriptionPeriodUnitIOS === 'DAY' && product.subscriptionPeriodNumberIOS == 7) {
                         period = 'WEEK';
+                        yearPrice = parseFloat(product.localizedPrice.replace(/[^\d,.-]/g, '').replace(',', '.')) * 52;
+                        monthPrice = parseFloat(product.localizedPrice.replace(/[^\d,.-]/g, '').replace(',', '.')) * 4;
+                        weekPrice = parseFloat(product.localizedPrice.replace(/[^\d,.-]/g, '').replace(',', '.'));
+                        dayPrice = parseFloat(product.localizedPrice.replace(/[^\d,.-]/g, '').replace(',', '.')) / 7;
                     } else {
                         period = product.subscriptionPeriodUnitIOS;
+                        yearPrice = parseFloat(product.localizedPrice.replace(/[^\d,.-]/g, '').replace(',', '.')) * 12;
+                        monthPrice = parseFloat(product.localizedPrice.replace(/[^\d,.-]/g, '').replace(',', '.'));
+                        weekPrice = parseFloat(product.localizedPrice.replace(/[^\d,.-]/g, '').replace(',', '.')) / product.subscriptionPeriodNumberIOS / 4;
+                        dayPrice = parseFloat(product.localizedPrice.replace(/[^\d,.-]/g, '').replace(',', '.')) / product.subscriptionPeriodNumberIOS / 30;
                     }
-                } else {
-                    let offerDetail = product.subscriptionOfferDetails[0];
-                    let phase = offerDetail.pricingPhases.pricingPhaseList[0];
-                    let periodicity = phase.billingPeriod;
+                } else if (product.subscriptionOfferDetails) {
+                    const offerDetail = product.subscriptionOfferDetails[0];
+                    const phase = offerDetail.pricingPhases.pricingPhaseList[0];
+                    const periodicity = phase.billingPeriod;
+                    price = parseFloat(phase.priceAmountMicros) / 1000000;
+                    localizedPrice = phase.formattedPrice;
+                    weekPrice = phase.price / phase.billingPeriodLength;
+                    currencySymbol = phase.formattedPrice.replace(/[0-9,.\s]/g, '').trim();
+                    symbolPositionStart = phase.formattedPrice.trim().startsWith(currencySymbol);
+
                     switch (periodicity) {
                         case 'P1W':
                             period = 'WEEK';
@@ -249,16 +277,56 @@ class PayWallLogic {
                             break;
                     }
                 }
+
+                if (price) {
+                    const periodNumber = product.subscriptionPeriodNumberIOS || product.subscriptionPeriodNumberAndroid || 1;
+                    switch (period) {
+                        case 'MONTH':
+                            yearPrice = parseFloat(price) * 12;
+                            monthPrice = parseFloat(price);
+                            weekPrice = parseFloat(price) / parseFloat(periodNumber) / 4;
+                            dayPrice = weekPrice / 7;
+                            break;
+                        case 'YEAR':
+                            yearPrice = parseFloat(price);
+                            monthPrice = parseFloat(price) / 12;
+                            weekPrice = parseFloat(price) / parseFloat(periodNumber) / 52;
+                            dayPrice = weekPrice / 7;
+                            break;
+                        case 'WEEK':
+                            yearPrice = parseFloat(price) * 52;
+                            monthPrice = parseFloat(price) * 4;
+                            weekPrice = parseFloat(price);
+                            dayPrice = parseFloat(price) / 7;
+                            break;
+                    }
+                }
+
+                yearPrice  = parseFloat(yearPrice.toFixed(2));
+                monthPrice = parseFloat(monthPrice.toFixed(2));
+                weekPrice  = parseFloat(weekPrice.toFixed(2));
+                dayPrice   = parseFloat(dayPrice.toFixed(2));
+
+                const localizedPriceYear = symbolPositionStart ? `${currencySymbol} ${yearPrice}` : `${yearPrice} ${currencySymbol}`.trim();
+                const localizedPriceWeek = symbolPositionStart ? `${currencySymbol} ${weekPrice}` : `${weekPrice} ${currencySymbol}`.trim();
+                const localizedPriceDay = symbolPositionStart ? `${currencySymbol} ${dayPrice}` : `${dayPrice} ${currencySymbol}`.trim();
+
                 payWallInfo.push({
                     productIdentifier: product.productId,
                     localizedTitle: product.title,
                     description: product.description,
-                    localizedPrice: product.localizedPrice,
+                    localizedPrice: localizedPrice,
+                    localizedPriceYear: localizedPriceYear,
+                    localizedPriceWeek: localizedPriceWeek,
+                    localizedPriceDay: localizedPriceDay,
+                    priceYear: yearPrice,
+                    priceMonth: monthPrice,
+                    priceWeek: weekPrice,
+                    priceDay: dayPrice,
                     price: product.price,
                     type: product.type,
                     platform: product.platform,
                     currency: product.currency,
-                    // duration: product.subscriptionPeriod,
                     freePeriod: '',
                     subscriptionUnits: product.subscriptionPeriodNumberIOS || product.subscriptionPeriodNumberAndroid || 1,
                     subscriptionPeriod: this.getPeriodInt(period),
@@ -267,11 +335,15 @@ class PayWallLogic {
                 });
             }
             config.PAYWALL_DATA.paywall_info = payWallInfo;
-            config.DEBUG_MODE && console.debug('paywall_info', config.PAYWALL_DATA.paywall_info);
+            if (config.DEBUG_MODE) {
+                console.debug('paywall_info', config.PAYWALL_DATA.paywall_info);
+            }
         }
         return payWallInfo;
     }
 
+
+
     getProductIDs = () => {
         return config.PAYWALL_DATA.products;
     }