@blocklet/payment-react 1.13.160 → 1.13.162

package/es/components/input.d.ts

@@ -7,17 +7,19 @@ type InputProps = TextFieldProps & {
     placeholder?: string;
     errorPosition?: 'right' | 'bottom';
     rules?: RegisterOptions;
+    wrapperStyle?: React.CSSProperties;
 };
 export declare function FormInputError({ error }: {
     error: string;
 }): import("react").JSX.Element;
-declare function FormInput({ name, label, placeholder, rules, errorPosition, ...rest }: InputProps): import("react").JSX.Element;
+declare function FormInput({ name, label, placeholder, rules, errorPosition, wrapperStyle, ...rest }: InputProps): import("react").JSX.Element;
 declare namespace FormInput {
     var defaultProps: {
         label: string;
         placeholder: string;
         errorPosition: string;
         rules: {};
+        wrapperStyle: {};
     };
 }
 export default FormInput;

package/es/components/input.js

@@ -6,12 +6,21 @@ FormInput.defaultProps = {
   label: "",
   placeholder: "",
   errorPosition: "bottom",
-  rules: {}
+  rules: {},
+  wrapperStyle: {}
 };
 export function FormInputError({ error }) {
   return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: error }) });
 }
-export default function FormInput({ name, label, placeholder, rules, errorPosition, ...rest }) {
+export default function FormInput({
+  name,
+  label,
+  placeholder,
+  rules,
+  errorPosition,
+  wrapperStyle,
+  ...rest
+}) {
   const { control, formState } = useFormContext();
   const error = get(formState.errors, name)?.message;
   return /* @__PURE__ */ jsx(
@@ -20,7 +29,7 @@ export default function FormInput({ name, label, placeholder, rules, errorPositi
       name,
       control,
       rules,
-      render: ({ field }) => /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", height: "40px" }, children: [
+      render: ({ field }) => /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...wrapperStyle }, children: [
         !!label && /* @__PURE__ */ jsx(FormLabel, { children: label }),
         /* @__PURE__ */ jsx(
           TextField,

package/es/history/invoice/list.js

@@ -97,5 +97,5 @@ CustomerInvoiceList.defaultProps = {
   subscription_id: "",
   status: "open,paid,uncollectible",
   pageSize: 10,
-  target: "self"
+  target: "_self"
 };

package/es/history/payment/list.js

@@ -65,7 +65,7 @@ export default function CustomerPaymentList({ customer_id }) {
           children: [
             /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(item.created_at) }) }),
             /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxs(Typography, { textAlign: "right", children: [
-              fromUnitToToken(item.amount, item.paymentCurrency.decimal),
+              fromUnitToToken(item.amount_received, item.paymentCurrency.decimal),
               "\xA0",
               item.paymentCurrency.symbol
             ] }) }),

package/es/index.d.ts

@@ -13,10 +13,14 @@ import CustomerInvoiceList from './history/invoice/list';
 import MiniInvoiceList from './history/mini-invoice/list';
 import CustomerPaymentList from './history/payment/list';
 import Amount from './payment/amount';
+import AddressForm from './payment/form/address';
+import CurrencySelector from './payment/form/currency';
 import PhoneInput from './payment/form/phone';
+import StripeForm from './payment/form/stripe';
 import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
+import PaymentSummary from './payment/summary';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };

package/es/index.js

@@ -13,9 +13,13 @@ import CustomerInvoiceList from "./history/invoice/list.js";
 import MiniInvoiceList from "./history/mini-invoice/list.js";
 import CustomerPaymentList from "./history/payment/list.js";
 import Amount from "./payment/amount.js";
+import AddressForm from "./payment/form/address.js";
+import CurrencySelector from "./payment/form/currency.js";
 import PhoneInput from "./payment/form/phone.js";
+import StripeForm from "./payment/form/stripe.js";
 import Payment from "./payment/index.js";
 import ProductSkeleton from "./payment/product-skeleton.js";
+import PaymentSummary from "./payment/summary.js";
 export * from "./util.js";
 export * from "./contexts/payment.js";
 export { translations, createTranslator } from "./locales/index.js";
@@ -24,13 +28,17 @@ export {
   dayjs,
   FormInput,
   PhoneInput,
+  AddressForm,
+  StripeForm,
   Status,
   Livemode,
   Switch,
   ConfirmDialog,
   CheckoutForm,
   CheckoutTable,
+  CurrencySelector,
   Payment,
+  PaymentSummary,
   PricingTable,
   ProductSkeleton,
   Amount,

package/es/locales/en.js

@@ -40,6 +40,7 @@ export default flat({
     did: "DID",
     txHash: "Transaction",
     customer: "Customer",
+    currency: "Currency",
     custom: "Custom",
     description: "Description",
     statementDescriptor: "Statement descriptor",
@@ -183,7 +184,7 @@ export default flat({
         title: "Renew your subscription",
         description: "Your subscription will no longer be canceled, it will renew on {date}"
       },
-      upgrade: {
+      changePlan: {
         button: "Update",
         current: "Current",
         pay: "Payment Required",
@@ -196,7 +197,16 @@ export default flat({
         total: "Total (metered items excluded)",
         appliedCredit: "Credit applied",
         newCredit: "Credit issued",
-        remaining: "Amount due today"
+        remaining: "Amount due today",
+        tableNotFound: "Plan updates are not available"
+      },
+      changePayment: {
+        limit: "Your changes to payment method will not affect existing open or past-due invoices, all future payments will use the new payment method unless you change it again.",
+        review: "Review subscription items",
+        select: "Select payment method",
+        submit: "Confirm change",
+        confirm: "By confirming this change, you allow {payee} to charge {symbol} from your account for future payments in accordance with their terms. You can always change your payment method.",
+        completed: "Your payment method has been successfully updated, all future payments will use the new payment method unless you change it again."
       },
       invoice: {
         summary: "Summary",
@@ -226,7 +236,8 @@ export default flat({
         nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
         current: "Current subscription",
-        empty: "There are no subscriptions here"
+        empty: "There are no subscriptions here",
+        changePayment: "Change payment method"
       }
     }
   }

package/es/locales/zh.js

@@ -40,6 +40,7 @@ export default flat({
     did: "DID",
     txHash: "\u4EA4\u6613\u54C8\u5E0C",
     customer: "\u5BA2\u6237",
+    currency: "\u5E01\u79CD",
     custom: "\u81EA\u5B9A\u4E49",
     description: "\u63CF\u8FF0",
     statementDescriptor: "\u58F0\u660E\u63CF\u8FF0",
@@ -183,7 +184,7 @@ export default flat({
         title: "\u7EED\u8BA2\u60A8\u7684\u8BA2\u9605",
         description: "\u60A8\u7684\u8BA2\u9605\u5C06\u4E0D\u518D\u88AB\u53D6\u6D88\uFF0C\u5C06\u5728{date}\u7EED\u8BA2"
       },
-      upgrade: {
+      changePlan: {
         button: "\u66F4\u65B0",
         current: "\u5F53\u524D\u8BA2\u9605",
         pay: "\u9700\u8981\u652F\u4ED8",
@@ -196,7 +197,16 @@ export default flat({
         total: "\u5957\u9910\u5B9A\u4EF7\uFF08\u4E0D\u542B\u6309\u91CF\u90E8\u5206\uFF09",
         appliedCredit: "\u4FE1\u7528\u6263\u9664",
         newCredit: "\u4FE1\u7528\u589E\u52A0",
-        remaining: "\u8FD8\u9700\u652F\u4ED8"
+        remaining: "\u8FD8\u9700\u652F\u4ED8",
+        tableNotFound: "\u5957\u9910\u53D8\u66F4\u4E0D\u53EF\u7528"
+      },
+      changePayment: {
+        limit: "\u4F60\u5BF9\u652F\u4ED8\u65B9\u5F0F\u7684\u53D8\u66F4\u4E0D\u4F1A\u5F71\u54CD\u5DF2\u7ECF\u751F\u6210\u6216\u8005\u6B20\u8D39\u7684\u8D26\u5355\uFF0C\u53EA\u4F1A\u5F71\u54CD\u672A\u6765\u7684\u8D26\u5355\u3002\u4F60\u53EF\u4EE5\u5728\u4E0B\u4E00\u5F20\u8D26\u5355\u751F\u6210\u4E4B\u524D\u53D8\u66F4\u652F\u4ED8\u65B9\u5F0F\u3002",
+        review: "\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5",
+        select: "\u9009\u62E9\u652F\u4ED8\u65B9\u5F0F",
+        submit: "\u786E\u8BA4\u53D8\u66F4",
+        confirm: "\u786E\u8BA4\u53D8\u66F4\u65B9\u5F0F\u610F\u5473\u7740\u4F60\u5141\u8BB8{payee}\u4F7F\u7528\u65B0\u7684\u652F\u4ED8\u65B9\u5F0F\u652F\u4ED8\u4F60\u7684\u672A\u6765\u8D26\u5355\u3002\u4F60\u53EF\u4EE5\u968F\u65F6\u518D\u6B21\u53D8\u66F4\u652F\u4ED8\u65B9\u5F0F\u3002",
+        completed: "\u4F60\u7684\u652F\u4ED8\u65B9\u5F0F \u5DF2\u7ECF\u66F4\u65B0\u6210\u529F\u3002\u4F60\u53EF\u4EE5\u5728\u4F60\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u652F\u4ED8\u65B9\u5F0F\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
       },
       invoice: {
         summary: "\u6458\u8981",
@@ -226,7 +236,8 @@ export default flat({
         nextInvoice: "\u4E0B\u4E00\u5F20\u53D1\u7968",
         title: "\u8BA2\u9605\u7BA1\u7406",
         current: "\u5F53\u524D\u8BA2\u9605",
-        empty: "\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605",
+        changePayment: "\u5207\u6362\u652F\u4ED8\u65B9\u5F0F"
       }
     }
   }

package/es/payment/form/address.js

@@ -109,7 +109,8 @@ export default function AddressForm({ mode, stripe }) {
             rules: { required: t("payment.checkout.required") },
             errorPosition: "right",
             variant: "outlined",
-            placeholder: t("payment.checkout.billing.postal_code")
+            placeholder: t("payment.checkout.billing.postal_code"),
+            wrapperStyle: { height: "40px" }
           }
         )
       ] }) })

package/es/payment/form/currency.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+type Props = {
+    value: number;
+    currencies: TPaymentCurrency[];
+    onChange: Function;
+};
+export default function CurrencySelector({ value, currencies, onChange }: Props): import("react").JSX.Element;
+export {};

package/es/payment/form/currency.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar, Card, Stack, Typography } from "@mui/material";
+import { styled } from "@mui/system";
+export default function CurrencySelector({ value, currencies, onChange }) {
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      style: {
+        display: currencies.length > 1 ? "grid" : "block",
+        gridTemplateColumns: "50% 50%",
+        width: "100%"
+      },
+      children: currencies.map((x, i) => {
+        const selected = i === value;
+        return /* @__PURE__ */ jsx(
+          Card,
+          {
+            variant: "outlined",
+            onClick: () => onChange(i),
+            className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
+            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", children: [
+              /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 30, height: 30, marginRight: "10px" } }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "div", sx: { fontSize: "18px" }, children: x.symbol }),
+                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, color: "text.secondary", gutterBottom: true, children: x.method.name })
+              ] })
+            ] })
+          },
+          x.id
+        );
+      })
+    }
+  );
+}
+const Root = styled("section")`
+  .cko-payment-card {
+    position: relative;
+    border: 2px solid ${(props) => props.theme.palette.primary.main};
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border: 12px solid ${(props) => props.theme.palette.primary.main};
+    border-top-color: transparent;
+    border-left-color: transparent;
+  }
+
+  .cko-payment-card-unselect {
+    border: 2px solid #ddd;
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card:nth-child(odd) {
+    margin-right: 8px;
+  }
+
+  .cko-payment-card-unselect:nth-child(odd) {
+    margin-right: 8px;
+  }
+
+  .cko-payment-card::after {
+    content: '';
+    width: 6px;
+    height: 10px;
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    border: 2px solid #fff;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    transform: rotate(35deg);
+  }
+`;

