@blocklet/payment-react 1.20.11 → 1.20.12

package/es/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/es/components/promotion-code.js

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { TextField, Button, Alert, Box, InputAdornment } from "@mui/material";
+import { Add } from "@mui/icons-material";
+import { useState } from "react";
+import LoadingButton from "./loading-button.js";
+import api from "../libs/api.js";
+import { usePaymentContext } from "../contexts/payment.js";
+export default function PromotionCode({
+  checkoutSessionId,
+  initialAppliedCodes = [],
+  disabled = false,
+  className = "",
+  placeholder = "",
+  onUpdate = void 0,
+  currencyId
+}) {
+  const { t } = useLocaleContext();
+  const [showInput, setShowInput] = useState(false);
+  const [code, setCode] = useState("");
+  const [error, setError] = useState("");
+  const [applying, setApplying] = useState(false);
+  const [appliedCodes, setAppliedCodes] = useState(initialAppliedCodes);
+  const { session, paymentState } = 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.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__ */ jsx(Box, { className, children: appliedCodes.length === 0 && !disabled && !isPaymentInProgress && (showInput ? /* @__PURE__ */ jsxs(
+    Box,
+    {
+      onBlur: () => {
+        if (!code.trim()) {
+          setShowInput(false);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          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__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+                  LoadingButton,
+                  {
+                    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__ */ jsx(
+          Alert,
+          {
+            severity: "error",
+            sx: {
+              my: 1
+            },
+            children: error
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: () => setShowInput(true),
+      startIcon: /* @__PURE__ */ jsx(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/es/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/es/contexts/payment.js

@@ -125,6 +125,13 @@ function PaymentProvider({
   }, [session?.user]);
   const prefix = getPrefix();
   const [payable, setPayable] = useState(true);
+  const [paymentState, setPaymentState] = useState({
+    paying: false,
+    stripePaying: false
+  });
+  const updatePaymentState = (state) => {
+    setPaymentState((prev) => ({ ...prev, ...state }));
+  };
   if (error) {
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
   }
@@ -146,7 +153,9 @@ function PaymentProvider({
         setLivemode,
         api,
         payable,
-        setPayable
+        setPayable,
+        paymentState,
+        setPaymentState: updatePaymentState
       },
       children
     }

package/es/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/es/index.js

@@ -39,6 +39,7 @@ import DateRangePicker from "./components/date-range-picker.js";
 import AutoTopupModal from "./components/auto-topup/modal.js";
 import AutoTopup from "./components/auto-topup/index.js";
 import Collapse from "./components/collapse.js";
+import PromotionCode from "./components/promotion-code.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -96,5 +97,6 @@ export {
   CreditStatusChip,
   AutoTopupModal,
   AutoTopup,
-  Collapse
+  Collapse,
+  PromotionCode
 };

package/es/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/es/libs/util.js

@@ -8,6 +8,29 @@ import { joinURL, withQuery } from "ufo";
 import { t } from "../locales/index.js";
 import dayjs from "./dayjs.js";
 export const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
+export const formatCouponTerms = (coupon, currency, locale = "en") => {
+  let couponOff = "";
+  if (coupon.percent_off && coupon.percent_off > 0) {
+    couponOff = 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 = t("payment.checkout.coupon.fixedAmount", locale, {
+        amount: formatAmount(couponOff, currency.decimal),
+        symbol
+      });
+    }
+  }
+  if (!couponOff) {
+    return t("payment.checkout.coupon.noDiscount");
+  }
+  return t(`payment.checkout.coupon.terms.${coupon.duration}`, locale, {
+    couponOff,
+    months: coupon.duration_in_months || 0
+  });
+};
 export const isPaymentKitMounted = () => {
   return (window.blocklet?.componentMountPoints || []).some((x) => x.did === PAYMENT_KIT_DID);
 };

package/es/locales/en.js

@@ -238,6 +238,31 @@ export default flat({
       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/es/locales/zh.js

@@ -226,6 +226,35 @@ export default flat({
         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",

package/es/payment/form/index.js

@@ -103,7 +103,7 @@ export default function PaymentForm({
 }) {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
-  const { session, connect, payable } = usePaymentContext();
+  const { session, connect, payable, setPaymentState } = usePaymentContext();
   const subscription = useSubscription("events");
   const formErrorPosition = "bottom";
   const {
@@ -150,6 +150,12 @@ export default function PaymentForm({
       subscription.on("checkout.session.completed", onCheckoutComplete);
     }
   }, [subscription]);
+  useEffect(() => {
+    setPaymentState({
+      paying: state.submitting || state.paying,
+      stripePaying: state.stripePaying
+    });
+  }, [state.submitting, state.paying, state.stripePaying]);
   const mergeUserInfo = (customerInfo, userInfo) => {
     return {
       ...userInfo || {},

package/es/payment/index.js

@@ -139,6 +139,13 @@ function PaymentInner({
     if (onChange) {
       onChange(methods.getValues());
     }
+    if (state.checkoutSession?.discounts?.length) {
+      api.post(`/api/checkout-sessions/${state.checkoutSession.id}/recalculate-promotion`, {
+        currency_id: currencyId
+      }).then(() => {
+        onPromotionUpdate();
+      });
+    }
   }, [currencyId]);
   const onUpsell = async (from, to) => {
     try {
@@ -200,6 +207,15 @@ function PaymentInner({
       Toast.error(formatError(err));
     }
   };
+  const onPromotionUpdate = async () => {
+    try {
+      const { data } = await api.get(`/api/checkout-sessions/retrieve/${state.checkoutSession.id}`);
+      setState({ checkoutSession: data.checkoutSession });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
   const handlePaid = (result) => {
     setState({ checkoutSession: result.checkoutSession });
     onPaid(result);
@@ -238,6 +254,9 @@ function PaymentInner({
           donationSettings: paymentLink?.donation_settings,
           action,
           completed,
+          checkoutSession: state.checkoutSession,
+          onPromotionUpdate,
+          paymentMethods,
           showFeatures
         }
       ),

package/es/payment/product-item.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Box, Stack, Typography, IconButton, TextField, Alert } from "@mui/material";
-import { Add, Remove } from "@mui/icons-material";
+import { Box, Stack, Typography, IconButton, TextField, Alert, Chip } from "@mui/material";
+import { Add, Remove, LocalOffer } from "@mui/icons-material";
 import { useMemo, useState } from "react";
 import Status from "../components/status.js";
 import Switch from "../components/switch-button.js";
@@ -12,7 +12,8 @@ import {
   formatPrice,
   formatQuantityInventory,
   formatRecurring,
-  formatUpsellSaving
+  formatUpsellSaving,
+  formatAmount
 } from "../libs/util.js";
 import ProductCard from "./product-card.js";
 import dayjs from "../libs/dayjs.js";
@@ -183,6 +184,34 @@ export default function ProductItem({
                   ]
                 }
               ),
+              item.discount_amounts && item.discount_amounts.length > 0 && /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, sx: { mt: 1, alignItems: "center" }, children: item.discount_amounts.map((discountAmount) => /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  icon: /* @__PURE__ */ jsx(LocalOffer, { sx: { fontSize: "0.8rem !important" } }),
+                  label: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: "0.75rem", fontWeight: "medium" }, children: discountAmount.promotion_code?.code || "DISCOUNT" }),
+                    /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { fontSize: "0.75rem" }, children: [
+                      "(-",
+                      formatAmount(discountAmount.amount || "0", currency.decimal),
+                      " ",
+                      currency.symbol,
+                      ")"
+                    ] })
+                  ] }),
+                  size: "small",
+                  variant: "filled",
+                  sx: {
+                    height: 20,
+                    "& .MuiChip-icon": {
+                      color: "warning.main"
+                    },
+                    "& .MuiChip-label": {
+                      px: 1
+                    }
+                  }
+                },
+                discountAmount.promotion_code
+              )) }),
               showFeatures && features.length > 0 && /* @__PURE__ */ jsx(
                 Box,
                 {

package/es/payment/summary.d.ts

@@ -1,4 +1,4 @@
-import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import type { DonationSettings, TLineItemExpanded, TPaymentCurrency, TCheckoutSession, TPaymentMethodExpanded } from '@blocklet/payment-types';
 type Props = {
     items: TLineItemExpanded[];
     currency: TPaymentCurrency;
@@ -17,7 +17,10 @@ type Props = {
     donationSettings?: DonationSettings;
     action?: string;
     completed?: boolean;
+    checkoutSession?: TCheckoutSession;
+    onPromotionUpdate?: () => void;
+    paymentMethods?: TPaymentMethodExpanded[];
     showFeatures?: boolean;
 };
-export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onQuantityChange, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, completed, showFeatures, ...rest }: Props): import("react").JSX.Element;
+export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onQuantityChange, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, completed, checkoutSession, paymentMethods, onPromotionUpdate, showFeatures, ...rest }: Props): import("react").JSX.Element;
 export {};