@youidian/sdk 3.3.7 → 3.4.1

package/dist/client.cjs

@@ -26,6 +26,7 @@ __export(client_exports, {
   PaymentUI: () => PaymentUI,
   createLoginUI: () => createLoginUI,
   createPaymentUI: () => createPaymentUI,
+  detectLoginEnvironment: () => detectLoginEnvironment,
   handleLoginCallbackIfPresent: () => handleLoginCallbackIfPresent
 });
 module.exports = __toCommonJS(client_exports);
@@ -232,6 +233,91 @@ var HostedFrameModal = class {
   }
 };
 
+// src/environment.ts
+function normalizeText(value) {
+  return value || "";
+}
+function getRuntimeInput() {
+  if (typeof navigator === "undefined") {
+    return {};
+  }
+  const nav = navigator;
+  const coarsePointer = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(pointer: coarse)").matches : void 0;
+  return {
+    coarsePointer,
+    maxTouchPoints: nav.maxTouchPoints || 0,
+    platform: nav.platform || "",
+    standalone: nav.standalone,
+    userAgent: nav.userAgent || "",
+    userAgentDataMobile: nav.userAgentData?.mobile
+  };
+}
+function includesAny(value, patterns) {
+  return patterns.some((pattern) => pattern.test(value));
+}
+function detectLoginEnvironment(input = getRuntimeInput()) {
+  const userAgent = normalizeText(input.userAgent);
+  const platform = normalizeText(input.platform);
+  const rawMaxTouchPoints = input.maxTouchPoints ?? 0;
+  const maxTouchPoints = Number.isFinite(rawMaxTouchPoints) ? Math.max(0, rawMaxTouchPoints) : 0;
+  const isCoarsePointer = input.coarsePointer === true;
+  const isTouch = maxTouchPoints > 0 || isCoarsePointer;
+  const isWeChat = /micromessenger/i.test(userAgent);
+  const isAndroid = /\bandroid\b/i.test(userAgent);
+  const hasExplicitIOSDevice = /\b(iPad|iPhone|iPod)\b/i.test(userAgent);
+  const hasMacintoshUserAgent = /\bMacintosh\b/i.test(userAgent);
+  const hasMacPlatform = /^Mac/i.test(platform);
+  const isIPadOS = !hasExplicitIOSDevice && hasMacintoshUserAgent && hasMacPlatform && typeof input.standalone !== "undefined" && maxTouchPoints > 2;
+  const isIOS = hasExplicitIOSDevice || isIPadOS;
+  const isTabletByUa = includesAny(userAgent, [
+    /\biPad\b/i,
+    /\btablet\b/i,
+    /\bplaybook\b/i,
+    /\bsilk\b(?!.*\bmobile\b)/i,
+    /\bkindle\b/i,
+    /\bnexus 7\b/i,
+    /\bnexus 9\b/i,
+    /\bxoom\b/i,
+    /\bsm-t\d+/i,
+    /\bgt-p\d+/i,
+    /\bmi pad\b/i
+  ]);
+  const isMobileByUa = includesAny(userAgent, [
+    /\bMobile\b/i,
+    /\biPhone\b/i,
+    /\biPod\b/i,
+    /\bWindows Phone\b/i,
+    /\bIEMobile\b/i,
+    /\bBlackBerry\b/i,
+    /\bBB10\b/i,
+    /\bOpera Mini\b/i,
+    /\bOpera Mobi\b/i,
+    /\bwebOS\b/i
+  ]);
+  const isAndroidTablet = isAndroid && !/\bMobile\b/i.test(userAgent);
+  const isTablet = isIPadOS || isTabletByUa || isAndroidTablet;
+  const isMobile = input.userAgentDataMobile === true || isMobileByUa || isAndroid && !isTablet || isIOS && !isTablet;
+  const deviceType = isTablet ? "tablet" : isMobile ? "mobile" : userAgent || platform || isTouch ? "desktop" : "unknown";
+  const shouldUseRedirectLogin = deviceType === "mobile" || deviceType === "tablet" || isWeChat;
+  return {
+    deviceType,
+    isAndroid,
+    isCoarsePointer,
+    isDesktop: deviceType === "desktop",
+    isIOS,
+    isIPadOS,
+    isMobile,
+    isStandalone: input.standalone === true,
+    isTablet,
+    isTouch,
+    isWeChat,
+    maxTouchPoints,
+    platform,
+    shouldUseRedirectLogin,
+    userAgent
+  };
+}
+
 // src/login.ts
 function getOrigin(value) {
   if (!value) return null;
@@ -241,6 +327,15 @@ function getOrigin(value) {
     return null;
   }
 }
