@blocklet/payment-react 1.20.11 → 1.20.12

package/es/payment/summary.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { HelpOutline } from "@mui/icons-material";
-import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton } from "@mui/material";
+import { HelpOutline, Close, LocalOffer } from "@mui/icons-material";
+import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton, Button } from "@mui/material";
 import { BN, fromTokenToUnit, fromUnitToToken } from "@ocap/util";
 import { useRequest, useSetState } from "ahooks";
 import noop from "lodash/noop";
@@ -10,7 +10,14 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { styled } from "@mui/material/styles";
 import Status from "../components/status.js";
 import api from "../libs/api.js";
-import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from "../libs/util.js";
+import {
+  formatAmount,
+  formatCheckoutHeadlines,
+  getPriceUintAmountByCurrency,
+  formatCouponTerms,
+  formatNumber,
+  findCurrency
+} from "../libs/util.js";
 import PaymentAmount from "./amount.js";
 import ProductDonation from "./product-donation.js";
 import ProductItem from "./product-item.js";
@@ -18,6 +25,7 @@ import Livemode from "../components/livemode.js";
 import { usePaymentContext } from "../contexts/payment.js";
 import { useMobile } from "../hooks/mobile.js";
 import LoadingButton from "../components/loading-button.js";
+import PromotionCode from "../components/promotion-code.js";
 const ExpandMore = styled((props) => {
   const { expand, ...other } = props;
   return /* @__PURE__ */ jsx(IconButton, { ...other });
@@ -84,21 +92,58 @@ export default function PaymentSummary({
   action = "",
   trialEnd = 0,
   completed = false,
+  checkoutSession = void 0,
+  paymentMethods = [],
+  onPromotionUpdate = noop,
   showFeatures = false,
   ...rest
 }) {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
-  const settings = usePaymentContext();
+  const { paymentState, ...settings } = usePaymentContext();
   const [state, setState] = useSetState({ loading: false, shake: false, expanded: items?.length < 3 });
   const { data, runAsync } = useRequest(
     () => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
   );
-  const headlines = formatCheckoutHeadlines(items, currency, { trialEnd, trialInDays }, locale);
-  const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : "0";
+  const sessionDiscounts = checkoutSession?.discounts || [];
+  const allowPromotionCodes = !!checkoutSession?.allow_promotion_codes;
+  const hasDiscounts = sessionDiscounts?.length > 0;
+  const discountCurrency = paymentMethods && checkoutSession ? findCurrency(
+    paymentMethods,
+    hasDiscounts ? checkoutSession?.currency_id || currency.id : currency.id
+  ) || settings.settings?.baseCurrency : currency;
+  const headlines = formatCheckoutHeadlines(items, discountCurrency, { trialEnd, trialInDays }, locale);
+  const staking = showStaking ? getStakingSetup(items, discountCurrency, billingThreshold) : "0";
+  const getAppliedPromotionCodes = () => {
+    if (!sessionDiscounts?.length) return [];
+    return sessionDiscounts.map((discount) => ({
+      id: discount.promotion_code || discount.coupon,
+      code: discount.verification_data?.code || "APPLIED",
+      discount_amount: discount.discount_amount
+    }));
+  };
+  const handlePromotionUpdate = () => {
+    onPromotionUpdate?.();
+  };
+  const handleRemovePromotion = async (sessionId) => {
+    if (paymentState.paying || paymentState.stripePaying) {
+      return;
+    }
+    try {
+      await api.delete(`/api/checkout-sessions/${sessionId}/remove-promotion`);
+      onPromotionUpdate?.();
+    } catch (err) {
+      console.error("Failed to remove promotion code:", err);
+    }
+  };
+  const discountAmount = new BN(checkoutSession?.total_details?.amount_discount || "0");
+  const subtotalAmount = fromUnitToToken(
+    new BN(fromTokenToUnit(headlines.actualAmount, discountCurrency?.decimal)).add(new BN(staking)).toString(),
+    discountCurrency?.decimal
+  );
   const totalAmount = fromUnitToToken(
-    new BN(fromTokenToUnit(headlines.actualAmount, currency?.decimal)).add(new BN(staking)).toString(),
-    currency?.decimal
+    new BN(fromTokenToUnit(subtotalAmount, discountCurrency?.decimal)).sub(discountAmount).toString(),
+    discountCurrency?.decimal
   );
   useBus(
     "error.REQUIRE_CROSS_SELL",
@@ -160,9 +205,9 @@ export default function PaymentSummary({
               item: x,
               settings: donationSettings,
               onChange: onChangeAmount,
-              currency
+              currency: discountCurrency
             },
-            `${x.price_id}-${currency.id}`
+            `${x.price_id}-${discountCurrency.id}`
           ) : /* @__PURE__ */ jsx(
             ProductItem,
             {
@@ -170,7 +215,7 @@ export default function PaymentSummary({
               items,
               trialInDays,
               trialEnd,
-              currency,
+              currency: discountCurrency,
               onUpsell: handleUpsell,
               onDownsell: handleDownsell,
               adjustableQuantity: x.adjustable_quantity,
@@ -205,7 +250,7 @@ export default function PaymentSummary({
                 }
               )
             },
-            `${x.price_id}-${currency.id}`
+            `${x.price_id}-${discountCurrency.id}`
           )
         ) }),
         data && items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsx(
@@ -220,7 +265,7 @@ export default function PaymentSummary({
                 item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
                 items,
                 trialInDays,
-                currency,
+                currency: discountCurrency,
                 trialEnd,
                 onUpsell: noop,
                 onDownsell: noop,
@@ -362,14 +407,146 @@ export default function PaymentSummary({
               }
             ),
             /* @__PURE__ */ jsxs(Typography, { children: [
-              formatAmount(staking, currency.decimal),
+              formatAmount(staking, discountCurrency.decimal),
               " ",
-              currency.symbol
+              discountCurrency.symbol
             ] })
           ]
         }
       )
     ] }),
