@blocklet/payment-react 1.14.22 → 1.14.23

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, {

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