@adadapted/react-native-sdk 3.1.6 → 3.1.8

package/src/api/adadaptedApiRequests.mock.ts

@@ -226,16 +226,6 @@ const AD_SESSION_DATA: AdSession = {
                             },
                         ],
                     },
-                    popup: {
-                        title_text: "",
-                        background_color: "",
-                        text_color: "",
-                        alt_close_btn: "",
-                        type: "",
-                        hide_banner: false,
-                        hide_close_btn: false,
-                        hide_browser_nav: false,
-                    },
                 },
             ],
         },
@@ -283,16 +273,6 @@ const REFRESHED_AD_SESSION_DATA: AdSession = {
                             },
                         ],
                     },
-                    popup: {
-                        title_text: "",
-                        background_color: "",
-                        text_color: "",
-                        alt_close_btn: "",
-                        type: "",
-                        hide_banner: false,
-                        hide_close_btn: false,
-                        hide_browser_nav: false,
-                    },
                 },
             ],
         },

package/src/api/adadaptedApiTypes.ts

@@ -106,10 +106,6 @@ export interface Ad {
      * ?
      */
     payload: AdPayload;
-    /**
-     * ?
-     */
-    popup: AdPopup;
 }
 
 /**
@@ -194,44 +190,6 @@ export interface DetailedListItem {
     tracking_id?: string;
 }
 
-/**
- * The definition of an Ad Popup.
- */
-export interface AdPopup {
-    /**
-     * ?
-     */
-    alt_close_btn: string;
-    /**
-     * ?
-     */
-    background_color: string;
-    /**
-     * ?
-     */
-    hide_banner: boolean;
-    /**
-     * ?
-     */
-    hide_browser_nav: boolean;
-    /**
-     * ?
-     */
-    hide_close_btn: boolean;
-    /**
-     * ?
-     */
-    text_color: string;
-    /**
-     * ?
-     */
-    title_text: string;
-    /**
-     * ?
-     */
-    type: string;
-}
-
 /**
  * The definition of a Keyword Intercepts object.
  */
@@ -426,16 +384,10 @@ export enum AdActionType {
     EXTERNAL = "e",
     /**
      * Used for opening URLs in a web view within the app.
-     * Works the same as {@link AdActionType.POPUP}.
      * NOTE: This one should probably be deprecated with the new
      *       platform redesign, since its not as obvious what it does.
      */
     LINK = "l",
-    /**
-     * Used for opening URLs in a web view within the app.
-     * Works the same as {@link AdActionType.LINK}.
-     */
-    POPUP = "p",
     /**
      * Used for opening app store URLs in the app store.
      */

package/src/components/AdZone.tsx

@@ -14,7 +14,6 @@ import {
 } from "../api/adadaptedApiTypes";
 import { WebView } from "react-native-webview";
 import { ApiEnv, DeviceOS } from "../index";
-import { AdPopup } from "./AdPopup";
 import { safeInvoke } from "../util";
 
 /**
@@ -69,10 +68,6 @@ interface State {
      * Tracks the current ad index being shown.
      */
     adIndexShown: number;
-    /**
-     * If true, the ad popup(if available) is open.
-     */
-    isAdPopupOpen: boolean;
     /**
      * Tracks the coordinates when the user started touching the Ad View.
      */
@@ -130,7 +125,6 @@ export class AdZone extends React.Component<Props, State> {
 
         this.state = {
             adIndexShown: startingAdIndex,
-            isAdPopupOpen: false,
             touchStartCoords: undefined,
         };
     }
@@ -214,20 +208,6 @@ export class AdZone extends React.Component<Props, State> {
                         }}
                     />
                 ) : undefined}
-                {currentAd && currentAd.creative_url ? (
-                    <AdPopup
-                        ad={currentAd}
-                        isOpen={this.state.isAdPopupOpen}
-                        onClose={() => {
-                            this.setState({
-                                isAdPopupOpen: false,
-                            });
-                        }}
-                        onAddToListItemClicked={(item) => {
-                            safeInvoke(this.props.onAddToListTriggered, [item]);
-                        }}
-                    />
-                ) : undefined}
             </View>
         );
     }