package/es/payment/form/index.js

@@ -4,7 +4,7 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { useTheme } from "@arcblock/ux/lib/Theme";
 import Toast from "@arcblock/ux/lib/Toast";
 import { LoadingButton } from "@mui/lab";
-import { Avatar, Card, Fade, InputAdornment, Stack, Typography } from "@mui/material";
+import { Fade, InputAdornment, Stack, Typography } from "@mui/material";
 import { useCreation, useSetState, useSize } from "ahooks";
 import { PhoneNumberUtil } from "google-libphonenumber";
 import pWaitFor from "p-wait-for";
@@ -17,9 +17,10 @@ import api from "../../api.js";
 import ConfirmDialog from "../../components/confirm.js";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
-import { formatError, getPrefix, getStatementDescriptor } from "../../util.js";
+import { flattenPaymentMethods, formatError, getPrefix, getStatementDescriptor } from "../../util.js";
 import UserButtons from "./addon.js";
 import AddressForm from "./address.js";
+import CurrencySelector from "./currency.js";
 import PhoneInput from "./phone.js";
 import StripeCheckout from "./stripe.js";
 const phoneUtil = PhoneNumberUtil.getInstance();
@@ -38,19 +39,6 @@ const waitForCheckoutComplete = async (sessionId) => {
   );
   return result;
 };
