@blocklet/payment-react 1.13.159 → 1.13.161

package/src/payment/form/currency.tsx

@@ -0,0 +1,91 @@
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+import { Avatar, Card, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+
+type Props = {
+  value: number;
+  currencies: TPaymentCurrency[];
+  onChange: Function;
+};
+
+export default function CurrencySelector({ value, currencies, onChange }: Props) {
+  return (
+    <Root
+      style={{
+        display: currencies.length > 1 ? 'grid' : 'block',
+        gridTemplateColumns: '50% 50%',
+        width: '100%',
+      }}>
+      {currencies.map((x, i) => {
+        const selected = i === value;
+        return (
+          <Card
+            key={x.id}
+            variant="outlined"
+            onClick={() => onChange(i)}
+            className={selected ? 'cko-payment-card' : 'cko-payment-card-unselect'}>
+            <Stack direction="row" alignItems="center">
+              <Avatar src={x.logo} alt={x.name} sx={{ width: 30, height: 30, marginRight: '10px' }} />
+              <div>
+                <Typography variant="h5" component="div" sx={{ fontSize: '18px' }}>
+                  {x.symbol}
+                </Typography>
+                <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+                  {(x as any).method.name}
+                </Typography>
+              </div>
+            </Stack>
+          </Card>
+        );
+      })}
+    </Root>
+  );
+}
+
+const Root = styled('section')`
+  .cko-payment-card {
+    position: relative;
+    border: 2px solid ${(props) => props.theme.palette.primary.main};
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border: 12px solid ${(props) => props.theme.palette.primary.main};
+    border-top-color: transparent;
+    border-left-color: transparent;
+  }
+
+  .cko-payment-card-unselect {
+    border: 2px solid #ddd;
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card:nth-child(odd) {
+    margin-right: 8px;
+  }
+
+  .cko-payment-card-unselect:nth-child(odd) {
+    margin-right: 8px;
+  }
+
+  .cko-payment-card::after {
+    content: '';
+    width: 6px;
+    height: 10px;
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    border: 2px solid #fff;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    transform: rotate(35deg);
+  }
+`;

package/src/payment/form/index.tsx

@@ -3,9 +3,9 @@ import 'react-international-phone/style.css';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { PaymentCurrency, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import type { TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { LoadingButton } from '@mui/lab';
-import { Avatar, Card, Fade, InputAdornment, Stack, Typography } from '@mui/material';
+import { Fade, InputAdornment, Stack, Typography } from '@mui/material';
 import { useCreation, useSetState, useSize } from 'ahooks';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
@@ -20,9 +20,10 @@ import ConfirmDialog from '../../components/confirm';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
-import { formatError, getPrefix, getStatementDescriptor } from '../../util';
+import { flattenPaymentMethods, formatError, getPrefix, getStatementDescriptor } from '../../util';
 import UserButtons from './addon';
 import AddressForm from './address';
+import CurrencySelector from './currency';
 import PhoneInput from './phone';
 import StripeCheckout from './stripe';
 
@@ -58,22 +59,6 @@ const waitForCheckoutComplete = async (sessionId: string) => {
 
 type PageData = CheckoutContext & CheckoutCallbacks;
 
-const flatPaymentMethods = (methods: TPaymentMethodExpanded[] = []) => {
-  const out: PaymentCurrency[] = [];
-
-  methods.forEach((method: any) => {
-    const currencies = method.paymentCurrencies || method.payment_currencies || [];
-    currencies.forEach((currency: any) => {
-      out.push({
-        ...currency,
-        method,
-      });
-    });
-  });
-
-  return out;
-};
-
 PaymentForm.defaultProps = {};
 
 // FIXME: https://stripe.com/docs/elements/address-element
@@ -118,7 +103,7 @@ export default function PaymentForm({
     stripePaying: false,
   });
 
-  const currencies = flatPaymentMethods(paymentMethods);
+  const currencies = flattenPaymentMethods(paymentMethods);
   const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(0);
 
   useEffect(() => {
@@ -161,10 +146,6 @@ export default function PaymentForm({
 
   const method = paymentMethods.find((x) => x.id === paymentMethod) as TPaymentMethodExpanded;
 
-  const handleCurrencyChange = (index: number) => {
-    setPaymentCurrencyIndex(index);
-  };
-
   const handleConnected = async () => {
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
@@ -243,6 +224,7 @@ export default function PaymentForm({
               setState({ submitting: false, paying: false });
             },
             onError: (err: any) => {
+              console.error(err);
               setState({ submitting: false, paying: false });
               onError(err);
             },
@@ -257,6 +239,7 @@ export default function PaymentForm({
         }
       }
     } catch (err: any) {
+      console.error(err);
       let shouldToast = true;
       if (err.response?.data?.code) {
         dispatch(`error.${err.response?.data?.code}`);
@@ -360,35 +343,11 @@ export default function PaymentForm({
               name="payment_currency"
               control={control}
               render={() => (
-                <section
-                  style={{
-                    display: currencies.length > 1 ? 'grid' : 'block',
-                    gridTemplateColumns: '50% 50%',
-                    width: '100%',
-                  }}>
-                  {currencies.map((x, i) => {
-                    const selected = i === paymentCurrencyIndex;
-                    return (
-                      <Card
-                        key={x.id}
-                        variant="outlined"
-                        onClick={() => handleCurrencyChange(i)}
-                        className={selected ? 'cko-payment-card' : 'cko-payment-card-unselect'}>
-                        <Stack direction="row" alignItems="center">
-                          <Avatar src={x.logo} alt={x.name} sx={{ width: 30, height: 30, marginRight: '10px' }} />
-                          <div>
-                            <Typography variant="h5" component="div" sx={{ fontSize: '18px' }}>
-                              {x.symbol}
-                            </Typography>
-                            <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
-                              {(x as any).method.name}
-                            </Typography>
-                          </div>
-                        </Stack>
-                      </Card>
-                    );
-                  })}
-                </section>
+                <CurrencySelector
+                  value={paymentCurrencyIndex}
+                  currencies={currencies}
+                  onChange={setPaymentCurrencyIndex}
+                />
               )}
             />
           </Stack>

package/src/payment/index.tsx

@@ -1,7 +1,12 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TCustomer, TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import type {
+  TCheckoutSessionExpanded,
+  TCustomer,
+  TPaymentCurrency,
+  TPaymentMethodExpanded,
+} from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Box, Fade, Stack } from '@mui/material';
 import { styled } from '@mui/system';
@@ -141,7 +146,7 @@ export function PaymentInner({
 }: MainProps) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
-  const [state, setState] = useSetState({ checkoutSession });
+  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;
@@ -213,6 +218,11 @@ export function PaymentInner({
     }
   };
 
+  const handlePaid = (result: any) => {
+    setState({ checkoutSession: result.checkoutSession });
+    onPaid(result);
+  };
+
   return (
     <FormProvider {...methods}>
       <Root mode={mode}>
@@ -228,12 +238,15 @@ export function PaymentInner({
             <Stack className="cko-overview" direction="column">
               {mode === 'standalone' ? <PaymentHeader checkoutSession={state.checkoutSession} /> : null}
               <PaymentSummary
-                checkoutSession={state.checkoutSession}
+                items={state.checkoutSession.line_items}
+                trialInDays={state.checkoutSession.subscription_data?.trial_period_days || 0}
                 currency={currency}
                 onUpsell={onUpsell}
                 onDownsell={onDownsell}
                 onApplyCrossSell={onApplyCrossSell}
                 onCancelCrossSell={onCancelCrossSell}
+                checkoutSessionId={state.checkoutSession.id}
+                crossSellBehavior={state.checkoutSession.cross_sell_behavior}
               />
             </Stack>
           </Fade>
@@ -242,6 +255,7 @@ export function PaymentInner({
               <PaymentSuccess
                 payee={getStatementDescriptor(state.checkoutSession.line_items)}
                 action={state.checkoutSession.mode}
+                subscriptionId={state.checkoutSession.subscription_id}
                 message={
                   paymentLink?.after_completion?.hosted_confirmation?.custom_message ||
                   t(`payment.checkout.completed.${state.checkoutSession.mode}`)
@@ -254,7 +268,7 @@ export function PaymentInner({
                 paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
                 paymentIntent={paymentIntent}
                 customer={customer}
-                onPaid={onPaid}
+                onPaid={handlePaid}
                 onError={onError}
                 mode={mode}
               />
@@ -351,52 +365,6 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   .cko-payment-methods {
   }
 
-  .cko-payment-card {
-    position: relative;
-    border: 2px solid #3773f2;
-    padding: 5px 10px;
-    margin: 5px 0;
-    cursor: pointer;
-  }
-
-  .cko-payment-card::before {
-    content: '';
-    position: absolute;
-    right: 0;
-    top: 0;
-    border: 12px solid #3773f2;
-    border-bottom-color: transparent;
-    border-left-color: transparent;
-  }
-
-  .cko-payment-card-unselect {
-    border: 2px solid #ddd;
-    padding: 5px 10px;
-    margin: 5px 0;
-    cursor: pointer;
-  }
-
-  .cko-payment-card:nth-child(odd) {
-    margin-right: 8px;
-  }
-
-  .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: 8px;
-  }
-
-  .cko-payment-card::after {
-    content: '';
-    width: 6px;
-    height: 10px;
-    position: absolute;
-    right: 3px;
-    top: 0px;
-    border: 2px solid #fff;
-    border-top-color: transparent;
-    border-left-color: transparent;
-    transform: rotate(35deg);
-  }
-
   .cko-payment-submit {
     .MuiButtonBase-root {
       border-radius: 0;

package/src/payment/product-item.tsx

@@ -1,10 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type {
-  PriceRecurring,
-  TCheckoutSessionExpanded,
-  TLineItemExpanded,
-  TPaymentCurrency,
-} from '@blocklet/payment-types';
+import type { PriceRecurring, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 import { Stack, Typography } from '@mui/material';
 
 import Status from '../components/status';
@@ -14,7 +9,8 @@ import ProductCard from './product-card';
 
 type Props = {
   item: TLineItemExpanded;
-  session: TCheckoutSessionExpanded;
+  items: TLineItemExpanded[];
+  trialInDays: number;
   currency: TPaymentCurrency;
   onUpsell: Function;
   onDownsell: Function;
@@ -27,12 +23,21 @@ ProductItem.defaultProps = {
   children: null,
 };
 
-export default function ProductItem({ item, session, currency, mode, children, onUpsell, onDownsell }: Props) {
+export default function ProductItem({
+  item,
+  items,
+  trialInDays,
+  currency,
+  mode,
+  children,
+  onUpsell,
+  onDownsell,
+}: Props) {
   const { t, locale } = useLocaleContext();
-  const pricing = formatLineItemPricing(item, currency, session.subscription_data?.trial_period_days || 0, locale);
-  const saving = formatUpsellSaving(session, currency);
+  const pricing = formatLineItemPricing(item, currency, trialInDays, locale);
+  const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === 'metered' ? t('common.metered') : '';
-  const canUpsell = mode === 'normal' && session.line_items.length === 1;
+  const canUpsell = mode === 'normal' && items.length === 1;
   return (
     <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }}>
       <Stack direction="column" alignItems="flex-end" sx={{ width: '100%' }}>

package/src/payment/success.tsx

@@ -9,9 +9,10 @@ type Props = {
   message: string;
   action: string;
   payee: string;
+  subscriptionId?: string;
 };
 
-export default function PaymentSuccess({ message, action, payee }: Props) {
+export default function PaymentSuccess({ message, action, payee, subscriptionId }: Props) {
   const { t } = useLocaleContext();
   const { prefix } = usePaymentContext();
   return (
@@ -33,7 +34,9 @@ export default function PaymentSuccess({ message, action, payee }: Props) {
         </Typography>
         {['subscription', 'setup'].includes(action) && (
           <Typography textAlign="center" sx={{ mt: 2 }}>
-            <Link href={joinURL(prefix, '/customer')}>{t('payment.checkout.portal', { payee })}</Link>
+            <Link href={joinURL(prefix, `/customer/subscription/${subscriptionId}`)}>
+              {t('payment.checkout.portal', { payee })}
+            </Link>
           </Typography>
         )}
       </Stack>
@@ -41,6 +44,10 @@ export default function PaymentSuccess({ message, action, payee }: Props) {
   );
 }
 
+PaymentSuccess.defaultProps = {
+  subscriptionId: '',
+};
+
 const Div = styled('div')`
   width: 80px;
   height: 115px;

package/src/payment/summary.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 import { LoadingButton } from '@mui/lab';
 import { Fade, Grow, Stack, Typography, keyframes } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
@@ -31,12 +31,15 @@ const shake = keyframes`
 `;
 
 type Props = {
-  checkoutSession: TCheckoutSessionExpanded;
+  items: TLineItemExpanded[];
   currency: TPaymentCurrency;
-  onUpsell: Function;
-  onDownsell: Function;
-  onApplyCrossSell: Function;
-  onCancelCrossSell: Function;
+  trialInDays: number;
+  onUpsell?: Function;
+  onDownsell?: Function;
+  onApplyCrossSell?: Function;
+  onCancelCrossSell?: Function;
+  checkoutSessionId?: string;
+  crossSellBehavior?: string;
 };
 
 async function fetchCrossSell(id: string) {
@@ -52,18 +55,33 @@ async function fetchCrossSell(id: string) {
   }
 }
 
+PaymentSummary.defaultProps = {
+  onUpsell: noop,
+  onDownsell: noop,
+  onApplyCrossSell: noop,
+  onCancelCrossSell: noop,
+  checkoutSessionId: '',
+  crossSellBehavior: '',
+};
+
 export default function PaymentSummary({
-  checkoutSession,
+  items,
   currency,
+  trialInDays,
   onUpsell,
   onDownsell,
   onApplyCrossSell,
   onCancelCrossSell,
+  checkoutSessionId,
+  crossSellBehavior,
+  ...rest
 }: Props) {
   const { t, locale } = useLocaleContext();
   const [state, setState] = useSetState({ loading: false, shake: false });
-  const { data, runAsync } = useRequest(() => fetchCrossSell(checkoutSession.id));
-  const headlines = formatCheckoutHeadlines(checkoutSession, currency, locale);
+  const { data, runAsync } = useRequest(() =>
+    checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
+  );
+  const headlines = formatCheckoutHeadlines(items, currency, trialInDays, locale);
 
   useBus(
     'error.REQUIRE_CROSS_SELL',
@@ -77,12 +95,12 @@ export default function PaymentSummary({
   );
 
   const handleUpsell = async (from: string, to: string) => {
-    await onUpsell(from, to);
+    await onUpsell!(from, to);
     runAsync();
   };
 
   const handleDownsell = async (from: string) => {
-    await onDownsell(from);
+    await onDownsell!(from);
     runAsync();
   };
 
@@ -90,7 +108,7 @@ export default function PaymentSummary({
     if (data) {
       try {
         setState({ loading: true });
-        await onApplyCrossSell(data.id);
+        await onApplyCrossSell!(data.id);
       } catch (err) {
         console.error(err);
       } finally {
@@ -102,7 +120,7 @@ export default function PaymentSummary({
   const handleCancelCrossSell = async () => {
     try {
       setState({ loading: true });
-      await onCancelCrossSell();
+      await onCancelCrossSell!();
     } catch (err) {
       console.error(err);
     } finally {
@@ -112,7 +130,7 @@ export default function PaymentSummary({
 
   return (
     <Fade in>
-      <Stack className="cko-product" direction="column">
+      <Stack className="cko-product" direction="column" {...rest}>
         <Stack className="cko-product-summary" direction="column" alignItems="flex-start" sx={{ mb: 4 }}>
           <Typography sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
             {headlines.action}
@@ -123,11 +141,12 @@ export default function PaymentSummary({
           )}
         </Stack>
         <Stack spacing={2}>
-          {checkoutSession.line_items.map((x: TLineItemExpanded) => (
+          {items.map((x: TLineItemExpanded) => (
             <ProductItem
               key={x.price_id}
               item={x}
-              session={checkoutSession}
+              items={items}
+              trialInDays={trialInDays}
               currency={currency}
               onUpsell={handleUpsell}
               onDownsell={handleDownsell}>
@@ -145,7 +164,7 @@ export default function PaymentSummary({
             </ProductItem>
           ))}
         </Stack>
-        {data && checkoutSession.line_items.some((x) => x.price_id === data.id) === false && (
+        {data && items.some((x) => x.price_id === data.id) === false && (
           <Grow in>
             <Stack
               direction="column"
@@ -163,22 +182,23 @@ export default function PaymentSummary({
               }}>
               <ProductItem
                 item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
-                session={checkoutSession}
+                items={items}
+                trialInDays={trialInDays}
                 currency={currency}
                 onUpsell={noop}
                 onDownsell={noop}
               />
               <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>
                 <Typography>
-                  {checkoutSession.cross_sell_behavior === 'required' && (
+                  {crossSellBehavior === 'required' && (
                     <Status label={t('payment.checkout.required')} color="info" variant="outlined" sx={{ mr: 1 }} />
                   )}
                 </Typography>
                 <LoadingButton
                   size="small"
                   loadingPosition="end"
-                  color={checkoutSession.cross_sell_behavior === 'required' ? 'info' : 'info'}
-                  variant={checkoutSession.cross_sell_behavior === 'required' ? 'text' : 'text'}
+                  color={crossSellBehavior === 'required' ? 'info' : 'info'}
+                  variant={crossSellBehavior === 'required' ? 'text' : 'text'}
                   loading={state.loading}
                   onClick={handleApplyCrossSell}>
                   {t('payment.checkout.cross_sell.add')}

package/src/util.ts

@@ -3,7 +3,6 @@
 import type {
   PriceCurrency,
   PriceRecurring,
-  TCheckoutSessionExpanded,
   TLineItemExpanded,
   TPaymentCurrency,
   TPaymentMethodExpanded,
@@ -382,8 +381,7 @@ export function getRecurringPeriod(recurring: PriceRecurring) {
   }
 }
 
-export function formatUpsellSaving(session: TCheckoutSessionExpanded, currency: TPaymentCurrency) {
-  const items = session.line_items as TLineItemExpanded[];
+export function formatUpsellSaving(items: TLineItemExpanded[], currency: TPaymentCurrency) {
   if (items[0]?.upsell_price_id) {
     return '0';
   }
@@ -418,8 +416,9 @@ export function formatUpsellSaving(session: TCheckoutSessionExpanded, currency:
 }
 
 export function formatCheckoutHeadlines(
-  session: TCheckoutSessionExpanded,
+  items: TLineItemExpanded[],
   currency: TPaymentCurrency,
+  trialInDays: number,
   locale: string = 'en'
 ): {
   action: string;
@@ -427,9 +426,7 @@ export function formatCheckoutHeadlines(
   then?: string;
   secondary?: string;
 } {
-  const items = session.line_items as TLineItemExpanded[];
-  const trial = session.subscription_data?.trial_period_days || 0;
-
+  const trial = trialInDays || 0;
   const brand = getStatementDescriptor(items);
   const { total } = getCheckoutAmount(items, currency, !!trial);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
@@ -596,9 +593,6 @@ export const getSubscriptionTimeSummary = (subscription: TSubscriptionExpanded)
 
 export const getSubscriptionAction = (subscription: TSubscriptionExpanded) => {
   if (subscription.status === 'active' || subscription.status === 'trialing') {
-    if (subscription.cancel_at) {
-      return null;
-    }
     if (subscription.cancel_at_period_end) {
       if (subscription.cancelation_details?.reason === 'payment_failed') {
         return null;
@@ -607,6 +601,10 @@ export const getSubscriptionAction = (subscription: TSubscriptionExpanded) => {
       return { action: 'recover', variant: 'contained', color: 'primary', canRenew: false };
     }
 
+    if (subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end) {
+      return null;
+    }
+
     return { action: 'cancel', variant: 'outlined', color: 'inherit', canRenew: false };
   }
 
@@ -630,3 +628,19 @@ export const mergeExtraParams = (extra: Record<string, any> = {}) => {
 
   return params.toString();
 };
+
+export const flattenPaymentMethods = (methods: TPaymentMethodExpanded[] = []) => {
+  const out: TPaymentCurrency[] = [];
+
+  methods.forEach((method: any) => {
+    const currencies = method.paymentCurrencies || method.payment_currencies || [];
+    currencies.forEach((currency: any) => {
+      out.push({
+        ...currency,
+        method,
+      });
+    });
+  });
+
+  return out;
+};