@jolibox/implement 1.1.18 → 1.1.19-beta.6

package/src/common/rewards/reward-emitter.ts

@@ -0,0 +1,79 @@
+// rewards-emitter-wrapper.ts
+
+import { EventEmitter } from '@jolibox/common';
+import { IUnlockOption } from './type';
+import { IJoliCoin } from './type';
+
+export interface IUnlockOptionsEvent {
+  options: IUnlockOption[];
+  userJoliCoin: IJoliCoin;
+}
+
+export const UnlockOptionsEventName = 'UNLOCK_OPTIONS_CHANGED' as const;
+export const InvokePaymentEventName = 'INVOKE_PAYMENT' as const;
+export const PaymentResultEventName = 'ON_PAYMENT_RESULT' as const;
+export const UseModalEventName = 'ON_USE_MODAL_EVENT' as const;
+export const UseModalResultEventName = 'ON_USE_MODAL_RESULT' as const;
+
+type IPaymentResult = 'SUCCESS' | 'FAILED' | 'CANCEL';
+export interface IPaymentEvent {
+  userJoliCoin?: IJoliCoin;
+  paymentResult: IPaymentResult;
+}
+
+export interface IPaymentChoice {
+  productId: string;
+  totalAmountStr: string;
+  quantity: number;
+}
+
+export interface IInvokePaymentEvent {
+  userJoliCoin: IJoliCoin;
+  joliCoinQuantity: number;
+  enableAutoDeduct: boolean;
+  confirmButtonText: string;
+  cancelButtonText: string;
+  sequenceId?: string;
+}
+
+export interface IUseModalEvent {
+  enableAutoDeduct: boolean;
+  userJoliCoin: IJoliCoin;
+  joliCoinQuantity: number;
+  confirmButtonText: string;
+  cancelButtonText: string;
+  sequenceId?: string;
+}
+
+export interface IUseModalResultEvent {
+  useModalResult: 'CONFIRM' | 'CANCEL' | 'FAILED';
+}
+
+export interface RewardsEventMap extends Record<string, unknown[]> {
+  [UnlockOptionsEventName]: [IUnlockOptionsEvent];
+  [InvokePaymentEventName]: ['JOLI_COIN' | 'ADS-JOLI_COIN', IInvokePaymentEvent];
+  [PaymentResultEventName]: [IPaymentEvent];
+  [UseModalResultEventName]: [IUseModalResultEvent];
+  [UseModalEventName]: ['JOLI_COIN' | 'ADS-JOLI_COIN', IUseModalEvent];
+}
+
+export const originalRewardsEmitter = new EventEmitter<RewardsEventMap>();
+
+export type RewardsEventType = keyof RewardsEventMap;
+
+export interface RewardsEmitter {
+  on<T extends RewardsEventType>(event: T, callback: (...args: RewardsEventMap[T]) => void): void;
+  off<T extends RewardsEventType>(event: T, callback: (...args: RewardsEventMap[T]) => void): void;
+  emit<T extends RewardsEventType>(event: T, ...args: RewardsEventMap[T]): void;
+}
+
+// 创建包装器
+export const createRewardsEmitterWrapper = (): RewardsEmitter => {
+  return {
+    on: originalRewardsEmitter.on.bind(originalRewardsEmitter),
+    off: originalRewardsEmitter.off.bind(originalRewardsEmitter),
+    emit: originalRewardsEmitter.emit.bind(originalRewardsEmitter)
+  };
+};
+
+export const rewardsEmitter = createRewardsEmitterWrapper();

package/src/common/rewards/reward-helper.ts

@@ -1,11 +1,12 @@
-export type RewardType = 'ADS' | 'JOLI_COIN';
+export type RewardType = 'ADS' | 'JOLI_COIN' | 'JOLI_COIN_ONLY';
 
 import { context } from '../context';
 import type { AdsRewardsHandler } from './registers/use-ads';
 
 export interface RewardHandlerMap {
   ADS: AdsRewardsHandler;
-  JOLI_COIN: (params?: unknown) => Promise<boolean>;
+  JOLI_COIN: (params?: unknown) => Promise<boolean>; // coins + ads
+  JOLI_COIN_ONLY: (params?: unknown) => Promise<boolean>; // coins only
 }
 
 export type RewardHandler<T extends RewardType> = RewardHandlerMap[T];

