@alipay/ams-checkout 0.0.1703483942-dev.6 → 0.0.1703483942-dev.8
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.
@@ -1,5 +1,4 @@
|
|
1
|
-
import { componentSignEnum, Ianalytics } from '../../types';
|
2
|
-
import { renderDisplayTypeEnum } from '../../types/index';
|
1
|
+
import { renderDisplayTypeEnum, componentSignEnum, Ianalytics } from '../../types';
|
3
2
|
export declare const getAppPath: (environment: string, appVersion: string, componentSign: componentSignEnum, productSceneVersion: string, extendInfo: string) => any;
|
4
3
|
export declare const getAppDomain: (domainParams: {
|
5
4
|
environment: string;
|
@@ -10,8 +10,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
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
12
|
import { marmotMap, sdkVersion } from "../../config/index";
|
13
|
-
import { componentSignEnum } from "../../types";
|
14
13
|
import { getViewPort, queryParse, serialize } from "../../util/index";
|
14
|
+
import { componentSignEnum } from "../../types";
|
15
15
|
var getAppVersion = function getAppVersion(_extendInfo) {
|
16
16
|
try {
|
17
17
|
var info = JSON.parse(_extendInfo);
|
@@ -8,7 +8,7 @@
|
|
8
8
|
import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, LOADING_ID, MOCKUP_ID } from "../../constant";
|
9
9
|
import { platformEnum } from "../../types";
|
10
10
|
import { addSetFontSizeEvent, amsSetSize, getDesignFontSize } from "../../util";
|
11
|
-
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:
|
11
|
+
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}\n.ams-component-container-desktop-animation{\n animation: ams-component-container-zoom-in 0.3s ease-in-out;\n animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n 0% {\n transform: translate(-50%, -50%) scale(1);\n -webkit-transform: translate(-50%, -50%) scale(1);\n opacity: 1\n }\n \n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.4);\n -webkit-transform: translate(-50%, -50%) scale(0.4);\n }\n}\n\n@keyframes ams-component-container-zoom-in {\n 0% {\n transform: translate(-50%, -50%) scale(0.4);\n opacity: 0\n }\n\n 80% {\n opacity: 1\n }\n\n 100% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n.ams-component-container-hidden-desktop {\n display: block;\n position: fixed;\n top: 50%;\n left: 50%;\n z-index: 1001;\n border-radius: 8px;\n overflow: hidden;\n animation: ams-component-container-zoom-out 0.3s ease-in-out;\n animation-fill-mode: forwards;\n transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n width: 0.8em;\n height:0.8em;\n background: rgba(0, 0, 0, 0.5);\n border-radius: 8px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.ams-component-loading .line {\n width: 40px;\n height: 40px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n position: absolute;\n left: 17.67px;\n top: 0;\n width: 5.33px;\n height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n content: '';\n display: block;\n height: 13.33px;\n background: #fcfcfc;\n border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n width: 0.44em;\n height: 0.44em;\n -webkit-transform:rotate(360deg);\n transform:rotate(360deg);\n -webkit-transition:-webkit-transform 1s linear;\n transition:transform 1s linear;\n animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n position: absolute;\n width: 40px;\n height: 40px;\n right: 0;\n top: 0;\n cursor: pointer;\n}\n.asm-component-close-block-btn-desktop {\n width: 11px;\n height: 11px;\n object-fit: fill;\n position: absolute;\n right: 18.7px;\n top: 26.7px;\n}\n.asm-component-close-block-hidden {\n width: 0px !important;\n height: 0px !important;\n visibility: hidden;\n}\n.asm-component-close-block-mobile {\n position: absolute;\n width: 0.4em;\n height: 0.4em;\n right: 0;\n top: 0;\n cursor: pointer;\n z-index: 1009;\n}\n\n.asm-component-close-block-btn-mobile {\n width: 0.11em;\n height: 0.11em;\n object-fit: fill;\n position: absolute;\n right: 0.147em;\n top: 0.167em;\n}\n\n\n.ams-component-container-opacity{\n opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: block;\n content: \"\";\n z-index: 1010;\n background-color: rgba(0, 0, 0, 0.35);\n border-radius: 12px 12px 0 0;\n}\n\n#ams-component-retention {\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n transform-origin: 50%;\n height: auto;\n display: none;\n z-index: 1009;\n}\n\n.ams-component-retention-show {\n display: flex !important;\n animation: ams-component-container-zoom-in 0.3s ease-in-out;\n animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n display: flex !important;\n animation: ams-component-container-zoom-out 0.3s ease-in-out;\n -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n animation-fill-mode: forwards;\n -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n width: 294px;\n border-radius: 12px;\n padding: 24px 0;\n background-color: #fff;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n width: 544px;\n border-radius: 12px;\n padding: 32px;\n background-color: #fff;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n .ams-component-retention-mobile {\n transform: translate(-50%, -50%) scale(0.8);\n }\n}\n\n.ams-component-retention-title-mobile {\n width: 100%;\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 24px;\n color: #2A3A52;\n text-align: center;\n padding: 0 16px;\n box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n text-align: left;\n width: 100%;\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 24px;\n color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n width: 100%;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #7C8CA3;\n margin-top: 8px;\n text-align: center;\n padding: 0 16px;\n box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n text-align: left;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #7C8CA3;\n margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n margin-top: 24px;\n padding: 0 24px;\n box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n width: 100%;\n margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n background: #0079FF;\n border-radius: 100px;\n font-style: normal;\n font-weight: 500;\n text-align: center;\n box-sizing: border-box;\n color: #FFFFFF;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n width: 100%;\n height: 44px;\n font-size: 16px;\n line-height: 44px;\n padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n height: 44px;\n font-size: 16px;\n line-height: 44px;\n display: inline-block;\n padding: 0 24px;\n float: right;\n cursor: pointer;\n padding: 0 16px;\n max-width: 225px;\n min-width: 159px;\n}\n\n#ams-component-retention-leave {\n border-radius: 100px;\n border: 1px solid #0079FF;\n font-style: normal;\n font-weight: 500;\n text-align: center;\n box-sizing: border-box;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n width: 100%;\n height: 44px;\n font-size: 16px;\n line-height: 44px;\n color: #1677FF;\n margin-top: 12px;\n padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n height: 44px;\n font-size: 16px;\n line-height: 44px;\n color: #1677FF;\n display: inline-block;\n padding: 0 24px;\n float: right;\n margin-right: 16px;\n cursor: pointer;\n padding: 0 16px;\n max-width: 225px;\n min-width: 144px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n");
|
12
12
|
export var componentAddCSS = function componentAddCSS() {
|
13
13
|
var style = document.createElement('style');
|
14
14
|
style.type = 'text/css';
|
@@ -123,6 +123,7 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
123
123
|
var _this$_renderParams3,
|
124
124
|
_this = this;
|
125
125
|
var product = (_this$_renderParams3 = this._renderParams) === null || _this$_renderParams3 === void 0 || (_this$_renderParams3 = _this$_renderParams3.paymentSessionMetaData) === null || _this$_renderParams3 === void 0 || (_this$_renderParams3 = _this$_renderParams3.paymentSessionConfig) === null || _this$_renderParams3 === void 0 ? void 0 : _this$_renderParams3.productScene;
|
126
|
+
if (componentSignEnum.CASHIER_PAYMENT_APM === this._componentSign) return;
|
126
127
|
if (componentSignEnum.CASHIER_PAYMENT_BANK === this._componentSign) {
|
127
128
|
this.AMSSDK.logger.logInfo({
|
128
129
|
title: 'sdk_event_security_unneeded_scenarios'
|
@@ -246,9 +247,6 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
246
247
|
this._merchantAppointParam = renderParams.merchantAppointParam;
|
247
248
|
var insertedNode = this._renderDisplayType === renderDisplayTypeEnum.inline ? "#".concat(COMPONENT_CONTAINER_ID) : this._selector;
|
248
249
|
this.initLoggerMeta();
|
249
|
-
this.AMSSDK.logger.logInfo({
|
250
|
-
title: 'sdk_event_createComponent'
|
251
|
-
}).send();
|
252
250
|
this.initSecurity();
|
253
251
|
this._performanceData.push({
|
254
252
|
key: 'sdk_create_component',
|
@@ -982,14 +980,15 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
982
980
|
key: "handleSizeChanged",
|
983
981
|
value: function handleSizeChanged(data) {
|
984
982
|
var _data$context$data4;
|
985
|
-
if (((_data$context$data4 = data.context.data) === null || _data$context$data4 === void 0 ? void 0 : _data$context$data4.height) <= 1) return;
|
986
983
|
var cashier = document.getElementById(COMPONENT_CONTAINER_ID);
|
984
|
+
if (((_data$context$data4 = data.context.data) === null || _data$context$data4 === void 0 ? void 0 : _data$context$data4.height) <= 1 || data.context.data.height === parseInt(cashier.style.height)) return;
|
987
985
|
cashier.style.height = "".concat(data.context.data.height, "px");
|
986
|
+
this.app.style.opacity = '1';
|
988
987
|
if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
|
989
|
-
this.dismissLoadingFunc();
|
990
988
|
if (this.platform === 'desktop') {
|
991
|
-
cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
|
992
989
|
if (data.context.data.width) cashier.style.width = "".concat(data.context.data.width, "px");
|
990
|
+
cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
|
991
|
+
this.app.style.height = "".concat(data.context.data.height, "px");
|
993
992
|
}
|
994
993
|
if (this.platform === 'mobile') {
|
995
994
|
cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
|
@@ -997,6 +996,9 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
997
996
|
var animationStyle = document.getElementById(animationStyleId);
|
998
997
|
if (animationStyle) animationStyle === null || animationStyle === void 0 || animationStyle.remove();
|
999
998
|
|
999
|
+
// 此style用于弹窗出现和高度变化时动画,动画不同,属性不同
|
1000
|
+
this.app.style.height = parseInt(this.app.style.height) > 0 ? '100%' : "".concat(data.context.data.height, "px");
|
1001
|
+
|
1000
1002
|
// 弹出和弹入动画
|
1001
1003
|
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 }");
|
1002
1004
|
// 创建style标签
|
@@ -1014,18 +1016,17 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
1014
1016
|
cashier.style.transition = 'height 0.28s ease-in-out';
|
1015
1017
|
}, 500);
|
1016
1018
|
}
|
1019
|
+
this.dismissLoadingFunc();
|
1017
1020
|
}
|
1018
1021
|
if (this._renderDisplayType === renderDisplayTypeEnum.inline) {
|
1019
1022
|
var _document$getElementB3;
|
1020
1023
|
(_document$getElementB3 = document.getElementById(LOADING_ID)) === null || _document$getElementB3 === void 0 || _document$getElementB3.remove();
|
1021
1024
|
}
|
1022
|
-
this.app.style.height = "".concat(data.context.data.height, "px");
|
1023
|
-
this.app.style.opacity = '1';
|
1024
1025
|
}
|
1025
1026
|
}, {
|
1026
1027
|
key: "handleRedirect",
|
1027
1028
|
value: function handleRedirect(data) {
|
1028
|
-
var _data$
|
1029
|
+
var _data$isDestroy,
|
1029
1030
|
_this7 = this;
|
1030
1031
|
var _data = typeof data === 'string' ? {
|
1031
1032
|
normalUrl: data
|
@@ -1034,13 +1035,11 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
1034
1035
|
schemeUrl: (data === null || data === void 0 ? void 0 : data.schemeUrl) || '',
|
1035
1036
|
normalUrl: (data === null || data === void 0 ? void 0 : data.normalUrl) || '',
|
1036
1037
|
target: data === null || data === void 0 ? void 0 : data.target,
|
1037
|
-
|
1038
|
+
isDestroy: (_data$isDestroy = data === null || data === void 0 ? void 0 : data.isDestroy) !== null && _data$isDestroy !== void 0 ? _data$isDestroy : true
|
1038
1039
|
});
|
1039
1040
|
this.AMSSDK.logger.logInfo({
|
1040
1041
|
title: 'sdk_event_call_url_start'
|
1041
|
-
}, {
|
1042
|
-
redirectInfo: JSON.stringify(_data)
|
1043
|
-
}).send();
|
1042
|
+
}, _objectSpread({}, data)).send();
|
1044
1043
|
var successCallback = function successCallback(type, url) {
|
1045
1044
|
_this7.dispatchToSDK(EVENT.eventCallback.name, {
|
1046
1045
|
code: eventCodeEnum.SDK_CALL_URL_SUCCESS,
|
@@ -1081,7 +1080,8 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
1081
1080
|
window.location.replace(_data.normalUrl);
|
1082
1081
|
return;
|
1083
1082
|
}
|
1084
|
-
|
1083
|
+
// 销毁iframe和全局loading
|
1084
|
+
if (_data !== null && _data !== void 0 && _data.isDestroy) this.cleanContainer();
|
1085
1085
|
this.AMSSDK._redirect({
|
1086
1086
|
applinkUrl: _data === null || _data === void 0 ? void 0 : _data.applinkUrl
|
1087
1087
|
}).then(function () {
|
@@ -1123,7 +1123,7 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
1123
1123
|
this.dispatchToSDK(EVENT.eventCallback.name, {
|
1124
1124
|
code: eventInfo.eventName,
|
1125
1125
|
result: {
|
1126
|
-
result: eventInfo.eventResult
|
1126
|
+
result: eventInfo.eventResult || {}
|
1127
1127
|
}
|
1128
1128
|
});
|
1129
1129
|
}
|
@@ -1282,14 +1282,17 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
1282
1282
|
var _document$getElementB4,
|
1283
1283
|
_this8 = this;
|
1284
1284
|
var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
1285
|
-
this.
|
1286
|
-
|
1287
|
-
|
1288
|
-
this.app = null;
|
1285
|
+
this.AMSSDK.logger.logInfo({
|
1286
|
+
title: 'sdk_event_clean_component'
|
1287
|
+
}).send();
|
1289
1288
|
(_document$getElementB4 = document.getElementById(LOADING_ID)) === null || _document$getElementB4 === void 0 || _document$getElementB4.remove();
|
1290
1289
|
this.hideComponentAnimation();
|
1291
1290
|
var mockup = document.getElementById(MOCKUP_ID);
|
1292
1291
|
mockup === null || mockup === void 0 || mockup.classList.add("".concat(MOCKUP_ID, "-hidden"));
|
1292
|
+
this._loadAppPromiseResolve && this._loadAppPromiseResolve(true);
|
1293
|
+
this._performanceData = [];
|
1294
|
+
this._isInitComponent = false;
|
1295
|
+
this.app = null;
|
1293
1296
|
if (immediately) this.cleanElement();else {
|
1294
1297
|
setTimeout(function () {
|
1295
1298
|
_this8.cleanElement();
|
@@ -1300,6 +1303,7 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
1300
1303
|
key: "hideComponentAnimation",
|
1301
1304
|
value: function hideComponentAnimation() {
|
1302
1305
|
var container = document.getElementById(COMPONENT_CONTAINER_ID);
|
1306
|
+
if (this.app) this.app.style.height = container.style.height;
|
1303
1307
|
if (container) {
|
1304
1308
|
// size变化动画取消
|
1305
1309
|
container.style.transition = '';
|