@alipay/ams-checkout 0.0.1748918972-dev.0 → 0.0.1749206034-dev.1

package/esm/config/index.d.ts

@@ -5,10 +5,10 @@ export declare const sdkVersion: string;
 /**
  * @description: 目前应用层分为v1和v2，会存在两个应用版本号不是同步发布的情况。所以需要把默认的应用版本号配置抽离出来。
  */
-export declare const AMSCheckoutAppVersion = "1.36.0";
-export declare const AMSAutoDebitAppVersion = "1.36.0";
-export declare const AMSEasyPayAppVersion = "1.36.0";
-export declare const AMSCashierPaymentAppVersion = "1.36.0";
-export declare const AMSVaultingAppVersion = "1.36.0";
-export declare const AMSPaymentElementAppVersion = "1.36.0";
-export declare const ADDRESSElementAppVersion = "1.36.0";
+export declare const AMSCheckoutAppVersion = "1.37.0";
+export declare const AMSAutoDebitAppVersion = "1.37.0";
+export declare const AMSEasyPayAppVersion = "1.37.0";
+export declare const AMSCashierPaymentAppVersion = "1.37.0";
+export declare const AMSVaultingAppVersion = "1.37.0";
+export declare const AMSPaymentElementAppVersion = "1.37.0";
+export declare const ADDRESSElementAppVersion = "1.37.0";

package/esm/config/index.js

@@ -35,10 +35,10 @@ export var sdkVersion = json.version;
 /**
  * @description: 目前应用层分为v1和v2，会存在两个应用版本号不是同步发布的情况。所以需要把默认的应用版本号配置抽离出来。
  */
-export var AMSCheckoutAppVersion = '1.36.0'; // 兜底版本号
-export var AMSAutoDebitAppVersion = '1.36.0'; // 代扣
-export var AMSEasyPayAppVersion = '1.36.0'; // easypay
-export var AMSCashierPaymentAppVersion = '1.36.0'; // 收银台（卡、apm）
-export var AMSVaultingAppVersion = '1.36.0'; // 绑卡
-export var AMSPaymentElementAppVersion = '1.36.0'; // payment element
-export var ADDRESSElementAppVersion = '1.36.0'; // address element
+export var AMSCheckoutAppVersion = '1.37.0'; // 兜底版本号
+export var AMSAutoDebitAppVersion = '1.37.0'; // 代扣
+export var AMSEasyPayAppVersion = '1.37.0'; // easypay
+export var AMSCashierPaymentAppVersion = '1.37.0'; // 收银台（卡、apm）
+export var AMSVaultingAppVersion = '1.37.0'; // 绑卡
+export var AMSPaymentElementAppVersion = '1.37.0'; // payment element
+export var ADDRESSElementAppVersion = '1.37.0'; // address element

package/esm/constant/index.d.ts

@@ -222,6 +222,9 @@ export declare const EVENT: {
     getSdkVersion: {
         name: string;
     };
+    inputFocus: {
+        name: string;
+    };
 };
 export declare const COMPONENT_CONTAINER_ID = "ams-component-container";
 export declare const COMPONENT_SECTION_ID = "ams-component-section";

package/esm/constant/index.js

@@ -224,6 +224,9 @@ export var EVENT = {
   },
   getSdkVersion: {
     name: 'getSdkVersion'
+  },
+  inputFocus: {
+    name: 'onInputFocus'
   }
 };
 export var COMPONENT_CONTAINER_ID = 'ams-component-container';

package/esm/foundation/service/container/index.d.ts