+    (allowPromotionCodes || hasDiscounts) && /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        spacing: 1,
+        sx: {
+          justifyContent: "space-between",
+          alignItems: "center",
+          ...staking > 0 && {
+            borderTop: "1px solid",
+            borderColor: "divider",
+            pt: 1,
+            mt: 1
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { className: "base-label", children: t("common.subtotal") }),
+          /* @__PURE__ */ jsxs(Typography, { children: [
+            formatNumber(subtotalAmount),
+            " ",
+            discountCurrency.symbol
+          ] })
+        ]
+      }
+    ),
+    allowPromotionCodes && !hasDiscounts && /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(
+      PromotionCode,
+      {
+        checkoutSessionId: checkoutSession.id,
+        initialAppliedCodes: getAppliedPromotionCodes(),
+        disabled: completed,
+        onUpdate: handlePromotionUpdate,
+        currencyId: currency.id
+      }
+    ) }),
+    hasDiscounts && /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          py: 1.5
+        },
+        children: sessionDiscounts.map((discount) => {
+          const promotionCodeInfo = discount.promotion_code_details;
+          const couponInfo = discount.coupon_details;
+          const discountDescription = couponInfo ? formatCouponTerms(couponInfo, discountCurrency, locale) : "";
+          const notSupported = discountDescription === t("payment.checkout.coupon.noDiscount");
+          return /* @__PURE__ */ jsxs(Stack, { children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Stack,
+                    {
+                      direction: "row",
+                      spacing: 1,
+                      sx: {
+                        alignItems: "center",
+                        backgroundColor: "grey.100",
+                        width: "fit-content",
+                        px: 1,
+                        py: 0.5,
+                        borderRadius: 1
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          Typography,
+                          {
+                            sx: {
+                              fontWeight: "medium",
+                              fontSize: "small",
+                              display: "flex",
+                              alignItems: "center",
+                              gap: 0.5
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(LocalOffer, { sx: { color: "warning.main", fontSize: "small" } }),
+                              promotionCodeInfo?.code || discount.verification_data?.code || t("payment.checkout.discount")
+                            ]
+                          }
+                        ),
+                        !completed && /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            size: "small",
+                            disabled: paymentState.paying || paymentState.stripePaying,
+                            onClick: () => handleRemovePromotion(checkoutSessionId),
+                            sx: {
+                              minWidth: "auto",
+                              width: 16,
+                              height: 16,
+                              color: "text.secondary",
+                              "&.Mui-disabled": {
+                                color: "text.disabled"
+                              }
+                            },
+                            children: /* @__PURE__ */ jsx(Close, { sx: { fontSize: 14 } })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Typography, { sx: { color: "text.secondary" }, children: [
+                    "-",
+                    formatAmount(discount.discount_amount || "0", discountCurrency.decimal),
+                    " ",
+                    discountCurrency.symbol
+                  ] })
+                ]
+              }
+            ),
+            discountDescription && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                sx: {
+                  fontSize: "small",
+                  color: notSupported ? "error.main" : "text.secondary",
+                  mt: 0.5
+                },
+                children: discountDescription
+              }
+            )
+          ] }, discount.promotion_code || discount.coupon || `discount-${discount.discount_amount}`);
+        })
+      }
+    ),
     /* @__PURE__ */ jsxs(
       Stack,
       {
@@ -385,7 +562,7 @@ export default function PaymentSummary({
             t("common.total"),
             " "
           ] }),
-          /* @__PURE__ */ jsx(PaymentAmount, { amount: `${totalAmount} ${currency.symbol}`, sx: { fontSize: "16px" } })
+          /* @__PURE__ */ jsx(PaymentAmount, { amount: `${totalAmount} ${discountCurrency.symbol}`, sx: { fontSize: "16px" } })
         ]
       }
     ),

