recur-tw 0.9.4 → 0.9.7

package/dist/index.js

@@ -423,11 +423,14 @@ var init_skeleton_loader = __esm({
         <div class="skeleton-label"></div>
         <div class="skeleton-input"></div>
       </div>
-      <div class="skeleton-field">
-        <div class="skeleton-label"></div>
-        <div class="skeleton-row">
-          <div class="skeleton-input-half"></div>
-          <div class="skeleton-input-half"></div>
+      <div class="skeleton-row">
+        <div class="skeleton-field">
+          <div class="skeleton-label"></div>
+          <div class="skeleton-input"></div>
+        </div>
+        <div class="skeleton-field">
+          <div class="skeleton-label"></div>
+          <div class="skeleton-input"></div>
         </div>
       </div>
       <div class="skeleton-button"></div>
@@ -466,6 +469,7 @@ var init_skeleton_loader = __esm({
       <style>
         :host {
           display: block;
+          container-type: inline-size; /* Enable container queries */
         }
 
         @keyframes recur-sdk-pulse {
@@ -501,8 +505,8 @@ var init_skeleton_loader = __esm({
 
         .skeleton-row {
           display: grid;
-          grid-template-columns: 1fr 1fr;
-          gap: 12px;
+          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+          column-gap: 16px;
         }
 
         .skeleton-input-half {
@@ -745,9 +749,7 @@ var init_payment_form_skeleton = __esm({
         }
 
         .info-row {
-          display: flex;
-          align-items: center;
-          margin-bottom: 6px;
+          margin-bottom: 12px;
         }
 
         .info-row:last-child {
@@ -755,9 +757,11 @@ var init_payment_form_skeleton = __esm({
         }
 
         .info-label {
-          font-size: 13px;
+          display: block;
+          font-size: 12px;
+          line-height: 16px;
           color: #718096;
-          min-width: 80px;
+          margin-bottom: 2px;
         }
 
         .skeleton-info-value {
@@ -782,8 +786,8 @@ var init_payment_form_skeleton = __esm({
 
         .card-row {
           display: grid;
-          grid-template-columns: 1fr 1fr;
-          gap: 12px;
+          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+          column-gap: 16px;
         }
 
         /* Submit Button - matches .recur-submit-button: padding 14px*2 + font 16px * line-height ~1.5 */
@@ -841,14 +845,14 @@ var init_payment_form_skeleton = __esm({
 
         <!-- Customer Info Section (matches createCustomerInfoSection read-only display) -->
         <div class="form-section">
-          <h3 class="section-title">\u5BA2\u6236\u8CC7\u8A0A</h3>
+          <h3 class="section-title">\u806F\u7D61\u8CC7\u8A0A</h3>
           <div class="customer-info-display">
             <div class="info-row">
-              <span class="info-label">\u5BA2\u6236\u59D3\u540D\uFF1A</span>
+              <span class="info-label">\u59D3\u540D</span>
               <div class="skeleton skeleton-info-value"></div>
             </div>
             <div class="info-row">
-              <span class="info-label">\u96FB\u5B50\u90F5\u4EF6\uFF1A</span>
+              <span class="info-label">\u96FB\u5B50\u90F5\u4EF6</span>
               <div class="skeleton skeleton-info-value" style="width: 160px;"></div>
             </div>
           </div>
@@ -1201,7 +1205,7 @@ var init_payment_form = __esm({
       }
       // 監聽 attribute 變化
       static get observedAttributes() {
-        return ["custom-styles", "customer-name", "customer-email", "plan-name", "amount", "billing-period"];
+        return ["custom-styles", "customer-name", "customer-email", "product-name", "amount", "interval"];
       }
       attributeChangedCallback(name, oldValue, newValue) {
         if (name === "custom-styles" && oldValue !== newValue) {
@@ -1226,6 +1230,10 @@ var init_payment_form = __esm({
           background: white;
           border-radius: 12px;
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          /* Prevent double-tap zoom on iOS */
+          touch-action: manipulation;
+          /* Enable container queries for responsive layout */
+          container-type: inline-size;
         }
 
         .form-header {
@@ -1291,7 +1299,7 @@ var init_payment_form = __esm({
         <slot name="order-summary"></slot>
 
         <div class="form-section">
-          <h3 class="section-title">\u5BA2\u6236\u8CC7\u8A0A</h3>
+          <h3 class="section-title">\u806F\u7D61\u8CC7\u8A0A</h3>
           <!-- Slot for customer info fields (Light DOM) -->
           <slot name="customer-info"></slot>
         </div>
@@ -1367,19 +1375,19 @@ var init_payment_form = __esm({
       createOrderSummarySection() {
         const section = document.createElement("div");
         section.className = "order-summary-section";
-        const planName = this.getAttribute("plan-name");
+        const productName = this.getAttribute("product-name");
         const amount = this.getAttribute("amount");
-        const billingPeriod = this.getAttribute("billing-period");
-        if (!planName || !amount) {
+        const interval = this.getAttribute("interval");
+        if (!productName || !amount) {
           return section;
         }
-        const billingPeriodMap = {
-          "MONTHLY": "\u6708",
-          "QUARTERLY": "\u5B63",
-          "YEARLY": "\u5E74",
-          "WEEKLY": "\u9031"
+        const intervalMap = {
+          "day": "\u65E5",
+          "week": "\u9031",
+          "month": "\u6708",
+          "year": "\u5E74"
         };
-        const periodText = billingPeriod ? billingPeriodMap[billingPeriod] || billingPeriod : "";
+        const periodText = interval ? intervalMap[interval] || interval : "";
         section.innerHTML = `
       <style>
         .order-summary-section {
@@ -1433,7 +1441,7 @@ var init_payment_form = __esm({
       <h3 class="order-summary-title">\u8A02\u55AE\u6458\u8981</h3>
       <div class="order-summary-item">
         <span class="order-summary-label">\u8A02\u95B1\u65B9\u6848</span>
-        <span class="order-summary-value">${planName}</span>
+        <span class="order-summary-value">${productName}</span>
       </div>
       ${periodText ? `
         <div class="order-summary-item">
@@ -1465,9 +1473,7 @@ var init_payment_form = __esm({
           }
 
           .recur-info-row {
-            display: flex;
-            align-items: center;
-            margin-bottom: 6px;
+            margin-bottom: 12px;
           }
 
           .recur-info-row:last-child {
@@ -1475,28 +1481,33 @@ var init_payment_form = __esm({
           }
 
           .recur-info-label {
-            font-size: 13px;
+            display: block;
+            font-size: 12px;
+            line-height: 16px;
             color: #718096;
-            min-width: 80px;
+            margin-bottom: 2px;
           }
 
           .recur-info-value {
+            display: block;
             font-size: 14px;
             line-height: 20px;
+            min-height: 20px;
             color: #2d3748;
             font-weight: 500;
+            word-break: break-all;
           }
         </style>
 
         <div class="recur-info-display">
           ${customerName ? `
             <div class="recur-info-row">
-              <span class="recur-info-label">\u5BA2\u6236\u59D3\u540D\uFF1A</span>
+              <span class="recur-info-label">\u59D3\u540D</span>
               <span class="recur-info-value">${customerName}</span>
             </div>
           ` : ""}
           <div class="recur-info-row">
-            <span class="recur-info-label">\u96FB\u5B50\u90F5\u4EF6\uFF1A</span>
+            <span class="recur-info-label">\u96FB\u5B50\u90F5\u4EF6</span>
             <span class="recur-info-value">${customerEmail}</span>
           </div>
         </div>
@@ -1521,7 +1532,7 @@ var init_payment_form = __esm({
           .recur-form-input {
             width: 100%;
             padding: 10px 12px;
-            font-size: 14px;
+            font-size: 16px; /* 16px prevents iOS Safari auto-zoom on focus */
             border: 1px solid #d1d5db;
             border-radius: 6px;
             transition: border-color 0.2s;
@@ -1588,12 +1599,14 @@ var init_payment_form = __esm({
           width: 100%;
           max-width: 100%;
           box-sizing: border-box;
+          /* Help reduce iOS zoom issues */
+          touch-action: manipulation;
         }
 
         .recur-card-row {
           display: grid;
-          grid-template-columns: 1fr 1fr;
-          gap: 12px;
+          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+          column-gap: 16px;
           max-width: 100%;
           box-sizing: border-box;
         }
@@ -1601,6 +1614,8 @@ var init_payment_form = __esm({
         /* Container needs relative positioning for skeleton overlay */
         .recur-card-field-container {
           position: relative;
+          /* Help reduce iOS zoom issues */
+          touch-action: manipulation;
         }
 
         /* Loading skeleton for card fields - shown until PAYUNi iframe loads */
@@ -2613,7 +2628,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.9.4"};
+  version: "0.9.7"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = createContext(null);
@@ -2637,7 +2652,72 @@ function RecurProvider({ children, config: initialConfig = {} }) {
   }, []);
   const checkout = useCallback(
     async (options) => {
-      let modalOverlay = null;
+      let dialog = null;
+      let savedScrollY = 0;
+      let savedBodyStyles = null;
+      const lockBodyScroll = () => {
+        savedScrollY = window.scrollY;
+        savedBodyStyles = {
+          overflow: document.body.style.overflow,
+          position: document.body.style.position,
+          top: document.body.style.top,
+          width: document.body.style.width,
+          height: document.body.style.height
+        };
+        document.body.style.overflow = "hidden";
+        document.body.style.position = "fixed";
+        document.body.style.top = `-${savedScrollY}px`;
+        document.body.style.width = "100%";
+        document.body.style.height = "100%";
+      };
+      const unlockBodyScroll = () => {
+        if (savedBodyStyles) {
+          document.body.style.overflow = savedBodyStyles.overflow;
+          document.body.style.position = savedBodyStyles.position;
+          document.body.style.top = savedBodyStyles.top;
+          document.body.style.width = savedBodyStyles.width;
+          document.body.style.height = savedBodyStyles.height;
+          window.scrollTo(0, savedScrollY);
+          savedBodyStyles = null;
+        }
+      };
+      const closeDialog = () => {
+        if (dialog) {
+          dialog.close();
+          dialog.remove();
+          unlockBodyScroll();
+        }
+      };
+      const injectDialogStyles = () => {
+        if (document.getElementById("recur-dialog-styles")) return;
+        const styleEl = document.createElement("style");
+        styleEl.id = "recur-dialog-styles";
+        styleEl.textContent = `
+          .recur-sdk__dialog {
+            border: none;
+            border-radius: 12px;
+            padding: 0;
+            max-width: 500px;
+            width: 90%;
+            max-height: 90vh;
+            overflow: visible;
+            background: transparent;
+            /* Center the dialog */
+            margin: auto;
+            position: fixed;
+            inset: 0;
+            height: fit-content;
+          }
+          .recur-sdk__dialog::backdrop {
+            background: rgba(0, 0, 0, 0.5);
+          }
+          .recur-sdk__dialog[open] {
+            display: flex;
+            flex-direction: column;
+          }
+        `;
+        document.head.appendChild(styleEl);
+      };
       try {
         console.log("[Recur SDK] Starting checkout flow...", {
           planId: options.planId,
@@ -2662,31 +2742,20 @@ function RecurProvider({ children, config: initialConfig = {} }) {
           "X-Recur-SDK-Version": SDK_VERSION,
           "X-Recur-Source": typeof window !== "undefined" ? window.location.origin : "server"
         };
-        let modalContent = null;
+        let dialogContent = null;
         let loadingContainer = null;
         let embeddedContainer = null;
         if (config.checkoutMode === "modal") {
-          console.log("[Recur SDK] Mode is modal, creating modal with loading state...");
-          modalOverlay = document.createElement("div");
-          modalOverlay.id = "recur-modal-overlay";
-          modalOverlay.className = "recur-sdk__modal-overlay";
-          modalOverlay.style.cssText = `
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.5);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 9999;
-          `;
-          modalContent = document.createElement("div");
-          modalContent.className = "recur-sdk__modal-content";
-          modalContent.style.cssText = `
+          console.log("[Recur SDK] Mode is modal, creating dialog with loading state...");
+          injectDialogStyles();
+          dialog = document.createElement("dialog");
+          dialog.id = "recur-sdk-dialog";
+          dialog.className = "recur-sdk__dialog";
+          dialogContent = document.createElement("div");
+          dialogContent.className = "recur-sdk__dialog-content";
+          dialogContent.style.cssText = `
             max-width: 500px;
-            width: 90%;
+            width: 100%;
             max-height: 90vh;
             overflow-y: auto;
             overflow-x: hidden;
@@ -2724,20 +2793,37 @@ function RecurProvider({ children, config: initialConfig = {} }) {
             closeButton.style.background = "rgba(0, 0, 0, 0.05)";
           };
           closeButton.onclick = () => {
-            modalOverlay?.remove();
+            closeDialog();
             setIsCheckingOut(false);
             options.onPaymentCancel?.();
           };
           loadingContainer = document.createElement("div");
-          loadingContainer.id = "recur-modal-loading";
+          loadingContainer.id = "recur-dialog-loading";
           loadingContainer.className = "recur-sdk__loading-container";
           const skeleton = document.createElement("recur-payment-form-skeleton");
           loadingContainer.appendChild(skeleton);
-          modalContent.appendChild(closeButton);
-          modalContent.appendChild(loadingContainer);
-          modalOverlay.appendChild(modalContent);
-          document.body.appendChild(modalOverlay);
-          console.log("[Recur SDK] Modal created with loading state");
+          dialogContent.appendChild(closeButton);
+          dialogContent.appendChild(loadingContainer);
+          dialog.appendChild(dialogContent);
+          document.body.appendChild(dialog);
+          dialog.showModal();
+          lockBodyScroll();
+          dialog.addEventListener("click", (e) => {
+            const rect = dialog.getBoundingClientRect();
+            const isInDialog = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+            if (!isInDialog) {
+              closeDialog();
+              setIsCheckingOut(false);
+              options.onPaymentCancel?.();
+            }
+          });
+          dialog.addEventListener("cancel", (e) => {
+            e.preventDefault();
+            closeDialog();
+            setIsCheckingOut(false);
+            options.onPaymentCancel?.();
+          });
+          console.log("[Recur SDK] Dialog created with loading state");
         } else if (config.checkoutMode === "embedded") {
           console.log("[Recur SDK] Mode is embedded, checking for container...");
           if (!config.containerElementId) {
@@ -2824,16 +2910,16 @@ function RecurProvider({ children, config: initialConfig = {} }) {
         console.log("[Recur SDK] Initial containerElementId from config:", config.containerElementId);
         let containerElementId = config.containerElementId;
         if (config.checkoutMode === "modal") {
-          console.log("[Recur SDK] Mode is modal, updating modal with payment form...");
-          if (!loadingContainer || !modalContent) {
-            throw new Error("Modal components not initialized");
+          console.log("[Recur SDK] Mode is modal, updating dialog with payment form...");
+          if (!loadingContainer || !dialogContent) {
+            throw new Error("Dialog components not initialized");
           }
           loadingContainer.remove();
           const formContainer = document.createElement("div");
-          containerElementId = "recur-modal-payment-container";
+          containerElementId = "recur-dialog-payment-container";
           formContainer.id = containerElementId;
-          modalContent.appendChild(formContainer);
-          console.log("[Recur SDK] Modal updated with container ID:", containerElementId);
+          dialogContent.appendChild(formContainer);
+          console.log("[Recur SDK] Dialog updated with container ID:", containerElementId);
         } else if (config.checkoutMode === "embedded") {
           console.log("[Recur SDK] Mode is embedded, preparing container...");
           if (!containerElementId) {
@@ -2873,14 +2959,14 @@ function RecurProvider({ children, config: initialConfig = {} }) {
         if (options.customerEmail) {
           paymentForm.setAttribute("customer-email", options.customerEmail);
         }
-        if (checkoutResult.plan?.name) {
-          paymentForm.setAttribute("plan-name", checkoutResult.plan.name);
+        if (checkoutResult.product?.name) {
+          paymentForm.setAttribute("product-name", checkoutResult.product.name);
         }
         if (checkoutResult.checkout?.amount) {
           paymentForm.setAttribute("amount", checkoutResult.checkout.amount.toString());
         }
-        if (checkoutResult.plan?.billingPeriod) {
-          paymentForm.setAttribute("billing-period", checkoutResult.plan.billingPeriod);
+        if (checkoutResult.product?.interval) {
+          paymentForm.setAttribute("interval", checkoutResult.product.interval);
         }
         const customStyles = `
           /* PAYUNi SDK focus \u6A23\u5F0F - shadcn \u98A8\u683C */
@@ -3032,7 +3118,7 @@ function RecurProvider({ children, config: initialConfig = {} }) {
                             options.onPaymentComplete({
                               id: paymentResult.subscription.id,
                               status: "ACTIVE",
-                              planId: checkoutResult.checkout.productId,
+                              productId: checkoutResult.checkout.productId,
                               amount: checkoutResult.checkout.amount,
                               billingPeriod: paymentResult.subscription.billingPeriod,
                               currentPeriodStart: paymentResult.subscription.currentPeriodStart,
@@ -3042,7 +3128,7 @@ function RecurProvider({ children, config: initialConfig = {} }) {
                             options.onPaymentComplete({
                               id: statusData.checkout?.orderId || checkoutId,
                               status: "SUCCEEDED",
-                              planId: checkoutResult.checkout.productId,
+                              productId: checkoutResult.checkout.productId,
                               amount: checkoutResult.checkout.amount,
                               billingPeriod: checkoutResult.checkout.productType,
                               currentPeriodStart: (/* @__PURE__ */ new Date()).toISOString(),
@@ -3050,9 +3136,7 @@ function RecurProvider({ children, config: initialConfig = {} }) {
                             });
                           }
                         }
-                        if (modalOverlay) {
-                          modalOverlay.remove();
-                        }
+                        closeDialog();
                         setIsCheckingOut(false);
                         return;
                       }
@@ -3094,7 +3178,7 @@ function RecurProvider({ children, config: initialConfig = {} }) {
                       options.onPaymentComplete({
                         id: paymentResult.subscription.id,
                         status: "ACTIVE",
-                        planId: checkoutResult.checkout.productId,
+                        productId: checkoutResult.checkout.productId,
                         amount: checkoutResult.checkout.amount,
                         billingPeriod: paymentResult.subscription.billingPeriod,
                         currentPeriodStart: paymentResult.subscription.currentPeriodStart,
@@ -3104,7 +3188,7 @@ function RecurProvider({ children, config: initialConfig = {} }) {
                       options.onPaymentComplete({
                         id: finalOrderId || checkoutId,
                         status: "SUCCEEDED",
-                        planId: checkoutResult.checkout.productId,
+                        productId: checkoutResult.checkout.productId,
                         amount: checkoutResult.checkout.amount,
                         billingPeriod: checkoutResult.checkout.productType,
                         currentPeriodStart: (/* @__PURE__ */ new Date()).toISOString(),
@@ -3112,9 +3196,7 @@ function RecurProvider({ children, config: initialConfig = {} }) {
                       });
                     }
                   }
-                  if (modalOverlay) {
-                    modalOverlay.remove();
-                  }
+                  closeDialog();
                   setIsCheckingOut(false);
                 }
                 return;
@@ -3126,7 +3208,7 @@ function RecurProvider({ children, config: initialConfig = {} }) {
                 options.onPaymentComplete({
                   id: paymentResult.subscription.id,
                   status: paymentResult.subscription.status,
-                  planId: checkoutResult.checkout.productId,
+                  productId: checkoutResult.checkout.productId,
                   amount: checkoutResult.checkout.amount,
                   billingPeriod: paymentResult.subscription.billingPeriod,
                   currentPeriodStart: paymentResult.subscription.currentPeriodStart,
@@ -3138,7 +3220,7 @@ function RecurProvider({ children, config: initialConfig = {} }) {
                 options.onPaymentComplete({
                   id: chargeId,
                   status: chargeStatus,
-                  planId: checkoutResult.checkout.productId,
+                  productId: checkoutResult.checkout.productId,
                   amount: checkoutResult.checkout.amount,
                   billingPeriod: checkoutResult.checkout.productType,
                   currentPeriodStart: (/* @__PURE__ */ new Date()).toISOString(),
@@ -3148,9 +3230,7 @@ function RecurProvider({ children, config: initialConfig = {} }) {
             }
             console.log("[Recur SDK] Checkout flow completed successfully!");
             paymentForm.resetButton?.();
-            if (modalOverlay) {
-              modalOverlay.remove();
-            }
+            closeDialog();
             setIsCheckingOut(false);
           } catch (error) {
             console.error("[Recur SDK] Error in payment flow:", error);
@@ -3169,9 +3249,7 @@ function RecurProvider({ children, config: initialConfig = {} }) {
         console.log("[Recur SDK] Checkout flow initialized, waiting for user input...");
       } catch (error) {
         console.error("[Recur SDK] Checkout error:", error);
-        if (modalOverlay) {
-          modalOverlay.remove();
-        }
+        closeDialog();
         const checkoutError = {
           code: "CHECKOUT_ERROR",
           message: error instanceof Error ? error.message : "An unknown error occurred"