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

package/src/native/rewards/index.ts

@@ -0,0 +1,138 @@
+/**
+ * rewards event handlers
+ */
+
+import {
+  rewardsEmitter,
+  UseModalEventName,
+  IUseModalEvent,
+  PaymentResultEventName,
+  UseModalResultEventName,
+  InvokePaymentEventName,
+  IInvokePaymentEvent,
+  IPaymentChoice
+} from '@/common/rewards/reward-emitter';
+import { createConfirmJolicoinModal, createPaymentJolicoinModal } from '@jolibox/ui';
+import { innerFetch as fetch } from '../network';
+import { StandardResponse } from '@jolibox/types';
+import { context } from '@/common/context';
+import { login } from '../api/login';
+
+/**
+ * confirm jolicoin modal
+ */
+rewardsEmitter.on(UseModalEventName, (type: 'JOLI_COIN' | 'ADS-JOLI_COIN', params: IUseModalEvent) => {
+  if (type === 'ADS-JOLI_COIN') {
+    //TODO
+    console.log('use modal show by frequency');
+  }
+  const modal = createConfirmJolicoinModal({
+    data: {
+      enableAutoDeduct: params.enableAutoDeduct,
+      userJolicoin: params.userJoliCoin,
+      joliCoinQuantity: params.joliCoinQuantity
+    },
+    buttons: {
+      confirm: {
+        text: params.confirmButtonText,
+        onPress: () => {
+          rewardsEmitter.emit(UseModalResultEventName, { useModalResult: 'CONFIRM' });
+          modal.destroy();
+        }
+      },
+      cancel: {
+        text: params.cancelButtonText,
+        onPress: ({ type }) => {
+          rewardsEmitter.emit(UseModalResultEventName, {
+            useModalResult: (type ?? '') === 'CANCEL' ? 'CANCEL' : 'FAILED'
+          });
+          modal.destroy();
+        }
+      }
+    }
+  });
+});
+
+/**
+ * payment jolicoin modal
+ */
+rewardsEmitter.on(
+  InvokePaymentEventName,
+  async (type: 'JOLI_COIN' | 'ADS-JOLI_COIN', params: IInvokePaymentEvent) => {
+    try {
+      // handle showup frequecy
+      if (type === 'ADS-JOLI_COIN') {
+        //
+        console.log('show by frequency');
+      }
+
+      const balenceDetails = await getBalenceDetails();
+      if (!balenceDetails) {
+        rewardsEmitter.emit(PaymentResultEventName, { paymentResult: 'FAILED' });
+        return;
+      }
+      const modal = createPaymentJolicoinModal({
+        data: {
+          userJolicoin: params.userJoliCoin,
+          joliCoinQuantity: params.joliCoinQuantity,
+          paymentChoices: balenceDetails.paymentChoices,
+          enableAutoDeduct: balenceDetails.enableAutoDeduct
+        },
+        buttons: {
+          confirm: {
+            text: params.confirmButtonText,
+            onPress: async (productId: string) => {
+              // TODO: native payment
+              // await invokeNativePayment(productId);
+              if (!context.hostUserInfo?.isLogin) {
+                const { data } = await login();
+                if (!data?.isLogin) {
+                  console.log('login failed');
+                  return;
+                }
+              }
+              console.log('invokeNativePayment', productId);
+              rewardsEmitter.emit(PaymentResultEventName, { paymentResult: 'SUCCESS' });
+              modal.destroy();
+            }
+          },
+          cancel: {
+            text: params.cancelButtonText,
+            onPress: ({ type }) => {
+              rewardsEmitter.emit(PaymentResultEventName, {
+                paymentResult: (type ?? '') === 'CANCEL' ? 'CANCEL' : 'FAILED'
+              });
+              modal.destroy();
+            }
+          }
+        }
+      });
+    } catch (error) {
+      console.info('payment failed', error);
+      rewardsEmitter.emit(PaymentResultEventName, { paymentResult: 'FAILED' });
+    }
+  }
+);
+
+const getBalenceDetails = async (): Promise<
+  | {
+      balance: number;
+      enableAutoDeduct: boolean;
+      paymentChoices: IPaymentChoice[];
+    }
+  | undefined
+> => {
+  const { response } = await fetch<
+    StandardResponse<{
+      balance: number;
+      enableAutoDeduct: boolean;
+      paymentChoices: IPaymentChoice[];
+    }>
+  >('/api/joli-coin/balance-detail', {
+    method: 'GET',
+    appendHostCookie: true,
+    responseType: 'json'
+  });
+
+  return response.data?.data;
+};

