@blocklet/payment-react 1.14.21 → 1.14.23

package/src/payment/index.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Header from '@blocklet/ui-react/lib/Header';
 import type {
   TCheckoutSessionExpanded,
   TCustomer,
@@ -19,144 +21,27 @@ import type { LiteralUnion } from 'type-fest';
 
 import { usePaymentContext } from '../contexts/payment';
 import api from '../libs/api';
-import {
-  findCurrency,
-  formatAmountPrecisionLimit,
-  formatError,
-  getStatementDescriptor,
-  isValidCountry,
-} from '../libs/util';
+import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../libs/util';
 import { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
 import PaymentForm from './form';
-import PaymentHeader from './header';
+// import PaymentHeader from './header';
 import OverviewSkeleton from './skeleton/overview';
 import PaymentSkeleton from './skeleton/payment';
 import PaymentSuccess from './success';
 import PaymentSummary from './summary';
+import { useMobile } from '../hooks/mobile';
 
-type Props = CheckoutContext & CheckoutCallbacks & { completed?: boolean; error?: any };
-
-Payment.defaultProps = {
-  completed: false,
-  error: null,
-};
-
-export default function Payment({
-  checkoutSession,
-  paymentMethods,
-  paymentIntent,
-  paymentLink,
-  customer,
-  completed,
-  error,
-  mode,
-  onPaid,
-  onError,
-  onChange,
-  goBack,
-  action,
-}: Props) {
-  const { t } = useLocaleContext();
-  const { refresh, livemode, setLivemode } = usePaymentContext();
-  const [delay, setDelay] = useState(false);
-
-  useEffect(() => {
-    setTimeout(() => {
-      // 骨架屏 delay
-      setDelay(true);
-    }, 500);
-  }, []);
-
-  useEffect(() => {
-    if (checkoutSession) {
-      if (livemode !== checkoutSession.livemode) {
-        setLivemode(checkoutSession.livemode);
-        setTimeout(() => {
-          refresh();
-        }, 10);
-      }
-    }
-  }, [checkoutSession, livemode, setLivemode, refresh]);
-
-  if (error) {
-    return <PaymentError mode={mode} title="Oops" description={formatError(error)} />;
-  }
-
-  if (!checkoutSession || !delay) {
-    return (
-      <Root mode={mode}>
-        <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : 8 } }}>
-          <Stack className="cko-overview">
-            <OverviewSkeleton />
-          </Stack>
-          <Stack className="cko-payment">
-            <PaymentSkeleton />
-          </Stack>
-          {mode === 'standalone' && <CheckoutFooter className="cko-footer" />}
-        </Stack>
-      </Root>
-    );
-  }
-
-  // expired session
-  if (checkoutSession.expires_at <= Math.round(Date.now() / 1000)) {
-    return (
-      <PaymentError
-        mode={mode}
-        title={t('payment.checkout.expired.title')}
-        description={t('payment.checkout.expired.description')}
-      />
-    );
-  }
-
-  // completed session
-  if (checkoutSession.status === 'complete') {
-    return (
-      <PaymentError
-        mode={mode}
-        title={t('payment.checkout.complete.title')}
-        description={t('payment.checkout.complete.description')}
-      />
-    );
-  }
-
-  if (!checkoutSession.line_items.length) {
-    return (
-      <PaymentError
-        mode={mode}
-        title={t('payment.checkout.emptyItems.title')}
-        description={t('payment.checkout.emptyItems.description')}
-      />
-    );
-  }
-
-  return (
-    <PaymentInner
-      checkoutSession={checkoutSession}
-      paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
-      paymentLink={paymentLink}
-      paymentIntent={paymentIntent}
-      completed={completed}
-      customer={customer as TCustomer}
-      onPaid={onPaid}
-      onError={onError}
-      onChange={onChange}
-      goBack={goBack}
-      mode={mode}
-      action={action}
-    />
-  );
-}
-
-type MainProps = CheckoutContext & CheckoutCallbacks & { completed?: boolean };
+// eslint-disable-next-line react/no-unused-prop-types
+type Props = CheckoutContext & CheckoutCallbacks & { completed?: boolean; error?: any; showCheckoutSummary?: boolean };
 
 PaymentInner.defaultProps = {
   completed: false,
+  showCheckoutSummary: true,
 };
 
