@blocklet/payment-react 1.14.22 → 1.14.23

package/README.md

@@ -68,3 +68,80 @@ import zh from './zh';
 // eslint-disable-next-line import/prefer-default-export
 export const translations = merge({ zh, en }, extraTranslations);
 ```
+
+## Updates
+
+#### theme
+Since version 1.14.22, the component includes a built-in theme provider. If you need to modify the styles of internal components, you need to pass the `theme` property to override or inherit the external theme.
+
+| option |description |
+| --- | --- |
+| default [default value] | wrapped with built-in PaymentThemeProvider |
+| inherit | use the parent component's themeProvider |
+| PaymentThemeOptions | override some styles of PaymentThemeProvider |
+
+```ts
+export type PaymentThemeOptions = ThemeOptions & {
+  sx?: SxProps;
+};
+
+```
+ ```js
+// 1. use themeOptions
+ <CheckoutForm
+  id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
+  onChange={console.info}
+  theme={{
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          containedPrimary: {
+            backgroundColor: '#1DC1C7',
+            color: '#fff',
+            '&:hover': {
+              backgroundColor: 'rgb(20, 135, 139)',
+            },
+          },
+        },
+      },
+    },
+  }}
+/>
+
+// 2. use theme sx
+<CheckoutForm
+  id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
+  mode="inline-minimal"
+  onChange={console.info}
+  theme={{
+    sx: {
+      '.cko-submit-button': {
+        backgroundColor: '#1DC1C7',
+        color: '#fff',
+        '&:hover': {
+          backgroundColor: 'rgb(20, 135, 139)',
+        },
+      },
+    },
+  }}
+/>
+```
+
+#### showCheckoutSummary
+
+Since version 1.14.23, if you need to hide the product column, we recommend using `showCheckoutSummary=false` instead of `mode=inline-minimal`. We aim for better semantics.
+```js
+// bad
+<CheckoutForm
+  id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
+  mode="inline-minimal"
+  onChange={console.info}
+/>
+
+// good
+<CheckoutForm
+  id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
+  showCheckoutSummary={false}
+  onChange={console.info}
+/>
+```

package/es/checkout/donate.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { DonationSettings, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
 import { ButtonProps as MUIButtonProps } from '@mui/material';
-import { CheckoutProps } from '../types';
+import { CheckoutProps, PaymentThemeOptions } from '../types';
 export type DonateHistory = {
     supporters: TCheckoutSessionExpanded[];
     currency: TPaymentCurrency;
@@ -20,11 +20,12 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     inlineOptions?: {
         button?: ButtonType;
     };
-    customTheme?: boolean;
+    theme?: 'default' | 'inherit' | PaymentThemeOptions;
 };
 declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {
     var defaultProps: {
+        theme: string;
         livemode: boolean;
         timeout: number;
         mode: string;

package/es/checkout/donate.js

@@ -356,12 +356,16 @@ function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mod
   ] });
 }
 export default function CheckoutDonate(props) {
-  if (props.customTheme) {
+  if (props.theme === "inherit") {
     return /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props });
   }
+  if (props.theme && typeof props.theme === "object") {
+    return /* @__PURE__ */ jsx(PaymentThemeProvider, { theme: props.theme, children: /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props }) });
+  }
   return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props }) });
 }
 CheckoutDonate.defaultProps = {
+  theme: "default",
   livemode: true,
   timeout: 5e3,
   mode: "default",

package/es/checkout/form.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, customTheme, }: CheckoutProps): import("react").JSX.Element;
+declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, ...restProps }: CheckoutProps): import("react").JSX.Element;
 declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;

package/es/checkout/form.js

@@ -31,7 +31,8 @@ export default function CheckoutForm({
   goBack,
   extraParams,
   action,
-  customTheme = false
+  theme = "default",
+  ...restProps
 }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
     throw new Error("Either a checkoutSession or a paymentLink id is required.");
@@ -59,8 +60,8 @@ export default function CheckoutForm({
     setState({ appError: err });
     onError?.(err);
   };
-  if (!customTheme) {
-    return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(
+  if (theme === "inherit") {
+    return /* @__PURE__ */ jsx(
       Payment,
       {
         checkoutSession: data?.checkoutSession,
@@ -75,11 +76,33 @@ export default function CheckoutForm({
         onChange,
         goBack,
         mode,
-        action
+        action,
+        ...restProps
+      }
+    );
+  }
+  if (theme && typeof theme === "object") {
+    return /* @__PURE__ */ jsx(PaymentThemeProvider, { theme, children: /* @__PURE__ */ jsx(
+      Payment,
+      {
+        checkoutSession: data?.checkoutSession,
+        paymentMethods: data?.paymentMethods,
+        paymentIntent: data?.paymentIntent,
+        paymentLink: data?.paymentLink,
+        customer: data?.customer,
+        completed: state.completed,
+        error: apiError || state.appError,
+        onPaid: handlePaid,
+        onError: handleError,
+        onChange,
+        goBack,
+        mode,
+        action,
+        ...restProps
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(
     Payment,
     {
       checkoutSession: data?.checkoutSession,
@@ -94,9 +117,10 @@ export default function CheckoutForm({
       onChange,
       goBack,
       mode,
-      action
+      action,
+      ...restProps
     }
-  );
+  ) });
 }
 CheckoutForm.defaultProps = {
   onPaid: noop,

package/es/checkout/table.js

@@ -111,8 +111,11 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
   ) });
 }
 export default function CheckoutTable(props) {
-  if (props.customTheme) {
+  if (props.theme === "inherit") {
     return /* @__PURE__ */ jsx(CheckoutTableInner, { ...props });
   }
+  if (props.theme && typeof props.theme === "object") {
+    return /* @__PURE__ */ jsx(PaymentThemeProvider, { theme: props.theme, children: /* @__PURE__ */ jsx(CheckoutTableInner, { ...props }) });
+  }
   return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(CheckoutTableInner, { ...props }) });
 }

package/es/components/input.d.ts

@@ -4,21 +4,21 @@ declare const FormInput: import("react").ForwardRefExoticComponent<(Omit<import(
     name: string;
     label?: string | undefined;
     placeholder?: string | undefined;
-    errorPosition?: "right" | "bottom" | undefined;
+    errorPosition?: "bottom" | "right" | undefined;
     rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
     wrapperStyle?: any;
 }, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
     name: string;
     label?: string | undefined;
     placeholder?: string | undefined;
-    errorPosition?: "right" | "bottom" | undefined;
+    errorPosition?: "bottom" | "right" | undefined;
     rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
     wrapperStyle?: any;
 }, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
     name: string;
     label?: string | undefined;
     placeholder?: string | undefined;
-    errorPosition?: "right" | "bottom" | undefined;
+    errorPosition?: "bottom" | "right" | undefined;
     rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
     wrapperStyle?: any;
 }, "ref">) & import("react").RefAttributes<HTMLInputElement>>;

package/es/libs/util.d.ts

@@ -24,12 +24,12 @@ export declare function formatLineItemPricing(item: TLineItemExpanded, currency:
     secondary?: string;
     quantity: string;
 };
-export declare function getSubscriptionStatusColor(status: string): "success" | "primary" | "warning" | "error" | "default";
-export declare function getPaymentIntentStatusColor(status: string): "success" | "warning" | "default";
-export declare function getRefundStatusColor(status: string): "success" | "warning" | "default";
-export declare function getPayoutStatusColor(status: string): "success" | "warning" | "default";
-export declare function getInvoiceStatusColor(status: string): "success" | "warning" | "default" | "secondary";
-export declare function getWebhookStatusColor(status: string): "success" | "default";
+export declare function getSubscriptionStatusColor(status: string): "default" | "success" | "primary" | "warning" | "error";
+export declare function getPaymentIntentStatusColor(status: string): "default" | "success" | "warning";
+export declare function getRefundStatusColor(status: string): "default" | "success" | "warning";
+export declare function getPayoutStatusColor(status: string): "default" | "success" | "warning";
+export declare function getInvoiceStatusColor(status: string): "default" | "success" | "warning" | "secondary";
+export declare function getWebhookStatusColor(status: string): "default" | "success";
 export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, trialing?: boolean, upsell?: boolean): {
     subtotal: any;
     total: any;

package/es/payment/index.d.ts

@@ -4,12 +4,14 @@ import { CheckoutCallbacks, CheckoutContext } from '../types';
 type Props = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
     error?: any;
+    showCheckoutSummary?: boolean;
 };
-declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, mode, onPaid, onError, onChange, goBack, action, }: Props): import("react").JSX.Element;
+declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, }: Props): import("react").JSX.Element;
 declare namespace Payment {
     var defaultProps: {
         completed: boolean;
         error: null;
+        showCheckoutSummary: boolean;
     };
 }
 export default Payment;

package/es/payment/index.js

@@ -21,7 +21,8 @@ import PaymentSuccess from "./success.js";
 import PaymentSummary from "./summary.js";
 import { useMobile } from "../hooks/mobile.js";
 PaymentInner.defaultProps = {
-  completed: false
+  completed: false,
+  showCheckoutSummary: true
 };
 function PaymentInner({
   checkoutSession,
@@ -34,7 +35,8 @@ function PaymentInner({
   onPaid,
   onError,
   onChange,
-  action
+  action,
+  showCheckoutSummary = true
 }) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
@@ -42,6 +44,7 @@ function PaymentInner({
   const [state, setState] = useSetState({ checkoutSession });
   const defaultCurrencyId = state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
   const defaultMethodId = paymentMethods.find((m) => m.payment_currencies.some((c) => c.id === defaultCurrencyId))?.id;
+  const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
   const methods = useForm({
     defaultValues: {
       customer_name: customer?.name || session?.user?.fullName || "",
@@ -124,7 +127,7 @@ function PaymentInner({
     onPaid(result);
   };
   return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: [
-    /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-overview base-card", direction: "column", children: [
+    !hideSummaryCard && /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "base-card cko-overview", direction: "column", children: [
       /* @__PURE__ */ jsx(
         PaymentSummary,
         {
@@ -150,41 +153,53 @@ function PaymentInner({
       ),
       mode === "standalone" && !isMobile && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "var(--foregrounds-fg-muted, #98A3B1)" } })
     ] }) }),
-    /* @__PURE__ */ jsxs(Stack, { className: "cko-payment base-card", direction: "column", spacing: { xs: 2, sm: 3 }, children: [
-      completed && /* @__PURE__ */ jsx(
-        PaymentSuccess,
-        {
-          mode,
-          payee: getStatementDescriptor(state.checkoutSession.line_items),
-          action: state.checkoutSession.mode,
-          invoiceId: state.checkoutSession.invoice_id,
-          subscriptionId: state.checkoutSession.subscription_id,
-          message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(
-            `payment.checkout.completed.${state.checkoutSession.submit_type === "donate" ? "donate" : state.checkoutSession.mode}`
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        className: "base-card cko-payment",
+        direction: "column",
+        spacing: {
+          xs: 2,
+          sm: 3
+        },
+        children: [
+          completed && /* @__PURE__ */ jsx(
+            PaymentSuccess,
+            {
+              mode,
+              payee: getStatementDescriptor(state.checkoutSession.line_items),
+              action: state.checkoutSession.mode,
+              invoiceId: state.checkoutSession.invoice_id,
+              subscriptionId: state.checkoutSession.subscription_id,
+              message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(
+                `payment.checkout.completed.${state.checkoutSession.submit_type === "donate" ? "donate" : state.checkoutSession.mode}`
+              )
+            }
+          ),
+          !completed && /* @__PURE__ */ jsx(
+            PaymentForm,
+            {
+              checkoutSession: state.checkoutSession,
+              paymentMethods,
+              paymentIntent,
+              paymentLink,
+              customer,
+              onPaid: handlePaid,
+              onError,
+              mode,
+              action
+            }
           )
-        }
-      ),
-      !completed && /* @__PURE__ */ jsx(
-        PaymentForm,
-        {
-          checkoutSession: state.checkoutSession,
-          paymentMethods,
-          paymentIntent,
-          paymentLink,
-          customer,
-          onPaid: handlePaid,
-          onError,
-          mode,
-          action
-        }
-      )
-    ] }),
+        ]
+      }
+    ),
     mode === "standalone" && isMobile && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "var(--foregrounds-fg-muted, #98A3B1)" } })
   ] }) });
 }
 Payment.defaultProps = {
   completed: false,
-  error: null
+  error: null,
+  showCheckoutSummary: true
 };
 export default function Payment({
   checkoutSession,
@@ -199,11 +214,13 @@ export default function Payment({
   onError,
   onChange,
   goBack,
-  action
+  action,
+  showCheckoutSummary = true
 }) {
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
   const [delay, setDelay] = useState(false);
+  const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
   useEffect(() => {
     setTimeout(() => {
       setDelay(true);
@@ -222,8 +239,8 @@ export default function Payment({
   const renderContent = () => {
     if (!checkoutSession || !delay) {
       return /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: [
-        /* @__PURE__ */ jsx(Stack, { className: "cko-overview base-card", children: /* @__PURE__ */ jsx(Box, { className: "cko-product", children: /* @__PURE__ */ jsx(OverviewSkeleton, {}) }) }),
-        /* @__PURE__ */ jsx(Stack, { className: "cko-payment base-card", children: /* @__PURE__ */ jsx(PaymentSkeleton, {}) })
+        !hideSummaryCard && /* @__PURE__ */ jsx(Stack, { className: "base-card cko-overview", children: /* @__PURE__ */ jsx(Box, { className: "cko-product", children: /* @__PURE__ */ jsx(OverviewSkeleton, {}) }) }),
+        /* @__PURE__ */ jsx(Stack, { className: "base-card cko-payment", children: /* @__PURE__ */ jsx(PaymentSkeleton, {}) })
       ] });
     }
     if (checkoutSession.expires_at <= Math.round(Date.now() / 1e3)) {
@@ -260,7 +277,8 @@ export default function Payment({
         onChange,
         goBack,
         mode,
-        action
+        action,
+        showCheckoutSummary
       }
     );
   };
@@ -322,16 +340,24 @@ export const Root = styled(Box)`
     // padding: ${(props) => props.mode === "standalone" ? "0 16px" : "0"};
   }
 