package/src/native/ui/modal-iframe.ts

@@ -0,0 +1,271 @@
+import { invokeNative } from '@jolibox/native-bridge';
+import { context } from '@/common/context';
+import { hostEmitter } from '@jolibox/common';
+
+interface IframeModalOptions {
+  url: string;
+  height?: string; // default '50%'
+  showCloseButton?: boolean; // default true
+  enableDragClose?: boolean; // default true
+  useAnimation?: boolean; // default true
+  onClose?: () => void;
+  onLoad?: () => void;
+}
+
+const DEFAULT_OPTIONS: Partial<IframeModalOptions> = {
+  height: '50%',
+  showCloseButton: true,
+  enableDragClose: true,
+  useAnimation: true
+};
+
+let modalOverlay: HTMLElement | null = null;
+let modalContainer: HTMLElement | null = null;
+let iframe: HTMLIFrameElement | null = null;
+/**
+ * create a half-screen iframe modal
+ */
+export function createIframeModal(options: IframeModalOptions): { close: () => void } {
+  const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+  const { url, height, showCloseButton, enableDragClose, useAnimation, onClose, onLoad } = mergedOptions;
+
+  let startY = 0;
+  let currentY = 0;
+  let isModalVisible = false;
+
+  const getAnimationStyles = () => {
+    if (useAnimation) {
+      return {
+        overlayTransition: 'opacity 0.3s ease',
+        containerTransition: 'transform 0.3s ease',
+        iframeTransition: 'opacity 0.3s ease'
+      };
+    } else {
+      return {
+        overlayTransition: 'none',
+        containerTransition: 'none',
+        iframeTransition: 'none'
+      };
+    }
+  };
+
+  // 获取动画延迟时间
+  const getAnimationDelay = () => (useAnimation ? 300 : 0);
+
+  // create modal dom
+  function createModalDOM() {
+    const { overlayTransition, containerTransition, iframeTransition } = getAnimationStyles();
+
+    modalOverlay = document.createElement('div');
+    modalOverlay.id = 'jolibox-modal-overlay';
+    modalOverlay.style.cssText = `position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:1000; display:flex; justify-content:center; align-items:flex-end; transition:${overlayTransition}; opacity:0; visibility:hidden;`;
+
+    modalContainer = document.createElement('div');
+    modalContainer.id = 'jolibox-modal-container';
+    modalContainer.style.cssText = `width:100%; height:${height}; background:white; border-radius:12px 12px 0 0; overflow:hidden; box-shadow:0 -2px 10px rgba(0,0,0,0.2); transform:translateY(100%); transition:${containerTransition};`;
+
+    const loadingIndicator = document.createElement('div');
+    loadingIndicator.id = 'jolibox-modal-loading';
+    loadingIndicator.style.cssText =
+      'position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:40px; height:40px; border:4px solid #f3f3f3; border-top:4px solid #3498db; border-radius:50%; animation:spin 1s linear infinite;';
+
+    const styleElement = document.createElement('style');
+    styleElement.textContent =
+      '@keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }';
+    document.head.appendChild(styleElement);
+
+    // safe area adapter
+    const safeAreaDiv = document.createElement('div');
+    safeAreaDiv.style.cssText =
+      'width:100%; height:100%; display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom, 0); position:relative;';
+
+    // create iframe
+    iframe = document.createElement('iframe');
+    iframe.style.cssText = `width:100%; flex:1; border:none; opacity:0; transition:${iframeTransition};`;
+    iframe.src = url;
+
+    // iframe loaded event
+    iframe.onload = () => {
+      if (loadingIndicator.parentNode) {
+        loadingIndicator.parentNode.removeChild(loadingIndicator);
+      }
+
+      // 显示iframe内容
+      iframe!.style.opacity = '1';
+
+      // 显示modal
+      showModal();
+
+      // 触发加载完成回调
+      onLoad?.();
+
+      // 发送全局事件
+      hostEmitter.emit('onModalIframeLoaded', { url });
+    };
+
+    // 组装DOM
+    safeAreaDiv.appendChild(iframe);
+    safeAreaDiv.appendChild(loadingIndicator);
+    modalContainer.appendChild(safeAreaDiv);
+
+    // 添加关闭按钮
+    if (showCloseButton) {
+      const closeBtn = document.createElement('div');
+      closeBtn.style.cssText =
+        'position:absolute; top:10px; right:10px; width:30px; height:30px; background:rgba(0,0,0,0.1); border-radius:15px; display:flex; justify-content:center; align-items:center; cursor:pointer; z-index:10;';
+      closeBtn.innerHTML = '✕';
+      closeBtn.onclick = closeModal;
+      modalContainer.appendChild(closeBtn);
+    }
+
+    modalOverlay.appendChild(modalContainer);
+    document.body.appendChild(modalOverlay);
+
+    // 点击遮罩关闭
+    modalOverlay.addEventListener('click', function (e) {
+      if (e.target === modalOverlay) closeModal();
+    });
+
+    if (enableDragClose) {
+      addDragSupport();
+    }
+  }
+
+  // show modal
+  function showModal() {
+    if (!modalOverlay || !modalContainer || isModalVisible) return;
+
+    modalOverlay.style.visibility = 'visible';
+
+    if (useAnimation) {
+      requestAnimationFrame(() => {
+        if (modalOverlay) modalOverlay.style.opacity = '1';
+        if (modalContainer) modalContainer.style.transform = 'translateY(0)';
+        isModalVisible = true;
+      });
+    } else {
+      if (modalOverlay) modalOverlay.style.opacity = '1';
+      if (modalContainer) modalContainer.style.transform = 'translateY(0)';
+      isModalVisible = true;
+    }
+
+    invokeNative('updateContainerConfigSync', {
+      displayCapsuleButton: false,
+      webviewId: context.webviewId
+    });
+  }
+
+  function addDragSupport() {
+    if (!modalContainer) return;
+
+    const handleTouchStart = (e: TouchEvent) => {
+      startY = e.touches[0].clientY;
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!isModalVisible) return;
+
+      currentY = e.touches[0].clientY;
+      const deltaY = currentY - startY;
+
+      if (deltaY > 0) {
+        if (modalContainer) {
+          // 拖动时始终不使用过渡效果
+          modalContainer.style.transition = 'none';
+          modalContainer.style.transform = `translateY(${deltaY}px)`;
+        }
+        e.preventDefault();
+      }
+    };
+
+    const handleTouchEnd = () => {
+      if (!isModalVisible || !modalContainer) return;
+
+      modalContainer.style.transition = useAnimation ? 'transform 0.3s ease' : 'none';
+
+      if (currentY - startY > 80) {
+        closeModal();
+      } else {
+        modalContainer.style.transform = 'translateY(0)';
+      }
+    };
+
+    modalContainer.addEventListener('touchstart', handleTouchStart);
+    modalContainer.addEventListener('touchmove', handleTouchMove);
+    modalContainer.addEventListener('touchend', handleTouchEnd);
+  }
+
+  // close
+  function closeModal() {
+    if (!modalOverlay || !modalContainer || !isModalVisible) return;
+
+    if (useAnimation) {
+      modalContainer.style.transform = 'translateY(100%)';
+      modalOverlay.style.opacity = '0';
+    } else {
+      modalOverlay.style.visibility = 'hidden';
+    }
+
+    isModalVisible = false;
+
+    // 恢复原生UI
+    invokeNative('updateContainerConfigSync', {
+      displayCapsuleButton: true,
+      webviewId: context.webviewId
+    });
+
+    setTimeout(() => {
+      if (modalOverlay) {
+        modalOverlay.remove();
+        modalOverlay = null;
+        modalContainer = null;
+        iframe = null;
+
+        // 触发关闭回调
+        onClose?.();
+
+        // 发送全局事件
+        hostEmitter.emit('onModalIframeClosed', { url });
+      }
+    }, getAnimationDelay());
+  }
+
+  createModalDOM();
+
+  return { close: closeModal };
+}
+
+declare global {
+  interface Window {
+    joliboxUI?: {
+      createIframeModal: (options: IframeModalOptions) => { close: () => void };
+    };
+  }
+}
+
+export function registerIframeModalToGlobal() {
+  window.joliboxUI = {
+    ...window.joliboxUI,
+    createIframeModal
+  };
+
+  return () => {
+    window.joliboxUI = undefined;
+    if (modalOverlay && modalOverlay.parentNode) {
+      modalOverlay.parentNode.removeChild(modalOverlay);
+    }
+
+    if (modalContainer && modalContainer.parentNode) {
+      modalContainer.parentNode.removeChild(modalContainer);
+    }
+
+    if (iframe && iframe.parentNode) {
+      iframe.parentNode.removeChild(iframe);
+    }
+
+    // 清空引用
+    modalOverlay = null;
+    modalContainer = null;
+    iframe = null;
+  };
+}