@@ -244,15 +224,6 @@ export class AdZone extends React.Component<Props, State> {
         ) {
             // Action Type: EXTERNAL
             Linking.openURL(currentAd.action_path).then();
-        } else if (
-            (currentAd.action_type === AdActionType.POPUP ||
-                currentAd.action_type === AdActionType.LINK) &&
-            currentAd.action_path
-        ) {
-            // Action Type: POPUP or LINK
-            this.setState({
-                isAdPopupOpen: true,
-            });
         } else if (
             currentAd.action_type === AdActionType.CONTENT &&
             currentAd.payload &&
@@ -324,35 +295,21 @@ export class AdZone extends React.Component<Props, State> {
      * Cycles to the next ad to display in the current available sequence of ads.
      */
     private cycleDisplayedAd(): void {
-        if (!this.state.isAdPopupOpen) {
-            // Start by determining the next ad index to display.
-            let nextAdIndex = 0;
-
-            if (
-                this.state.adIndexShown <
-                this.props.adZoneData.ads.length - 1
-            ) {
-                nextAdIndex = this.state.adIndexShown + 1;
-            }
+        // Start by determining the next ad index to display.
+        let nextAdIndex = 0;
 
-            this.setState(
-                {
-                    adIndexShown: nextAdIndex,
-                },
-                () => {
-                    this.initializeAd();
-                }
-            );
-        } else {
-            // Create a new timer with a timer length of just 10 seconds.
-            // This will allow us to re-check if the popup is still open
-            // quicker and handle switching to the next ad sooner instead of
-            // just restarting the current timer. We do this, because we must
-            // maintain the current ad shown or the popup will cycle to the
-            // next ad while the user is actively engaged with it. Then when
-            // the user closes the popup, the ad will cycle to the next quickly.
-            this.createAdTimer(10000);
+        if (this.state.adIndexShown < this.props.adZoneData.ads.length - 1) {
+            nextAdIndex = this.state.adIndexShown + 1;
         }
+
+        this.setState(
+            {
+                adIndexShown: nextAdIndex,
+            },
+            () => {
+                this.initializeAd();
+            }
+        );
     }
 
     /**

package/src/index.tsx

@@ -294,7 +294,7 @@ export class AdadaptedReactNativeSdk {
     private keywordIntercepts: KeywordIntercepts | undefined;
     /**
      * If provided, triggers when an "add to list" item is
-     * clicked in an ad zone or in-app popup.
+     * clicked in an ad zone.
      * @param items - The array of items to "add to list".
      * @param isExternalPayload - If true, the items are from an external payload.
      */

package/lib/commonjs/components/AdPopup.js

@@ -1,352 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AdPopup = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _reactNativeWebview = require("react-native-webview");
-
-var _reactNativeModal = _interopRequireDefault(require("react-native-modal"));
-
-var _reactNative = require("react-native");
-
-var _adadaptedApiTypes = require("../api/adadaptedApiTypes");
-
-var _util = require("../util");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-/**
- * Creates the AdPopup component.
- */
-class AdPopup extends React.Component {
-  /**
-   * The web view element reference.
-   */
-
-  /**
-   * @inheritDoc
-   */
-  constructor(props, context) {
-    super(props, context);
-
-    _defineProperty(this, "webViewElementRef", null);
-
-    this.state = {
-      canGoBack: false,
-      canGoForward: false,
-      isPageLoading: true
-    };
-  }
-  /**
-   * @inheritDoc
-   */
-
-
-  render() {
-    // Generate the styles each render in case the ad is updated with
-    // new settings that need to be reflected in the styles of the view.
-    const styles = this.generateStyles();
-    return /*#__PURE__*/React.createElement(_reactNativeModal.default, {
-      style: styles.mainView,
-      isVisible: this.props.isOpen,
-      hasBackdrop: false,
-      coverScreen: true
-    }, /*#__PURE__*/React.createElement(_reactNative.SafeAreaView, {
-      style: {
-        flex: 1
-      }
-    }, /*#__PURE__*/React.createElement(_reactNative.SafeAreaView, {
-      style: styles.navHeaderView
-    }, /*#__PURE__*/React.createElement(_reactNative.View, {
-      style: styles.navArrowsContainer
-    }, /*#__PURE__*/React.createElement(_reactNative.View, {
-      onTouchStart: () => {
-        if (this.webViewElementRef && this.state.canGoBack) {
-          this.webViewElementRef.goBack();
-        }
-      }
-    }, /*#__PURE__*/React.createElement(_reactNative.Image, {
-      source: {
-        uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABpUlEQVRoQ+2YvUrFQBBGZ59Hq8QXsLcVLCwsFBQUFBQUlHsFBQUFBQUFLSwsBB9C+/2m0ifxAUYCCinM5i47c83Cpgy7yznzzZAfR5lfLnN+KgL/nWBJoCSQWIHSQokFTN5eEogtYVVVY+fcAhF9icg7M49jz2ivn2oCP/CjFsAngNksBP6Ab7gBYG7wAh3wJCLHg2+hLngiOgJwklL9Zq/pDATgDwCcpcKbCgTg9wBcaMCbCQR6foeZr7TgTQS64J1zW977G014dYFA22wAuNOGVxUIwK8BeLCAVxMIwK8AeLKCVxEIDOwyMz9bwqsI1HX9QUQzbVARWWLmF2t4LQFPRHW2Atm3UFP5rIf4t3UCD7BV7/2j1TyovswFJNa99/cWEqoCoXYSkU1mvtWWUBfomYltANeaEiYCPRK7AC61JMwEeiT2AZxrSJgKhCScc4fe+9NUCXOBnsEe/kd9z3Min/9CHUm8AZhPaaOptFAbsKqqkXNusbknIq+D/y+UUt1J9k49gUmgYtYUgZhqWawtCVhUNebMkkBMtSzWlgQsqhpz5jfHSasx85A3NgAAAABJRU5ErkJggg=="
-      },
-      style: styles.navLeftArrow
-    })), /*#__PURE__*/React.createElement(_reactNative.View, {
-      onTouchStart: () => {
-        if (this.webViewElementRef && this.state.canGoForward) {
-          this.webViewElementRef.goForward();
-        }
-      }
-    }, /*#__PURE__*/React.createElement(_reactNative.Image, {
-      source: {
-        uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABnklEQVRoQ+3YsUoEMRAG4H8ewCfRKpNeH0KwsLBQUFBQUFBQ8ERBQUFBQUELCwsLS3tfwFylzzOykAVZmz0yM+dCrs7O/d9Mwu2FMPAPDTw/KmDaE6wTqBMo7EDdQoUNLH68TiCEMCKieQAzIvI+Ho9HxW2doEDxBJj5C8Bs+50icuKJ0AB8AuDfTfNEFAPyFjruTt0LUQxogjPzEYDTaSBUABlxAODcG6EGyIg9AJeeCFVAEzyEsENE114IdUATPMa4JSK3HggTQN5OGwDurRFmgIxYA/BoiTAFZMQKgGcrhDkgH+xlInqxQLgAMmKJiF47iO+U0twE725/lk4bkFJK8d8DQgjD3ULMPNxDHGNcFZEni8Pb1jQ7AzHGdRF5sAzf1DYBhBA2iejOOrwJgJm3Adx4hFcHMPMugCuv8KoAZt4HcOEZXg0QYzwUkTPv8CqAwf+p794LNV3xupFQmQAzfwBYaLePZ3gVQN5Ci7nzb563ciqAkjdJjWdNfok1gvWtUQF9O2W1rk7AqrN969YJ9O2U1bo6AavO9q37A5jF5jGXG4ruAAAAAElFTkSuQmCC"
-      },
-      style: styles.navRightArrow
-    }))), /*#__PURE__*/React.createElement(_reactNative.View, {
-      style: styles.navBarTitleView
-    }, /*#__PURE__*/React.createElement(_reactNative.Text, {
-      style: styles.titleText,
-      numberOfLines: 1,
-      ellipsizeMode: "tail"
-    }, this.props.ad.popup.title_text)), /*#__PURE__*/React.createElement(_reactNative.View, {
-      style: styles.loadingIndicatorContainer
-    }, this.state.isPageLoading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
-      size: "large",
-      color: "#2969a0"
-    }) : undefined)), /*#__PURE__*/React.createElement(_reactNativeWebview.WebView, {
-      source: {
-        uri: this.props.ad.action_path
-      },
-      ref: ref => {
-        this.webViewElementRef = ref;
-      },
-      androidHardwareAccelerationDisabled: true,
-      automaticallyAdjustContentInsets: false,
-      allowFileAccess: true,
-      style: styles.webView,
-      javaScriptEnabled: true,
-      injectedJavaScript: this.props.ad.action_type === _adadaptedApiTypes.AdActionType.POPUP || this.props.ad.action_type === _adadaptedApiTypes.AdActionType.LINK ? this.getAddToListCircularJavascript() : "",
-      onMessage: event => {
-        const responseObj = JSON.parse(event.nativeEvent.data);
-        (0, _util.safeInvoke)(this.props.onAddToListItemClicked, responseObj);
-      },
-      onNavigationStateChange: navState => {
-        this.setState({
-          canGoBack: navState.canGoBack,
-          canGoForward: navState.canGoForward
-        });
-      },
-      onLoadStart: () => {
-        this.setState({
-          isPageLoading: true
-        });
-      },
-      onLoadEnd: () => {
-        this.setState({
-          isPageLoading: false
-        });
-      }
-    }), /*#__PURE__*/React.createElement(_reactNative.SafeAreaView, {
-      style: styles.closeButtonView
-    }, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
-      style: styles.closeButtonContainer,
-      onPress: () => {
-        (0, _util.safeInvoke)(this.props.onClose);
-      }
-    }, /*#__PURE__*/React.createElement(_reactNative.Text, {
-      style: styles.closeButtonText
-    }, "Close")))));
-  }
-  /**
-   * Generates the javascript to pass down to the Web View that extracts the
-   * clicked product information based on the circular ad design.
-   * @returns the javascript string to pass to the Web View.
-   */
-
-
-  getAddToListCircularJavascript() {
-    // TODO: This method should ultimately be removed. We shouldn't have to
-    //      hack the web view's javascript just to get the correct data to
-    //      return. When the circular templates get reworked, we should
-    //      build in an onMessage response within the circulars page so we
-    //      don't have to do it this way.
-    return `
-            const adButtons = document.getElementsByTagName("button");
-
-            if (adButtons.length > 0) {
-                if (adButtons.length > 1 && adButtons[1].getAttribute("data-payload-id")) {
-                    for (let x = 0; x < adButtons.length; x++) {
-                        if (adButtons[x].getAttribute("data-payload-id")) {
-                            adButtons[x].addEventListener("click", (event) => {
-                                window.ReactNativeWebView.postMessage(
-                                    JSON.stringify(
-                                        window.AdAdapted.payloads[adButtons[x].getAttribute("data-payload-id")]
-                                    )
-                                );
-                            });
-                        }
-                    }
-                } else {
-                    const onDataPostMessage = (imgSrc) => {
-                        const valueAfterLastSlash = imgSrc.match(/(?:[^\\/](?!(\\/)))+$/g).toString();
-                        const upcValueWithLeadingZeros = valueAfterLastSlash.match(/[^.]*/).toString();
-                        const finalUpcValue = parseInt(upcValueWithLeadingZeros, 10);
-                        const itemData = window.__NUXT__.data[0].items;
-                        let clickedItem = {};
-                        
-                        for (let i = 0; i < itemData.length; i++) {
-                            if (itemData[i].upc == finalUpcValue) {
-                                clickedItem = itemData[i];
-                            }
-                        }
-                        
-                        window.ReactNativeWebView.postMessage(
-                            JSON.stringify({
-                                product_barcode: clickedItem.upc,
-                                product_brand: clickedItem.brand,
-                                product_category: clickedItem.category,
-                                product_discount: clickedItem.sale_price,
-                                product_image: clickedItem.image,
-                                product_sku: clickedItem.retailer_sku,
-                                product_title: clickedItem.title
-                            })
-                        );
-                    };
-                    
-                    const onItemDialogLoad = () => {
-                        setTimeout(() => {
-                            document.getElementsByClassName("modal-body")[0].getElementsByTagName("button")[0].addEventListener("click", (event) => {
-                                onDataPostMessage(
-                                    event.target.parentElement.getElementsByTagName("img")[0].getAttribute("src")
-                                );
-                            });
-                        }, 100);
-                    };
-                    
-                    const adItemImages = document.querySelectorAll(".item img");
-                    const adItemPromotionDivs = document.querySelectorAll(".item .promotion");
-                    const adItemTitleDivs = document.querySelectorAll(".item .title");
-                    const adItemPricingDivs = document.querySelectorAll(".item .pricing");
-                    
-                    for (let x = 0; x < adItemImages.length; x++) {
-                        adItemImages[x].addEventListener("click", (event) => {
-                            onItemDialogLoad();
-                        });
-                    }
-                    
-                    for (let x = 0; x < adItemPromotionDivs.length; x++) {
-                        adItemPromotionDivs[x].addEventListener("click", (event) => {
-                            onItemDialogLoad();
-                        });
-                    }
-                    
-                    for (let x = 0; x < adItemTitleDivs.length; x++) {
-                        adItemTitleDivs[x].addEventListener("click", (event) => {
-                            onItemDialogLoad();
-                        });
-                    }
-                    
-                    for (let x = 0; x < adItemPricingDivs.length; x++) {
-                        adItemPricingDivs[x].addEventListener("click", (event) => {
-                            onItemDialogLoad();
-                        });
-                    }
-                    
-                    for (let x = 0; x < adButtons.length; x++) {
-                        adButtons[x].addEventListener("click", (event) => {
-                            onDataPostMessage(
-                                event.target.parentElement.getElementsByTagName("img")[0].getAttribute("src")
-                            );
-                        });
-                    }
-                }
-            }
-        `;
-  }
-  /**
-   * Generates all component related styles.
-   * @returns the styles needed for the component.
-   */
-
-
-  generateStyles() {
-    const backButtonOpacity = this.state.canGoBack ? 1 : 0.3;
-    const forwardButtonOpacity = this.state.canGoForward ? 1 : 0.3;
-    return _reactNative.StyleSheet.create({
-      mainView: {
-        display: "flex",
-        flexDirection: "column",
-        position: "relative",
-        margin: 0,
-        width: "100%",
-        height: "100%"
-      },
-      navHeaderView: {
-        display: "flex",
-        flexDirection: "row",
-        height: 60,
-        width: "100%",
-        backgroundColor: "#dadada",
-        zIndex: 1
-      },
-      navArrowsContainer: {
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      navLeftArrow: {
-        width: 48,
-        height: 48,
-        marginRight: 5,
-        marginLeft: 10,
-        opacity: backButtonOpacity
-      },
-      navRightArrow: {
-        width: 48,
-        height: 48,
-        marginRight: 10,
-        marginLeft: 5,
-        opacity: forwardButtonOpacity
-      },
-      navBarTitleView: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        flex: 1
-      },
-      titleText: {
-        color: "#333333",
-        fontWeight: "bold",
-        fontSize: 18,
-        overflow: "hidden",
-        flexWrap: "nowrap"
-      },
-      loadingIndicatorContainer: {
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        marginLeft: 10,
-        marginRight: 10
-      },
-      webView: {
-        width: "100%",
-        height: "100%",
-        zIndex: 0
-      },
-      closeButtonView: {
-        height: 60,
-        width: "100%",
-        backgroundColor: "#dadada",
-        zIndex: 1
-      },
-      closeButtonContainer: {
-        display: "flex",
-        justifyContent: "center",
-        width: "100%",
-        height: "100%"
-      },
-      closeButtonText: {
-        width: "100%",
-        color: "#2969a0",
-        margin: "auto",
-        fontSize: 18,
-        textAlign: "center"
-      }
-    });
-  }
-
-}
-
-exports.AdPopup = AdPopup;
-//# sourceMappingURL=AdPopup.js.map