package/src/common/utils/index.ts

@@ -1,5 +1,10 @@
+/**
+ * event send to parent window
+ */
 const JOLIBOX_CUSTOM_ADS_EVENT_TYPE = 'JOLIBOX_ADS_EVENT';
 const JOLIBOX_CUSTOM_REWARDS_EVENT_TYPE = 'JOLIBOX_CUSTOM_REWARDS_EVENT';
+const JOLIBOX_TOPUP_EVENT = 'JOLIBOX_TOPUP_EVENT';
+const JOLIBOX_JOLI_COIN_USE_EVENT = 'JOLIBOX_JOLI_COIN_USE_EVENT';
 
 interface JoliboxCustomEvent {
   [JOLIBOX_CUSTOM_ADS_EVENT_TYPE]: {
@@ -11,12 +16,28 @@ interface JoliboxCustomEvent {
       balance: number;
     };
   };
+  [JOLIBOX_TOPUP_EVENT]: {
+    ['JOLI_COIN']?: {
+      quantity: number;
+      balance: number;
+      enableAutoDeduct?: boolean;
+    };
+    type: 'ADS-JOLI_COIN' | 'JOLI_COIN';
+    sequenceId: string;
+  };
+  //
+  [JOLIBOX_JOLI_COIN_USE_EVENT]: {
+    ['JOLI_COIN']?: {
+      quantity: number;
+      balance: number;
+      enableAutoDeduct?: boolean;
+    };
+    type: 'ADS-JOLI_COIN' | 'JOLI_COIN';
+    sequenceId: string;
+  };
 }
 
