@jolibox/implement 1.1.19-beta.1 → 1.1.19-beta.6

package/dist/native/api/ads.d.ts

@@ -1 +1 @@
-export {};
+import '../rewards';

package/dist/native/api/login.d.ts

@@ -1 +1,4 @@
-export {};
+export declare const login: (...inputs: unknown[]) => Promise<import("@jolibox/types").StandardResponse<{
+    isLogin: boolean;
+    token?: string;
+}>>;

package/dist/native/rewards/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * rewards event handlers
+ */
+export {};

package/dist/native/ui/modal-iframe.d.ts

@@ -0,0 +1,26 @@
+interface IframeModalOptions {
+    url: string;
+    height?: string;
+    showCloseButton?: boolean;
+    enableDragClose?: boolean;
+    useAnimation?: boolean;
+    onClose?: () => void;
+    onLoad?: () => void;
+}
+/**
+ * create a half-screen iframe modal
+ */
+export declare function createIframeModal(options: IframeModalOptions): {
+    close: () => void;
+};
+declare global {
+    interface Window {
+        joliboxUI?: {
+            createIframeModal: (options: IframeModalOptions) => {
+                close: () => void;
+            };
+        };
+    }
+}
+export declare function registerIframeModalToGlobal(): () => void;
+export {};

package/implement.build.log

@@ -1,9 +1,9 @@
 Invoking: npm run clean && npm run build:esm && tsc 
 
-> @jolibox/implement@1.1.19-beta.1 clean
+> @jolibox/implement@1.1.19-beta.6 clean
 > rimraf ./dist
 
 
-> @jolibox/implement@1.1.19-beta.1 build:esm
+> @jolibox/implement@1.1.19-beta.6 build:esm
 > BUILD_VERSION=$(node -p "require('./package.json').version")  node esbuild.config.js --format=esm
 

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@jolibox/implement",
   "description": "This project is Jolibox JS-SDk implement for Native && H5",
-  "version": "1.1.19-beta.1",
+  "version": "1.1.19-beta.6",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
-    "@jolibox/common": "1.1.19-beta.1",
-    "@jolibox/types": "1.1.19-beta.1",
-    "@jolibox/native-bridge": "1.1.19-beta.1",
+    "@jolibox/common": "1.1.19-beta.6",
+    "@jolibox/types": "1.1.19-beta.6",
+    "@jolibox/native-bridge": "1.1.19-beta.6",
+    "@jolibox/ads": "1.1.19-beta.6",
     "localforage": "1.10.0",
     "@jolibox/ui": "1.0.0",
     "web-vitals": "4.2.4"

package/src/common/context/index.ts

@@ -3,7 +3,7 @@ import { DeviceInfo, HostInfo, HostUserInfo, SdkInfo } from './types';
 import { Env } from '@jolibox/types';
 import { parseUrlQuery, encodeJoliSourceQuery, QueryParams } from './url-parse';
 import { getAppVersion } from '../http/xua';
