@alipay/ams-checkout 1.11.0 → 1.12.0

package/esm/config/request.js

@@ -12,8 +12,8 @@ var _queryParse = queryParse(),
   groupId = _queryParse.groupId,
   host = _queryParse.requestHost;
 export var requestHost = {
-  local: 'http://imgs-1529.gz00b.dev.alipay.net/mgw.htm',
-  dev: host || 'http://imgs-1529.gz00b.dev.alipay.net/mgw.htm',
+  local: 'http://imgs-8452.sggz00b.dev.alipay.net/mgw.htm',
+  dev: host || 'http://imgs-8452.sggz00b.dev.alipay.net/mgw.htm',
   sit: host || 'http://imgs-9.sggz00a.test.alipay.net/mgw.htm',
   pre: 'https://imgs-sea-pre.alipay.com/mgw.htm',
   prod: 'https://imgs-sea-global.alipay.com/mgw.htm',
@@ -22,7 +22,7 @@ export var requestHost = {
 export var clientId = '5J5Y8X4E2Y25GR00690';
 export var tntInstId = 'ALIPW3SG';
 export var appId = 'ANTOM_PAYMENT_WEB';
-export var sofaId = groupId || 'GROUP_20231218150235';
+export var sofaId = groupId || 'GROUP_20240304204929';
 export var hostSignMap = function hostSignMap(hostSign, env) {
   var map = {
     SG: 'https://imgs-sea-global.alipay.com/mgw.htm',

package/esm/core/bus/index.d.ts

@@ -1,4 +1,4 @@
-import type { Logger } from "../../util/logger";
+import type { Logger } from '../../util/logger';
 /**
  * Bus 埋点内容定义
  */

package/esm/core/bus/interface.d.ts

@@ -4,7 +4,11 @@ export declare enum PaymentActionEnum {
 export declare enum ApplePayActionEnum {
     canMakePayments = "plugin_CARD_APPLE_PAY_available",
     createComponent = "plugin_CARD_APPLE_PAY_createComponent",
-    destoryComponent = "plugin_CARD_APPLE_PAY_destoryComponent"
+    destroyComponent = "plugin_CARD_APPLE_PAY_destroyComponent"
+}
+export declare enum PaypalActionEnum {
+    mountComponent = "plugin_Paypal_mountComponent",
+    destroyComponent = "plugin_Paypal_destroyComponent"
 }
 export declare enum SDKCallbackActionEnum {
     onEventCallback = "onEventCallback"

package/esm/core/bus/interface.js

@@ -5,9 +5,14 @@ export var PaymentActionEnum = /*#__PURE__*/function (PaymentActionEnum) {
 export var ApplePayActionEnum = /*#__PURE__*/function (ApplePayActionEnum) {
   ApplePayActionEnum["canMakePayments"] = "plugin_CARD_APPLE_PAY_available";
   ApplePayActionEnum["createComponent"] = "plugin_CARD_APPLE_PAY_createComponent";
-  ApplePayActionEnum["destoryComponent"] = "plugin_CARD_APPLE_PAY_destoryComponent";
+  ApplePayActionEnum["destroyComponent"] = "plugin_CARD_APPLE_PAY_destroyComponent";
   return ApplePayActionEnum;
 }({});
+export var PaypalActionEnum = /*#__PURE__*/function (PaypalActionEnum) {
+  PaypalActionEnum["mountComponent"] = "plugin_Paypal_mountComponent";
+  PaypalActionEnum["destroyComponent"] = "plugin_Paypal_destroyComponent";
+  return PaypalActionEnum;
+}({});
 export var SDKCallbackActionEnum = /*#__PURE__*/function (SDKCallbackActionEnum) {
   SDKCallbackActionEnum["onEventCallback"] = "onEventCallback";
   return SDKCallbackActionEnum;

package/esm/core/component/index.d.ts

@@ -7,6 +7,7 @@ export declare class AMSComponent extends CoreInstance {
     _componentApp: ComponentApp;
     channelType: componentSignEnum[];
     productSceneVersion: string;
+    timer: any;
     constructor(options: IoptionsParams);
     private parameterInitAndCheck;
     private pluginAppendIframe;

package/esm/core/component/index.js

@@ -29,18 +29,19 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  */
 import { v4 as uuid } from 'uuid';
 import { COMPONENTPLUGINID, ERRORMESSAGE, EVENT } from "../../constant";
+import { ApplePayBusSubscriber } from "../../plugin/applepay";
 import ComponentApp from "../../plugin/component";
+import { ExtendPlugin } from "../../plugin/const";
+import { PaypalBusSubscriber } from "../../plugin/paypal";
 import { componentSignEnum, environmentEnum, modeEnum, networkModeEnum, productSceneEnum, renderDisplayTypeEnum } from "../../types";
 import { getOrSetStorageId, isPC, parseBase64ToString } from "../../util";
 import { createIframeNode, createPreloadIframeNode } from "../../util/createIframeNode";
 import { getSecurityConfigStorageKey } from "../../util/security";
-import CoreInstance from "../instance/index";
 import { BusManager, BusMessage } from "../bus";
 import { SDKCallbackBusSubscriber } from "../bus/ability/callback";
-import { ApplePayBusSubscriber } from "../../plugin/applepay";
 import { SecurityBusSubscriber } from "../bus/ability/security";
 import { TrackerBusSubscriber } from "../bus/ability/tracker";
-import { ExtendPlugin } from "../../plugin/const";
+import CoreInstance from "../instance/index";
 export var getComponentSign = function getComponentSign(params) {
   var _params$paymentSessio = params.paymentSessionConfig,
     _params$paymentSessio2 = _params$paymentSessio === void 0 ? {} : _params$paymentSessio,
@@ -74,7 +75,7 @@ var handleSessionData = function handleSessionData(originSessionData) {
     parseData = _parseSessionData2[0],
     sessionData = _parseSessionData2[1];
   resetEasyPaySceneVersion(parseData);
-  return [parseData, sessionData];
+  return [parseData !== null && parseData !== void 0 ? parseData : {}, sessionData];
 };
 var handleParams = function handleParams(params) {
   var _params = Object.assign({
@@ -116,6 +117,7 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
     _defineProperty(_assertThisInitialized(_this), "_componentApp", void 0);
     _defineProperty(_assertThisInitialized(_this), "channelType", void 0);
     _defineProperty(_assertThisInitialized(_this), "productSceneVersion", void 0);
+    _defineProperty(_assertThisInitialized(_this), "timer", void 0);
     var ComponentPlugin = new ComponentApp();
     ComponentPlugin.setRender(createIframeNode);
     ComponentPlugin.setPreloadRender(createPreloadIframeNode);
@@ -229,6 +231,7 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
       BusManager.subscribe(new TrackerBusSubscriber(this.logger));
       // subscribe plugin
       BusManager.subscribe(new ApplePayBusSubscriber(this.logger));
+      BusManager.subscribe(new PaypalBusSubscriber(this.logger));
 
       // register bus plugin
       ExtendPlugin.forEach(function (item) {
@@ -264,7 +267,7 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
      *  only the channel described in the document will be called, and it will be returned as available by default
      * @param paymentMethod  - described in the document
      * @param subPaymentMethod - described in the document
-     * @returns 
+     * @returns
      */
   }, {
     key: "canMakePayments",
@@ -322,6 +325,8 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
         _this4._eventCenter.emit(EVENT.error.name, error);
         return Promise.reject(error);
       }).then(function (appendParams) {
+        var iframeNodesParams = appendParams.iframeNodesParams;
+        _this4.logger.setTrackId(iframeNodesParams === null || iframeNodesParams === void 0 ? void 0 : iframeNodesParams.sessionData);
         return _this4.createComponentProcess(appendParams);
       });
     }
@@ -361,7 +366,7 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
           channelType: channelType
         });
       }
-      setTimeout(function () {
+      this.timer = setTimeout(function () {
         _this5.clearPreloadIframe(true);
       }, MAX_CLEAR_TIME);
     }
@@ -369,6 +374,7 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
     key: "clearPreloadIframe",
     value: function clearPreloadIframe() {
       var isTimeOut = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      !isTimeOut && clearTimeout(this.timer);
       if (Array.isArray(this.channelType)) {
         for (var i = 0; i < this.channelType.length; i++) {
           var iframe = document.getElementById("ams-checkout-component-".concat(this.channelType[i], "-").concat(this.productSceneVersion));
@@ -410,6 +416,8 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
         _this6._eventCenter.emit(EVENT.error.name, error);
         return Promise.reject(error);
       }).then(function (appendParams) {
+        var iframeNodesParams = appendParams.iframeNodesParams;
+        _this6.logger.setTrackId(iframeNodesParams === null || iframeNodesParams === void 0 ? void 0 : iframeNodesParams.sessionData);
         return _this6.mountComponentProcess(appendParams);
       });
     }

package/esm/core/instance/index.d.ts

@@ -1,8 +1,15 @@
+/**
+ * Copyright (c) 2022 International Business Group, Ant Group. All rights reserved.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), the rights to use, copy, modify, merge, and/or distribute the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ * 1. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE; and
+ * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
+ */
+import { ComponentActionNamesType } from 'src/plugin/type';
 import type { AMSCheckoutOptions, IAppendParams, InitSecurityConfig, IoptionsParams } from '../../types/index';
 import { EventCenter } from '../../util/index';
 import { Logger } from '../../util/logger';
 import { Security } from '../../util/security';
-import { ComponentActionNamesType } from 'src/plugin/type';
 export default class AMSSDK {
     options: AMSCheckoutOptions;
     originOptions: IoptionsParams;

package/esm/core/instance/index.js

@@ -16,6 +16,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { v4 as uuid } from 'uuid';
 import { sdkVersion } from "../../config/index";
 import { ERRORMESSAGE, EVENT } from "../../constant";
@@ -24,8 +25,8 @@ import { environmentEnum, modeEnum, networkModeEnum, osTypeEnum, productSceneEnu
 import { checkTimeElapsed, device, EventCenter, getOrSetStorageId, getType, queryParse, safeJson } from "../../util/index";
 import CallApp from "../../util/intl-callapp/es/main";
 import { LogConfig, Logger } from "../../util/logger";
-import { compareVersion } from "../../util/versionCompare";
 import { getSecurityConfigStorageKey, getSecurityHost, getSecurityScene, Security, SecurityRegionEnum } from "../../util/security";
+import { compareVersion } from "../../util/versionCompare";
 import { BusManager, BusMessage } from "../bus";
 var AMSSDK = /*#__PURE__*/function () {
   function AMSSDK(options) {
@@ -56,23 +57,26 @@ var AMSSDK = /*#__PURE__*/function () {
     this._storageId = _storageId;
 
     // TODO Consumption data analysis control parameters
-    this.logger = new Logger(LogConfig, (options === null || options === void 0 ? void 0 : options.environment) !== environmentEnum.prod);
+    this.logger = new Logger(LogConfig, ![environmentEnum.prod, environmentEnum.sandbox].includes(options === null || options === void 0 ? void 0 : options.environment));
     this.logger.setMedta({
       instanceId: this._instanceId
     });
     this.logger.initTracker();
+    this.logger.setComponentStartTime(Date.now());
+    this.logger.setTrackId(this._instanceId);
     this.logger.logInfo({
       title: 'NEW_AMSSDK_BY_MECHANT',
-      msg: "".concat(options === null || options === void 0 ? void 0 : options.environment, "_").concat(options === null || options === void 0 ? void 0 : options.locale, "}")
+      msg: "".concat(options === null || options === void 0 ? void 0 : options.environment, "_").concat(options === null || options === void 0 ? void 0 : options.locale)
     }).send();
-    this.preInitSecurity();
+    this.preInitSecurity(options);
   }
   _createClass(AMSSDK, [{
     key: "preInitSecurity",
-    value: function preInitSecurity() {
+    value: function preInitSecurity(options) {
       var _this$options;
       var antomSDKConfigKey = 'antomSDKConfigKey';
       var config = safeJson(getOrSetStorageId(antomSDKConfigKey), {});
+      if (![environmentEnum.prod, environmentEnum.sandbox].includes(options === null || options === void 0 ? void 0 : options.environment)) return;
       if (checkTimeElapsed()) {
         antomConfig({
           env: this.options.env.environment
@@ -109,11 +113,13 @@ var AMSSDK = /*#__PURE__*/function () {
       this.logger.logInfo({
         title: 'sdk_event_apiOnDestroy'
       }).send();
-      var actionName = (_this$getBusActionNam = this.getBusActionNames()) === null || _this$getBusActionNam === void 0 ? void 0 : _this$getBusActionNam.destoryComponent;
+      var actionName = (_this$getBusActionNam = this.getBusActionNames()) === null || _this$getBusActionNam === void 0 ? void 0 : _this$getBusActionNam.destroyComponent;
       if (actionName && BusManager.isSubscribed(actionName)) {
+        var _this$_appendParams;
         // 执行出错了，在通用拦截器返回
         BusManager.publish(new BusMessage(actionName, JSON.stringify({
-          options: this.originOptions
+          options: this.originOptions,
+          selector: (_this$_appendParams = this._appendParams) === null || _this$_appendParams === void 0 || (_this$_appendParams = _this$_appendParams.iframeNodesParams) === null || _this$_appendParams === void 0 ? void 0 : _this$_appendParams.selector
         })));
       }
       var _iterator = _createForOfIteratorHelper(this.plugins.values()),
@@ -315,14 +321,14 @@ var AMSSDK = /*#__PURE__*/function () {
     key: "_registerPlugin",
     value: function _registerPlugin(pluginId, plugin) {
       this.plugins.set(pluginId, plugin);
-      try {
-        if (plugin.applyPlugin) {
+      if (plugin !== null && plugin !== void 0 && plugin.applyPlugin) {
+        try {
           plugin.applyPlugin(this);
+        } catch (error) {
+          this.plugins.delete(pluginId);
+          if (getType(error) === 'error') throw error;
+          throw new Error("Failed to register plug-in\uFF1A".concat(pluginId, " Exception in the apply function of the plug-in"));
         }
-      } catch (error) {
-        this.plugins.delete(pluginId);
-        if (getType(error) === 'error') throw error;
-        throw new Error("Failed to register plug-in\uFF1A".concat(pluginId, " Exception in the apply function of the plug-in"));
       }
     }
     /**
@@ -337,6 +343,7 @@ var AMSSDK = /*#__PURE__*/function () {
       }
       return this.plugins.get(pluginId);
     }
+
     /**
      * @description Execute to open app or jump link
      */

package/esm/plugin/applepay/component.d.ts

@@ -14,7 +14,7 @@ export declare enum ApplePayComponentEvent {
     sdk_event_appleOnvalidatemerchant = "sdk_event_appleOnvalidatemerchant",
     sdk_event_appleSubmitToken = "sdk_event_appleSubmitToken",
     sdk_event_applePaymentResult = "sdk_event_applePaymentResult",
-    sdk_event_appleDestoryComponent = "sdk_event_appleDestoryComponent"
+    sdk_event_appleDestroyComponent = "sdk_event_appleDestroyComponent"
 }
 /**
  * Apple pay Component

package/esm/plugin/applepay/component.js

@@ -27,7 +27,7 @@ export var ApplePayComponentEvent = /*#__PURE__*/function (ApplePayComponentEven
   ApplePayComponentEvent["sdk_event_appleOnvalidatemerchant"] = "sdk_event_appleOnvalidatemerchant";
   ApplePayComponentEvent["sdk_event_appleSubmitToken"] = "sdk_event_appleSubmitToken";
   ApplePayComponentEvent["sdk_event_applePaymentResult"] = "sdk_event_applePaymentResult";
-  ApplePayComponentEvent["sdk_event_appleDestoryComponent"] = "sdk_event_appleDestoryComponent";
+  ApplePayComponentEvent["sdk_event_appleDestroyComponent"] = "sdk_event_appleDestroyComponent";
   return ApplePayComponentEvent;
 }({});
 
@@ -55,8 +55,8 @@ var ApplePayComponent = /*#__PURE__*/function () {
 
   /**
    * Is Apple Pay Enabled
-   * @param subTypeEnum 
-   * @returns 
+   * @param subTypeEnum
+   * @returns
    */
   _createClass(ApplePayComponent, [{
     key: "canMakePayments",
@@ -66,8 +66,8 @@ var ApplePayComponent = /*#__PURE__*/function () {
 
     /**
      * Is Apple Pay Enabled
-     * @param subTypeEnum 
-     * @returns 
+     * @param subTypeEnum
+     * @returns
      */
   }, {
     key: "isAppPayEnabled",

package/esm/plugin/applepay/index.d.ts

@@ -12,6 +12,6 @@ export declare class ApplePayBusSubscriber extends BusSubscriber {
     protected onOptionalInit(context: BusContext, message: BusMessage): void;
     protected onCanMakePayments(context: BusContext, message: BusMessage): void;
     protected onCreateComponent(context: BusContext, message: BusMessage): void;
-    protected onDestoryComponent(context: BusContext, message: BusMessage): void;
+    protected onDestroyComponent(context: BusContext, message: BusMessage): void;
     onMessage(context: BusContext, message: BusMessage): void;
 }

package/esm/plugin/applepay/index.js

@@ -80,13 +80,13 @@ export var ApplePayBusSubscriber = /*#__PURE__*/function (_BusSubscriber) {
       this.applePay.submitPay(appendParams);
     }
   }, {
-    key: "onDestoryComponent",
-    value: function onDestoryComponent(context, message) {
+    key: "onDestroyComponent",
+    value: function onDestroyComponent(context, message) {
       this.applePay = null;
-      console.log('onDestoryComponent', context, message);
+      console.log('onDestroyComponent', context, message);
       this.logger.logInfo({
         name: 'APPLE_PAY',
-        title: ApplePayComponentEvent.sdk_event_appleDestoryComponent
+        title: ApplePayComponentEvent.sdk_event_appleDestroyComponent
       }, {
         biz: 'sdk',
         type: 'funnel'
@@ -105,8 +105,8 @@ export var ApplePayBusSubscriber = /*#__PURE__*/function (_BusSubscriber) {
         case ApplePayActionEnum.createComponent:
           this.onCreateComponent(context, message);
           break;
-        case ApplePayActionEnum.destoryComponent:
-          this.onDestoryComponent(context, message);
+        case ApplePayActionEnum.destroyComponent:
+          this.onDestroyComponent(context, message);
           break;
         default:
           console.log("Unknown action: " + message.getAction());

package/esm/plugin/component/component.popup.style.js

@@ -8,7 +8,7 @@
 import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, LOADING_ID, MOCKUP_ID } from "../../constant";
 import { platformEnum } from "../../types";
 import { addSetFontSizeEvent, amsSetSize, getDesignFontSize } from "../../util";
-var componentCss = ".ams-component-container-mobile {\n  width: 100%;\n  height: 1px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n  animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n  font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n  width: 100%;\n  height: 0px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  background-color: transparent;\n  border-radius: 12px 12px 0 0;\n  animation: ams-component-container-slide-out 0.26s ease-in forwards;\n  overflow: hidden;\n}\n\n.ams-component-section-mobile {\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n  font-size: 0;\n  height: 100%;\n}\n\n.ams-component-container-desktop {\n  display: block;\n  width: 672px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 12px;\n  overflow: hidden;\n  transform-origin: 50% 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-container-desktop-animation{\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    -webkit-transform: translate(-50%, -50%) scale(1);\n    opacity: 1\n  }\n  \n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.4);\n    -webkit-transform: translate(-50%, -50%) scale(0.4);\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n\n  80% {\n    opacity: 1\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.ams-component-container-hidden-desktop {\n  display: block;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n  width: 0.8em;\n  height:0.8em;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: #fcfcfc;\n  border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n}\n.asm-component-close-block-btn-desktop {\n  width: 11px;\n  height: 11px;\n  object-fit: fill;\n  position: absolute;\n  right: 18.7px;\n  top: 26.7px;\n}\n.asm-component-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n.asm-component-close-block-mobile {\n  position: absolute;\n  width: 0.4em;\n  height: 0.4em;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  z-index: 1009;\n}\n\n.asm-component-close-block-btn-mobile {\n  width: 0.11em;\n  height: 0.11em;\n  object-fit: fill;\n  position: absolute;\n  right: 0.147em;\n  top: 0.167em;\n}\n\n\n.ams-component-container-opacity{\n  opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  content: \"\";\n  z-index: 1010;\n  background-color: rgba(0, 0, 0, 0.35);\n  border-radius: 12px 12px 0 0;\n}\n\n#ams-component-retention {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: 50%;\n  height: auto;\n  display: none;\n  z-index: 1009;\n}\n\n.ams-component-retention-show {\n  display: flex !important;\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n  display: flex !important;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n  width: 294px;\n  border-radius: 12px;\n  padding: 24px 0;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n  width: 544px;\n  border-radius: 12px;\n  padding: 32px;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n  .ams-component-retention-mobile {\n      transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n.ams-component-retention-title-mobile {\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n  text-align: left;\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 8px;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n  text-align: left;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  margin-top: 24px;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n  width: 100%;\n  margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n  background: #0079FF;\n  border-radius: 100px;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 159px;\n}\n\n#ams-component-retention-leave {\n  border-radius: 100px;\n  border: 1px solid #0079FF;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  margin-top: 12px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  margin-right: 16px;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 144px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n  0% {\n      opacity: 1;\n  }\n\n  100% {\n      opacity: 0;\n  }\n}\n");
+var componentCss = ".ams-component-container-mobile {\n  width: 100%;\n  height: 1px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n  animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n  font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n  width: 100%;\n  height: 0px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  background-color: transparent;\n  border-radius: 12px 12px 0 0;\n  animation: ams-component-container-slide-out 0.26s ease-in forwards;\n  overflow: hidden;\n}\n\n.ams-component-section-mobile {\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n  font-size: 0;\n  height: 100%;\n}\n\n.ams-component-container-desktop {\n  display: block;\n  width: 672px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 12px;\n  overflow: hidden;\n  transform-origin: 50% 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-container-desktop-animation{\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    -webkit-transform: translate(-50%, -50%) scale(1);\n    opacity: 1\n  }\n  \n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.4);\n    -webkit-transform: translate(-50%, -50%) scale(0.4);\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.ams-component-container-hidden-desktop {\n  display: block;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n  width: 0.8em;\n  height:0.8em;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: #fcfcfc;\n  border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n}\n.asm-component-close-block-btn-desktop {\n  width: 11px;\n  height: 11px;\n  object-fit: fill;\n  position: absolute;\n  right: 18.7px;\n  top: 26.7px;\n}\n.asm-component-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n.asm-component-close-block-mobile {\n  position: absolute;\n  width: 0.4em;\n  height: 0.4em;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  z-index: 1009;\n}\n\n.asm-component-close-block-btn-mobile {\n  width: 0.11em;\n  height: 0.11em;\n  object-fit: fill;\n  position: absolute;\n  right: 0.147em;\n  top: 0.167em;\n}\n\n\n.ams-component-container-opacity{\n  opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  content: \"\";\n  z-index: 1010;\n  background-color: rgba(0, 0, 0, 0.35);\n  border-radius: 12px 12px 0 0;\n}\n\n#ams-component-retention {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: 50%;\n  height: auto;\n  display: none;\n  z-index: 1009;\n}\n\n.ams-component-retention-show {\n  display: flex !important;\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n  display: flex !important;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n  width: 294px;\n  border-radius: 12px;\n  padding: 24px 0;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n  width: 544px;\n  border-radius: 12px;\n  padding: 32px;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n  .ams-component-retention-mobile {\n      transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n.ams-component-retention-title-mobile {\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n  text-align: left;\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 8px;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n  text-align: left;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  margin-top: 24px;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n  width: 100%;\n  margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n  background: #0079FF;\n  border-radius: 100px;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 159px;\n}\n\n#ams-component-retention-leave {\n  border-radius: 100px;\n  border: 1px solid #0079FF;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  margin-top: 12px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  margin-right: 16px;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 144px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n  0% {\n      opacity: 1;\n  }\n\n  100% {\n      opacity: 0;\n  }\n}\n");
 export var componentAddCSS = function componentAddCSS() {
   var style = document.createElement('style');
   style.type = 'text/css';

package/esm/plugin/component/index.d.ts

@@ -25,7 +25,6 @@ export default class ComponentApp {
     private _renderDisplayType;
     private _multipleCallbackEvents;
     _merchantAppointParam: IMerchantAppointParam;
-    private _webAppHeartBeatTimeoutId;
     private _webAppHeartBeatTimeoutFn;
     constructor();
     /**
@@ -98,7 +97,7 @@ export default class ComponentApp {
      */
     dispatchToApp(payload: {
         context: eventPayloadContext;
-    }, targetElement?: any): any;
+    }, targetElement?: any, sendLog?: boolean): any;
     /**
      * @description Subscribe to messages from SDK
      */