@alipay/ams-checkout 1.25.1 → 1.26.0

package/esm/foundation/service/log/processor.js

@@ -0,0 +1,148 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { LogComplianceExtendKeys, KEYS } from "./keys";
+export var LogComplianceProcessor = /*#__PURE__*/function () {
+  function LogComplianceProcessor() {
+    _classCallCheck(this, LogComplianceProcessor);
+  }
+  _createClass(LogComplianceProcessor, null, [{
+    key: "extractComplianceParams",
+    value: function extractComplianceParams(eventName, params, errorLogCallback) {
+      var _this = this;
+      try {
+        // 触发防抖上报
+        logDebounceTracker.track(function () {
+          _this.flushAbnormalInfo(errorLogCallback);
+        });
+        // 事件名检测
+        var isSpmId = eventName ? eventName.includes('.') : false;
+        if (!isSpmId) {
+          // 非SPM，说明是未做映射的，需要加到埋点里面
+          this.reportHasAbnormalEventName(eventName);
+        }
+        var newParams = {};
+        // 逐个字段检查
+        for (var _i = 0, _Object$keys = Object.keys(params); _i < _Object$keys.length; _i++) {
+          var key = _Object$keys[_i];
+          // 如果当前字段不在合规表中，说明是未合规字段，剔除并且上报异常
+          if (key in LogComplianceExtendKeys.complianceExtParams) {
+            newParams[key] = "".concat(params[key]);
+          } else {
+            // 如果当前字段不在合规表中，说明是未合规字段，剔除并且上报异常
+            this.reportHasIllegalExtendInfoKey(eventName, key);
+          }
+        }
+        return newParams;
+      } catch (error) {
+        console.error(error);
+        return {};
+      }
+    }
+  }, {
+    key: "reportHasAbnormalEventName",
+    value: function reportHasAbnormalEventName(eventName) {
+      this.abnormalEventNameSet.add(eventName);
+    }
+  }, {
+    key: "reportHasIllegalExtendInfoKey",
+    value: function reportHasIllegalExtendInfoKey(eventName, key) {
+      if (!this.nonComplianceEventKeys[eventName]) {
+        this.nonComplianceEventKeys[eventName] = new Set();
+      }
+      this.nonComplianceEventKeys[eventName].add(key);
+    }
+  }, {
+    key: "flushAbnormalInfo",
+    value: function flushAbnormalInfo(errorLogCallback) {
+      try {
+        var _this$abnormalEventNa;
+        if (((_this$abnormalEventNa = this.abnormalEventNameSet) === null || _this$abnormalEventNa === void 0 ? void 0 : _this$abnormalEventNa.size) > 0) {
+          // 不正常的事件名按｜分割
+          // Abnormal event use event name with divider "|"
+          var abnormalEventNames = Array.from(this.abnormalEventNameSet).join('|');
+          errorLogCallback && errorLogCallback({
+            title: KEYS.EVENT_SDK_ON_ABNORMAL_EVENT_NAME.spmId
+          }, {
+            eventAlias: KEYS.EVENT_SDK_ON_ABNORMAL_EVENT_NAME.alias,
+            errorMessage: abnormalEventNames
+          });
+          this.abnormalEventNameSet.clear();
+        }
+        // process nonComplianceEventKeys
+        // eg: if sdk_event_createComponent has key1,key2,key3
+        // sdk_event_createComponent>key1+key2+key3|otherEventName>key1+key2+key3
+        var nonComplianceEventKeysList = [];
+        if (Object.keys(this.nonComplianceEventKeys).length === 0) {
+          return;
+        }
+        for (var eventName in this.nonComplianceEventKeys) {
+          var keys = this.nonComplianceEventKeys[eventName];
+          var keyStr = "".concat(eventName, ">").concat(Array.from(keys).join('+'));
+          nonComplianceEventKeysList.push(keyStr);
+        }
+        var nonComplianceEventKeysLogString = nonComplianceEventKeysList.join('|');
+        errorLogCallback && errorLogCallback({
+          title: KEYS.EVENT_SDK_ON_ABNORMAL_EVENT_EXT_INFO.spmId
+        }, {
+          eventAlias: KEYS.EVENT_SDK_ON_ABNORMAL_EVENT_EXT_INFO.alias,
+          errorMessage: nonComplianceEventKeysLogString
+        });
+        this.nonComplianceEventKeys = {};
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }]);
+  return LogComplianceProcessor;
+}();
+// 记录不正常的事件名
+_defineProperty(LogComplianceProcessor, "abnormalEventNameSet", new Set());
+// 记录不合规的扩展字段，KEY是事件名，VALUE是非合规扩展字段列表
+_defineProperty(LogComplianceProcessor, "nonComplianceEventKeys", {});
+var LogDebounceTracker = /*#__PURE__*/function () {
+  function LogDebounceTracker() {
+    var debounceTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5000;
+    _classCallCheck(this, LogDebounceTracker);
+    _defineProperty(this, "timeoutId", void 0);
+    _defineProperty(this, "debounceTime", void 0);
+    this.timeoutId = null;
+    this.debounceTime = debounceTime;
+  }
+  _createClass(LogDebounceTracker, [{
+    key: "track",
+    value: function track(callback) {
+      this.debounce(callback);
+    }
+
+    // 防抖实现
+  }, {
+    key: "debounce",
+    value: function debounce(callback) {
+      var _this2 = this;
+      if (this.timeoutId) {
+        clearTimeout(this.timeoutId);
+      }
+      this.timeoutId = setTimeout(function () {
+        _this2.report(callback);
+        _this2.reset();
+      }, this.debounceTime);
+    }
+  }, {
+    key: "report",
+    value: function report(callback) {
+      callback && callback();
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      this.timeoutId = null;
+    }
+  }]);
+  return LogDebounceTracker;
+}();
+var logDebounceTracker = new LogDebounceTracker();

package/esm/foundation/service/log/types.d.ts

@@ -20,7 +20,7 @@ export interface LogMetaData {
     firstLogTime?: number;
     fsDuration?: number;
     instanceId?: string;
-    storageId?: string;
+    deviceId?: string;
     renderDisplayType?: string;
     merchantId?: string;
     productScene?: string;

package/esm/foundation/service/requester/requester.js

@@ -80,6 +80,7 @@ export var RequesterService = /*#__PURE__*/function () {
               errorMessage = (resData === null || resData === void 0 ? void 0 : resData.errorMessage) || (handleGetWayError === null || handleGetWayError === void 0 ? void 0 : handleGetWayError.errorMessage);
               errorCode = handleGetWayError === null || handleGetWayError === void 0 ? void 0 : handleGetWayError.errorCode;
               this.reportRequestTimeCost({
+                title: 'a3753.b101271.c388193.d521387',
                 name: options === null || options === void 0 ? void 0 : options['Operation-Type'],
                 label: 'request',
                 time: Date.now() - startTime,
@@ -95,6 +96,7 @@ export var RequesterService = /*#__PURE__*/function () {
               }));
             case 20:
               this.reportRequestTimeCost({
+                title: 'a3753.b101271.c388193.d521387',
                 name: options === null || options === void 0 ? void 0 : options['Operation-Type'],
                 label: 'request',
                 time: Date.now() - startTime,
@@ -116,6 +118,7 @@ export var RequesterService = /*#__PURE__*/function () {
               timeoutCode = _context.t0 !== null && _context.t0 !== void 0 && (_error$message = _context.t0.message) !== null && _error$message !== void 0 && _error$message.includes('timeout') ? errorEnum.TIMEOUT : '';
               _errorCode = (_error === null || _error === void 0 ? void 0 : _error.errorCode) || timeoutCode;
               this.reportRequestTimeCost({
+                title: 'a3753.b101271.c388193.d521387',
                 name: options === null || options === void 0 ? void 0 : options['Operation-Type'],
                 label: 'request',
                 time: Date.now() - startTime,

package/esm/foundation/service/security/index.js

@@ -169,8 +169,8 @@ export var SecurityService = /*#__PURE__*/function () {
                     _this2.logger.logError({
                       title: 'sdk_error_securitySdkInitTimeout'
                     }, {
-                      product: _this2.productScene,
-                      sign: isPre ? 'Active initialization' : 'SDK internal initialization'
+                      productScene: _this2.productScene,
+                      eventMessage: isPre ? 'Active initialization' : 'SDK internal initialization'
                     }).send();
                     reject();
                   }, timeout);
@@ -182,7 +182,7 @@ export var SecurityService = /*#__PURE__*/function () {
                   _this2.logger.logInfo({
                     title: "sdk_event_securitySdk".concat(sdkAction, "Success")
                   }, isPre ? {
-                    product: _this2.productScene
+                    productScene: _this2.productScene
                   } : undefined).send();
                   resolve();
                 }, function (msg) {
@@ -190,7 +190,7 @@ export var SecurityService = /*#__PURE__*/function () {
                     title: 'sdk_error_securitySdkInitFailed',
                     msg: msg || undefined
                   }, {
-                    product: _this2.productScene,
+                    productScene: _this2.productScene,
                     sign: isPre ? 'Active initialization' : 'SDK internal initialization'
                   }).send();
                   reject();
@@ -215,15 +215,13 @@ export var SecurityService = /*#__PURE__*/function () {
         this.logger.logInfo({
           title: 'sdk_event_securitySdkGetTokenSuccess'
         }, {
-          deviceId: deviceId,
-          time: time
+          eventMessage: time
         }).send();
       } else {
         this.logger.logInfo({
           title: 'sdk_error_securitySdkGetTokenFailed'
         }, {
-          deviceId: deviceId,
-          time: time
+          eventMessage: time
         }).send();
       }
     }

package/esm/foundation/utils/redirect_utils.js

@@ -240,8 +240,7 @@ function logBackScheme(logger, userAgent, scheme) {
     logger.logInfo({
       title: 'a3753.b101271.c377460'
     }, {
-      userAgent: userAgent,
-      backScheme: scheme
+      eventMessage: scheme
     });
   }
 }

package/esm/index.js

@@ -98,7 +98,7 @@ export var AMSCashierPayment = /*#__PURE__*/function (_AMSCheckout3) {
       logger.logError({
         title: 'performance_optimization_get_previousChannel_error'
       }, {
-        error: error
+        errorMessage: error
       });
     }
     return _super4.call(this, _options, currentChannelType);

package/esm/plugin/applepay/component.js

@@ -82,13 +82,15 @@ var ApplePayComponent = /*#__PURE__*/function () {
         name: 'APPLE_PAY',
         title: ApplePayComponentEvent.sdk_event_applePaymentResult
       }, {
-        biz: 'sdk',
-        type: 'funnel',
-        success: eventCodeEnum.SDK_PAYMENT_SUCCESSFUL === (state === null || state === void 0 ? void 0 : state.code),
+        eventSource: 'sdk',
+        processResult: eventCodeEnum.SDK_PAYMENT_SUCCESSFUL === (state === null || state === void 0 ? void 0 : state.code),
         code: state === null || state === void 0 ? void 0 : state.code,
-        errorCode: state === null || state === void 0 || (_state$result = state.result) === null || _state$result === void 0 ? void 0 : _state$result.errorCode,
+        extSdkError: state === null || state === void 0 || (_state$result = state.result) === null || _state$result === void 0 ? void 0 : _state$result.errorCode,
         errorMessage: state === null || state === void 0 || (_state$result2 = state.result) === null || _state$result2 === void 0 ? void 0 : _state$result2.errorMessage,
-        recurring: this.isRecurring
+        eventMessage: JSON.stringify({
+          type: 'funnel',
+          recurring: this.isRecurring
+        })
       }).send();
       (_this$_options = this._options) === null || _this$_options === void 0 || _this$_options.onEventCallback(state);
     }
@@ -118,7 +120,7 @@ var ApplePayComponent = /*#__PURE__*/function () {
           msg: 'Abnormal paymentSessionData'
         }, {
           type: 'error',
-          biz: 'sdk'
+          eventSource: 'sdk'
         }).send();
         return;
       }
@@ -259,7 +261,7 @@ var ApplePayComponent = /*#__PURE__*/function () {
                     title: 'submitPayStatus',
                     msg: res === null || res === void 0 ? void 0 : res.errorStatus
                   }, {
-                    biz: 'sdk'
+                    eventSource: 'sdk'
                   }).send();
                   if (res !== null && res !== void 0 && res.success || (res === null || res === void 0 ? void 0 : res.errorStatus) === 'U') {
                     return Promise.resolve(res);
@@ -302,7 +304,7 @@ var ApplePayComponent = /*#__PURE__*/function () {
           msg: error
         }, {
           type: 'error',
-          biz: 'sdk'
+          eventSource: 'sdk'
         }).send();
         if (_this._isFinish) {
           return;

package/esm/plugin/applepay/index.js

@@ -57,10 +57,12 @@ export var ApplePayBusSubscriber = /*#__PURE__*/function (_BusSubscriber) {
         name: 'APPLE_PAY',
         title: ApplePayComponentEvent.sdk_event_appleAvailable
       }, {
-        biz: 'sdk',
-        type: 'funnel',
-        success: canMakePayments,
-        recurring: subPaymentMethod === 'ApplePayRecurringPayment'
+        eventSource: 'sdk',
+        processResult: canMakePayments,
+        eventMessage: JSON.stringify({
+          type: 'funnel',
+          recurring: subPaymentMethod === 'ApplePayRecurringPayment'
+        })
       }).send();
     }
   }, {
@@ -88,8 +90,10 @@ export var ApplePayBusSubscriber = /*#__PURE__*/function (_BusSubscriber) {
         name: 'APPLE_PAY',
         title: ApplePayComponentEvent.sdk_event_appleDestroyComponent
       }, {
-        biz: 'sdk',
-        type: 'funnel'
+        eventSource: 'sdk',
+        eventMessage: JSON.stringify({
+          type: 'funnel'
+        })
       }).send();
     }
   }, {

package/esm/plugin/applepay/service.js

@@ -62,10 +62,12 @@ var ApplePayService = /*#__PURE__*/function () {
         name: 'APPLE_PAY',
         title: ApplePayComponentEvent.sdk_event_appleCreateComponent
       }, {
-        biz: 'sdk',
-        type: 'funnel',
-        success: success,
-        recurring: _this.isRecurring
+        eventSource: 'sdk',
+        processResult: success,
+        eventMessage: JSON.stringify({
+          type: 'funnel',
+          recurring: _this.isRecurring
+        })
       }).send();
     });
     _defineProperty(this, "onpaymentauthorized", function (event) {
@@ -98,10 +100,12 @@ var ApplePayService = /*#__PURE__*/function () {
         name: 'APPLE_PAY',
         title: ApplePayComponentEvent.sdk_event_appleSubmitToken
       }, {
-        biz: 'sdk',
-        type: 'funnel',
-        success: success,
-        recurring: _this.isRecurring
+        eventSource: 'sdk',
+        processResult: success,
+        eventMessage: JSON.stringify({
+          type: 'funnel',
+          recurring: _this.isRecurring
+        })
       }).send();
     });
     /**
@@ -122,10 +126,12 @@ var ApplePayService = /*#__PURE__*/function () {
         name: 'APPLE_PAY',
         title: ApplePayComponentEvent.sdk_event_appleCreateComponent
       }, {
-        biz: 'sdk',
-        type: 'funnel',
-        success: ApplePaySession !== null,
-        recurring: _this.isRecurring
+        eventSource: 'sdk',
+        processResult: ApplePaySession !== null,
+        eventMessage: JSON.stringify({
+          type: 'funnel',
+          recurring: _this.isRecurring
+        })
       }).send();
       if (!ApplePaySession) {
         _this.logError(eventCodeEnum.SDK_PAYMENT_ERROR, "ApplePaySession is only support in Safari");
@@ -200,10 +206,12 @@ var ApplePayService = /*#__PURE__*/function () {
         name: 'APPLE_PAY',
         title: ApplePayComponentEvent.sdk_event_appleShowPaymentSheet
       }, {
-        biz: 'sdk',
-        type: 'funnel',
-        success: true,
-        recurring: recurringInfo !== null
+        eventSource: 'sdk',
+        processResult: true,
+        eventMessage: JSON.stringify({
+          type: 'funnel',
+          recurring: recurringInfo !== null
+        })
       }).send();
     });
     this.logger = logger;

