@blocklet/payment-react 1.13.262 → 1.13.264

package/es/checkout/donate.d.ts

@@ -10,11 +10,13 @@ export type DonateHistory = {
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     settings: DonationSettings;
     livemode?: boolean;
+    timeout?: number;
 };
-declare function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps): import("react").JSX.Element | null;
+declare function CheckoutDonate({ settings, livemode, timeout, onPaid, onError }: DonateProps): import("react").JSX.Element | null;
 declare namespace CheckoutDonate {
     var defaultProps: {
         livemode: boolean;
+        timeout: number;
     };
 }
 export default CheckoutDonate;

package/es/checkout/donate.js

@@ -122,7 +122,7 @@ function SupporterTable({ supporters = [], total = 0, currency, method }) {
     )) }) })
   ] });
 }
-export default function CheckoutDonate({ settings, livemode, onPaid, onError }) {
+export default function CheckoutDonate({ settings, livemode, timeout, onPaid, onError }) {
   const [state, setState] = useSetState({
     open: false,
     supporterLoaded: false,
@@ -145,7 +145,7 @@ export default function CheckoutDonate({ settings, livemode, onPaid, onError })
     supporters.runAsync().catch(console.error);
     setTimeout(() => {
       setState({ open: false });
-    }, 3e3);
+    }, timeout);
   };
   if (donation.error) {
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: formatError(donation.error) });
@@ -203,5 +203,6 @@ export default function CheckoutDonate({ settings, livemode, onPaid, onError })
   );
 }
 CheckoutDonate.defaultProps = {
-  livemode: true
+  livemode: true,
+  timeout: 5e3
 };

package/es/components/pricing-table.js

@@ -68,15 +68,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       .price-table-wrap:has(> div:nth-child(3)) {
         max-width: 1080px !important;
       }
-      .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
-        width: 90% !important;
-      }
-      .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
-        width: 45% !important;
-      }
-      .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
-        width: 30% !important;
-      }
     }
   `;
   return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsxs(
@@ -167,6 +158,8 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                         borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
                         boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
                       },
+                      width: "320px",
+                      maxWidth: "360px",
                       padding: "20px",
                       position: "relative"
                     },

package/es/payment/index.js

@@ -259,7 +259,7 @@ export function PaymentInner({
             invoiceId: state.checkoutSession.invoice_id,
             subscriptionId: state.checkoutSession.subscription_id,
             message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(
-              `payment.checkout.completed.${paymentLink?.donation_settings ? "donate" : state.checkoutSession.mode}`
+              `payment.checkout.completed.${state.checkoutSession.submit_type === "donate" ? "donate" : state.checkoutSession.mode}`
             )
           }
         ),

package/es/payment/success.js

@@ -28,7 +28,7 @@ export default function PaymentSuccess({ mode, message, action, payee, invoiceId
           /* @__PURE__ */ jsx("div", { className: "icon-fix" })
         ] }) }),
         /* @__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 }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", textAlign: "center", sx: { fontSize: "14px" }, children: t("payment.checkout.completed.tip", { payee }) }),
         next
       ]
     }

package/lib/checkout/donate.d.ts

@@ -10,11 +10,13 @@ export type DonateHistory = {
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     settings: DonationSettings;
     livemode?: boolean;
+    timeout?: number;
 };
-declare function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps): import("react").JSX.Element | null;
+declare function CheckoutDonate({ settings, livemode, timeout, onPaid, onError }: DonateProps): import("react").JSX.Element | null;
 declare namespace CheckoutDonate {
     var defaultProps: {
         livemode: boolean;
+        timeout: number;
     };
 }
 export default CheckoutDonate;

package/lib/checkout/donate.js

@@ -190,6 +190,7 @@ function SupporterTable({
 function CheckoutDonate({
   settings,
   livemode,
+  timeout,
   onPaid,
   onError
 }) {
@@ -217,7 +218,7 @@ function CheckoutDonate({
       setState({
         open: false
       });
-    }, 3e3);
+    }, timeout);
   };
   if (donation.error) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
@@ -286,5 +287,6 @@ function CheckoutDonate({
   });
 }
 CheckoutDonate.defaultProps = {
-  livemode: true
+  livemode: true,
+  timeout: 5e3
 };

package/lib/components/pricing-table.js

@@ -87,15 +87,6 @@ function PricingTable({
       .price-table-wrap:has(> div:nth-child(3)) {
         max-width: 1080px !important;
       }
-      .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
-        width: 90% !important;
-      }
-      .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
-        width: 45% !important;
-      }
-      .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
-        width: 30% !important;
-      }
     }
   `;
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
@@ -173,6 +164,8 @@ function PricingTable({
                 borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
                 boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
               },
+              width: "320px",
+              maxWidth: "360px",
               padding: "20px",
               position: "relative"
             },

