@alipay/ams-checkout 0.0.1691743027-dev.3 → 0.0.1691743027-dev.5

package/esm/plugin/component/index.js

@@ -15,31 +15,23 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * 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 no-console */
-import { closeImg, COMPONENTPLUGINID, ERRORMESSAGE, EVENT } from "../../constant";
+import { COMPONENTPLUGINID, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, ERRORMESSAGE, EVENT, LISTENER_PREFIX, LOADING_ID, LOADTIME_LIMIT, MOCKUP_ID } from "../../constant";
 import { queryPaymentInfo } from "../../service";
-import { componentSignEnum, messageName, platformEnum, productSceneEnum, renderDisplayTypeEnum, targetEnum } from "../../types";
-import { addSetFontSizeEvent, amsSetSize, getDesignFontSize, getType, isJsonString, isPC } from "../../util";
+import { componentSignEnum, eventCodeEnum, messageName, platformEnum, productSceneEnum, renderDisplayTypeEnum, targetEnum } from "../../types";
+import { getType, isJsonString, isPC } from "../../util";
 import { isLocalMock } from "../../util/mock";
 import { createIframe, getAppDomain, getIframeUrl } from "./cashierApp";
-import { componentAddCSS, inlineComponentAddCss, showInlineLoading } from "./component.style";
+import { addInlineLoading, createInlineBaseElement } from "./component.inline.style";
+import { addPopupLoading, createBaseElement, createMockup, createRetentionPopup, hideRetentionPopup, removeRetentionPopup as _removeRetentionPopup } from "./component.popup.style";
 var _window = window,
   innerHeight = _window.innerHeight;
