@blocklet/payment-react 1.18.29 → 1.18.31

package/src/payment/success.tsx

@@ -1,8 +1,9 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Grow, Link, Stack, Typography } from '@mui/material';
+import { Grow, Link, Stack, Typography, Box, Paper } from '@mui/material';
 import { styled } from '@mui/system';
 import { joinURL } from 'ufo';
 
+import { Button } from '@arcblock/ux';
 import { usePaymentContext } from '../contexts/payment';
 
 type Props = {
@@ -12,20 +13,80 @@ type Props = {
   payee: string;
   invoiceId?: string;
   subscriptionId?: string;
+  subscriptions?: any[];
 };
 
-export default function PaymentSuccess({ mode, message, action, payee, invoiceId, subscriptionId }: Props) {
+export default function PaymentSuccess({
+  mode,
+  message,
+  action,
+  payee,
+  invoiceId,
+  subscriptionId,
+  subscriptions,
+}: Props) {
   const { t } = useLocaleContext();
   const { prefix } = usePaymentContext();
   let next: any = null;
-  if (['subscription', 'setup'].includes(action) && subscriptionId) {
-    next = (
-      <Typography textAlign="center" sx={{ mt: 2 }}>
-        <Link href={joinURL(prefix, `/customer/subscription/${subscriptionId}`)}>
-          {t('payment.checkout.next.subscription', { payee })}
-        </Link>
-      </Typography>
-    );
+  if (['subscription', 'setup'].includes(action)) {
+    if (subscriptions && subscriptions.length > 1) {
+      next = (
+        <Paper
+          elevation={0}
+          sx={{
+            p: 3,
+            backgroundColor: 'grey.50',
+            borderRadius: 2,
+            width: '100%',
+            mt: 2,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+          }}>
+          {subscriptions.map((subscription) => (
+            <Box
+              key={subscription.id}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}>
+              <Typography
+                variant="body2"
+                sx={{
+                  color: 'text.secondary',
+                  fontWeight: 500,
+                }}>
+                {subscription.description}
+              </Typography>
+              <Box
+                sx={{
+                  flex: 1,
+                  borderBottom: '1px dashed',
+                  borderColor: 'grey.300',
+                  mx: 2,
+                }}
+              />
+              <Button variant="text" color="primary" size="small">
+                <Link
+                  href={joinURL(prefix, `/customer/subscription/${subscription.id}`)}
+                  sx={{ color: 'text.secondary' }}>
+                  {t('payment.checkout.next.view')}
+                </Link>
+              </Button>
+            </Box>
+          ))}
+        </Paper>
+      );
+    } else if (subscriptionId) {
+      next = (
+        <Button variant="outlined" color="primary" sx={{ mt: 2 }}>
+          <Link href={joinURL(prefix, `/customer/subscription/${subscriptionId}`)}>
+            {t('payment.checkout.next.subscription', { payee })}
+          </Link>
+        </Button>
+      );
+    }
   } else if (invoiceId) {
     next = (
       <Typography textAlign="center" sx={{ mt: 2 }}>
@@ -42,7 +103,7 @@ export default function PaymentSuccess({ mode, message, action, payee, invoiceId
         direction="column"
         alignItems="center"
         justifyContent={mode === 'standalone' ? 'center' : 'flex-start'}
-        sx={{ height: mode === 'standalone' ? 360 : 300 }}>
+        sx={{ height: mode === 'standalone' ? 'fit-content' : 300 }}>
         <Div>
           <div className="check-icon">
             <span className="icon-line line-tip" />
@@ -66,6 +127,7 @@ export default function PaymentSuccess({ mode, message, action, payee, invoiceId
 PaymentSuccess.defaultProps = {
   invoiceId: '',
   subscriptionId: '',
+  subscriptions: [],
 };
 
 const Div = styled('div')`

package/src/payment/summary.tsx

@@ -160,6 +160,7 @@ export default function PaymentSummary({
   );
   const headlines = formatCheckoutHeadlines(items, currency, { trialEnd, trialInDays }, locale);
   const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : '0';
+
   const totalAmount = fromUnitToToken(
     new BN(fromTokenToUnit(headlines.actualAmount, currency?.decimal)).add(new BN(staking)).toString(),
     currency?.decimal