@blocklet/payment-react 1.14.29 → 1.14.31

package/src/components/truncated-text.tsx

@@ -0,0 +1,41 @@
+import { Tooltip, TooltipProps, tooltipClasses } from '@mui/material';
+import { styled } from '@mui/system';
+import { truncateText } from '../libs/util';
+
+const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))({
+  [`& .${tooltipClasses.tooltip}`]: {
+    fontSize: 11,
+    maxHeight: 120,
+    maxWidth: 500,
+    overflowY: 'auto',
+  },
+});
+
+interface TruncatedTextProps {
+  text?: string;
+  maxLength?: number;
+  useWidth?: boolean;
+}
+
+export default function TruncatedText({ text = '', maxLength = 100, useWidth = false }: TruncatedTextProps) {
+  if (!text) {
+    return null;
+  }
+  const truncatedText = truncateText(text, maxLength, useWidth);
+  if (!truncatedText.endsWith('...')) {
+    return <span>{truncatedText}</span>;
+  }
+  return (
+    <CustomTooltip title={text} placement="bottom" enterTouchDelay={0}>
+      <span title={text}>{truncatedText}</span>
+    </CustomTooltip>
+  );
+}
+
+TruncatedText.defaultProps = {
+  useWidth: false,
+  text: '',
+  maxLength: 100,
+};

package/src/history/invoice/list.tsx

