@blocklet/payment-react 1.14.22 → 1.14.23

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);
     }
   };