package/lib/components/promotion-code.d.ts

@@ -0,0 +1,19 @@
+export interface AppliedPromoCode {
+    id: string;
+    code: string;
+    discount_amount?: string;
+}
+interface PromotionCodeProps {
+    checkoutSessionId: string;
+    initialAppliedCodes?: AppliedPromoCode[];
+    disabled?: boolean;
+    className?: string;
+    placeholder?: string;
+    currencyId: string;
+    onUpdate?: (data: {
+        appliedCodes: AppliedPromoCode[];
+        discountAmount: string;
+    }) => void;
+}
+export default function PromotionCode({ checkoutSessionId, initialAppliedCodes, disabled, className, placeholder, onUpdate, currencyId, }: PromotionCodeProps): import("react").JSX.Element;
+export {};

package/lib/components/promotion-code.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PromotionCode;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
+var _react = require("react");
+var _loadingButton = _interopRequireDefault(require("./loading-button"));
+var _api = _interopRequireDefault(require("../libs/api"));
+var _payment = require("../contexts/payment");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PromotionCode({
+  checkoutSessionId,
+  initialAppliedCodes = [],
+  disabled = false,
+  className = "",
+  placeholder = "",
+  onUpdate = void 0,
+  currencyId
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [showInput, setShowInput] = (0, _react.useState)(false);
+  const [code, setCode] = (0, _react.useState)("");
+  const [error, setError] = (0, _react.useState)("");
+  const [applying, setApplying] = (0, _react.useState)(false);
+  const [appliedCodes, setAppliedCodes] = (0, _react.useState)(initialAppliedCodes);
+  const {
+    session,
+    paymentState
+  } = (0, _payment.usePaymentContext)();
+  const handleLoginCheck = () => {
+    if (!session.user) {
+      session?.login(() => {
+        handleApply();
+      });
+    } else {
+      handleApply();
+    }
+  };
+  const handleApply = async () => {
+    if (!code.trim()) return;
+    if (paymentState.paying || paymentState.stripePaying) {
+      return;
+    }
+    setApplying(true);
+    setError("");
+    try {
+      const response = await _api.default.post(`/api/checkout-sessions/${checkoutSessionId}/apply-promotion`, {
+        promotion_code: code.trim(),
+        currency_id: currencyId
+      });
+      const discounts = response.data.discounts || [];
+      const appliedDiscount = discounts[0];
+      if (appliedDiscount) {
+        const newCode = {
+          id: appliedDiscount.promotion_code || appliedDiscount.coupon,
+          code: code.trim(),
+          discount_amount: appliedDiscount.discount_amount
+        };
+        setAppliedCodes([newCode]);
+        setCode("");
+        setShowInput(false);
+        onUpdate?.({
+          appliedCodes: [newCode],
+          discountAmount: appliedDiscount.discount_amount
+        });
+      }
+    } catch (err) {
+      const errorMessage = err.response?.data?.error || err.message;
+      setError(errorMessage);
+    } finally {
+      setApplying(false);
+    }
+  };
+  const handleKeyPress = event => {
+    if (event.key === "Enter" && !applying && code.trim()) {
+      handleLoginCheck();
+    }
+  };
+  const isPaymentInProgress = paymentState.paying || paymentState.stripePaying;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+    className,
+    children: appliedCodes.length === 0 && !disabled && !isPaymentInProgress && (showInput ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      onBlur: () => {
+        if (!code.trim()) {
+          setShowInput(false);
+        }
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+        fullWidth: true,
+        value: code,
+        onChange: e => setCode(e.target.value),
+        onKeyPress: handleKeyPress,
+        placeholder: placeholder || t("payment.checkout.promotion.placeholder"),
+        variant: "outlined",
+        size: "small",
+        disabled: applying,
+        autoFocus: true,
+        slotProps: {
+          input: {
+            endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+              position: "end",
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
+                size: "small",
+                onClick: handleLoginCheck,
+                loading: applying,
+                disabled: !code.trim(),
+                variant: "text",
+                sx: {
+                  color: "primary.main",
+                  fontSize: "small"
+                },
+                children: t("payment.checkout.promotion.apply")
+              })
+            })
+          }
+        },
+        sx: {
+          "& .MuiOutlinedInput-root": {
+            pr: 1
+          }
+        }
+      }), error && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+        severity: "error",
+        sx: {
+          my: 1
+        },
+        children: error
+      })]
+    }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+      onClick: () => setShowInput(true),
+      startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {
+        fontSize: "small"
+      }),
+      variant: "text",
+      sx: {
+        fontWeight: "normal",
+        textTransform: "none",
+        justifyContent: "flex-start",
+        p: 0,
+        "&:hover": {
+          backgroundColor: "transparent",
+          textDecoration: "underline"
+        }
+      },
+      children: t("payment.checkout.promotion.add_code")
+    }))
+  });
+}