-var componentContainerId = 'ams-component-container';
-var componentSectionId = 'ams-component-section';
-var componentCloseBlockId = 'asm-component-close-block';
-var componentRetentionId = 'ams-component-retention';
-var mockupId = 'ams-component-mockup';
-var loadingId = 'ams-component-loading';
-var listenerPrefix = '_ams_sdk_component_listener';
-var inlineBaseStyleId = 'ams-inline-component-style';
-var loadTimeLimit = 15000;
 var ComponentApp = /*#__PURE__*/function () {
   function ComponentApp() {
     _classCallCheck(this, ComponentApp);
     _defineProperty(this, "app", void 0);
-    _defineProperty(this, "appDomain", void 0);
     _defineProperty(this, "AMSSDK", void 0);
     _defineProperty(this, "platform", void 0);
+    _defineProperty(this, "appDomain", void 0);
     _defineProperty(this, "createIframeNode", void 0);
     _defineProperty(this, "_selector", void 0);
     _defineProperty(this, "_appVersion", void 0);
@@ -54,7 +46,7 @@ var ComponentApp = /*#__PURE__*/function () {
     _defineProperty(this, "_renderDisplayType", renderDisplayTypeEnum.popup);
     this._appVersion = '1.5.0';
     this._isInitComponent = false;
-    this._selector = "#".concat(componentSectionId);
+    this._selector = "#".concat(COMPONENT_SECTION_ID);
     this.createIframeNode = function () {
       return Promise.resolve();
     };
@@ -111,40 +103,51 @@ var ComponentApp = /*#__PURE__*/function () {
       this._componentSign = componentSign;
       if (renderParams !== null && renderParams !== void 0 && renderParams.selector) this._selector = renderParams.selector;
       this._renderDisplayType = renderParams.renderDisplayType;
-      var insertedNode = this._renderDisplayType === renderDisplayTypeEnum.inline ? "#".concat(componentContainerId) : this._selector;
+      var insertedNode = this._renderDisplayType === renderDisplayTypeEnum.inline ? "#".concat(COMPONENT_CONTAINER_ID) : this._selector;
       this._performanceData.push({
         key: 'sdk_create_component',
         value: Date.now()
       });
+      this.dispatchToSDK(EVENT.eventCallback.name, {
+        code: eventCodeEnum.SDK_START_OF_LOADING
+      });
       if (this._renderDisplayType === renderDisplayTypeEnum.inline) {
-        this.createInlineBaseElement(renderParams);
+        var container = createInlineBaseElement(this._selector);
+        if (container) this.renderInlineLoading(renderParams, container);
       }
       if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
-        this.createBaseElement();
-        this.setContainerClass();
-        this.createRetentionPopup();
-        this.createMockup();
+        createBaseElement(this.platform, this.closeBtnFunc);
+        createRetentionPopup(this.platform, this.hideRetentionPopupFunc, this.retentionPopupLeaveFunc);
+        createMockup();
         this.renderPopupLoading(renderParams);
       }
       this.createApp(renderParams);
-      return Promise.all([this.createActionQueryPromise(), this.createIframeNode(this, insertedNode, this._renderDisplayType), this.createLoadAppPromise()]).catch(function (error) {
+      return Promise.all([this.createActionQueryPromise(), this.createIframeNode(this, insertedNode, this._renderDisplayType), this.createLoadAppPromise()]).then(function () {
+        return Promise.resolve();
+      }).catch(function (error) {
         _this._isInitComponent = false;
         _this.cleanContainer();
         return Promise.reject(error);
       });
     }
   }, {
-    key: "renderPopupLoading",
-    value: function renderPopupLoading(renderParams) {
+    key: "renderInlineLoading",
+    value: function renderInlineLoading(renderParams, selector) {
       var _renderParams$appeara;
       var showLoading = renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$appeara = renderParams.appearance) === null || _renderParams$appeara === void 0 ? void 0 : _renderParams$appeara.showLoading;
       showLoading = typeof showLoading === 'boolean' ? showLoading : true;
+      if (showLoading) addInlineLoading(selector, this.platform);
+    }
+  }, {
+    key: "renderPopupLoading",
+    value: function renderPopupLoading(renderParams) {
+      var _renderParams$appeara2;
+      var showLoading = renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$appeara2 = renderParams.appearance) === null || _renderParams$appeara2 === void 0 ? void 0 : _renderParams$appeara2.showLoading;
+      showLoading = typeof showLoading === 'boolean' ? showLoading : true;
       if (!showLoading) return;
-      if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
-        var mockup = document.getElementById(mockupId);
-        if (mockup) mockup.style.display = 'block';
-        return this.showPopupLoading();
-      }
+      var mockup = document.getElementById(MOCKUP_ID);
+      if (mockup) mockup.style.display = 'block';
+      addPopupLoading();
     }
   }, {
     key: "createLoadAppPromise",
@@ -154,7 +157,7 @@ var ComponentApp = /*#__PURE__*/function () {
         _this2._loadAppPromiseResolve = resolve;
         setTimeout(function () {
           reject(ERRORMESSAGE.CREATECOMPONENT_ERROR.LOAD_APP_TIMEOUT);
-        }, loadTimeLimit);
+        }, LOADTIME_LIMIT);
       }).catch(function (error) {
         _this2.dispatchToSDK(EVENT.error.name, {
           code: ERRORMESSAGE.CREATECOMPONENT_ERROR.code,
@@ -261,16 +264,32 @@ var ComponentApp = /*#__PURE__*/function () {
       return this._actionQueryPromise;
     }
   }, {
-    key: "cleanApp",
-    value: function cleanApp() {
+    key: "cleanElement",
+    value: function cleanElement() {
       try {
-        this.app = null;
-        this._removeEventListener();
+        var _document$getElementB;
+        // selector and container
         if (getType(this._selector) === 'string') {
           var selectorDom = document.querySelector(this._selector);
           if (selectorDom) selectorDom.innerHTML = '';
         }
-        // eslint-disable-next-line no-empty
+        var container = document.getElementById(COMPONENT_CONTAINER_ID);
+        if (container) container === null || container === void 0 ? void 0 : container.remove();
+
+        // animation
+        (_document$getElementB = document.getElementById("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation-style"))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+
+        // mockup
+        var body = document.getElementsByTagName('body')[0];
+        body.style.overflow = 'auto';
+        var mockup = document.getElementById(MOCKUP_ID);
+        mockup === null || mockup === void 0 ? void 0 : mockup.remove();
+
+        // retentionPopup
+        this.removeRetentionPopup(this.platform);
+
+        // listener
+        this._removeEventListener();
       } catch (error) {
         console.error(error);
       }
@@ -343,7 +362,7 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "resizeListener",
     value: function resizeListener() {
-      var cashier = document.getElementById(componentContainerId);
+      var cashier = document.getElementById(COMPONENT_CONTAINER_ID);
       cashier.style.transition = 'none';
       this.dispatchToApp({
         context: {
@@ -363,16 +382,16 @@ var ComponentApp = /*#__PURE__*/function () {
     key: "_addEventListener",
     value: function _addEventListener() {
       this._removeEventListener();
-      window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId)] = this.listener.bind(this);
-      window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId, "_resize")] = this.resizeListener.bind(this);
-      window.addEventListener('message', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId)]);
-      window.addEventListener('resize', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId, "_resize")]);
+      window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId)] = this.listener.bind(this);
+      window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId, "_resize")] = this.resizeListener.bind(this);
+      window.addEventListener('message', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId)]);
+      window.addEventListener('resize', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId, "_resize")]);
     }
   }, {
     key: "_removeEventListener",
     value: function _removeEventListener() {
-      window.removeEventListener('message', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId)]);
-      window.removeEventListener('resize', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId, "_resize")]);
+      window.removeEventListener('message', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId)]);
+      window.removeEventListener('resize', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId, "_resize")]);
     }
 
     /**
@@ -441,29 +460,28 @@ var ComponentApp = /*#__PURE__*/function () {
     value: function handleSizeChanged(data) {
       var _data$context$data2;
       if (((_data$context$data2 = data.context.data) === null || _data$context$data2 === void 0 ? void 0 : _data$context$data2.height) <= 1) return;
-      var cashier = document.getElementById(componentContainerId);
+      var cashier = document.getElementById(COMPONENT_CONTAINER_ID);
       cashier.style.height = "".concat(data.context.data.height, "px");
       if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
-        var _document$getElementB;
-        var mockup = document.getElementById(mockupId);
+        var _document$getElementB2;
+        var mockup = document.getElementById(MOCKUP_ID);
         if (mockup) {
-          mockup.style.background = '#000000';
-          mockup.style.opacity = '0.6';
+          mockup.style.background = 'rgb(0, 0, 0, 0.6)';
           mockup.style.display = 'block';
         }
-        (_document$getElementB = document.getElementById(loadingId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+        (_document$getElementB2 = document.getElementById(LOADING_ID)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.remove();
         if (this.platform === 'desktop') {
-          cashier.classList.add("".concat(componentContainerId, "-").concat(this.platform, "-animation"));
+          cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
           if (data.context.data.width) cashier.style.width = "".concat(data.context.data.width, "px");
         }
         if (this.platform === 'mobile') {
-          cashier.classList.add("".concat(componentContainerId, "-").concat(this.platform, "-animation"));
-          var animationStyleId = "".concat(componentContainerId, "-").concat(this.platform, "-animation-style");
+          cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
+          var animationStyleId = "".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation-style");
           var animationStyle = document.getElementById(animationStyleId);
           if (animationStyle) animationStyle === null || animationStyle === void 0 ? void 0 : animationStyle.remove();
 
           // 弹出和弹入动画
-          var runkeyframes = "@keyframes ".concat(componentContainerId, "-slide-in {\n          0% {\n            height: 1px;\n          }\n          100% {\n            height: ").concat(data.context.data.height, "px;\n          }\n        }\n        @keyframes ").concat(componentContainerId, "-slide-out {\n          0% {\n            height: ").concat(data.context.data.height, "px;\n            opacity: 1;\n          }\n          50% {\n            opacity: 1;\n          }\n          100% {\n            height: 1px;\n            opacity: 0;\n          }\n        }");
+          var runkeyframes = "@keyframes ".concat(COMPONENT_CONTAINER_ID, "-slide-in {\n          0% {\n            height: 1px;\n          }\n          100% {\n            height: ").concat(data.context.data.height, "px;\n          }\n        }\n        @keyframes ").concat(COMPONENT_CONTAINER_ID, "-slide-out {\n          0% {\n            height: ").concat(data.context.data.height, "px;\n            opacity: 1;\n          }\n          50% {\n            opacity: 1;\n          }\n          100% {\n            height: 1px;\n            opacity: 0;\n          }\n        }");
           // 创建style标签
           var style = document.createElement('style');
           style.id = animationStyleId;
@@ -481,8 +499,8 @@ var ComponentApp = /*#__PURE__*/function () {
         }
       }
       if (this._renderDisplayType === renderDisplayTypeEnum.inline) {
-        var _document$getElementB2;
-        (_document$getElementB2 = document.getElementById(loadingId)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.remove();
+        var _document$getElementB3;
+        (_document$getElementB3 = document.getElementById(LOADING_ID)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.remove();
       }
       this.app.style.height = "".concat(data.context.data.height, "px");
       this.app.style.opacity = '1';
@@ -501,13 +519,13 @@ var ComponentApp = /*#__PURE__*/function () {
       };
       var successCallback = function successCallback(type, url) {
         _this4.dispatchToSDK(EVENT.eventCallback.name, {
-          code: 'SDK_CALL_URL_SUCCESS',
+          code: eventCodeEnum.SDK_CALL_URL_SUCCESS,
           message: "Successfully opened the app,".concat(type, ": ").concat(url)
         });
       };
       var failCallback = function failCallback() {
         _this4.dispatchToSDK(EVENT.eventCallback.name, {
-          code: 'SDK_CALL_URL_ERROR',
+          code: eventCodeEnum.SDK_CALL_URL_SUCCESS,
           message: "Failed to open app,applinkUrl: ".concat(_data === null || _data === void 0 ? void 0 : _data.applinkUrl, " schemeUrl: ").concat(_data === null || _data === void 0 ? void 0 : _data.schemeUrl, " normalUrl: ").concat(_data === null || _data === void 0 ? void 0 : _data.normalUrl)
         });
       };
@@ -547,21 +565,21 @@ var ComponentApp = /*#__PURE__*/function () {
         closeDialogData = _ref3$closeDialogData === void 0 ? {} : _ref3$closeDialogData;
       try {
         if (closeDialogData) {
-          var retentionTitle = document.getElementById("".concat(componentRetentionId, "-title"));
+          var retentionTitle = document.getElementById("".concat(COMPONENT_RETENTION_ID, "-title"));
           if (retentionTitle) {
             var _closeDialogData$titl, _closeDialogData$titl2, _closeDialogData$titl3;
             retentionTitle.style.fontSize = "".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$titl = closeDialogData.title) === null || _closeDialogData$titl === void 0 ? void 0 : _closeDialogData$titl.fontSize, "px");
             retentionTitle.style.color = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$titl2 = closeDialogData.title) === null || _closeDialogData$titl2 === void 0 ? void 0 : _closeDialogData$titl2.fontColor;
             retentionTitle.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$titl3 = closeDialogData.title) === null || _closeDialogData$titl3 === void 0 ? void 0 : _closeDialogData$titl3.text;
           }
-          var retentionMessage = document.getElementById("".concat(componentRetentionId, "-sub-title"));
+          var retentionMessage = document.getElementById("".concat(COMPONENT_RETENTION_ID, "-sub-title"));
           if (retentionMessage) {
             var _closeDialogData$mess, _closeDialogData$mess2, _closeDialogData$mess3;
             retentionMessage.style.fontSize = "".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$mess = closeDialogData.message) === null || _closeDialogData$mess === void 0 ? void 0 : _closeDialogData$mess.fontSize, "px");
             retentionMessage.style.color = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$mess2 = closeDialogData.message) === null || _closeDialogData$mess2 === void 0 ? void 0 : _closeDialogData$mess2.fontColor;
             retentionMessage.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$mess3 = closeDialogData.message) === null || _closeDialogData$mess3 === void 0 ? void 0 : _closeDialogData$mess3.text;
           }
-          var remainBtn = document.getElementById("".concat(componentRetentionId, "-remain"));
+          var remainBtn = document.getElementById("".concat(COMPONENT_RETENTION_ID, "-remain"));
           if (remainBtn) {
             var _closeDialogData$btnO, _closeDialogData$btnO2, _closeDialogData$btnO3, _closeDialogData$btnO4, _closeDialogData$btnO5, _closeDialogData$btnO7;
             remainBtn.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO = closeDialogData.btnOK) === null || _closeDialogData$btnO === void 0 ? void 0 : _closeDialogData$btnO.text;
@@ -573,7 +591,7 @@ var ComponentApp = /*#__PURE__*/function () {
               remainBtn.style.border = "1px solid ".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO6 = closeDialogData.btnOK) === null || _closeDialogData$btnO6 === void 0 ? void 0 : _closeDialogData$btnO6.bg);
             } else remainBtn.style.backgroundColor = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO7 = closeDialogData.btnOK) === null || _closeDialogData$btnO7 === void 0 ? void 0 : _closeDialogData$btnO7.bg;
           }
