@adadapted/react-native-sdk 3.1.12 → 3.3.0

package/src/components/AdZone.tsx

@@ -3,7 +3,13 @@
  * @module
  */
 import * as React from "react";
-import { Linking, StyleSheet, View, ViewStyle } from "react-native";
+import {
+    DeviceEventEmitter,
+    Linking,
+    StyleSheet,
+    View,
+    ViewStyle,
+} from "react-native";
 import * as adadaptedApiRequests from "../api/adadaptedApiRequests";
 import {
     Ad,
@@ -15,6 +21,8 @@ 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}.
@@ -58,20 +66,14 @@ interface Props {
      * @param items - The array of items to "add to list".
      */
     onAddToListTriggered?(items: DetailedListItem[]): void;
-}
-
-/**
- * State interface for {@link AdZone}.
- */
-interface State {
     /**
-     * Tracks the current ad index being shown.
+     * Is the ad zone visible on render.
      */
-    adIndexShown: number;
+    offScreenAdZone: boolean;
     /**
-     * Tracks the coordinates when the user started touching the Ad View.
+     * Track the ad zone visibility in parent component. (for off-screen ads)
      */
-    touchStartCoords: TouchCoordinates | undefined;
+    isAdZoneVisible?: boolean;
 }
 
 /**
@@ -100,157 +102,174 @@ interface StyleDef {
      * Styles for the WebView element.
      */
     webView: ViewStyle;
+    /**
+     * Styles for the ReportAdButton.
+     */
+    reportAd: ViewStyle;
 }
+/**
+ * Timer used for cycling through ads in the zone
+ * based on the ad "refresh time" for each ad.
+ */
+let cycleAdTimer: ReturnType<typeof setTimeout> | undefined;
 
 /**
  * Creates the AdZone component.
+ * @param props - properties passed to AdZone.
+ * @returns an AdZone JSX Element.
  */
-export class AdZone extends React.Component<Props, State> {
+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
+    );
+
     /**
-     * Timer used for cycling through ads in the zone
-     * based on the ad "refresh time" for each ad.
+     * Tracks the current ad index being shown.
      */
-    private cycleAdTimer: ReturnType<typeof setTimeout> | undefined;
-
+    const [adIndexShown, setAdIndexShown] = useState(startingAdIndex);
+    /**
+     * Tracks the coordinates when the user started touching the Ad View.
+     */
+    const [touchStartCoords, setTouchStartCoords] = useState({ x: 0, y: 0 });
     /**
-     * @inheritDoc
+     * Track ad visibility (for off-screen ads).
      */