package/lib/payment/index.js

@@ -338,7 +338,7 @@ function PaymentInner({
             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.${paymentLink?.donation_settings ? "donate" : state.checkoutSession.mode}`)
+            message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.submit_type === "donate" ? "donate" : state.checkoutSession.mode}`)
           }), !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
             checkoutSession: state.checkoutSession,
             paymentMethods,

package/lib/payment/success.js

@@ -83,6 +83,9 @@ function PaymentSuccess({
         variant: "body1",
         color: "text.secondary",
         textAlign: "center",
+        sx: {
+          fontSize: "14px"
+        },
         children: t("payment.checkout.completed.tip", {
           payee
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.262",
+  "version": "1.13.264",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -91,7 +91,7 @@
     "@babel/core": "^7.24.5",
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
-    "@blocklet/payment-types": "1.13.262",
+    "@blocklet/payment-types": "1.13.264",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -120,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "223f9f888bc1cf70b8ed7ae367a5c27c341df6f3"
+  "gitHead": "cd570450d39c6918d49bf67d29c4907705e69078"
 }

package/src/checkout/donate.tsx

@@ -42,6 +42,7 @@ export type DonateHistory = {
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
   settings: DonationSettings;
   livemode?: boolean;
+  timeout?: number;
 };
 
 const donationCache: { [key: string]: Promise<TPaymentLink> } = {};
@@ -173,7 +174,7 @@ function SupporterTable({ supporters = [], total = 0, currency, method }: Donate
   );
 }
 
-export default function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps) {
+export default function CheckoutDonate({ settings, livemode, timeout, onPaid, onError }: DonateProps) {
   const [state, setState] = useSetState({
     open: false,
     supporterLoaded: false,
@@ -202,7 +203,7 @@ export default function CheckoutDonate({ settings, livemode, onPaid, onError }:
 
     setTimeout(() => {
       setState({ open: false });
-    }, 3000);
+    }, timeout);
   };
 
   if (donation.error) {
@@ -263,4 +264,5 @@ export default function CheckoutDonate({ settings, livemode, onPaid, onError }:
 
 CheckoutDonate.defaultProps = {
   livemode: true,
+  timeout: 5000,
 };

package/src/components/pricing-table.tsx

@@ -89,15 +89,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       .price-table-wrap:has(> div:nth-child(3)) {
         max-width: 1080px !important;
       }
-      .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
-        width: 90% !important;
-      }
-      .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
-        width: 45% !important;
-      }
-      .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
-        width: 30% !important;
-      }
     }
   `;
   return (
@@ -187,6 +178,8 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                       borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
                       boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
                     },
+                    width: '320px',
+                    maxWidth: '360px',
 
                     padding: '20px',
                     position: 'relative',

package/src/payment/index.tsx

@@ -307,7 +307,7 @@ export function PaymentInner({
                   paymentLink?.after_completion?.hosted_confirmation?.custom_message ||
                   t(
                     `payment.checkout.completed.${
-                      paymentLink?.donation_settings ? 'donate' : state.checkoutSession.mode
+                      state.checkoutSession.submit_type === 'donate' ? 'donate' : state.checkoutSession.mode
                     }`
                   )
                 }

package/src/payment/success.tsx

@@ -54,7 +54,7 @@ export default function PaymentSuccess({ mode, message, action, payee, invoiceId
         <Typography variant="h5" color="text.primary" mb={3}>
           {message}
         </Typography>
-        <Typography variant="body1" color="text.secondary" textAlign="center">
+        <Typography variant="body1" color="text.secondary" textAlign="center" sx={{ fontSize: '14px' }}>
           {t('payment.checkout.completed.tip', { payee })}
         </Typography>
         {next}