adwhale-sdk-react-native 2.7.204 → 2.7.300

package/src/AdWhaleNativeTemplateView.tsx

@@ -1,9 +1,10 @@
 // src/AdWhaleNativeTemplateView.tsx
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import { requireNativeComponent, UIManager, findNodeHandle } from 'react-native';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Platform, requireNativeComponent } from 'react-native';
 import type {
   NativeSyntheticEvent,
   StyleProp,
+  ViewProps,
   ViewStyle,
 } from 'react-native';
 
@@ -29,8 +30,8 @@ export interface AdWhaleNativeTemplateStyle {
 }
 
 export interface AdWhaleNativeTemplateError {
-  errorCode: number;
-  errorMessage: string;
+  statusCode: number;
+  message: string;
 }
 
 export interface AdWhaleNativeTemplateGcoder {
@@ -47,9 +48,24 @@ export interface AdWhaleNativeTemplateViewProps {
   template: AdWhaleNativeTemplateType;
   templateStyle?: AdWhaleNativeTemplateStyle;
 
-  onAdLoaded?: () => void;
-  onAdFailedToLoad?: (event: AdWhaleNativeTemplateError) => void;
-  onAdShowFailed?: (event: AdWhaleNativeTemplateError) => void;
+  /**
+   * Android Fabric: `ref.loadAd()` 대신 부모 state로 증가시키는 방식(권장).
+   * 지정 시 0은 무시, 1 이상이 바뀔 때마다 네이티브 load. 타입 전환 시 0으로 리셋 후 증가.
+   */
+  loadSignal?: number;
+  /** {@link loadSignal}과 동일하게 표시 트리거 */
+  showSignal?: number;
+  /**
+   * 템플릿/스타일 전환 시마다 바꿔 주는 논리 인스턴스 키(예: `adViewKey`).
+   * `loadSignal`이 다시 1이 되어도 네이티브가 이전 인스턴스와 동일 요청으로 오인해 스킵하지 않게 합니다.
+   */
+  viewSyncKey?: number;
+
+  onNativeAdLoaded?: () => void;
+  onNativeAdFailedToLoad?: (event: AdWhaleNativeTemplateError) => void;
+  onNativeAdShowFailed?: (event: AdWhaleNativeTemplateError) => void;
+  onNativeAdClicked?: () => void;
+  onNativeAdClosed?: () => void;
 }
 
 export interface AdWhaleNativeTemplateHandle {
@@ -62,10 +78,19 @@ type NativeErrorEvent = NativeSyntheticEvent<AdWhaleNativeTemplateError>;
 interface NativeProps
   extends Omit<
     AdWhaleNativeTemplateViewProps,
-    'onAdFailedToLoad' | 'onAdShowFailed'
-  > {
-  onAdFailedToLoad?: (e: NativeErrorEvent) => void;
-  onAdShowFailed?: (e: NativeErrorEvent) => void;
+    | 'onNativeAdFailedToLoad'
+    | 'onNativeAdShowFailed'
+    | 'loadSignal'
+    | 'showSignal'
+    | 'viewSyncKey'
+  >,
+    Pick<ViewProps, 'collapsable'> {
+  onNativeAdFailedToLoad?: (e: NativeErrorEvent) => void;
+  onNativeAdShowFailed?: (e: NativeErrorEvent) => void;
+  /** Android: Fabric에서 View 명령이 무시되는 경우를 피하기 위해 prop으로 전달 */
+  loadRequestId?: number;
+  showRequestId?: number;
+  viewSyncKey?: number;
 }
 
 const VIEW_MANAGER_NAME = 'RNAdWhaleMediationTemplateNativeAdView';
@@ -77,51 +102,63 @@ export const AdWhaleNativeTemplateView = forwardRef<
   AdWhaleNativeTemplateHandle,
   AdWhaleNativeTemplateViewProps
 >((props, ref) => {
-  const innerRef = useRef<React.ElementRef<typeof NativeComponent>>(null);
+  if (Platform.OS === 'ios') {
+    // iOS는 커스텀 바인딩만 지원 (템플릿 바인딩 미지원)
+    return null;
+  }
+  const {
+    loadSignal,
+    showSignal,
+    viewSyncKey,
+    onNativeAdFailedToLoad,
+    onNativeAdShowFailed,
+    ...nativeRest
+  } = props;
+
+  const [internalLoadId, setInternalLoadId] = useState(0);
+  const [internalShowId, setInternalShowId] = useState(0);
+
+  const useExternalLoad = loadSignal !== undefined;
+  const useExternalShow = showSignal !== undefined;
+  const loadRequestIdForNative = useExternalLoad ? loadSignal : internalLoadId;
+  const showRequestIdForNative = useExternalShow ? showSignal : internalShowId;
 
   useImperativeHandle(ref, () => ({
     loadAd() {
-      const handle = findNodeHandle(innerRef.current);
-      if (!handle) return;
-      const config = UIManager.getViewManagerConfig(VIEW_MANAGER_NAME) as
-        | { Commands?: { loadAd?: number; showAd?: number } }
-        | undefined;
-      if (!config?.Commands?.loadAd) return;
-      UIManager.dispatchViewManagerCommand(
-        handle,
-        config.Commands.loadAd,
-        [],
-      );
+      if (useExternalLoad) {
+        return;
+      }
+      setInternalLoadId(v => v + 1);
     },
     showAd() {
-      const handle = findNodeHandle(innerRef.current);
-      if (!handle) return;
-      const config = UIManager.getViewManagerConfig(VIEW_MANAGER_NAME) as
-        | { Commands?: { loadAd?: number; showAd?: number } }
-        | undefined;
-      if (!config?.Commands?.showAd) return;
-      UIManager.dispatchViewManagerCommand(
-        handle,
-        config.Commands.showAd,
-        [],
-      );
+      if (useExternalShow) {
+        return;
+      }
+      setInternalShowId(v => v + 1);
     },
   }));
 
-  const handleFailedToLoad: NativeProps['onAdFailedToLoad'] = e => {
-    props.onAdFailedToLoad?.(e.nativeEvent);
+  const handleFailedToLoad: NativeProps['onNativeAdFailedToLoad'] = e => {
+    onNativeAdFailedToLoad?.(e.nativeEvent);
   };
 
-  const handleShowFailed: NativeProps['onAdShowFailed'] = e => {
-    props.onAdShowFailed?.(e.nativeEvent);
+  const handleShowFailed: NativeProps['onNativeAdShowFailed'] = e => {
+    onNativeAdShowFailed?.(e.nativeEvent);
   };
 
   return (
     <NativeComponent
-      ref={innerRef}
-      {...props}
-      onAdFailedToLoad={props.onAdFailedToLoad ? handleFailedToLoad : undefined}
-      onAdShowFailed={props.onAdShowFailed ? handleShowFailed : undefined}
+      collapsable={false}
+      {...nativeRest}
+      viewSyncKey={viewSyncKey ?? -1}
+      loadRequestId={loadRequestIdForNative}
+      showRequestId={showRequestIdForNative}
+      onNativeAdFailedToLoad={
+        onNativeAdFailedToLoad ? handleFailedToLoad : undefined
+      }
+      onNativeAdShowFailed={
+        onNativeAdShowFailed ? handleShowFailed : undefined
+      }
     />
   );
 });

package/src/AdWhaleRewardAd.ts

@@ -8,8 +8,14 @@ export interface AdWhaleRewardErrorEvent {
 }
 
 export interface AdWhaleRewardUserRewardedEvent {
-  type: string;
-  amount: number;
+  /** Flutter payload key */
+  RewardType?: string;
+  /** Flutter payload key */
+  RewardAmount?: number;
+  /** 레거시 호환 */
+  type?: string;
+  /** 레거시 호환 */
+  amount?: number;
 }
 
 export interface AdWhaleRewardEvents {
@@ -28,20 +34,34 @@ export interface AdWhaleRewardGcoder {
 }
 
 interface RNAdWhaleMediationRewardAdNativeModule {
-  setPlacementName(placementName: string): void;
-  setRegion(region: string): void;
-  setGcoder(gcoder: { lt: number; lng: number }): void;
-  loadAd(placementUid: string): void;
-  showAd(): void;
+  setPlacementName?(placementName: string): void;
+  setRegion?(region: string): void;
+  setGcoder?(gcoder: { lt: number; lng: number }): void;
+  loadAd?(placementUid: string): void;
+  showAd?(): void;
+  loadRewardAd?(args: {
+    adId: number;
+    placementUid: string;
+    placementName?: string;
+    region?: string;
+    gcoder?: [number, number];
+  }): void;
+  showAdWithoutView?(adId: number): void;
+  destroyAd?(adId: number): void;
   addListener(eventName: string): void;
   removeListeners(count: number): void;
 }
 
+const LINKING_ERROR =
+  'RNAdWhaleMediationRewardAd native module is not linked on this platform.';
+
 const { RNAdWhaleMediationRewardAd } = NativeModules as {
-  RNAdWhaleMediationRewardAd: RNAdWhaleMediationRewardAdNativeModule;
+  RNAdWhaleMediationRewardAd?: RNAdWhaleMediationRewardAdNativeModule;
 };
 
-const rewardEmitter = new NativeEventEmitter(RNAdWhaleMediationRewardAd);
+const rewardEmitter = RNAdWhaleMediationRewardAd
+  ? new NativeEventEmitter(RNAdWhaleMediationRewardAd)
+  : null;
 
 export const AdWhaleRewardAd = {
   loadAd(
@@ -52,34 +72,119 @@ export const AdWhaleRewardAd = {
       gcoder?: AdWhaleRewardGcoder;
     },
   ) {
+    if (!RNAdWhaleMediationRewardAd) {
+      console.warn(LINKING_ERROR);
+      return;
+    }
     // 먼저 옵션들을 설정
     if (options?.placementName) {
-      RNAdWhaleMediationRewardAd.setPlacementName(options.placementName);
+      RNAdWhaleMediationRewardAd.setPlacementName?.(options.placementName);
     }
     if (options?.region) {
-      RNAdWhaleMediationRewardAd.setRegion(options.region);
+      RNAdWhaleMediationRewardAd.setRegion?.(options.region);
     }
     if (options?.gcoder) {
-      RNAdWhaleMediationRewardAd.setGcoder(options.gcoder);
+      RNAdWhaleMediationRewardAd.setGcoder?.(options.gcoder);
+    }
+    if (RNAdWhaleMediationRewardAd.loadAd) {
+      RNAdWhaleMediationRewardAd.loadAd(placementUid);
+      return;
+    }
+    if (RNAdWhaleMediationRewardAd.loadRewardAd) {
+      RNAdWhaleMediationRewardAd.loadRewardAd({
+        adId: 0,
+        placementUid,
+        placementName: options?.placementName,
+        region: options?.region,
+        gcoder: options?.gcoder
+          ? [options.gcoder.lt, options.gcoder.lng]
+          : undefined,
+      });
+      return;
     }
-    // 그 다음 loadAd 호출
-    RNAdWhaleMediationRewardAd.loadAd(placementUid);
+    console.warn(
+      '[AdWhaleRewardAd] Native module missing both loadAd and loadRewardAd.',
+    );
   },
 
   showAd() {
-    RNAdWhaleMediationRewardAd.showAd();
+    if (!RNAdWhaleMediationRewardAd) {
+      console.warn(LINKING_ERROR);
+      return;
+    }
+    if (RNAdWhaleMediationRewardAd.showAd) {
+      RNAdWhaleMediationRewardAd.showAd();
+      return;
+    }
+    if (RNAdWhaleMediationRewardAd.showAdWithoutView) {
+      RNAdWhaleMediationRewardAd.showAdWithoutView(0);
+      return;
+    }
+    console.warn(
+      '[AdWhaleRewardAd] Native module missing both showAd and showAdWithoutView.',
+    );
+  },
+
+  /** Flutter와 동일한 신규 API (권장) */
+  loadRewardAd(
+    adId: number,
+    placementUid: string,
+    options?: {
+      placementName?: string;
+      region?: string;
+      gcoder?: AdWhaleRewardGcoder;
+    },
+  ) {
+    if (!RNAdWhaleMediationRewardAd) {
+      console.warn(LINKING_ERROR);
+      return;
+    }
+    if (!RNAdWhaleMediationRewardAd.loadRewardAd) {
+      this.loadAd(placementUid, options);
+      return;
+    }
+    RNAdWhaleMediationRewardAd.loadRewardAd({
+      adId,
+      placementUid,
+      placementName: options?.placementName,
+      region: options?.region,
+      gcoder: options?.gcoder ? [options.gcoder.lt, options.gcoder.lng] : undefined,
+    });
+  },
+
+  showAdWithoutView(adId: number) {
+    if (!RNAdWhaleMediationRewardAd) {
+      console.warn(LINKING_ERROR);
+      return;
+    }
+    if (!RNAdWhaleMediationRewardAd.showAdWithoutView) {
+      this.showAd();
+      return;
+    }
+    RNAdWhaleMediationRewardAd.showAdWithoutView(adId);
+  },
+
+  destroyAd(adId: number) {
+    RNAdWhaleMediationRewardAd?.destroyAd?.(adId);
   },
 
   addEventListeners(listeners: AdWhaleRewardEvents): EmitterSubscription[] {
+    if (!rewardEmitter) {
+      console.warn(LINKING_ERROR);
+      return [];
+    }
     const subs: EmitterSubscription[] = [];
+    let directShowedReceived = false;
+    let directUserRewardedReceived = false;
 
-    if (listeners.onLoaded) {
-      subs.push(
-        rewardEmitter.addListener('onRewardAdLoaded', () => {
-          listeners.onLoaded?.();
-        }),
-      );
-    }
+    subs.push(
+      rewardEmitter.addListener('onRewardAdLoaded', () => {
+        directShowedReceived = false;
+        directUserRewardedReceived = false;
+        console.log('AdWhaleRewardAd.ts Reward onLoaded');
+        listeners.onLoaded?.();
+      }),
+    );
     if (listeners.onLoadFailed) {
       subs.push(
         rewardEmitter.addListener(
@@ -88,13 +193,13 @@ export const AdWhaleRewardAd = {
         ),
       );
     }
-    if (listeners.onShowed) {
-      subs.push(
-        rewardEmitter.addListener('onRewardAdShowed', () => {
-          listeners.onShowed?.();
-        }),
-      );
-    }
+    subs.push(
+      rewardEmitter.addListener('onRewardAdShowed', () => {
+        directShowedReceived = true;
+        console.log('AdWhaleRewardAd.ts Reward onAdShowed');
+        listeners.onShowed?.();
+      }),
+    );
     if (listeners.onShowFailed) {
       subs.push(
         rewardEmitter.addListener(
@@ -103,13 +208,14 @@ export const AdWhaleRewardAd = {
         ),
       );
     }
-    if (listeners.onDismissed) {
-      subs.push(
-        rewardEmitter.addListener('onRewardAdDismissed', () => {
-          listeners.onDismissed?.();
-        }),
-      );
-    }
+    subs.push(
+      rewardEmitter.addListener('onRewardAdDismissed', () => {
+        directShowedReceived = false;
+        directUserRewardedReceived = false;
+        console.log('AdWhaleRewardAd.ts Reward onDismissed');
+        listeners.onDismissed?.();
+      }),
+    );
     if (listeners.onClicked) {
       subs.push(
         rewardEmitter.addListener('onRewardAdClicked', () => {
@@ -117,15 +223,111 @@ export const AdWhaleRewardAd = {
         }),
       );
     }
-    if (listeners.onUserRewarded) {
+    subs.push(
+      rewardEmitter.addListener(
+        'onUserRewarded',
+        event => {
+          directUserRewardedReceived = true;
+          const rewardedEvent = event as AdWhaleRewardUserRewardedEvent;
+          const rewardAmount = rewardedEvent.amount ?? rewardedEvent.RewardAmount;
+          const rewardType = rewardedEvent.type ?? rewardedEvent.RewardType;
+          console.log(
+            `AdWhaleRewardAd.ts Reward onUserRewarded: ${String(rewardAmount)}, ${String(rewardType)}`,
+          );
+          listeners.onUserRewarded?.(rewardedEvent);
+        },
+      ),
+    );
+    subs.push(
+      rewardEmitter.addListener('onAdEvent', (payload: any) => {
+        if (payload?.eventName === 'onRewardAdShowed' && !directShowedReceived) {
+          directShowedReceived = true;
+          console.log('AdWhaleRewardAd.ts Reward onAdShowed');
+          listeners.onShowed?.();
+          return;
+        }
+
+        if (payload?.eventName === 'onUserRewarded' && !directUserRewardedReceived) {
+          directUserRewardedReceived = true;
+          const rewardAmount = payload?.amount ?? payload?.RewardAmount;
+          const rewardType = payload?.type ?? payload?.RewardType;
+          console.log(
+            `AdWhaleRewardAd.ts Reward onUserRewarded: ${String(rewardAmount)}, ${String(rewardType)}`,
+          );
+          listeners.onUserRewarded?.({
+            RewardType: payload?.RewardType,
+            RewardAmount: payload?.RewardAmount,
+            type: payload?.type,
+            amount: payload?.amount,
+          });
+        }
+      }),
+    );
+
+    return subs;
+  },
+
+  /** Flutter `onAdEvent` 스타일 (adId 필터링) */
+  addAdEventListenersById(
+    adId: number,
+    listeners: AdWhaleRewardEvents,
+  ): EmitterSubscription[] {
+    if (!rewardEmitter) {
+      console.warn(LINKING_ERROR);
+      return [];
+    }
+    const subs: EmitterSubscription[] = [];
+
+    const handle = (eventName: string, cb?: (p?: any) => void) => {
+      if (!cb) return;
       subs.push(
-        rewardEmitter.addListener(
-          'onUserRewarded',
-          event =>
-            listeners.onUserRewarded?.(event as AdWhaleRewardUserRewardedEvent),
-        ),
+        rewardEmitter.addListener('onAdEvent', (payload: any) => {
+          if (!payload || payload.adId !== adId || payload.eventName !== eventName) {
+            return;
+          }
+          cb(payload);
+        }),
       );
-    }
+    };
+
+    handle('onRewardAdLoaded', () => {
+      console.log('AdWhaleRewardAd.ts Reward onLoaded');
+      listeners.onLoaded?.();
+    });
+    handle('onRewardAdFailedToLoad', p =>
+      listeners.onLoadFailed?.({
+        statusCode: Number(p?.statusCode ?? -1),
+        message: String(p?.message ?? ''),
+      }),
+    );
+    handle('onRewardAdShowed', () => {
+      console.log('AdWhaleRewardAd.ts Reward onAdShowed');
+      listeners.onShowed?.();
+    });
+    handle('onRewardAdFailedToShow', p =>
+      listeners.onShowFailed?.({
+        statusCode: Number(p?.statusCode ?? -1),
+        message: String(p?.message ?? ''),
+      }),
+    );
+    handle('onRewardAdDismissed', () => {
+      console.log('AdWhaleRewardAd.ts Reward onDismissed');
+      listeners.onDismissed?.();
+    });
+    handle('onRewardAdClicked', () => listeners.onClicked?.());
+    handle('onUserRewarded', p => {
+      const rewardAmount = p?.amount ?? p?.RewardAmount;
+      const rewardType = p?.type ?? p?.RewardType;
+      console.log(
+        `AdWhaleRewardAd.ts Reward onUserRewarded: ${String(rewardAmount)}, ${String(rewardType)}`,
+      );
+      listeners.onUserRewarded?.({
+        RewardType: p?.RewardType,
+        RewardAmount: p?.RewardAmount,
+        type: p?.type,
+        amount: p?.amount,
+      });
+    });
 
     return subs;
   },

package/src/AdWhaleTransitionPopupAd.ts

@@ -0,0 +1,171 @@
+// src/AdWhaleTransitionPopupAd.ts
+import {
+  NativeEventEmitter,
+  NativeModules,
+  Platform,
+} from 'react-native';
+import type { EmitterSubscription } from 'react-native';
+
+export interface AdWhaleTransitionPopupAdErrorEvent {
+  statusCode: number;
+  message: string;
+}
+
+export interface AdWhaleTransitionPopupAdClosedEvent {
+  reasonId: number;
+  reasonMessage: string;
+}
+
+export interface AdWhaleTransitionPopupAdEvents {
+  onLoaded?: () => void;
+  onLoadFailed?: (event: AdWhaleTransitionPopupAdErrorEvent) => void;
+  onShowed?: () => void;
+  onShowFailed?: (event: AdWhaleTransitionPopupAdErrorEvent) => void;
+  onClicked?: () => void;
+  onClosed?: (event: AdWhaleTransitionPopupAdClosedEvent) => void;
+}
+
+export interface AdWhaleTransitionPopupGcoder {
+  lt: number;
+  lng: number;
+}
+
+interface RNAdWhaleMediationTransitionPopupAdNativeModule {
+  setPlacementName(placementName: string): void;
+  setRegion(region: string): void;
+  setGcoder(gcoder: { lt: number; lng: number }): void;
+  loadAd(placementUid: string): void;
+  showAd(): void;
+  destroy(): void;
+  resume(): void;
+  addListener(eventName: string): void;
+  removeListeners(count: number): void;
+}
+
+const LINKING_ERROR =
+  Platform.OS === 'android'
+    ? 'RNAdWhaleMediationTransitionPopupAd native module is not linked.'
+    : 'Transition Popup Ad is only supported on Android.';
+
+const { RNAdWhaleMediationTransitionPopupAd } = NativeModules as {
+  RNAdWhaleMediationTransitionPopupAd?: RNAdWhaleMediationTransitionPopupAdNativeModule;
+};
+
+const transitionPopupEmitter = RNAdWhaleMediationTransitionPopupAd
+  ? new NativeEventEmitter(RNAdWhaleMediationTransitionPopupAd)
+  : null;
+
+export const AdWhaleTransitionPopupAd = {
+  loadAd(
+    placementUid: string,
+    options?: {
+      placementName?: string;
+      region?: string;
+      gcoder?: AdWhaleTransitionPopupGcoder;
+    }
+  ) {
+    if (!RNAdWhaleMediationTransitionPopupAd) {
+      console.warn(LINKING_ERROR);
+      return;
+    }
+    if (options?.placementName != null) {
+      RNAdWhaleMediationTransitionPopupAd.setPlacementName(options.placementName);
+    }
+    if (options?.region != null) {
+      RNAdWhaleMediationTransitionPopupAd.setRegion(options.region);
+    }
+    if (options?.gcoder) {
+      RNAdWhaleMediationTransitionPopupAd.setGcoder(options.gcoder);
+    }
+    RNAdWhaleMediationTransitionPopupAd.loadAd(placementUid);
+  },
+
+  showAd() {
+    if (!RNAdWhaleMediationTransitionPopupAd) {
+      console.warn(LINKING_ERROR);
+      return;
+    }
+    RNAdWhaleMediationTransitionPopupAd.showAd();
+  },
+
+  destroy() {
+    if (!RNAdWhaleMediationTransitionPopupAd) {
+      console.warn(LINKING_ERROR);
+      return;
+    }
+    RNAdWhaleMediationTransitionPopupAd.destroy();
+  },
+
+  resume() {
+    if (!RNAdWhaleMediationTransitionPopupAd) {
+      console.warn(LINKING_ERROR);
+      return;
+    }
+    RNAdWhaleMediationTransitionPopupAd.resume();
+  },
+
+  addEventListeners(
+    listeners: AdWhaleTransitionPopupAdEvents
+  ): EmitterSubscription[] {
+    if (!transitionPopupEmitter) {
+      console.warn(LINKING_ERROR);
+      return [];
+    }
+    const subs: EmitterSubscription[] = [];
+
+    if (listeners.onLoaded) {
+      subs.push(
+        transitionPopupEmitter.addListener('onTransitionPopupAdLoaded', () => {
+          listeners.onLoaded?.();
+        })
+      );
+    }
+    if (listeners.onLoadFailed) {
+      subs.push(
+        transitionPopupEmitter.addListener(
+          'onTransitionPopupAdLoadFailed',
+          event => {
+            listeners.onLoadFailed?.(
+              event as AdWhaleTransitionPopupAdErrorEvent
+            );
+          }
+        )
+      );
+    }
+    if (listeners.onShowed) {
+      subs.push(
+        transitionPopupEmitter.addListener('onTransitionPopupAdShowed', () => {
+          listeners.onShowed?.();
+        })
+      );
+    }
+    if (listeners.onShowFailed) {
+      subs.push(
+        transitionPopupEmitter.addListener(
+          'onTransitionPopupAdShowFailed',
+          event => {
+            listeners.onShowFailed?.(
+              event as AdWhaleTransitionPopupAdErrorEvent
+            );
+          }
+        )
+      );
+    }
+    if (listeners.onClicked) {
+      subs.push(
+        transitionPopupEmitter.addListener('onTransitionPopupAdClicked', () => {
+          listeners.onClicked?.();
+        })
+      );
+    }
+    if (listeners.onClosed) {
+      subs.push(
+        transitionPopupEmitter.addListener('onTransitionPopupAdClosed', event => {
+          listeners.onClosed?.(event as AdWhaleTransitionPopupAdClosedEvent);
+        })
+      );
+    }
+
+    return subs;
+  },
+};