payment-kit 1.13.15

package/src/locales/zh.tsx

@@ -0,0 +1,389 @@
+import flat from 'flat';
+
+export default flat({
+  common: {
+    id: '标识',
+    url: '链接',
+    createdAt: '创建于',
+    updatedAt: '更新于',
+    resumesAt: '恢复于',
+    actions: '操作',
+    options: '选项',
+    advanced: '高级选项',
+    settings: '设置',
+    preview: '预览',
+    required: '必填',
+    setup: '设置',
+    days: '天',
+    name: '名称',
+    amount: '金额',
+    total: '总计',
+    status: '状态',
+    livemode: '测试模式',
+    afterTime: '在{time}之后',
+    timeAgo: '{time}前',
+    save: '保存',
+    saved: '更改已保存',
+    remove: '删除',
+    removed: '资源已删除',
+    confirm: '确认',
+    cancel: '取消',
+    every: '每',
+    per: '每',
+    unit: '单位',
+    edit: '编辑',
+    quantity: '数量',
+    yes: '是',
+    no: '否',
+    email: '邮箱',
+    did: 'DID',
+    txHash: '交易哈希',
+    customer: '客户',
+    description: '描述',
+    statementDescriptor: '账单描述',
+    loadMore: '查看更多{resource}',
+    loadingMore: '正在加载更多{resource}...',
+    noMore: '没有更多{resource}',
+    metadata: {
+      label: '元数据',
+      add: '添加更多元数据',
+      edit: '编辑元数据',
+      empty: '无元数据',
+    },
+  },
+  admin: {
+    overview: '概览',
+    payments: '支付',
+    connections: '连接',
+    paymentLinks: '支付链接',
+    paymentMethods: '支付方式',
+    customers: '客户',
+    products: '产品',
+    coupons: '优惠券',
+    pricingTables: '定价表',
+    billing: '计费',
+    invoices: '发票',
+    subscriptions: '订阅',
+    developers: '开发者',
+    webhooks: 'Web钩子',
+    events: '事件',
+    logs: '日志',
+    details: '详情',
+    settings: '设置',
+    branding: '品牌',
+    business: '业务',
+    summary: '摘要',
+    product: {
+      info: '产品信息',
+      add: '添加产品',
+      view: '查看产品详情',
+      save: '保存产品',
+      saved: '产品已成功保存',
+      additional: '附加选项',
+      edit: '编辑产品',
+      pricing: '定价',
+      archive: '存档产品',
+      archiveTip: '存档将隐藏该产品不再允许新购买。您确定要存档此产品吗？',
+      unarchive: '取消存档产品',
+      unarchiveTip: '取消存档将允许该产品再次购买。您确定要取消存档此产品吗？',
+      remove: '删除产品',
+      removeTip: '删除将隐藏该产品不再允许新购买。您确定要删除此产品吗？',
+      archived: '此产品已存档',
+      archivedTip:
+        '此产品无法添加到新的发票、订阅、支付链接或定价表中。任何现有的包含此产品的订阅将保持活动状态，直到取消，任何现有的支付链接或定价表都将停用。',
+      image: {
+        label: '图片',
+        add: '添加图片',
+      },
+      features: {
+        label: '特性',
+        add: '添加其他特性',
+      },
+      name: {
+        label: '名称',
+        required: '产品名称是必填的',
+        placeholder: '高级套餐',
+      },
+      description: {
+        label: '描述',
+        required: '产品描述是必填的',
+        placeholder: '结账、发票页面上显示的产品描述',
+      },
+      statement_descriptor: {
+        label: '账单描述',
+        placeholder: 'ArcBlock',
+      },
+      unit_label: {
+        label: '单位标签',
+        placeholder: '座位',
+      },
+    },
+    price: {
+      name: '价格',
+      type: '使用类型',
+      info: '价格信息',
+      lookupKey: '查找键',
+      setAsDefault: '设置为默认价格',
+      detail: '定价详情',
+      add: '添加其他价格',
+      view: '查看价格详情',
+      additional: '附加选项',
+      model: '定价模型',
+      amount: '价格',
+      duplicate: '复制价格',
+      edit: '编辑价格',
+      archive: '存档价格',
+      archiveTip: '存档将隐藏该价格不再允许新购买。您确定要存档此价格吗？',
+      remove: '删除价格',
+      removeTip: '删除将隐藏该价格不再允许新购买。您确定要删除此价格吗？',
+      unit_amount: {
+        required: '价格是必填的',
+        positive: '价格必须是正数',
+      },
+      nickname: {
+        label: '价格描述',
+        placeholder: '',
+      },
+      lookup_key: {
+        label: '查找键',
+        placeholder: '',
+      },
+      recurring: {
+        interval: '计费周期',
+        metered: '使用是否计费？',
+        aggregate: '按何方式计费',
+      },
+    },
+    coupon: {
+      create: '创建优惠券',
+      view: '查看优惠券',
+    },
+    paymentLink: {
+      view: '查看支付链接',
+      info: '支付链接信息',
+      add: '创建支付链接',
+      save: '创建链接',
+      saved: '支付链接创建成功',
+      additional: '附加选项',
+      beforePay: '支付页面',
+      afterPay: '支付后',
+      products: '产品',
+      addProduct: '添加其他产品',
+      requireBillingAddress: '收集客户账单地址',
+      requirePhoneNumber: '收集客户电话号码',
+      allowPromotionCodes: '允许促销代码',
+      includeFreeTrail: '包含免费试用',
+      includeCustomFields: '添加自定义字段',
+      confirmPage: '确认页面',
+      showConfirmPage: '显示确认页面',
+      customMessage: '用自定义消息替代默认消息',
+      customMessageTip: '包括任何您认为合适的详细信息，如交付信息。',
+      noConfirmPage: '不显示确认页面',
+      createInvoice: '为相关支付创建发票。',
+      adjustable: '可调整数量',
+      adjustableQuantity: '允许客户调整数量',
+      noProducts: '支付链接必须至少包含一个产品',
+      noRedirectUrl: '支付链接必须具有重定向URL',
+      noSubscriptionTrialDays: '您必须指定订阅的试用期',
+      notAligned: '所有行项目上的价格必须具有相同的重复周期',
+      edit: '编辑支付链接',
+      rename: '更改名称',
+      archive: '存档支付链接',
+      archiveTip: '存档将隐藏该支付链接不再允许新购买。您确定要存档此支付链接吗？',
+      remove: '删除支付链接',
+      removeTip: '删除将隐藏该支付链接不再允许新购买。您确定要删除此支付链接吗？',
+      name: {
+        label: '名称',
+        placeholder: '不面向消费者',
+      },
+    },
+    paymentIntent: {
+      name: '支付',
+      view: '查看支付详情',
+      empty: '没有支付意向',
+      refund: '退款支付',
+    },
+    paymentMethod: {
+      name: '支付方式',
+      type: '类型',
+    },
+    paymentCurrency: {
+      name: '支付货币',
+    },
+    event: {
+      empty: '没有事件',
+      view: '查看事件',
+      data: '事件数据',
+      webhooks: 'Web钩子尝试',
+      type: '类型',
+      pendingWebhooks: '待处理的Web钩子',
+    },
+    invoice: {
+      view: '查看发票',
+      name: '发票',
+      from: '来自',
+      empty: '没有发票',
+      number: '发票编号',
+      dueDate: '截止日期',
+      finalizedAt: '完成时间',
+      paidAt: '付款日期',
+      summary: '摘要',
+      customer: '寄送至',
+      billing: '计费方式',
+      download: '下载PDF',
+      edit: '编辑发票',
+      duplicate: '复制发票',
+    },
+    subscription: {
+      view: '查看订阅',
+      name: '订阅',
+      empty: '没有订阅',
+      product: '产品',
+      collectionMethod: '计费',
+      currentPeriod: '当前周期',
+      trialingPeriod: '试用期',
+      discount: '折扣',
+      startedAt: '开始时间',
+      nextInvoice: '下一个发票',
+      itemId: '订阅项目ID',
+      update: '更新订阅',
+      resume: '恢复支付收款',
+      resumeTip: '您确定要恢复收款吗？此订阅的未来发票将恢复收款。',
+      cancel: {
+        schedule: '计划取消',
+        title: '取消订阅',
+        required: '需要自定义取消时间',
+        at: {
+          title: '取消',
+          now: '立即（{date}）',
+          current_period_end: '当前周期结束时（{date}）',
+          custom: '自定义日期',
+        },
+      },
+      pause: {
+        title: '暂停支付收款',
+        required: '需要自定义恢复时间',
+        type: {
+          title: '暂停持续时间',
+          never: '无限期',
+          custom: '直到自定义日期',
+        },
+        behavior: {
+          title: '发票行为',
+          keep_as_draft: '保留发票为草稿',
+          keep_as_draft_tip: '对于目前提供服务但等待收款的企业。',
+          mark_uncollectible: '标记发票为不可收款',
+          mark_uncollectible_tip: '对于目前免费提供服务的企业。',
+          void: '作废发票',
+          voidTip: '对于目前不提供服务的企业。',
+        },
+      },
+    },
+    customer: {
+      view: '查看客户',
+      edit: '编辑信息',
+      spent: '已花费金额',
+      refund: '退款金额',
+      dispute: '争议金额',
+      name: '姓名',
+      email: '邮箱',
+      phone: '电话',
+      invoicePrefix: '发票前缀',
+      address: {
+        label: '地址',
+        country: '国家',
+        state: '州或省',
+        city: '城市或镇',
+        line1: '地址',
+        line2: '地址2',
+        postal_code: '邮政编码',
+      },
+    },
+    webhookEndpoint: {
+      hosted: '托管端点',
+      add: '添加端点',
+      addTip: '设置您的Web钩子端点以接收实时事件',
+      listen: '监听',
+      version: 'API版本',
+      attempts: 'Web钩子尝试',
+      url: {
+        label: 'URL',
+        description: '端点URL',
+      },
+      description: {
+        label: '描述',
+        description: '用于说明此端点用途的可选描述。',
+      },
+      events: {
+        label: '选择要监听的事件',
+        description: '',
+      },
+    },
+  },
+  checkout: {
+    contact: '联系信息',
+    method: '支付方式',
+    processing: '处理中',
+    payment: '支付',
+    subscription: '订阅',
+    setup: '订阅',
+    connect: '连接并{action}',
+    portal: '管理订阅',
+    completed: {
+      payment: '感谢您的购买',
+      subscription: '感谢您的订阅',
+      setup: '感谢您的订阅',
+      tip: '已完成向{payee}的付款。您可以在您的账户中查看此付款的详细信息。',
+    },
+    confirm: '通过确认您的订阅，您允许{payee}按照其条款对您的账户进行收费。您随时可以取消您的订阅。',
+    billing: {
+      auto: '国家',
+      required: '账单地址',
+      country: '国家',
+      state: '州或省',
+      city: '城市或镇',
+      line1: '地址',
+      line2: '地址2',
+      postal_code: '邮政编码',
+    },
+    customer: {
+      name: '姓名',
+      email: '邮箱',
+      phone: '电话',
+      phoneTip: '以防需要联系您有关您的订单',
+    },
+  },
+  customer: {
+    subscriptions: '当前订阅',
+    invoices: '发票历史',
+    details: '账单详情',
+    update: '更新',
+    cancel: {
+      button: '取消',
+      title: '取消您的订阅',
+      description: '您的订阅将被取消，但仍然在您的当前计费周期结束于{date}之前可用',
+      feedback: {
+        tip: '我们很愿意听取您的反馈，这将帮助我们改进我们的服务',
+        too_expensive: '服务太昂贵',
+        missing_features: '此服务缺少功能',
+        switched_service: '我已切换到其他服务',
+        unused: '我不再使用此服务',
+        customer_service: '客户服务不佳',
+        too_complex: '服务太复杂',
+        low_quality: '服务质量不佳',
+        other: '其他原因',
+      },
+    },
+    recover: {
+      button: '续订',
+      title: '续订您的订阅',
+      description: '您的订阅将不再被取消，将在{date}续订',
+    },
+    invoice: {
+      summary: '摘要',
+      details: '详情',
+      download: '下载PDF',
+      pay: '支付此发票',
+    },
+  },
+});

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

