@blocklet/payment-react 1.14.21 → 1.14.23

package/src/payment/product-card.tsx

@@ -14,7 +14,7 @@ type Props = {
 export default function ProductCard({ size, variant, name, logo, description, extra }: Props) {
   const s = { width: size, height: size };
   return (
-    <Stack direction="row" alignItems="flex-start" spacing={1} flex={2} sx={{ width: '100%' }}>
+    <Stack direction="row" alignItems="center" spacing={1} flex={2} sx={{ width: '100%' }}>
       {logo ? (
         // @ts-ignore
         <Avatar src={logo} alt={name} variant={variant} sx={s} />
@@ -33,7 +33,7 @@ export default function ProductCard({ size, variant, name, logo, description, ex
           className="cko-ellipsis"
           variant="body1"
           title={name}
-          sx={{ fontWeight: 500, mb: 0.5, lineHeight: 1 }}
+          sx={{ fontWeight: 500, mb: 0.5, lineHeight: 1, fontSize: 16 }}
           color="text.primary">
           {name}
         </Typography>
@@ -42,12 +42,12 @@ export default function ProductCard({ size, variant, name, logo, description, ex
             variant="body1"
             title={description}
             sx={{ fontSize: '0.85rem', mb: 0.5, lineHeight: 1, textAlign: 'left' }}
-            color="text.secondary">
+            color="text.lighter">
             {description}
           </Typography>
         )}
         {extra && (
-          <Typography variant="body1" sx={{ fontSize: '0.85rem' }} color="text.secondary">
+          <Typography variant="body1" sx={{ fontSize: '0.85rem' }} color="text.lighter">
             {extra}
           </Typography>
         )}

package/src/payment/product-donation.tsx

@@ -6,6 +6,7 @@ import { useEffect } from 'react';
 
 import Switch from '../components/switch-button';
 import { formatAmountPrecisionLimit } from '../libs/util';
+import { usePaymentContext } from '../contexts/payment';
 
 export default function ProductDonation({
   item,
@@ -19,6 +20,7 @@ export default function ProductDonation({
   currency: TPaymentCurrency;
 }) {
   const { t, locale } = useLocaleContext();
+  const { setPayable } = usePaymentContext();
   const preset = settings.amount.preset || settings.amount.presets?.[0] || '0';
   const [state, setState] = useSetState({
     selected: preset,
@@ -51,14 +53,16 @@ export default function ProductDonation({
 
     if (formatAmountPrecisionLimit(value, locale)) {
       setState({ input: value, error: formatAmountPrecisionLimit(value, locale, precision) });
+      setPayable(false);
       return;
     }
 
     if (value < min || value > max) {
       setState({ input: value, error: t('payment.checkout.donation.between', { min, max }) });
+      setPayable(false);
       return;
     }
-
+    setPayable(true);
     setState({ error: '', input: value });
     onChange({ priceId: item.price_id, amount: value });
   };
@@ -67,7 +71,8 @@ export default function ProductDonation({
     if (event.target.checked) {
       setState({ custom: true, input: state.selected, error: '' });
     } else {
-      setState({ custom: false, input: '', error: '' });
+      setPayable(true);
+      handleSelect(preset);
     }
   };
 
@@ -77,7 +82,7 @@ export default function ProductDonation({
         <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' }}
+          sx={{ marginRight: 2, marginLeft: 0.5, color: 'text.lighter' }}
         />
       )}
       {!state.custom && (
@@ -89,7 +94,7 @@ export default function ProductDonation({
                 key={amount}
                 variant="outlined"
                 sx={{
-                  minWidth: 120,
+                  minWidth: 115,
                   textAlign: 'center',
                   ...(state.selected === amount && !state.custom ? { borderColor: 'primary.main' } : {}),
                 }}>

package/src/payment/product-item.tsx

@@ -2,6 +2,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { PriceRecurring, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 import { Box, Stack, Typography } from '@mui/material';
 
+import React, { useMemo } from 'react';
 import Status from '../components/status';
 import Switch from '../components/switch-button';
 import {
@@ -44,55 +45,74 @@ export default function ProductItem({
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === 'metered' ? t('common.metered') : '';
   const canUpsell = mode === 'normal' && items.length === 1;
+  const primaryText = useMemo(() => {
+    const price = item.upsell_price || item.price || {};
+    const isRecurring = price?.type === 'recurring' && price?.recurring;
+    if (isRecurring && trialInDays <= 0 && price?.recurring?.usage_type !== 'metered') {
+      return `${pricing.primary} ${price.recurring ? formatRecurring(price.recurring, false, 'slash', locale) : ''}`;
+    }
+    return pricing.primary;
+  }, [trialInDays, pricing, item, locale]);
+
   return (
-    <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }}>
-      <Stack direction="column" alignItems="flex-end" sx={{ width: '100%' }}>
+    <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }} className="product-item">
+      <Stack direction="column" alignItems="flex-start" sx={{ width: '100%' }} className="product-item-content">
         <Stack
           direction="row"
-          alignItems="flex-start"
+          alignItems="center"
+          flexWrap="wrap"
           spacing={0.5}
           justifyContent="space-between"
           sx={{ width: '100%' }}>
           <ProductCard
             logo={item.price.product?.images[0]}
             name={item.price.product?.name}
-            description={item.price.product?.description}
+            // description={item.price.product?.description}
             extra={
               <Box display="flex" alignItems="center">
                 {item.price.type === 'recurring' && item.price.recurring
                   ? [pricing.quantity, t('common.billed', { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, 'per', locale)} ${metered}` })].filter(Boolean).join(', ') // prettier-ignore
                   : pricing.quantity}
-
-                {formatQuantityInventory(item.price, item.quantity, locale) ? (
-                  <Typography sx={{ fontSize: '0.85rem', color: 'red' }}>
-                    （{formatQuantityInventory(item.price, item.quantity, locale)}）
-                  </Typography>
-                ) : (
-                  ''
-                )}
               </Box>
             }
           />
           <Stack direction="column" alignItems="flex-end" flex={1}>
-            <Typography sx={{ color: 'text.primary', fontWeight: 500 }} gutterBottom>
-              {pricing.primary}
+            <Typography sx={{ color: 'text.primary', fontWeight: 500, whiteSpace: 'nowrap' }} gutterBottom>
+              {primaryText}
             </Typography>
             {pricing.secondary && (
-              <Typography sx={{ fontSize: '0.85rem', color: 'text.secondary' }}>{pricing.secondary}</Typography>
+              <Typography sx={{ fontSize: '0.85rem', color: 'text.lighter' }}>{pricing.secondary}</Typography>
             )}
           </Stack>
         </Stack>
+        {formatQuantityInventory(item.price, item.quantity, locale) ? (
+          <Status
+            label={formatQuantityInventory(item.price, item.quantity, locale)}
+            variant="outlined"
+            sx={{
+              mt: 1,
+              borderColor: 'var(--tags-tag-red-border, #FFC8D3)',
+              background: 'var(--tags-tag-red-bg, #FFE2E6)',
+              color: 'var(--tags-tag-red-text, #E40031)',
+            }}
+          />
+        ) : null}
         {children}
       </Stack>
       {canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && (
-        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+          sx={{ width: '100%' }}
+          className="product-item-upsell">
           <Typography
             component="label"
             htmlFor="upsell-switch"
             sx={{
               fontSize: 12,
               cursor: 'pointer',
-              color: 'text.primary',
+              color: 'text.secondary',
             }}>
             <Switch
               id="upsell-switch"
@@ -106,9 +126,13 @@ export default function ProductItem({
             })}
             <Status
               label={t('payment.checkout.upsell.off', { saving })}
-              color="primary"
               variant="outlined"
-              sx={{ ml: 1 }}
+              sx={{
+                ml: 1,
+                borderColor: ' var(--tags-tag-orange-border, #FFE467)',
+                background: 'var(--tags-tag-orange-bg, #FFF4BC)',
+                color: 'var(--tags-tag-orange-text, #D24000)',
+              }}
             />
           </Typography>
           <Typography component="span" sx={{ fontSize: 12 }}>
@@ -117,7 +141,12 @@ export default function ProductItem({
         </Stack>
       )}
       {canUpsell && item.upsell_price_id && (
-        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+          sx={{ width: '100%' }}
+          className="product-item-upsell">
           <Typography
             component="label"
             htmlFor="upsell-switch"

package/src/payment/summary.tsx

@@ -1,37 +1,67 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
-import { InfoOutlined } from '@mui/icons-material';
+import { HelpOutline } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
-import { Fade, Grow, Stack, Tooltip, Typography, keyframes } from '@mui/material';
-import { BN, fromTokenToUnit } from '@ocap/util';
+import {
+  Box,
+  Divider,
+  Fade,
+  Grow,
+  Stack,
+  Tooltip,
+  Typography,
+  Collapse,
+  IconButton,
+  IconButtonProps,
+} from '@mui/material';
+import { BN, fromTokenToUnit, fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import noop from 'lodash/noop';
 import useBus from 'use-bus';
-
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { styled } from '@mui/material/styles';
 import Status from '../components/status';
 import api from '../libs/api';
 import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from '../libs/util';
 import PaymentAmount from './amount';
 import ProductDonation from './product-donation';
 import ProductItem from './product-item';
+import Livemode from '../components/livemode';
+import { usePaymentContext } from '../contexts/payment';
+import { useMobile } from '../hooks/mobile';
 
-const shake = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(2deg);
-  }
-  50% {
-    transform: rotate(0eg);
-  }
-  75% {
-    transform: rotate(-2deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-`;
+// const shake = keyframes`
+//   0% {
+//     transform: rotate(0deg);
+//   }
+//   25% {
+//     transform: rotate(2deg);
+//   }
+//   50% {
+//     transform: rotate(0eg);
+//   }
+//   75% {
+//     transform: rotate(-2deg);
+//   }
+//   100% {
+//     transform: rotate(0deg);
+//   }
+// `;
+
+interface ExpandMoreProps extends IconButtonProps {
+  expand: boolean;
+}
+
+const ExpandMore = styled((props: ExpandMoreProps) => {
+  const { expand, ...other } = props;
+  return <IconButton {...other} />;
+})(({ theme, expand }) => ({
+  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest,
+  }),
+}));
 
 type Props = {
   items: TLineItemExpanded[];
@@ -121,13 +151,18 @@ export default function PaymentSummary({
   ...rest
 }: Props) {
   const { t, locale } = useLocaleContext();
-  const [state, setState] = useSetState({ loading: false, shake: false });
+  const { isMobile } = useMobile();
+  const settings = usePaymentContext();
+  const [state, setState] = useSetState({ loading: false, shake: false, expanded: items?.length < 3 });
   const { data, runAsync } = useRequest(() =>
     checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
   );
   const headlines = formatCheckoutHeadlines(items, currency, 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
+  );
   useBus(
     'error.REQUIRE_CROSS_SELL',
     () => {
@@ -173,44 +208,35 @@ 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: { xs: 1, sm: 3 } }}>
-          <Typography
-            className="cko-ellipsis"
-            component="div"
-            title={action || headlines.action}
-            sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
-            {action || headlines.action}
-          </Typography>
-          <PaymentAmount amount={headlines.amount} />
-          {headlines.then && (
-            <Typography component="div" sx={{ fontSize: '0.9rem', color: 'text.secondary' }}>
-              {headlines.then}
-            </Typography>
-          )}
-        </Stack>
-        <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}
-                currency={currency}
-              />
-            ) : (
-              <ProductItem
-                key={`${x.price_id}-${currency.id}`}
-                item={x}
-                items={items}
-                trialInDays={trialInDays}
-                currency={currency}
-                onUpsell={handleUpsell}
-                onDownsell={handleDownsell}>
-                {x.cross_sell && (
+  const ProductCardList = (
+    <Stack
+      className="cko-product-list"
+      sx={{
+        flex: '0 1 auto',
+        overflow: 'auto',
+      }}>
+      <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}
+              currency={currency}
+            />
+          ) : (
+            <ProductItem
+              key={`${x.price_id}-${currency.id}`}
+              item={x}
+              items={items}
+              trialInDays={trialInDays}
+              currency={currency}
+              onUpsell={handleUpsell}
+              onDownsell={handleDownsell}>
+              {x.cross_sell && (
+                <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>
+                  <Typography />
                   <LoadingButton
                     size="small"
                     loadingPosition="end"
@@ -220,32 +246,22 @@ export default function PaymentSummary({
                     onClick={handleCancelCrossSell}>
                     {t('payment.checkout.cross_sell.remove')}
                   </LoadingButton>
-                )}
-              </ProductItem>
-            )
-          )}
-        </Stack>
-        {data && items.some((x) => x.price_id === data.id) === false && (
-          <Grow in>
-            <Stack
-              direction="column"
-              alignItems="flex-end"
-              spacing={0.5}
-              sx={{
-                border: '1px solid #eee',
-                borderRadius: 1,
-                padding: 1,
-                animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : 'none',
-                mt: { xs: 1, sm: 2 },
-              }}>
-              <ProductItem
-                item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
-                items={items}
-                trialInDays={trialInDays}
-                currency={currency}
-                onUpsell={noop}
-                onDownsell={noop}
-              />
+                </Stack>
+              )}
+            </ProductItem>
+          )
+        )}
+      </Stack>
+      {data && items.some((x) => x.price_id === data.id) === false && (
+        <Grow in>
+          <Stack mt={1}>
+            <ProductItem
+              item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
+              items={items}
+              trialInDays={trialInDays}
+              currency={currency}
+              onUpsell={noop}
+              onDownsell={noop}>
               <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>
                 <Typography>
                   {crossSellBehavior === 'required' && (
@@ -262,31 +278,98 @@ export default function PaymentSummary({
                   {t('payment.checkout.cross_sell.add')}
                 </LoadingButton>
               </Stack>
+            </ProductItem>
+          </Stack>
+        </Grow>
+      )}
+    </Stack>
+  );
+  return (
+    <Fade in>
+      <Stack className="cko-product" direction="column" {...rest}>
+        <Box display="flex" alignItems="center" sx={{ mb: 2.5 }}>
+          <Typography
+            title={t('payment.checkout.orderSummary')}
+            sx={{
+              color: 'text.primary',
+              fontSize: {
+                xs: '18px',
+                md: '24px',
+              },
+              fontWeight: '700',
+              lineHeight: '32px',
+            }}>
+            {action || t('payment.checkout.orderSummary')}
+          </Typography>
+          {!settings.livemode && <Livemode />}
+        </Box>
+        {isMobile ? (
+          <>
+            <Stack
+              justifyContent="space-between"
+              flexDirection="row"
+              alignItems="center"
+              mb={1.5}
+              onClick={() => setState({ expanded: !state.expanded })}>
+              <Typography>{t('payment.checkout.productListTotal', { total: items.length })}</Typography>
+              <ExpandMore expand={state.expanded} aria-expanded={state.expanded} aria-label="show more">
+                <ExpandMoreIcon />
+              </ExpandMore>
             </Stack>
-          </Grow>
+            <Collapse in={state.expanded || !isMobile} timeout="auto" unmountOnExit>
+              {ProductCardList}
+            </Collapse>
+          </>
+        ) : (
+          ProductCardList
         )}
+
+        <Divider sx={{ mt: 2.5, mb: 2.5 }} />
         {staking > 0 && (
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-            spacing={1}
-            sx={{
-              border: '1px solid #eee',
-              borderRadius: 1,
-              padding: 1,
-              mt: { xs: 1, sm: 2 },
-            }}>
-            <Stack direction="row" alignItems="center" spacing={0.5}>
-              <Typography>{t('payment.checkout.staking.title')}</Typography>
-              <Tooltip title={t('payment.checkout.staking.tooltip')} placement="top" sx={{ maxWidth: '150px' }}>
-                <InfoOutlined fontSize="small" sx={{ color: 'text.secondary' }} />
-              </Tooltip>
+          <>
+            <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}>
+              <Stack direction="row" alignItems="center" spacing={0.5}>
+                <Typography sx={{ color: 'text.secondary' }}>{t('payment.checkout.paymentRequired')}</Typography>
+                <Tooltip
+                  title={<Typography>{t('payment.checkout.stakingConfirm')}</Typography>}
+                  placement="top"
+                  sx={{ maxWidth: '150px' }}>
+                  <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
+                </Tooltip>
+              </Stack>
+              <Typography>{headlines.amount}</Typography>
             </Stack>
-            <Typography>
-              {formatAmount(staking, currency.decimal)} {currency.symbol}
-            </Typography>
-          </Stack>
+            <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}>
+              <Stack direction="row" alignItems="center" spacing={0.5}>
+                <Typography sx={{ color: 'text.secondary' }}>{t('payment.checkout.staking.title')}</Typography>
+                <Tooltip
+                  title={<Typography>{t('payment.checkout.staking.tooltip')}</Typography>}
+                  placement="top"
+                  sx={{ maxWidth: '150px' }}>
+                  <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
+                </Tooltip>
+              </Stack>
+              <Typography>
+                {formatAmount(staking, currency.decimal)} {currency.symbol}
+              </Typography>
+            </Stack>
+          </>
+        )}
+        <Stack
+          display="flex"
+          justifyContent="space-between"
+          flexDirection="row"
+          alignItems="center"
+          sx={{ width: '100%' }}>
+          <Box className="base-label">{t('common.total')} </Box>
+          <PaymentAmount amount={`${totalAmount} ${currency.symbol}`} sx={{ fontSize: '16px' }} />
+        </Stack>
+        {headlines.then && headlines.showThen && (
+          <Typography
+            component="div"
+            sx={{ fontSize: '0.9rem', color: 'text.lighter', textAlign: 'right', margin: '-2px 0 8px' }}>
+            {headlines.then}
+          </Typography>
         )}
       </Stack>
     </Fade>