@@ -12,6 +12,8 @@ export declare class ContainerService implements Service {
     private displayInfo;
     private webApp;
     private _webAppHeartBeatTimeoutFn;
+    private clientHeight;
+    private boundFocusResizeChange;
     private customizedLoadingListener;
     destroy(): void;
     init(initOptions: IoptionsParams, instanceId: string, sdkMetaData: SDKMetaData): void;
@@ -22,10 +24,13 @@ export declare class ContainerService implements Service {
     dismissLoading(isKeepMockup?: boolean): void;
     customizeLoading(listener: (event: 'SDK_START_OF_LOADING' | 'SDK_END_OF_LOADING') => void): void;
     startHideAnim(): void;
+    private handleAccountFocus;
     private addCapabilityToEventCenter;
     private addCapabilityToApiBusManager;
     private updateMaskCloseBtn;
     private handleSizeChanged;
+    private focusResizeChange;
+    private focusScrollFixed;
     private handleAppHeartBeat;
     private changeCloseBtnVisibility;
     private handleMaskCloseBtnShow;

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

@@ -35,6 +35,8 @@ export var ContainerService = /*#__PURE__*/function () {
     _defineProperty(this, "displayInfo", void 0);
     _defineProperty(this, "webApp", void 0);
     _defineProperty(this, "_webAppHeartBeatTimeoutFn", void 0);
+    _defineProperty(this, "clientHeight", void 0);
+    _defineProperty(this, "boundFocusResizeChange", void 0);
     // if this variable is true, SDK will invoke listener instead of showing loading
     _defineProperty(this, "customizedLoadingListener", void 0);
   }
@@ -46,6 +48,7 @@ export var ContainerService = /*#__PURE__*/function () {
     value: function init(initOptions, instanceId, sdkMetaData) {
       this.instanceId = instanceId;
       this.sdkMetaData = sdkMetaData;
+      this.clientHeight = Math.max(window.innerHeight, window.visualViewport.height);
       this.eventCenter = ServiceProvider.getInstance(instanceId).getService('EventCenter');
       this.logService = ServiceProvider.getInstance(instanceId).getService('Log');
       this.popupManager = new PopupManager();
@@ -55,6 +58,8 @@ export var ContainerService = /*#__PURE__*/function () {
         this.addCapabilityToEventCenter();
       }
       this.addCapabilityToApiBusManager();
+      // bind会返回一个新的方法，init时记录上这个focus，不然window.addEventListener时this指向会变成window
+      this.boundFocusResizeChange = this.focusResizeChange.bind(this);
     }
   }, {
     key: "update",
@@ -156,6 +161,22 @@ export var ContainerService = /*#__PURE__*/function () {
         container === null || container === void 0 || container.classList.add("".concat(COMPONENT_CONTAINER_ID, "-hidden-").concat(this.displayInfo.platform));
       }
     }
+  }, {
+    key: "handleAccountFocus",
+    value: function handleAccountFocus(focus) {
+      var _window$visualViewpor, _window;
+      // 失焦时v2会走默认的sizeChange还原高度，这里仅移除监听
+      (_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 || _window$visualViewpor.removeEventListener('resize', this.boundFocusResizeChange);
+      (_window = window) === null || _window === void 0 || _window.removeEventListener('resize', this.boundFocusResizeChange);
+      // 只有聚焦才监听，失焦后移除，避免影响别的场景
+      if (focus) {
+        var _window$visualViewpor2;
+        // 监听页面visualViewport的高度变化，适用于主流机型更精准获取当前页面高度
+        (_window$visualViewpor2 = window.visualViewport) === null || _window$visualViewpor2 === void 0 || _window$visualViewpor2.addEventListener('resize', this.boundFocusResizeChange);
+        // 兼容visualViewport处理不到的场景，一般存在于老版本浏览器
+        window.addEventListener('resize', this.boundFocusResizeChange);
+      }
+    }
   }, {
     key: "addCapabilityToEventCenter",
     value: function addCapabilityToEventCenter() {
@@ -207,6 +228,22 @@ export var ContainerService = /*#__PURE__*/function () {
       this.eventCenter.listen(EVENT.appHeartBeat.name, function () {
         _this.handleAppHeartBeat();
       });
+      /**
+       * 目前仅用于ESP V2的 web sdk
+       * 原因： 在账户输入页和OTP页面的h5场景下键盘弹起页面会有问题，iframe有固定高度，键盘弹起时应用层不会触发大小变化
+       *   account账号输入页需要在sdk监听键盘弹起后高度变化并修改iframe及iframe外层容器，account需要按钮置底的放在键盘上面，必须修改高度而不是让容器定位
+       *   otp页面需要在聚焦时给iframe及外层容器设置fixed定位，让页面不被弹起
+       * 目的： esp页面输入框聚焦/失焦后给sdk发送消息
+       */
+      this.eventCenter.listen(EVENT.inputFocus.name, function (data) {
+        // 账号输入页需要修改iframe高度
+        if (data.source === 'ESP_V2' && data.type === 'account') {
+          _this.handleAccountFocus(data.focus);
+          // otp页面需要定位元素
+        } else if (data.source === 'ESP_V2' && data.type === 'otp') {
+          _this.focusScrollFixed(data.focus);
+        }
+      });
     }
   }, {
     key: "addCapabilityToApiBusManager",
@@ -267,6 +304,50 @@ export var ContainerService = /*#__PURE__*/function () {
         this.webApp.style.height = "".concat(data.height, "px");
       }
     }
+
+    // 目前仅用于esp账号输入页聚焦
+  }, {
+    key: "focusResizeChange",
+    value: function focusResizeChange() {
+      var _window2;
+      // 计算出当前iframe应有的高度，需要和顶部留有距离
+      var webPageHeightRatio = 0.9;
+      var browserPageHeightFocusRatio = 0.9;
+      // sdk层才能拿到当前键盘弹起后页面的高度
+      var height = ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.visualViewport) === null || _window2 === void 0 ? void 0 : _window2.height) || window.innerHeight;
+      height = height * webPageHeightRatio;
+      height = height * browserPageHeightFocusRatio;
+      // 调用handleSizeChanged修改iframe高度
+      this.handleSizeChanged({
+        width: 0,
+        height: height
+      });
+    }
+
+    // 目前仅用于esp otp页面账号聚焦
+  }, {
+    key: "focusScrollFixed",
+    value: function focusScrollFixed(focus) {
+      // 获取iframe dom元素
+      var _this$displayInfo4 = this.displayInfo,
+        appendAliasContainerId = _this$displayInfo4.appendAliasContainerId,
+        selector = _this$displayInfo4.selector;
+      var cashierId = appendAliasContainerId ? "".concat(COMPONENT_CONTAINER_ID, "-").concat((selector === null || selector === void 0 ? void 0 : selector.indexOf('#')) === -1 ? selector : selector.slice(1)) : COMPONENT_CONTAINER_ID;
+      if (!this.webApp || !this.displayInfo) {
+        return;
+      }
+      var cashier = document.getElementById(cashierId);
+      if (!cashier) return;
+      // 输入框聚焦时修改定位信息和top距离
+      if (focus) {
+        cashier.style.setProperty('position', 'fixed', 'important');
+        cashier.style.setProperty('top', "".concat(this.clientHeight - cashier.clientHeight, "px"), 'important');
+      } else {
+        // 失焦时移除定位信息
+        cashier.style.removeProperty('position');
+        cashier.style.removeProperty('top');
+      }
+    }
   }, {
     key: "handleAppHeartBeat",
     value: function handleAppHeartBeat() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alipay/ams-checkout",
-  "version": "0.0.1748918972-dev.0",
+  "version": "0.0.1749206034-dev.1",
   "description": "",
   "author": "",
   "main": "esm/index.js",