@adadapted/react-native-sdk 3.2.0 → 3.4.0

package/src/components/AdZone.tsx

@@ -2,7 +2,7 @@
  * Component for creating an {@link AdZone}.
  * @module
  */
-import * as React from "react";
+import React, { useEffect, useState } from "react";
 import {
     DeviceEventEmitter,
     Linking,
@@ -21,7 +21,7 @@ import {
 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 +66,13 @@ interface Props {
      */
     onAddToListTriggered?(items: DetailedListItem[]): void;
     /**
-     * Track the ad zone visibility in parent component.
+     * An ad zone that is not visible on screen for the initial 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 +101,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
@@ -113,54 +117,65 @@ let cycleAdTimer: ReturnType<typeof setTimeout> | undefined;
  * @param props - properties passed to AdZone.
  * @returns an AdZone JSX Element.
  */
-export function AdZone(props: Props): JSX.Element {
-    // Generates a random number between 0 and (number of available ads - 1).
-    const startingAdIndex = Math.floor(
-        Math.random() * props.adZoneData.ads.length
-    );
-
+export const AdZone = (props: Props): React.ReactElement => {
     /**
      * Tracks the current ad index being shown.
      */
-    const [adIndexShown, setAdIndexShown] = useState(startingAdIndex);
+    const [adIndexShown, setAdIndexShown] = useState(
+        Math.floor(Math.random() * props.adZoneData.ads.length)
+    );
     /**
      * Tracks the coordinates when the user started touching the Ad View.
      */
-    const [touchStartCoords, setTouchStartCoords] = useState({ x: 0, y: 0 });
+    const [touchStartCoords, setTouchStartCoords] = useState<TouchCoordinates>({
+        x: 0,
+        y: 0,
+    });
+
     /**
      * Track ad visibility (for off-screen ads).
      */
-    const [isAdVisible, setIsAdVisibile] = useState(
-        props.defaultToInvisibleAdZone ? false : true
-    );
+    const [isAdZoneVisible, 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);
         });
+
         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 (isAdZoneVisible) {
             sendAdImpression();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [adIndexShown]);
 
     useEffect(() => {
-        if (isAdVisible) {
+        if (
+            props.offScreenAdZone &&
+            isAdZoneVisible &&
+            props.adZoneData &&
+            props.adZoneData.ads &&
+            props.adZoneData.ads.length > adIndexShown &&
+            !props.adZoneData.ads[adIndexShown].impression_tracked
+        ) {
             sendAdImpression();
         }
-    }, [isAdVisible]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isAdZoneVisible]);
 
     /**
      * Generates all component related styles.
@@ -176,20 +191,26 @@ export function AdZone(props: Props): JSX.Element {
                 width: "100%",
                 height: "100%",
             },
+            reportAd: {
+                position: "absolute",
+                top: 10,
+                right: 10,
+            },
         });
     }
 
     // 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 = generateStyles();
-    const currentAd: Ad | undefined =
-        props.adZoneData.ads[adIndexShown] || undefined;
     const finalMainViewStyle = styles.mainView;
 
-    if (!currentAd || !currentAd.creative_url) {
+    if (
+        !props.adZoneData.ads[adIndexShown] ||
+        !props.adZoneData.ads[adIndexShown].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 +246,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
+                            );
+                        }
+                    });
+                }
             });
         }
     }
@@ -273,10 +299,15 @@ export function AdZone(props: Props): JSX.Element {
     function startAdTimer(): void {
         clearTimeout(cycleAdTimer);
 
-        if (props.adZoneData.ads.length > 0) {
+        if (
+            props.adZoneData.ads.length > 0 &&
+            props.adZoneData.ads[adIndexShown]
+        ) {
             const refreshTime: number =
                 props.adZoneData.ads[adIndexShown].refresh_time * 1000;
             cycleAdTimer = setTimeout(cycleDisplayedAd, refreshTime);
+        } else {
+            cycleAdTimer = setTimeout(cycleDisplayedAd, 30000);
         }
     }
 
@@ -284,18 +315,18 @@ export function AdZone(props: Props): JSX.Element {
      * Cycles to the next ad to display in the current available sequence of ads.
      */
     function cycleDisplayedAd(): void {
-        // Start by determining the next ad index to display.
         let nextAdIndex = 0;
+
+        // Start by determining the next ad index to display.
         const lastAd = props.adZoneData.ads[adIndexShown];
 
         if (adIndexShown < props.adZoneData.ads.length - 1) {
             nextAdIndex = adIndexShown + 1;
+        } else {
+            nextAdIndex = 0;
         }
 
-        if (nextAdIndex !== adIndexShown && lastAd.impression_tracked) {
-            // Reset ad impression tracking status.
-            lastAd.impression_tracked = false;
-        } else {
+        if (!lastAd.impression_tracked && !isAdZoneVisible) {
             // Send invisible ad impression if ad was not visible before end of timer cycle.
             triggerReportAdEvent(
                 lastAd,
@@ -303,6 +334,11 @@ export function AdZone(props: Props): JSX.Element {
             );
         }
 
+        if (lastAd.impression_tracked) {
+            // Reset ad impression tracking status.
+            lastAd.impression_tracked = false;
+        }
+
         setAdIndexShown(nextAdIndex);
     }
 
@@ -312,8 +348,7 @@ 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) {
+        if (ad.impression_tracked === undefined || !ad.impression_tracked) {
             triggerReportAdEvent(ad, ReportedEventType.IMPRESSION);
             ad.impression_tracked = true;
         }
@@ -322,10 +357,11 @@ export function AdZone(props: Props): JSX.Element {
     // Returned JSX.
     return (
         <View style={finalMainViewStyle}>
-            {currentAd && currentAd.creative_url ? (
+            {props.adZoneData.ads[adIndexShown] &&
+            props.adZoneData.ads[adIndexShown].creative_url ? (
                 <WebView
                     source={{
-                        uri: currentAd.creative_url,
+                        uri: props.adZoneData.ads[adIndexShown].creative_url,
                     }}
                     androidLayerType="hardware"
                     automaticallyAdjustContentInsets={false}
@@ -351,7 +387,9 @@ export function AdZone(props: Props): JSX.Element {
                                     touchStartCoords.y - touchEndCoords.y
                                 ) < props.xyDragDistanceAllowed
                             ) {
-                                onAdZoneSelected(currentAd);
+                                onAdZoneSelected(
+                                    props.adZoneData.ads[adIndexShown]
+                                );
                             }
 
                             // Make sure to reset the start coords
@@ -360,6 +398,16 @@ export function AdZone(props: Props): JSX.Element {
                     }}
                 />
             ) : undefined}
+            <View style={styles.reportAd}>
+                {props.adZoneData && props.adZoneData.ads[adIndexShown] ? (
+                    <ReportAdButton
+                        adId={props.adZoneData.ads[adIndexShown].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): React.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>
+    );
+}