-export const notifyCustomEvent = <T extends keyof JoliboxCustomEvent>(
-  eventName: T,
-  data: JoliboxCustomEvent[T]
-) => {
+const notifyCustomEvent = <T extends keyof JoliboxCustomEvent>(eventName: T, data: JoliboxCustomEvent[T]) => {
   window.dispatchEvent(new CustomEvent(eventName, { detail: data }));
   window.parent?.postMessage(
     {
@@ -28,3 +49,95 @@ export const notifyCustomEvent = <T extends keyof JoliboxCustomEvent>(
     '*'
   );
 };
+
+/**
+ * received event to parent window
+ * @param eventName
+ * @param data
+ */
+
+const ON_JOLIBOX_TOPUP_JOLI_COIN_RESULT = 'ON_JOLIBOX_TOPUP_JOLI_COIN_RESULT';
+const ON_JOLIBOX_JOLI_COIN_USE_RESULT = 'ON_JOLIBOX_JOLI_COIN_USE_RESULT';
+
+interface ReceivedJoliboxCustomEvent {
+  [ON_JOLIBOX_TOPUP_JOLI_COIN_RESULT]: {
+    sequenceId: string;
+    result: 'SUCCESS' | 'CANCEL' | 'ADS';
+    type: 'ADS-JOLI_COIN' | 'JOLI_COIN';
+    joliCoin: {
+      enableAutoDeduct: boolean;
+      balance: number;
+    };
+  };
+  [ON_JOLIBOX_JOLI_COIN_USE_RESULT]: {
+    sequenceId: string;
+    result: 'USE_COIN' | 'ADS' | 'CANCEL';
+  };
+}
+
+type ReceivedJoliboxCustomEventResult = keyof ReceivedJoliboxCustomEvent;
+
+interface MessageData<T extends ReceivedJoliboxCustomEventResult> {
+  type: T;
+  data: ReceivedJoliboxCustomEvent[T];
+}
+
+const eventCallbacks = new Map<string, Set<(data: any) => void>>();
+
+const globalMessageHandler = (event: MessageEvent) => {
+  if (event.source !== window.parent) {
+    return;
+  }
+
+  try {
+    const message = event.data as MessageData<any>;
+    if (message && message.type) {
+      const callbacks = eventCallbacks.get(message.type);
+      if (callbacks) {
+        callbacks.forEach((callback) => {
+          try {
+            callback(message.data);
+          } catch (error) {
+            console.warn('Callback execution failed:', error);
+          }
+        });
+      }
+    }
+  } catch (error) {
+    console.warn('Failed to parse message:', error);
+  }
+};
+
+let isInitialized = false;
+const initializeGlobalListener = () => {
+  if (!isInitialized) {
+    window.addEventListener('message', globalMessageHandler);
+    isInitialized = true;
+  }
+};
+
+const onCustomEvent = <T extends ReceivedJoliboxCustomEventResult>(
+  eventName: T,
+  callback: (data: ReceivedJoliboxCustomEvent[T]) => void
+) => {
+  initializeGlobalListener();
+
+  if (!eventCallbacks.has(eventName)) {
+    eventCallbacks.set(eventName, new Set());
+  }
+  const callbacks = eventCallbacks.get(eventName)!;
+
+  callbacks.add(callback);
+  return () => {
+    callbacks.delete(callback);
+    if (callbacks.size === 0) {
+      eventCallbacks.delete(eventName);
+    }
+    if (eventCallbacks.size === 0) {
+      window.removeEventListener('message', globalMessageHandler);
+      isInitialized = false;
+    }
+  };
+};
+
+export { onCustomEvent, notifyCustomEvent };

package/src/h5/api/ads.ts

@@ -1,23 +1,68 @@
-import { JoliboxAdsImpl, adEventEmitter } from '@/common/ads';
 import { track } from '../report';
-import { createCommands } from '@jolibox/common';
+import { createCommands, EventEmitter, platform } from '@jolibox/common';
 import { httpClientManager } from '../http';
 import { notifyCustomEvent } from '@/common/utils';
-import { createAdsRewardHandler, rewardsHelper, createJolicoinRewardHandler } from '@/common/rewards';
+import {
+  createAdsRewardHandler,
+  rewardsHelper,
+  createJolicoinRewardHandler,
+  createJolicoinOnlyRewardHandler
+} from '@/common/rewards';
+import { JoliboxAdsForGame, type IAdsContext } from '@jolibox/ads';
+import { context } from '@/common/context';
+import '../rewards';
 
 const commands = createCommands();
 
+const adEventEmitter = new EventEmitter<{
+  isAdShowing: [boolean];
+}>();
+
 const httpClient = httpClientManager.create();
-const ads = new JoliboxAdsImpl(track, httpClient, () => httpClientManager.getNetworkStatus());
+
+const adsContext: IAdsContext<'GAME'> = {
+  httpClient,
+  checkNetwork: () => httpClientManager.getNetworkStatus(),
+  track,
+  eventEmitter: adEventEmitter,
+  getContextInfo: () => {
+    return {
+      hostAppId: context.hostInfo?.aid ?? '1',
+      deviceId: context.deviceInfo.did ?? '',
+      adId: context.deviceInfo.did ?? '', //TODO: @Deng Xue
+      sessionId: context.sessionId ?? '',
+      userId: context.hostUserInfo?.uid ?? '',
+      objectType: 'GAME',
+      objectId: context.mpId,
+      testAdsMode: context.testAdsMode,
+      channel: context.joliSource ?? '',
+      deviceBrand: context.deviceInfo.brand,
+      deviceModel: context.deviceInfo.model,
+      osType: platform.isAndroid ? 'ANDROID' : platform.isiOS ? 'IOS' : 'PC',
+      runtimeType: 'WEB',
+      platform: 1000 // WebSDK
+    };
+  }
+};
+
+const handleUnlockSuccess = (params: { quantity: number; balance: number }) => {
+  notifyCustomEvent('JOLIBOX_CUSTOM_REWARDS_EVENT', {
+    JOLI_COIN: params
+  });
+};
+
+const ads = new JoliboxAdsForGame(adsContext);
 rewardsHelper.registerRewardHandler('ADS', createAdsRewardHandler(ads));
 rewardsHelper.registerRewardHandler(
   'JOLI_COIN',
-  createJolicoinRewardHandler(ads.httpClient, {
-    onUnlockSuccess: (params: { quantity: number; balance: number }) => {
-      notifyCustomEvent('JOLIBOX_CUSTOM_REWARDS_EVENT', {
-        JOLI_COIN: params
-      });
-    }
+  createJolicoinRewardHandler(httpClient, {
+    onUnlockSuccess: handleUnlockSuccess.bind(this)
+  }) as unknown as (params?: unknown) => Promise<boolean>
+);
+rewardsHelper.registerRewardHandler(
+  'JOLI_COIN_ONLY',
+  createJolicoinOnlyRewardHandler(httpClient, {
+    onUnlockSuccess: handleUnlockSuccess.bind(this)
   }) as unknown as (params?: unknown) => Promise<boolean>
 );
 
@@ -35,8 +80,16 @@ commands.registerCommand('AdsSDK.adConfig', (params) => {
 
 commands.registerCommand('AdsSDK.adBreak', (params) => {
   if (params.type === 'reward') {
-    rewardsHelper.getRewardsTypes(ads.httpClient).then((rewardsTypes) => {
-      rewardsHelper.handleReward(rewardsTypes, params);
+    rewardsHelper.getRewardsTypes(httpClient).then((rewardsTypes) => {
+      rewardsHelper.handleReward(rewardsTypes, params).catch((e) => {
+        // error should terminate the reward handler, invoke unlock failed
+        console.info('handleReward failed', e);
+        params.adBreakDone?.({
+          breakType: params.type,
+          breakFormat: params.type === 'reward' ? 'reward' : 'interstitial',
+          breakStatus: 'noAdPreloaded'
+        });
+      });
     });
   } else {
     ads.adBreak(params);

package/src/h5/http/index.ts

@@ -46,7 +46,7 @@ export class HttpClientManager {
     }
   }
 
-  getNetworkStatus(): boolean {
+  getNetworkStatus = (): boolean => {
     if (this.networkRequests.length === 0) {
       return true;
     }
@@ -55,7 +55,7 @@ export class HttpClientManager {
     const successRate = successCount / this.networkRequests.length;
 
     return successRate >= 0.6;
-  }
+  };
 }
 
 class JoliboxHttpClient implements IHttpClient {

package/src/h5/rewards/index.ts

@@ -0,0 +1,69 @@
+/**
+ * rewards event handlers
+ */
+
+import {
+  rewardsEmitter,
+  UseModalEventName,
+  IUseModalEvent,
+  PaymentResultEventName,
+  UseModalResultEventName,
+  InvokePaymentEventName,
+  IInvokePaymentEvent,
+  IUseModalResultEvent
+} from '@/common/rewards/reward-emitter';
+import { notifyCustomEvent, onCustomEvent } from '@/common/utils';
+import { uuidv4 as v4 } from '@jolibox/common';
+
+/**
+ * confirm jolicoin modal
+ */
+const UseCoinEventMap: Record<string, IUseModalResultEvent['useModalResult']> = {
+  USE_COIN: 'CONFIRM',
+  ADS: 'FAILED',
+  CANCEL: 'CANCEL'
+};
+onCustomEvent('ON_JOLIBOX_JOLI_COIN_USE_RESULT', (data) => {
+  console.log('onCustomEvent ON_JOLIBOX_JOLI_COIN_USE_RESULT', UseCoinEventMap[data.result]);
+
+  rewardsEmitter.emit(UseModalResultEventName, {
+    useModalResult: UseCoinEventMap[data.result]
+  });
+});
+rewardsEmitter.on(UseModalEventName, (type: 'JOLI_COIN' | 'ADS-JOLI_COIN', params: IUseModalEvent) => {
+  notifyCustomEvent('JOLIBOX_JOLI_COIN_USE_EVENT', {
+    JOLI_COIN: {
+      quantity: params.joliCoinQuantity,
+      balance: params.userJoliCoin.balance,
+      enableAutoDeduct: params.enableAutoDeduct
+    },
+    type,
+    sequenceId: params.sequenceId ?? v4()
+  });
+});
+
+/**
+ * payment jolicoin modal
+ */
+onCustomEvent('ON_JOLIBOX_TOPUP_JOLI_COIN_RESULT', (data) => {
+  rewardsEmitter.emit(PaymentResultEventName, {
+    paymentResult: data.result == 'ADS' ? 'FAILED' : data.result,
+    userJoliCoin: data.joliCoin
+  });
+});
+
+rewardsEmitter.on(
+  InvokePaymentEventName,
+  async (type: 'JOLI_COIN' | 'ADS-JOLI_COIN', params: IInvokePaymentEvent) => {
+    // 充值面板
+    notifyCustomEvent('JOLIBOX_TOPUP_EVENT', {
+      JOLI_COIN: {
+        quantity: params.joliCoinQuantity,
+        balance: params.userJoliCoin.balance,
+        enableAutoDeduct: params.enableAutoDeduct
+      },
+      type,
+      sequenceId: params.sequenceId ?? v4()
+    });
+  }
+);

package/src/native/api/ads.ts

@@ -1,61 +1,116 @@
 import { createCommands } from '@jolibox/common';
 import { createSyncAPI, registerCanIUse } from './base';
 import { createToast } from '@jolibox/ui';
+import '../rewards';
 
 const commands = createCommands();
 
-import { IAdsInitParams, JoliboxAdsImpl, IAdConfigParams, IAdBreakParams, IAdUnitParams } from '@/common/ads';
+// import { IAdsInitParams, JoliboxAdsImpl, IAdConfigParams, IAdBreakParams, IAdUnitParams } from '@/common/ads';
+import {
+  JoliboxAdsForGame,
+  type IAdsInitParams,
+  type IAdsContext,
+  type IAdConfigParams,
+  type IAdBreakParams,
+  type IAdUnitParams
+} from '@jolibox/ads';
 import { track } from '../report';
+import { context } from '@/common/context';
 
 import { innerFetch as fetch } from '../network';
 import { invokeNative } from '@jolibox/native-bridge';
-import { rewardsHelper, createAdsRewardHandler, createJolicoinRewardHandler } from '@/common/rewards';
+import {
+  rewardsHelper,
+  createAdsRewardHandler,
+  createJolicoinRewardHandler,
+  createJolicoinOnlyRewardHandler
+} from '@/common/rewards';
 
 const checkNetworkStatus = () => {
   const { data } = invokeNative('getNetworkStatusSync');
   return !!data?.isConnected;
 };
-const ads = new JoliboxAdsImpl(
+
+const httpClient = {
+  get: <T>(url: string, options?: any) =>
+    fetch<T>(url, {
+      method: 'GET',
+      responseType: 'json',
+      appendHostCookie: true,
+      ...options
+    }).then((res) => res.response.data as T),
+  post: <T>(url: string, options?: any) =>
+    fetch<T>(url, {
+      method: 'POST',
+      responseType: 'json',
+      appendHostCookie: true,
+      ...options
+    }).then((res) => res.response.data as T)
+};
+
+const adsContext: IAdsContext<'GAME'> = {
+  httpClient,
+  checkNetwork: checkNetworkStatus,
   track,
-  {
-    get: <T>(url: string, options?: any) =>
-      fetch<T>(url, {
-        method: 'GET',
-        responseType: 'json',
-        appendHostCookie: true,
-        ...options
-      }).then((res) => res.response.data as T),
-    post: <T>(url: string, data: any, options?: any) =>
-      fetch<T>(url, {
-        method: 'POST',
-        responseType: 'json',
-        appendHostCookie: true,
-        ...options
-      }).then((res) => res.response.data as T)
-  },
-  checkNetworkStatus
-);
+  getContextInfo: () => {
+    return {
+      hostAppId: context.hostInfo?.aid ?? '1',
+      deviceId: context.deviceInfo.did ?? '',
+      adId: context.deviceInfo.did ?? '', //TODO: @Deng Xue
+      sessionId: context.sessionId ?? '',
+      userId: context.hostUserInfo?.uid ?? '',
+      objectType: 'GAME',
+      objectId: context.mpId,
+      testAdsMode: context.testAdsMode,
+      channel: context.joliSource ?? '',
+      deviceBrand: context.deviceInfo.brand,
+      deviceModel: context.deviceInfo.model,
+      osType: context.platform === 'android' ? 'ANDROID' : context.platform === 'ios' ? 'IOS' : 'PC',
+      runtimeType: 'APP',
+      platform: 1000 // WebSDK
+    };
+  }
+};
+
+const ads = new JoliboxAdsForGame(adsContext);
 
 rewardsHelper.registerRewardHandler('ADS', createAdsRewardHandler(ads));
 rewardsHelper.registerRewardHandler(
   'JOLI_COIN',
-  createJolicoinRewardHandler(ads.httpClient, {
+  createJolicoinRewardHandler(httpClient, {
     onUnlockSuccess: (params) => {
-      const { quantity, balance } = params;
-      const balanceStr = balance >= 1000 ? '999+' : balance;
-      createToast(`{slot-checkmark}  −${quantity} {slot-coin} | Balance: ${balanceStr} {slot-coin}`, {
-        customStyle: {
-          mark: {
-            marginRight: '8px'
-          }
-        }
-      });
+      showUnlockSuccessToast(params);
     },
     onUnlockFailed: () => {
       console.log('onUnlockFailed');
     }
   }) as unknown as (params?: unknown) => Promise<boolean>
 );
+
+rewardsHelper.registerRewardHandler(
+  'JOLI_COIN_ONLY',
+  createJolicoinOnlyRewardHandler(httpClient, {
+    onUnlockSuccess: (params) => {
+      showUnlockSuccessToast(params);
+    },
+    onUnlockFailed: () => {
+      console.log('onUnlockFailed');
+    }
+  }) as unknown as (params?: unknown) => Promise<boolean>
+);
+
+const showUnlockSuccessToast = (params: { quantity: number; balance: number }) => {
+  const { quantity } = params;
+  const toastTemplate = `{slot-coin} ${quantity} JoliCoins used`;
+  createToast(toastTemplate, {
+    customStyle: {
+      mark: {
+        marginRight: '8px'
+      }
+    }
+  });
+};
+
 const adInit = createSyncAPI('adInit', {
   implement: (config?: IAdsInitParams) => {
     ads.init(config);
@@ -71,8 +126,15 @@ const adConfig = createSyncAPI('adConfig', {
 const adBreak = createSyncAPI('adBreak', {
   implement: (params: IAdBreakParams) => {
     if (params.type === 'reward') {
-      rewardsHelper.getRewardsTypes(ads.httpClient).then((rewardsTypes) => {
-        rewardsHelper.handleReward(rewardsTypes, params);
+      rewardsHelper.getRewardsTypes(httpClient).then((rewardsTypes) => {
+        rewardsHelper.handleReward(rewardsTypes, params).catch((e) => {
+          console.info('handleReward failed in native', e);
+          params.adBreakDone?.({
+            breakType: params.type,
+            breakFormat: params.type === 'reward' ? 'reward' : 'interstitial',
+            breakStatus: 'noAdPreloaded'
+          });
+        });
       });
     } else {
       ads.adBreak(params);

package/src/native/api/login.ts

@@ -23,7 +23,7 @@ registerCanIUse('checkSession', {
   }
 });
 
-const login = createAPI('login', {
+export const login = createAPI('login', {
   async implement() {
     const {
       data: { isLogin }

package/src/native/api/navigate.ts

@@ -1,4 +1,4 @@
-import { createCommands, UserCustomError } from '@jolibox/common';
+import { createCommands, hostEmitter, UserCustomError } from '@jolibox/common';
 import { invokeNative } from '@jolibox/native-bridge';
 import { createSyncAPI, t, registerCanIUse } from './base';
 import { context } from '@/common/context';
@@ -44,9 +44,17 @@ const closePageSync = createSyncAPI('closePageSync', {
   }
 });
 
+const interceptSystemExitSync = createSyncAPI('interceptSystemExitSync', {
+  paramsSchema: t.tuple(t.boolean()),
+  implement: (intercept) => {
+    hostEmitter.emit('onInterceptSystemExit', { intercept });
+  }
+});
+
 commands.registerCommand('RouterSDK.openSchema', openSchemaSync);
 commands.registerCommand('RouterSDK.openPage', openPageSync);
 commands.registerCommand('RouterSDK.closePage', closePageSync);
+commands.registerCommand('RouterSDK.interceptSystemExit', interceptSystemExitSync);
 
 registerCanIUse('router.openSchema', {
   version: '1.1.10'
@@ -59,3 +67,7 @@ registerCanIUse('router.openPage', {
 registerCanIUse('router.closePage', {
   version: '1.1.10'
 });
+
+registerCanIUse('router.interceptSystemExit', {
+  version: '1.1.18'
+});