-          var leaveBrn = document.getElementById("".concat(componentRetentionId, "-leave"));
+          var leaveBrn = document.getElementById("".concat(COMPONENT_RETENTION_ID, "-leave"));
           if (leaveBrn) {
             var _closeDialogData$btnC, _closeDialogData$btnC2, _closeDialogData$btnC3, _closeDialogData$btnC4, _closeDialogData$btnC5, _closeDialogData$btnC7;
             leaveBrn.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnC = closeDialogData.btnCancel) === null || _closeDialogData$btnC === void 0 ? void 0 : _closeDialogData$btnC.text;
@@ -593,11 +611,11 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "handleCloseBtnShow",
     value: function handleCloseBtnShow(showClose) {
-      var closeBlock = document.getElementById(componentCloseBlockId);
+      var closeBlock = document.getElementById(COMPONENT_CLOSE_BLOCK_ID);
       if (showClose) {
-        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.remove("".concat(componentCloseBlockId, "-hidden"));
+        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.remove("".concat(COMPONENT_CLOSE_BLOCK_ID, "-hidden"));
       } else if (showClose === false) {
-        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.add("".concat(componentCloseBlockId, "-hidden"));
+        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.add("".concat(COMPONENT_CLOSE_BLOCK_ID, "-hidden"));
       }
     }
 
