@alipay/ams-checkout 0.0.1691995963-dev.1 → 0.0.1692935171-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/esm/index.js CHANGED
@@ -1,6 +1,8 @@
1
1
  function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
2
2
  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); } }
3
3
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
4
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
5
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
4
6
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
5
7
  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
6
8
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
@@ -9,9 +11,6 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
9
11
  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
10
12
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
11
13
  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
12
- 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; }
13
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
14
- function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
15
14
  /**
16
15
  * Copyright (c) 2022 International Business Group, Ant Group. All rights reserved.
17
16
  *
@@ -19,38 +18,17 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
19
18
  * 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
20
19
  * 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.
21
20
  */
22
- import { createComponent, mixinComponentConstructor } from "./core/component/index";
23
- import { confirmPayment, createPayment, mixinDropInConstructor, _subscribeFromCheckoutPlugin } from "./core/drop-in/index";
24
- import AMSSDK from "./core/instance";
21
+ import { AMSComponent } from "./core/component/index";
25
22
  export * from "./types";
26
- export var AMSCheckout = /*#__PURE__*/function (_AMSSDK) {
27
- _inherits(AMSCheckout, _AMSSDK);
23
+ export var AMSCheckout = /*#__PURE__*/function (_AMSComponent) {
24
+ _inherits(AMSCheckout, _AMSComponent);
28
25
  var _super = _createSuper(AMSCheckout);
29
- function AMSCheckout(options) {
30
- var _this;
26
+ function AMSCheckout() {
31
27
  _classCallCheck(this, AMSCheckout);
32
- _this = _super.call(this, options);
33
- _defineProperty(_assertThisInitialized(_this), "createComponent", void 0);
34
- _defineProperty(_assertThisInitialized(_this), "createPayment", void 0);
35
- _defineProperty(_assertThisInitialized(_this), "confirmPayment", void 0);
36
- Object.defineProperty(_assertThisInitialized(_this), 'createComponent', {
37
- value: createComponent
38
- });
39
- Object.defineProperty(_assertThisInitialized(_this), 'createPayment', {
40
- value: createPayment
41
- });
42
- Object.defineProperty(_assertThisInitialized(_this), 'confirmPayment', {
43
- value: confirmPayment
44
- });
45
- Object.defineProperty(_assertThisInitialized(_this), '_subscribeFromCheckoutPlugin', {
46
- value: _subscribeFromCheckoutPlugin
47
- });
48
- mixinComponentConstructor(options, _assertThisInitialized(_this));
49
- mixinDropInConstructor(options, _assertThisInitialized(_this));
50
- return _this;
28
+ return _super.apply(this, arguments);
51
29
  }
52
30
  return _createClass(AMSCheckout);
53
- }(AMSSDK);
31
+ }(AMSComponent);
54
32
  export var AMSAutoDebit = /*#__PURE__*/function (_AMSCheckout) {
55
33
  _inherits(AMSAutoDebit, _AMSCheckout);
56
34
  var _super2 = _createSuper(AMSAutoDebit);
@@ -1,15 +1,14 @@
1
- import { Ianalytics } from '../../types';
2
- export declare const getAppPath: (environment: string | undefined, appVersion: string, componentName: string, productSceneVersion: string, extendInfo: string) => any;
1
+ import { componentSignEnum, Ianalytics } from '../../types';
2
+ export declare const getAppPath: (environment: string | undefined, appVersion: string, componentSign: componentSignEnum, productSceneVersion: string, extendInfo: string) => any;
3
3
  export declare const getAppDomain: (domainParams: {
4
4
  environment: string;
5
5
  appVersion: string;
6
- componentName: string;
6
+ componentSign: componentSignEnum;
7
7
  productSceneVersion: string;
8
8
  extendInfo: string;
9
9
  }) => string;
10
10
  export declare const getIframeUrl: (iframeParams: {
11
- componentName: string;
12
- appearance: Record<string, string>;
11
+ componentSign: componentSignEnum;
13
12
  analytics?: Ianalytics;
14
13
  productSceneVersion: string;
15
14
  environment: string;
@@ -21,4 +20,4 @@ export declare const getIframeUrl: (iframeParams: {
21
20
  /**
22
21
  * @description Create iframe
23
22
  */
24
- export declare const createIframe: (mode: string) => HTMLIFrameElement;
23
+ export declare const createIframe: (mode: string, platform: 'mobile' | 'desktop') => HTMLIFrameElement;
@@ -9,74 +9,57 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
9
9
  * 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
10
10
  * 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.
11
11
  */
12
- import { sdkVersion } from "../../config/index";
13
- import { componentNameEnum } from "../../types";
12
+ import { marmptMap, sdkVersion } from "../../config/index";
13
+ import { componentSignEnum } from "../../types";
14
14
  import { getViewPort, queryParse, serialize } from "../../util/index";
15
+ var getAppVersion = function getAppVersion(_extendInfo) {
16
+ try {
17
+ var info = JSON.parse(_extendInfo);
18
+ return info.versionMap.web[sdkVersion].targetWebVerison;
19
+ } catch (error) {
20
+ return '';
21
+ }
22
+ };
23
+ var getFinalProductSceneVersion = function getFinalProductSceneVersion(componentSign, productSceneVersion) {
24
+ var _signSupportMap;
25
+ var signSupportMap = (_signSupportMap = {}, _defineProperty(_signSupportMap, componentSignEnum.NONE, ['']), _defineProperty(_signSupportMap, componentSignEnum.AUTO_DEBIT_WALLET, ['1.0']), _defineProperty(_signSupportMap, componentSignEnum.CASHIER_PAYMENT_BANK, ['1.0']), _defineProperty(_signSupportMap, componentSignEnum.CASHIER_PAYMENT_CARD, ['1.0']), _defineProperty(_signSupportMap, componentSignEnum.EASY_PAY_WALLET, ['1.0', '2.0']), _signSupportMap);
26
+ var supportProductSceneVersion = signSupportMap[componentSign];
27
+ // 从左到右,从旧到新
28
+ var isSupport = supportProductSceneVersion.find(function (it) {
29
+ return it === productSceneVersion;
30
+ });
31
+ var finalProductSceneVersion = supportProductSceneVersion[supportProductSceneVersion.length - 1];
32
+ return isSupport ? productSceneVersion : finalProductSceneVersion;
33
+ };
15
34
  export var getAppPath = function getAppPath() {
16
- var _componentMap;
17
35
  var environment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'prod';
18
36
  var appVersion = arguments.length > 1 ? arguments[1] : undefined;
19
- var componentName = arguments.length > 2 ? arguments[2] : undefined;
37
+ var componentSign = arguments.length > 2 ? arguments[2] : undefined;
20
38
  var productSceneVersion = arguments.length > 3 ? arguments[3] : undefined;
21
39
  var extendInfo = arguments.length > 4 ? arguments[4] : undefined;
22
40
  var _ref = queryParse() || {},
23
41
  urlTestHost = _ref.host;
24
- var host = '';
25
- var getAppVersion = function getAppVersion(_extendInfo) {
26
- try {
27
- var info = JSON.parse(_extendInfo);
28
- return info.versionMap.web[sdkVersion].targetWebVerison || appVersion;
29
- } catch (error) {
30
- return appVersion;
31
- }
32
- };
33
- var marmptMap = {
34
- dev: 'http://page.alipay.net/page/antom-web-checkout/src/component-app',
35
- sit: 'http://page.test.alipay.net/page/antom-web-checkout/src/component-app',
36
- pre: 'https://pre.ac.alipay.com/page/antom-web-checkout/src/component-app',
37
- sandbox: 'https://ac.alipay.com/page/antom-web-checkout/src/component-app',
38
- light_sandbox: 'https://ac.alipay.com/page/antom-web-checkout/src/component-app',
39
- prod: 'https://ac.alipay.com/page/antom-web-checkout/src/component-app'
40
- };
41
- var finalAppVersion = getAppVersion(extendInfo);
42
- var getFinalProductSceneVersion = function getFinalProductSceneVersion(supportProductSceneVersion) {
43
- // 从左到右,从旧到新
44
- var isSupport = supportProductSceneVersion.find(function (it) {
45
- return it === productSceneVersion;
46
- });
47
- var finalProductSceneVersion = supportProductSceneVersion[supportProductSceneVersion.length - 1];
48
- if (isSupport) finalProductSceneVersion = productSceneVersion;
49
- return finalProductSceneVersion;
50
- };
51
- var componentMap = (_componentMap = {}, _defineProperty(_componentMap, componentNameEnum.card, function () {
52
- host = "".concat(marmptMap[environment], "/").concat(componentNameEnum.card, "/index.").concat(finalAppVersion, ".html");
53
- }), _defineProperty(_componentMap, componentNameEnum.easyPay, function () {
54
- var finalProductSceneVersion = getFinalProductSceneVersion(['1.0', '2.0']);
55
- host = "".concat(marmptMap[environment], "/").concat(componentNameEnum.easyPay, "/").concat(finalProductSceneVersion, "/index.").concat(finalAppVersion, ".html");
56
- }), _defineProperty(_componentMap, componentNameEnum.autoDebit, function () {
57
- var finalProductSceneVersion = getFinalProductSceneVersion(['1.0']);
58
- host = "".concat(marmptMap[environment], "/").concat(componentNameEnum.autoDebit, "/").concat(finalProductSceneVersion, "/index.").concat(finalAppVersion, ".html");
59
- }), _componentMap);
60
- if (componentMap[componentName]) componentMap[componentName]();
42
+ var finalAppVersion = getAppVersion(extendInfo) || appVersion;
43
+ var finalProductSceneVersion = getFinalProductSceneVersion(componentSign, productSceneVersion);
44
+
61
45
  // only for test while testurl?host=https://xxxxx.test.html
62
46
  if (urlTestHost && !['sandbox', 'light_sandbox', 'prod'].includes(environment)) {
63
47
  return urlTestHost;
64
48
  }
65
- return host;
49
+ return "".concat(marmptMap[environment], "/").concat(componentSign, "/").concat(finalProductSceneVersion, "/index.").concat(finalAppVersion, ".html");
66
50
  };
67
51
  export var getAppDomain = function getAppDomain(domainParams) {
68
52
  var environment = domainParams.environment,
69
53
  appVersion = domainParams.appVersion,
70
- componentName = domainParams.componentName,
54
+ componentSign = domainParams.componentSign,
71
55
  productSceneVersion = domainParams.productSceneVersion,
72
56
  extendInfo = domainParams.extendInfo;
73
57
  var reg = /^https?:\/\/([^/<>\s]+\.?)*/;
74
- var macth = reg.exec(getAppPath(environment, appVersion, componentName, productSceneVersion, extendInfo));
58
+ var macth = reg.exec(getAppPath(environment, appVersion, componentSign, productSceneVersion, extendInfo));
75
59
  return macth && macth[0] || '';
76
60
  };
77
61
  export var getIframeUrl = function getIframeUrl(iframeParams) {
78
- var componentName = iframeParams.componentName,
79
- appearance = iframeParams.appearance,
62
+ var componentSign = iframeParams.componentSign,
80
63
  _iframeParams$analyti = iframeParams.analytics,
81
64
  analytics = _iframeParams$analyti === void 0 ? {
82
65
  enabled: true
@@ -87,7 +70,7 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
87
70
  extendInfo = iframeParams.extendInfo,
88
71
  locale = iframeParams.locale,
89
72
  instanceId = iframeParams.instanceId;
90
- var path = getAppPath(environment, appVersion, componentName, productSceneVersion, extendInfo || '');
73
+ var path = getAppPath(environment, appVersion, componentSign, productSceneVersion, extendInfo || '');
91
74
  var initialScale = 1;
92
75
  var scale = getViewPort('initial-scale') || initialScale;
93
76
  var _queryParse = queryParse(),
@@ -98,42 +81,43 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
98
81
  _queryParse$groupId = _queryParse.groupId,
99
82
  groupId = _queryParse$groupId === void 0 ? '' : _queryParse$groupId,
100
83
  LOCAL_MOCK = _queryParse.LOCAL_MOCK;
101
- var urlParams = Object.assign({
84
+ var urlParams = Object.assign({}, {
102
85
  locale: locale,
103
86
  scale: scale,
104
87
  instanceId: instanceId,
105
- sandbox: environment === 'light_sandbox' || _light_sandbox === 'true' ? 'true' : 'false',
106
88
  analyticsEnabled: (analytics === null || analytics === void 0 ? void 0 : analytics.enabled) === false ? 'false' : 'true',
107
89
  sdkVersion: sdkVersion,
108
- refUrl: window.location.href,
109
- shadow: environment === 'sandbox' || _sandbox === 'true' ? 'true' : 'false',
110
- requestHost: requestHost,
111
- groupId: groupId,
112
- LOCAL_MOCK: LOCAL_MOCK
113
- }, appearance);
90
+ refUrl: window.location.href
91
+ });
92
+ if (LOCAL_MOCK) urlParams.LOCAL_MOCK = LOCAL_MOCK;
93
+ if (requestHost) urlParams.requestHost = requestHost;
94
+ if (groupId) urlParams.groupId = groupId;
95
+ if (environment === 'light_sandbox' || _light_sandbox === 'true') urlParams.sandbox = 'true';
96
+ if (environment === 'sandbox' || _sandbox === 'true') urlParams.shadow = 'true';
114
97
  var locationSearch = serialize(urlParams);
115
98
  return "".concat(path, "?").concat(locationSearch);
116
99
  };
117
- var getIframeId = function getIframeId(UIMode) {
118
- var IdMap = {
119
- dropin: 'checkout-dropin',
120
- component: 'checkout-component'
121
- };
122
- return IdMap[UIMode] || 'checkout-component';
123
- };
124
100
 
125
101
  /**
126
102
  * @description Create iframe
127
103
  */
128
- export var createIframe = function createIframe(mode) {
104
+ export var createIframe = function createIframe(mode, platform) {
105
+ var getIframeId = function getIframeId() {
106
+ var IdMap = {
107
+ dropin: "ams-checkout-dropin-".concat(platform),
108
+ component: "ams-checkout-component-".concat(platform)
109
+ };
110
+ return IdMap[mode] || 'ams-checkout-component';
111
+ };
129
112
  var iframe = document.createElement('iframe');
130
- var iframeId = getIframeId(mode);
113
+ var iframeId = getIframeId();
131
114
  var none = '0';
132
115
  var width = '100%';
133
116
  iframe.id = iframeId;
134
117
  iframe.style.height = none;
135
118
  iframe.style.width = width;
136
119
  iframe.style.border = none;
120
+ iframe.style.opacity = none;
137
121
  iframe.style.overflow = 'hidden';
138
122
  return iframe;
139
123
  };
@@ -5,4 +5,7 @@
5
5
  * 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
6
6
  * 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.
7
7
  */
8
- export declare function componentAddCSS(): void;
8
+ import { platformEnum } from '../../types';
9
+ export declare const componentAddCSS: () => void;
10
+ export declare const inlineComponentAddCss: () => void;
11
+ export declare const showInlineLoading: (_selector: HTMLDivElement, platform: platformEnum) => void;
@@ -5,11 +5,39 @@
5
5
  * 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
6
6
  * 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.
7
7
  */
8
-
9
- 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: 1px;\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}\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: 8px;\n overflow: hidden;\n transform-origin: 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: translateX(-50%) translateY(-50%) scale(1);\n opacity: 1\n }\n\n 80% {\n opacity: 0\n }\n \n 100% {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.4);\n }\n}\n\n@keyframes ams-component-container-zoom-in {\n 0% {\n transform: translateX(-50%) translateY(-50%) scale(0.4);\n opacity: 0\n }\n\n 80% {\n opacity: 1\n }\n\n 100% {\n opacity: 1;\n transform: translateX(-50%) translateY(-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-fill-mode: forwards;\n animation: ams-component-container-zoom-out 0.3s ease-in-out;\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\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-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-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}\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 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: 600;\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: 600;\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: 600;\n text-align: center;\n box-sizing: border-box;\n color: #FFFFFF;\n}\n\n.ams-component-retention-remain-mobile {\n width: 100%;\n height: 44px;\n font-size: 16px;\n line-height: 44px;\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}\n\n#ams-component-retention-leave {\n border-radius: 100px;\n border: 1px solid #0079FF;\n font-style: normal;\n font-weight: 600;\n text-align: center;\n box-sizing: border-box;\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}\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}\n\n";
10
- export function componentAddCSS() {
8
+ import { platformEnum } from "../../types";
9
+ import { amsSetSize } from "../../util";
10
+ var componentContainerId = 'ams-component-container';
11
+ var componentSectionId = 'ams-component-section';
12
+ var componentCloseBlockId = 'asm-component-close-block';
13
+ var componentRetentionId = 'ams-component-retention';
14
+ var mockupId = 'ams-component-mockup';
15
+ var loadingId = 'ams-component-loading';
16
+ var listenerPrefix = '_ams_sdk_component_listener';
17
+ var inlineBaseStyleId = 'ams-inline-component-style';
18
+ var inlineImgClassName = 'inline-loading';
19
+ var loadTimeLimit = 15000;
20
+ 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}\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: 8px;\n overflow: hidden;\n transform-origin: 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 opacity: 1\n }\n\n 100% {\n transform: translate(-50%, -50%) scale(0.4);\n opacity: 0\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-fill-mode: forwards;\n animation: ams-component-container-zoom-out 0.3s ease-in-out;\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\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}\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 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}\n\n.ams-component-retention-remain-mobile {\n width: 100%;\n height: 44px;\n font-size: 16px;\n line-height: 44px;\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}\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}\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}\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}\n\n";
21
+ export var componentAddCSS = function componentAddCSS() {
11
22
  var style = document.createElement('style');
12
23
  style.type = 'text/css';
13
24
  style.innerHTML = componentCss;
14
25
  document.head.appendChild(style);
15
- }
26
+ };
27
+ var inlineComponentCss = "#ams-checkout-component-desktop{\n border-radius: 8px;\n position: absolute;\n top: 0;\n left: 0;\n}\n#ams-checkout-component-mobile{\n position: absolute;\n top: 0;\n left: 0;\n}\n.".concat(componentContainerId, "-inline{\n width: 100%;\n height: auto;\n position: relative;\n line-height: 0;\n display: flex;\n}\n#").concat(loadingId, "{\n width: 100%;\n flex: 1;\n}\n.").concat(inlineImgClassName, "{\n width: 100%;\n height: auto;\n object-fit: contain;\n box-sizing: border-box;\n}\n.").concat(inlineImgClassName, "-mobile{\n padding: 0 0.16em;\n}\n.").concat(inlineImgClassName, "-desktop{}\n");
28
+ export var inlineComponentAddCss = function inlineComponentAddCss() {
29
+ var style = document.createElement('style');
30
+ style.id = 'ams-inline-component-style';
31
+ style.type = 'text/css';
32
+ style.innerHTML = inlineComponentCss;
33
+ document.head.appendChild(style);
34
+ };
35
+ export var showInlineLoading = function showInlineLoading(_selector, platform) {
36
+ var loading = document.createElement('div');
37
+ loading.id = loadingId;
38
+ if (platform === platformEnum.desktop) loading.innerHTML = "<svg class=\"".concat(inlineImgClassName, " ").concat(inlineImgClassName, "-").concat(platform, "\" width=\"740\" height=\"360\" viewBox=\"0 0 740 360\" fill=\"none\" xmlns=\"\">\n <rect width=\"740\" height=\"360\" rx=\"12\" fill=\"#F6F6F6\"/>\n <rect opacity=\"0.7\" x=\"44\" y=\"44\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <rect opacity=\"0.7\" x=\"94\" y=\"44\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <rect opacity=\"0.7\" x=\"144\" y=\"44\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M136 100H48C43.5817 100 40 103.582 40 108C40 112.418 43.5817 116 48 116H136C140.418 116 144 112.418 144 108C144 103.582 140.418 100 136 100Z\" fill=\"#E1E6ED\"/>\n </g>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M682 126H58C48.0589 126 40 134.059 40 144C40 153.941 48.0589 162 58 162H682C691.941 162 700 153.941 700 144C700 134.059 691.941 126 682 126Z\" fill=\"#E1E6ED\"/>\n </g>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M682 182H58C48.0589 182 40 190.059 40 200C40 209.941 48.0589 218 58 218H682C691.941 218 700 209.941 700 200C700 190.059 691.941 182 682 182Z\" fill=\"#E1E6ED\"/>\n </g>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M504 274H64C52.9543 274 44 282.954 44 294C44 305.046 52.9543 314 64 314H504C515.046 314 524 305.046 524 294C524 282.954 515.046 274 504 274Z\" fill=\"#E1E6ED\"/>\n </g>\n </svg>");
39
+ if (platform === platformEnum.mobile) loading.innerHTML = "<svg class=\"".concat(inlineImgClassName, " ").concat(inlineImgClassName, "-").concat(platform, "\" width=\"358\" height=\"186\" viewBox=\"0 0 358 186\" fill=\"none\" xmlns=\"\">\n <g clip-path=\"url(#clip0_2543_91192)\">\n <rect width=\"358\" height=\"186\" fill=\"white\"/>\n <g clip-path=\"url(#clip1_2543_91192)\">\n <rect width=\"358\" height=\"186\" fill=\"white\"/>\n <rect width=\"358\" height=\"40\" fill=\"white\"/>\n <rect opacity=\"0.7\" x=\"4\" y=\"4\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <rect opacity=\"0.7\" x=\"54\" y=\"4\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <rect opacity=\"0.7\" x=\"104\" y=\"4\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <g clip-path=\"url(#clip2_2543_91192)\">\n <rect width=\"358\" height=\"120\" transform=\"translate(0 66)\" fill=\"white\"/>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M95 66H9C4.02944 66 0 70.0294 0 75C0 79.9706 4.02943 84 9 84H95C99.9706 84 104 79.9706 104 75C104 70.0294 99.9706 66 95 66Z\" fill=\"#E1E6ED\"/>\n </g>\n <g clip-path=\"url(#clip3_2543_91192)\">\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M340 94H18C8.05888 94 0 102.059 0 112C0 121.941 8.05887 130 18 130H340C349.941 130 358 121.941 358 112C358 102.059 349.941 94 340 94Z\" fill=\"#E1E6ED\"/>\n </g>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M340 150H18C8.05888 150 0 158.059 0 168C0 177.941 8.05887 186 18 186H340C349.941 186 358 177.941 358 168C358 158.059 349.941 150 340 150Z\" fill=\"#E1E6ED\"/>\n </g>\n </g>\n </g>\n </g>\n </g>\n <defs>\n <clipPath id=\"clip0_2543_91192\">\n <rect width=\"358\" height=\"186\" fill=\"white\"/>\n </clipPath>\n <clipPath id=\"clip1_2543_91192\">\n <rect width=\"358\" height=\"186\" fill=\"white\"/>\n </clipPath>\n <clipPath id=\"clip2_2543_91192\">\n <rect width=\"358\" height=\"120\" fill=\"white\" transform=\"translate(0 66)\"/>\n </clipPath>\n <clipPath id=\"clip3_2543_91192\">\n <rect width=\"358\" height=\"92\" fill=\"white\" transform=\"translate(0 94)\"/>\n </clipPath>\n </defs>\n </svg>\n ");
40
+ if (_selector) _selector.appendChild(loading);
41
+ var loadingDom = document.getElementById(loadingId);
42
+ amsSetSize(null, loadingDom);
43
+ };
@@ -1,21 +1,24 @@
1
1
  import type AMSCheckout from '../../core/instance';
