@blocklet/payment-react 1.20.11 → 1.20.12

package/lib/payment/form/index.js

@@ -122,7 +122,8 @@ function PaymentForm({
   const {
     session,
     connect,
-    payable
+    payable,
+    setPaymentState
   } = (0, _payment.usePaymentContext)();
   const subscription = (0, _subscription.useSubscription)("events");
   const formErrorPosition = "bottom";
@@ -174,6 +175,12 @@ function PaymentForm({
       subscription.on("checkout.session.completed", onCheckoutComplete);
     }
   }, [subscription]);
+  (0, _react.useEffect)(() => {
+    setPaymentState({
+      paying: state.submitting || state.paying,
+      stripePaying: state.stripePaying
+    });
+  }, [state.submitting, state.paying, state.stripePaying]);
   const mergeUserInfo = (customerInfo, userInfo) => {
     return {
       ...(userInfo || {}),

package/lib/payment/index.js

@@ -149,6 +149,13 @@ function PaymentInner({
     if (onChange) {
       onChange(methods.getValues());
     }
+    if (state.checkoutSession?.discounts?.length) {
+      _api.default.post(`/api/checkout-sessions/${state.checkoutSession.id}/recalculate-promotion`, {
+        currency_id: currencyId
+      }).then(() => {
+        onPromotionUpdate();
+      });
+    }
   }, [currencyId]);
   const onUpsell = async (from, to) => {
     try {
@@ -244,6 +251,19 @@ function PaymentInner({
       _Toast.default.error((0, _util2.formatError)(err));
     }
   };
+  const onPromotionUpdate = async () => {
+    try {
+      const {
+        data
+      } = await _api.default.get(`/api/checkout-sessions/retrieve/${state.checkoutSession.id}`);
+      setState({
+        checkoutSession: data.checkoutSession
+      });
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util2.formatError)(err));
+    }
+  };
   const handlePaid = result => {
     setState({
       checkoutSession: result.checkoutSession
@@ -292,6 +312,9 @@ function PaymentInner({
             donationSettings: paymentLink?.donation_settings,
             action,
             completed,
+            checkoutSession: state.checkoutSession,
+            onPromotionUpdate,
+            paymentMethods,
             showFeatures
           }), mode === "standalone" && !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
             className: "cko-footer",

package/lib/payment/product-item.js

@@ -183,6 +183,52 @@ function ProductItem({
             children: pricing.secondary
           })]
         })]
+      }), item.discount_amounts && item.discount_amounts.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+          mt: 1,
+          alignItems: "center"
+        },
+        children: item.discount_amounts.map(discountAmount => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+          icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.LocalOffer, {
+            sx: {
+              fontSize: "0.8rem !important"
+            }
+          }),
+          label: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "span",
+              sx: {
+                fontSize: "0.75rem",
+                fontWeight: "medium"
+              },
+              children: discountAmount.promotion_code?.code || "DISCOUNT"
+            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              component: "span",
+              sx: {
+                fontSize: "0.75rem"
+              },
+              children: ["(-", (0, _util.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__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
           display: "flex",

package/lib/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 {};

package/lib/payment/summary.js

@@ -24,6 +24,7 @@ var _livemode = _interopRequireDefault(require("../components/livemode"));
 var _payment = require("../contexts/payment");
 var _mobile = require("../hooks/mobile");
 var _loadingButton = _interopRequireDefault(require("../components/loading-button"));
+var _promotionCode = _interopRequireDefault(require("../components/promotion-code"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ExpandMore = (0, _styles.styled)(props => {
   const {
@@ -101,6 +102,9 @@ function PaymentSummary({
   action = "",
   trialEnd = 0,
   completed = false,
+  checkoutSession = void 0,
+  paymentMethods = [],
+  onPromotionUpdate = _noop.default,
   showFeatures = false,
   ...rest
 }) {
@@ -111,7 +115,10 @@ function PaymentSummary({
   const {
     isMobile
   } = (0, _mobile.useMobile)();
-  const settings = (0, _payment.usePaymentContext)();
+  const {
+    paymentState,
+    ...settings
+  } = (0, _payment.usePaymentContext)();
   const [state, setState] = (0, _ahooks.useSetState)({
     loading: false,
     shake: false,
@@ -121,12 +128,40 @@ function PaymentSummary({
     data,
     runAsync
   } = (0, _ahooks.useRequest)(() => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null));
-  const headlines = (0, _util2.formatCheckoutHeadlines)(items, currency, {
+  const sessionDiscounts = checkoutSession?.discounts || [];
+  const allowPromotionCodes = !!checkoutSession?.allow_promotion_codes;
+  const hasDiscounts = sessionDiscounts?.length > 0;
+  const discountCurrency = paymentMethods && checkoutSession ? (0, _util2.findCurrency)(paymentMethods, hasDiscounts ? checkoutSession?.currency_id || currency.id : currency.id) || settings.settings?.baseCurrency : currency;
+  const headlines = (0, _util2.formatCheckoutHeadlines)(items, discountCurrency, {
     trialEnd,
     trialInDays
   }, locale);
-  const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : "0";
-  const totalAmount = (0, _util.fromUnitToToken)(new _util.BN((0, _util.fromTokenToUnit)(headlines.actualAmount, currency?.decimal)).add(new _util.BN(staking)).toString(), currency?.decimal);
+  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.default.delete(`/api/checkout-sessions/${sessionId}/remove-promotion`);
+      onPromotionUpdate?.();
+    } catch (err) {
+      console.error("Failed to remove promotion code:", err);
+    }
+  };
+  const discountAmount = new _util.BN(checkoutSession?.total_details?.amount_discount || "0");
+  const subtotalAmount = (0, _util.fromUnitToToken)(new _util.BN((0, _util.fromTokenToUnit)(headlines.actualAmount, discountCurrency?.decimal)).add(new _util.BN(staking)).toString(), discountCurrency?.decimal);
+  const totalAmount = (0, _util.fromUnitToToken)(new _util.BN((0, _util.fromTokenToUnit)(subtotalAmount, discountCurrency?.decimal)).sub(discountAmount).toString(), discountCurrency?.decimal);
   (0, _useBus.default)("error.REQUIRE_CROSS_SELL", () => {
     setState({
       shake: true
@@ -194,13 +229,13 @@ function PaymentSummary({
         item: x,
         settings: donationSettings,
         onChange: onChangeAmount,
-        currency
-      }, `${x.price_id}-${currency.id}`) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
+        currency: discountCurrency
+      }, `${x.price_id}-${discountCurrency.id}`) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
         item: x,
         items,
         trialInDays,
         trialEnd,
-        currency,
+        currency: discountCurrency,
         onUpsell: handleUpsell,
         onDownsell: handleDownsell,
         adjustableQuantity: x.adjustable_quantity,
@@ -225,7 +260,7 @@ function PaymentSummary({
             children: t("payment.checkout.cross_sell.remove")
           })]
         })
-      }, `${x.price_id}-${currency.id}`))
+      }, `${x.price_id}-${discountCurrency.id}`))
     }), data && items.some(x => x.price_id === data.id) === false && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grow, {
       in: true,
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
@@ -241,7 +276,7 @@ function PaymentSummary({
           },
           items,
           trialInDays,
-          currency,
+          currency: discountCurrency,
           trialEnd,
           onUpsell: _noop.default,
           onDownsell: _noop.default,
@@ -400,9 +435,116 @@ function PaymentSummary({
               })
             })]
           }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-            children: [(0, _util2.formatAmount)(staking, currency.decimal), " ", currency.symbol]
+            children: [(0, _util2.formatAmount)(staking, discountCurrency.decimal), " ", discountCurrency.symbol]
           })]
         })]
