@blocklet/payment-react 1.14.21 → 1.14.22

package/src/locales/en.tsx

@@ -62,7 +62,7 @@ export default flat({
     continue: 'Continue',
     qty: 'Qty {count}',
     each: '{unit} each',
-    trial: 'Free for {count} days',
+    trial: "Free for {count} day{count > 1 ? 's' : ''}",
     billed: 'billed {rule}',
     metered: 'based on usage',
     hour: 'hour',
@@ -111,11 +111,13 @@ export default flat({
         subscription: 'View subscription',
         invoice: 'View invoice',
       },
+      paymentRequired: 'Payment Required',
       staking: {
         title: 'Staking Required',
         tooltip:
           'Staking is used to ensure that future invoices can be paid normally. Revoking the staking from DID Wallet means canceling the subscription.',
       },
+      stakingConfirm: 'In this payment, the staked amount is separate from the product cost.',
       donation: {
         between: 'Please enter an amount between {min} and {max}.',
         custom: 'Custom Amount',
@@ -132,7 +134,9 @@ export default flat({
       sub1: 'Subscribe to {name}',
       sub2: 'Subscribe to {name} and {count} more',
       then: 'Then {subscription} {recurring}',
-      free: '{count} days free',
+      meteredThen: 'Then {recurring} based on usage',
+      metered: '{recurring} based on usage',
+      free: "{count} day{count > 1 ? 's' : ''} free",
       least: 'continue with at least',
       completed: {
         payment: 'Thanks for your purchase',
@@ -141,8 +145,7 @@ export default flat({
         donate: 'Thanks for your support',
         tip: 'A payment to {payee} has been completed. You can view the details of this payment in your account.',
       },
-      confirm:
-        'By confirming your subscription, you allow {payee} to charge your account or slashing your staking for this and future payments in accordance with their terms. You can always cancel your subscription, or revoking your staking from DID Wallet.',
+      confirm: 'Confirming allows {payee} to charge or reduce your staking. You can cancel or revoke staking anytime.',
       required: 'Required',
       invalid: 'Invalid',
       billing: {
@@ -185,12 +188,16 @@ export default flat({
         title: 'Nothing to show here',
         description: 'Seems this checkoutSession is not configured properly',
       },
+      orderSummary: 'Order Summary',
+      paymentDetails: 'Payment Details',
+      productListTotal: 'Includes {total} items',
     },
     customer: {
       payments: 'Payment History',
       invoices: 'Invoice History',
       details: 'Details',
       summary: 'Summary',
+      specifics: 'Specifics',
       update: 'Update Information',
       empty: 'Seems you do not have any subscriptions or payments here',
       cancel: {
@@ -272,12 +279,16 @@ export default flat({
         renewError: 'Failed to renew the subscription',
         empty: 'There are no invoices',
         next: 'No invoices yet, next invoice will be generated on {date}',
+        invoiceNumber: 'Invoice Number',
+        emptyList: 'No Invoice',
       },
       payment: {
         empty: 'There are no payments',
+        emptyList: 'No Payment',
       },
       refund: {
         empty: 'There are no refunds',
+        emptyList: 'No Refund',
       },
       subscriptions: {
         plan: 'Plan',
@@ -311,4 +322,7 @@ export default flat({
       [RefundType.stakeReturn]: 'Stake Return',
     },
   },
+  empty: {
+    records: 'No matching records found',
+  },
 });

package/src/locales/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable no-prototype-builtins */
+import { template } from 'lodash';
 import en from './en';
 import zh from './zh';
 
@@ -8,9 +9,15 @@ export const translations = {
   en,
 };
 
-export const replace = (template: string, data: Record<string, any> = {}) =>
-  template.replace(/{(\w*)}/g, (_, key) => (data.hasOwnProperty(key) ? data[key] : ''));
-
+const replace = (t: string, data: Record<string, any> = {}): string => {
+  try {
+    const compiled = template(t, { interpolate: /{([\s\S]+?)}/g, escape: /{([\s\S]+?)}/g });
+    return compiled(data);
+  } catch (e) {
+    console.error(`Error evaluating template: ${t}`, e);
+    return '';
+  }
+};
 export const createTranslator = ({ fallbackLocale = 'en' }: { fallbackLocale?: string }, langs: any = translations) => {
   return (key: string, locale = fallbackLocale, data: Record<string, any> = {}) => {
     if (!langs[locale] || !langs[locale][key]) {

package/src/locales/zh.tsx

@@ -111,10 +111,12 @@ export default flat({
         subscription: '查看订阅',
         invoice: '查看账单',
       },
+      paymentRequired: '支付数量',
       staking: {
         title: '质押数量',
         tooltip: '质押相当于保证金，用于确保未来的账单能够正常扣款，如果你从 DID Wallet 撤销质押，订阅也会被取消。',
       },
+      stakingConfirm: '在此支付中，质押金额与产品费用分开',
       donation: {
         between: '金额必须大于 {min} 且小于 {max}',
         custom: '输入金额',
@@ -131,7 +133,9 @@ export default flat({
       sub1: '订阅 {name}',
       sub2: '订阅 {name} 等{count}个产品',
       then: '然后 {subscription} {recurring}',
-      free: '{count} 天',
+      meteredThen: '然后{recurring}按用量计费',
+      metered: '{recurring}按用量计费',
+      free: '免费试用 {count} 天',
       least: '至少',
       completed: {
         payment: '感谢您的购买',
@@ -140,8 +144,7 @@ export default flat({
         donate: '感谢您的支持',
         tip: '向{payee}的付款已完成。您可以在您的账户中查看此付款的详细信息。',
       },
-      confirm:
-        '通过确认您的订阅，您允许{payee}按照其条款对您的账户进行付款或者罚没您的质押。您随时可以取消您的订阅，或者撤销质押。',
+      confirm: '确认允许{payee}对您的账户进行付款或者罚没您的质押。您随时可以取消您的订阅，或者撤销质押。',
       required: '必填项',
       invalid: '无效',
       billing: {
@@ -182,12 +185,16 @@ export default flat({
         title: '没有任何购买项目',
         description: '可能这个付款链接没有正确配置',
       },
+      orderSummary: '订单概览',
+      paymentDetails: '支付信息',
+      productListTotal: '包括 {total} 项',
     },
     customer: {
       payments: '支付历史',
       invoices: '账单历史',
       details: '账户详情',
       summary: '计费摘要',
+      specifics: '具体信息',
       update: '更新客户信息',
       empty: '看起来您在这里没有任何订阅或支付',
       cancel: {
@@ -264,12 +271,16 @@ export default flat({
         renewError: '订阅恢复失败',
         empty: '没有任何账单',
         next: '还没有账单，下次账单将在 {date} 生成',
+        invoiceNumber: '账单编号',
+        emptyList: '没有账单',
       },
       payment: {
         empty: '没有支付记录',
+        emptyList: '没有支付记录',
       },
       refund: {
         empty: '没有退款记录',
+        emptyList: '没有退款记录',
       },
       subscriptions: {
         plan: '订阅',
@@ -303,4 +314,7 @@ export default flat({
       [RefundType.stakeReturn]: '退押金',
     },
   },
+  empty: {
+    records: '没有找到匹配的记录',
+  },
 });

package/src/payment/error.tsx

@@ -13,7 +13,7 @@ type Props = {
 function getHeightStyle(mode: ModeType | undefined): any {
   switch (mode) {
     case 'standalone':
-      return { height: '100vh' }; // 独立模式下，高度为100vh
+      return { height: '100vh', maxHeight: '100%' }; // 独立模式下，高度为100vh
     default:
       return { height: 'auto', minHeight: 200 }; // 默认情况下，高度根据内容自动调整
   }
@@ -29,7 +29,7 @@ export default function PaymentError({ title, description, button, mode }: Props
         <Typography variant="body1" sx={{ mb: 2, textAlign: 'center' }}>
           {description}
         </Typography>
-        <Button variant="text" size="small" component={Link} href={window.blocklet?.appUrl}>
+        <Button variant="text" size="small" sx={{ color: 'text.link' }} component={Link} href={window.blocklet?.appUrl}>
           {button}
         </Button>
       </Stack>

package/src/payment/footer.tsx

@@ -2,7 +2,7 @@ import { Typography } from '@mui/material';
 
 export default function CheckoutFooter({ ...props }) {
   return (
-    <Typography color="text.secondary" fontSize={12} {...props}>
+    <Typography color="text.lighter" fontSize={12} {...props}>
       Powered by{' '}
       <Typography component="span" sx={{ fontWeight: 'bold', fontSize: 12 }}>
         ArcBlock

package/src/payment/form/address.tsx

@@ -1,53 +1,59 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Fade, Stack, Typography } from '@mui/material';
+import { Fade, FormLabel, InputAdornment, Stack, SxProps } from '@mui/material';
 import { Controller, useFormContext } from 'react-hook-form';
-import { CountrySelector } from 'react-international-phone';
-
 import FormInput from '../../components/input';
+import CountrySelect from '../../components/country-select';
 
 type Props = {
   mode: string;
   stripe: boolean;
+  sx?: SxProps;
+};
+
+AddressForm.defaultProps = {
+  sx: {},
 };
 
-export default function AddressForm({ mode, stripe }: Props) {
+export default function AddressForm({ mode, stripe, sx = {} }: Props) {
   const { t } = useLocaleContext();
-  const { control, setValue } = useFormContext();
+  const { control } = useFormContext();
 
   if (mode === 'required') {
     return (
       <Fade in>
-        <Stack className="cko-payment-address cko-payment-form">
-          <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>
-            {t(`payment.checkout.billing.${mode}`)}
-          </Typography>
+        <Stack className="cko-payment-address cko-payment-form" sx={sx}>
+          <FormLabel className="base-label">{t(`payment.checkout.billing.${mode}`)}</FormLabel>
           <Stack direction="column" className="cko-payment-form" spacing={0}>
             <Stack direction="row" spacing={0}>
-              <Controller
-                name="billing_address.country"
-                control={control}
-                render={({ field }) => (
-                  <CountrySelector
-                    selectedCountry={field.value}
-                    onSelect={({ iso2 }) => setValue(field.name, iso2)}
-                    buttonStyle={{
-                      width: '64px',
-                      height: '40px',
-                      border: '1px solid #ccc',
-                      marginLeft: -1,
-                      marginTop: -1,
-                    }}
-                  />
-                )}
-              />
               <FormInput
                 name="billing_address.postal_code"
                 rules={{ required: t('payment.checkout.required') }}
                 errorPosition="right"
                 variant="outlined"
                 placeholder={t('payment.checkout.billing.postal_code')}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Controller
+                        name="billing_address.country"
+                        control={control}
+                        render={({ field }) => (
+                          <CountrySelect
+                            {...field}
+                            sx={{
+                              '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                                borderColor: 'transparent',
+                              },
+                            }}
+                          />
+                        )}
+                      />
+                    </InputAdornment>
+                  ),
+                }}
               />
             </Stack>
+            <FormLabel className="base-label">{t('payment.checkout.billing.state')}</FormLabel>
             <FormInput
               name="billing_address.state"
               rules={{ required: t('payment.checkout.required') }}
@@ -55,6 +61,7 @@ export default function AddressForm({ mode, stripe }: Props) {
               variant="outlined"
               placeholder={t('payment.checkout.billing.state')}
             />
+            <FormLabel className="base-label">{t('payment.checkout.billing.line1')}</FormLabel>
             <FormInput
               name="billing_address.line1"
               rules={{ required: t('payment.checkout.required') }}
@@ -62,6 +69,7 @@ export default function AddressForm({ mode, stripe }: Props) {
               variant="outlined"
               placeholder={t('payment.checkout.billing.line1')}
             />
+            <FormLabel className="base-label">{t('payment.checkout.billing.city')}</FormLabel>
             <FormInput
               name="billing_address.city"
               rules={{ required: t('payment.checkout.required') }}
@@ -78,29 +86,10 @@ export default function AddressForm({ mode, stripe }: Props) {
   if (stripe) {
     return (
       <Fade in>
-        <Stack className="cko-payment-address cko-payment-form">
-          <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>
-            {t(`payment.checkout.billing.${mode}`)}
-          </Typography>
+        <Stack className="cko-payment-address cko-payment-form" sx={sx}>
+          <FormLabel className="base-label">{t(`payment.checkout.billing.${mode}`)}</FormLabel>
           <Stack direction="column" className="cko-payment-form" spacing={0}>
             <Stack direction="row" spacing={0}>
-              <Controller
-                name="billing_address.country"
-                control={control}
-                render={({ field }) => (
-                  <CountrySelector
-                    selectedCountry={field.value}
-                    onSelect={({ iso2 }) => setValue(field.name, iso2)}
-                    buttonStyle={{
-                      width: '64px',
-                      height: '40px',
-                      border: '1px solid #ccc',
-                      marginLeft: -1,
-                      marginTop: -1,
-                    }}
-                  />
-                )}
-              />
               <FormInput
                 name="billing_address.postal_code"
                 rules={{ required: t('payment.checkout.required') }}
@@ -108,6 +97,26 @@ export default function AddressForm({ mode, stripe }: Props) {
                 variant="outlined"
                 placeholder={t('payment.checkout.billing.postal_code')}
                 wrapperStyle={{ height: '40px' }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Controller
+                        name="billing_address.country"
+                        control={control}
+                        render={({ field }) => (
+                          <CountrySelect
+                            {...field}
+                            sx={{
+                              '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                                borderColor: 'transparent',
+                              },
+                            }}
+                          />
+                        )}
+                      />
+                    </InputAdornment>
+                  ),
+                }}
               />
             </Stack>
           </Stack>

package/src/payment/form/currency.tsx

@@ -1,5 +1,5 @@
 import type { TPaymentCurrency } from '@blocklet/payment-types';
-import { Avatar, Card, Stack, Typography } from '@mui/material';
+import { Avatar, Card, Radio, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 
 type Props = {
@@ -14,8 +14,9 @@ export default function CurrencySelector({ value, currencies, onChange }: Props)
       count={currencies.length}
       style={{
         display: currencies.length > 1 ? 'grid' : 'block',
-        gridTemplateColumns: '50% 50%',
         width: '100%',
+        gap: 12,
+        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
       }}>
       {currencies.map((x, i) => {
         const selected = i === value;
@@ -25,16 +26,26 @@ export default function CurrencySelector({ value, currencies, onChange }: Props)
             variant="outlined"
             onClick={() => onChange(i)}
             className={selected ? 'cko-payment-card' : 'cko-payment-card-unselect'}>
-            <Stack direction="row" alignItems="center">
-              <Avatar src={x.logo} alt={x.name} sx={{ width: 30, height: 30, marginRight: '10px' }} />
+            <Stack direction="row" alignItems="center" sx={{ position: 'relative' }}>
+              <Avatar src={x.logo} alt={x.name} sx={{ width: 40, height: 40, marginRight: '12px' }} />
               <div>
-                <Typography variant="h5" component="div" sx={{ fontSize: '18px' }}>
+                <Typography
+                  variant="h5"
+                  component="div"
+                  sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
                   {x.symbol}
                 </Typography>
-                <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+                <Typography sx={{ fontSize: 14 }} color="text.lighter" gutterBottom>
                   {(x as any).method.name}
                 </Typography>
               </div>
+              <Radio
+                checked={selected}
+                sx={{
+                  position: 'absolute',
+                  right: 0,
+                }}
+              />
             </Stack>
           </Card>
         );
@@ -46,32 +57,27 @@ export default function CurrencySelector({ value, currencies, onChange }: Props)
 const Root = styled<any>('section')`
   .cko-payment-card {
     position: relative;
-    border: 1px solid ${(props) => props.theme.palette.primary.main};
+    border: 1px solid var(--stroke-border-interactive, #0086ff);
     padding: 4px 8px;
-    margin: 8px 0 0;
     cursor: pointer;
+    background: var(--backgrounds-bg-field, #f9fafb);
   }
 
-  .cko-payment-card::before {
-    content: '';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    border: 12px solid ${(props) => props.theme.palette.primary.main};
-    border-top-color: transparent;
-    border-left-color: transparent;
-  }
+  // .cko-payment-card::before {
+  //   content: '';
+  //   position: absolute;
+  //   right: 0;
+  //   bottom: 0;
+  //   border: 12px solid ${(props) => props.theme.palette.primary.main};
+  //   border-top-color: transparent;
+  //   border-left-color: transparent;
+  // }
 
   .cko-payment-card-unselect {
     border: 1px solid #ddd;
     padding: 4px 8px;
-    margin: 8px 0 0;
     cursor: pointer;
-  }
-
-  .cko-payment-card:nth-child(odd),
-  .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: ${(props) => (props.count > 1 ? 8 : 0)}px;
+    background: var(--backgrounds-bg-field, #f9fafb);
   }
 
   .cko-payment-card::after {