package/lib/commonjs/components/AdPopup.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["AdPopup.tsx"],"names":["AdPopup","React","Component","constructor","props","context","state","canGoBack","canGoForward","isPageLoading","render","styles","generateStyles","mainView","isOpen","flex","navHeaderView","navArrowsContainer","webViewElementRef","goBack","uri","navLeftArrow","goForward","navRightArrow","navBarTitleView","titleText","ad","popup","title_text","loadingIndicatorContainer","undefined","action_path","ref","webView","action_type","AdActionType","POPUP","LINK","getAddToListCircularJavascript","event","responseObj","JSON","parse","nativeEvent","data","onAddToListItemClicked","navState","setState","closeButtonView","closeButtonContainer","onClose","closeButtonText","backButtonOpacity","forwardButtonOpacity","StyleSheet","create","display","flexDirection","position","margin","width","height","backgroundColor","zIndex","justifyContent","alignItems","marginRight","marginLeft","opacity","color","fontWeight","fontSize","overflow","flexWrap","textAlign"],"mappings":"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M,QAAD,IAAc;AACnC,aAAKC,QAAL,CAAc;AACVxC,UAAAA,SAAS,EAAEuC,QAAQ,CAACvC,SADV;AAEVC,UAAAA,YAAY,EAAEsC,QAAQ,CAACtC;AAFb,SAAd;AAIH,OAjCL;AAkCI,MAAA,WAAW,EAAE,MAAM;AACf,aAAKuC,QAAL,CAAc;AACVtC,UAAAA,aAAa,EAAE;AADL,SAAd;AAGH,OAtCL;AAuCI,MAAA,SAAS,EAAE,MAAM;AACb,aAAKsC,QAAL,CAAc;AACVtC,UAAAA,aAAa,EAAE;AADL,SAAd;AAGH;AA3CL,MA1DJ,eAuGI,oBAAC,yBAAD;AAAc,MAAA,KAAK,EAAEE,MAAM,CAACqC;AAA5B,oBACI,oBAAC,6BAAD;AACI,MAAA,KAAK,EAAErC,MAAM,CAACsC,oBADlB;AAEI,MAAA,OAAO,EAAE,MAAM;AACX,8BAAW,KAAK7C,KAAL,CAAW8C,OAAtB;AACH;AAJL,oBAMI,oBAAC,iBAAD;AAAM,MAAA,KAAK,EAAEvC,MAAM,CAACwC;AAApB,eANJ,CADJ,CAvGJ,CANJ,CADJ;AA2HH;AAED;AACJ;AACA;AACA;AACA;;;AACYb,EAAAA,8BAAR,GAAiD;AAC7C;AACA;AACA;AACA;AACA;AACA,WAAQ;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SA3FQ;AA4FH;AAED;AACJ;AACA;AACA;;;AACY1B,EAAAA,cAAR,GAAmC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","sourcesContent":["/**\n * Component for creating an {@link AdPopup}.\n * @module\n */\nimport * as React from \"react\";\nimport { WebView } from \"react-native-webview\";\nimport Modal from \"react-native-modal\";\nimport {\n    ActivityIndicator,\n    Image,\n    ImageStyle,\n    SafeAreaView,\n    StyleSheet,\n    Text,\n    TextStyle,\n    TouchableOpacity,\n    View,\n    ViewStyle,\n} from \"react-native\";\nimport { Ad, AdActionType, DetailedListItem } from \"../api/adadaptedApiTypes\";\nimport { safeInvoke } from \"../util\";\n\n/**\n * Props interface for {@link AdPopup}.\n */\ninterface Props {\n    /**\n     * The add to display in the popup.\n     */\n    ad: Ad;\n    /**\n     * If true, the ad popup is displayed.\n     */\n    isOpen?: boolean;\n    /**\n     * Triggered when the popup is closing.\n     */\n    onClose?(): void;\n    /**\n     * Triggered when an ad circular item is clicked and\n     * the item should be \"added to list\".\n     * @param item - The item to add to list.\n     */\n    onAddToListItemClicked(item: DetailedListItem): void;\n}\n\n/**\n * State interface for {@link AdPopup}.\n */\ninterface State {\n    /**\n     * If true, the popup web view can navigate back.\n     */\n    canGoBack: boolean;\n    /**\n     * If true, the popup web view can navigate forward.\n     */\n    canGoForward: boolean;\n    /**\n     * If true, the webview is loading a new page.\n     */\n    isPageLoading: boolean;\n}\n\n/**\n * Defines the style typing for the component.\n */\ninterface StyleDef {\n    /**\n     * Styles for the main View element.\n     */\n    mainView: ViewStyle;\n    /**\n     * Styles for the WebView element.\n     */\n    webView: ViewStyle;\n    /**\n     * Styles for the close button View element.\n     */\n    closeButtonView: ViewStyle;\n    /**\n     * Styles for the navigation header View element.\n     */\n    navHeaderView: ViewStyle;\n    /**\n     * Styles for the nav arrow buttons view.\n     */\n    navArrowsContainer: ViewStyle;\n    /**\n     * Styles for the navigation left arrow button.\n     */\n    navLeftArrow: ImageStyle;\n    /**\n     * Styles for the navigation right arrow button.\n     */\n    navRightArrow: ImageStyle;\n    /**\n     * Styles for the nav bar title container.\n     */\n    navBarTitleView: ViewStyle;\n    /**\n     * Styles for the title text.\n     */\n    titleText: TextStyle;\n    /**\n     * Styles for the loading indicator container.\n     */\n    loadingIndicatorContainer: ViewStyle;\n    /**\n     * Styles for the close button opacity container.\n     */\n    closeButtonContainer: ViewStyle;\n    /**\n     * Styles for the button text.\n     */\n    closeButtonText: TextStyle;\n}\n\n/**\n * Creates the AdPopup component.\n */\nexport class AdPopup extends React.Component<Props, State> {\n    /**\n     * The web view element reference.\n     */\n    private webViewElementRef: WebView | null = null;\n\n    /**\n     * @inheritDoc\n     */\n    constructor(props: Props, context?: any) {\n        super(props, context);\n\n        this.state = {\n            canGoBack: false,\n            canGoForward: false,\n            isPageLoading: true,\n        };\n    }\n\n    /**\n     * @inheritDoc\n     */\n    public render(): JSX.Element {\n        // Generate the styles each render in case the ad is updated with\n        // new settings that need to be reflected in the styles of the view.\n        const styles = this.generateStyles();\n\n        return (\n            <Modal\n                style={styles.mainView}\n                isVisible={this.props.isOpen}\n                hasBackdrop={false}\n                coverScreen={true}\n            >\n                <SafeAreaView style={{ flex: 1 }}>\n                    <SafeAreaView style={styles.navHeaderView}>\n                        <View style={styles.navArrowsContainer}>\n                            <View\n                                onTouchStart={() => {\n                                    if (\n                                        this.webViewElementRef &&\n                                        this.state.canGoBack\n                                    ) {\n                                        this.webViewElementRef.goBack();\n                                    }\n                                }}\n                            >\n                                <Image\n                                    source={{\n                                        uri:\n                                            \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABpUlEQVRoQ+2YvUrFQBBGZ59Hq8QXsLcVLCwsFBQUFBQUlHsFBQUFBQUFLSwsBB9C+/2m0ifxAUYCCinM5i47c83Cpgy7yznzzZAfR5lfLnN+KgL/nWBJoCSQWIHSQokFTN5eEogtYVVVY+fcAhF9icg7M49jz2ivn2oCP/CjFsAngNksBP6Ab7gBYG7wAh3wJCLHg2+hLngiOgJwklL9Zq/pDATgDwCcpcKbCgTg9wBcaMCbCQR6foeZr7TgTQS64J1zW977G014dYFA22wAuNOGVxUIwK8BeLCAVxMIwK8AeLKCVxEIDOwyMz9bwqsI1HX9QUQzbVARWWLmF2t4LQFPRHW2Atm3UFP5rIf4t3UCD7BV7/2j1TyovswFJNa99/cWEqoCoXYSkU1mvtWWUBfomYltANeaEiYCPRK7AC61JMwEeiT2AZxrSJgKhCScc4fe+9NUCXOBnsEe/kd9z3Min/9CHUm8AZhPaaOptFAbsKqqkXNusbknIq+D/y+UUt1J9k49gUmgYtYUgZhqWawtCVhUNebMkkBMtSzWlgQsqhpz5jfHSasx85A3NgAAAABJRU5ErkJggg==\",\n                                    }}\n                                    style={styles.navLeftArrow}\n                                />\n                            </View>\n                            <View\n                                onTouchStart={() => {\n                                    if (\n                                        this.webViewElementRef &&\n                                        this.state.canGoForward\n                                    ) {\n                                        this.webViewElementRef.goForward();\n                                    }\n                                }}\n                            >\n                                <Image\n                                    source={{\n                                        uri:\n                                            \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABnklEQVRoQ+3YsUoEMRAG4H8ewCfRKpNeH0KwsLBQUFBQUFBQ8ERBQUFBQUELCwsLS3tfwFylzzOykAVZmz0yM+dCrs7O/d9Mwu2FMPAPDTw/KmDaE6wTqBMo7EDdQoUNLH68TiCEMCKieQAzIvI+Ho9HxW2doEDxBJj5C8Bs+50icuKJ0AB8AuDfTfNEFAPyFjruTt0LUQxogjPzEYDTaSBUABlxAODcG6EGyIg9AJeeCFVAEzyEsENE114IdUATPMa4JSK3HggTQN5OGwDurRFmgIxYA/BoiTAFZMQKgGcrhDkgH+xlInqxQLgAMmKJiF47iO+U0twE725/lk4bkFJK8d8DQgjD3ULMPNxDHGNcFZEni8Pb1jQ7AzHGdRF5sAzf1DYBhBA2iejOOrwJgJm3Adx4hFcHMPMugCuv8KoAZt4HcOEZXg0QYzwUkTPv8CqAwf+p794LNV3xupFQmQAzfwBYaLePZ3gVQN5Ci7nzb563ciqAkjdJjWdNfok1gvWtUQF9O2W1rk7AqrN969YJ9O2U1bo6AavO9q37A5jF5jGXG4ruAAAAAElFTkSuQmCC\",\n                                    }}\n                                    style={styles.navRightArrow}\n                                />\n                            </View>\n                        </View>\n                        <View style={styles.navBarTitleView}>\n                            <Text\n                                style={styles.titleText}\n                                numberOfLines={1}\n                                ellipsizeMode={\"tail\"}\n                            >\n                                {this.props.ad.popup.title_text}\n                            </Text>\n                        </View>\n                        <View style={styles.loadingIndicatorContainer}>\n                            {this.state.isPageLoading ? (\n                                <ActivityIndicator\n                                    size=\"large\"\n                                    color=\"#2969a0\"\n                                />\n                            ) : undefined}\n                        </View>\n                    </SafeAreaView>\n                    <WebView\n                        source={{\n                            uri: this.props.ad.action_path,\n                        }}\n                        ref={(ref) => {\n                            this.webViewElementRef = ref;\n                        }}\n                        androidHardwareAccelerationDisabled={true}\n                        automaticallyAdjustContentInsets={false}\n                        allowFileAccess={true}\n                        style={styles.webView}\n                        javaScriptEnabled={true}\n                        injectedJavaScript={\n                            this.props.ad.action_type === AdActionType.POPUP ||\n                            this.props.ad.action_type === AdActionType.LINK\n                                ? this.getAddToListCircularJavascript()\n                                : \"\"\n                        }\n                        onMessage={(event) => {\n                            const responseObj: DetailedListItem = JSON.parse(\n                                event.nativeEvent.data\n                            );\n\n                            safeInvoke(\n                                this.props.onAddToListItemClicked,\n                                responseObj\n                            );\n                        }}\n                        onNavigationStateChange={(navState) => {\n                            this.setState({\n                                canGoBack: navState.canGoBack,\n                                canGoForward: navState.canGoForward,\n                            });\n                        }}\n                        onLoadStart={() => {\n                            this.setState({\n                                isPageLoading: true,\n                            });\n                        }}\n                        onLoadEnd={() => {\n                            this.setState({\n                                isPageLoading: false,\n                            });\n                        }}\n                    />\n                    <SafeAreaView style={styles.closeButtonView}>\n                        <TouchableOpacity\n                            style={styles.closeButtonContainer}\n                            onPress={() => {\n                                safeInvoke(this.props.onClose);\n                            }}\n                        >\n                            <Text style={styles.closeButtonText}>Close</Text>\n                        </TouchableOpacity>\n                    </SafeAreaView>\n                </SafeAreaView>\n            </Modal>\n        );\n    }\n\n    /**\n     * Generates the javascript to pass down to the Web View that extracts the\n     * clicked product information based on the circular ad design.\n     * @returns the javascript string to pass to the Web View.\n     */\n    private getAddToListCircularJavascript(): string {\n        // TODO: This method should ultimately be removed. We shouldn't have to\n        //      hack the web view's javascript just to get the correct data to\n        //      return. When the circular templates get reworked, we should\n        //      build in an onMessage response within the circulars page so we\n        //      don't have to do it this way.\n        return `\n            const adButtons = document.getElementsByTagName(\"button\");\n\n            if (adButtons.length > 0) {\n                if (adButtons.length > 1 && adButtons[1].getAttribute(\"data-payload-id\")) {\n                    for (let x = 0; x < adButtons.length; x++) {\n                        if (adButtons[x].getAttribute(\"data-payload-id\")) {\n                            adButtons[x].addEventListener(\"click\", (event) => {\n                                window.ReactNativeWebView.postMessage(\n                                    JSON.stringify(\n                                        window.AdAdapted.payloads[adButtons[x].getAttribute(\"data-payload-id\")]\n                                    )\n                                );\n                            });\n                        }\n                    }\n                } else {\n                    const onDataPostMessage = (imgSrc) => {\n                        const valueAfterLastSlash = imgSrc.match(/(?:[^\\\\/](?!(\\\\/)))+$/g).toString();\n                        const upcValueWithLeadingZeros = valueAfterLastSlash.match(/[^.]*/).toString();\n                        const finalUpcValue = parseInt(upcValueWithLeadingZeros, 10);\n                        const itemData = window.__NUXT__.data[0].items;\n                        let clickedItem = {};\n                        \n                        for (let i = 0; i < itemData.length; i++) {\n                            if (itemData[i].upc == finalUpcValue) {\n                                clickedItem = itemData[i];\n                            }\n                        }\n                        \n                        window.ReactNativeWebView.postMessage(\n                            JSON.stringify({\n                                product_barcode: clickedItem.upc,\n                                product_brand: clickedItem.brand,\n                                product_category: clickedItem.category,\n                                product_discount: clickedItem.sale_price,\n                                product_image: clickedItem.image,\n                                product_sku: clickedItem.retailer_sku,\n                                product_title: clickedItem.title\n                            })\n                        );\n                    };\n                    \n                    const onItemDialogLoad = () => {\n                        setTimeout(() => {\n                            document.getElementsByClassName(\"modal-body\")[0].getElementsByTagName(\"button\")[0].addEventListener(\"click\", (event) => {\n                                onDataPostMessage(\n                                    event.target.parentElement.getElementsByTagName(\"img\")[0].getAttribute(\"src\")\n                                );\n                            });\n                        }, 100);\n                    };\n                    \n                    const adItemImages = document.querySelectorAll(\".item img\");\n                    const adItemPromotionDivs = document.querySelectorAll(\".item .promotion\");\n                    const adItemTitleDivs = document.querySelectorAll(\".item .title\");\n                    const adItemPricingDivs = document.querySelectorAll(\".item .pricing\");\n                    \n                    for (let x = 0; x < adItemImages.length; x++) {\n                        adItemImages[x].addEventListener(\"click\", (event) => {\n                            onItemDialogLoad();\n                        });\n                    }\n                    \n                    for (let x = 0; x < adItemPromotionDivs.length; x++) {\n                        adItemPromotionDivs[x].addEventListener(\"click\", (event) => {\n                            onItemDialogLoad();\n                        });\n                    }\n                    \n                    for (let x = 0; x < adItemTitleDivs.length; x++) {\n                        adItemTitleDivs[x].addEventListener(\"click\", (event) => {\n                            onItemDialogLoad();\n                        });\n                    }\n                    \n                    for (let x = 0; x < adItemPricingDivs.length; x++) {\n                        adItemPricingDivs[x].addEventListener(\"click\", (event) => {\n                            onItemDialogLoad();\n                        });\n                    }\n                    \n                    for (let x = 0; x < adButtons.length; x++) {\n                        adButtons[x].addEventListener(\"click\", (event) => {\n                            onDataPostMessage(\n                                event.target.parentElement.getElementsByTagName(\"img\")[0].getAttribute(\"src\")\n                            );\n                        });\n                    }\n                }\n            }\n        `;\n    }\n\n    /**\n     * Generates all component related styles.\n     * @returns the styles needed for the component.\n     */\n    private generateStyles(): StyleDef {\n        const backButtonOpacity = this.state.canGoBack ? 1 : 0.3;\n        const forwardButtonOpacity = this.state.canGoForward ? 1 : 0.3;\n\n        return StyleSheet.create({\n            mainView: {\n                display: \"flex\",\n                flexDirection: \"column\",\n                position: \"relative\",\n                margin: 0,\n                width: \"100%\",\n                height: \"100%\",\n            },\n            navHeaderView: {\n                display: \"flex\",\n                flexDirection: \"row\",\n                height: 60,\n                width: \"100%\",\n                backgroundColor: \"#dadada\",\n                zIndex: 1,\n            },\n            navArrowsContainer: {\n                display: \"flex\",\n                flexDirection: \"row\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n            },\n            navLeftArrow: {\n                width: 48,\n                height: 48,\n                marginRight: 5,\n                marginLeft: 10,\n                opacity: backButtonOpacity,\n            },\n            navRightArrow: {\n                width: 48,\n                height: 48,\n                marginRight: 10,\n                marginLeft: 5,\n                opacity: forwardButtonOpacity,\n            },\n            navBarTitleView: {\n                display: \"flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                flex: 1,\n            },\n            titleText: {\n                color: \"#333333\",\n                fontWeight: \"bold\",\n                fontSize: 18,\n                overflow: \"hidden\",\n                flexWrap: \"nowrap\",\n            },\n            loadingIndicatorContainer: {\n                display: \"flex\",\n                flexDirection: \"row\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                marginLeft: 10,\n                marginRight: 10,\n            },\n            webView: {\n                width: \"100%\",\n                height: \"100%\",\n                zIndex: 0,\n            },\n            closeButtonView: {\n                height: 60,\n                width: \"100%\",\n                backgroundColor: \"#dadada\",\n                zIndex: 1,\n            },\n            closeButtonContainer: {\n                display: \"flex\",\n                justifyContent: \"center\",\n                width: \"100%\",\n                height: \"100%\",\n            },\n            closeButtonText: {\n                width: \"100%\",\n                color: \"#2969a0\",\n                margin: \"auto\",\n                fontSize: 18,\n                textAlign: \"center\",\n            },\n        });\n    }\n}\n"]}