@@ -711,71 +729,39 @@ var ComponentApp = /*#__PURE__*/function () {
       }
       return sendRenderEvent;
     }()
-  }, {
-    key: "showPopupLoading",
-    value: function showPopupLoading() {
-      var loading = document.createElement('div');
-      loading === null || loading === void 0 ? void 0 : loading.classList.add(loadingId);
-      loading.id = loadingId;
-      loading.innerHTML = '<div class="line"><div></div><div></div><div></div><div></div></div>';
-      loading.style.fontSize = "".concat(getDesignFontSize(), "px");
-      var body = document.getElementsByTagName('body')[0];
-      body === null || body === void 0 ? void 0 : body.appendChild(loading);
-    }
-
-    /**
-     * @description show cashier
-     */
-  }, {
-    key: "setContainerClass",
-    value: function setContainerClass() {
-      var cashier = document.getElementById(componentContainerId);
-      cashier === null || cashier === void 0 ? void 0 : cashier.classList.remove("".concat(componentContainerId, "-hidden-").concat(this.platform));
-      cashier === null || cashier === void 0 ? void 0 : cashier.classList.add("".concat(componentContainerId, "-").concat(this.platform));
-    }
-
     /**
      * @description close cashier
      */
   }, {
     key: "cleanContainer",
     value: function cleanContainer() {
-      var _document$getElementB3;
+      var _document$getElementB4,
+        _this5 = this;
       var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       this._loadAppPromiseResolve && this._loadAppPromiseResolve(true);
       this._performanceData = [];
       this._isInitComponent = false;
-      (_document$getElementB3 = document.getElementById(loadingId)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.remove();
-      this.hideComponentAndCleanDom(immediately);
+      this.app = null;
+      (_document$getElementB4 = document.getElementById(LOADING_ID)) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.remove();
+      this.hideComponentAnimation();
+      var mockup = document.getElementById(MOCKUP_ID);
+      mockup === null || mockup === void 0 ? void 0 : mockup.classList.add("".concat(MOCKUP_ID, "-hidden"));
+      if (immediately) this.cleanElement();else {
+        setTimeout(function () {
+          _this5.cleanElement();
+        }, 300);
+      }
     }
   }, {
-    key: "hideComponentAndCleanDom",
-    value: function hideComponentAndCleanDom() {
-      var _this5 = this;
-      var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var container = document.getElementById(componentContainerId);
+    key: "hideComponentAnimation",
+    value: function hideComponentAnimation() {
+      var container = document.getElementById(COMPONENT_CONTAINER_ID);
       if (container) {
         // size变化动画取消
         container.style.transition = '';
-        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(componentContainerId, "-").concat(this.platform));
-        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(componentContainerId, "-").concat(this.platform, "-animation"));
-        container === null || container === void 0 ? void 0 : container.classList.add("".concat(componentContainerId, "-hidden-").concat(this.platform));
-      }
-      var removeMockupAndApp = function removeMockupAndApp() {
-        var _document$getElementB4;
-        var body = document.getElementsByTagName('body')[0];
-        body.style.overflow = 'auto';
-        var mockup = document.getElementById(mockupId);
-        mockup === null || mockup === void 0 ? void 0 : mockup.remove();
-        if (container) container.style.height = '';
-        (_document$getElementB4 = document.getElementById("".concat(componentContainerId, "-").concat(_this5.platform, "-animation-style"))) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.remove();
-        _this5.removeRetentionPopup();
-        _this5.cleanApp();
-      };
-      if (immediately) removeMockupAndApp();else {
-        setTimeout(function () {
-          removeMockupAndApp();
-        }, 300);
+        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform));
+        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
+        container === null || container === void 0 ? void 0 : container.classList.add("".concat(COMPONENT_CONTAINER_ID, "-hidden-").concat(this.platform));
       }
     }
   }, {
@@ -787,143 +773,33 @@ var ComponentApp = /*#__PURE__*/function () {
         this.dispatchToSDK(EVENT.close.name, {});
       }
     }