+      }), (allowPromotionCodes || hasDiscounts) && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+          justifyContent: "space-between",
+          alignItems: "center",
+          ...(staking > 0 && {
+            borderTop: "1px solid",
+            borderColor: "divider",
+            pt: 1,
+            mt: 1
+          })
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          className: "base-label",
+          children: t("common.subtotal")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          children: [(0, _util2.formatNumber)(subtotalAmount), " ", discountCurrency.symbol]
+        })]
+      }), allowPromotionCodes && !hasDiscounts && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          mt: 1
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_promotionCode.default, {
+          checkoutSessionId: checkoutSession.id,
+          initialAppliedCodes: getAppliedPromotionCodes(),
+          disabled: completed,
+          onUpdate: handlePromotionUpdate,
+          currencyId: currency.id
+        })
+      }), hasDiscounts && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          py: 1.5
+        },
+        children: sessionDiscounts.map(discount => {
+          const promotionCodeInfo = discount.promotion_code_details;
+          const couponInfo = discount.coupon_details;
+          const discountDescription = couponInfo ? (0, _util2.formatCouponTerms)(couponInfo, discountCurrency, locale) : "";
+          const notSupported = discountDescription === t("payment.checkout.coupon.noDiscount");
+          return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              spacing: 1,
+              sx: {
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                  alignItems: "center",
+                  backgroundColor: "grey.100",
+                  width: "fit-content",
+                  px: 1,
+                  py: 0.5,
+                  borderRadius: 1
+                },
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                  sx: {
+                    fontWeight: "medium",
+                    fontSize: "small",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5
+                  },
+                  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.LocalOffer, {
+                    sx: {
+                      color: "warning.main",
+                      fontSize: "small"
+                    }
+                  }), promotionCodeInfo?.code || discount.verification_data?.code || t("payment.checkout.discount")]
+                }), !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Close, {
+                    sx: {
+                      fontSize: 14
+                    }
+                  })
+                })]
+              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                sx: {
+                  color: "text.secondary"
+                },
+                children: ["-", (0, _util2.formatAmount)(discount.discount_amount || "0", discountCurrency.decimal), " ", discountCurrency.symbol]
+              })]
+            }), discountDescription && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         sx: {
           display: "flex",
@@ -415,7 +557,7 @@ function PaymentSummary({
           className: "base-label",
           children: [t("common.total"), " "]
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
-          amount: `${totalAmount} ${currency.symbol}`,
+          amount: `${totalAmount} ${discountCurrency.symbol}`,
           sx: {
             fontSize: "16px"
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.20.11",
+  "version": "1.20.12",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,16 +54,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect-react": "^3.1.40",
-    "@arcblock/ux": "^3.1.40",
-    "@arcblock/ws": "^1.24.9",
-    "@blocklet/theme": "^3.1.40",
-    "@blocklet/ui-react": "^3.1.40",
+    "@arcblock/did-connect-react": "^3.1.41",
+    "@arcblock/ux": "^3.1.41",
+    "@arcblock/ws": "^1.25.1",
+    "@blocklet/theme": "^3.1.41",
+    "@blocklet/ui-react": "^3.1.41",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/util": "^1.24.9",
+    "@ocap/util": "^1.25.1",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^7.0.0",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.20.11",
+    "@blocklet/payment-types": "1.20.12",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "b69becabf1721f6238cf24004537bee1e4ade860"
+  "gitHead": "e6c432f89c2bf305efc903c0809f4a0557c07774"
 }

package/src/components/promotion-code.tsx

@@ -0,0 +1,184 @@
+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';
+import api from '../libs/api';
+import { usePaymentContext } from '../contexts/payment';
+
+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 = false,
+  className = '',
+  placeholder = '',
+  onUpdate = undefined,
+  currencyId,
+}: PromotionCodeProps) {
+  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<AppliedPromoCode[]>(initialAppliedCodes);
+  const { session, paymentState } = usePaymentContext();
+
+  const handleLoginCheck = () => {
+    if (!session.user) {
+      session?.login(() => {
+        handleApply();
+      });
+    } else {
+      handleApply();
+    }
+  };
+
+  const handleApply = async () => {
+    if (!code.trim()) return;
+
+    // Prevent applying promotion during payment process
+    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: AppliedPromoCode = {
+          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: any) {
+      const errorMessage = err.response?.data?.error || err.message;
+      setError(errorMessage);
+    } finally {
+      setApplying(false);
+    }
+  };
+
+  const handleKeyPress = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' && !applying && code.trim()) {
+      handleLoginCheck();
+    }
+  };
+
+  const isPaymentInProgress = paymentState.paying || paymentState.stripePaying;
+
+  return (
+    <Box className={className}>
+      {/* Input field or add button - only show if no codes applied */}
+      {appliedCodes.length === 0 &&
+        !disabled &&
+        !isPaymentInProgress &&
+        (showInput ? (
+          <Box
+            onBlur={() => {
+              if (!code.trim()) {
+                setShowInput(false);
+              }
+            }}>
+            <TextField
+              fullWidth
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              onKeyPress={handleKeyPress}
+              placeholder={placeholder || t('payment.checkout.promotion.placeholder')}
+              variant="outlined"
+              size="small"
+              disabled={applying}
+              autoFocus
+              slotProps={{
+                input: {
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <LoadingButton
+                        size="small"
+                        onClick={handleLoginCheck}
+                        loading={applying}
+                        disabled={!code.trim()}
+                        variant="text"
+                        sx={{
+                          color: 'primary.main',
+                          fontSize: 'small',
+                        }}>
+                        {t('payment.checkout.promotion.apply')}
+                      </LoadingButton>
+                    </InputAdornment>
+                  ),
+                },
+              }}
+              sx={{
+                '& .MuiOutlinedInput-root': {
+                  pr: 1,
+                },
+              }}
+            />
+
+            {error && (
+              <Alert
+                severity="error"
+                sx={{
+                  my: 1,
+                }}>
+                {error}
+              </Alert>
+            )}
+          </Box>
+        ) : (
+          <Button
+            onClick={() => setShowInput(true)}
+            startIcon={<Add fontSize="small" />}
+            variant="text"
+            sx={{
+              fontWeight: 'normal',
+              textTransform: 'none',
+              justifyContent: 'flex-start',
+              p: 0,
+              '&:hover': {
+                backgroundColor: 'transparent',
+                textDecoration: 'underline',
+              },
+            }}>
+            {t('payment.checkout.promotion.add_code')}
+          </Button>
+        ))}
+    </Box>
+  );
+}

package/src/contexts/payment.tsx

@@ -29,6 +29,11 @@ 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 = {
@@ -188,6 +193,14 @@ function PaymentProvider({
 
   const prefix = getPrefix();
   const [payable, setPayable] = useState(true);
+  const [paymentState, setPaymentState] = useState({
+    paying: false,
+    stripePaying: false,
+  });
+
+  const updatePaymentState = (state: Partial<{ paying: boolean; stripePaying: boolean }>) => {
+    setPaymentState((prev) => ({ ...prev, ...state }));
+  };
 
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
@@ -212,6 +225,8 @@ function PaymentProvider({
         api,
         payable,
         setPayable,
+        paymentState,
+        setPaymentState: updatePaymentState,
       }}>
       {children}
     </Provider>

package/src/index.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';
 
@@ -102,4 +103,5 @@ export {
   AutoTopupModal,
   AutoTopup,
   Collapse,
+  PromotionCode,
 };