2
- import type { IappendIframeNodesParams, IcreateComponent } from '../../types';
3
- import { componentNameEnum } from '../../types';
2
+ import type { IappendIframeNodesParams, Iselector } from '../../types';
3
+ import { componentSignEnum, platformEnum, renderDisplayTypeEnum } from '../../types';
4
+ type IrenderFuncParams = (context: ComponentApp, selector: Iselector, renderDisplayType: renderDisplayTypeEnum) => Promise<void>;
4
5
  export default class ComponentApp {
5
6
  app: any;
6
7
  appDomain: string;
7
8
  AMSSDK: AMSCheckout;
8
- platform: 'desktop' | 'mobile';
9
+ platform: platformEnum;
9
10
  private createIframeNode;
10
11
  private _selector;
11
12
  private _appVersion;
12
13
  private _isRetention;
13
14
  private _actionQueryPromise;
15
+ private _loadAppPromiseResolve;
14
16
  private _renderParams;
15
- private _componentName;
17
+ private _componentSign;
16
18
  private _performanceData;
17
19
  private _isInitComponent;
18
20
  private _clickEventName;
21
+ private _renderDisplayType;
19
22
  constructor();
20
23
  /**
21
24
  * @description Cancel listening and destroy the dom
@@ -28,11 +31,13 @@ export default class ComponentApp {
28
31
  /**
29
32
  * @description Set the rendering capability of the cashier plug-in. Different technology stacks have some differences in the packaging and use of rendering functions
30
33
  */
31
- setRender(createIframeNode: (context: ComponentApp, params: IcreateComponent) => Promise<void>): void;
34
+ setRender(renderFunc: IrenderFuncParams): void;
32
35
  /**
33
36
  * @description render iframe content
34
37
  */
35
- appendIframeNodes(componentName: componentNameEnum, renderParams: IappendIframeNodesParams): Promise<void | [void, any]>;
38
+ appendIframeNodes(componentSign: componentSignEnum, renderParams: IappendIframeNodesParams): Promise<void>;
39
+ private renderPopupLoading;
40
+ private createLoadAppPromise;
36
41
  /**
37
42
  * @description Interface request
38
43
  */
@@ -64,7 +69,12 @@ export default class ComponentApp {
64
69
  /**
65
70
  * @description Send message to iframe
66
71
  */
67
- private dispatchToApp;
72
+ dispatchToApp(payload: {
73
+ context: {
74
+ event: string;
75
+ data: any;
76
+ };
77
+ }): any;
68
78
  /**
69
79
  * @description Subscribe to messages from SDK
70
80
  */
@@ -73,21 +83,22 @@ export default class ComponentApp {
73
83
  * @description Send rendering events to iframe
74
84
  */
75
85
  private sendRenderEvent;
76
- private showLoading;
86
+ private showPopupLoading;
77
87
  /**
78
88
  * @description show cashier
79
89
  */
80
- private showCashier;
90
+ private setContainerClass;
81
91
  /**
82
92
  * @description close cashier
83
93
  */
84
- private closeCashier;
94
+ private cleanContainer;
85
95
  private hideComponentAndCleanDom;
86
96
  private closeBtnFunc;
87
97
  /**
88
98
  * @description create mount node
89
99
  */
90
- private createMountElement;
100
+ private createBaseElement;
101
+ private createInlineBaseElement;
91
102
  private createCloseBtn;
92
103
  private createRetentionPopup;
93
104
  private retentionPopupLeaveFunc;
@@ -100,3 +111,4 @@ export default class ComponentApp {
100
111
  private createMockup;
101
112
  private submitForm;
102
113
  }
114
+ export {};