@@ -126,7 +126,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     {
       label: t('common.amount'),
       name: 'total',
-      width: 60,
+      width: 80,
       align: 'right',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
@@ -191,9 +191,8 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     },
     {
       label: t('common.status'),
-      name: 'created_at',
+      name: 'status',
       options: {
-        sort: true,
         customBodyRenderLite: (val: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
           const link = getInvoiceLink(invoice, action);
@@ -396,7 +395,12 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                 <Box flex={1} textAlign="right">
                   {action ? (
                     link.connect ? (
-                      <Button variant="contained" color="primary" size="small" onClick={() => onPay(invoice.id)}>
+                      <Button
+                        variant="contained"
+                        color="primary"
+                        size="small"
+                        onClick={() => onPay(invoice.id)}
+                        sx={{ whiteSpace: 'nowrap' }}>
                         {t('payment.customer.invoice.pay')}
                       </Button>
                     ) : (
@@ -406,6 +410,7 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                         size="small"
                         href={link.url}
                         target={link.external ? '_blank' : target}
+                        sx={{ whiteSpace: 'nowrap' }}
                         rel="noreferrer">
                         {t('payment.customer.invoice.pay')}
                       </Button>

package/src/index.ts

@@ -25,6 +25,7 @@ import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 import PricingItem from './components/pricing-item';
 import CountrySelect from './components/country-select';
+import TruncatedText from './components/truncated-text';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -65,4 +66,5 @@ export {
   PricingItem,
   CountrySelect,
   Table,
+  TruncatedText,
 };

package/src/libs/util.ts

@@ -19,6 +19,8 @@ import { BN, fromUnitToToken } from '@ocap/util';
 import omit from 'lodash/omit';
 import trimEnd from 'lodash/trimEnd';
 import numbro from 'numbro';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import stringWidth from 'string-width';
 import { defaultCountries } from 'react-international-phone';
 import { joinURL } from 'ufo';
 
@@ -1042,3 +1044,42 @@ export function getWordBreakStyle(value: any): 'break-word' | 'break-all' {
   }
   return 'break-all';
 }
+
+export function isMobileSafari() {
+  const ua = navigator.userAgent.toLowerCase();
+  const isSafari = ua.indexOf('safari') > -1 && ua.indexOf('chrome') === -1;
+  const isMobile = ua.indexOf('mobile') > -1 || /iphone|ipad|ipod/.test(ua);
+  const isIOS = /iphone|ipad|ipod/.test(ua);
+  return isSafari && isMobile && isIOS;
+}
+
+export function truncateText(text: string, maxLength: number, useWidth: boolean = false): string {
+  if (!text || !maxLength) {
+    return text;
+  }
+
+  if (!useWidth) {
+    if (text.length <= maxLength) {
+      return text;
+    }
+    return `${text.substring(0, maxLength)}...`;
+  }
+
+  let width = 0;
+  let truncated = '';
+
+  for (let i = 0; i < text.length; i++) {
+    const charWidth = stringWidth(text.charAt(i));
+    if (width + charWidth > maxLength) {
+      break;
+    }
+    truncated += text.charAt(i);
+    width += charWidth;
+  }
+
+  if (truncated === text) {
+    return truncated;
+  }
+
+  return `${truncated}...`;
+}

package/src/locales/en.tsx

@@ -208,6 +208,8 @@ export default flat({
         comment: 'Any additional feedback?',
         description:
           'Your subscription will be canceled, but it is still available until the end of your current billing period on {date}',
+        trialDescription:
+          'Free trial subscriptions will be canceled immediately and no longer available, confirm to continue',
         feedback: {
           tip: 'We would love your feedback, it will help us improve our service',
           too_expensive: 'The service is too expensive',
@@ -316,6 +318,7 @@ export default flat({
         cancel: 'Subscription cancel',
         manual: 'Manual invoice',
         upcoming: 'Upcoming invoice',
+        slashStake: 'Slash stake',
       },
     },
   },

package/src/locales/zh.tsx

@@ -204,6 +204,7 @@ export default flat({
         title: '取消您的订阅',
         comment: '你还有其他反馈么？',
         description: '您的订阅将被取消，但仍然可用直到您当前计费周期结束于{date}',
+        trialDescription: '免费试用的订阅将被立即取消，不再可用，确认是否继续',
         feedback: {
           tip: '我们希望听到您的反馈，这将帮助我们改进我们的服务',
           too_expensive: '服务费用太高',
@@ -307,6 +308,7 @@ export default flat({
         cancel: '订阅取消',
         manual: '人工账单',
         upcoming: '未来账单',
+        slashStake: '罚没质押',
       },
     },
   },

package/src/payment/form/index.tsx

@@ -11,16 +11,17 @@ import type {
   TPaymentMethodExpanded,
 } from '@blocklet/payment-types';
 import { LoadingButton } from '@mui/lab';
-import { Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
+import { Box, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { joinURL } from 'ufo';
 import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
 
+import { isEmpty } from 'lodash';
 import ConfirmDialog from '../../components/confirm';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
@@ -39,6 +40,7 @@ import AddressForm from './address';
 import CurrencySelector from './currency';
 import PhoneInput from './phone';
 import StripeCheckout from './stripe';
+import { useMobile } from '../../hooks/mobile';
 
 const phoneUtil = PhoneNumberUtil.getInstance();
 
@@ -97,9 +99,17 @@ export default function PaymentForm({
 }: PageData) {
   // const theme = useTheme();
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription('events');
-  const { control, getValues, setValue, handleSubmit } = useFormContext();
+  const {
+    control,
+    getValues,
+    setValue,
+    handleSubmit,
+    formState: { errors },
+  } = useFormContext();
+  const errorRef = useRef<HTMLDivElement | null>(null);
   const quantityInventoryStatus = useMemo(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -236,6 +246,12 @@ export default function PaymentForm({
     }
   };
 
+  useEffect(() => {
+    if (errorRef.current && !isEmpty(errors) && isMobile) {
+      errorRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [errors, isMobile]);
+
   const onUserLoggedIn = async () => {
     const { data: profile } = await api.get('/api/customers/me?fallback=1');
     if (profile) {
@@ -345,6 +361,9 @@ export default function PaymentForm({
   };
 
   const onAction = () => {
+    if (errorRef.current && !isEmpty(errors) && isMobile) {
+      errorRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
     if (session?.user) {
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
@@ -428,7 +447,13 @@ export default function PaymentForm({
             {/* <Typography sx={{ color: 'text.secondary', fontWeight: 600 }}>{t('payment.checkout.contact')}</Typography> */}
             {/* {isColumnLayout || mode !== 'standalone' ? null : <UserButtons />} */}
           </Stack>
-          <Stack direction="column" className="cko-payment-form" spacing={0} sx={{ flex: 1, overflow: 'auto' }}>
+          <Stack
+            direction="column"
+            className="cko-payment-form"
+            id="cko-payment-form"
+            spacing={0}
+            ref={!isEmpty(errors) ? (errorRef as any) : undefined}
+            sx={{ flex: 1, overflow: 'auto' }}>
             <FormLabel className="base-label">{t('payment.checkout.customer.name')}</FormLabel>
             <FormInput
               name="customer_name"
@@ -481,17 +506,20 @@ export default function PaymentForm({
       <Divider sx={{ mt: 2.5, mb: 2.5 }} />
       <Fade in>
         <Stack className="cko-payment-submit">
-          <LoadingButton
-            variant="contained"
-            color="primary"
-            size="large"
-            className="cko-submit-button"
-            onClick={onAction}
-            fullWidth
-            disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable}
-            loading={state.submitting || state.paying}>
-            {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
-          </LoadingButton>
+          <Box className="cko-payment-submit-btn">
+            <LoadingButton
+              variant="contained"
+              color="primary"
+              size="large"
+              className="cko-submit-button"
+              onClick={onAction}
+              fullWidth
+              disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable}
+              loading={state.submitting || state.paying}>
+              {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
+            </LoadingButton>
+          </Box>
+
           {['subscription', 'setup'].includes(checkoutSession.mode) && (
             <Typography sx={{ mt: 2.5, color: 'text.lighter', fontSize: '0.9rem', lineHeight: '1.1rem' }}>
               {t('payment.checkout.confirm', { payee })}

package/src/payment/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/indent */
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
@@ -21,7 +22,7 @@ import type { LiteralUnion } from 'type-fest';
 
 import { usePaymentContext } from '../contexts/payment';
 import api from '../libs/api';
-import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../libs/util';
+import { findCurrency, formatError, getStatementDescriptor, isMobileSafari, isValidCountry } from '../libs/util';
 import { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
@@ -86,6 +87,25 @@ function PaymentInner({
     },
   });
 
+  useEffect(() => {
+    if (!isMobileSafari()) {
+      return () => {};
+    }
+    let scrollTop = 0;
+    const focusinHandler = () => {
+      scrollTop = window.scrollY;
+    };
+    const focusoutHandler = () => {
+      window.scrollTo(0, scrollTop);
+    };
+    document.body.addEventListener('focusin', focusinHandler);
+    document.body.addEventListener('focusout', focusoutHandler);
+    return () => {
+      document.body.removeEventListener('focusin', focusinHandler);
+      document.body.removeEventListener('focusout', focusoutHandler);
+    };
+  }, []);
+
   const currencyId = useWatch({ control: methods.control, name: 'payment_currency', defaultValue: defaultCurrencyId });
   const currency =
     (findCurrency(paymentMethods as TPaymentMethodExpanded[], currencyId as string) as TPaymentCurrency) ||
@@ -260,7 +280,9 @@ export default function Payment({
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
   const [delay, setDelay] = useState(false);
+  const { isMobile } = useMobile();
   const hideSummaryCard = mode.endsWith('-minimal') || !showCheckoutSummary;
+  const isMobileSafariEnv = isMobileSafari();
 
   useEffect(() => {
     setTimeout(() => {
@@ -342,11 +364,15 @@ export default function Payment({
       />
     );
   };
+
   return (
     <Stack
       display="flex"
       flexDirection="column"
-      sx={{ height: mode === 'standalone' ? '100vh' : 'auto', overflow: 'hidden' }}>
+      sx={{
+        height: mode === 'standalone' ? '100vh' : 'auto',
+        overflow: isMobileSafariEnv ? 'visible' : 'hidden',
+      }}>
       {mode === 'standalone' ? (
         <Header
           meta={undefined}
@@ -359,7 +385,45 @@ export default function Payment({
           sx={{ borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)' }}
         />
       ) : null}
-      <Root mode={mode} sx={{ flex: 1 }}>
+      <Root
+        mode={mode}
+        sx={{
+          flex: 1,
+          overflow: {
+            xs: isMobileSafariEnv ? 'visible' : 'auto',
+            md: 'hidden',
+          },
+          ...(isMobile && mode === 'standalone'
+            ? {
+                '.cko-payment-submit-btn': {
+                  position: 'fixed',
+                  bottom: 20,
+                  left: 0,
+                  right: 0,
+                  zIndex: 999,
+                  background: '#fff',
+                  padding: '10px',
+                  textAlign: 'center',
+                  button: {
+                    color: '#fff',
+                    maxWidth: 542,
+                  },
+                },
+                '.cko-footer': {
+                  position: 'fixed',
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  zIndex: 999,
+                  background: '#fff',
+                  marginBottom: 0,
+                },
+                '.cko-payment': {
+                  paddingBottom: '100px',
+                },
+              }
+            : {}),
+        }}>
         {goBack && (
           <ArrowBackOutlined
             sx={{ mr: 0.5, color: 'text.secondary', alignSelf: 'flex-start', margin: '16px 0', cursor: 'pointer' }}
@@ -517,7 +581,6 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    background: ${(props) => (props.mode === 'standalone' ? 'var(--backgrounds-bg-subtle, #F9FAFB)' : 'transparent')};
     padding-top: 0;
     overflow: auto;
     &:before {
@@ -526,7 +589,8 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
     .cko-container {
       flex-direction: column;
       align-items: center;
-      gap: 32px;
+      justify-content: flex-start;
+      gap: 0;
       overflow: visible;
       min-width: 200px;
     }
@@ -539,6 +603,7 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
       width: 100%;
       height: fit-content;
       flex: none;
+      border-top: 1px solid var(--stroke-border-base, #eff1f5);
       &:before {
         display: none;
       }

package/src/payment/summary.tsx

@@ -335,10 +335,7 @@ export default function PaymentSummary({
             <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' }}>
+                <Tooltip title={t('payment.checkout.stakingConfirm')} placement="top" sx={{ maxWidth: '150px' }}>
                   <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
                 </Tooltip>
               </Stack>
@@ -347,10 +344,7 @@ export default function PaymentSummary({
             <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' }}>
+                <Tooltip title={t('payment.checkout.staking.tooltip')} placement="top" sx={{ maxWidth: '150px' }}>
                   <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
                 </Tooltip>
               </Stack>

package/src/theme/index.tsx

@@ -112,6 +112,11 @@ export function PaymentThemeProvider({
           enterTouchDelay: 3000,
           leaveTouchDelay: 100,
         },
+        styleOverrides: {
+          tooltip: {
+            fontSize: '0.875rem',
+          },
+        },
       },
       MuiPopover: {
         styleOverrides: {