@@ -0,0 +1,56 @@
+import Center from '@arcblock/ux/lib/Center';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import { CircularProgress, Typography } from '@mui/material';
+import React, { Suspense, isValidElement } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+const SubscriptionDetail = React.lazy(() => import('./subscriptions/detail'));
+const InvoiceDetail = React.lazy(() => import('./invoices/detail'));
+
+const pages = {
+  subscriptions: React.lazy(() => import('./subscriptions')),
+  invoices: React.lazy(() => import('./invoices')),
+};
+
+export default function BillingIndex() {
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const { page = 'subscriptions' } = useParams();
+
+  if (page.startsWith('sub_')) {
+    return <SubscriptionDetail id={page} />;
+  }
+
+  if (page.startsWith('in_')) {
+    return <InvoiceDetail id={page} />;
+  }
+
+  const onTabChange = (newTab: string) => {
+    navigate(`/admin/billing/${newTab}`);
+  };
+
+  // @ts-ignore
+  const TabComponent = pages[page] || pages.subscriptions;
+  const tabs = [
+    { label: t('admin.subscriptions'), value: 'subscriptions' },
+    { label: t('admin.invoices'), value: 'invoices' },
+  ];
+
+  return (
+    <div>
+      <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
+        {t('admin.billing')}
+      </Typography>
+      <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
+      <Suspense
+        fallback={
+          <Center relative="parent">
+            <CircularProgress />
+          </Center>
+        }>
+        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
+      </Suspense>
+    </div>
+  );
+}

