@blocklet/payment-react 1.13.210 → 1.13.211

package/src/payment/index.tsx

@@ -1,5 +1,4 @@
-import Center from '@arcblock/ux/lib/Center';
-/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type {
@@ -12,10 +11,11 @@ import type {
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Box, Fade, Stack } from '@mui/material';
 import { styled } from '@mui/system';
+import { fromTokenToUnit } from '@ocap/util';
 import { useSetState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
-import { LiteralUnion } from 'type-fest';
+import type { LiteralUnion } from 'type-fest';
 
 import api from '../api';
 import { usePaymentContext } from '../contexts/payment';
@@ -50,6 +50,7 @@ export default function Payment({
   onError,
   onChange,
   goBack,
+  action,
 }: Props) {
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
@@ -74,7 +75,7 @@ export default function Payment({
   }, [checkoutSession, livemode, setLivemode, refresh]);
 
   if (error) {
-    return <PaymentError title="Oops" description={formatError(error)} />;
+    return <PaymentError mode={mode} title="Oops" description={formatError(error)} />;
   }
 
   if (!checkoutSession || !delay) {
@@ -87,7 +88,7 @@ export default function Payment({
           <Stack className="cko-payment">
             <PaymentSkeleton />
           </Stack>
-          <CheckoutFooter className="cko-footer" />
+          {mode === 'standalone' && <CheckoutFooter className="cko-footer" />}
         </Stack>
       </Root>
     );
@@ -96,12 +97,11 @@ export default function Payment({
   // expired session
   if (checkoutSession.expires_at <= Math.round(Date.now() / 1000)) {
     return (
-      <Center>
-        <PaymentError
-          title={t('payment.checkout.expired.title')}
-          description={t('payment.checkout.expired.description')}
-        />
-      </Center>
+      <PaymentError
+        mode={mode}
+        title={t('payment.checkout.expired.title')}
+        description={t('payment.checkout.expired.description')}
+      />
     );
   }
 
@@ -109,6 +109,7 @@ export default function Payment({
   if (checkoutSession.status === 'complete') {
     return (
       <PaymentError
+        mode={mode}
         title={t('payment.checkout.complete.title')}
         description={t('payment.checkout.complete.description')}
       />
@@ -128,6 +129,7 @@ export default function Payment({
       onChange={onChange}
       goBack={goBack}
       mode={mode}
+      action={action}
     />
   );
 }
@@ -150,6 +152,7 @@ export function PaymentInner({
   onError,
   onChange,
   goBack,
+  action,
 }: MainProps) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
@@ -232,6 +235,19 @@ export function PaymentInner({
     }
   };
 
+  const onChangeAmount = async ({ priceId, amount }: { priceId: string; amount: string }) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/amount`, {
+        priceId,
+        amount: fromTokenToUnit(amount, currency.decimal).toString(),
+      });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
   const handlePaid = (result: any) => {
     setState({ checkoutSession: result.checkoutSession });
     onPaid(result);
@@ -247,7 +263,7 @@ export function PaymentInner({
             fontSize="medium"
           />
         )}
-        <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : 8 } }}>
+        <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}
@@ -261,21 +277,29 @@ export function PaymentInner({
                 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={4}>
+          <Stack className="cko-payment" direction="column" spacing={{ xs: 2, sm: 4 }}>
             {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.mode}`)
+                  t(
+                    `payment.checkout.completed.${
+                      paymentLink?.donation_settings ? 'donate' : state.checkoutSession.mode
+                    }`
+                  )
                 }
               />
             )}
@@ -284,10 +308,12 @@ export function PaymentInner({
                 checkoutSession={state.checkoutSession}
                 paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
                 paymentIntent={paymentIntent}
+                paymentLink={paymentLink}
                 customer={customer}
                 onPaid={handlePaid}
                 onError={onError}
                 mode={mode}
+                action={action}
               />
             )}
           </Stack>

package/src/payment/product-donation.tsx

@@ -0,0 +1,118 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { DonationSettings, TLineItemExpanded } from '@blocklet/payment-types';
+import { Box, Card, CardActionArea, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
+import { useSetState } from 'ahooks';
+import { useEffect } from 'react';
+
+import Switch from '../components/switch-button';
+
+export default function ProductDonation({
+  item,
+  settings,
+  onChange,
+}: {
+  item: TLineItemExpanded;
+  settings: DonationSettings;
+  onChange: Function;
+}) {
+  const { t } = useLocaleContext();
+  const preset = settings.amount.preset || settings.amount.presets?.[0] || '0';
+  const [state, setState] = useSetState({
+    selected: preset,
+    input: '',
+    custom: settings.amount.presets?.length === 0,
+    error: '',
+  });
+
+  // Set default amount
+  useEffect(() => {
+    if (settings.amount.preset) {
+      setState({ selected: settings.amount.preset, custom: false });
+    } else if (settings.amount.presets && settings.amount.presets.length > 0) {
+      setState({ selected: settings.amount.presets[0], custom: false });
+    }
+  }, [settings.amount.preset, settings.amount.presets, setState]);
+
+  const handleSelect = (amount: string) => {
+    setState({ selected: amount, custom: false, error: '' });
+    onChange({ priceId: item.price_id, amount });
+  };
+
+  const handleInput = (event: any) => {
+    const { value } = event.target;
+    const min = parseFloat(settings.amount.minimum || '0');
+    const max = settings.amount.maximum ? parseFloat(settings.amount.maximum) : Infinity;
+
+    if (value < min || value > max) {
+      setState({ input: value, error: t('payment.checkout.donation.between', { min, max }) });
+      return;
+    }
+
+    setState({ error: '', input: value });
+    onChange({ priceId: item.price_id, amount: value });
+  };
+
+  const handleToggle = (event: any) => {
+    if (event.target.checked) {
+      setState({ custom: true, input: state.selected, error: '' });
+    } else {
+      setState({ custom: false, input: '', error: '' });
+    }
+  };
+
+  return (
+    <Box display="flex" flexDirection="column" alignItems="flex-start" gap={1.5}>
+      {settings.amount.custom && preset !== '0' && (
+        <FormControlLabel
+          control={<Switch checked={state.custom} sx={{ marginRight: 0.4 }} onChange={handleToggle} />}
+          label={state.custom ? t('payment.checkout.donation.select') : t('payment.checkout.donation.custom')}
+          sx={{ marginRight: 2, marginLeft: 0.5, color: 'text.secondary' }}
+        />
+      )}
+      {!state.custom && (
+        <Box display="flex" flexWrap="wrap" alignItems="center" gap={1.5}>
+          {settings.amount.presets &&
+            settings.amount.presets.length > 0 &&
+            settings.amount.presets.map((amount) => (
+              <Card
+                key={amount}
+                variant="outlined"
+                sx={{
+                  minWidth: 120,
+                  textAlign: 'center',
+                  ...(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">
+                    <Typography
+                      component="strong"
+                      lineHeight={1}
+                      variant="h5"
+                      sx={{ fontVariantNumeric: 'tabular-nums', fontWeight: 400 }}>
+                      {amount}
+                    </Typography>
+                    <Typography component="small" lineHeight={1} fontSize={12}>
+                      ABT
+                    </Typography>{' '}
+                  </Stack>
+                </CardActionArea>
+              </Card>
+            ))}
+        </Box>
+      )}
+      {state.custom && (
+        <TextField
+          label={preset !== '0' ? null : t('payment.checkout.donation.custom')}
+          type="number"
+          value={state.input}
+          onChange={handleInput}
+          inputProps={{ min: settings.amount.minimum, max: settings.amount.maximum }}
+          margin="none"
+          fullWidth
+          error={!!state.error}
+          helperText={state.error}
+        />
+      )}
+    </Box>
+  );
+}

package/src/payment/skeleton/overview.tsx

@@ -8,13 +8,13 @@ export default function OverviewSkeleton() {
           <Skeleton variant="circular" width={32} height={32} />
           <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
         </Stack>
-        <Typography mt={3} component="div" variant="h4">
+        <Typography mt={2} component="div" variant="h4">
           <Skeleton />
         </Typography>
         <Typography component="div" variant="h2">
           <Skeleton />
         </Typography>
-        <Skeleton sx={{ mt: 3 }} variant="rounded" width={200} height={200} />
+        <Skeleton sx={{ mt: 2 }} variant="rounded" width={200} height={200} />
       </Stack>
     </Fade>
   );

package/src/payment/skeleton/payment.tsx

@@ -3,7 +3,7 @@ import { Box, Fade, Skeleton, Stack, Typography } from '@mui/material';
 export default function PaymentSkeleton() {
   return (
     <Fade in>
-      <Stack direction="column" spacing={3}>
+      <Stack direction="column" spacing={2}>
         <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
         <Box>
           <Typography component="div" variant="h4">
@@ -25,9 +25,6 @@ export default function PaymentSkeleton() {
           <Typography component="div" variant="h4">
             <Skeleton />
           </Typography>
-          <Typography component="div" variant="h1">
-            <Skeleton />
-          </Typography>
         </Box>
       </Stack>
     </Fade>

package/src/payment/success.tsx

@@ -6,6 +6,7 @@ import { joinURL } from 'ufo';
 import { usePaymentContext } from '../contexts/payment';
 
 type Props = {
+  mode: string;
   message: string;
   action: string;
   payee: string;
@@ -13,7 +14,7 @@ type Props = {
   subscriptionId?: string;
 };
 
-export default function PaymentSuccess({ message, action, payee, invoiceId, subscriptionId }: Props) {
+export default function PaymentSuccess({ mode, message, action, payee, invoiceId, subscriptionId }: Props) {
   const { t } = useLocaleContext();
   const { prefix } = usePaymentContext();
   let next: any = null;
@@ -37,7 +38,11 @@ export default function PaymentSuccess({ message, action, payee, invoiceId, subs
 
   return (
     <Grow in>
-      <Stack direction="column" alignItems="center" justifyContent="center" sx={{ height: 360 }}>
+      <Stack
+        direction="column"
+        alignItems="center"
+        justifyContent={mode === 'standalone' ? 'center' : 'flex-start'}
+        sx={{ height: mode === 'standalone' ? 360 : 300 }}>
         <Div>
           <div className="check-icon">
             <span className="icon-line line-tip" />

package/src/payment/summary.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 import { InfoOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
 import { Fade, Grow, Stack, Tooltip, Typography, keyframes } from '@mui/material';
@@ -12,6 +12,7 @@ import api from '../api';
 import Status from '../components/status';
 import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from '../util';
 import PaymentAmount from './amount';
+import ProductDonation from './product-donation';
 import ProductItem from './product-item';
 
 const shake = keyframes`
@@ -40,10 +41,13 @@ type Props = {
   showStaking?: boolean;
   onUpsell?: Function;
   onDownsell?: Function;
+  onChangeAmount?: Function;
   onApplyCrossSell?: Function;
   onCancelCrossSell?: Function;
   checkoutSessionId?: string;
   crossSellBehavior?: string;
+  donationSettings?: DonationSettings; // only include backend part
+  action?: string;
 };
 
 async function fetchCrossSell(id: string) {
@@ -91,9 +95,12 @@ PaymentSummary.defaultProps = {
   onDownsell: noop,
   onApplyCrossSell: noop,
   onCancelCrossSell: noop,
+  onChangeAmount: noop,
   checkoutSessionId: '',
   crossSellBehavior: '',
   showStaking: false,
+  donationSettings: null,
+  action: '',
 };
 
 export default function PaymentSummary({
@@ -105,9 +112,12 @@ export default function PaymentSummary({
   onDownsell,
   onApplyCrossSell,
   onCancelCrossSell,
+  onChangeAmount,
   checkoutSessionId,
   crossSellBehavior,
   showStaking,
+  donationSettings,
+  action,
   ...rest
 }: Props) {
   const { t, locale } = useLocaleContext();
@@ -166,38 +176,47 @@ export default function PaymentSummary({
   return (
     <Fade in>
       <Stack className="cko-product" direction="column" {...rest}>
-        <Stack className="cko-product-summary" direction="column" alignItems="flex-start" sx={{ mb: 4 }}>
+        <Stack className="cko-product-summary" direction="column" alignItems="flex-start" sx={{ mb: { xs: 0, sm: 3 } }}>
           <Typography sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
-            {headlines.action}
+            {action || headlines.action}
           </Typography>
           <PaymentAmount amount={headlines.amount} />
           {headlines.then && (
             <Typography sx={{ fontSize: '0.9rem', color: 'text.secondary' }}>{headlines.then}</Typography>
           )}
         </Stack>
-        <Stack spacing={2}>
-          {items.map((x: TLineItemExpanded) => (
-            <ProductItem
-              key={`${x.price_id}-${currency.id}`}
-              item={x}
-              items={items}
-              trialInDays={trialInDays}
-              currency={currency}
-              onUpsell={handleUpsell}
-              onDownsell={handleDownsell}>
-              {x.cross_sell && (
-                <LoadingButton
-                  size="small"
-                  loadingPosition="end"
-                  color="error"
-                  variant="text"
-                  loading={state.loading}
-                  onClick={handleCancelCrossSell}>
-                  {t('payment.checkout.cross_sell.remove')}
-                </LoadingButton>
-              )}
-            </ProductItem>
-          ))}
+        <Stack spacing={{ xs: 1, sm: 2 }}>
+          {items.map((x: TLineItemExpanded) =>
+            x.price.custom_unit_amount && onChangeAmount && donationSettings ? (
+              <ProductDonation
+                key={`${x.price_id}-${currency.id}`}
+                item={x}
+                settings={donationSettings}
+                onChange={onChangeAmount}
+              />
+            ) : (
+              <ProductItem
+                key={`${x.price_id}-${currency.id}`}
+                item={x}
+                items={items}
+                trialInDays={trialInDays}
+                currency={currency}
+                onUpsell={handleUpsell}
+                onDownsell={handleDownsell}>
+                {x.cross_sell && (
+                  <LoadingButton
+                    size="small"
+                    loadingPosition="end"
+                    color="error"
+                    variant="text"
+                    loading={state.loading}
+                    onClick={handleCancelCrossSell}>
+                    {t('payment.checkout.cross_sell.remove')}
+                  </LoadingButton>
+                )}
+              </ProductItem>
+            )
+          )}
         </Stack>
         {data && items.some((x) => x.price_id === data.id) === false && (
           <Grow in>
@@ -210,7 +229,7 @@ export default function PaymentSummary({
                 borderRadius: 1,
                 padding: 1,
                 animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : 'none',
-                mt: 3,
+                mt: { xs: 1, sm: 2 },
               }}>
               <ProductItem
                 item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
@@ -249,7 +268,7 @@ export default function PaymentSummary({
               border: '1px solid #eee',
               borderRadius: 1,
               padding: 1,
-              mt: 3,
+              mt: { xs: 1, sm: 2 },
             }}>
             <Stack direction="row" alignItems="center" spacing={0.5}>
               <Typography>{t('payment.checkout.staking.title')}</Typography>

package/src/types/index.ts

@@ -15,6 +15,7 @@ export type CheckoutContext = {
   paymentIntent?: TPaymentIntent;
   customer?: TCustomer;
   mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+  action?: string;
 };
 
 export type CheckoutFormData = {
@@ -36,6 +37,7 @@ export type CheckoutFormData = {
 export type CheckoutProps = Partial<CheckoutCallbacks> & {
   id: string;
   extraParams?: Record<string, any>;
+  action?: string;
   mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
 };
 

package/src/util.ts

@@ -125,6 +125,10 @@ export const formatPrice = (
   bn: boolean = true,
   locale: string = 'en'
 ) => {
+  if (price.custom_unit_amount) {
+    return `Custom (${currency.symbol})`;
+  }
+
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn
     ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString()
@@ -219,10 +223,16 @@ export function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCu
   const options = getPriceCurrencyOptions(price);
   const option = options.find((x) => x.currency_id === currency.id);
   if (option) {
+    if (option.custom_unit_amount) {
+      return option.custom_unit_amount.preset || option.custom_unit_amount.presets[0];
+    }
     return option.unit_amount;
   }
 
   if (price.currency_id === currency.id) {
+    if (price.custom_unit_amount) {
+      return price.custom_unit_amount.preset || price.custom_unit_amount.presets[0];
+    }
     return price.unit_amount;
   }
 
@@ -235,7 +245,14 @@ export function getPriceCurrencyOptions(price: TPrice): PriceCurrency[] {
     return price.currency_options;
   }
 
-  return [{ currency_id: price.currency_id, unit_amount: price.unit_amount, tiers: null, custom_unit_amount: null }];
+  return [
+    {
+      currency_id: price.currency_id,
+      unit_amount: price.unit_amount,
+      custom_unit_amount: price.custom_unit_amount || null,
+      tiers: null,
+    },
+  ];
 }
 
 export function formatLineItemPricing(
@@ -339,6 +356,20 @@ export function getRefundStatusColor(status: string) {
   }
 }
 
+export function getPayoutStatusColor(status: string) {
+  switch (status) {
+    case 'paid':
+      return 'success';
+    case 'failed':
+      return 'warning';
+    case 'canceled':
+    case 'pending':
+    case 'in_transit':
+    default:
+      return 'default';
+  }
+}
+
 export function getInvoiceStatusColor(status: string) {
   switch (status) {
     case 'paid':
@@ -370,6 +401,10 @@ export function getCheckoutAmount(
   trialing = false,
   upsell = true
 ) {
+  if (items.find((x) => (x.upsell_price || x.price).custom_unit_amount) && items.length > 1) {
+    throw new Error('Multiple items with custom unit amount are not supported');
+  }
+
   let renew = new BN(0);
   const total = items
     .filter((x) => {
@@ -377,9 +412,20 @@ export function getCheckoutAmount(
       return price != null;
     })
     .reduce((acc, x) => {
+      if (x.custom_amount) {
+        return acc.add(new BN(x.custom_amount));
+      }
+
       const price = upsell ? x.upsell_price || x.price : x.price;
+      const unitPrice = getPriceUintAmountByCurrency(price, currency);
+      if (price.custom_unit_amount) {
+        if (unitPrice) {
+          return acc.add(new BN(unitPrice).mul(new BN(x.quantity)));
+        }
+      }
+
       if (price?.type === 'recurring') {
-        renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
+        renew = renew.add(new BN(unitPrice).mul(new BN(x.quantity)));
 
         if (trialing) {
           return acc;
@@ -388,7 +434,8 @@ export function getCheckoutAmount(
           return acc;
         }
       }
-      return acc.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
+
+      return acc.add(new BN(unitPrice).mul(new BN(x.quantity)));
     }, new BN(0))
     .toString();