@alipay/ams-checkout 0.0.1744283958-dev.5 → 0.0.1744283958-dev.6

package/esm/constant/index.d.ts

@@ -216,6 +216,9 @@ export declare const EVENT: {
     webAppReady: {
         name: string;
     };
+    showToast: {
+        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

@@ -218,6 +218,9 @@ export var EVENT = {
   },
   webAppReady: {
     name: 'webAppReady'
+  },
+  showToast: {
+    name: 'showToast'
   }
 };
 export var COMPONENT_CONTAINER_ID = 'ams-component-container';

package/esm/core/component/element/elementContainerService/containerService.js

@@ -45,7 +45,10 @@ export var ContainerController = /*#__PURE__*/function () {
       platform: PlatformEnum.desktop,
       isRetention: false,
       selector: selector,
-      appendAliasContainerId: true
+      appendAliasContainerId: true,
+      iframeStyle: {
+        display: 'block'
+      }
     }, processor.generateIframeSrc({
       link: options === null || options === void 0 || (_options$debugProps = options.debugProps) === null || _options$debugProps === void 0 ? void 0 : _options$debugProps.localLink,
       instanceId: this.instanceId

package/esm/core/component/element/elementController/index.js

@@ -31,7 +31,7 @@ import { ElementContainerService } from "../elementContainerService"; // 引入
 import { IContainerStatus } from "../elementContainerService/containerService";
 import { oneAccountUpdate, sdkActionUpdate } from "../mock";
 import { ElementPaymentEvent, ElementPaymentMethod, ElementType, EventCallbackCode } from "../type";
-import { checkCanMount, checkCanUpdate, handleRedirect } from "../util";
+import { checkCanMount, checkCanUpdate, handleRedirect, showToast } from "../util";
 var TIMEOUT_DURATION = 10000;
 var ElementController = /*#__PURE__*/function () {
   // 新增变量
@@ -302,6 +302,7 @@ var ElementController = /*#__PURE__*/function () {
         _this4.destroyHandle();
       });
       this.serviceMap.EventCenter.listen(EVENT.webAppReady.name, function (data) {
+        clearTimeout(_this4.initTimeout);
         if (_this4.elementContainerService.getContainerService(data.source)) {
           renderCallback({
             success: true
@@ -310,6 +311,9 @@ var ElementController = /*#__PURE__*/function () {
         }
         _this4.changeLoading(false);
       });
+      this.serviceMap.EventCenter.listen(EVENT.showToast.name, function (data) {
+        showToast(data);
+      });
     }
   }, {
     key: "sendRequestAndWaitWebLaunch",

package/esm/core/component/element/type.d.ts

@@ -375,4 +375,17 @@ export interface IElementProcessors {
     [ElementType.address]: AddressProcessor;
     [ElementType.payment]: PaymentProcessor;
 }
+export interface IToastOptions {
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+    backgroundColor?: string;
+    color?: string;
+    padding?: string;
+    borderRadius?: string;
+    fontSize?: string;
+    zIndex?: number;
+    width?: string;
+    duration?: number;
+    icon?: 'SUCCESS' | 'FAIL';
+    spin?: boolean;
+}
 export {};

package/esm/core/component/element/util.d.ts

@@ -1,7 +1,7 @@
 import { IElementStatus } from '../../../foundation';
 import { Ianalytics, IPaymentSessionMetaData } from '../../../types';
 import { ContainerController } from './elementContainerService/containerService';
-import { ELEMENT_ENVIRONMENT_TYPE, IElementOptions } from './type';
+import { ELEMENT_ENVIRONMENT_TYPE, IElementOptions, IToastOptions } from './type';
 declare const formatElementOption: (options: IElementOptions) => {
     environment: ELEMENT_ENVIRONMENT_TYPE;
     locale?: string;
@@ -56,4 +56,5 @@ export declare function redirect(data: {
     applinkUrl?: string;
     callAppJudgeTime?: number;
 }): Promise<void>;
+export declare function showToast(options?: IToastOptions, callback?: Function): void;
 export { formatElementOption };

package/esm/core/component/element/util.js

@@ -324,4 +324,128 @@ export function redirect(data) {
     }
   });
 }
+export function showToast() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var callback = arguments.length > 1 ? arguments[1] : undefined;
+  var createNode = function createNode() {
+    var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'div';
+    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var children = arguments.length > 2 ? arguments[2] : undefined;
+    var node = document.createElement(tag);
+    Object.keys(props).forEach(function (key) {
+      if (key === 'style') {
+        Object.keys(props[key]).forEach(function (styleKey) {
+          node.style[styleKey] = props[key][styleKey];
+        });
+      } else {
+        node.setAttribute(key, props[key]);
+      }
+    });
+    if (typeof children === 'string') node.textContent = children;
+    return node;
+  };
+  var defaultOptions = {
+    position: 'bottom-right',
+    backgroundColor: 'rgba(0, 0, 0, 0.80)',
+    color: '#ffffff',
+    padding: '20px 16px',
+    borderRadius: '8px',
+    fontSize: '14px',
+    zIndex: 9999,
+    width: '148px',
+    duration: 2000
+  };
+  var defaultIcon = {
+    SUCCESS: 'https://cdn.marmot-cloud.com/storage/2024/07/10/10b191d6-0b0a-4bd9-96cc-310b7f2a8530.svg',
+    FAIL: 'https://cdn.marmot-cloud.com/storage/2024/11/08/4ae27343-61d2-4a07-b323-c951c7711b40.svg'
+  };
+  var config = _objectSpread(_objectSpread({}, defaultOptions), options);
+  var container = document.getElementById('antom_toast-container');
+  if (!container) {
+    container = createNode('div', {
+      style: {
+        position: 'fixed',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        pointerEvents: 'none'
+      },
+      id: 'antom_toast-container'
+    });
+    document.body.appendChild(container);
+  } else {
+    container.innerHTML = '';
+  }
+  switch (config.position) {
+    case 'top-left':
+      container.style.top = '20px';
+      container.style.left = '20px';
+      break;
+    case 'top-right':
+      container.style.top = '20px';
+      container.style.right = '20px';
+      break;
+    case 'bottom-left':
+      container.style.bottom = '20px';
+      container.style.left = '20px';
+      break;
+    case 'bottom-right':
+    default:
+      container.style.bottom = '0';
+      container.style.right = '0';
+      container.style.top = '0';
+      container.style.left = '0';
+      break;
+  }
+  var toast = createNode('div', {
+    style: {
+      backgroundColor: config.backgroundColor,
+      color: config.color,
+      padding: config.padding,
+      borderRadius: config.borderRadius,
+      fontSize: config.fontSize,
+      opacity: '0',
+      transition: 'opacity 0.3s ease-in-out',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      width: config.width,
+      boxSizing: 'border-box'
+    }
+  });
+  if (config.icon) {
+    var icon = createNode('img', {
+      style: {
+        width: '40px',
+        height: '40px'
+      },
+      src: config.icon ? defaultIcon[config.icon] : ''
+    });
+    toast.appendChild(icon);
+  }
+  var text = createNode('span', {
+    style: {
+      textAlign: 'center',
+      marginTop: '12px',
+      lineHeight: '20px',
+      fontFamily: "Noto Sans",
+      fontWeight: 400,
+      fontSize: '14px'
+    }
+  }, config.message);
+  toast.appendChild(text);
+  container.appendChild(toast);
+  setTimeout(function () {
+    toast.style.opacity = '1';
+  }, 10);
+  setTimeout(function () {
+    toast.style.opacity = '0';
+    setTimeout(function () {
+      var _container;
+      (_container = container) === null || _container === void 0 || _container.remove();
+      callback && callback();
+    }, 300);
+  }, config.duration);
+}
 export { formatElementOption };

package/esm/foundation/index.d.ts

@@ -28,6 +28,7 @@ export declare class DisplayInfo {
     selector: string;
     appearance?: Record<string, any>;
     appendAliasContainerId?: boolean;
+    iframeStyle?: Partial<CSSStyleDeclaration>;
     constructor();
 }
 /**

package/esm/foundation/index.js

@@ -26,6 +26,7 @@ export var DisplayInfo = /*#__PURE__*/_createClass(function DisplayInfo() {
   _defineProperty(this, "appearance", void 0);
   // append selector name to containerId
   _defineProperty(this, "appendAliasContainerId", void 0);
+  _defineProperty(this, "iframeStyle", void 0);
   this.platform = isPC() ? PlatformEnum.desktop : PlatformEnum.mobile;
   this.isRetention = true;
   this.type = DisplayTypeEnum.popup;

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

@@ -7,6 +7,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { isEmpty } from "../../../util";
 import { addInlineLoading, createInlineBaseElement } from "../../../component/component.inline.style";
 import { addPopupLoading, createBaseElement } from "../../../component/component.popup.style";
 import { insertStyleSheet } from "../../../component/popupWindow.style";
@@ -64,6 +65,12 @@ export var ContainerService = /*#__PURE__*/function () {
         type = displayInfo.type,
         platform = displayInfo.platform;
       var webApp = createIframe('antom-sdk-web-app' + (displayInfo.appendAliasContainerId ? "-".concat(selector) : ''));
+      if (!isEmpty(displayInfo === null || displayInfo === void 0 ? void 0 : displayInfo.iframeStyle)) {
+        Object.keys(displayInfo === null || displayInfo === void 0 ? void 0 : displayInfo.iframeStyle).forEach(function (key) {
+          var _displayInfo$iframeSt;
+          webApp.style[key] = displayInfo === null || displayInfo === void 0 || (_displayInfo$iframeSt = displayInfo.iframeStyle) === null || _displayInfo$iframeSt === void 0 ? void 0 : _displayInfo$iframeSt[key];
+        });
+      }
       this.webApp = webApp;
       this.displayInfo = displayInfo;
       webApp.src = url;

package/package.json

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