@alipay/ams-checkout 0.0.1713146800-dev.0 → 0.0.1713838058-dev.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/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

@@ -74,7 +74,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 +116,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);
@@ -361,7 +362,7 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
           channelType: channelType
         });
       }
-      setTimeout(function () {
+      this.timer = setTimeout(function () {
         _this5.clearPreloadIframe(true);
       }, MAX_CLEAR_TIME);
     }
@@ -369,6 +370,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));

package/esm/core/instance/index.js

@@ -56,7 +56,8 @@ 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));
+    Logger.setInstance(this.logger);
     this.logger.setMedta({
       instanceId: this._instanceId
     });
@@ -65,14 +66,15 @@ var AMSSDK = /*#__PURE__*/function () {
       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, "}")
     }).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
@@ -86,7 +88,7 @@ var AMSSDK = /*#__PURE__*/function () {
         var matchingConfig = config['pl_sec'].find(function (item) {
           var _item$v, _item$v2, _item$platform;
           var minVersion = item === null || item === void 0 || (_item$v = item.v) === null || _item$v === void 0 ? void 0 : _item$v.split('|')[0];
-          var maxVersion = (item === null || item === void 0 || (_item$v2 = item.v) === null || _item$v2 === void 0 ? void 0 : _item$v2.split('|')[1]) || '999.9.9';
+          var maxVersion = (item === null || item === void 0 || (_item$v2 = item.v) === null || _item$v2 === void 0 ? void 0 : _item$v2.split('|')[1]) || '999999.9.9';
           var matchVersion = compareVersion(sdkVersion, minVersion) >= 0 && compareVersion(maxVersion, sdkVersion) >= 0;
           return ((item === null || item === void 0 || (_item$platform = item.platform) === null || _item$platform === void 0 ? void 0 : _item$platform.includes('Web')) || (item === null || item === void 0 ? void 0 : item.platform) === '') && (item === null || item === void 0 ? void 0 : item.product) === product && (!(item !== null && item !== void 0 && item.v) || matchVersion);
         });

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

@@ -1,15 +1,18 @@
-import { renderDisplayTypeEnum, componentSignEnum, Ianalytics } from '../../types';
-export declare const getAppPath: (environment: string, appVersion: string, componentSign: componentSignEnum, productSceneVersion: string, extendInfo: string) => any;
+import { componentSignEnum, Ianalytics, renderDisplayTypeEnum } from '../../types';
+export declare const getAppPath: (environment: string, appVersion: string, componentSign: componentSignEnum, productScene: string, productSceneVersion: string, extendInfo: string, mid: string) => any;
 export declare const getAppDomain: (domainParams: {
     environment: string;
     appVersion: string;
     componentSign: componentSignEnum;
+    productScene: string;
     productSceneVersion: string;
     extendInfo: string;
+    mid: string;
 }) => string;
 export declare const getIframeUrl: (iframeParams: {
     componentSign: componentSignEnum;
     analytics?: Ianalytics;
+    productScene: string;
     productSceneVersion: string;
     environment: string;
     appVersion: string;
@@ -19,6 +22,7 @@ export declare const getIframeUrl: (iframeParams: {
     renderDisplayType: renderDisplayTypeEnum;
     isPreload?: string;
     hostSign?: string;
+    mid: string;
 }) => {
     path: string;
     locationSearch: string;

package/esm/plugin/component/cashierApp.js

@@ -10,12 +10,40 @@ 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.
  */
 import { marmotMap, sdkVersion } from "../../config/index";
-import { getViewPort, queryParse, serialize } from "../../util/index";
 import { componentSignEnum } from "../../types";
-var getAppVersion = function getAppVersion(_extendInfo) {
+import { isDebugLog } from "../../util/debug";
+import { getViewPort, queryParse, serialize } from "../../util/index";
+import { Logger } from "../../util/logger";
+import { getLastAppVersion, getMatchAppVersion, setLastAppVersion } from "../../util/upgrade";
+var getAppVersion = function getAppVersion(_extendInfo, productScene, mid) {
   try {
-    var info = JSON.parse(_extendInfo);
-    return info.versionMap.web[sdkVersion].targetWebVerison;
+    var _Logger$getInstance;
+    var appVersion = getMatchAppVersion(_extendInfo, {
+      sdkVersion: sdkVersion,
+      productScene: productScene,
+      mid: mid
+    });
+    // 有sessionData加载时
+    (_Logger$getInstance = Logger.getInstance()) === null || _Logger$getInstance === void 0 || _Logger$getInstance.logInfo({
+      title: 'sdk_event_appUpgradeInfo'
+    }, {
+      appUpgradeVersion: appVersion,
+      appUpgraded: appVersion ? true : false,
+      isPreload: _extendInfo ? false : true,
+      extendInfo: _extendInfo,
+      productScene: productScene,
+      mid: mid
+    });
+    // 没有匹配到版本，查询上次的加载版本
+    if (!appVersion) {
+      appVersion = getLastAppVersion(productScene);
+      return appVersion;
+    }
+    // 不为空时代表是有sessionData，因此要保存当前版本
+    if (_extendInfo) {
+      setLastAppVersion(productScene, appVersion);
+    }
+    return appVersion;
   } catch (error) {
     return '';
   }
@@ -34,13 +62,26 @@ export var getAppPath = function getAppPath() {
   var environment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'prod';
   var appVersion = arguments.length > 1 ? arguments[1] : undefined;
   var componentSign = arguments.length > 2 ? arguments[2] : undefined;
-  var productSceneVersion = arguments.length > 3 ? arguments[3] : undefined;
-  var extendInfo = arguments.length > 4 ? arguments[4] : undefined;
+  var productScene = arguments.length > 3 ? arguments[3] : undefined;
+  var productSceneVersion = arguments.length > 4 ? arguments[4] : undefined;
+  var extendInfo = arguments.length > 5 ? arguments[5] : undefined;
+  var mid = arguments.length > 6 ? arguments[6] : undefined;
   var _ref = queryParse() || {},
     urlTestHost = _ref.host;
-  var finalAppVersion = getAppVersion(extendInfo) || appVersion;
+  var upgradeAppVersion = getAppVersion(extendInfo, productScene, mid);
+  var finalAppVersion = upgradeAppVersion || appVersion;
+  // 当有升级版本时，更新到全局字段
+  if (upgradeAppVersion) {
+    var _Logger$getInstance2;
+    (_Logger$getInstance2 = Logger.getInstance()) === null || _Logger$getInstance2 === void 0 || _Logger$getInstance2.setMedta({
+      webAppVersion: finalAppVersion
+    });
+  }
+  if (isDebugLog()) {
+    console.log('appUpgrade#getAppPath#finalAppVersion', finalAppVersion);
+    console.log('appUpgrade#getAppPath#extendInfo', extendInfo, mid);
+  }
   var finalProductSceneVersion = getFinalProductSceneVersion(componentSign, productSceneVersion);
-
   // only for test while testurl?host=https://xxxxx.test.html
   if (urlTestHost && !['sandbox', 'light_sandbox', 'prod'].includes(environment)) {
     return urlTestHost;
@@ -51,10 +92,12 @@ export var getAppDomain = function getAppDomain(domainParams) {
   var environment = domainParams.environment,
     appVersion = domainParams.appVersion,
     componentSign = domainParams.componentSign,
+    productScene = domainParams.productScene,
     productSceneVersion = domainParams.productSceneVersion,
-    extendInfo = domainParams.extendInfo;
+    extendInfo = domainParams.extendInfo,
+    mid = domainParams.mid;
   var reg = /^https?:\/\/([^/<>\s]+\.?)*/;
-  var macth = reg.exec(getAppPath(environment, appVersion, componentSign, productSceneVersion, extendInfo));
+  var macth = reg.exec(getAppPath(environment, appVersion, componentSign, productScene, productSceneVersion, extendInfo, mid));
   return macth && macth[0] || '';
 };
 export var getIframeUrl = function getIframeUrl(iframeParams) {
@@ -63,6 +106,7 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
     analytics = _iframeParams$analyti === void 0 ? {
       enabled: true
     } : _iframeParams$analyti,
+    productScene = iframeParams.productScene,
     productSceneVersion = iframeParams.productSceneVersion,
     environment = iframeParams.environment,
     appVersion = iframeParams.appVersion,
@@ -73,8 +117,15 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
     _iframeParams$isPrelo = iframeParams.isPreload,
     isPreload = _iframeParams$isPrelo === void 0 ? '' : _iframeParams$isPrelo,
     _iframeParams$hostSig = iframeParams.hostSign,
-    hostSign = _iframeParams$hostSig === void 0 ? '' : _iframeParams$hostSig;
-  var path = getAppPath(environment, appVersion, componentSign, productSceneVersion, extendInfo || '');
+    hostSign = _iframeParams$hostSig === void 0 ? '' : _iframeParams$hostSig,
+    _iframeParams$mid = iframeParams.mid,
+    mid = _iframeParams$mid === void 0 ? '' : _iframeParams$mid;
+  var path = getAppPath(environment, appVersion, componentSign, productScene, productSceneVersion, extendInfo || '', mid);
+  var appMatched = getMatchAppVersion(extendInfo, {
+    sdkVersion: sdkVersion,
+    productScene: productScene,
+    mid: mid
+  }) ? 'true' : 'false';
   var initialScale = 1;
   var scale = getViewPort('initial-scale') || initialScale;
   var _queryParse = queryParse(),
@@ -91,6 +142,7 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
     locale: locale,
     scale: scale,
     instanceId: instanceId,
+    appMatched: appMatched,
     analyticsEnabled: (analytics === null || analytics === void 0 ? void 0 : analytics.enabled) === false ? 'false' : 'true',
     sdkVersion: sdkVersion,
     refUrl: window.location.href,
@@ -106,6 +158,10 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
   if (_displayType) urlParams.displayType = _displayType;
   if (isPreload) urlParams.isPreload = isPreload;
   var locationSearch = serialize(urlParams);
+  if (isDebugLog()) {
+    console.log('appUpgrade#getIframeUrl#appMatched', appMatched);
+    console.log('appUpgrade#getIframeUrl#url', path, locationSearch);
+  }
   return {
     path: path,
     locationSearch: locationSearch

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
      */