@thealteroffice/react-native-adgeist 0.0.14 → 0.0.15

package/src/components/AdgeistProvider.tsx

@@ -1,23 +1,50 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+/**
+ * @module AdgeistProvider
+ * @description Context provider for Adgeist ad-serving configuration and initialization
+ */
+
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+} from 'react';
 import Adgeist from '../NativeAdgeist';
 import { ConsentModal } from './ConsentModal';
 
+/**
+ * Interface for Adgeist context
+ */
 interface AdgeistContextType {
   publisherId: string;
   apiKey: string;
   domain: string;
   isTestEnvironment: boolean;
   isInitialized: boolean;
+  initializationError?: Error;
   setAdgeistConsentModal: (value: boolean) => void;
 }
 
-interface AdgeistProviderPropsType {
+/**
+ * Props for AdgeistProvider
+ */
+interface AdgeistProviderProps {
   children: React.ReactNode;
+  /** Custom API origin for Adgeist SDK */
   customAdgeistApiOrigin?: string;
+  /** Publisher identifier */
   publisherId: string;
+  /** API key for authentication */
   apiKey: string;
+  /** Domain for ad serving */
   domain: string;
-  isTestEnvironment: boolean;
+  /** Enable test environment mode */
+  isTestEnvironment?: boolean;
+  /** Callback for initialization errors */
+  onInitializationError?: (error: Error) => void;
+  /** Callback for successful initialization */
+  onInitializationSuccess?: () => void;
 }
 
 const AdgeistContext = createContext<AdgeistContextType>({
@@ -29,35 +56,51 @@ const AdgeistContext = createContext<AdgeistContextType>({
   setAdgeistConsentModal: () => {},
 });
 
-export const AdgeistProvider: React.FC<AdgeistProviderPropsType> = ({
+/**
+ * AdgeistProvider component for managing ad-serving configuration
+ * @param props - Component properties
+ * @returns JSX.Element
+ */
+export const AdgeistProvider: React.FC<AdgeistProviderProps> = ({
   children,
   publisherId = '',
   apiKey = '',
   domain = '',
   customAdgeistApiOrigin = 'bg-services-qa-api.adgeist.ai',
   isTestEnvironment = true,
+  onInitializationError,
+  onInitializationSuccess,
 }) => {
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [adgeistConsentModal, setAdgeistConsentModal] = useState(false);
-  const [isKotlinInitializationFailed, setIsKotlinInitializationFailed] =
-    useState(false);
+  const [isInitialized, setIsInitialized] = useState<boolean>(false);
+  const [initializationError, setInitializationError] = useState<
+    Error | undefined
+  >();
+  const [adgeistConsentModal, setAdgeistConsentModal] =
+    useState<boolean>(false);
 
-  useEffect(() => {
-    const initializeAdgeist = async () => {
-      setIsKotlinInitializationFailed(false);
-      setIsInitialized(false);
+  /**
+   * Initializes Adgeist SDK
+   */
+  const initializeAdgeist = useCallback(async () => {
+    setInitializationError(undefined);
+    setIsInitialized(false);
 
-      try {
-        await Adgeist.initializeSdk(customAdgeistApiOrigin);
-        setIsInitialized(true);
-      } catch {
-        setIsKotlinInitializationFailed(true);
-        setIsInitialized(false);
-      }
-    };
+    try {
+      await Adgeist.initializeSdk(customAdgeistApiOrigin);
+      setIsInitialized(true);
+      onInitializationSuccess?.();
+    } catch (error: unknown) {
+      const err =
+        error instanceof Error ? error : new Error('Unknown error occurred');
+      setInitializationError(err);
+      setIsInitialized(false);
+      onInitializationError?.(err);
+    }
+  }, [customAdgeistApiOrigin, onInitializationError, onInitializationSuccess]);
 
+  useEffect(() => {
     initializeAdgeist();
-  }, [customAdgeistApiOrigin]);
+  }, [initializeAdgeist]);
 
   return (
     <AdgeistContext.Provider
@@ -67,10 +110,11 @@ export const AdgeistProvider: React.FC<AdgeistProviderPropsType> = ({
         domain,
         isTestEnvironment,
         isInitialized,
+        initializationError,
         setAdgeistConsentModal,
       }}
     >
-      {isKotlinInitializationFailed && <>{children}</>}
+      {initializationError && <>{children}</>}
 
       {isInitialized && (
         <>
@@ -82,4 +126,14 @@ export const AdgeistProvider: React.FC<AdgeistProviderPropsType> = ({
   );
 };
 
-export const useAdgeistContext = () => useContext(AdgeistContext);
+/**
+ * Hook to access Adgeist context
+ * @returns AdgeistContextType
+ */
+export const useAdgeistContext = () => {
+  const context = useContext(AdgeistContext);
+  if (!context) {
+    throw new Error('useAdgeistContext must be used within an AdgeistProvider');
+  }
+  return context;
+};

package/src/components/BannerAd.tsx

@@ -1,4 +1,9 @@
-import React, { useEffect, useState } from 'react';
+/**
+ * @module BannerAd
+ * @description A React Native component for displaying banner and video ads with robust error handling and analytics.
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Image,
   Linking,
@@ -8,10 +13,13 @@ import {
   TouchableWithoutFeedback,
   ActivityIndicator,
 } from 'react-native';
+import Video from 'react-native-video';
 import Adgeist from '../NativeAdgeist';
 import { useAdgeistContext } from './AdgeistProvider';
-import Video from 'react-native-video';
 
+/**
+ * Interface for ad data structure
+ */
 interface AdData {
   id: string;
   bidId: string;
@@ -19,11 +27,17 @@ interface AdData {
   seatBid: SeatBid[];
 }
 
+/**
+ * Interface for seat bid data
+ */
 interface SeatBid {
   bidId: string;
   bid: Bid[];
 }
 
+/**
+ * Interface for individual bid
+ */
 interface Bid {
   id: string;
   impId: string;
@@ -31,6 +45,9 @@ interface Bid {
   ext: BidExtension;
 }
 
+/**
+ * Interface for bid extension data
+ */
 interface BidExtension {
   creativeUrl: string;
   ctaUrl: string;
@@ -38,64 +55,91 @@ interface BidExtension {
   creativeDescription: string;
   creativeBrandName?: string;
 }
-interface AdBannerTypes {
+
+/**
+ * Props for the BannerAd component
+ */
+interface AdBannerProps {
+  /** Unique identifier for the ad slot */
   dataAdSlot: string;
-  dataSlotType: 'banner' | 'video';
+  /** Type of ad to display */
+  dataSlotType?: 'banner' | 'video';
+  /** Width of the ad container */
   width?: number;
+  /** Height of the ad container */
   height?: number;
-  isResponsive: boolean;
+  /** Enable responsive layout */
+  isResponsive?: boolean;
+  /** Responsive layout type */
   responsiveType?: 'SQUARE' | 'VERTICAL' | 'WIDE';
+  /** Callback for ad load errors */
+  onAdLoadError?: (error: Error) => void;
+  /** Callback for ad load success */
+  onAdLoadSuccess?: (adData: AdData) => void;
 }
 
-export const BannerAd: React.FC<AdBannerTypes> = ({
+export const BannerAd: React.FC<AdBannerProps> = ({
   dataAdSlot,
   dataSlotType = 'banner',
   width = 0,
   height = 0,
   isResponsive = false,
   // responsiveType = 'SQUARE',
+  onAdLoadError,
+  onAdLoadSuccess,
 }) => {
   const [adData, setAdData] = useState<AdData | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isMuted, setIsMuted] = useState<boolean>(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
   const { isInitialized, publisherId, apiKey, domain, isTestEnvironment } =
     useAdgeistContext();
 
   const creativeData = adData?.seatBid?.[0]?.bid?.[0]?.ext as BidExtension;
 
-  useEffect(() => {
-    (async () => {
-      try {
-        if (isInitialized) {
-          setIsLoading(true);
-          const response: Object = await Adgeist.fetchCreative(
-            apiKey,
-            domain,
-            dataAdSlot,
-            publisherId,
-            isTestEnvironment
-          );
+  /**
+   * Fetches ad creative and sends impression analytics
+   */
+  const fetchAd = useCallback(async () => {
+    if (!isInitialized) return;
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const response = await Adgeist.fetchCreative(
+        apiKey,
+        domain,
+        dataAdSlot,
+        publisherId,
+        isTestEnvironment
+      );
 
-          const creative: { data: AdData } = response as { data: AdData };
-          setAdData(creative.data);
-          setIsLoading(false);
+      const creative: { data: AdData } = response as { data: AdData };
+      setAdData(creative.data);
+      onAdLoadSuccess?.(creative.data);
 
-          if (creative.data.seatBid.length > 0) {
-            await Adgeist.sendCreativeAnalytic(
-              creative.data.seatBid?.[0]?.bid?.[0]?.id || '',
-              dataAdSlot,
-              publisherId,
-              'IMPRESSION',
-              domain,
-              apiKey,
-              creative.data.id,
-              isTestEnvironment
-            );
-          }
-        }
-      } catch (error) {
-        console.error('Ad load failed:', error);
+      if (creative.data.seatBid.length > 0) {
+        await Adgeist.sendCreativeAnalytic(
+          creative.data.seatBid?.[0]?.bid?.[0]?.id || '',
+          dataAdSlot,
+          publisherId,
+          'IMPRESSION',
+          domain,
+          apiKey,
+          creative.data.id,
+          isTestEnvironment
+        );
       }
-    })();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Ad load failed');
+      setError(error);
+      onAdLoadError?.(error);
+      console.error('Ad load failed:', error);
+    } finally {
+      setIsLoading(false);
+    }
   }, [
     isInitialized,
     publisherId,
@@ -103,25 +147,47 @@ export const BannerAd: React.FC<AdBannerTypes> = ({
     apiKey,
     domain,
     isTestEnvironment,
+    onAdLoadError,
+    onAdLoadSuccess,
   ]);
 
-  const handleClick = async () => {
-    if (adData && adData?.seatBid.length > 0) {
-      await Adgeist.sendCreativeAnalytic(
-        adData?.seatBid?.[0]?.bid?.[0]?.id || '',
-        dataAdSlot,
-        publisherId,
-        'CLICK',
-        domain,
-        apiKey,
-        adData.id,
-        isTestEnvironment
-      );
-      Linking.openURL(creativeData.ctaUrl).catch((err) =>
-        console.error('Failed to open URL:', err)
-      );
+  /**
+   * Handles ad click and sends click analytics
+   */
+  const handleClick = useCallback(async () => {
+    if (adData && adData.seatBid.length > 0) {
+      const bidId = adData.seatBid[0]?.bid[0]?.id;
+      if (!bidId) return;
+
+      try {
+        await Adgeist.sendCreativeAnalytic(
+          bidId,
+          dataAdSlot,
+          publisherId,
+          'CLICK',
+          domain,
+          apiKey,
+          adData.id,
+          isTestEnvironment
+        );
+        await Linking.openURL(creativeData.ctaUrl);
+      } catch (err) {
+        console.error('Failed to handle ad click:', err);
+      }
     }
-  };
+  }, [
+    adData,
+    dataAdSlot,
+    publisherId,
+    domain,
+    apiKey,
+    isTestEnvironment,
+    creativeData,
+  ]);
+
+  useEffect(() => {
+    fetchAd();
+  }, [fetchAd]);
 
   if (isLoading) {
     return (
@@ -136,7 +202,7 @@ export const BannerAd: React.FC<AdBannerTypes> = ({
     );
   }
 
-  if (!creativeData?.creativeUrl) return null;
+  if (!creativeData?.creativeUrl || error) return null;
 
   return (
     <TouchableWithoutFeedback
@@ -152,16 +218,37 @@ export const BannerAd: React.FC<AdBannerTypes> = ({
       >
         {dataSlotType === 'banner' ? (
           <Image
-            style={[styles.creative, { width: '100%', height: '70%' }]}
-            source={{ uri: creativeData.creativeUrl }}
-          />
-        ) : (
-          <Video
+            style={styles.creative}
             source={{ uri: creativeData.creativeUrl }}
+            accessibilityLabel="Ad Creative"
             resizeMode="contain"
-            style={{ width: '100%', height: '70%' }}
-            repeat={true}
+            onError={(e) =>
+              console.error('Image load error:', e.nativeEvent.error)
+            }
           />
+        ) : (
+          <View style={styles.videoCreative}>
+            <Video
+              source={{ uri: creativeData.creativeUrl }}
+              resizeMode="contain"
+              style={{ width: '100%', height: '100%' }}
+              repeat={true}
+              muted={isMuted}
+              onError={(e) => console.error('Video load error:', e)}
+            />
+
+            <TouchableWithoutFeedback onPress={() => setIsMuted(!isMuted)}>
+              <Image
+                style={styles.soundIcon}
+                source={{
+                  uri: isMuted
+                    ? 'https://d2cfeg6k9cklz9.cloudfront.net/ad-icons/Muted.png'
+                    : 'https://d2cfeg6k9cklz9.cloudfront.net/ad-icons/Unmuted.png',
+                }}
+                accessibilityLabel={isMuted ? 'Unmute video' : 'Mute video'}
+              />
+            </TouchableWithoutFeedback>
+          </View>
         )}
 
         <View style={styles.adContent}>
@@ -186,18 +273,13 @@ export const BannerAd: React.FC<AdBannerTypes> = ({
               {creativeData?.creativeBrandName || 'Brand Name'}
             </Text>
           </View>
-          <TouchableWithoutFeedback
-            onPress={() => {
-              handleClick();
-            }}
-            accessible
-            accessibilityLabel="Visit Site Button"
-          >
+          <TouchableWithoutFeedback onPress={handleClick}>
             <Image
-              style={[styles.linkButton]}
+              style={styles.linkButton}
               source={{
                 uri: 'https://d2cfeg6k9cklz9.cloudfront.net/onboarding-icons/Button.png',
               }}
+              accessibilityLabel="Visit Advertiser Site"
             />
           </TouchableWithoutFeedback>
         </View>
@@ -208,7 +290,7 @@ export const BannerAd: React.FC<AdBannerTypes> = ({
 
 const styles = StyleSheet.create({
   adContainer: {
-    backgroundColor: 'white',
+    backgroundColor: '#FFFFFF',
     borderRadius: 5,
   },
   loadingOverlayContainer: {
@@ -218,13 +300,27 @@ const styles = StyleSheet.create({
   creative: {
     resizeMode: 'contain',
     borderTopLeftRadius: 5,
-    backgroundColor: 'white',
+    backgroundColor: '#FFFFFF',
     borderTopRightRadius: 5,
+    width: '100%',
+    height: '70%',
+  },
+  videoCreative: {
+    position: 'relative',
+    width: '100%',
+    height: '70%',
+  },
+  soundIcon: {
+    position: 'absolute',
+    bottom: 10,
+    right: 10,
+    width: 30,
+    height: 30,
   },
   adContent: {
     width: '100%',
     height: '30%',
-    backgroundColor: 'white',
+    backgroundColor: '#FFFFFF',
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingVertical: 10,
@@ -237,20 +333,19 @@ const styles = StyleSheet.create({
     width: '80%',
   },
   title: {
-    color: 'black',
+    color: '#1A1A1A',
     fontSize: 18,
-    fontWeight: 'bold',
+    fontWeight: '600',
   },
   description: {
-    color: 'black',
+    color: '#4A4A4A',
     fontSize: 16,
+    marginBottom: 4,
   },
   brandName: {
-    color: 'black',
-    fontSize: 16,
-    opacity: 0.6,
-    marginTop: 5,
-    fontWeight: 'semibold',
+    color: '#6B7280',
+    fontSize: 14,
+    textTransform: 'uppercase',
   },
   linkButton: {
     width: 40,

package/android/app/build/generated/source/codegen/java/com/facebook/fbreact/specs/NativeAdgeistSpec.java

@@ -1,63 +0,0 @@
-
-/**
- * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
- *
- * Do not edit this file as changes may cause incorrect behavior and will be lost
- * once the code is regenerated.
- *
- * @generated by codegen project: GenerateModuleJavaSpec.js
- *
- * @nolint
- */
-
-package com.facebook.fbreact.specs;
-
-import com.facebook.proguard.annotations.DoNotStrip;
-import com.facebook.react.bridge.Promise;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.turbomodule.core.interfaces.TurboModule;
-import javax.annotation.Nonnull;
-
-public abstract class NativeAdgeistSpec extends ReactContextBaseJavaModule implements TurboModule {
-  public static final String NAME = "Adgeist";
-
-  public NativeAdgeistSpec(ReactApplicationContext reactContext) {
-    super(reactContext);
-  }
-
-  @Override
-  public @Nonnull String getName() {
-    return NAME;
-  }
-
-  @ReactMethod
-  @DoNotStrip
-  public abstract void initializeSdk(String customDomain, Promise promise);
-
-  @ReactMethod
-  @DoNotStrip
-  public abstract void fetchCreative(String apiKey, String origin, String adSpaceId, String publisherId, boolean isTestEnvironment, Promise promise);
-
-  @ReactMethod
-  @DoNotStrip
-  public abstract void sendCreativeAnalytic(String campaignId, String adSpaceId, String publisherId, String eventType, String origin, String apiKey, String bidId, boolean isTestEnvironment, Promise promise);
-
-  @ReactMethod
-  @DoNotStrip
-  public abstract void setUserDetails(ReadableMap user);
-
-  @ReactMethod
-  @DoNotStrip
-  public abstract void logEvent(ReadableMap event);
-
-  @ReactMethod
-  @DoNotStrip
-  public abstract void getConsentStatus(Promise promise);
-
-  @ReactMethod
-  @DoNotStrip
-  public abstract void updateConsentStatus(boolean consent);
-}

package/android/app/build/generated/source/codegen/jni/CMakeLists.txt

@@ -1,36 +0,0 @@
-# Copyright (c) Meta Platforms, Inc. and affiliates.
-#
-# This source code is licensed under the MIT license found in the
-# LICENSE file in the root directory of this source tree.
-
-cmake_minimum_required(VERSION 3.13)
-set(CMAKE_VERBOSE_MAKEFILE on)
-
-file(GLOB react_codegen_SRCS CONFIGURE_DEPENDS *.cpp react/renderer/components/RNAdgeistSpec/*.cpp)
-
-add_library(
-  react_codegen_RNAdgeistSpec
-  OBJECT
-  ${react_codegen_SRCS}
-)
-
-target_include_directories(react_codegen_RNAdgeistSpec PUBLIC . react/renderer/components/RNAdgeistSpec)
-
-target_link_libraries(
-  react_codegen_RNAdgeistSpec
-  fbjni
-  jsi
-  # We need to link different libraries based on whether we are building rncore or not, that's necessary
-  # because we want to break a circular dependency between react_codegen_rncore and reactnative
-  reactnative
-)
-
-target_compile_options(
-  react_codegen_RNAdgeistSpec
-  PRIVATE
-  -DLOG_TAG=\"ReactNative\"
-  -fexceptions
-  -frtti
-  -std=c++20
-  -Wall
-)