package/src/pages/admin/billing/invoices/detail.tsx

@@ -0,0 +1,215 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TInvoice, TInvoiceExpanded } from '@did-pay/types';
+import { ArrowBackOutlined, Edit } from '@mui/icons-material';
+import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { fromUnitToToken } from '@ocap/util';
+import { useRequest, useSetState } from 'ahooks';
+import { isEmpty } from 'lodash';
+import { Link } from 'react-router-dom';
+
+import Copyable from '../../../../components/copyable';
+import Currency from '../../../../components/currency';
+import EventList from '../../../../components/event/list';
+import InfoRow from '../../../../components/info-row';
+import InvoiceActions from '../../../../components/invoice/action';
+import InvoiceTable from '../../../../components/invoice/table';
+import MetadataEditor from '../../../../components/metadata/editor';
+import PaymentList from '../../../../components/payment-intent/list';
+import SectionHeader from '../../../../components/section/header';
+import Status from '../../../../components/status';
+import api from '../../../../libs/api';
+import { formatError, formatTime, getInvoiceStatusColor } from '../../../../libs/util';
+
+const fetchData = (id: string): Promise<TInvoiceExpanded> => {
+  return api.get(`/api/invoices/${id}`).then((res) => res.data);
+};
+
+export default function InvoiceDetail(props: { id: string }) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    adding: {
+      price: false,
+    },
+    editing: {
+      metadata: false,
+      product: false,
+    },
+    loading: {
+      metadata: false,
+      price: false,
+      product: false,
+    },
+  });
+
+  const { loading, error, data, runAsync } = useRequest(() => fetchData(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const createUpdater = (key: string) => async (updates: TInvoice) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
+      await api.put(`/api/invoices/${props.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: false } }));
+    }
+  };
+
+  const onUpdateMetadata = createUpdater('metadata');
+
+  return (
+    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/billing/invoices">
+            <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
+              <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+              <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+                {t('admin.invoices')}
+              </Typography>
+            </Stack>
+          </Link>
+          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+        </Stack>
+        <Box mt={2}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack direction="row" alignItems="center">
+              <Typography variant="h5" sx={{ fontWeight: 600 }}>
+                {data.number}
+              </Typography>
+              <Typography sx={{ mx: 1 }}>for</Typography>
+              <Typography variant="h5" sx={{ fontWeight: 600 }}>
+                {fromUnitToToken(data.total, data.paymentCurrency.decimal)} {data.paymentCurrency.symbol}
+              </Typography>
+              <Status label={data.status} color={getInvoiceStatusColor(data.status)} sx={{ ml: 1 }} />
+            </Stack>
+            <InvoiceActions data={data} onChange={runAsync} variant="normal" />
+          </Stack>
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.details')} />
+        <Stack>
+          <InfoRow label={t('admin.invoice.number')} value={data.number} />
+          <InfoRow
+            label={t('admin.invoice.customer')}
+            value={<Link to={`/admin/customers/${data.customer.id}`}>{data.customer.name}</Link>}
+          />
+          <InfoRow
+            label={t('admin.subscription.currentPeriod')}
+            value={
+              data.period_start && data.period_end
+                ? [formatTime(data.period_start * 1000), formatTime(data.period_end * 1000)].join(' ~ ')
+                : ''
+            }
+          />
+          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+          {data.status_transitions?.finalized_at && (
+            <InfoRow
+              label={t('admin.invoice.finalizedAt')}
+              value={formatTime(data.status_transitions.finalized_at * 1000)}
+            />
+          )}
+          {data.status_transitions?.paid_at && (
+            <InfoRow label={t('admin.invoice.paidAt')} value={formatTime(data.status_transitions.paid_at * 1000)} />
+          )}
+          <InfoRow label={t('admin.invoice.billing')} value={data.collection_method} />
+          <InfoRow
+            label={t('admin.paymentMethod.name')}
+            value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
+          />
+          <InfoRow
+            label={t('admin.paymentCurrency.name')}
+            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+          />
+        </Stack>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.summary')} mb={0} />
+        <Box className="section-body">
+          <InvoiceTable invoice={data} />
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.payments')} mb={0} />
+        <Box className="section-body">
+          <PaymentList features={{ customer: false, toolbar: false }} invoice_id={data.id} />
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.connections')} />
+        <Stack>
+          <InfoRow
+            label={t('admin.subscription.name')}
+            value={
+              data.subscription ? <Link to={`/admin/billing/${data.subscription.id}`}>{data.subscription.id}</Link> : ''
+            }
+          />
+          <InfoRow
+            label={t('admin.paymentIntent.name')}
+            value={
+              data.payment_intent_id ? (
+                <Link to={`/admin/payments/${data.payment_intent_id}`}>{data.payment_intent_id}</Link>
+              ) : (
+                ''
+              )
+            }
+          />
+        </Stack>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('common.metadata.label')}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            disabled={state.editing.metadata}
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, metadata: true } }))}>
+            <Edit fontSize="small" sx={{ mr: 0.5 }} />
+            {t('common.metadata.edit')}
+          </Button>
+        </SectionHeader>
+        <Box className="section-body">
+          {!state.editing.metadata &&
+            (isEmpty(data.metadata) ? (
+              <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>
+            ) : (
+              Object.keys(data.metadata || {}).map((key) => (
+                // @ts-ignore
+                <InfoRow key={key} label={key} value={data.metadata[key]} />
+              ))
+            ))}
+          {state.editing.metadata && (
+            <MetadataEditor
+              data={data}
+              loading={state.loading.metadata}
+              onSave={onUpdateMetadata}
+              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
+            />
+          )}
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.events')} />
+        <Box className="section-body">
+          <EventList features={{ toolbar: false }} object_id={data.id} />
+        </Box>
+      </Box>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;

package/src/pages/admin/billing/invoices/index.tsx

@@ -0,0 +1,5 @@
+import InvoiceList from '../../../../components/invoice/list';
+
+export default function InvoicesList() {
+  return <InvoiceList features={{ customer: true, toolbar: true }} />;
+}