+function isValidLoginRedirectUrl(value) {
+  if (!value) return false;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:";
+  } catch {
+    return false;
+  }
+}
 function createLoginCallbackState() {
   if (typeof crypto !== "undefined" && crypto.randomUUID) {
     return crypto.randomUUID().replace(/-/g, "");
@@ -587,6 +682,24 @@ function applyLoginPanelStyle(panel) {
     backdropFilter: "blur(16px)"
   });
 }
+function applyLoginLoadingPanelStyle(panel) {
+  Object.assign(panel.style, {
+    position: "absolute",
+    inset: "0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "0",
+    borderRadius: "28px",
+    background: "rgba(255,255,255,0.94)",
+    color: "#0f172a",
+    padding: "24px",
+    textAlign: "center",
+    zIndex: "1",
+    boxShadow: "none",
+    backdropFilter: "blur(16px)"
+  });
+}
 function createLoginPanelContent() {
   const content = document.createElement("div");
   Object.assign(content.style, {
@@ -611,6 +724,71 @@ function createLoginPanelContent() {
   content.appendChild(badge);
   return content;
 }
+function createBrandLoadingMark() {
+  const logo = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  logo.setAttribute("viewBox", "0 0 1024 1024");
+  logo.setAttribute("fill", "none");
+  logo.setAttribute("aria-hidden", "true");
+  Object.assign(logo.style, {
+    width: "112px",
+    height: "112px",
+    color: "#22c55e",
+    display: "block",
+    overflow: "visible"
+  });
+  const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  group.setAttribute("fill", "currentColor");
+  const ring = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  ring.setAttribute(
+    "d",
+    "M704.298 679.54A264 264 0 1 1 704.298 309.46A49 49 0 0 1 634.4 378.149A166 166 0 1 0 634.4 610.851A49 49 0 0 1 704.298 679.54Z"
+  );
+  ring.setAttribute("class", "youidian-sdk-brand-loading__ring");
+  const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  dot.setAttribute("class", "youidian-sdk-brand-loading__dot");
+  dot.setAttribute("cx", "714.5");
+  dot.setAttribute("cy", "490.5");
+  dot.setAttribute("r", "68");
+  group.appendChild(ring);
+  group.appendChild(dot);
+  logo.appendChild(group);
+  return logo;
+}
+function createBrandLoadingCopy() {
+  const brand = document.createElement("div");
+  brand.className = "youidian-sdk-brand-loading__copy";
+  Object.assign(brand.style, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    lineHeight: "1"
+  });
+  const name = document.createElement("div");
+  name.className = "youidian-sdk-brand-loading__name";
+  name.textContent = "\u4F18\u6613\u70B9";
+  Object.assign(name.style, {
+    color: "#0f172a",
+    fontSize: "34px",
+    fontWeight: "900",
+    letterSpacing: "0",
+    lineHeight: "1"
+  });
+  const tagline = document.createElement("div");
+  tagline.className = "youidian-sdk-brand-loading__tagline";
+  tagline.textContent = "\u5F00\u53D1\u8005\u670D\u52A1\u4E2D\u53F0";
+  Object.assign(tagline.style, {
+    color: "#64748b",
+    fontSize: "16px",
+    fontWeight: "700",
+    letterSpacing: "0.24em",
+    lineHeight: "1",
+    marginTop: "6px"
+  });
+  brand.appendChild(name);
+  brand.appendChild(tagline);
+  return brand;
+}
 function createLoginPanelTitle(value) {
   const title = document.createElement("div");
   title.textContent = value;
@@ -640,32 +818,111 @@ function ensureLoginLoadingStyles() {
   }
   const style = document.createElement("style");
   style.id = "youidian-login-loading-style";
-  style.textContent = "@keyframes youidian-login-spin{to{transform:rotate(360deg)}}";
+  style.textContent = `
+		.youidian-sdk-brand-loading__ring,
+		.youidian-sdk-brand-loading__dot {
+			transform-box: fill-box;
+			transform-origin: center;
+			will-change: opacity, transform;
+		}
+
+		.youidian-sdk-brand-loading__ring {
+			animation: youidian-sdk-brand-loading-ring 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-loading__dot {
+			animation: youidian-sdk-brand-loading-dot 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-loading__copy {
+			will-change: opacity, transform;
+			animation: youidian-sdk-brand-loading-copy 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-loading__tagline {
+			will-change: opacity;
+			animation: youidian-sdk-brand-loading-tagline 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		@keyframes youidian-sdk-brand-loading-ring {
+			0%,
+			100% {
+				opacity: 0.72;
+				transform: rotate(0deg) scale(0.98);
+			}
+			50% {
+				opacity: 1;
+				transform: rotate(8deg) scale(1.02);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-loading-dot {
+			0%,
+			100% {
+				opacity: 0.55;
+				transform: scale(0.9);
+			}
+			50% {
+				opacity: 1;
+				transform: scale(1.08);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-loading-copy {
+			0%,
+			100% {
+				opacity: 0.86;
+				transform: translateY(0);
+			}
+			50% {
+				opacity: 1;
+				transform: translateY(-1px);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-loading-tagline {
+			0%,
+			100% {
+				opacity: 0.64;
+			}
+			50% {
+				opacity: 0.92;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.youidian-sdk-brand-loading__ring,
+			.youidian-sdk-brand-loading__dot,
+			.youidian-sdk-brand-loading__copy,
+			.youidian-sdk-brand-loading__tagline {
+				animation: none;
+				opacity: 1;
+				transform: none;
+			}
+		}
+	`;
   document.head.appendChild(style);
 }
-function createLoginLoadingPanel(options) {
+function createLoginLoadingPanel() {
   ensureLoginLoadingStyles();
   const panel = document.createElement("div");
-  applyLoginPanelStyle(panel);
-  const content = createLoginPanelContent();
-  const spinner = document.createElement("div");
-  Object.assign(spinner.style, {
-    width: "22px",
-    height: "22px",
-    borderRadius: "9999px",
-    border: "2px solid rgba(23,23,23,0.16)",
-    borderTopColor: "#171717",
-    margin: "0 auto 18px",
-    animation: "youidian-login-spin 780ms linear infinite"
+  applyLoginLoadingPanelStyle(panel);
+  panel.setAttribute("role", "status");
+  panel.setAttribute("aria-label", "\u4F18\u6613\u70B9\u5F00\u53D1\u8005\u670D\u52A1\u4E2D\u53F0");
+  const content = document.createElement("div");
+  Object.assign(content.style, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "12px"
   });
-  content.appendChild(spinner);
-  content.appendChild(createLoginPanelTitle(options.title));
-  content.appendChild(createLoginPanelDescription(options.description));
+  content.appendChild(createBrandLoadingMark());
+  content.appendChild(createBrandLoadingCopy());
   panel.appendChild(content);
   return panel;
 }
-function createLoginRedirectingPanel(options) {
-  return createLoginLoadingPanel(options);
+function createLoginRedirectingPanel(_options) {
+  return createLoginLoadingPanel();
 }
 function createLoginFallbackPanel(options) {
   const panel = document.createElement("div");
@@ -765,14 +1022,11 @@ var LoginUI = class extends HostedFrameModal {
     this.iframeFallbackPanel = null;
     this.iframeLoadingPanel = null;
   }
-  showIframeLoading(container, options) {
+  showIframeLoading(container) {
     if (this.iframeLoadingPanel || this.iframeReady) {
       return;
     }
-    const panel = createLoginLoadingPanel({
-      description: options?.loadingDescription || "Please wait while the secure login page opens.",
-      title: options?.loadingTitle || "Opening login page"
-    });
+    const panel = createLoginLoadingPanel();
     this.iframeLoadingPanel = panel;
     container.appendChild(panel);
   }
@@ -860,6 +1114,20 @@ var LoginUI = class extends HostedFrameModal {
         break;
       case "LOGIN_RESIZE":
         break;
+      case "LOGIN_REDIRECT_REQUIRED":
+        if (!isValidLoginRedirectUrl(data.authUrl)) {
+          logLoginWarn("Login redirect requested with invalid authUrl");
+          options?.onError?.("Login redirect URL is invalid", data);
+          break;
+        }
+        logLoginInfo("Login redirect requested by hosted page", {
+          attemptId: data.attemptId || null,
+          channel: data.channel || null,
+          authUrl: data.authUrl
+        });
+        this.close();
+        window.location.assign(data.authUrl);
+        break;
       case "LOGIN_ERROR":
         if (this.completed) {
           break;
@@ -883,6 +1151,25 @@ var LoginUI = class extends HostedFrameModal {
         break;
     }
   }
+  openLoginRedirect(params, options) {
+    if (typeof window === "undefined") return;
+    const { callbackState, finalUrl, launchPayload } = this.buildOpenContext(
+      params,
+      options
+    );
+    logLoginInfo("Redirecting to hosted login page", {
+      appId: params.appId,
+      callbackState,
+      callbackUrl: launchPayload.callbackUrl || null,
+      hasCallbackUrl: Boolean(launchPayload.callbackUrl),
+      loginUrl: finalUrl,
+      autoClose: options?.autoClose ?? true,
+      displayMode: "redirect",
+      pageUrl: window.location.href,
+      parentOrigin: launchPayload.origin || null
+    });
+    window.location.assign(finalUrl);
+  }
   listenForLoginCallback(callbackState, options) {
     try {
       this.callbackChannel = new BroadcastChannel(
@@ -959,21 +1246,17 @@ var LoginUI = class extends HostedFrameModal {
         options?.onCancel?.();
         options?.onClose?.();
       },
-      onMessage: (data, container, event) => {
+      onMessage: (data, _container, event) => {
         const isIframeEvent = event.source === this.iframe?.contentWindow;
         if (isIframeEvent && (data.type === "LOGIN_READY" || data.type === "LOGIN_RESIZE") || data.type === "LOGIN_SUCCESS" || data.type === "LOGIN_ERROR") {
           this.markIframeReady();
         }
-        if (data.type === "LOGIN_RESIZE" && data.height) {
-          const maxHeight = window.innerHeight * 0.94;
-          container.style.height = `${Math.min(data.height, maxHeight)}px`;
-        }
         this.handleLoginEvent(data, options);
       },
       width: "min(520px, 100%)"
     });
     if (hostedFrame) {
-      this.showIframeLoading(hostedFrame.container, options);
+      this.showIframeLoading(hostedFrame.container);
       this.startIframeWatchdog({
         container: hostedFrame.container,
         finalUrl,
@@ -1077,11 +1360,19 @@ var LoginUI = class extends HostedFrameModal {
   }
   openLogin(params, options) {
     if (typeof window === "undefined") return;
-    const displayMode = options?.displayMode ?? "modal";
+    const displayMode = options?.displayMode ?? "auto";
+    if (displayMode === "redirect") {
+      this.openLoginRedirect(params, options);
+      return;
+    }
     if (displayMode === "popup") {
       this.openLoginPopup(params, options);
       return;
     }
+    if (displayMode === "auto" && detectLoginEnvironment().shouldUseRedirectLogin) {
+      this.openLoginRedirect(params, options);
+      return;
+    }
     this.openLoginModal(params, options);
   }
 };
@@ -1092,6 +1383,43 @@ handleLoginCallbackIfPresent({ autoClose: false });
 
 // src/client.ts
 var PaymentUI = class extends HostedFrameModal {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "activeCheckoutAppId", null);
+    __publicField(this, "activeCheckoutBaseUrl", null);
+    __publicField(this, "activeOrderId", null);
+    __publicField(this, "paymentCompleted", false);
+    __publicField(this, "cancelRequestedOrderId", null);
+  }
+  cancelHostedOrder(reason = "user_cancel", orderId) {
+    const targetOrderId = orderId || this.activeOrderId;
+    if (!targetOrderId || !this.activeCheckoutAppId || !this.activeCheckoutBaseUrl || this.paymentCompleted || this.cancelRequestedOrderId === targetOrderId) {
+      return;
+    }
+    this.cancelRequestedOrderId = targetOrderId;
+    const url = `${this.activeCheckoutBaseUrl}/api/internal/checkout/cancel-order`;
+    const payload = JSON.stringify({
+      appId: this.activeCheckoutAppId,
+      orderId: targetOrderId,
+      reason
+    });
+    if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+      const sent = navigator.sendBeacon(
+        url,
+        new Blob([payload], { type: "application/json" })
+      );
+      if (sent) return;
+    }
+    void fetch(url, {
+      method: "POST",
+      body: payload,
+      headers: { "Content-Type": "text/plain;charset=UTF-8" },
+      keepalive: true,
+      mode: "no-cors"
+    }).catch(() => {
+      this.cancelRequestedOrderId = null;
+    });
+  }
   /**
    * Opens the payment checkout page in an iframe modal.
    * @param urlOrParams - The checkout page URL or payment parameters
@@ -1101,11 +1429,25 @@ var PaymentUI = class extends HostedFrameModal {
     if (typeof document === "undefined") return;
     if (this.modal) return;
     let checkoutUrl;
+    this.activeOrderId = null;
+    this.paymentCompleted = false;
+    this.cancelRequestedOrderId = null;
     if (typeof urlOrParams === "string") {
       checkoutUrl = urlOrParams;
+      try {
+        const parsedUrl = new URL(checkoutUrl);
+        this.activeCheckoutBaseUrl = parsedUrl.origin;
+        const parts = parsedUrl.pathname.split("/").filter(Boolean);
+        const checkoutIndex = parts.indexOf("checkout");
+        this.activeCheckoutAppId = checkoutIndex >= 0 ? parts[checkoutIndex + 1] || null : null;
+      } catch {
+        this.activeCheckoutAppId = null;
+        this.activeCheckoutBaseUrl = null;
+      }
     } else {
       const {
         appId,
+        orderId,
         productId,
         priceId,
         productCode,
@@ -1115,9 +1457,10 @@ var PaymentUI = class extends HostedFrameModal {
         baseUrl = "https://pay.imgto.link"
       } = urlOrParams;
       const base = (checkoutUrlParam || baseUrl).replace(/\/$/, "");
-      const query = new URLSearchParams({
-        userId
-      });
+      this.activeCheckoutAppId = appId;
+      this.activeCheckoutBaseUrl = base;
+      const query = new URLSearchParams();
+      if (userId) query.set("userId", userId);
       if (customAmount) {
         const amount = Number(customAmount.amount);
         const currency = customAmount.currency.trim().toUpperCase();
@@ -1134,13 +1477,22 @@ var PaymentUI = class extends HostedFrameModal {
         query.set("customAmount", String(amount));
         query.set("customCurrency", currency);
       }
-      if (productCode) {
+      if (orderId) {
+        const cleanOrderId = orderId.trim();
+        if (!cleanOrderId) {
+          throw new Error("orderId is required");
+        }
+        this.activeOrderId = cleanOrderId;
+        checkoutUrl = `${base}/checkout/${appId}/orders/${cleanOrderId}`;
+        const queryString = query.toString();
+        if (queryString) checkoutUrl += `?${queryString}`;
+      } else if (productCode) {
         checkoutUrl = `${base}/checkout/${appId}/code/${productCode}?${query.toString()}`;
       } else if (productId && priceId) {
         checkoutUrl = `${base}/checkout/${appId}/${productId}/${priceId}?${query.toString()}`;
       } else {
         throw new Error(
-          "Either productCode or both productId and priceId are required"
+          "Either orderId, productCode, or both productId and priceId are required"
         );
       }
     }
@@ -1150,13 +1502,23 @@ var PaymentUI = class extends HostedFrameModal {
     );
     this.openHostedFrame(finalUrl, {
       allowedOrigin: options?.allowedOrigin,
-      onCloseButton: () => options?.onCancel?.(),
+      onCloseButton: () => {
+        this.cancelHostedOrder("modal_close");
+        options?.onCancel?.(this.activeOrderId || void 0);
+      },
       onMessage: (data, container) => {
         switch (data.type) {
+          case "PAYMENT_STARTED":
+            if (data.orderId) {
+              this.activeOrderId = data.orderId;
+            }
+            break;
           case "PAYMENT_SUCCESS":
+            this.paymentCompleted = true;
             options?.onSuccess?.(data.orderId);
             break;
           case "PAYMENT_CANCELLED":
+            this.cancelHostedOrder("payment_cancelled", data.orderId);
             options?.onCancel?.(data.orderId);
             break;
           case "PAYMENT_RESIZE":
@@ -1167,6 +1529,7 @@ var PaymentUI = class extends HostedFrameModal {
             }
             break;
           case "PAYMENT_CLOSE":
+            this.cancelHostedOrder("payment_close", data.orderId);
             this.close();
             options?.onClose?.();
             break;
@@ -1227,6 +1590,7 @@ function createPaymentUI() {
   PaymentUI,
   createLoginUI,
   createPaymentUI,
+  detectLoginEnvironment,
   handleLoginCallbackIfPresent
 });
 //# sourceMappingURL=client.cjs.map