@adadapted/react-native-sdk 3.2.0 → 3.3.0

package/src/components/AdZone.tsx

@@ -22,6 +22,7 @@ import { WebView } from "react-native-webview";
 import { ApiEnv, DeviceOS } from "../index";
 import { safeInvoke } from "../util";
 import { useEffect, useState } from "react";
+import { ReportAdButton } from "./ReportAdButton";
 
 /**
  * Props interface for {@link AdZone}.
@@ -66,13 +67,13 @@ interface Props {
      */
     onAddToListTriggered?(items: DetailedListItem[]): void;
     /**
-     * Track the ad zone visibility in parent component.
+     * Is the ad zone visible on render.
      */
-    isAdZoneVisible?: boolean;
+    offScreenAdZone: boolean;
     /**
-     * Set default ad zone visibility to false.
+     * Track the ad zone visibility in parent component. (for off-screen ads)
      */
-    defaultToInvisibleAdZone?: boolean;
+    isAdZoneVisible?: boolean;
 }
 
 /**
@@ -101,6 +102,10 @@ interface StyleDef {
      * Styles for the WebView element.
      */
     webView: ViewStyle;
+    /**
+     * Styles for the ReportAdButton.
+     */
+    reportAd: ViewStyle;
 }
 /**
  * Timer used for cycling through ads in the zone
@@ -130,36 +135,51 @@ export function AdZone(props: Props): JSX.Element {
     /**
      * Track ad visibility (for off-screen ads).
      */
-    const [isAdVisible, setIsAdVisibile] = useState(
-        props.defaultToInvisibleAdZone ? false : true
-    );
+    const [isAdVisible, setIsAdVisibile] = useState(props.isAdZoneVisible);
 