package/esm/plugin/component/cashierApp.js

@@ -35,11 +35,11 @@ var getAppVersion = function getAppVersion(_extendInfo, productScene, mid) {
         title: 'sdk_event_appUpgradeInfo'
       }, {
         appUpgradeVersion: appVersion,
-        appUpgraded: appVersion ? true : false,
+        processResult: appVersion ? true : false,
         isPreload: _extendInfo ? false : true,
-        extendInfo: _extendInfo,
+        config: _extendInfo,
         productScene: productScene,
-        mid: mid
+        merchantId: mid
       });
     }
 

package/esm/plugin/component/channel.js

@@ -7,7 +7,7 @@ export function getChannelBehavior(paymentSessionMetaData) {
       submitPayInSdk: true,
       createIframeNode: true,
       loadApp: true,
-      allowClickOutsideClose: true,
+      allowClickOutsideClose: false,
       buildSubmitPayExtParams: function buildSubmitPayExtParams(params) {
         var callBackUrl = getDoubleFaUrl(params);
         return {

package/esm/plugin/component/component.popup.style.d.ts

@@ -2,12 +2,20 @@ import { PlatformEnum } from '../../types';
 export declare const componentAddCSS: () => void;
 export declare const createBaseElement: (platform: PlatformEnum, closeBtnFunc: () => void) => HTMLDivElement;
 export declare const createCloseBtn: (platform: PlatformEnum, closeBtnFunc: () => void) => void;
+export declare const createMaskCloseButton: (platform: PlatformEnum, closeBtnFunc: () => void) => void;
+/**
+ * 弹出离开挽留弹窗
+ * @param platform
+ * @param remainBtnFunc
+ * @param leaveBtnFunc
+ */
 export declare const createRetentionPopup: (platform: PlatformEnum, remainBtnFunc: () => void, leaveBtnFunc: () => void) => void;
 export declare const hideRetentionPopup: () => void;
 export declare const removeRetentionPopup: (platform: PlatformEnum, remainBtnFunc: () => void, leaveBtnFunc: () => void) => void;
 export declare const createMockup: (options: {
     platform: PlatformEnum;
     onClickOutside: () => void;
+    closeBtnFunc: () => void;
 }) => void;
 export declare const addPopupLoading: () => void;
 export declare const handleDeclareInfo: ({ closeDialogData }: {

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

@@ -5,10 +5,10 @@
  * 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 { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, LOADING_ID, MOCKUP_ID } from "../../constant";
+import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CLOSE_MASK_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  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\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-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\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\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.ams-component-mask-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  top: 10px;\n  cursor: pointer;\n  z-index: 1013;\n}\n  \n.ams-component-mask-close-block-mobile {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  cursor: pointer;\n  z-index: 1012;\n}\n\n.ams-component-mask-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.ams-component-mask-close-block-btn {\n  width: 24px;\n  height: 24px;\n  object-fit: fill;\n  position: absolute;\n  right: 8px;\n  top: 8px;\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\n");
 export var componentAddCSS = function componentAddCSS() {
   var style = document.createElement('style');
   style.type = 'text/css';
@@ -47,6 +47,25 @@ export var createCloseBtn = function createCloseBtn(platform, closeBtnFunc) {
   });
   if (container) container.appendChild(closeBlock);
 };
+export var createMaskCloseButton = function createMaskCloseButton(platform, closeBtnFunc) {
+  var clickEventName = platform === PlatformEnum.mobile ? 'touchend' : 'click';
+  var closeBtnHTML = "<div class='".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-btn'>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.5673 4.49829L19.424 4.36736L19.3027 4.27821L19.1702 4.19928C18.5417 3.86236 17.7834 3.96479 17.2841 4.46433L11.9986 9.7512L6.73275 4.4853L6.67045 4.42539C6.01464 3.85742 5.07067 3.85791 4.49751 4.42864L4.38538 4.54934L4.27757 4.69333L4.19868 4.8259C3.862 5.45451 3.96432 6.21286 4.46349 6.71225L9.75274 12.0006L4.42833 17.3276C3.85705 17.9874 3.85754 18.9315 4.42789 19.5048L4.54854 19.6169L4.6925 19.7248L4.82504 19.8038C5.45353 20.1407 6.21179 20.0383 6.71105 19.5388L11.9986 14.2489L17.321 19.574C17.9915 20.1551 18.9356 20.1352 19.5317 19.5388L19.6383 19.4206L19.7338 19.2891C20.1447 18.6603 20.0683 17.8276 19.5316 17.2907L14.2454 12.0016L19.5077 6.73713L19.605 6.63362C20.1455 6.00703 20.1297 5.06361 19.5673 4.49829Z\" fill=\"#EEEEEE\"/>\n</svg>\n  </div>");
+  var closeBlock = document.createElement('div');
+  closeBlock.classList.add("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-").concat(platform), "".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-hidden"));
+  closeBlock.id = COMPONENT_CLOSE_MASK_BLOCK_ID;
+  closeBlock.innerHTML = closeBtnHTML;
+  closeBlock.addEventListener(clickEventName, function () {
+    closeBtnFunc();
+  });
+  document.body.appendChild(closeBlock);
+};
+
+/**
+ * 弹出离开挽留弹窗
+ * @param platform
+ * @param remainBtnFunc
+ * @param leaveBtnFunc
+ */
 export var createRetentionPopup = function createRetentionPopup(platform, remainBtnFunc, leaveBtnFunc) {
   var clickEventName = platform === PlatformEnum.mobile ? 'touchend' : 'click';
   // retention popup
@@ -109,6 +128,7 @@ export var createMockup = function createMockup(options) {
     options === null || options === void 0 || (_options$onClickOutsi = options.onClickOutside) === null || _options$onClickOutsi === void 0 || _options$onClickOutsi.call(options);
   });
   body.appendChild(mockup);
+  createMaskCloseButton(options === null || options === void 0 ? void 0 : options.platform, options === null || options === void 0 ? void 0 : options.closeBtnFunc);
 };
 export var addPopupLoading = function addPopupLoading() {
   var loading = document.createElement('div');

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

@@ -85,6 +85,7 @@ export default class ComponentApp {
     _handleAppMessage(data: EventPayload): void;
     private logEventCallback;
     private dismissLoadingFunc;
+    private updateMaskCloseBtn;
     private handleSizeChanged;
     private handleAuthUrlInfo;
     private handleRedirect;
@@ -94,6 +95,7 @@ export default class ComponentApp {
     private isAppAttached;
     private isWindowVisible;
     private handleCloseBtnShow;
+    private handleMaskCloseBtnShow;
     /**
      * @description Send message to SDK
      */