-export function PaymentInner({
+function PaymentInner({
   checkoutSession,
   paymentMethods,
   paymentLink,
@@ -167,15 +52,17 @@ export function PaymentInner({
   onPaid,
   onError,
   onChange,
-  goBack,
   action,
+  showCheckoutSummary = true,
 }: MainProps) {
-  const { t, locale } = useLocaleContext();
+  const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
+  const { isMobile } = useMobile();
   const [state, setState] = useSetState<{ checkoutSession: TCheckoutSessionExpanded }>({ checkoutSession });
 
   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: {
@@ -251,19 +138,7 @@ export function PaymentInner({
     }
   };
 
-  const min = parseFloat(paymentLink?.donation_settings?.amount.minimum || '0');
-  const max = paymentLink?.donation_settings?.amount.maximum
-    ? parseFloat(paymentLink?.donation_settings?.amount.maximum)
-    : Infinity;
-
   const onChangeAmount = async ({ priceId, amount }: { priceId: string; amount: string }) => {
-    if (Number(amount) < min || Number(amount) > max) {
-      return;
-    }
-
-    if (amount && formatAmountPrecisionLimit(String(amount), locale)) {
-      return;
-    }
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/amount`, {
         priceId,
@@ -280,21 +155,12 @@ export function PaymentInner({
     setState({ checkoutSession: result.checkoutSession });
     onPaid(result);
   };
-
   return (
     <FormProvider {...methods}>
-      <Root mode={mode}>
-        {goBack && (
-          <ArrowBackOutlined
-            sx={{ mr: 0.5, color: 'text.secondary', alignSelf: 'flex-start', margin: '16px 0', cursor: 'pointer' }}
-            onClick={goBack}
-            fontSize="medium"
-          />
-        )}
-        <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>
+      <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>
+        {!hideSummaryCard && (
           <Fade in>
-            <Stack className="cko-overview" direction="column">
-              {mode === 'standalone' ? <PaymentHeader checkoutSession={state.checkoutSession} /> : null}
+            <Stack className="base-card cko-overview" direction="column">
               <PaymentSummary
                 items={state.checkoutSession.line_items}
                 trialInDays={state.checkoutSession.subscription_data?.trial_period_days || 0}
@@ -315,87 +181,238 @@ export function PaymentInner({
                 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" direction="column" spacing={{ xs: 2, sm: 3 }}>
-            {completed && (
-              <PaymentSuccess
-                mode={mode}
-                payee={getStatementDescriptor(state.checkoutSession.line_items)}
-                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.${
-                      state.checkoutSession.submit_type === 'donate' ? 'donate' : state.checkoutSession.mode
-                    }`
-                  )
-                }
-              />
-            )}
-            {!completed && (
-              <PaymentForm
-                checkoutSession={state.checkoutSession}
-                paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
-                paymentIntent={paymentIntent}
-                paymentLink={paymentLink}
-                customer={customer}
-                onPaid={handlePaid}
-                onError={onError}
-                mode={mode}
-                action={action}
-              />
-            )}
+        )}
+        <Stack
+          className="base-card cko-payment"
+          direction="column"
+          spacing={{
+            xs: 2,
+            sm: 3,
+          }}>
+          {completed && (
+            <PaymentSuccess
+              mode={mode}
+              payee={getStatementDescriptor(state.checkoutSession.line_items)}
+              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.${
+                    state.checkoutSession.submit_type === 'donate' ? 'donate' : state.checkoutSession.mode
+                  }`
+                )
+              }
+            />
+          )}
+          {!completed && (
+            <PaymentForm
+              checkoutSession={state.checkoutSession}
+              paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
+              paymentIntent={paymentIntent}
+              paymentLink={paymentLink}
+              customer={customer}
+              onPaid={handlePaid}
+              onError={onError}
+              mode={mode}
+              action={action}
+            />
+          )}
+        </Stack>
+        {mode === 'standalone' && isMobile && (
+          <CheckoutFooter className="cko-footer" sx={{ color: 'var(--foregrounds-fg-muted, #98A3B1)' }} />
+        )}
+      </Stack>
+    </FormProvider>
+  );
+}
+
+Payment.defaultProps = {
+  completed: false,
+  error: null,
+  showCheckoutSummary: true,
+};
+
+export default function Payment({
+  checkoutSession,
+  paymentMethods,
+  paymentIntent,
+  paymentLink,
+  customer,
+  completed,
+  // error,
+  mode,
+  onPaid,
+  onError,
+  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(() => {
+      // 骨架屏 delay
+      setDelay(true);
+    }, 500);
+  }, []);
+
+  useEffect(() => {
+    if (checkoutSession) {
+      if (livemode !== checkoutSession.livemode) {
+        setLivemode(checkoutSession.livemode);
+        setTimeout(() => {
+          refresh();
+        }, 10);
+      }
+    }
+  }, [checkoutSession, livemode, setLivemode, refresh]);
+
+  const renderContent = () => {
+    if (!checkoutSession || !delay) {
+      return (
+        <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>
+          {!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="base-card cko-payment">
+            <PaymentSkeleton />
           </Stack>
-          {mode === 'standalone' && <CheckoutFooter className="cko-footer" />}
+          {/* {mode === 'standalone' && isMobile && (
+            <CheckoutFooter className="cko-footer" sx={{ color: 'var(--foregrounds-fg-muted, #98A3B1)' }} />
+          )} */}
+        </Stack>
+      );
+    }
+    if (checkoutSession.expires_at <= Math.round(Date.now() / 1000)) {
+      return (
+        <PaymentError
+          mode={mode}
+          title={t('payment.checkout.expired.title')}
+          description={t('payment.checkout.expired.description')}
+        />
+      );
+    }
+    if (!checkoutSession.line_items.length) {
+      return (
+        <PaymentError
+          mode={mode}
+          title={t('payment.checkout.emptyItems.title')}
+          description={t('payment.checkout.emptyItems.description')}
+        />
+      );
+    }
+    return (
+      <PaymentInner
+        checkoutSession={checkoutSession}
+        paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
+        paymentLink={paymentLink}
+        paymentIntent={paymentIntent}
+        completed={completed || checkoutSession.status === 'complete'}
+        customer={customer as TCustomer}
+        onPaid={onPaid}
+        onError={onError}
+        onChange={onChange}
+        goBack={goBack}
+        mode={mode}
+        action={action}
+        showCheckoutSummary={showCheckoutSummary}
+      />
+    );
+  };
+  return (
+    <Stack
+      display="flex"
+      flexDirection="column"
+      sx={{ height: mode === 'standalone' ? '100vh' : 'auto', overflow: 'hidden' }}>
+      {mode === 'standalone' ? (
+        <Header
+          meta={undefined}
+          addons={undefined}
+          sessionManagerProps={undefined}
+          homeLink={undefined}
+          theme={undefined}
+          hideNavMenu={undefined}
+          maxWidth={false}
+          sx={{ borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)' }}
+        />
+      ) : null}
+      <Root mode={mode} sx={{ flex: 1 }}>
+        {goBack && (
+          <ArrowBackOutlined
+            sx={{ mr: 0.5, color: 'text.secondary', alignSelf: 'flex-start', margin: '16px 0', cursor: 'pointer' }}
+            onClick={goBack}
+            fontSize="medium"
+          />
+        )}
+        <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>
+          {renderContent()}
         </Stack>
       </Root>
-    </FormProvider>
+    </Stack>
   );
 }
 
+type MainProps = CheckoutContext & CheckoutCallbacks & { completed?: boolean; showCheckoutSummary?: boolean };
+
 export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | 'popup', string> }>`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  // justify-content: center;
   align-items: center;
-  min-height: ${(props) => (props.mode === 'standalone' ? '100vh' : 'auto')};
+  overflow: hidden;
+  // min-height: ${(props) => (props.mode === 'standalone' ? '100vh' : 'auto')};
   position: relative;
-
-  ${(props) =>
-    props.mode === 'standalone'
-      ? `&:before {
-    animation-fill-mode: both;
-    background: #ffffff;
-    content: '';
-    height: 100%;
-    position: fixed;
-    right: 0;
-    top: 0;
-    transform-origin: right;
-    width: 50%;
-    box-shadow: 15px 0 30px 0 rgba(0, 0, 0, 0.18);
-  }`
-      : ''}
-
   .cko-container {
+    overflow: hidden;
     width: 100%;
-    max-width: ${(props) => (props.mode.endsWith('-minimal') ? '400px' : '1000px')};
+    // max-width: ${(props) => (props.mode.endsWith('-minimal') ? '400px' : '1000px')};
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: center;
+    // gap: 4px;
     position: relative;
-    padding: ${(props) => (props.mode === 'standalone' ? '0 16px' : '0')};
+    flex: 1;
+    padding: 1px;
+    // 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')};
+    // 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;
   }
   .cko-header {
     left: 0;
@@ -408,7 +425,8 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
       box-shadow 0.15s ease-out;
   }
   .cko-product {
-    margin-top: ${(props) => (props.mode === 'standalone' ? '64px' : '0')};
+    flex: 1;
+    overflow: hidden;
   }
   .cko-product-summary {
     width: 100%;
@@ -421,29 +439,50 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   .cko-payment {
-    width: ${(props) => (props.mode.endsWith('-minimal') ? '100%' : '400px')};
-    .MuiInputBase-root {
-      border-radius: 0;
+    width: 502px;
+    // width: ${(props) => (props.mode.endsWith('-minimal') ? '100%' : '400px')};
+    // box-shadow: -4px 0px 8px 0px rgba(2, 7, 19, 0.04);
+    padding-left: ${(props) => (props.mode === 'standalone' ? '40px' : '20px')};
+    position: relative;
+    &:before {
+      -webkit-animation-fill-mode: both;
+      content: '';
+      height: 100%;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      transform-origin: left center;
+      width: 8px;
+      box-shadow: -4px 0px 8px 0px rgba(2, 7, 19, 0.04);
     }
   }
+  .cko-payment-contact {
+    overflow: hidden;
+  }
+  .cko-footer {
+    display: ${(props) => (props.mode.endsWith('-minimal') ? 'none' : 'block')};
+    text-align: center;
+    margin-top: 20px;
+  }
 
   .cko-payment-form {
-    .MuiInputAdornment-positionStart {
-      width: 50px;
+    // .MuiInputAdornment-positionStart {
+    //   width: 50px;
+    // }
+
+    .MuiFormLabel-root {
+      color: var(--foregrounds-fg-base, #010714);
+      font-weight: 500;
+      margin-top: 12px;
+      margin-bottom: 4px;
     }
-
     .MuiBox-root {
-      border: 1px solid #ccc;
-      margin: -1px 0 0 -1px;
+      margin: 0;
     }
 
     .MuiFormHelperText-root {
       margin-left: 14px;
     }
-
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
   }
 
   .cko-payment-methods {
@@ -451,9 +490,9 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
 
   .cko-payment-submit {
     .MuiButtonBase-root {
-      border-radius: 0;
       font-size: 1.3rem;
       position: relative;
+      padding: 4px 22px;
     }
 
     .cko-submit-progress {
@@ -468,15 +507,28 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   .cko-header {
   }
 
-  .cko-footer {
-    position: absolute;
-    bottom: 0;
-    left: 12px;
-    margin: 12px 0;
-    display: ${(props) => (props.mode.endsWith('-minimal') ? 'none' : 'block')};
+  .product-item {
+    border-radius: var(--radius-l, 12px);
+    border: 1px solid var(--stroke-border-base, #eff1f5);
+    .product-item-content {
+      padding: 16px;
+      background: var(--backgrounds-bg-subtle, #f9fafb);
+      border-top-left-radius: var(--radius-l, 12px);
+      border-top-right-radius: var(--radius-l, 12px);
+    }
+    .product-item-upsell {
+      margin-top: 0;
+      padding: 16px;
+      background: var(--backgrounds-bg-component, #f1f3f5);
+      border-bottom-left-radius: var(--radius-l, 12px);
+      border-bottom-right-radius: var(--radius-l, 12px);
+    }
   }
 
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    background: ${(props) => (props.mode === 'standalone' ? 'var(--backgrounds-bg-subtle, #F9FAFB)' : 'transparent')};
+    padding-top: 0;
+    overflow: auto;
     &:before {
       display: none;
     }
@@ -484,20 +536,35 @@ 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%;
       min-height: auto;
+      flex: none;
     }
     .cko-payment {
       width: 100%;
+      height: fit-content;
+      flex: none;
+      &:before {
+        display: none;
+      }
     }
 
     .cko-footer {
-      position: static;
+      position: relative;
+      margin-bottom: 4px;
       margin-top: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(0);
+    }
+    .base-card {
+      box-shadow: none;
+      border-radius: 0;
+      padding: 20px;
     }
   }
 `;