-    // - Define all useEffect triggers.
+    // Setup device listeners.
     useEffect(() => {
-        DeviceEventEmitter.addListener("visibility-event", (event) => {
+        DeviceEventEmitter.addListener("visibility-event", (event: boolean) => {
             setIsAdVisibile(event);
         });
-        DeviceEventEmitter.addListener("acknowledge", (itemName) => {
+
+        DeviceEventEmitter.addListener("acknowledge", (itemName: string) => {
             acknowledge(itemName);
         });
+
+        if (props.offScreenAdZone && isAdVisible) {
+            sendAdImpression();
+        } else if (!props.offScreenAdZone) {
+            sendAdImpression();
+        }
+
         return () => {
             clearTimeout(cycleAdTimer);
             DeviceEventEmitter.removeAllListeners("visibility-event");
             DeviceEventEmitter.removeAllListeners("acknowledge");
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    // Send impression on ad cycle.
     useEffect(() => {
         startAdTimer();
-        if (isAdVisible) {
+        if (props.offScreenAdZone && isAdVisible) {
+            sendAdImpression();
+        } else if (!props.offScreenAdZone) {
             sendAdImpression();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [adIndexShown]);
 
+    // Send impression based on visibility change. (for off-screen ads)
     useEffect(() => {
-        if (isAdVisible) {
+        if (props.offScreenAdZone && isAdVisible) {
+            sendAdImpression();
+        } else if (!props.offScreenAdZone) {
             sendAdImpression();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isAdVisible]);
 
     /**
@@ -176,6 +196,11 @@ export function AdZone(props: Props): JSX.Element {
                 width: "100%",
                 height: "100%",
             },
+            reportAd: {
+                position: "absolute",
+                top: 10,
+                right: 10,
+            },
         });
     }
 
@@ -188,8 +213,8 @@ export function AdZone(props: Props): JSX.Element {
 
     if (!currentAd || !currentAd.creative_url) {
         // If there is no ad to display, make the view take up no space.
-        finalMainViewStyle.width = "0";
-        finalMainViewStyle.height = "0";
+        finalMainViewStyle.width = 0;
+        finalMainViewStyle.height = 0;
     }
 
     /**
@@ -225,11 +250,16 @@ export function AdZone(props: Props): JSX.Element {
     function acknowledge(itemName: string): void {
         if (props.adZoneData.ads) {
             props.adZoneData.ads.forEach((ad) => {
-                ad.payload.detailed_list_items.forEach((item) => {
-                    if (item.product_title === itemName) {
-                        triggerReportAdEvent(ad, ReportedEventType.INTERACTION);
-                    }
-                });
+                if (ad.action_type === "c") {
+                    ad.payload.detailed_list_items.forEach((item) => {
+                        if (item.product_title === itemName) {
+                            triggerReportAdEvent(
+                                ad,
+                                ReportedEventType.INTERACTION
+                            );
+                        }
+                    });
+                }
             });
         }
     }
@@ -312,7 +342,6 @@ export function AdZone(props: Props): JSX.Element {
     function sendAdImpression(): void {
         const ad = props.adZoneData.ads[adIndexShown];
 
-        // Trigger an impression event for the ad.
         if (!ad.impression_tracked) {
             triggerReportAdEvent(ad, ReportedEventType.IMPRESSION);
             ad.impression_tracked = true;
@@ -360,6 +389,9 @@ export function AdZone(props: Props): JSX.Element {
                     }}
                 />
             ) : undefined}
+            <View style={styles.reportAd}>
+                <ReportAdButton adId={currentAd.ad_id} udid={props.udid} />
+            </View>
         </View>
     );
 }

package/src/components/ReportAdButton.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import { Image, Linking, StyleSheet, TouchableOpacity } from "react-native";
+
+interface Props {
+    /**
+     * The ad id of the current ad.
+     */
+    adId: string;
+    /**
+     *  The current user's udid.
+     */
+    udid: string;
+}
+
+/**
+ * Creates the ReportAdButton component.
+ * @param props The component's props.
+ * @returns a reportSdButton JSX Element.
+ */
+export function ReportAdButton(props: Props): JSX.Element {
+    const reportAdUrlBase = new URL("https://feedback.add-it.io/");
+
+    const styles = StyleSheet.create({
+        buttonStyle: {
+            width: 14,
+            height: 14,
+        },
+    });
+
+    useEffect(() => {
+        reportAdUrlBase.searchParams.append("aid", props.adId);
+        reportAdUrlBase.searchParams.append("uid", props.udid);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props]);
+
+    return (
+        <TouchableOpacity
+            style={styles.buttonStyle}
+            onPress={() => {
+                Linking.openURL(reportAdUrlBase.toString());
+            }}
+        >
+            <Image source={require("../images/ReportIcon.png")} />
+        </TouchableOpacity>
+    );
+}

package/src/index.tsx

@@ -3,7 +3,6 @@
  */
 import * as React from "react";
 import {
-    AppState,
     DeviceEventEmitter,
     EmitterSubscription,
     Linking,
@@ -100,7 +99,7 @@ export enum PayloadApiEnv {
 }
 
 /**
- * Interface defining inputs to the {@link Sdk.initialize} method.
+ * Interface defining inputs to the {@link Sdk.initialize: AdadaptedReactNativeSdk} method.
  */
 export interface InitializeProps {
     /**
@@ -142,9 +141,9 @@ export interface InitializeProps {
      */
     onOutOfAppPayloadAvailable?(payloads: OutOfAppDataPayload[]): void;
     /**
-     * Change the optional ad zone visibility default setting.
+     * Ad zones that contain off-screen ads.
      */
-    defaultToInvisibleAdZone?: boolean;
+    offScreenAdZone?: [number];
 }
 
 /**
@@ -272,6 +271,10 @@ export class AdadaptedReactNativeSdk {
      * The available ad zones.
      */
     private adZones: AdZoneInfo[] | undefined;
+    /**
+     * The available off-screen ad zones.
+     */
+    private offScreenAdZones: AdZoneInfo[] = [];
     /**
      * The touch sensitivity of the Ad Zone in both the X and Y directions.
      * This is used to determine the click/press sensitivity when the
@@ -334,9 +337,9 @@ export class AdadaptedReactNativeSdk {
      */
     private isAdZoneVisible: boolean = true;
     /**
-     * Optional default ad zone visibility for off-screen ads.
+     * Ad zones that contain off-screen ads..
      */
-    private defaultAdZoneVisibility: boolean | undefined;
+    private offScreenAdZone: [number] | undefined;
     /**
      * Gets the Session ID.
      * @returns the Session ID.
@@ -361,6 +364,14 @@ export class AdadaptedReactNativeSdk {
         return this.adZones;
     }
 
+    /**
+     * Gets the list of available off-screen Ad Zones.
+     * @returns all available off-screen ad zones.
+     */
+    public getOffScreenAdZones(): AdZoneInfo[] | undefined {
+        return this.offScreenAdZones;
+    }
+
     /**
      * @inheritDoc
      */
@@ -409,33 +420,83 @@ export class AdadaptedReactNativeSdk {
 
         for (const adZoneId in adZones) {
             if (Object.prototype.hasOwnProperty.call(adZones, adZoneId)) {
-                adZoneInfoList.push({
-                    zoneId: adZones[adZoneId].id,
-                    adZone: (
-                        <AdZone
-                            key={adZoneId}
-                            appId={this.appId}
-                            sessionId={this.sessionId!}
-                            udid={this.deviceInfo!.udid}
-                            deviceOs={this.deviceOs!}
-                            apiEnv={this.apiEnv}
-                            xyDragDistanceAllowed={
-                                this.xyAdZoneDragDistanceAllowed || 25
-                            }
-                            adZoneData={adZones[adZoneId]}
-                            onAddToListTriggered={(items) => {
-                                safeInvoke(this.onAddToListTriggered, items);
-                            }}
-                            isAdZoneVisible={!this.onAdZoneVisibilityChanged}
-                            defaultToInvisibleAdZone={
-                                this.defaultAdZoneVisibility
-                            }
-                        />
-                    ),
+                this.offScreenAdZone?.forEach((zone) => {
+                    if (Number(adZones[adZoneId].id) !== zone) {
+                        adZoneInfoList.push({
+                            zoneId: adZones[adZoneId].id,
+                            adZone: (
+                                <AdZone
+                                    key={adZoneId}
+                                    appId={this.appId}
+                                    sessionId={this.sessionId!}
+                                    udid={this.deviceInfo!.udid}
+                                    deviceOs={this.deviceOs!}
+                                    apiEnv={this.apiEnv}
+                                    xyDragDistanceAllowed={
+                                        this.xyAdZoneDragDistanceAllowed || 25
+                                    }
+                                    adZoneData={adZones[adZoneId]}
+                                    onAddToListTriggered={(items) => {
+                                        safeInvoke(
+                                            this.onAddToListTriggered,
+                                            items
+                                        );
+                                    }}
+                                    isAdZoneVisible={true}
+                                    offScreenAdZone={false}
+                                />
+                            ),
+                        });
+                    }
                 });
             }
         }
+        return adZoneInfoList;
+    }
+
+    /**
+     * Creates all off-screen Ad Zone Info objects based on provided off-screen Ad Zones.
+     * @param adZones - The object of available zones.
+     * @returns the array of off-screen Ad Zone Info objects.
+     */
+    private generateOffScreenAdZones(adZones: {
+        [key: number]: Zone;
+    }): AdZoneInfo[] {
+        const adZoneInfoList: AdZoneInfo[] = [];
 
+        for (const adZoneId in adZones) {
+            if (Object.prototype.hasOwnProperty.call(adZones, adZoneId)) {
+                this.offScreenAdZone?.forEach((zone) => {
+                    if (Number(adZones[adZoneId].id) === zone) {
+                        adZoneInfoList.push({
+                            zoneId: adZones[adZoneId].id,
+                            adZone: (
+                                <AdZone
+                                    key={adZoneId}
+                                    appId={this.appId}
+                                    sessionId={this.sessionId!}
+                                    udid={this.deviceInfo!.udid}
+                                    deviceOs={this.deviceOs!}
+                                    apiEnv={this.apiEnv}
+                                    xyDragDistanceAllowed={
+                                        this.xyAdZoneDragDistanceAllowed || 25
+                                    }
+                                    adZoneData={adZones[adZoneId]}
+                                    onAddToListTriggered={(items) => {
+                                        safeInvoke(
+                                            this.onAddToListTriggered,
+                                            items
+                                        );
+                                    }}
+                                    isAdZoneVisible={this.isAdZoneVisible}
+                                    offScreenAdZone={true}
+                                />
+                            ),
+                        });
+                    }
+                });
+            }
+        }
         return adZoneInfoList;
     }
 
@@ -466,6 +527,9 @@ export class AdadaptedReactNativeSdk {
                 .then((response) => {
                     this.sessionInfo = response.data;
                     this.adZones = this.generateAdZones(response.data.zones);
+                    this.offScreenAdZones = this.generateOffScreenAdZones(
+                        response.data.zones
+                    );
 
                     // Call the user defined callback indicating
                     // the session data has been refreshed.
@@ -576,13 +640,15 @@ export class AdadaptedReactNativeSdk {
      */
     private handleDeepLink(event: any): void {
         const searchStr = "data=";
-        const dataIndex: number = event["url"].indexOf(searchStr);
+        const dataIndex: number = event.url.indexOf(searchStr);
 
         if (dataIndex !== -1) {
-            const encodedData = event.url.substr(dataIndex + searchStr.length);
+            const encodedData: string = event.url.substr(
+                `${dataIndex}${searchStr.length}`
+            );
             const payloadData = JSON.parse(base64.decode(encodedData));
-            const payloadId = payloadData["payload_id"];
-            const itemDataList = payloadData["detailed_list_items"];
+            const payloadId = payloadData.payload_id;
+            const itemDataList = payloadData.detailed_list_items;
 
             if (itemDataList && itemDataList.length > 0) {
                 const finalItemList: OutOfAppDataPayload[] = [];
@@ -592,13 +658,13 @@ export class AdadaptedReactNativeSdk {
                         payload_id: payloadId,
                         detailed_list_items: [
                             {
-                                product_title: itemData["product_title"],
-                                product_brand: itemData["product_brand"],
-                                product_category: itemData["product_category"],
-                                product_barcode: itemData["product_barcode"],
-                                product_discount: itemData["product_discount"],
-                                product_image: itemData["product_image"],
-                                product_sku: itemData["product_sku"],
+                                product_title: itemData.product_title,
+                                product_brand: itemData.product_brand,
+                                product_category: itemData.product_category,
+                                product_barcode: itemData.product_barcode,
+                                product_discount: itemData.product_discount,
+                                product_image: itemData.product_image,
+                                product_sku: itemData.product_sku,
                             },
                         ],
                     });
@@ -642,16 +708,13 @@ export class AdadaptedReactNativeSdk {
                             payload_id: payload.payload_id,
                             detailed_list_items: [
                                 {
-                                    product_title: itemData["product_title"],
-                                    product_brand: itemData["product_brand"],
-                                    product_category:
-                                        itemData["product_category"],
-                                    product_barcode:
-                                        itemData["product_barcode"],
-                                    product_discount:
-                                        itemData["product_discount"],
-                                    product_image: itemData["product_image"],
-                                    product_sku: itemData["product_sku"],
+                                    product_title: itemData.product_title,
+                                    product_brand: itemData.product_brand,
+                                    product_category: itemData.product_category,
+                                    product_barcode: itemData.product_barcode,
+                                    product_discount: itemData.product_discount,
+                                    product_image: itemData.product_image,
+                                    product_sku: itemData.product_sku,
                                 },
                             ],
                         });
@@ -668,9 +731,9 @@ export class AdadaptedReactNativeSdk {
 
     /**
      * Notify the ad zone of visibility status change for off-screen ads.
+     * @param isVisible - Ad Zone visibility tracking.
      */
-    public onAdZoneVisibilityChanged(): void {
-        const isVisible = !this.isAdZoneVisible;
+    public onAdZoneVisibilityChanged(isVisible: boolean): void {
         this.isAdZoneVisible = isVisible;
         DeviceEventEmitter.emit("visibility-event", isVisible);
     }
@@ -735,10 +798,9 @@ export class AdadaptedReactNativeSdk {
             this.onOutOfAppPayloadAvailable = props.onOutOfAppPayloadAvailable;
         }
 
-        // If provided for off-screen ads, set the ad zone visibility for ad tracking.
-        if (props.defaultToInvisibleAdZone) {
-            this.defaultAdZoneVisibility = props.defaultToInvisibleAdZone;
-            this.onAdZoneVisibilityChanged();
+        // If provided set any off-screen ad zones.
+        if (props.offScreenAdZone) {
+            this.offScreenAdZone = props.offScreenAdZone;
         }
 
         return new Promise<void>((resolve, reject) => {
@@ -796,6 +858,10 @@ export class AdadaptedReactNativeSdk {
                             this.adZones = this.generateAdZones(
                                 response.data.zones
                             );
+                            this.offScreenAdZones =
+                                this.generateOffScreenAdZones(
+                                    response.data.zones
+                                );
 
                             // Start the session data refresh timer.
                             this.onRefreshAdZones();
@@ -821,18 +887,18 @@ export class AdadaptedReactNativeSdk {
                             this.getPayloadItemData();
 
                             // Initialize an event listener to intercept deep links while the app is running.
-
-                            this.deepLinkOnEventListener = Linking.addEventListener(
-                                "url",
-                                this.handleDeepLink
-                            );
-
-                            // Initialize an event listener to intercept App state changes.
-
-                            this.AppStateOnEventListener = AppState.addEventListener(
-                                "change",
-                                this.handleAppStateChange
-                            );
+                            this.deepLinkOnEventListener =
+                                Linking.addEventListener(
+                                    "url",
+                                    this.handleDeepLink
+                                );
+
+                            // // Initialize an event listener to intercept App state changes.
+                            // this.AppStateOnEventListener =
+                            //     AppState.addEventListener(
+                            //         "change",
+                            //         this.handleAppStateChange
+                            //     );
 
                             resolve();
                         })

package/src/util.ts

@@ -14,6 +14,8 @@ export function safeInvoke<R>(func: (() => R) | nil): R | undefined;
  * See main definition above.
  * @param func - The function to call.
  * @param arg1 - Function argument.
+ * @returns The return value of the executed function, or undefined if
+ *      the function is null/undefined
  */
 export function safeInvoke<A1, R>(
     func: ((arg1: A1) => R) | nil,
@@ -24,6 +26,8 @@ export function safeInvoke<A1, R>(
  * @param func - The function to call.
  * @param arg1 - Function argument.
  * @param arg2 - Function argument.
+ * @returns The return value of the executed function, or undefined if
+ *      the function is null/undefined
  */
 export function safeInvoke<A1, A2, R>(
     func: ((arg1: A1, arg2: A2) => R) | nil,
@@ -36,6 +40,8 @@ export function safeInvoke<A1, A2, R>(
  * @param arg1 - Function argument.
  * @param arg2 - Function argument.
  * @param arg3 - Function argument.
+ * @returns The return value of the executed function, or undefined if
+ *      the function is null/undefined
  */
 export function safeInvoke<A1, A2, A3, R>(
     func: ((arg1: A1, arg2: A2, arg3: A3) => R) | nil,
@@ -50,6 +56,8 @@ export function safeInvoke<A1, A2, A3, R>(
  * @param arg2 - Function argument.
  * @param arg3 - Function argument.
  * @param arg4 - Function argument.
+ * @returns The return value of the executed function, or undefined if
+ *      the function is null/undefined
  */
 export function safeInvoke<A1, A2, A3, A4, R>(
     func: ((arg1: A1, arg2: A2, arg3: A3, arg4: A4) => R) | nil,
@@ -66,6 +74,8 @@ export function safeInvoke<A1, A2, A3, A4, R>(
  * @param arg3 - Function argument.
  * @param arg4 - Function argument.
  * @param arg5 - Function argument.
+ * @returns The return value of the executed function, or undefined if
+ *      the function is null/undefined
  */
 export function safeInvoke<A1, A2, A3, A4, A5, R>(
     func: ((arg1: A1, arg2: A2, arg3: A3, arg4: A4, arg5: A5) => R) | nil,
@@ -84,6 +94,8 @@ export function safeInvoke<A1, A2, A3, A4, A5, R>(
  * @param arg4 - Function argument.
  * @param arg5 - Function argument.
  * @param arg6 - Function argument.
+ * @returns The return value of the executed function, or undefined if
+ *      the function is null/undefined
  */
 export function safeInvoke<A1, A2, A3, A4, A5, A6, R>(
     func:
@@ -105,6 +117,7 @@ export function safeInvoke<A1, A2, A3, A4, A5, A6, R>(
 // eslint-disable-next-line @typescript-eslint/ban-types
 export function safeInvoke(func: Function | nil, ...args: any[]): any {
     if (func) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         return func(...args);
     }
 }