@adadapted/react-native-sdk 3.3.0 → 3.5.0

package/src/components/AdZone.tsx

@@ -2,111 +2,15 @@
  * Component for creating an {@link AdZone}.
  * @module
  */
-import * as React from "react";
-import {
-    DeviceEventEmitter,
-    Linking,
-    StyleSheet,
-    View,
-    ViewStyle,
-} from "react-native";
+import React, { useEffect, useState } from "react";
+import { DeviceEventEmitter, Linking, StyleSheet, View } from "react-native";
 import * as adadaptedApiRequests from "../api/adadaptedApiRequests";
-import {
-    Ad,
-    AdActionType,
-    DetailedListItem,
-    ReportedEventType,
-    Zone,
-} from "../api/adadaptedApiTypes";
+import { Ad, AdActionType, ReportedEventType } from "../api/adadaptedApiTypes";
 import { WebView } from "react-native-webview";
-import { ApiEnv, DeviceOS } from "../index";
 import { safeInvoke } from "../util";
-import { useEffect, useState } from "react";
 import { ReportAdButton } from "./ReportAdButton";
+import { AdZoneTypes } from "src/componentTypes/AdZone";
 
-/**
- * Props interface for {@link AdZone}.
- */
-interface Props {
-    /**
-     * The app ID.
-     */
-    appId: string;
-    /**
-     * The session ID.
-     */
-    sessionId: string;
-    /**
-     * The UDID.
-     */
-    udid: string;
-    /**
-     * 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
-     * Ad Zone is being touched by the user as a regular touch or while
-     * scrolling the view. If the amount of touch "drag" distance in either
-     * X or Y direction is less than this value, we will treat the action as
-     * a click/press on the Ad Zone.
-     */
-    xyDragDistanceAllowed: number;
-    /**
-     * The device OS used for API requests.
-     */
-    deviceOs: DeviceOS;
-    /**
-     * The API environment to use when making an API request.
-     */
-    apiEnv: ApiEnv;
-    /**
-     * The ad zone data.
-     */
-    adZoneData: Zone;
-    /**
-     * Callback that gets triggered when an "add to list" item/items are clicked.
-     * @param items - The array of items to "add to list".
-     */
-    onAddToListTriggered?(items: DetailedListItem[]): void;
-    /**
-     * Is the ad zone visible on render.
-     */
-    offScreenAdZone: boolean;
-    /**
-     * Track the ad zone visibility in parent component. (for off-screen ads)
-     */
-    isAdZoneVisible?: boolean;
-}
-
-/**
- * Interface for tracking "touch" coordinates.
- */
-interface TouchCoordinates {
-    /**
-     * The X coordinate for the touch.
-     */
-    x: number;
-    /**
-     * The Y coordinate for the touch.
-     */
-    y: number;
-}
-
-/**
- * Defines the style typing for the component.
- */
-interface StyleDef {
-    /**
-     * Styles for the main View element.
-     */
-    mainView: ViewStyle;
-    /**
-     * 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.
@@ -118,24 +22,26 @@ 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: AdZoneTypes.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<AdZoneTypes.TouchCoordinates>({
+            x: 0,
+            y: 0,
+        });
+
     /**
      * Track ad visibility (for off-screen ads).
      */
-    const [isAdVisible, setIsAdVisibile] = useState(props.isAdZoneVisible);
+    const [isAdZoneVisible, setIsAdVisibile] = useState(props.isAdZoneVisible);
 
     // Setup device listeners.
     useEffect(() => {
@@ -147,16 +53,10 @@ export function AdZone(props: Props): JSX.Element {
             acknowledge(itemName);
         });
 
-        if (props.offScreenAdZone && isAdVisible) {
-            sendAdImpression();
-        } else if (!props.offScreenAdZone) {
-            sendAdImpression();
-        }
-
         return () => {
             clearTimeout(cycleAdTimer);
-            DeviceEventEmitter.removeAllListeners("visibility-event");
             DeviceEventEmitter.removeAllListeners("acknowledge");
+            DeviceEventEmitter.removeAllListeners("visibility-event");
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -164,29 +64,38 @@ export function AdZone(props: Props): JSX.Element {
     // Send impression on ad cycle.
     useEffect(() => {
         startAdTimer();
-        if (props.offScreenAdZone && isAdVisible) {
-            sendAdImpression();
-        } else if (!props.offScreenAdZone) {
+        if (isAdZoneVisible) {
             sendAdImpression();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [adIndexShown]);
 
-    // Send impression based on visibility change. (for off-screen ads)
     useEffect(() => {
-        if (props.offScreenAdZone && isAdVisible) {
-            sendAdImpression();
-        } else if (!props.offScreenAdZone) {
+        if (
+            props.offScreenAdZone &&
+            isAdZoneVisible &&
+            props.adZoneData &&
+            props.adZoneData.ads &&
+            props.adZoneData.ads.length > adIndexShown &&
+            !props.adZoneData.ads[adIndexShown].impression_tracked
+        ) {
             sendAdImpression();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isAdVisible]);
+    }, [isAdZoneVisible]);
+
+    useEffect(() => {
+        if (props.adZoneData.ads.length > 0) {
+            cycleDisplayedAd();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.isContextualAd]);
 
     /**
      * Generates all component related styles.
      * @returns the styles needed for the component.
      */
-    function generateStyles(): StyleDef {
+    function generateStyles(): AdZoneTypes.StyleDef {
         return StyleSheet.create({
             mainView: {
                 width: "100%",
@@ -207,11 +116,12 @@ export function AdZone(props: Props): 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 = 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;
@@ -303,10 +213,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);
         }
     }
 
@@ -314,18 +229,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 && !lastAd.impression_tracked && !isAdZoneVisible) {
             // Send invisible ad impression if ad was not visible before end of timer cycle.
             triggerReportAdEvent(
                 lastAd,
@@ -333,6 +248,11 @@ export function AdZone(props: Props): JSX.Element {
             );
         }
 
+        if (lastAd && lastAd.impression_tracked) {
+            // Reset ad impression tracking status.
+            lastAd.impression_tracked = false;
+        }
+
         setAdIndexShown(nextAdIndex);
     }
 
@@ -342,7 +262,10 @@ export function AdZone(props: Props): JSX.Element {
     function sendAdImpression(): void {
         const ad = props.adZoneData.ads[adIndexShown];
 
-        if (!ad.impression_tracked) {
+        if (
+            ad &&
+            (ad.impression_tracked === undefined || !ad.impression_tracked)
+        ) {
             triggerReportAdEvent(ad, ReportedEventType.IMPRESSION);
             ad.impression_tracked = true;
         }
@@ -351,15 +274,20 @@ 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}
                     style={styles.webView}
                     onTouchStart={(e) => {
+                        triggerReportAdEvent(
+                            props.adZoneData.ads[adIndexShown],
+                            ReportedEventType.INTERACTION
+                        );
                         setTouchStartCoords({
                             x: e.nativeEvent.pageX,
                             y: e.nativeEvent.pageY,
@@ -367,10 +295,11 @@ export function AdZone(props: Props): JSX.Element {
                     }}
                     onTouchEnd={(e) => {
                         if (touchStartCoords) {
-                            const touchEndCoords: TouchCoordinates = {
-                                x: e.nativeEvent.pageX,
-                                y: e.nativeEvent.pageY,
-                            };
+                            const touchEndCoords: AdZoneTypes.TouchCoordinates =
+                                {
+                                    x: e.nativeEvent.pageX,
+                                    y: e.nativeEvent.pageY,
+                                };
 
                             if (
                                 Math.abs(
@@ -380,7 +309,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
@@ -390,8 +321,15 @@ export function AdZone(props: Props): JSX.Element {
                 />
             ) : undefined}
             <View style={styles.reportAd}>
-                <ReportAdButton adId={currentAd.ad_id} udid={props.udid} />
+                {props.adZoneData && props.adZoneData.ads[adIndexShown] ? (
+                    <ReportAdButton
+                        adId={props.adZoneData.ads[adIndexShown].ad_id}
+                        udid={props.udid}
+                    />
+                ) : (
+                    <></>
+                )}
             </View>
         </View>
     );
-}
+};

package/src/components/ReportAdButton.tsx

@@ -17,7 +17,7 @@ interface Props {
  * @param props The component's props.
  * @returns a reportSdButton JSX Element.
  */
-export function ReportAdButton(props: Props): JSX.Element {
+export function ReportAdButton(props: Props): React.JSX.Element {
     const reportAdUrlBase = new URL("https://feedback.add-it.io/");
 
     const styles = StyleSheet.create({