@thealteroffice/react-native-adgeist 0.0.20 → 0.0.22

package/src/cdpclient/index.ts

@@ -1,4 +1,4 @@
-import Adgeist, { type UserDetails, type Event } from '../NativeAdgeist';
+import Adgeist, { type UserDetails, type Event } from '../specs/NativeAdgeist';
 
 class AdgeistError extends Error {
   code?: string;
@@ -11,11 +11,6 @@ class AdgeistError extends Error {
   }
 }
 
-/**
- * Sets user details in the Adgeist SDK
- * @param userDetails - User details object
- * @throws AdgeistError if the operation fails
- */
 export const setUserDetails = (userDetails: UserDetails): void => {
   try {
     Adgeist.setUserDetails(userDetails);
@@ -26,11 +21,6 @@ export const setUserDetails = (userDetails: UserDetails): void => {
   }
 };
 
-/**
- * Logs an event in the Adgeist SDK
- * @param event - Event object to log
- * @throws AdgeistError if the event is invalid or logging fails
- */
 export const logEvent = (event: Event): void => {
   if (!event || typeof event !== 'object') {
     throw new AdgeistError('Event must be a valid object');
@@ -44,11 +34,6 @@ export const logEvent = (event: Event): void => {
   }
 };
 
-/**
- * Retrieves the consent status from the Adgeist SDK
- * @returns Promise resolving to 'ACCEPTED' or 'DENIED'
- * @throws AdgeistError if the operation fails
- */
 export const getConsentStatus = async (): Promise<'ACCEPTED' | 'DENIED'> => {
   try {
     const status = await Adgeist.getConsentStatus();
@@ -62,11 +47,6 @@ export const getConsentStatus = async (): Promise<'ACCEPTED' | 'DENIED'> => {
   }
 };
 
-/**
- * Updates the consent status in the Adgeist SDK
- * @param consent - Boolean indicating user consent
- * @throws AdgeistError if the operation fails
- */
 export const updateConsentStatus = (consent: boolean): void => {
   try {
     Adgeist.updateConsentStatus(consent);

package/src/components/HTML5AdView.tsx

@@ -0,0 +1,161 @@
+import {
+  useRef,
+  useCallback,
+  useImperativeHandle,
+  forwardRef,
+  useEffect,
+  useState,
+  useMemo,
+} from 'react';
+import type { ViewStyle, DimensionValue } from 'react-native';
+
+import { useAdgeistContext } from '../providers/AdgeistProvider';
+import HTML5AdNativeComponent, {
+  Commands,
+} from '../specs/HTML5AdNativeComponent';
+import type {
+  HTML5AdNativeComponentProps,
+  HTML5AdRequest,
+  HTML5AdViewRef,
+} from '../types/HTML5AdNativeComponentProps';
+import { AdSizes } from '../constants';
+
+export const HTML5AdView = forwardRef<
+  HTML5AdViewRef,
+  HTML5AdNativeComponentProps & HTML5AdRequest
+>(
+  (
+    {
+      adUnitID,
+      adIsResponsive,
+      adSize,
+      adType,
+      onAdLoaded,
+      onAdFailedToLoad,
+      onAdOpened,
+      onAdClosed,
+      onAdClicked,
+    },
+    ref
+  ) => {
+    const { isTestEnvironment } = useAdgeistContext();
+
+    const nativeRef = useRef<any>(null);
+    const [isViewReady, setIsViewReady] = useState(false);
+    const pendingLoadRef = useRef<HTML5AdRequest | null>(null);
+
+    const dimensions = useMemo<{
+      width: DimensionValue;
+      height: DimensionValue;
+    }>(() => {
+      const width: DimensionValue = adSize?.width ?? '100%';
+      const height: DimensionValue = adSize?.height ?? '100%';
+      return { width, height };
+    }, [adSize?.width, adSize?.height]);
+
+    const containerStyle = useMemo<ViewStyle>(
+      () => ({
+        width: dimensions.width,
+        height: dimensions.height,
+      }),
+      [dimensions]
+    );
+
+    const loadAdInternal = useCallback(
+      (request: HTML5AdRequest = { isTestMode: isTestEnvironment }) => {
+        if (!nativeRef.current) {
+          console.warn('HTML5AdView: Cannot load ad, native view not ready');
+          return;
+        }
+
+        const finalRequest = {
+          ...request,
+          isTestMode: request.isTestMode ?? isTestEnvironment,
+        };
+
+        try {
+          Commands.loadAd(nativeRef.current, finalRequest.isTestMode);
+        } catch (error) {
+          if (__DEV__) {
+            console.warn('HTML5AdView: Error loading ad:', error);
+          }
+        }
+      },
+      [isTestEnvironment]
+    );
+
+    const handleNativeRef = useCallback((ref: any) => {
+      nativeRef.current = ref;
+
+      if (ref) {
+        // Mark as ready in the next animation frame (ensures layout pass completed)
+        requestAnimationFrame(() => {
+          setIsViewReady(true);
+        });
+      } else {
+        setIsViewReady(false);
+      }
+    }, []);
+
+    useEffect(() => {
+      if (isViewReady && adUnitID) {
+        const request: HTML5AdRequest = { isTestMode: isTestEnvironment };
+        if (pendingLoadRef.current) {
+          loadAdInternal(pendingLoadRef.current);
+          pendingLoadRef.current = null;
+        } else {
+          loadAdInternal(request);
+        }
+      }
+    }, [isViewReady, adUnitID, isTestEnvironment, loadAdInternal]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        loadAd: (adRequest?: HTML5AdRequest) => {
+          const request = adRequest || { isTestMode: isTestEnvironment };
+
+          if (isViewReady && nativeRef.current) {
+            loadAdInternal(request);
+          } else {
+            pendingLoadRef.current = request;
+          }
+        },
+        destroy: () => {
+          if (nativeRef.current) {
+            try {
+              Commands.destroy(nativeRef.current);
+            } catch (e) {
+              console.warn('Error destroying ad view:', e);
+            }
+          }
+        },
+      }),
+      [isViewReady, isTestEnvironment, loadAdInternal]
+    );
+
+    if (__DEV__) {
+      console.log('[HTML5AdView]', { adUnitID, adSize, adType, isViewReady });
+    }
+
+    return (
+      <HTML5AdNativeComponent
+        ref={handleNativeRef}
+        style={containerStyle}
+        // Required Props, it will take values from React Component props
+        adUnitID={adUnitID}
+        adSize={adIsResponsive ? AdSizes.Responsive : adSize}
+        adIsResponsive={adIsResponsive}
+        adType={adType}
+        // Required Event Callbacks
+        onAdLoaded={onAdLoaded}
+        onAdFailedToLoad={onAdFailedToLoad}
+        onAdOpened={onAdOpened}
+        onAdClosed={onAdClosed}
+        onAdClicked={onAdClicked}
+      />
+    );
+  }
+);
+
+HTML5AdView.displayName = 'HTML5AdView';

package/src/components/{BannerAd.tsx → deprecated/BannerAdView.tsx}

@@ -1,8 +1,3 @@
-/**
- * @module BannerAd
- * @description A React Native component for displaying banner and video ads with robust error handling and analytics.
- */
-
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import {
   Image,
@@ -15,81 +10,37 @@ import {
   Dimensions,
 } from 'react-native';
 import Video from 'react-native-video';
-import Adgeist from '../NativeAdgeist';
-import { useAdgeistContext } from './AdgeistProvider';
-import { normalizeUrl } from '../utilities';
-
-/**
- * Interface for ad data structure
- */
-interface AdData {
-  id: string;
-  bidId: string;
-  cur: string;
-  seatBid: SeatBid[];
-}
-
-/**
- * Interface for seat bid data
- */
-interface SeatBid {
-  bidId: string;
-  bid: Bid[];
-}
-
-/**
- * Interface for individual bid
- */
-interface Bid {
-  id: string;
-  impId: string;
-  price: number;
-  ext: BidExtension;
-}
+import Adgeist from '../../specs/NativeAdgeist';
+import { useAdgeistContext } from '../../providers/AdgeistProvider';
+import { normalizeUrl } from '../../utilities';
+import type { FIXEDADRESPONSE } from '../../types/FixedAdResponse';
+import type { CPMADRESPONSE } from '../../types/CPMAdResponse';
 
-/**
- * Interface for bid extension data
- */
-interface BidExtension {
-  creativeUrl: string;
-  ctaUrl: string;
-  creativeTitle: string;
-  creativeDescription: string;
-  creativeBrandName?: string;
-}
-
-/**
- * Props for the BannerAd component
- */
 interface AdBannerProps {
-  /** Unique identifier for the ad slot */
   dataAdSlot: string;
-  /** Type of ad to display */
   dataSlotType?: 'banner' | 'video';
-  /** Width of the ad container */
+  dataBuyType?: 'FIXED' | 'CPM';
   width?: number;
-  /** Height of the ad container */
   height?: number;
-  /** 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;
+  onAdLoadSuccess?: (adData: FIXEDADRESPONSE | CPMADRESPONSE) => void;
 }
 
 export const BannerAd: React.FC<AdBannerProps> = ({
   dataAdSlot,
   dataSlotType = 'banner',
+  dataBuyType = 'FIXED',
   width = 0,
   height = 0,
   isResponsive = false,
   onAdLoadError,
   onAdLoadSuccess,
 }) => {
-  const [adData, setAdData] = useState<AdData | null>(null);
+  const [adData, setAdData] = useState<FIXEDADRESPONSE | CPMADRESPONSE | null>(
+    null
+  );
   const [isMuted, setIsMuted] = useState<boolean>(true);
   const [error, setError] = useState<Error | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -107,17 +58,43 @@ export const BannerAd: React.FC<AdBannerProps> = ({
   const currentVisibilityRatio = useRef<number>(0);
   const videoRef = useRef<any>(null);
 
-  const { isInitialized, publisherId, apiKey, domain, isTestEnvironment } =
-    useAdgeistContext();
-
-  const creativeData = adData?.seatBid?.[0]?.bid?.[0]?.ext as BidExtension;
-  const bidId = adData?.id;
-  const campaignId = adData?.seatBid?.[0]?.bid?.[0]?.id;
-  const adSpaceId = dataAdSlot;
+  const { isInitialized, isTestEnvironment } = useAdgeistContext();
+
+  let creativeBrandName;
+  let creativeUrl;
+  let creativeTitle;
+  let creativeDescription;
+  let ctaUrl;
+  let bidMeta = '';
+
+  let bidId;
+  let campaignId;
+  let adSpaceId = dataAdSlot;
+
+  if (dataBuyType === 'FIXED') {
+    creativeTitle = (adData as FIXEDADRESPONSE)?.creatives?.[0]?.title;
+    creativeDescription = (adData as FIXEDADRESPONSE)?.creatives?.[0]
+      ?.description;
+    creativeBrandName = (adData as FIXEDADRESPONSE)?.advertiser?.name;
+    creativeUrl = (adData as FIXEDADRESPONSE)?.creatives?.[0]?.fileUrl;
+    ctaUrl = (adData as FIXEDADRESPONSE)?.creatives?.[0]?.ctaUrl;
+    bidMeta = (adData as FIXEDADRESPONSE)?.metaData;
+
+    bidId = (adData as FIXEDADRESPONSE)?.id;
+    campaignId = (adData as FIXEDADRESPONSE)?.campaignId;
+  } else {
+    let creativeData = (adData as CPMADRESPONSE)?.seatBid?.[0]?.bid?.[0]?.ext;
+
+    creativeTitle = creativeData?.creativeTitle;
+    creativeDescription = creativeData?.creativeDescription;
+    creativeBrandName = creativeData?.creativeBrandName;
+    creativeUrl = creativeData?.creativeUrl;
+    ctaUrl = creativeData?.ctaUrl;
+
+    bidId = adData?.id;
+    campaignId = (adData as CPMADRESPONSE)?.seatBid?.[0]?.bid?.[0]?.id;
+  }
 
-  /**
-   * Fetches ad creative data (without tracking impression here)
-   */
   const fetchAd = useCallback(async () => {
     if (!isInitialized) return;
 
@@ -128,14 +105,14 @@ export const BannerAd: React.FC<AdBannerProps> = ({
       setHasView(false);
 
       const response = await Adgeist.fetchCreative(
-        apiKey,
-        domain,
         dataAdSlot,
-        publisherId,
+        dataBuyType,
         isTestEnvironment
       );
 
-      const creative: { data: AdData } = response as { data: AdData };
+      const creative: { data: FIXEDADRESPONSE | CPMADRESPONSE } = response as {
+        data: FIXEDADRESPONSE | CPMADRESPONSE;
+      };
       setAdData(creative.data);
       onAdLoadSuccess?.(creative.data);
     } catch (err) {
@@ -149,18 +126,13 @@ export const BannerAd: React.FC<AdBannerProps> = ({
     }
   }, [
     isInitialized,
-    publisherId,
+    dataBuyType,
     dataAdSlot,
-    apiKey,
-    domain,
     isTestEnvironment,
     onAdLoadError,
     onAdLoadSuccess,
   ]);
 
-  /**
-   * Tracks impression when media (image/video) is fully loaded
-   */
   const trackImpressionOnMediaLoad = useCallback(async () => {
     if (hasImpression || !bidId || !campaignId) return;
 
@@ -170,9 +142,9 @@ export const BannerAd: React.FC<AdBannerProps> = ({
       await Adgeist.trackImpression(
         campaignId,
         adSpaceId,
-        publisherId,
-        apiKey,
         bidId,
+        bidMeta,
+        dataBuyType,
         isTestEnvironment,
         renderTime
       );
@@ -186,14 +158,11 @@ export const BannerAd: React.FC<AdBannerProps> = ({
     bidId,
     campaignId,
     adSpaceId,
-    publisherId,
-    apiKey,
+    dataBuyType,
+    bidMeta,
     isTestEnvironment,
   ]);
 
-  /**
-   * Tracks view event for ads when visible for >=1s (banner) or >=2s (video) and >=50% in viewport
-   */
   const trackView = useCallback(async () => {
     if (hasView || !hasImpression || !bidId || !campaignId) return;
 
@@ -210,9 +179,9 @@ export const BannerAd: React.FC<AdBannerProps> = ({
         await Adgeist.trackView(
           campaignId,
           adSpaceId,
-          publisherId,
-          apiKey,
           bidId,
+          bidMeta,
+          dataBuyType,
           isTestEnvironment,
           currentViewTime,
           visibility,
@@ -231,23 +200,17 @@ export const BannerAd: React.FC<AdBannerProps> = ({
     bidId,
     campaignId,
     adSpaceId,
-    publisherId,
-    apiKey,
+    dataBuyType,
+    bidMeta,
     isTestEnvironment,
     dataSlotType,
   ]);
 
-  /**
-   * Toggles play/pause state manually
-   */
   const togglePlayPause = useCallback(() => {
     setIsManuallyControlled(true);
     setIsPaused((prev) => !prev);
   }, []);
 
-  /**
-   * Calculates visibility ratio, updates view metrics, and controls video playback
-   */
   const checkVisibility = useCallback(() => {
     if (!adRef.current || !hasImpression) return;
 
@@ -290,7 +253,6 @@ export const BannerAd: React.FC<AdBannerProps> = ({
         }
       }
 
-      // Only check for view tracking if view event hasn't been tracked yet
       if (
         !hasView &&
         viewTime.current >= (dataSlotType === 'video' ? 2000 : 1000) &&
@@ -308,23 +270,26 @@ export const BannerAd: React.FC<AdBannerProps> = ({
     isManuallyControlled,
   ]);
 
-  /**
-   * Handles ad click and sends click analytics
-   */
   const handleClick = useCallback(async () => {
-    if (!adData || !adData.seatBid.length || !bidId || !campaignId) return;
+    if (
+      !adData ||
+      (dataBuyType == 'CPM' && !(adData as CPMADRESPONSE).seatBid.length) ||
+      !bidId ||
+      !campaignId
+    )
+      return;
 
     try {
       Adgeist.trackClick(
         campaignId,
         adSpaceId,
-        publisherId,
-        apiKey,
         bidId,
+        bidMeta,
+        dataBuyType,
         isTestEnvironment
       );
 
-      await Linking.openURL(normalizeUrl(creativeData.ctaUrl));
+      await Linking.openURL(normalizeUrl(ctaUrl as string));
     } catch (err) {
       console.error('Failed to handle ad click:', err);
     }
@@ -333,10 +298,10 @@ export const BannerAd: React.FC<AdBannerProps> = ({
     bidId,
     campaignId,
     adSpaceId,
-    publisherId,
-    apiKey,
+    bidMeta,
+    dataBuyType,
     isTestEnvironment,
-    creativeData,
+    ctaUrl,
   ]);
 
   useEffect(() => {
@@ -370,7 +335,7 @@ export const BannerAd: React.FC<AdBannerProps> = ({
     );
   }
 
-  if (!creativeData?.creativeUrl || error) return null;
+  if (creativeUrl || error) return null;
 
   return (
     <TouchableWithoutFeedback
@@ -389,7 +354,7 @@ export const BannerAd: React.FC<AdBannerProps> = ({
           <TouchableWithoutFeedback onPress={handleClick}>
             <Image
               style={styles.creative}
-              source={{ uri: creativeData.creativeUrl }}
+              source={{ uri: creativeUrl }}
               accessibilityLabel="Ad Creative"
               resizeMode="contain"
               onLoad={trackImpressionOnMediaLoad}
@@ -404,7 +369,7 @@ export const BannerAd: React.FC<AdBannerProps> = ({
             <TouchableWithoutFeedback onPress={handleClick}>
               <Video
                 ref={videoRef}
-                source={{ uri: creativeData.creativeUrl }}
+                source={{ uri: creativeUrl }}
                 resizeMode="contain"
                 style={{ width: '100%', height: '100%' }}
                 repeat={true}
@@ -448,22 +413,22 @@ export const BannerAd: React.FC<AdBannerProps> = ({
         <View style={styles.adContent}>
           <View style={styles.contentContainer}>
             <Text style={styles.title} numberOfLines={1} ellipsizeMode="tail">
-              {creativeData.creativeTitle}
+              {creativeTitle}
             </Text>
             <Text
               style={styles.description}
               numberOfLines={1}
               ellipsizeMode="tail"
             >
-              {creativeData.creativeDescription}
+              {creativeDescription}
             </Text>
-            {creativeData?.creativeBrandName && (
+            {creativeBrandName && (
               <Text
                 style={styles.brandName}
                 numberOfLines={1}
                 ellipsizeMode="tail"
               >
-                {creativeData?.creativeBrandName || 'The Brand Name'}
+                {creativeBrandName || 'The Brand Name'}
               </Text>
             )}
           </View>

package/src/components/{ConsentModal.tsx → deprecated/ConsentModal.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { StyleSheet, View, Text, Pressable } from 'react-native';
-import { useAdgeistContext } from './AdgeistProvider';
-import Adgeist from '../NativeAdgeist';
+import { useAdgeistContext } from '../../providers/AdgeistProvider';
+import Adgeist from '../../specs/NativeAdgeist';
 
 interface ConsentModalPropsType {}
 

package/src/constants.ts

@@ -0,0 +1,8 @@
+import type { AdSize } from './types/AdSize';
+
+export const AdSizes = {
+  custom: (width: number, height: number): AdSize => ({ width, height }),
+  Responsive: { width: -1, height: -1 },
+};
+
+export const HTML_5_AD_NATIVE_COMPONENT_NAME = 'HTML5AdNativeComponent';

package/src/index.tsx

@@ -1,4 +1,6 @@
-export * from './components/BannerAd';
-export * from './components/AdgeistProvider';
+export * from './providers/AdgeistProvider';
+export * from './components/HTML5AdView';
+
+export * from './components/deprecated/BannerAdView';
 
 export * from './cdpclient/index';