recur-tw 0.13.0 → 0.13.2

package/dist/index.js

@@ -1046,6 +1046,124 @@ var init_payment_form_light = __esm({
   }
 });
 
+// src/utils/checkout-display.ts
+function formatZhe(basisPoints) {
+  const zhe = (1e4 - basisPoints) / 1e3;
+  if (Number.isInteger(zhe)) return `${zhe} \u6298`;
+  const zhe10 = zhe * 10;
+  if (Number.isInteger(zhe10)) return `${zhe10} \u6298`;
+  return `${(zhe * 10).toFixed(2)} \u6298`;
+}
+function getIntervalText(interval, count) {
+  if (!interval) return "";
+  const countText = count && count > 1 ? count.toString() : "";
+  switch (interval.toUpperCase()) {
+    case "MONTH":
+      return `${countText}\u6708`;
+    case "YEAR":
+      return `${countText}\u5E74`;
+    case "WEEK":
+      return `${countText}\u9031`;
+    case "DAY":
+      return `${countText}\u5929`;
+    default:
+      return "";
+  }
+}
+function formatPrice(amount) {
+  return `NT$ ${amount.toLocaleString("zh-TW")}`;
+}
+function getCheckoutDiscountDisplay(input) {
+  const {
+    discountType,
+    couponDiscountValue,
+    discountAmount,
+    duration,
+    durationMonths,
+    productPrice,
+    productInterval,
+    productIntervalCount,
+    bonusMonths,
+    bonusTrialDays
+  } = input;
+  const intervalText = getIntervalText(productInterval, productIntervalCount);
+  const originalPriceText = intervalText ? `${formatPrice(productPrice)}/${intervalText}` : formatPrice(productPrice);
+  const bonusSuffix = buildBonusSuffix(bonusMonths, bonusTrialDays);
+  if (discountAmount === 0 && (bonusMonths || bonusTrialDays)) {
+    return {
+      line1: buildPureBonusLine(bonusMonths, bonusTrialDays),
+      line2: null
+    };
+  }
+  if (discountAmount === 0) {
+    return { line1: "", line2: null };
+  }
+  const afterLine = `\u4E4B\u5F8C ${originalPriceText}`;
+  if (discountType === "FIRST_PERIOD_PRICE") {
+    const firstPeriodPrice = couponDiscountValue;
+    const priceText = firstPeriodPrice === 0 ? "\u514D\u8CBB" : `\u7279\u50F9 ${formatPrice(firstPeriodPrice)}`;
+    const line1 = bonusSuffix ? `\u9996\u671F${priceText}\uFF0C${bonusSuffix}` : `\u9996\u671F${priceText}`;
+    return { line1, line2: afterLine };
+  }
+  if (discountType === "FIXED_AMOUNT") {
+    return buildStandardDiscount({
+      discountText: `\u6298 ${formatPrice(couponDiscountValue)}`,
+      duration,
+      durationMonths,
+      bonusSuffix,
+      afterLine
+    });
+  }
+  if (discountType === "PERCENTAGE") {
+    return buildStandardDiscount({
+      discountText: `\u4EAB ${formatZhe(couponDiscountValue)}`,
+      duration,
+      durationMonths,
+      bonusSuffix,
+      afterLine
+    });
+  }
+  return { line1: "", line2: null };
+}
+function buildStandardDiscount(opts) {
+  const { discountText, duration, durationMonths, bonusSuffix, afterLine } = opts;
+  switch (duration) {
+    case "ONCE": {
+      const base = `\u9996\u671F${discountText}`;
+      const line1 = bonusSuffix ? `${base}\uFF0C${bonusSuffix}` : base;
+      return { line1, line2: afterLine };
+    }
+    case "REPEATING": {
+      const periods = durationMonths ?? 0;
+      const line1 = `\u524D ${periods} \u671F\u6BCF\u671F${discountText}`;
+      return { line1, line2: afterLine };
+    }
+    case "FOREVER": {
+      const line1 = `\u6BCF\u671F${discountText}`;
+      return { line1, line2: null };
+    }
+    default:
+      return { line1: "", line2: null };
+  }
+}
+function buildBonusSuffix(bonusMonths, bonusTrialDays) {
+  const parts = [];
+  if (bonusMonths) parts.push(`\u52A0\u9001 ${bonusMonths} \u500B\u6708`);
+  if (bonusTrialDays) parts.push(`\u5EF6\u9577 ${bonusTrialDays} \u5929\u8A66\u7528`);
+  if (parts.length === 0) return null;
+  return `\u4E26${parts.join("\u53CA")}`;
+}
+function buildPureBonusLine(bonusMonths, bonusTrialDays) {
+  const parts = [];
+  if (bonusMonths) parts.push(`\u52A0\u9001 ${bonusMonths} \u500B\u6708`);
+  if (bonusTrialDays) parts.push(`\u5EF6\u9577\u8A66\u7528 ${bonusTrialDays} \u5929`);
+  return parts.join("\u53CA");
+}
+var init_checkout_display = __esm({
+  "src/utils/checkout-display.ts"() {
+  }
+});
+
 // src/components/payment-form.ts
 var payment_form_exports = {};
 __export(payment_form_exports, {
@@ -1056,6 +1174,7 @@ var init_payment_form = __esm({
   "src/components/payment-form.ts"() {
     init_payment_form_shadow();
     init_payment_form_light();
+    init_checkout_display();
     icons = {
       lock: html`
     <svg class="security-icon" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -1359,73 +1478,26 @@ var init_payment_form = __esm({
       </div>
     `;
       }
-      // Helper to get interval text in Chinese
-      getIntervalText(interval, count) {
-        if (!interval) return "";
-        const countText = count && count > 1 ? count.toString() : "";
-        switch (interval.toUpperCase()) {
-          case "MONTH":
-            return `${countText}\u6708`;
-          case "YEAR":
-            return `${countText}\u5E74`;
-          case "WEEK":
-            return `${countText}\u9031`;
-          case "DAY":
-            return `${countText}\u5929`;
-          default:
-            return "";
-        }
-      }
-      // Get discount description based on type and duration
-      getDiscountDescription() {
+      // Get unified discount display using shared function
+      getDiscountDisplay() {
         if (!this._appliedCoupon) return null;
-        const { discountType, duration, durationMonths, productPrice, productInterval, productIntervalCount } = this._appliedCoupon;
-        const intervalText = this.getIntervalText(productInterval, productIntervalCount);
-        const originalPriceText = productPrice && intervalText ? `NT$ ${productPrice.toLocaleString()}/${intervalText}` : productPrice ? `NT$ ${productPrice.toLocaleString()}` : "";
         const amount = parseInt(this.getAttribute("amount") || "0", 10);
-        const finalAmount = amount - this._appliedCoupon.discountAmount;
-        if (discountType === "FIRST_PERIOD_PRICE") {
-          if (originalPriceText) {
-            return `\u9996\u671F\u53EA\u9700 NT$ ${finalAmount.toLocaleString()}\uFF0C\u4E4B\u5F8C ${originalPriceText}`;
-          }
-          return `\u9996\u671F\u53EA\u9700 NT$ ${finalAmount.toLocaleString()}`;
-        }
-        if (duration) {
-          switch (duration) {
-            case "ONCE":
-              if (originalPriceText) {
-                return `\u9996\u671F\u6298\u6263\uFF0C\u4E4B\u5F8C ${originalPriceText}`;
-              }
-              return "\u50C5\u9650\u9996\u671F";
-            case "REPEATING":
-              if (durationMonths) {
-                return `\u524D ${durationMonths} \u671F\u4EAB\u512A\u60E0\uFF0C\u4E4B\u5F8C\u6062\u5FA9\u539F\u50F9`;
-              }
-              return null;
-            case "FOREVER":
-              return "\u7D42\u8EAB\u512A\u60E0";
-            default:
-              return null;
-          }
-        }
-        return null;
-      }
-      // Get bonus description
-      getBonusDescription() {
-        if (!this._appliedCoupon) return null;
-        const parts = [];
-        if (this._appliedCoupon.bonusTrialDays) {
-          parts.push(`\u5EF6\u9577\u8A66\u7528 ${this._appliedCoupon.bonusTrialDays} \u5929`);
-        }
-        if (this._appliedCoupon.bonusMonths) {
-          parts.push(`\u52A0\u9001 ${this._appliedCoupon.bonusMonths} \u500B\u6708`);
-        }
-        return parts.length > 0 ? parts.join("\u3001") : null;
+        return getCheckoutDiscountDisplay({
+          discountType: this._appliedCoupon.discountType,
+          couponDiscountValue: this._appliedCoupon.couponDiscountValue,
+          discountAmount: this._appliedCoupon.discountAmount,
+          duration: this._appliedCoupon.duration || "ONCE",
+          durationMonths: this._appliedCoupon.durationMonths,
+          productPrice: this._appliedCoupon.productPrice ?? amount,
+          productInterval: this._appliedCoupon.productInterval,
+          productIntervalCount: this._appliedCoupon.productIntervalCount,
+          bonusMonths: this._appliedCoupon.bonusMonths,
+          bonusTrialDays: this._appliedCoupon.bonusTrialDays
+        });
       }
       renderCoupon() {
         if (this._appliedCoupon) {
-          const discountDescription = this.getDiscountDescription();
-          const bonusDescription = this.getBonusDescription();
+          const display = this.getDiscountDisplay();
           return html`
         <div class="recur-coupon__applied-wrapper">
           <div class="recur-coupon__applied">
@@ -1446,18 +1518,17 @@ var init_payment_form = __esm({
                 ${this._couponLoading ? icons.spinner : icons.close}
               </button>
             </div>
-            <span class="recur-coupon__applied-amount">
-              -NT$ ${this._appliedCoupon.discountAmount.toLocaleString()}
-            </span>
+            ${this._appliedCoupon.discountAmount > 0 ? html`
+              <span class="recur-coupon__applied-amount">
+                -NT$ ${this._appliedCoupon.discountAmount.toLocaleString()}
+              </span>
+            ` : nothing}
           </div>
-          ${discountDescription ? html`
-            <p class="recur-coupon__description">${discountDescription}</p>
+          ${display?.line1 ? html`
+            <p class="recur-coupon__description">${display.line1}</p>
           ` : nothing}
-          ${bonusDescription ? html`
-            <div class="recur-coupon__bonus">
-              <span>✨</span>
-              <span>${bonusDescription}</span>
-            </div>
+          ${display?.line2 ? html`
+            <p class="recur-coupon__description">${display.line2}</p>
           ` : nothing}
         </div>
       `;
@@ -1620,10 +1691,10 @@ var init_payment_form = __esm({
       getCouponAppliedHTML() {
         const coupon = this._appliedCoupon;
         const nameHTML = coupon.couponName ? `<span class="recur-coupon__applied-name">${coupon.couponName}</span><span class="recur-coupon__applied-code">(${coupon.code})</span>` : `<span class="recur-coupon__applied-name">${coupon.code}</span>`;
-        const discountDescription = this.getDiscountDescription();
-        const bonusDescription = this.getBonusDescription();
-        const descriptionHTML = discountDescription ? `<p class="recur-coupon__description">${discountDescription}</p>` : "";
-        const bonusHTML = bonusDescription ? `<div class="recur-coupon__bonus"><span>\u2728</span><span>${bonusDescription}</span></div>` : "";
+        const display = this.getDiscountDisplay();
+        const amountHTML = coupon.discountAmount > 0 ? `<span class="recur-coupon__applied-amount">-NT$ ${coupon.discountAmount.toLocaleString()}</span>` : "";
+        const line1HTML = display?.line1 ? `<p class="recur-coupon__description">${display.line1}</p>` : "";
+        const line2HTML = display?.line2 ? `<p class="recur-coupon__description">${display.line2}</p>` : "";
         return `
       <div class="recur-coupon__applied-wrapper">
         <div class="recur-coupon__applied">
@@ -1636,10 +1707,10 @@ var init_payment_form = __esm({
               ${this._couponLoading ? '<span class="recur-coupon__spinner"></span>' : '<svg class="recur-coupon__remove-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>'}
             </button>
           </div>
-          <span class="recur-coupon__applied-amount">-NT$ ${coupon.discountAmount.toLocaleString()}</span>
+          ${amountHTML}
         </div>
-        ${descriptionHTML}
-        ${bonusHTML}
+        ${line1HTML}
+        ${line2HTML}
       </div>
     `;
       }
@@ -1711,6 +1782,7 @@ var init_payment_form = __esm({
             couponName: data.discount.coupon_name,
             discountType: data.discount.discount_type,
             discountAmount: data.discount.discount_amount,
+            couponDiscountValue: data.discount.coupon_discount_value ?? data.discount.discount_amount,
             duration: data.discount.duration,
             durationMonths: data.discount.duration_months,
             bonusTrialDays: data.discount.bonus_trial_days,
@@ -2736,7 +2808,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.13.0"};
+  version: "0.13.2"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = createContext(null);
@@ -2955,6 +3027,8 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
           dialog.className = "recur-sdk__dialog";
           dialogContent = document.createElement("div");
           dialogContent.className = "recur-sdk__dialog-content";
+          dialogContent.setAttribute("tabindex", "-1");
+          dialogContent.setAttribute("autofocus", "");
           dialogContent.style.cssText = `
             max-width: 500px;
             width: 100%;
@@ -2965,6 +3039,7 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
             border-radius: 12px;
             background: white;
             box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+            outline: none;
           `;
           const closeButton = document.createElement("button");
           closeButton.className = "recur-sdk__close-button";