@blocklet/payment-react 1.14.21 → 1.14.22

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,26 @@ 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';
 
+// eslint-disable-next-line react/no-unused-prop-types
 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 };
-
 PaymentInner.defaultProps = {
   completed: false,
 };
 
-export function PaymentInner({
+function PaymentInner({
   checkoutSession,
   paymentMethods,
   paymentLink,
@@ -167,11 +51,11 @@ export function PaymentInner({
   onPaid,
   onError,
   onChange,
-  goBack,
   action,
 }: 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;
@@ -251,19 +135,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,10 +152,192 @@ export function PaymentInner({
     setState({ checkoutSession: result.checkoutSession });
     onPaid(result);
   };
-
   return (
     <FormProvider {...methods}>
-      <Root mode={mode}>
+      <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
+              )}
+              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 }}>
+          {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,
+};
+
+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]);
+
+  const renderContent = () => {
+    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 && (
+              <CheckoutFooter className="cko-footer" sx={{ color: 'var(--foregrounds-fg-muted, #98A3B1)' }} />
+            )} */}
+          </Stack>
+          <Stack className="cko-payment base-card">
+            <PaymentSkeleton />
+          </Stack>
+          {/* {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}
+      />
+    );
+  };
+  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' }}
@@ -292,110 +346,48 @@ export function PaymentInner({
           />
         )}
         <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>
-          <Fade in>
-            <Stack className="cko-overview" direction="column">
-              {mode === 'standalone' ? <PaymentHeader checkoutSession={state.checkoutSession} /> : null}
-              <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}
-              />
-            </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>
-          {mode === 'standalone' && <CheckoutFooter className="cko-footer" />}
+          {renderContent()}
         </Stack>
       </Root>
-    </FormProvider>
+    </Stack>
   );
 }
 
+type MainProps = CheckoutContext & CheckoutCallbacks & { completed?: 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')};
   }
 
   .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')};
+    background: var(--backgrounds-bg-base);
+    min-height: 'auto';
+    // width: 502px;
+    display: flex;
+    flex-direction: column;
   }
   .cko-header {
     left: 0;
@@ -408,7 +400,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%;
@@ -420,30 +413,60 @@ 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: ${(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;
     }
 
     .MuiFormHelperText-root {
       margin-left: 14px;
     }
-
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
   }
 
   .cko-payment-methods {
@@ -451,9 +474,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 +491,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;
     }
@@ -486,18 +522,34 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
       gap: 32px;
       min-width: 350px;
       max-width: 400px;
+      overflow: visible;
     }
     .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;
     }
   }
 `;