+  .base-card {
+    border: none;
+    border-radius: 0;
+    padding: ${(props) => props.mode === "standalone" ? "100px 40px 20px" : "20px 0"};
+    box-shadow: none;
+    flex: 1;
+    max-width: 582px;
+  }
+
   .cko-overview {
     // width: ${(props) => props.mode.endsWith("-minimal") ? "100%" : "400px"};
     // min-height: ${(props) => props.mode === "standalone" ? "540px" : "auto"};
     position: relative;
-    display: ${(props) => props.mode.endsWith("-minimal") ? "none" : "block"};
+    flex-direction: column;
+    display: ${(props) => props.mode.endsWith("-minimal") ? "none" : "flex"};
     background: var(--backgrounds-bg-base);
     min-height: 'auto';
     // width: 502px;
-    display: flex;
-    flex-direction: column;
   }
   .cko-header {
     left: 0;
@@ -357,15 +383,6 @@ export const Root = styled(Box)`
     text-overflow: ellipsis;
   }
 
-  .base-card {
-    border: none;
-    border-radius: 0;
-    padding: ${(props) => props.mode === "standalone" ? "100px 40px 20px" : "20px 0"};
-    box-shadow: none;
-    flex: 1;
-    max-width: 582px;
-  }
-
   .cko-payment {
     width: 502px;
     // width: ${(props) => props.mode.endsWith("-minimal") ? "100%" : "400px"};
@@ -405,7 +422,7 @@ export const Root = styled(Box)`
       margin-bottom: 4px;
     }
     .MuiBox-root {
-      margin: -1px 0 0 -1px;
+      margin: 0;
     }
 
     .MuiFormHelperText-root {
@@ -464,9 +481,8 @@ export const Root = styled(Box)`
       flex-direction: column;
       align-items: center;
       gap: 32px;
-      min-width: 350px;
-      max-width: 400px;
       overflow: visible;
+      min-width: 200px;
     }
     .cko-overview {
       width: 100%;

package/es/payment/product-donation.js

@@ -57,7 +57,8 @@ export default function ProductDonation({
     if (event.target.checked) {
       setState({ custom: true, input: state.selected, error: "" });
     } else {
-      setState({ custom: false, input: "", error: "" });
+      setPayable(true);
+      handleSelect(preset);
     }
   };
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 1.5, children: [

package/es/theme/index.d.ts

@@ -1,9 +1,14 @@
-import { type ThemeOptions } from '@mui/material/styles';
 import React from 'react';
 import { typography } from './typography';
 import './index.css';
+import { PaymentThemeOptions } from '../types';
 export { typography };
-export declare const themeOverrides: Partial<ThemeOptions>;
-export declare function PaymentThemeProvider({ children }: {
+export declare function PaymentThemeProvider({ children, theme: customTheme, }: {
     children: React.ReactNode;
+    theme?: PaymentThemeOptions;
 }): JSX.Element;
+export declare namespace PaymentThemeProvider {
+    var defaultProps: {
+        theme: {};
+    };
+}