payment-kit 1.15.4 → 1.15.6

package/src/components/payment-link/before-pay.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import { useSearchParams } from 'react-router-dom';
 
@@ -29,6 +29,7 @@ export default function BeforePay({
   const items = useFieldArray({ control, name: 'line_items' });
   const includeFreeTrial = useWatch({ control, name: 'include_free_trial' });
   const [state, setState] = useState({ creating: false });
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (items.fields.length) {
@@ -56,6 +57,14 @@ export default function BeforePay({
           setValue('invoice_creation.enabled', true);
         }
       }
+      setTimeout(() => {
+        if (containerRef.current) {
+          containerRef.current.scrollTo({
+            top: containerRef.current.scrollHeight,
+            behavior: 'smooth',
+          });
+        }
+      }, 0);
     }
   };
 
@@ -87,35 +96,38 @@ export default function BeforePay({
         {t('admin.paymentLink.products')} ({getValues().line_items.length})
       </Typography>
       <Stack spacing={2} sx={{ width: '100%' }}>
-        {items.fields.map((item, index) => {
-          // @ts-ignore
-          const product = getProductByPriceId(products, item.price_id);
-          if (!product) {
-            return null;
-          }
+        <Stack direction="column" sx={{ maxHeight: 500, width: '100%', overflowY: 'auto', gap: 2 }} ref={containerRef}>
+          {items.fields.map((item, index) => {
+            // @ts-ignore
+            const product = getProductByPriceId(products, item.price_id);
+            if (!product) {
+              return null;
+            }
+
+            return (
+              <LineItem
+                key={item.id}
+                // @ts-ignore
+                valid={isPriceAligned(items.fields, products, index).aligned}
+                prefix={`line_items.${index}`}
+                product={product}
+                onRemove={() => items.remove(index)}
+                onUpdate={refresh}
+              />
+            );
+          })}
+          {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).recurring) && (
+            <Typography color="error" fontSize="small">
+              {t('admin.paymentLink.recurringNotAligned')}
+            </Typography>
+          )}
+          {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).currency) && (
+            <Typography color="error" fontSize="small">
+              {t('admin.paymentLink.currencyNotAligned')}
+            </Typography>
+          )}
+        </Stack>
 
-          return (
-            <LineItem
-              key={item.id}
-              // @ts-ignore
-              valid={isPriceAligned(items.fields, products, index).aligned}
-              prefix={`line_items.${index}`}
-              product={product}
-              onRemove={() => items.remove(index)}
-              onUpdate={refresh}
-            />
-          );
-        })}
-        {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).recurring) && (
-          <Typography color="error" fontSize="small">
-            {t('admin.paymentLink.recurringNotAligned')}
-          </Typography>
-        )}
-        {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).currency) && (
-          <Typography color="error" fontSize="small">
-            {t('admin.paymentLink.currencyNotAligned')}
-          </Typography>
-        )}
         <ProductSelect
           mode={items.fields.length ? 'waiting' : 'selecting'}
           onSelect={onProductSelected}

package/src/components/pricing-table/product-settings.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Checkbox, FormControlLabel, MenuItem, Select, Stack, Typography } from '@mui/material';
 import { useSetState } from 'ahooks';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import { useSearchParams } from 'react-router-dom';
 
@@ -23,6 +23,7 @@ export default function PricingTableProductSettings({
   const items = useFieldArray({ control, name: 'items' });
   const [state, setState] = useSetState({ creating: false });
   const highlight = useWatch({ control, name: 'highlight' });
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (items.fields.length) {
@@ -83,6 +84,14 @@ export default function PricingTableProductSettings({
           cross_sell_behavior: 'auto',
         });
       }
+      setTimeout(() => {
+        if (containerRef.current) {
+          containerRef.current.scrollTo({
+            top: containerRef.current.scrollHeight,
+            behavior: 'smooth',
+          });
+        }
+      }, 0);
     }
   };
 