-const flatPaymentMethods = (methods = []) => {
-  const out = [];
-  methods.forEach((method) => {
-    const currencies = method.paymentCurrencies || method.payment_currencies || [];
-    currencies.forEach((currency) => {
-      out.push({
-        ...currency,
-        method
-      });
-    });
-  });
-  return out;
-};
 PaymentForm.defaultProps = {};
 export default function PaymentForm({
   checkoutSession,
@@ -75,7 +63,7 @@ export default function PaymentForm({
     customerLimited: false,
     stripePaying: false
   });
-  const currencies = flatPaymentMethods(paymentMethods);
+  const currencies = flattenPaymentMethods(paymentMethods);
   const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(0);
   useEffect(() => {
     if (session?.user) {
@@ -108,9 +96,6 @@ export default function PaymentForm({
   const payee = getStatementDescriptor(checkoutSession.line_items);
   const buttonText = session?.user ? t(`payment.checkout.${checkoutSession.mode}`) : t("payment.checkout.connect", { action: t(`payment.checkout.${checkoutSession.mode}`) });
   const method = paymentMethods.find((x) => x.id === paymentMethod);
-  const handleCurrencyChange = (index) => {
-    setPaymentCurrencyIndex(index);
-  };
   const handleConnected = async () => {
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
@@ -184,6 +169,7 @@ export default function PaymentForm({
               setState({ submitting: false, paying: false });
             },
             onError: (err) => {
+              console.error(err);
               setState({ submitting: false, paying: false });
               onError(err);
             }
@@ -198,6 +184,7 @@ export default function PaymentForm({
         }
       }
     } catch (err) {
+      console.error(err);
       let shouldToast = true;
       if (err.response?.data?.code) {
         dispatch(`error.${err.response?.data?.code}`);
@@ -298,32 +285,11 @@ export default function PaymentForm({
           name: "payment_currency",
           control,
           render: () => /* @__PURE__ */ jsx(
-            "section",
+            CurrencySelector,
             {
-              style: {
-                display: currencies.length > 1 ? "grid" : "block",
-                gridTemplateColumns: "50% 50%",
-                width: "100%"
-              },
-              children: currencies.map((x, i) => {
-                const selected = i === paymentCurrencyIndex;
-                return /* @__PURE__ */ jsx(
-                  Card,
-                  {
-                    variant: "outlined",
-                    onClick: () => handleCurrencyChange(i),
-                    className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
-                    children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", children: [
-                      /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 30, height: 30, marginRight: "10px" } }),
-                      /* @__PURE__ */ jsxs("div", { children: [
-                        /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "div", sx: { fontSize: "18px" }, children: x.symbol }),
-                        /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, color: "text.secondary", gutterBottom: true, children: x.method.name })
-                      ] })
-                    ] })
-                  },
-                  x.id
-                );
-              })
+              value: paymentCurrencyIndex,
+              currencies,
+              onChange: setPaymentCurrencyIndex
             }
           )
         }

package/es/payment/index.js

@@ -176,6 +176,10 @@ export function PaymentInner({
       Toast.error(formatError(err));
     }
   };
+  const handlePaid = (result) => {
+    setState({ checkoutSession: result.checkoutSession });
+    onPaid(result);
+  };
   return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsxs(Root, { mode, children: [
     goBack && /* @__PURE__ */ jsx(
       ArrowBackOutlined,
@@ -191,12 +195,15 @@ export function PaymentInner({
         /* @__PURE__ */ jsx(
           PaymentSummary,
           {
-            checkoutSession: state.checkoutSession,
+            items: state.checkoutSession.line_items,
+            trialInDays: state.checkoutSession.subscription_data?.trial_period_days || 0,
             currency,
             onUpsell,
             onDownsell,
             onApplyCrossSell,
-            onCancelCrossSell
+            onCancelCrossSell,
+            checkoutSessionId: state.checkoutSession.id,
+            crossSellBehavior: state.checkoutSession.cross_sell_behavior
           }
         )
       ] }) }),
@@ -206,6 +213,7 @@ export function PaymentInner({
           {
             payee: getStatementDescriptor(state.checkoutSession.line_items),
             action: state.checkoutSession.mode,
+            subscriptionId: state.checkoutSession.subscription_id,
             message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.mode}`)
           }
         ),
@@ -216,7 +224,7 @@ export function PaymentInner({
             paymentMethods,
             paymentIntent,
             customer,
-            onPaid,
+            onPaid: handlePaid,
             onError,
             mode
           }
@@ -307,52 +315,6 @@ export const Root = styled(Box)`
   .cko-payment-methods {
   }
 
-  .cko-payment-card {
-    position: relative;
-    border: 2px solid #3773f2;
-    padding: 5px 10px;
-    margin: 5px 0;
-    cursor: pointer;
-  }
-
-  .cko-payment-card::before {
-    content: '';
-    position: absolute;
-    right: 0;
-    top: 0;
-    border: 12px solid #3773f2;
-    border-bottom-color: transparent;
-    border-left-color: transparent;
-  }
-
-  .cko-payment-card-unselect {
-    border: 2px solid #ddd;
-    padding: 5px 10px;
-    margin: 5px 0;
-    cursor: pointer;
-  }
-
-  .cko-payment-card:nth-child(odd) {
-    margin-right: 8px;
-  }
-
-  .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: 8px;
-  }
-
-  .cko-payment-card::after {
-    content: '';
-    width: 6px;
-    height: 10px;
-    position: absolute;
-    right: 3px;
-    top: 0px;
-    border: 2px solid #fff;
-    border-top-color: transparent;
-    border-left-color: transparent;
-    transform: rotate(35deg);
-  }
-
   .cko-payment-submit {
     .MuiButtonBase-root {
       border-radius: 0;

package/es/payment/product-item.d.ts

@@ -1,15 +1,16 @@
 /// <reference types="react" />
-import type { TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 type Props = {
     item: TLineItemExpanded;
-    session: TCheckoutSessionExpanded;
+    items: TLineItemExpanded[];
+    trialInDays: number;
     currency: TPaymentCurrency;
     onUpsell: Function;
     onDownsell: Function;
     mode?: 'normal' | 'cross-sell';
     children?: React.ReactNode;
 };
-declare function ProductItem({ item, session, currency, mode, children, onUpsell, onDownsell }: Props): import("react").JSX.Element;
+declare function ProductItem({ item, items, trialInDays, currency, mode, children, onUpsell, onDownsell, }: Props): import("react").JSX.Element;
 declare namespace ProductItem {
     var defaultProps: {
         mode: string;

package/es/payment/product-item.js

@@ -9,12 +9,21 @@ ProductItem.defaultProps = {
   mode: "normal",
   children: null
 };
-export default function ProductItem({ item, session, currency, mode, children, onUpsell, onDownsell }) {
+export default function ProductItem({
+  item,
+  items,
+  trialInDays,
+  currency,
+  mode,
+  children,
+  onUpsell,
+  onDownsell
+}) {
   const { t, locale } = useLocaleContext();
-  const pricing = formatLineItemPricing(item, currency, session.subscription_data?.trial_period_days || 0, locale);
-  const saving = formatUpsellSaving(session, currency);
+  const pricing = formatLineItemPricing(item, currency, trialInDays, locale);
+  const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
-  const canUpsell = mode === "normal" && session.line_items.length === 1;
+  const canUpsell = mode === "normal" && items.length === 1;
   return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", spacing: 1, sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", sx: { width: "100%" }, children: [
       /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: "100%" }, children: [

package/es/payment/success.d.ts

@@ -3,6 +3,12 @@ type Props = {
     message: string;
     action: string;
     payee: string;
+    subscriptionId?: string;
 };
-export default function PaymentSuccess({ message, action, payee }: Props): import("react").JSX.Element;
-export {};
+declare function PaymentSuccess({ message, action, payee, subscriptionId }: Props): import("react").JSX.Element;
+declare namespace PaymentSuccess {
+    var defaultProps: {
+        subscriptionId: string;
+    };
+}
+export default PaymentSuccess;

package/es/payment/success.js

@@ -4,7 +4,7 @@ import { Grow, Link, Stack, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 import { joinURL } from "ufo";
 import { usePaymentContext } from "../contexts/payment.js";
-export default function PaymentSuccess({ message, action, payee }) {
+export default function PaymentSuccess({ message, action, payee, subscriptionId }) {
   const { t } = useLocaleContext();
   const { prefix } = usePaymentContext();
   return /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", justifyContent: "center", sx: { height: 360 }, children: [
@@ -16,9 +16,12 @@ export default function PaymentSuccess({ message, action, payee }) {
     ] }) }),
     /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", mb: 3, children: message }),
     /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", textAlign: "center", children: t("payment.checkout.completed.tip", { payee }) }),
-    ["subscription", "setup"].includes(action) && /* @__PURE__ */ jsx(Typography, { textAlign: "center", sx: { mt: 2 }, children: /* @__PURE__ */ jsx(Link, { href: joinURL(prefix, "/customer"), children: t("payment.checkout.portal", { payee }) }) })
+    ["subscription", "setup"].includes(action) && /* @__PURE__ */ jsx(Typography, { textAlign: "center", sx: { mt: 2 }, children: /* @__PURE__ */ jsx(Link, { href: joinURL(prefix, `/customer/subscription/${subscriptionId}`), children: t("payment.checkout.portal", { payee }) }) })
   ] }) });
 }
+PaymentSuccess.defaultProps = {
+  subscriptionId: ""
+};
 const Div = styled("div")`
   width: 80px;
   height: 115px;

package/es/payment/summary.d.ts

@@ -1,12 +1,25 @@
 /// <reference types="react" />
-import type { TCheckoutSessionExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 type Props = {
-    checkoutSession: TCheckoutSessionExpanded;
+    items: TLineItemExpanded[];
     currency: TPaymentCurrency;
-    onUpsell: Function;
-    onDownsell: Function;
-    onApplyCrossSell: Function;
-    onCancelCrossSell: Function;
+    trialInDays: number;
+    onUpsell?: Function;
+    onDownsell?: Function;
+    onApplyCrossSell?: Function;
+    onCancelCrossSell?: Function;
+    checkoutSessionId?: string;
+    crossSellBehavior?: string;
 };
-export default function PaymentSummary({ checkoutSession, currency, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, }: Props): import("react").JSX.Element;
-export {};
+declare function PaymentSummary({ items, currency, trialInDays, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, checkoutSessionId, crossSellBehavior, ...rest }: Props): import("react").JSX.Element;
+declare namespace PaymentSummary {
+    var defaultProps: {
+        onUpsell: any;
+        onDownsell: any;
+        onApplyCrossSell: any;
+        onCancelCrossSell: any;
+        checkoutSessionId: string;
+        crossSellBehavior: string;
+    };
+}
+export default PaymentSummary;