@blocklet/payment-react 1.14.22 → 1.14.24

package/lib/checkout/form.js

@@ -40,7 +40,8 @@ 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.");
@@ -72,8 +73,27 @@ function CheckoutForm({
     });
     onError?.(err);
   };
-  if (!customTheme) {
+  if (theme === "inherit") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
+      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
+    });
+  }
+  if (theme && typeof theme === "object") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
+      theme,
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
         checkoutSession: data?.checkoutSession,
         paymentMethods: data?.paymentMethods,
@@ -87,24 +107,28 @@ function CheckoutForm({
         onChange,
         goBack,
         mode,
-        action
+        action,
+        ...restProps
       })
     });
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
-    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
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
+      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
+    })
   });
 }
 CheckoutForm.defaultProps = {

package/lib/checkout/table.js

@@ -148,11 +148,19 @@ function CheckoutTableInner({
   });
 }
 function CheckoutTable(props) {
-  if (props.customTheme) {
+  if (props.theme === "inherit") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutTableInner, {
       ...props
     });
   }
+  if (props.theme && typeof props.theme === "object") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
+      theme: props.theme,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutTableInner, {
+        ...props
+      })
+    });
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
     children: /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutTableInner, {
       ...props

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

@@ -29,7 +29,8 @@ var _summary = _interopRequireDefault(require("./summary"));
 var _mobile = require("../hooks/mobile");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 PaymentInner.defaultProps = {
-  completed: false
+  completed: false,
+  showCheckoutSummary: true
 };
 function PaymentInner({
   checkoutSession,
@@ -42,7 +43,8 @@ function PaymentInner({
   onPaid,
   onError,
   onChange,
-  action
+  action,
+  showCheckoutSummary = true
 }) {
   const {
     t
@@ -59,6 +61,7 @@ function PaymentInner({
   });
   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 = (0, _reactHookForm.useForm)({
     defaultValues: {
       customer_name: customer?.name || session?.user?.fullName || "",
@@ -183,10 +186,10 @@ function PaymentInner({
           sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8
         }
       },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+      children: [!hideSummaryCard && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
         in: true,
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          className: "cko-overview base-card",
+          className: "base-card cko-overview",
           direction: "column",
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_summary.default, {
             items: state.checkoutSession.line_items,
@@ -213,7 +216,7 @@ function PaymentInner({
           })]
         })
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        className: "cko-payment base-card",
+        className: "base-card cko-payment",
         direction: "column",
         spacing: {
           xs: 2,
@@ -248,7 +251,8 @@ function PaymentInner({
 }
 Payment.defaultProps = {
   completed: false,
-  error: null
+  error: null,
+  showCheckoutSummary: true
 };
 function Payment({
   checkoutSession,
@@ -263,7 +267,8 @@ function Payment({
   onError,
   onChange,
   goBack,
-  action
+  action,
+  showCheckoutSummary = true
 }) {
   const {
     t
@@ -274,6 +279,7 @@ function Payment({
     setLivemode
   } = (0, _payment.usePaymentContext)();
   const [delay, setDelay] = (0, _react.useState)(false);
+  const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
   (0, _react.useEffect)(() => {
     setTimeout(() => {
       setDelay(true);
@@ -298,14 +304,14 @@ function Payment({
             sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8
           }
         },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-          className: "cko-overview base-card",
+        children: [!hideSummaryCard && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          className: "base-card cko-overview",
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             className: "cko-product",
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_overview.default, {})
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-          className: "cko-payment base-card",
+          className: "base-card cko-payment",
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment2.default, {})
         })]
       });
@@ -336,7 +342,8 @@ function Payment({
       onChange,
       goBack,
       mode,
-      action
+      action,
+      showCheckoutSummary
     });
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -407,16 +414,24 @@ const Root = exports.Root = (0, _system.styled)(_material.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;
@@ -442,15 +457,6 @@ const Root = exports.Root = (0, _system.styled)(_material.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"};
@@ -490,7 +496,7 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
       margin-bottom: 4px;
     }
     .MuiBox-root {
-      margin: -1px 0 0 -1px;
+      margin: 0;
     }
 
     .MuiFormHelperText-root {
@@ -551,9 +557,8 @@ const Root = exports.Root = (0, _system.styled)(_material.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/lib/payment/product-donation.js

@@ -109,11 +109,8 @@ function ProductDonation({
         error: ""
       });
     } else {
-      setState({
-        custom: false,
-        input: "",
-        error: ""
-      });
+      setPayable(true);
+      handleSelect(preset);
     }
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -154,7 +151,8 @@ function ProductDonation({
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             direction: "row",
             sx: {
-              py: 1
+              py: 1,
+              px: 0.5
             },
             spacing: 0.5,
             alignItems: "flex-end",
@@ -162,7 +160,7 @@ function ProductDonation({
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               component: "strong",
               lineHeight: 1,
-              variant: "h5",
+              variant: "h3",
               sx: {
                 fontVariantNumeric: "tabular-nums",
                 fontWeight: 400

package/lib/payment/summary.js

@@ -289,7 +289,7 @@ function PaymentSummary({
           },
           children: action || t("payment.checkout.orderSummary")
         }), !settings.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {})]
-      }), isMobile ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      }), isMobile && !donationSettings ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           justifyContent: "space-between",
           flexDirection: "row",

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