@@ -115,31 +124,34 @@ export default function PricingTableProductSettings({
         {t('admin.paymentLink.products')}
       </Typography>
       <Stack spacing={2} sx={{ width: '100%' }}>
-        {grouped.map((item) => {
-          const [productId, prices] = item;
-          // @ts-ignore
-          const product = products.find((x) => x.id === productId);
-          if (!product) {
-            return null;
-          }
+        <Stack direction="column" sx={{ maxHeight: 800, width: '100%', overflowY: 'auto', gap: 2 }} ref={containerRef}>
+          {grouped.map((item) => {
+            const [productId, prices] = item;
+            // @ts-ignore
+            const product = products.find((x) => x.id === productId);
+            if (!product) {
+              return null;
+            }
+
+            return (
+              <ProductItem
+                key={productId}
+                // @ts-ignore
+                valid={prices.every((x) => isPriceCurrencyAligned(items.fields, products, x.index))}
+                product={product}
+                prices={prices}
+                onUpdate={refresh}
+                onRemove={(i: number) => items.remove(i)}
+              />
+            );
+          })}
+          {items.fields.some((_, index) => !isPriceCurrencyAligned(items.fields as any[], products, index)) && (
+            <Typography color="error" fontSize="small">
+              {t('admin.paymentLink.currencyNotAligned')}
+            </Typography>
+          )}
+        </Stack>
 
-          return (
-            <ProductItem
-              key={productId}
-              // @ts-ignore
-              valid={prices.every((x) => isPriceCurrencyAligned(items.fields, products, x.index))}
-              product={product}
-              prices={prices}
-              onUpdate={refresh}
-              onRemove={(i: number) => items.remove(i)}
-            />
-          );
-        })}
-        {items.fields.some((_, index) => !isPriceCurrencyAligned(items.fields as any[], products, index)) && (
-          <Typography color="error" fontSize="small">
-            {t('admin.paymentLink.currencyNotAligned')}
-          </Typography>
-        )}
         <ProductSelect
           mode={items.fields.length ? 'waiting' : 'selecting'}
           onSelect={onProductSelected}

package/src/pages/admin/index.tsx

@@ -48,7 +48,6 @@ function Admin() {
 
   const onLivemodeChange = (e: any) => {
     settings.setLivemode(!e.target.checked);
-    settings.refresh();
   };
 
   const onTabChange = (newTab: string) => {

package/src/pages/admin/payments/intents/detail.tsx

@@ -20,6 +20,7 @@ import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { Link } from 'react-router-dom';
 
+import { startCase } from 'lodash';
 import Copyable from '../../../../components/copyable';
 import CustomerLink from '../../../../components/customer/link';
 import EventList from '../../../../components/event/list';
@@ -237,7 +238,19 @@ export default function PaymentIntentDetail(props: { id: string }) {
                   <Stack direction="row" alignItems="center" spacing={1}>
                     <Status label={data.status} color={getPaymentIntentStatusColor(data.status)} />
                     {data.last_payment_error && (
-                      <Tooltip title={<pre>{JSON.stringify(data.last_payment_error, null, 2)}</pre>}>
+                      <Tooltip
+                        title={
+                          <pre style={{ whiteSpace: 'break-spaces' }}>
+                            {JSON.stringify(
+                              {
+                                ...data.last_payment_error,
+                                type: startCase(data.last_payment_error?.type),
+                              },
+                              null,
+                              2
+                            )}
+                          </pre>
+                        }>
                         <InfoOutlined fontSize="small" color="error" />
                       </Tooltip>
                     )}

package/src/pages/admin/payments/payouts/detail.tsx

@@ -228,7 +228,12 @@ export default function PayoutDetail(props: { id: string }) {
                   <Stack direction="row" alignItems="center" spacing={1}>
                     <Status label={data.status} color={getPayoutStatusColor(data.status)} />
                     {data.last_attempt_error && (
-                      <Tooltip title={<pre>{JSON.stringify(data.last_attempt_error, null, 2)}</pre>}>
+                      <Tooltip
+                        title={
+                          <pre style={{ whiteSpace: 'break-spaces' }}>
+                            {JSON.stringify(data.last_attempt_error, null, 2)}
+                          </pre>
+                        }>
                         <InfoOutlined fontSize="small" color="error" />
                       </Tooltip>
                     )}

package/src/pages/admin/products/pricing-tables/create.tsx

@@ -60,6 +60,9 @@ export default function CreatePricingTable() {
       Toast.error(t('admin.paymentLink.noProducts'));
       return;
     }
+    if (Object.values(errors).some((v) => v)) {
+      return;
+    }
 
     api
       .post('/api/pricing-tables', data)

package/src/pages/checkout/pricing-table.tsx

@@ -1,20 +1,22 @@
-import { CheckoutTable } from '@blocklet/payment-react';
+import { CheckoutTable, isMobileSafari } from '@blocklet/payment-react';
 import Header from '@blocklet/ui-react/lib/Header';
-import { Box } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 
 type Props = {
   id: string;
 };
 
 export default function PricingTablePage({ id }: Props) {
+  const isMobileSafariEnv = isMobileSafari();
   return (
     <Box
       sx={{
         width: '100vw',
+        maxHeight: '100vh',
         minHeight: '90vh',
-        pb: 4,
         display: 'flex',
         flexDirection: 'column',
+        overflow: isMobileSafariEnv ? 'visible' : 'hidden',
       }}>
       <Header
         meta={undefined}
@@ -24,17 +26,34 @@ export default function PricingTablePage({ id }: Props) {
         theme={undefined}
         hideNavMenu={undefined}
         maxWidth={false}
+        sx={{ borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)' }}
       />
 
-      <Box
+      <Stack
         sx={{
           pt: {
             xs: 0,
-            md: '60px',
+          },
+          overflow: {
+            xs: isMobileSafariEnv ? 'visible' : 'hidden',
+            md: 'hidden',
           },
         }}>
-        <CheckoutTable id={id} mode="standalone" />
-      </Box>
+        <CheckoutTable
+          id={id}
+          mode="standalone"
+          theme={{
+            sx: {
+              overflow: {
+                xs: 'auto',
+                md: 'hidden',
+              },
+              display: 'flex',
+              flexDirection: 'column',
+            },
+          }}
+        />
+      </Stack>
     </Box>
   );
 }

package/src/pages/customer/index.tsx

@@ -391,7 +391,7 @@ export default function CustomerHome() {
         />
         <InfoRow
           label={t('admin.customer.address.city')}
-          value={<TruncatedText text={data.address?.city} maxLength={280} useWidth />}
+          value={data.address?.city && <TruncatedText text={data.address?.city} maxLength={280} useWidth />}
           // value={data.address?.city}
           sizes={[1, 1]}
           alignItems="normal"
@@ -399,14 +399,14 @@ export default function CustomerHome() {
         />
         <InfoRow
           label={t('admin.customer.address.line1')}
-          value={<TruncatedText text={data.address?.line1} maxLength={280} useWidth />}
+          value={data.address?.line1 && <TruncatedText text={data.address?.line1} maxLength={280} useWidth />}
           sizes={[1, 1]}
           alignItems="normal"
           direction="column"
         />
         <InfoRow
           label={t('admin.customer.address.line2')}
-          value={<TruncatedText text={data.address?.line2} maxLength={280} useWidth />}
+          value={data.address?.line2 && <TruncatedText text={data.address?.line2} maxLength={280} useWidth />}
           sizes={[1, 1]}
           alignItems="normal"
           direction="column"

package/src/pages/customer/invoice/past-due.tsx

@@ -6,10 +6,11 @@ import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest } from 'ahooks';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { joinURL } from 'ufo';
 
+import { isEmpty } from 'lodash';
 import SectionHeader from '../../../components/section/header';
 import { useSessionContext } from '../../../contexts/session';
 import api from '../../../libs/api';
@@ -24,6 +25,7 @@ export default function CustomerInvoicePastDue() {
   const { events } = useSessionContext();
   const { connect } = usePaymentContext();
   const [params] = useSearchParams();
+  const [alertVisible, setAlertVisible] = useState(true);
 
   const { loading, error, data, runAsync } = useRequest(fetchData);
 
@@ -71,6 +73,14 @@ export default function CustomerInvoicePastDue() {
     });
   };
 
+  const onTableDataChange = (tableData: any) => {
+    if (isEmpty(tableData) || tableData?.count === 0) {
+      setAlertVisible(false);
+      return;
+    }
+    setAlertVisible(true);
+  };
+
   return (
     <Stack direction="column" spacing={3} sx={{ my: 2 }}>
       <Stack direction="row" alignItems="center" justifyContent="space-between">
@@ -86,7 +96,8 @@ export default function CustomerInvoicePastDue() {
         </Stack>
       </Stack>
       <Root direction="column" spacing={3}>
-        <Alert severity="error">{t('payment.customer.pastDue.warning')}</Alert>
+        {alertVisible && <Alert severity="error">{t('payment.customer.pastDue.warning')}</Alert>}
+
         <Box className="section">
           <SectionHeader title={t('payment.customer.pastDue.invoices')} mb={0}>
             {subscriptionId && currencyId && (
@@ -105,6 +116,7 @@ export default function CustomerInvoicePastDue() {
               target="_blank"
               action="pay"
               type="table"
+              onTableDataChange={onTableDataChange}
             />
           </Box>
         </Box>