payment-kit 1.13.45 → 1.13.47

package/src/components/section/header.tsx

@@ -14,6 +14,8 @@ export default function SectionHeader(props: Props) {
       direction="row"
       justifyContent="space-between"
       alignItems="center"
+      flexWrap="wrap"
+      gap={1}
       sx={{ mb: props.mb, pb: 1, width: 1, borderBottom: '1px solid #eee' }}>
       <Typography variant="h6" sx={{ fontWeight: 600 }}>
         {props.title}

package/src/components/status.tsx

@@ -6,7 +6,7 @@ export default function Status(props: ChipProps) {
       size="small"
       variant="outlined"
       {...props}
-      sx={{ ...(props.sx || {}), borderRadius: '4px', height: 20, lineHeight: 20, textTransform: 'capitalize' }}
+      sx={{ ...(props.sx || {}), borderRadius: '4px', height: 20, lineHeight: 1, textTransform: 'capitalize' }}
     />
   );
 }

package/src/libs/util.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/indent */
 import type {
   LineItem,
@@ -17,6 +18,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import { defaultCountries } from 'react-international-phone';
 
+import { t } from '../locales/index';
 import dayjs from './dayjs';
 
 export function getExplorerLink(chainHost: string, did: string, type: string) {
@@ -119,17 +121,18 @@ export const formatError = (err: any) => {
 
 export const formatProductPrice = (
   { prices, unit_label }: { prices: TPrice[]; unit_label: string },
-  currency: TPaymentCurrency
+  currency: TPaymentCurrency,
+  locale: string = 'en'
 ): string => {
   if (prices.length > 1) {
-    return `${prices.length} prices`;
+    return t('admin.price.count', locale, { count: prices.length });
   }
 
   if (prices.length === 1) {
-    return formatPrice(prices[0] as TPrice, currency, unit_label);
+    return formatPrice(prices[0] as TPrice, currency, unit_label, 1, true, locale);
   }
 
-  return 'No price';
+  return t('admin.price.empty', locale);
 };
 
 export const formatPrice = (
@@ -137,14 +140,15 @@ export const formatPrice = (
   currency: TPaymentCurrency,
   unit_label?: string,
   quantity: number = 1,
-  bn: boolean = true
+  bn: boolean = true,
+  locale: string = 'en'
 ) => {
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn
     ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString()
     : +unit * quantity;
   if (price?.type === 'recurring' && price.recurring) {
-    const recurring = formatRecurring(price.recurring, false, '/');
+    const recurring = formatRecurring(price.recurring, false, 'slash', locale);
 
     if (unit_label) {
       return `${amount} ${currency.symbol} / ${unit_label} ${recurring}`;
@@ -219,7 +223,12 @@ export function getStatementDescriptor(items: any[]) {
   return window.blocklet.appName;
 }
 
-export function formatRecurring(recurring: PriceRecurring, translate: boolean = true, separator = 'per') {
+export function formatRecurring(
+  recurring: PriceRecurring,
+  translate: boolean = true,
+  separator: string = 'per',
+  locale: string = 'en'
+) {
   const intervals = {
     hour: 'hourly',
     day: 'daily',
@@ -229,11 +238,15 @@ export function formatRecurring(recurring: PriceRecurring, translate: boolean =
   };
 
   if (+recurring.interval_count === 1) {
+    const interval = t(`common.${recurring.interval}`, locale);
     // @ts-ignore
-    return translate ? intervals[recurring.interval] : `${separator} ${recurring.interval}`;
+    return translate ? t(`common.${intervals[recurring.interval]}`, locale) : separator ? t(`common.${separator}`, locale, { interval }) : interval; // prettier-ignore
   }
 
-  return `every ${recurring.interval_count} ${recurring.interval}s`;
+  return t('common.recurring', locale, {
+    count: recurring.interval_count,
+    interval: t(`common.${recurring.interval}s`, locale),
+  });
 }
 
 export function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCurrency) {
@@ -257,11 +270,12 @@ export function getPriceCurrencyOptions(price: TPrice): PriceCurrency[] {
 export function formatLineItemPricing(
   item: TLineItemExpanded,
   currency: TPaymentCurrency,
-  trial: number
+  trial: number,
+  locale: string = 'en'
 ): { primary: string; secondary?: string; quantity: string } {
   const price = item.upsell_price || item.price;
 
-  let quantity = `Qty ${item.quantity}`;
+  let quantity = t('common.qty', locale, { count: item.quantity });
   if (price.recurring?.usage_type === 'metered' || +item.quantity === 1) {
     quantity = '';
   }
@@ -274,20 +288,20 @@ export function formatLineItemPricing(
 
   const appendUnit = (v: string, alt: string) => {
     if (price.product.unit_label) {
-      return `${v} / ${price.product.unit_label}`;
+      return `${v}/${price.product.unit_label}`;
     }
     if (price.recurring?.usage_type === 'metered' || item.quantity === 1) {
       return alt;
     }
 
-    return quantity ? `${unit} each` : '';
+    return quantity ? t('common.each', locale, { unit }) : '';
   };
 
   if (price.type === 'recurring' && price.recurring) {
     if (trial > 0) {
       return {
-        primary: `Free for ${trial} days`,
-        secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, '/')}`,
+        primary: t('common.trial', locale, { count: trial }),
+        secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, 'slash', locale)}`,
         quantity,
       };
     }
@@ -408,7 +422,8 @@ export function formatUpsellSaving(session: TCheckoutSessionExpanded, currency:
 
 export function formatCheckoutHeadlines(
   session: TCheckoutSessionExpanded,
-  currency: TPaymentCurrency
+  currency: TPaymentCurrency,
+  locale: string = 'en'
 ): {
   action: string;
   amount: string;
@@ -425,7 +440,7 @@ export function formatCheckoutHeadlines(
   // empty
   if (items.length === 0) {
     return {
-      action: 'No thing to pay',
+      action: t('checkout.empty', locale),
       amount: '0',
       then: '',
     };
@@ -435,21 +450,27 @@ export function formatCheckoutHeadlines(
 
   // all one time
   if (items.every((x) => x.price.type === 'one_time')) {
+    const action = t('checkout.pay', locale, { payee: brand });
     if (items.length > 1) {
-      return { action: `Pay ${brand}`, amount };
+      return { action, amount };
     }
 
-    return { action: `Pay ${brand}`, amount, then: '' };
+    return { action, amount, then: '' };
   }
 
   const item = items.find((x) => x.price.type === 'recurring');
-  const recurring = formatRecurring((item?.upsell_price || item?.price)?.recurring as PriceRecurring, false);
+  const recurring = formatRecurring(
+    (item?.upsell_price || item?.price)?.recurring as PriceRecurring,
+    false,
+    'per',
+    locale
+  );
 
   // all recurring
   if (items.every((x) => x.price.type === 'recurring')) {
     const hasMetered = items.some((x) => x.price.type === 'recurring' && x.price.recurring?.usage_type === 'metered');
     const subscription = [
-      hasMetered ? 'continue with at least' : '',
+      hasMetered ? t('checkout.least', locale) : '',
       fromUnitToToken(
         items.reduce((acc, x) => {
           if (x.price.recurring?.usage_type === 'metered') {
@@ -466,14 +487,14 @@ export function formatCheckoutHeadlines(
     if (items.length > 1) {
       if (trial > 0) {
         return {
-          action: `Try ${name} and ${items.length - 1} more`,
-          amount: `Free for ${trial} days`,
-          then: `Then ${subscription} ${recurring}`,
+          action: t('checkout.try2', locale, { name, count: items.length - 1 }),
+          amount: t('checkout.free', locale, { count: trial }),
+          then: t('checkout.then', locale, { subscription, recurring }),
         };
       }
 
       return {
-        action: `Subscribe to ${name} and ${items.length - 1} more`,
+        action: t('checkout.sub2', locale, { name, count: items.length - 1 }),
         amount,
         then: recurring,
       };
@@ -481,14 +502,14 @@ export function formatCheckoutHeadlines(
 
     if (trial > 0) {
       return {
-        action: `Try ${name}`,
-        amount: `${trial} days free`,
-        then: `Then ${subscription} ${recurring}`,
+        action: t('checkout.try1', locale, { name }),
+        amount: t('checkout.free', locale, { count: trial }),
+        then: t('checkout.then', locale, { subscription, recurring }),
       };
     }
 
     return {
-      action: `Subscribe to ${name}`,
+      action: t('checkout.sub1', locale, { name }),
       amount,
       then: recurring,
     };
@@ -508,9 +529,9 @@ export function formatCheckoutHeadlines(
   );
 
   return {
-    action: `Pay ${brand}`,
+    action: t('checkout.pay', locale, { payee: brand }),
     amount,
-    then: `Then ${subscription} ${currency.symbol} ${recurring}`,
+    then: t('checkout.then', locale, { subscription: `${subscription} ${currency.symbol}`, recurring }),
   };
 }
 

package/src/locales/en.tsx

@@ -28,7 +28,8 @@ export default flat({
     confirm: 'Confirm',
     cancel: 'Cancel',
     every: 'every',
-    per: 'per',
+    per: 'per {interval}',
+    slash: '/ {interval}',
     unit: 'units',
     edit: 'Edit',
     quantity: 'Quantity',
@@ -47,16 +48,29 @@ export default flat({
     copied: 'Copied',
     previous: 'Back',
     continue: 'Continue',
-    hourly: 'Hourly',
-    daily: 'Daily',
-    weekly: 'Weekly',
-    monthly: 'Monthly',
-    yearly: 'Yearly',
-    month3: 'Every 3 months',
-    month6: 'Every 6 months',
-    days: 'Days',
-    weeks: 'Weeks',
-    months: 'Months',
+    qty: 'Qty {count}',
+    each: '{unit} each',
+    trial: 'Free for {count} days',
+    billed: 'billed {rule}',
+    metered: 'based on usage',
+    hour: 'hour',
+    day: 'day',
+    week: 'week',
+    month: 'month',
+    year: 'year',
+    hourly: 'hourly',
+    daily: 'daily',
+    weekly: 'weekly',
+    monthly: 'monthly',
+    yearly: 'yearly',
+    month3: 'every 3 months',
+    month6: 'every 6 months',
+    recurring: 'every {count} {interval}',
+    hours: 'hours',
+    days: 'days',
+    weeks: 'weeks',
+    months: 'months',
+    years: 'years',
     metadata: {
       label: 'Metadata',
       add: 'Add more metadata',
@@ -145,6 +159,8 @@ export default flat({
       name: 'Price',
       type: 'Usage type',
       info: 'Price information',
+      count: '{count} prices',
+      empty: 'No price',
       lookupKey: 'Lookup key',
       setAsDefault: 'Set as default price',
       detail: 'Pricing details',
@@ -496,6 +512,15 @@ export default flat({
     login: 'Login to load and save contact information',
     portal: 'Manage subscriptions',
     cardPay: '{action} with card',
+    empty: 'No thing to pay',
+    pay: 'Pay {payee}',
+    try1: 'Try {name}',
+    try2: 'Try {name} and {count} more',
+    sub1: 'Subscribe to {name}',
+    sub2: 'Subscribe to {name} and {count} more',
+    then: 'Then {subscription} {recurring}',
+    free: '{count} days free',
+    least: 'continue with at least',
     completed: {
       payment: 'Thanks for your purchase',
       subscription: 'Thanks for your subscribing',

package/src/locales/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-prototype-builtins */
 import en from './en';
 import zh from './zh';
 
@@ -6,3 +7,27 @@ export const translations = {
   zh,
   en,
 };
+
+export const replace = (template: string, data: Record<string, any> = {}) =>
+  template.replace(/{(\w*)}/g, (_, key) => (data.hasOwnProperty(key) ? data[key] : ''));
+
+export const createTranslator = ({ fallbackLocale = 'en' }: { fallbackLocale?: string }) => {
+  return (key: string, locale = fallbackLocale, data: Record<string, any> = {}) => {
+    // @ts-ignore
+    if (!translations[locale] || !translations[locale][key]) {
+      // @ts-ignore
+      if (fallbackLocale && translations[fallbackLocale]?.[key]) {
+        // @ts-ignore
+        return replace(translations[fallbackLocale]?.[key], data);
+      }
+
+      return key;
+    }
+
+    // @ts-ignore
+    return replace(translations[locale][key], data);
+  };
+};
+
+export const translate = createTranslator({ fallbackLocale: 'en' });
+export const t = translate;

package/src/locales/zh.tsx

@@ -28,8 +28,9 @@ export default flat({
     confirm: '确认',
     cancel: '取消',
     every: '每',
-    per: '每',
-    unit: '个单位',
+    per: '每{interval}',
+    slash: '每{interval}',
+    unit: '件',
     edit: '编辑',
     quantity: '数量',
     yes: '是',
@@ -47,16 +48,29 @@ export default flat({
     copied: '已复制',
     previous: '返回',
     continue: '继续',
-    hourly: '每小时',
-    daily: '每日',
-    weekly: '每周',
-    monthly: '每月',
-    yearly: '每年',
-    month3: '每3个月',
-    month6: '每6个月',
+    qty: '{count} 件',
+    each: '每件 {unit}',
+    trial: '免费试用 {count} 天',
+    billed: '{rule}收费',
+    metered: '按用量',
+    hour: '小时',
+    day: '天',
+    week: '周',
+    month: '月',
+    year: '年',
+    hourly: '按小时',
+    daily: '按天',
+    weekly: '按周',
+    monthly: '按月',
+    yearly: '按年',
+    month3: '按季度',
+    month6: '按半年',
+    recurring: '每{count}{interval}',
+    hours: '小时',
     days: '天',
     weeks: '周',
     months: '月',
+    years: '年',
     metadata: {
       label: '元数据',
       add: '添加更多元数据',
@@ -488,6 +502,16 @@ export default flat({
     login: '登录以加载并保存联系信息',
     portal: '管理订阅',
     cardPay: '使用卡片{action}',
+    empty: '没有可支付的项目',
+    per: '每',
+    pay: '付款给 {payee}',
+    try1: '免费试用 {name}',
+    try2: '免费试用 {name} 等{count}个产品',
+    sub1: '订阅 {name}',
+    sub2: '订阅 {name} 等{count}个产品',
+    then: '然后 {subscription} {recurring}',
+    free: '{count} 天',
+    least: '至少',
     completed: {
       payment: '感谢您的购买',
       subscription: '感谢您的订阅',

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

@@ -158,7 +158,8 @@ export default function PaymentLinkDetail(props: { id: string }) {
                               description={formatProductPrice(
                                 // @ts-ignore
                                 { ...item.price.product, prices: [item.price] },
-                                settings.baseCurrency
+                                settings.baseCurrency,
+                                locale
                               )}
                               logo={item.price.product.images[0]}
                             />

package/src/pages/admin/products/prices/detail.tsx

@@ -27,7 +27,7 @@ const fetchData = (id: string): Promise<TPriceExpanded> => {
 };
 
 export default function PriceDetail(props: { id: string }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
   const [state, setState] = useSetState({
     adding: {
@@ -121,7 +121,11 @@ export default function PriceDetail(props: { id: string }) {
               value={<Link to={`/admin/products/${data.product_id}`}>{data.product.name}</Link>}
               divider
             />
-            <InfoMetric label={t('admin.price.amount')} value={formatPrice(data, data.currency)} divider />
+            <InfoMetric
+              label={t('admin.price.amount')}
+              value={formatPrice(data, data.currency, data.product.unit_label, 1, true, locale)}
+              divider
+            />
             <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
             <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
           </Stack>
@@ -221,7 +225,11 @@ export default function PriceDetail(props: { id: string }) {
                     const item = data.currency_options[index] as any;
                     return formatPrice(
                       { type: data.type, unit_amount: item.unit_amount, recurring: data.recurring } as TPrice,
-                      item.currency
+                      item.currency,
+                      data.product.unit_label,
+                      1,
+                      true,
+                      locale
                     );
                   },
                 },

package/src/pages/admin/products/prices/list.tsx

@@ -13,7 +13,7 @@ import { formatPrice, formatTime } from '../../../../libs/util';
 import PriceActions from './actions';
 
 export default function PricesList({ product, onChange }: { product: Product; onChange: Function }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { settings } = useSettingsContext();
 
   const columns = [
@@ -32,7 +32,9 @@ export default function PricesList({ product, onChange }: { product: Product; on
                     <LockOutlined sx={{ color: 'text.secondary' }} />
                   </Tooltip>
                 )}
-                <Typography component="span">{formatPrice(price, settings.baseCurrency)}</Typography>
+                <Typography component="span">
+                  {formatPrice(price, settings.baseCurrency, '', 1, true, locale)}
+                </Typography>
                 <Typography component="span">
                   {price.id === product.default_price_id && <Status label="default" color="info" sx={{ height: 18 }} />}
                 </Typography>

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

@@ -138,7 +138,8 @@ export default function PricingTableDetail(props: { id: string }) {
                               description={formatProductPrice(
                                 // @ts-ignore
                                 { ...item.product, prices: [item.price] },
-                                settings.baseCurrency
+                                settings.baseCurrency,
+                                locale
                               )}
                               logo={item.product.images[0]}
                             />

package/src/pages/admin/products/products/create.tsx

@@ -18,7 +18,7 @@ import api from '../../../../libs/api';
 import { formatError, formatPrice } from '../../../../libs/util';
 
 export default function ProductsCreate() {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { settings } = useSettingsContext();
 
   const methods = useForm<Product>({
@@ -85,7 +85,7 @@ export default function ProductsCreate() {
                   }
 
                   // @ts-ignore
-                  return formatPrice(getPrice(index), settings.baseCurrency, getValues().unit_label, 1, false);
+                  return formatPrice(getPrice(index), settings.baseCurrency, getValues().unit_label, 1, false, locale);
                 }}>
                 <PriceForm prefix={`prices.${index}`} />
               </Collapse>

package/src/pages/admin/products/products/detail.tsx

@@ -29,7 +29,7 @@ const getProduct = (id: string): Promise<TProductExpanded> => {
 };
 
 export default function ProductDetail(props: { id: string }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
   const { settings } = useSettingsContext();
   const [state, setState] = useSetState({
@@ -128,7 +128,7 @@ export default function ProductDetail(props: { id: string }) {
               logo={data.images[0]}
               name={data.name}
               // @ts-ignore
-              description={formatProductPrice(data, settings.baseCurrency)}
+              description={formatProductPrice(data, settings.baseCurrency, locale)}
             />
             <ProductActions data={data} onChange={onChange} variant="normal" />
           </Stack>

package/src/pages/admin/products/products/index.tsx

@@ -28,7 +28,7 @@ export default function ProductsList() {
   const listKey = 'products';
   const persisted = getDurableData(listKey);
 
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
   const { settings } = useSettingsContext();
   const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
@@ -62,7 +62,7 @@ export default function ProductsList() {
           return (
             <InfoCard
               name={product.name}
-              description={formatProductPrice(product as any, settings.baseCurrency)}
+              description={formatProductPrice(product as any, settings.baseCurrency, locale)}
               logo={product.images[0]}
             />
           );