-    constructor(props: Props, context?: any) {
-        super(props, context);
+    const [isAdVisible, setIsAdVisibile] = useState(props.isAdZoneVisible);
+
+    // Setup device listeners.
+    useEffect(() => {
+        DeviceEventEmitter.addListener("visibility-event", (event: boolean) => {
+            setIsAdVisibile(event);
+        });
+
+        DeviceEventEmitter.addListener("acknowledge", (itemName: string) => {
+            acknowledge(itemName);
+        });
 
-        // Generates a random number between 0 and (number of available ads - 1).
-        const startingAdIndex = Math.floor(
-            Math.random() * this.props.adZoneData.ads.length
-        );
+        if (props.offScreenAdZone && isAdVisible) {
+            sendAdImpression();
+        } else if (!props.offScreenAdZone) {
+            sendAdImpression();
+        }
 
-        this.state = {
-            adIndexShown: startingAdIndex,
-            touchStartCoords: undefined,
+        return () => {
+            clearTimeout(cycleAdTimer);
+            DeviceEventEmitter.removeAllListeners("visibility-event");
+            DeviceEventEmitter.removeAllListeners("acknowledge");
         };
-    }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
-    /**
-     * @inheritDoc
-     */
-    public componentDidMount(): void {
-        this.initializeAd();
-    }
+    // Send impression on ad cycle.
+    useEffect(() => {
+        startAdTimer();
+        if (props.offScreenAdZone && isAdVisible) {
+            sendAdImpression();
+        } else if (!props.offScreenAdZone) {
+            sendAdImpression();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [adIndexShown]);
 
-    /**
-     * @inheritDoc
-     */
-    public componentWillUnmount(): void {
-        if (this.cycleAdTimer) {
-            clearTimeout(this.cycleAdTimer);
+    // Send impression based on visibility change. (for off-screen ads)
+    useEffect(() => {
+        if (props.offScreenAdZone && isAdVisible) {
+            sendAdImpression();
+        } else if (!props.offScreenAdZone) {
+            sendAdImpression();
         }
-    }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isAdVisible]);
 
     /**
-     * @inheritDoc
+     * Generates all component related styles.
+     * @returns the styles needed for the component.
      */
-    public render(): JSX.Element {
-        // 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();
-        const currentAd: Ad | undefined =
-            this.props.adZoneData.ads[this.state.adIndexShown] || undefined;
-        const finalMainViewStyle = styles.mainView;
-
-        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;
-        }
-
-        return (
-            <View style={finalMainViewStyle}>
-                {currentAd && currentAd.creative_url ? (
-                    <WebView
-                        source={{
-                            uri: currentAd.creative_url,
-                        }}
-                        androidLayerType="hardware"
-                        automaticallyAdjustContentInsets={false}
-                        style={styles.webView}
-                        onTouchStart={(e) => {
-                            this.setState({
-                                touchStartCoords: {
-                                    x: e.nativeEvent.pageX,
-                                    y: e.nativeEvent.pageY,
-                                },
-                            });
-                        }}
-                        onTouchEnd={(e) => {
-                            if (this.state.touchStartCoords) {
-                                const touchEndCoords: TouchCoordinates = {
-                                    x: e.nativeEvent.pageX,
-                                    y: e.nativeEvent.pageY,
-                                };
+    function generateStyles(): StyleDef {
+        return StyleSheet.create({
+            mainView: {
+                width: "100%",
+                height: "100%",
+            },
+            webView: {
+                width: "100%",
+                height: "100%",
+            },
+            reportAd: {
+                position: "absolute",
+                top: 10,
+                right: 10,
+            },
+        });
+    }
 
-                                if (
-                                    Math.abs(
-                                        this.state.touchStartCoords.x -
-                                            touchEndCoords.x
-                                    ) < this.props.xyDragDistanceAllowed &&
-                                    Math.abs(
-                                        this.state.touchStartCoords.y -
-                                            touchEndCoords.y
-                                    ) < this.props.xyDragDistanceAllowed
-                                ) {
-                                    this.onAdZoneSelected(currentAd);
-                                }
+    // 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;
 
-                                // Make sure to reset the start coords
-                                this.setState({
-                                    touchStartCoords: undefined,
-                                });
-                            }
-                        }}
-                    />
-                ) : undefined}
-            </View>
-        );
+    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;
     }
 
     /**
      * Triggers when the user selects the ad zone.
-     * @param currentAd - The ad currently displayed.
+     * @param currentlyDisplayedAd - The ad currently displayed.
      */
-    private onAdZoneSelected(currentAd: Ad): void {
+    function onAdZoneSelected(currentlyDisplayedAd: Ad): void {
         // Determine the "action type" and perform that specific action.
         if (
-            currentAd.action_type === AdActionType.EXTERNAL &&
-            currentAd.action_path
+            currentlyDisplayedAd.action_type === AdActionType.EXTERNAL &&
+            currentlyDisplayedAd.action_path
         ) {
             // Action Type: EXTERNAL
-            Linking.openURL(currentAd.action_path).then();
+            Linking.openURL(currentlyDisplayedAd.action_path).then();
         } else if (
-            currentAd.action_type === AdActionType.CONTENT &&
-            currentAd.payload &&
-            currentAd.payload.detailed_list_items
+            currentlyDisplayedAd.action_type === AdActionType.CONTENT &&
+            currentlyDisplayedAd.payload &&
+            currentlyDisplayedAd.payload.detailed_list_items
         ) {
             safeInvoke(
-                this.props.onAddToListTriggered,
-                currentAd.payload.detailed_list_items
+                props.onAddToListTriggered,
+                currentlyDisplayedAd.payload.detailed_list_items
             );
         }
 
-        this.triggerReportAdEvent(currentAd, ReportedEventType.INTERACTION);
-        if (this.cycleAdTimer) {
-            clearTimeout(this.cycleAdTimer);
+        cycleDisplayedAd();
+    }
+
+    /**
+     * Call to acknowledge ATL item(s) added to user list.
+     * @param itemName - Detailed list item title from ad that was clicked.
+     */
+    function acknowledge(itemName: string): void {
+        if (props.adZoneData.ads) {
+            props.adZoneData.ads.forEach((ad) => {
+                if (ad.action_type === "c") {
+                    ad.payload.detailed_list_items.forEach((item) => {
+                        if (item.product_title === itemName) {
+                            triggerReportAdEvent(
+                                ad,
+                                ReportedEventType.INTERACTION
+                            );
+                        }
+                    });
+                }
+            });
         }
-        this.cycleDisplayedAd();
     }
 
     /**
      * Triggered when we need to report an ad event to the API.
-     * @param currentAd - The ad to send an event for.
+     * @param ad - The ad to send an event for.
      * @param eventType - The event type for the reported event.
      */
-    private triggerReportAdEvent(
-        currentAd: Ad,
-        eventType: ReportedEventType
-    ): void {
+    function triggerReportAdEvent(ad: Ad, eventType: ReportedEventType): void {
         // The event timestamp has to be sent as a unix timestamp.
         const currentTs = Math.round(new Date().getTime() / 1000);
 
@@ -258,20 +277,20 @@ export class AdZone extends React.Component<Props, State> {
         adadaptedApiRequests
             .reportAdEvent(
                 {
-                    app_id: this.props.appId,
-                    session_id: this.props.sessionId,
-                    udid: this.props.udid,
+                    app_id: props.appId,
+                    session_id: props.sessionId,
+                    udid: props.udid,
                     events: [
                         {
-                            ad_id: currentAd.ad_id,
-                            impression_id: currentAd.impression_id,
+                            ad_id: ad.ad_id,
+                            impression_id: ad.impression_id,
                             event_type: eventType,
                             created_at: currentTs,
                         },
                     ],
                 },
-                this.props.deviceOs,
-                this.props.apiEnv
+                props.deviceOs,
+                props.apiEnv
             )
             .then(() => {
                 // Do nothing with the response for now...
@@ -280,69 +299,99 @@ export class AdZone extends React.Component<Props, State> {
 
     /**
      * Generates a new timer for cycling to the next ad.
-     * @param timerLength - The length of time(in milliseconds) to initialize
-     *      the timer with.
      */
-    private createAdTimer(timerLength: number): void {
-        if (this.props.adZoneData.ads.length > 0) {
-            this.cycleAdTimer = setTimeout(() => {
-                this.cycleDisplayedAd();
-            }, timerLength);
+    function startAdTimer(): void {
+        clearTimeout(cycleAdTimer);
+
+        if (props.adZoneData.ads.length > 0) {
+            const refreshTime: number =
+                props.adZoneData.ads[adIndexShown].refresh_time * 1000;
+            cycleAdTimer = setTimeout(cycleDisplayedAd, refreshTime);
         }
     }
 
     /**
      * Cycles to the next ad to display in the current available sequence of ads.
      */
-    private cycleDisplayedAd(): void {
+    function cycleDisplayedAd(): void {
         // Start by determining the next ad index to display.
         let nextAdIndex = 0;
+        const lastAd = props.adZoneData.ads[adIndexShown];
 
-        if (this.state.adIndexShown < this.props.adZoneData.ads.length - 1) {
-            nextAdIndex = this.state.adIndexShown + 1;
+        if (adIndexShown < props.adZoneData.ads.length - 1) {
+            nextAdIndex = adIndexShown + 1;
         }
 
-        this.setState(
-            {
-                adIndexShown: nextAdIndex,
-            },
-            () => {
-                this.initializeAd();
-            }
-        );
+        if (nextAdIndex !== adIndexShown && lastAd.impression_tracked) {
+            // Reset ad impression tracking status.
+            lastAd.impression_tracked = false;
+        } else {
+            // Send invisible ad impression if ad was not visible before end of timer cycle.
+            triggerReportAdEvent(
+                lastAd,
+                ReportedEventType.INVISIBLE_IMPRESSION
+            );
+        }
+
+        setAdIndexShown(nextAdIndex);
     }
 
     /**
-     * Performs all ad initialization tasks when a new ad is being displayed.
+     * Send ad tracking impression.
      */
-    private initializeAd(): void {
-        // Create the new timer based on the new ad index.
-        this.createAdTimer(
-            this.props.adZoneData.ads[this.state.adIndexShown].refresh_time *
-                1000
-        );
+    function sendAdImpression(): void {
+        const ad = props.adZoneData.ads[adIndexShown];
 
-        // Trigger an impression event for the ad.
-        this.triggerReportAdEvent(
-            this.props.adZoneData.ads[this.state.adIndexShown],
-            ReportedEventType.IMPRESSION
-        );
+        if (!ad.impression_tracked) {
+            triggerReportAdEvent(ad, ReportedEventType.IMPRESSION);
+            ad.impression_tracked = true;
+        }
     }
 
-    /**
-     * Generates all component related styles.
-     * @returns the styles needed for the component.
-     */
-    private generateStyles(): StyleDef {
-        return StyleSheet.create({
-            mainView: {
-                width: "100%",
-                height: "100%",
-            },
-            webView: {
-                width: "100%",
-                height: "100%",
-            },
-        });
-    }
+    // Returned JSX.
+    return (
+        <View style={finalMainViewStyle}>
+            {currentAd && currentAd.creative_url ? (
+                <WebView
+                    source={{
+                        uri: currentAd.creative_url,
+                    }}
+                    androidLayerType="hardware"
+                    automaticallyAdjustContentInsets={false}
+                    style={styles.webView}
+                    onTouchStart={(e) => {
+                        setTouchStartCoords({
+                            x: e.nativeEvent.pageX,
+                            y: e.nativeEvent.pageY,
+                        });
+                    }}
+                    onTouchEnd={(e) => {
+                        if (touchStartCoords) {
+                            const touchEndCoords: TouchCoordinates = {
+                                x: e.nativeEvent.pageX,
+                                y: e.nativeEvent.pageY,
+                            };
+
+                            if (
+                                Math.abs(
+                                    touchStartCoords.x - touchEndCoords.x
+                                ) < props.xyDragDistanceAllowed &&
+                                Math.abs(
+                                    touchStartCoords.y - touchEndCoords.y
+                                ) < props.xyDragDistanceAllowed
+                            ) {
+                                onAdZoneSelected(currentAd);
+                            }
+
+                            // Make sure to reset the start coords
+                            setTouchStartCoords({ x: 0, y: 0 });
+                        }
+                    }}
+                />
+            ) : 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>
+    );
+}