package/lib/contexts/payment.d.ts

@@ -19,6 +19,14 @@ export type PaymentContextType = {
     api: Axios;
     payable: boolean;
     setPayable: (status: boolean) => void;
+    paymentState: {
+        paying: boolean;
+        stripePaying: boolean;
+    };
+    setPaymentState: (state: Partial<{
+        paying: boolean;
+        stripePaying: boolean;
+    }>) => void;
 };
 export type PaymentContextProps = {
     session: import('@arcblock/did-connect-react/lib/types').SessionContext['session'];

package/lib/contexts/payment.js

@@ -145,6 +145,16 @@ function PaymentProvider({
   }, [session?.user]);
   const prefix = (0, _util.getPrefix)();
   const [payable, setPayable] = (0, _react.useState)(true);
+  const [paymentState, setPaymentState] = (0, _react.useState)({
+    paying: false,
+    stripePaying: false
+  });
+  const updatePaymentState = state => {
+    setPaymentState(prev => ({
+      ...prev,
+      ...state
+    }));
+  };
   if (error) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
       severity: "error",
@@ -167,7 +177,9 @@ function PaymentProvider({
       setLivemode,
       api: _api.default,
       payable,
-      setPayable
+      setPayable,
+      paymentState,
+      setPaymentState: updatePaymentState
     },
     children
   });

