@blocklet/payment-react 1.14.22 → 1.14.24

package/src/checkout/form.tsx

@@ -40,7 +40,8 @@ export default function CheckoutForm({
   goBack,
   extraParams,
   action,
-  customTheme = false,
+  theme = 'default',
+  ...restProps
 }: CheckoutProps) {
   if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
     throw new Error('Either a checkoutSession or a paymentLink id is required.');
@@ -75,9 +76,29 @@ export default function CheckoutForm({
     onError?.(err);
   };
 
-  if (!customTheme) {
+  if (theme === 'inherit') {
     return (
-      <PaymentThemeProvider>
+      <Payment
+        checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
+        paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
+        paymentIntent={data?.paymentIntent}
+        paymentLink={data?.paymentLink}
+        customer={data?.customer}
+        completed={state.completed}
+        error={apiError || state.appError}
+        onPaid={handlePaid}
+        onError={handleError}
+        onChange={onChange}
+        goBack={goBack}
+        mode={mode as string}
+        action={action}
+        {...restProps}
+      />
+    );
+  }
+  if (theme && typeof theme === 'object') {
+    return (
+      <PaymentThemeProvider theme={theme}>
         <Payment
           checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
           paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
@@ -92,26 +113,30 @@ export default function CheckoutForm({
           goBack={goBack}
           mode={mode as string}
           action={action}
+          {...restProps}
         />
       </PaymentThemeProvider>
     );
   }
   return (
-    <Payment
-      checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
-      paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
-      paymentIntent={data?.paymentIntent}
-      paymentLink={data?.paymentLink}
-      customer={data?.customer}
-      completed={state.completed}
-      error={apiError || state.appError}
-      onPaid={handlePaid}
-      onError={handleError}
-      onChange={onChange}
-      goBack={goBack}
-      mode={mode as string}
-      action={action}
-    />
+    <PaymentThemeProvider>
+      <Payment
+        checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
+        paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
+        paymentIntent={data?.paymentIntent}
+        paymentLink={data?.paymentLink}
+        customer={data?.customer}
+        completed={state.completed}
+        error={apiError || state.appError}
+        onPaid={handlePaid}
+        onError={handleError}
+        onChange={onChange}
+        goBack={goBack}
+        mode={mode as string}
+        action={action}
+        {...restProps}
+      />
+    </PaymentThemeProvider>
   );
 }
 

package/src/checkout/table.tsx

@@ -126,9 +126,16 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
 }
 
 export default function CheckoutTable(props: CheckoutProps) {
-  if (props.customTheme) {
+  if (props.theme === 'inherit') {
     return <CheckoutTableInner {...props} />;
   }
+  if (props.theme && typeof props.theme === 'object') {
+    return (
+      <PaymentThemeProvider theme={props.theme}>
+        <CheckoutTableInner {...props} />
+      </PaymentThemeProvider>
+    );
+  }
   return (
     <PaymentThemeProvider>
       <CheckoutTableInner {...props} />

package/src/payment/index.tsx

@@ -34,10 +34,11 @@ import PaymentSummary from './summary';
 import { useMobile } from '../hooks/mobile';
 
 // eslint-disable-next-line react/no-unused-prop-types
-type Props = CheckoutContext & CheckoutCallbacks & { completed?: boolean; error?: any };
+type Props = CheckoutContext & CheckoutCallbacks & { completed?: boolean; error?: any; showCheckoutSummary?: boolean };
 
 PaymentInner.defaultProps = {
   completed: false,
+  showCheckoutSummary: true,
 };
 
 function PaymentInner({
@@ -52,6 +53,7 @@ function PaymentInner({
   onError,
   onChange,
   action,
+  showCheckoutSummary = true,
 }: MainProps) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
@@ -60,6 +62,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 = useForm<CheckoutFormData>({
     defaultValues: {
@@ -155,34 +158,42 @@ function PaymentInner({
   return (
     <FormProvider {...methods}>
       <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>
-        <Fade in>
-          <Stack className="cko-overview base-card" direction="column">
-            <PaymentSummary
-              items={state.checkoutSession.line_items}
-              trialInDays={state.checkoutSession.subscription_data?.trial_period_days || 0}
-              billingThreshold={Math.max(
-                state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
-                // @ts-ignore
-                state.checkoutSession.subscription_data?.min_stake_amount || 0
+        {!hideSummaryCard && (
+          <Fade in>
+            <Stack className="base-card cko-overview" direction="column">
+              <PaymentSummary
+                items={state.checkoutSession.line_items}
+                trialInDays={state.checkoutSession.subscription_data?.trial_period_days || 0}
+                billingThreshold={Math.max(
+                  state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
+                  // @ts-ignore
+                  state.checkoutSession.subscription_data?.min_stake_amount || 0
+                )}
+                showStaking={method.type === 'arcblock'}
+                currency={currency}
+                onUpsell={onUpsell}
+                onDownsell={onDownsell}
+                onApplyCrossSell={onApplyCrossSell}
+                onCancelCrossSell={onCancelCrossSell}
+                onChangeAmount={onChangeAmount}
+                checkoutSessionId={state.checkoutSession.id}
+                crossSellBehavior={state.checkoutSession.cross_sell_behavior}
+                donationSettings={paymentLink?.donation_settings}
+                action={action}
+              />
+              {mode === 'standalone' && !isMobile && (
+                <CheckoutFooter className="cko-footer" sx={{ color: 'var(--foregrounds-fg-muted, #98A3B1)' }} />
               )}
-              showStaking={method.type === 'arcblock'}
-              currency={currency}
-              onUpsell={onUpsell}
-              onDownsell={onDownsell}
-              onApplyCrossSell={onApplyCrossSell}
-              onCancelCrossSell={onCancelCrossSell}
-              onChangeAmount={onChangeAmount}
-              checkoutSessionId={state.checkoutSession.id}
-              crossSellBehavior={state.checkoutSession.cross_sell_behavior}
-              donationSettings={paymentLink?.donation_settings}
-              action={action}
-            />
-            {mode === 'standalone' && !isMobile && (
-              <CheckoutFooter className="cko-footer" sx={{ color: 'var(--foregrounds-fg-muted, #98A3B1)' }} />
-            )}
-          </Stack>
-        </Fade>
-        <Stack className="cko-payment base-card" direction="column" spacing={{ xs: 2, sm: 3 }}>
+            </Stack>
+          </Fade>
+        )}
+        <Stack
+          className="base-card cko-payment"
+          direction="column"
+          spacing={{
+            xs: 2,
+            sm: 3,
+          }}>
           {completed && (
             <PaymentSuccess
               mode={mode}
@@ -225,6 +236,7 @@ function PaymentInner({
 Payment.defaultProps = {
   completed: false,
   error: null,
+  showCheckoutSummary: true,
 };
 
 export default function Payment({
@@ -241,10 +253,12 @@ export default function Payment({
   onChange,
   goBack,
   action,
+  showCheckoutSummary = true,
 }: Props) {
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
   const [delay, setDelay] = useState(false);
+  const hideSummaryCard = mode.endsWith('-minimal') || !showCheckoutSummary;
 
   useEffect(() => {
     setTimeout(() => {
@@ -268,15 +282,17 @@ export default function Payment({
     if (!checkoutSession || !delay) {
       return (
         <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>
-          <Stack className="cko-overview base-card">
-            <Box className="cko-product">
-              <OverviewSkeleton />
-            </Box>
-            {/* {mode === 'standalone' && !isMobile && (
+          {!hideSummaryCard && (
+            <Stack className="base-card cko-overview">
+              <Box className="cko-product">
+                <OverviewSkeleton />
+              </Box>
+              {/* {mode === 'standalone' && !isMobile && (
               <CheckoutFooter className="cko-footer" sx={{ color: 'var(--foregrounds-fg-muted, #98A3B1)' }} />
             )} */}
-          </Stack>
-          <Stack className="cko-payment base-card">
+            </Stack>
+          )}
+          <Stack className="base-card cko-payment">
             <PaymentSkeleton />
           </Stack>
           {/* {mode === 'standalone' && isMobile && (
@@ -317,6 +333,7 @@ export default function Payment({
         goBack={goBack}
         mode={mode}
         action={action}
+        showCheckoutSummary={showCheckoutSummary}
       />
     );
   };
@@ -353,7 +370,7 @@ export default function Payment({
   );
 }
 
-type MainProps = CheckoutContext & CheckoutCallbacks & { completed?: boolean };
+type MainProps = CheckoutContext & CheckoutCallbacks & { completed?: boolean; showCheckoutSummary?: boolean };
 
 export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | 'popup', string> }>`
   box-sizing: border-box;
@@ -378,16 +395,24 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
     // 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;
@@ -413,15 +438,6 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
     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')};
@@ -461,7 +477,7 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
       margin-bottom: 4px;
     }
     .MuiBox-root {
-      margin: -1px 0 0 -1px;
+      margin: 0;
     }
 
     .MuiFormHelperText-root {
@@ -520,9 +536,8 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
       flex-direction: column;
       align-items: center;
       gap: 32px;
-      min-width: 350px;
-      max-width: 400px;
       overflow: visible;
+      min-width: 200px;
     }
     .cko-overview {
       width: 100%;

package/src/payment/product-donation.tsx

@@ -71,7 +71,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);
     }
   };
 
@@ -98,11 +99,16 @@ export default function ProductDonation({
                   ...(state.selected === amount && !state.custom ? { borderColor: 'primary.main' } : {}),
                 }}>
                 <CardActionArea onClick={() => handleSelect(amount)}>
-                  <Stack direction="row" sx={{ py: 1 }} spacing={0.5} alignItems="flex-end" justifyContent="center">
+                  <Stack
+                    direction="row"
+                    sx={{ py: 1, px: 0.5 }}
+                    spacing={0.5}
+                    alignItems="flex-end"
+                    justifyContent="center">
                     <Typography
                       component="strong"
                       lineHeight={1}
-                      variant="h5"
+                      variant="h3"
                       sx={{ fontVariantNumeric: 'tabular-nums', fontWeight: 400 }}>
                       {amount}
                     </Typography>

package/src/payment/summary.tsx

@@ -303,7 +303,7 @@ export default function PaymentSummary({
           </Typography>
           {!settings.livemode && <Livemode />}
         </Box>
-        {isMobile ? (
+        {isMobile && !donationSettings ? (
           <>
             <Stack
               justifyContent="space-between"