-import { getDeviceId } from '@jolibox/common';
+import { getDeviceId, platform } from '@jolibox/common';
 
 declare const globalThis: {
   joliboxJSCore?: {
@@ -17,7 +17,7 @@ const defaultEnv: Env = {
     model: 'UnknownModel',
     did: getDeviceId(),
     pixelRatio: window.devicePixelRatio || 1,
-    platform: 'h5',
+    platform: platform.isAndroid ? 'android' : platform.isiOS ? 'ios' : 'h5',
     system: 'UnknownSystemVersion',
     lang: 'zh'
   },
@@ -26,7 +26,7 @@ const defaultEnv: Env = {
     jssdkVersion: getAppVersion()
   },
   schema: window.location.href,
-  platform: 'h5'
+  platform: platform.isAndroid ? 'android' : platform.isiOS ? 'ios' : 'h5'
 };
 
 const nativeEnv = globalThis.joliboxJSCore?.env;

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

@@ -1,7 +1,7 @@
-import { UnlockOptionsEventName, unlockOptionsEmitter } from '.';
 import { IHttpClient } from '../http';
 import { RewardsHelper, RewardType } from './reward-helper';
 import { IJolicoinRewardOption } from './type';
+import { UnlockOptionsEventName, rewardsEmitter } from './reward-emitter';
 
 const priority = () => {
   return (a: RewardType, b: RewardType) => {
@@ -11,6 +11,12 @@ const priority = () => {
   };
 };
 
+const sortRewards = (rewardsTypes: RewardType[]): RewardType[] => {
+  if (!rewardsTypes.length) return ['ADS'];
+  if (rewardsTypes.includes('JOLI_COIN') && rewardsTypes.length <= 1) return ['JOLI_COIN_ONLY'];
+  return rewardsTypes.sort(priority());
+};
+
 export const createRewardFetcher = (rewardsHelper: RewardsHelper) => {
   rewardsHelper.registerRewardsFetcher(async (httpClient: IHttpClient) => {
     const defaultRewards: RewardType[] = ['ADS'];
@@ -19,7 +25,7 @@ export const createRewardFetcher = (rewardsHelper: RewardsHelper) => {
       if (res.code !== 'SUCCESS') {
         return defaultRewards;
       }
-      unlockOptionsEmitter.emit(UnlockOptionsEventName, {
+      rewardsEmitter.emit(UnlockOptionsEventName, {
         options: res.data?.unlockOptions || [],
         userJoliCoin: res.extra?.joliCoin || {
           balance: 0,
@@ -30,7 +36,7 @@ export const createRewardFetcher = (rewardsHelper: RewardsHelper) => {
       const rewardsTypes =
         res.data?.unlockOptions?.map((option) => option.type) || Array.from(defaultRewards);
       // Sort reward types with JOLI_COIN having higher priority than ADS
-      return rewardsTypes.sort(priority());
+      return sortRewards(rewardsTypes);
     } catch (e) {
       console.error('getRewardOptions error:', e);
       return defaultRewards;

package/src/common/rewards/index.ts

@@ -1,20 +1,9 @@
 import { createRewardsHelper } from './reward-helper';
 import { createRewardFetcher } from './fetch-reward';
-import { EventEmitter } from '@jolibox/common';
-import { IUnlockOption, IJoliCoin } from './type';
 
 export const rewardsHelper = createRewardsHelper();
 createRewardFetcher(rewardsHelper);
 
 export * from './registers/use-ads';
 export * from './registers/use-jolicoin';
-
-export interface IUnlockOptionsEvent {
-  options: IUnlockOption[];
-  userJoliCoin: IJoliCoin;
-}
-
-export const UnlockOptionsEventName = 'UNLOCK_OPTIONS_CHANGED' as const;
-export const unlockOptionsEmitter = new EventEmitter<{
-  [UnlockOptionsEventName]: [IUnlockOptionsEvent];
-}>();
+export * from './registers/use-jolicoin-only';

package/src/common/rewards/registers/use-ads.ts

@@ -1,7 +1,8 @@
-import { JoliboxAdsImpl, IRewardParams } from '../../ads';
+import { IRewardParams } from '../../ads';
+import { JoliboxAdsForGame } from '@jolibox/ads';
 
 export type AdsRewardsHandler = (params: IRewardParams) => Promise<boolean>;
-export const createAdsRewardHandler = (ads: JoliboxAdsImpl): AdsRewardsHandler => {
+export const createAdsRewardHandler = (ads: JoliboxAdsForGame): AdsRewardsHandler => {
   return async (params: IRewardParams) => {
     ads.adBreak(params);
     return true;

package/src/common/rewards/registers/use-jolicoin-only.ts

@@ -0,0 +1,57 @@
+import { IHttpClient } from '@/common/http';
+import { rewardsEmitter, UnlockOptionsEventName, IUnlockOptionsEvent } from '../reward-emitter';
+import { IAdBreakParams } from '@/common/ads';
+import {
+  createCommonJolicoinRewardHandler,
+  createShowUnlockWithJolicoinModal,
+  createInitiateAndAwaitPayment
+} from './utils/coins';
+import { createEventPromiseHandler } from './utils/event-listener';
+
+export type JolicoinOnlyRewardsHandler = (params: IAdBreakParams) => Promise<boolean>;
+export const createJolicoinOnlyRewardHandler = (
+  httpClient: IHttpClient,
+  {
+    onUnlockSuccess,
+    onUnlockFailed
+  }: {
+    onUnlockSuccess?: (data: { quantity: number; balance: number }) => void;
+    onUnlockFailed?: () => void;
+  }
+): JolicoinOnlyRewardsHandler => {
+  const unlockOptionsHandler = createEventPromiseHandler<IUnlockOptionsEvent, typeof UnlockOptionsEventName>(
+    rewardsEmitter,
+    UnlockOptionsEventName
+  );
+
+  const handleUnlockFailed = (() => (params: IAdBreakParams) => {
+    onUnlockFailed?.();
+    params.adBreakDone?.({
+      breakType: params.type,
+      breakFormat: params.type === 'reward' ? 'reward' : 'interstitial',
+      breakStatus: 'noAdPreloaded'
+    });
+  })();
+
+  const showUnlockWithJolicoinModal = createShowUnlockWithJolicoinModal('JOLI_COIN', {
+    confirmButtonText: 'Use Jolicoin',
+    cancelButtonText: 'No thanks'
+  });
+
+  const initiateAndAwaitPayment = createInitiateAndAwaitPayment('JOLI_COIN', {
+    confirmButtonText: 'Pay and unlock',
+    cancelButtonText: 'No thanks'
+  });
+
+  const jolicoinOnlyRewardHandler = createCommonJolicoinRewardHandler(httpClient, {
+    handlers: {
+      handleUnlockSuccess: onUnlockSuccess,
+      handleUnlockFailed,
+      unlockOptionsHandler,
+      initiateAndAwaitPayment,
+      showUnlockWithJolicoinModal
+    }
+  });
+
+  return jolicoinOnlyRewardHandler;
+};

package/src/common/rewards/registers/use-jolicoin.ts

@@ -1,19 +1,9 @@
 import { IHttpClient } from '@/common/http';
-import { context } from '@/common/context';
-import { uuidv4 } from '@jolibox/common';
-import { unlockOptionsEmitter, UnlockOptionsEventName, IUnlockOptionsEvent } from '..';
+import { rewardsEmitter, UnlockOptionsEventName, IUnlockOptionsEvent } from '../reward-emitter';
 import { IAdBreakParams } from '@/common/ads';
-import { canUseJolicoin } from './utils';
-
-interface IJolicoinUnlockRes {
-  code: 'SUCCESS' | 'BALANCE_NOT_ENOUGH' | 'EPISODE_LOCK_JUMP' | 'EPISODE_UNLOCK_ALREADY';
-  message: string;
-  data: {
-    transactionId: string;
-    quantity: number;
-    balance: number;
-  };
-}
+import { createEventPromiseHandler } from './utils/event-listener';
+import { createCommonJolicoinRewardHandler } from './utils/coins';
+import { createInitiateAndAwaitPayment, createShowUnlockWithJolicoinModal } from './utils/coins';
 
 export type JolicoinRewardsHandler = (params: IAdBreakParams) => Promise<boolean>;
 export const createJolicoinRewardHandler = (
@@ -26,74 +16,34 @@ export const createJolicoinRewardHandler = (
     onUnlockFailed?: () => void;
   }
 ): JolicoinRewardsHandler => {
-  let unlockOptionsPromise: Promise<IUnlockOptionsEvent> | null = null;
-  let resolveUnlockOptions: ((value: IUnlockOptionsEvent) => void) | null = null;
-  let cachedUnlockOptions: IUnlockOptionsEvent | null = null;
+  const unlockOptionsHandler = createEventPromiseHandler<IUnlockOptionsEvent, typeof UnlockOptionsEventName>(
+    rewardsEmitter,
+    UnlockOptionsEventName
+  );
 
-  const createUnlockOptionsPromise = () => {
-    if (cachedUnlockOptions) {
-      unlockOptionsPromise = Promise.resolve(cachedUnlockOptions);
-      return;
-    }
-
-    unlockOptionsPromise = new Promise<IUnlockOptionsEvent>((resolve) => {
-      resolveUnlockOptions = resolve;
-    });
+  const handleUnlockFailed = () => {
+    onUnlockFailed?.();
   };
 
-  createUnlockOptionsPromise();
-
-  unlockOptionsEmitter.on(UnlockOptionsEventName, (options) => {
-    cachedUnlockOptions = options;
-    if (resolveUnlockOptions) {
-      resolveUnlockOptions(options);
-      resolveUnlockOptions = null;
-    }
+  const showUnlockWithJolicoinModal = createShowUnlockWithJolicoinModal('ADS-JOLI_COIN', {
+    confirmButtonText: 'Use Jolicoin',
+    cancelButtonText: 'No watch ads'
   });
 
-  return async (params: IAdBreakParams) => {
-    try {
-      if (!unlockOptionsPromise) {
-        createUnlockOptionsPromise();
-      }
-      const unlockOptions = await unlockOptionsPromise!;
-      if (!canUseJolicoin(unlockOptions?.options || [], unlockOptions?.userJoliCoin)) {
-        onUnlockFailed?.();
-        return false;
-      }
+  const initiateAndAwaitPayment = createInitiateAndAwaitPayment('ADS-JOLI_COIN', {
+    confirmButtonText: 'Pay and unlock',
+    cancelButtonText: 'No watch ads'
+  });
 
-      const unlockWithJolicoin = await httpClient.post<IJolicoinUnlockRes>('/api/joli-coin/unlock', {
-        data: {
-          // TODO: support drama
-          type: 'GAME_REWARD',
-          reqId: `${uuidv4()}-${context.mpType}-${Date.now()}`,
-          gameInfo: {
-            gameId: context.mpId
-          }
-        }
-      });
-      if (unlockWithJolicoin.code == 'SUCCESS') {
-        params.adBreakDone?.({
-          breakType: params.type,
-          breakName: 'name' in params ? params.name ?? '' : '',
-          breakFormat: 'reward',
-          breakStatus: 'viewed'
-        });
-        if ('adViewed' in params) {
-          params.adViewed?.();
-        }
-        onUnlockSuccess?.({
-          quantity: unlockWithJolicoin.data.quantity,
-          balance: unlockWithJolicoin.data.balance
-        });
-        return true;
-      }
-      onUnlockFailed?.();
-      return false;
-    } catch (e) {
-      console.error(`JolicoinRewardHandler error:`, e);
-      onUnlockFailed?.();
-      return false;
+  const jolicoinOnlyRewardHandler = createCommonJolicoinRewardHandler(httpClient, {
+    handlers: {
+      handleUnlockSuccess: onUnlockSuccess,
+      handleUnlockFailed,
+      unlockOptionsHandler,
+      initiateAndAwaitPayment,
+      showUnlockWithJolicoinModal
     }
-  };
+  });
+
+  return jolicoinOnlyRewardHandler;
 };

package/src/common/rewards/registers/utils/coins/index.ts

@@ -0,0 +1,186 @@
+import { IHttpClient } from '@/common/http';
+import { context } from '@/common/context';
+import { uuidv4 } from '@jolibox/common';
+import {
+  rewardsEmitter,
+  UnlockOptionsEventName,
+  IUnlockOptionsEvent,
+  InvokePaymentEventName,
+  PaymentResultEventName,
+  IPaymentEvent,
+  IUseModalResultEvent,
+  UseModalEventName,
+  UseModalResultEventName
+} from '@/common/rewards/reward-emitter';
+import { IAdBreakParams } from '@/common/ads';
+import { joliCoinIsEnough } from '../index';
+import { createEventPromiseHandler, EventPromiseHandler } from '../event-listener';
+import { IJoliCoin } from '@/common/rewards/type';
+
+type IPaymentResult = 'SUCCESS' | 'FAILED' | 'CANCEL';
+type IUseModalResult = 'CONFIRM' | 'CANCEL' | 'FAILED';
+
+interface IJolicoinUnlockRes {
+  code: 'SUCCESS' | 'BALANCE_NOT_ENOUGH' | 'EPISODE_LOCK_JUMP' | 'EPISODE_UNLOCK_ALREADY';
+  message: string;
+  data: {
+    transactionId: string;
+    quantity: number;
+    balance: number;
+  };
+}
+
+export const createInitiateAndAwaitPayment = (
+  type: 'JOLI_COIN' | 'ADS-JOLI_COIN',
+  buttons: {
+    confirmButtonText: string;
+    cancelButtonText: string;
+  }
+) => {
+  return async (params: { userJoliCoin: IJoliCoin; joliCoinQuantity: number }) => {
+    const paymentHandler = createEventPromiseHandler<IPaymentEvent, typeof PaymentResultEventName>(
+      rewardsEmitter,
+      PaymentResultEventName
+    );
+    rewardsEmitter.emit(InvokePaymentEventName, type, {
+      userJoliCoin: params.userJoliCoin,
+      joliCoinQuantity: params.joliCoinQuantity,
+      enableAutoDeduct: params.userJoliCoin.enableAutoDeduct,
+      confirmButtonText: buttons.confirmButtonText,
+      cancelButtonText: buttons.cancelButtonText
+    });
+
+    // Wait for payment result
+    const paymentResult = await paymentHandler.getFreshData();
+    return paymentResult.paymentResult;
+  };
+};
+
+export const createShowUnlockWithJolicoinModal = (
+  type: 'JOLI_COIN' | 'ADS-JOLI_COIN',
+  buttons: {
+    confirmButtonText: string;
+    cancelButtonText: string;
+  }
+) => {
+  return async (params: { enableAutoDeduct: boolean; userJoliCoin: IJoliCoin; joliCoinQuantity: number }) => {
+    const modalHandler = createEventPromiseHandler<IUseModalResultEvent, typeof UseModalResultEventName>(
+      rewardsEmitter,
+      UseModalResultEventName
+    );
+    rewardsEmitter.emit(UseModalEventName, type, {
+      enableAutoDeduct: params.enableAutoDeduct,
+      userJoliCoin: params.userJoliCoin,
+      joliCoinQuantity: params.joliCoinQuantity,
+      confirmButtonText: buttons.confirmButtonText,
+      cancelButtonText: buttons.cancelButtonText
+    });
+    const modalResult = await modalHandler.getFreshData();
+    return modalResult.useModalResult;
+  };
+};
+
+const checkIfCancel = (result: IPaymentResult | IUseModalResult) => {
+  if (result == 'CANCEL') {
+    throw new Error('CANCEL');
+  }
+};
+
+export const createCommonJolicoinRewardHandler = (
+  httpClient: IHttpClient,
+  {
+    handlers: {
+      handleUnlockSuccess,
+      handleUnlockFailed,
+      unlockOptionsHandler,
+      initiateAndAwaitPayment,
+      showUnlockWithJolicoinModal
+    }
+  }: {
+    handlers: {
+      handleUnlockSuccess?: (data: { quantity: number; balance: number }) => void;
+      handleUnlockFailed?: (params: IAdBreakParams) => void;
+      unlockOptionsHandler: EventPromiseHandler<IUnlockOptionsEvent, typeof UnlockOptionsEventName>;
+      initiateAndAwaitPayment: ReturnType<typeof createInitiateAndAwaitPayment>;
+      showUnlockWithJolicoinModal: ReturnType<typeof createShowUnlockWithJolicoinModal>;
+    };
+  }
+) => {
+  return async (params: IAdBreakParams) => {
+    try {
+      let shouldSkipConfirm = false;
+      const unlockOptions = await unlockOptionsHandler.getData();
+      const joliCoinQuantity =
+        unlockOptions?.options?.find((option) => option.type === 'JOLI_COIN')?.joliCoinChoices[0]
+          .joliCoinQuantity ?? 0;
+      if (!joliCoinIsEnough(unlockOptions?.options || [], unlockOptions?.userJoliCoin)) {
+        const paymentResult = await initiateAndAwaitPayment({
+          userJoliCoin: unlockOptions?.userJoliCoin,
+          joliCoinQuantity
+        });
+
+        checkIfCancel(paymentResult);
+
+        if (paymentResult !== 'SUCCESS') {
+          handleUnlockFailed?.(params);
+          return false;
+        }
+
+        shouldSkipConfirm = true;
+      }
+
+      const enableAutoDeduct = !!unlockOptions?.userJoliCoin?.enableAutoDeduct;
+
+      if (!shouldSkipConfirm) {
+        const shouldUnlock = await showUnlockWithJolicoinModal({
+          enableAutoDeduct,
+          userJoliCoin: unlockOptions?.userJoliCoin,
+          joliCoinQuantity
+        });
+
+        checkIfCancel(shouldUnlock);
+        if (shouldUnlock !== 'CONFIRM') {
+          handleUnlockFailed?.(params);
+          return false;
+        }
+      }
+
+      const unlockWithJolicoin = await httpClient.post<IJolicoinUnlockRes>('/api/joli-coin/unlock', {
+        data: {
+          // TODO: support drama
+          type: 'GAME_REWARD',
+          reqId: `${uuidv4()}-${context.mpType}-${Date.now()}`,
+          gameInfo: {
+            gameId: context.mpId
+          }
+        }
+      });
+      if (unlockWithJolicoin.code == 'SUCCESS') {
+        params.adBreakDone?.({
+          breakType: params.type,
+          breakName: 'name' in params ? params.name ?? '' : '',
+          breakFormat: 'reward',
+          breakStatus: 'viewed'
+        });
+        if ('adViewed' in params) {
+          params.adViewed?.();
+        }
+        handleUnlockSuccess?.({
+          quantity: unlockWithJolicoin.data.quantity,
+          balance: unlockWithJolicoin.data.balance
+        });
+        return true;
+      }
+      handleUnlockFailed?.(params);
+      return false;
+    } catch (e) {
+      console.info(`JolicoinRewardHandler error:`, e);
+      if (e instanceof Error && e.message == 'CANCEL') {
+        // Cancel should terminate the reward handler, invoke unlock failed
+        throw e;
+      }
+      handleUnlockFailed?.(params);
+      return false;
+    }
+  };
+};

package/src/common/rewards/registers/utils/event-listener.ts

@@ -0,0 +1,66 @@
+/**
+ * Creates an event promise handler for EventEmitter with tuple-based events
+ * @param emitter The event emitter
+ * @param eventName The event name to listen for
+ * @returns An object with methods to get and manage the event data
+ */
+export function createEventPromiseHandler<T, E extends string = string>(
+  // Type 'emitter.on' to accept any type of listener callback
+  emitter: { on: (eventName: E, listener: (...args: any[]) => void) => void },
+  eventName: E
+) {
+  let dataPromise: Promise<T> | null = null;
+  let resolveData: ((value: T) => void) | null = null;
+  let cachedData: T | null = null;
+
+  const createDataPromise = () => {
+    if (cachedData) {
+      dataPromise = Promise.resolve(cachedData);
+      return;
+    }
+
+    dataPromise = new Promise<T>((resolve) => {
+      resolveData = resolve;
+    });
+  };
+
+  createDataPromise();
+
+  // The listener receives variable arguments
+  emitter.on(eventName, (...args: any[]) => {
+    // Get the first argument as the data
+    const data = args[0] as T;
+    cachedData = data;
+    if (resolveData) {
+      resolveData(data);
+      resolveData = null;
+    }
+  });
+
+  return {
+    getData: () => {
+      if (!dataPromise) {
+        createDataPromise();
+      }
+      return dataPromise as Promise<T>;
+    },
+
+    getCachedData: () => cachedData,
+
+    clearCache: () => {
+      cachedData = null;
+      dataPromise = null;
+    },
+
+    getFreshData: () => {
+      cachedData = null;
+      dataPromise = null;
+      createDataPromise();
+      return dataPromise!;
+    }
+  };
+}
+
+export type EventPromiseHandler<T, E extends string = string> = ReturnType<
+  typeof createEventPromiseHandler<T, E>
+>;

package/src/common/rewards/registers/utils/index.ts

@@ -9,3 +9,11 @@ export const canUseJolicoin = (unlockOptions: IUnlockOption[], joliCoin?: IJoliC
       )
   );
 };
+
+export const joliCoinIsEnough = (unlockOptions: IUnlockOption[], joliCoin?: IJoliCoin) => {
+  return unlockOptions.some(
+    (option) =>
+      option.type === 'JOLI_COIN' &&
+      option.joliCoinChoices.some((choice) => choice.joliCoinQuantity <= (joliCoin?.balance ?? 0))
+  );
+};