package/lib/index.d.ts

@@ -39,6 +39,7 @@ import DateRangePicker from './components/date-range-picker';
 import AutoTopupModal from './components/auto-topup/modal';
 import AutoTopup from './components/auto-topup';
 import Collapse from './components/collapse';
+import PromotionCode from './components/promotion-code';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -53,4 +54,4 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, };
+export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, PromotionCode, };

package/lib/index.js

@@ -47,6 +47,7 @@ var _exportNames = {
   AutoTopupModal: true,
   AutoTopup: true,
   Collapse: true,
+  PromotionCode: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -243,6 +244,12 @@ Object.defineProperty(exports, "ProductSkeleton", {
     return _productSkeleton.default;
   }
 });
+Object.defineProperty(exports, "PromotionCode", {
+  enumerable: true,
+  get: function () {
+    return _promotionCode.default;
+  }
+});
 Object.defineProperty(exports, "ResumeSubscription", {
   enumerable: true,
   get: function () {
@@ -368,6 +375,7 @@ var _dateRangePicker = _interopRequireDefault(require("./components/date-range-p
 var _modal = _interopRequireDefault(require("./components/auto-topup/modal"));
 var _autoTopup = _interopRequireDefault(require("./components/auto-topup"));
 var _collapse = _interopRequireDefault(require("./components/collapse"));
+var _promotionCode = _interopRequireDefault(require("./components/promotion-code"));
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {

package/lib/libs/util.d.ts

@@ -1,6 +1,10 @@
-import type { PaymentDetails, PriceCurrency, PriceRecurring, TInvoiceExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TProductExpanded, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
+import type { PaymentDetails, PriceCurrency, PriceRecurring, TCoupon, TInvoiceExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TProductExpanded, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 import type { ActionProps, PricingRenderProps } from '../types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
+/**
+ * Format coupon discount terms for display
+ */
+export declare const formatCouponTerms: (coupon: TCoupon, currency: TPaymentCurrency, locale?: string) => string;
 export declare const isPaymentKitMounted: () => any;
 export declare const getPrefix: () => string;
 export declare function isCrossOrigin(): boolean;

package/lib/libs/util.js

@@ -10,6 +10,7 @@ exports.formatAmount = formatAmount;
 exports.formatAmountPrecisionLimit = formatAmountPrecisionLimit;
 exports.formatBNStr = formatBNStr;
 exports.formatCheckoutHeadlines = formatCheckoutHeadlines;
+exports.formatCouponTerms = void 0;
 exports.formatDateTime = formatDateTime;
 exports.formatError = void 0;
 exports.formatLineItemPricing = formatLineItemPricing;
@@ -77,6 +78,34 @@ var _locales = require("../locales");
 var _dayjs = _interopRequireDefault(require("./dayjs"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const PAYMENT_KIT_DID = exports.PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
+const formatCouponTerms = (coupon, currency, locale = "en") => {
+  let couponOff = "";
+  if (coupon.percent_off && coupon.percent_off > 0) {
+    couponOff = (0, _locales.t)("payment.checkout.coupon.percentage", locale, {
+      percent: coupon.percent_off
+    });
+  }
+  if (coupon.amount_off && coupon.amount_off !== "0") {
+    const {
+      symbol
+    } = currency;
+    couponOff = coupon.currency_id === currency.id ? coupon.amount_off || "" : coupon.currency_options?.[currency.id]?.amount_off || "";
+    if (couponOff) {
+      couponOff = (0, _locales.t)("payment.checkout.coupon.fixedAmount", locale, {
+        amount: formatAmount(couponOff, currency.decimal),
+        symbol
+      });
+    }
+  }
+  if (!couponOff) {
+    return (0, _locales.t)("payment.checkout.coupon.noDiscount");
+  }
+  return (0, _locales.t)(`payment.checkout.coupon.terms.${coupon.duration}`, locale, {
+    couponOff,
+    months: coupon.duration_in_months || 0
+  });
+};
+exports.formatCouponTerms = formatCouponTerms;
 const isPaymentKitMounted = () => {
   return (window.blocklet?.componentMountPoints || []).some(x => x.did === PAYMENT_KIT_DID);
 };

package/lib/locales/en.js

@@ -245,6 +245,31 @@ module.exports = (0, _flat.default)({
       orderSummary: "Order Summary",
       paymentDetails: "Payment Details",
       productListTotal: "Includes {total} items",
+      promotion: {
+        add_code: "Add promotion code",
+        enter_code: "Enter promotion code",
+        placeholder: "Enter code",
+        apply: "Apply",
+        applied: "Applied promotion codes",
+        dialog: {
+          title: "Add promotion code"
+        },
+        error: {
+          unknown: "Unknown error",
+          network: "Network error occurred",
+          removal: "Failed to remove code"
+        }
+      },
+      coupon: {
+        noDiscount: "No discount",
+        percentage: "{percent}% off",
+        fixedAmount: "{amount} {symbol} off",
+        terms: {
+          forever: "{couponOff} forever",
+          once: "{couponOff} once",
+          repeating: "{couponOff} for {months} month{months > 1 ? 's' : ''}"
+        }
+      },
       connectModal: {
         title: "{action}",
         scan: "Use the following methods to complete this payment",

package/lib/locales/zh.js

@@ -233,6 +233,35 @@ module.exports = (0, _flat.default)({
         add: "\u6DFB\u52A0\u5230\u8BA2\u5355",
         remove: "\u4ECE\u8BA2\u5355\u79FB\u9664"
       },
+      promotion: {
+        add_code: "\u6DFB\u52A0\u4FC3\u9500\u7801",
+        enter_code: "\u8F93\u5165\u4FC3\u9500\u7801",
+        apply: "\u5E94\u7528",
+        applied: "\u5DF2\u5E94\u7528\u7684\u4FC3\u9500\u7801",
+        placeholder: "\u8F93\u5165\u4FC3\u9500\u7801",
+        duration_once: "1\u6B21\u4F18\u60E0 {amount} {symbol}",
+        duration_repeating: "{months}\u4E2A\u6708\u4F18\u60E0 {amount} {symbol}",
+        duration_forever: "\u6C38\u4E45\u4F18\u60E0 {amount} {symbol}",
+        dialog: {
+          title: "\u6DFB\u52A0\u4FC3\u9500\u7801"
+        },
+        error: {
+          invalid: "\u65E0\u6548\u7684\u4FC3\u9500\u7801",
+          expired: "\u4FC3\u9500\u7801\u5DF2\u8FC7\u671F",
+          used: "\u4FC3\u9500\u7801\u5DF2\u88AB\u4F7F\u7528",
+          not_applicable: "\u4FC3\u9500\u7801\u4E0D\u9002\u7528\u4E8E\u6B64\u8BA2\u5355"
+        }
+      },
+      coupon: {
+        noDiscount: "\u65E0\u4F18\u60E0",
+        percentage: "{percent}%",
+        fixedAmount: "{amount} {symbol}",
+        terms: {
+          forever: "\u6C38\u4E45\u4EAB {couponOff} \u6298\u6263",
+          once: "\u5355\u6B21\u4EAB {couponOff} \u6298\u6263",
+          repeating: "{months} \u4E2A\u6708\u5185\u4EAB {couponOff} \u6298\u6263"
+        }
+      },
       credit: {
         oneTimeInfo: "\u4ED8\u6B3E\u5B8C\u6210\u540E\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
         recurringInfo: "\u60A8\u5C06{period}\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",