-
-    /**
-     * @description create mount node
-     */
-  }, {
-    key: "createBaseElement",
-    value: function createBaseElement() {
-      if (document.getElementById(componentContainerId)) return;
-      componentAddCSS();
-      addSetFontSizeEvent();
-      var amsComponentContainer = document.createElement('div');
-      amsComponentContainer.className = "".concat(componentContainerId, "-hidden-").concat(this.platform);
-      amsComponentContainer.id = componentContainerId;
-      amsSetSize(null, amsComponentContainer);
-      document.body.appendChild(amsComponentContainer);
-      var amsComponentSection = document.createElement('div');
-      amsComponentSection.className = "ams-component-section-".concat(this.platform);
-      amsComponentSection.id = componentSectionId;
-      amsComponentContainer.appendChild(amsComponentSection);
-      this.createCloseBtn();
-    }
-  }, {
-    key: "createInlineBaseElement",
-    value: function createInlineBaseElement(renderParams) {
-      var _renderParams$appeara2;
-      var inlineBaseStyle = document.getElementById(inlineBaseStyleId);
-      if (!inlineBaseStyle) inlineComponentAddCss();
-      if (document.getElementById(componentContainerId)) return;
-      var amsComponentContainer = document.createElement('div');
-      amsComponentContainer.className = "".concat(componentContainerId, "-inline");
-      amsComponentContainer.id = componentContainerId;
-      var selectorDom = document.querySelector(this._selector);
-      if (selectorDom) selectorDom.appendChild(amsComponentContainer);
-      var showLoading = renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$appeara2 = renderParams.appearance) === null || _renderParams$appeara2 === void 0 ? void 0 : _renderParams$appeara2.showLoading;
-      showLoading = typeof showLoading === 'boolean' ? showLoading : true;
-      if (showLoading) showInlineLoading(amsComponentContainer, this.platform);
-    }
-  }, {
-    key: "createCloseBtn",
-    value: function createCloseBtn() {
-      var _this6 = this;
-      var container = document.getElementById(componentContainerId);
-      // close btn
-      var closeBtnHTML = "<img class='".concat(componentCloseBlockId, "-btn-").concat(this.platform, "' src=\"").concat(closeImg, "\"/>");
-      var closeBlock = document.createElement('div');
-      closeBlock.classList.add("".concat(componentCloseBlockId, "-").concat(this.platform), "".concat(componentCloseBlockId, "-hidden"));
-      closeBlock.id = componentCloseBlockId;
-      closeBlock.innerHTML = closeBtnHTML;
-      closeBlock.addEventListener(this._clickEventName, function () {
-        _this6.closeBtnFunc();
-      });
-      if (container) container.appendChild(closeBlock);
-    }
-  }, {
-    key: "createRetentionPopup",
-    value: function createRetentionPopup() {
-      // retention popup
-      var retentionPopup = document.createElement('div');
-      retentionPopup.id = componentRetentionId;
-      retentionPopup.classList.add("".concat(componentRetentionId, "-").concat(this.platform));
-      retentionPopup.innerHTML = "\n    <span id=\"".concat(componentRetentionId, "-title\" class=\"").concat(componentRetentionId, "-title-").concat(this.platform, "\">\n      Are you sure you want to leave?\n    </span>\n    <span\n      id=\"").concat(componentRetentionId, "-sub-title\"\n      class=\"").concat(componentRetentionId, "-sub-title-").concat(this.platform, "\"\n    >\n      If you leave this page, you'll have to start over again.\n    </span>\n    <div class=\"").concat(componentRetentionId, "-btn-block-").concat(this.platform, "\">\n      <div id=\"").concat(componentRetentionId, "-remain\" class=\"").concat(componentRetentionId, "-remain-").concat(this.platform, "\">\n        Continue Payment\n      </div>\n      <div id=\"").concat(componentRetentionId, "-leave\" class=\"").concat(componentRetentionId, "-leave-").concat(this.platform, "\">\n        Leave\n      </div>\n    </div>");
-      document.body.appendChild(retentionPopup);
-      var remainBtn = document.getElementById("".concat(componentRetentionId, "-remain"));
-      if (remainBtn) {
-        remainBtn.addEventListener(this._clickEventName, this.hideRetentionPopup.bind(this));
-      }
-      var leaveBtn = document.getElementById("".concat(componentRetentionId, "-leave"));
-      if (leaveBtn) {
-        leaveBtn.addEventListener(this._clickEventName, this.retentionPopupLeaveFunc.bind(this));
-      }
-    }
   }, {
     key: "retentionPopupLeaveFunc",
     value: function retentionPopupLeaveFunc() {
       this.dispatchToSDK(EVENT.close.name, {});
-      this.hideRetentionPopup();
+      this.hideRetentionPopupFunc();
       this.cleanContainer();
     }
   }, {
     key: "removeRetentionPopup",
-    value: function removeRetentionPopup() {
-      var _document$getElementB5;
-      var remainBtn = document.getElementById("".concat(componentRetentionId, "-remain"));
-      if (remainBtn) {
-        remainBtn.removeEventListener(this._clickEventName, this.hideRetentionPopup);
-      }
-      var leaveBtn = document.getElementById("".concat(componentRetentionId, "-leave"));
-      if (leaveBtn) {
-        leaveBtn.removeEventListener(this._clickEventName, this.retentionPopupLeaveFunc);
-      }
-      (_document$getElementB5 = document.getElementById(componentRetentionId)) === null || _document$getElementB5 === void 0 ? void 0 : _document$getElementB5.remove();
+    value: function removeRetentionPopup(platform) {
+      _removeRetentionPopup(platform, this.hideRetentionPopupFunc, this.retentionPopupLeaveFunc);
     }
   }, {
     key: "showRetentionPopup",
     value: function showRetentionPopup() {
-      var retentionPopup = document.getElementById(componentRetentionId);
-      var container = document.getElementById(componentContainerId);
+      var retentionPopup = document.getElementById(COMPONENT_RETENTION_ID);
+      var container = document.getElementById(COMPONENT_CONTAINER_ID);
       if (retentionPopup) {
-        container === null || container === void 0 ? void 0 : container.classList.add("".concat(componentContainerId, "-opacity"));
-        retentionPopup.classList.remove("".concat(componentRetentionId, "-hidden"));
-        retentionPopup.classList.add("".concat(componentRetentionId, "-show"));
+        container === null || container === void 0 ? void 0 : container.classList.add("".concat(COMPONENT_CONTAINER_ID, "-opacity"));
+        retentionPopup.classList.remove("".concat(COMPONENT_RETENTION_ID, "-hidden"));
+        retentionPopup.classList.add("".concat(COMPONENT_RETENTION_ID, "-show"));
       }
     }
   }, {
-    key: "hideRetentionPopup",
-    value: function hideRetentionPopup() {
-      var retentionPopup = document.getElementById(componentRetentionId);
-      var container = document.getElementById(componentContainerId);
-      if (retentionPopup) {
-        retentionPopup.classList.remove("".concat(componentRetentionId, "-show"));
-        retentionPopup.classList.add("".concat(componentRetentionId, "-hidden"));
-        setTimeout(function () {
-          retentionPopup.classList.remove("".concat(componentRetentionId, "-hidden"));
-          container === null || container === void 0 ? void 0 : container.classList.remove("".concat(componentContainerId, "-opacity"));
-        }, 300);
-      }
-    }
-    /**
-     * @description create mockup
-     */
-  }, {
-    key: "createMockup",
-    value: function createMockup() {
-      var body = document.getElementsByTagName('body')[0];
-      body.style.overflow = 'hidden';
-      var mockup = document.createElement('div');
-      mockup.style.width = '100vw';
-      mockup.style.height = '100vh';
-      mockup.style.position = 'fixed';
-      mockup.style.top = '0';
-      mockup.style.left = '0';
-      mockup.style.zIndex = '1000';
-      mockup.style.background = '#ffffff';
-      mockup.style.opacity = '0.5';
-      mockup.style.display = 'none';
-      mockup.id = mockupId;
-      body.appendChild(mockup);
+    key: "hideRetentionPopupFunc",
+    value: function hideRetentionPopupFunc() {
+      hideRetentionPopup();
     }
   }, {
     key: "submitForm",

package/esm/types/index.d.ts

@@ -235,6 +235,16 @@ export interface CashierSdkActionQueryResult {
     schemeUrl?: string;
     authUrl?: string;
 }
+export declare enum eventCodeEnum {
+    SDK_START_OF_LOADING = "SDK_START_OF_LOADING",
+    SDK_END_OF_LOADING = "SDK_END_OF_LOADING",
+    SDK_INTERNAL_ERROR = "SDK_INTERNAL_ERROR",
+    SDK_CREATEPAYMENT_PARAMETER_ERROR = "SDK_CREATEPAYMENT_PARAMETER_ERROR",
+    SDK_INIT_PARAMETER_ERROR = "SDK_INIT_PARAMETER_ERROR",
+    SDK_CREATECOMPONENT_ERROR = "SDK_CREATECOMPONENT_ERROR",
+    SDK_CALL_URL_ERROR = "SDK_CALL_URL_ERROR",
+    SDK_CALL_URL_SUCCESS = "SDK_CALL_URL_SUCCESS"
+}
 declare global {
     interface Window {
         [key: string]: any;

package/esm/types/index.js

@@ -120,4 +120,15 @@ export var errorEnum = /*#__PURE__*/function (errorEnum) {
   errorEnum["SIGNIN"] = "SIGNIN";
   errorEnum["GETSIGNPARAMSERROR"] = "GETSIGNPARAMSERROR";
   return errorEnum;
+}({});
+export var eventCodeEnum = /*#__PURE__*/function (eventCodeEnum) {
+  eventCodeEnum["SDK_START_OF_LOADING"] = "SDK_START_OF_LOADING";
+  eventCodeEnum["SDK_END_OF_LOADING"] = "SDK_END_OF_LOADING";
+  eventCodeEnum["SDK_INTERNAL_ERROR"] = "SDK_INTERNAL_ERROR";
+  eventCodeEnum["SDK_CREATEPAYMENT_PARAMETER_ERROR"] = "SDK_CREATEPAYMENT_PARAMETER_ERROR";
+  eventCodeEnum["SDK_INIT_PARAMETER_ERROR"] = "SDK_INIT_PARAMETER_ERROR";
+  eventCodeEnum["SDK_CREATECOMPONENT_ERROR"] = "SDK_CREATECOMPONENT_ERROR";
+  eventCodeEnum["SDK_CALL_URL_ERROR"] = "SDK_CALL_URL_ERROR";
+  eventCodeEnum["SDK_CALL_URL_SUCCESS"] = "SDK_CALL_URL_SUCCESS";
+  return eventCodeEnum;
 }({});

package/package.json

@@ -1 +1 @@
-{"name":"@alipay/ams-checkout","version":"0.0.1691743027-dev.3","description":"","author":"","main":"esm/index.js","module":"esm/index.js","typings":"esm/index.d.ts","files":["dist","esm","LEGAL.md","LICENSE","README.md"],"scripts":{"build":"father build","ci":"npm run lint","cov":"jest --coverage","format":"prettier --write --no-error-on-unmatched-pattern \"**/*.{js,jsx,ts,tsx,md,json,css,less}\"","lint":"eslint ./src","test":"jest"},"dependencies":{"axios":"^1.3.4","uuid":"^9.0.0"},"devDependencies":{"@babel/core":"^7.20.7","@babel/preset-env":"^7.20.2","@testing-library/jest-dom":"^5.1.1","@testing-library/react":"^9.5.0","@types/jest":"^29.2.4","@types/uuid":"^9.0.0","@typescript-eslint/parser":"^5.60.0","babel-jest":"^29.3.1","babel-loader":"^9.1.0","babel-plugin-import":"^1.13.0","eslint":"^8.36.0","father":"^4.2.3","jest":"^29.5.0","jest-environment-jsdom":"^29.3.1","prettier":"^2.8.4","prettier-plugin-organize-imports":"^3.2.3","prettier-plugin-packagejson":"^2.4.5","ts-jest":"^29.0.3","ts-node":"^10.9.1","typescript":"^4.9.5"},"engines":{},"publishConfig":{"access":"public"}}
+{"name":"@alipay/ams-checkout","version":"0.0.1691743027-dev.5","description":"","author":"","main":"esm/index.js","module":"esm/index.js","typings":"esm/index.d.ts","files":["dist","esm","LEGAL.md","LICENSE","README.md"],"scripts":{"build":"father build","ci":"npm run lint","cov":"jest --coverage","format":"prettier --write --no-error-on-unmatched-pattern \"**/*.{js,jsx,ts,tsx,md,json,css,less}\"","lint":"eslint ./src","test":"jest"},"dependencies":{"axios":"^1.3.4","uuid":"^9.0.0"},"devDependencies":{"@babel/core":"^7.20.7","@babel/preset-env":"^7.20.2","@testing-library/jest-dom":"^5.1.1","@testing-library/react":"^9.5.0","@types/jest":"^29.2.4","@types/uuid":"^9.0.0","@typescript-eslint/parser":"^5.60.0","babel-jest":"^29.3.1","babel-loader":"^9.1.0","babel-plugin-import":"^1.13.0","eslint":"^8.36.0","father":"^4.2.3","jest":"^29.5.0","jest-environment-jsdom":"^29.3.1","prettier":"^2.8.4","prettier-plugin-organize-imports":"^3.2.3","prettier-plugin-packagejson":"^2.4.5","ts-jest":"^29.0.3","ts-node":"^10.9.1","typescript":"^4.9.5"},"engines":{},"publishConfig":{"access":"public"}}