@blocklet/payment-react 1.13.113

package/src/locales/en.tsx

@@ -0,0 +1,218 @@
+import flat from 'flat';
+
+export default flat({
+  common: {
+    id: 'ID',
+    url: 'URL',
+    createdAt: 'Created At',
+    updatedAt: 'Updated At',
+    resumesAt: 'Resume At',
+    actions: 'Actions',
+    options: 'Options',
+    advanced: 'Advanced options',
+    login: 'Login to access this page',
+    settings: 'Settings',
+    preview: 'Preview',
+    required: 'Required',
+    setup: 'Setup',
+    name: 'Name',
+    amount: 'Amount',
+    total: 'Total',
+    subtotal: 'Subtotal',
+    status: 'Status',
+    livemode: 'Test mode',
+    afterTime: 'After {time}',
+    timeAgo: '{time} ago',
+    save: 'Save',
+    saved: 'Changes saved',
+    remove: 'Remove',
+    removed: 'Resource removed',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    every: 'every',
+    per: 'per {interval}',
+    slash: '/ {interval}',
+    unit: 'units',
+    edit: 'Edit',
+    quantity: 'Quantity',
+    yes: 'Yes',
+    no: 'No',
+    email: 'Email',
+    did: 'DID',
+    txHash: 'Transaction',
+    customer: 'Customer',
+    custom: 'Custom',
+    description: 'Description',
+    statementDescriptor: 'Statement descriptor',
+    loadMore: 'View more {resource}',
+    loadingMore: 'Loading more {resource}...',
+    noMore: 'No more {resource}',
+    copied: 'Copied',
+    previous: 'Back',
+    continue: 'Continue',
+    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',
+  },
+  payment: {
+    checkout: {
+      contact: 'Contact information',
+      method: 'Payment method',
+      processing: 'Processing',
+      payment: 'Pay',
+      try: 'Try for free',
+      include: 'This includes:',
+      subscription: 'Subscribe',
+      select: 'Select',
+      selected: 'Selected',
+      noPricing: 'No items to purchase',
+      setup: 'Subscribe',
+      continue: 'Confirm {action}',
+      connect: 'Connect and {action}',
+      login: 'Login to load and save contact information',
+      portal: 'Manage subscriptions',
+      cardPay: '{action} with card',
+      empty: 'No thing to pay',
+      per: 'per',
+      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',
+        setup: 'Thanks for your subscribing',
+        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 for this and future payments in accordance with their terms. You can always cancel your subscription.',
+      required: 'Required',
+      invalid: 'Invalid',
+      billing: {
+        auto: 'Country',
+        required: 'Billing address',
+        country: 'Country',
+        state: 'State or province',
+        city: 'City or town',
+        line1: 'Address',
+        line2: 'Line2',
+        postal_code: 'Postal code',
+      },
+      customer: {
+        name: 'Name',
+        email: 'Email',
+        phone: 'Phone',
+        phonePlaceholder: 'Phone number',
+        phoneTip: 'In case we need to contact you about your order',
+      },
+      upsell: {
+        save: 'Save with {recurring} billing',
+        revert: 'Switch to {recurring} billing',
+        off: '{saving}% off',
+      },
+      cross_sell: {
+        add: 'Add to order',
+        remove: 'Remove from order',
+      },
+      expired: {
+        title: 'Expired Link',
+        description:
+          'This link has expired. This means that your payment has already been processed or your session has expired.',
+      },
+      complete: {
+        title: 'Checkout Completed',
+        description:
+          'This checkout session has completed. This means that your payment has already been successfully processed.',
+      },
+    },
+    customer: {
+      invoices: 'Invoice History',
+      details: 'Billing Details',
+      update: 'Update Information',
+      empty: 'Seems you do not have any subscriptions or payments here',
+      cancel: {
+        button: 'Cancel',
+        title: 'Cancel your subscription',
+        description:
+          'Your subscription will be canceled, but it is still available until the end of your current billing period on {date}',
+        feedback: {
+          tip: 'We would love your feedback, it will help us improve our service',
+          too_expensive: 'The service is too expensive',
+          missing_features: 'Features are missing for this service',
+          switched_service: 'I have switched to alternative service',
+          unused: 'I no longer use this service',
+          customer_service: 'The customer service is poor',
+          too_complex: 'The service is too complex to use',
+          low_quality: 'The service does not work well',
+          other: 'Other reasons',
+        },
+      },
+      pastDue: {
+        button: 'Pay',
+      },
+      recover: {
+        button: 'Renew',
+        title: 'Renew your subscription',
+        description: 'Your subscription will no longer be canceled, it will renew on {date}',
+      },
+      upgrade: {
+        button: 'Update',
+        current: 'Current',
+        pay: 'Payment Required',
+        scan: 'Complete the payment to upgrade your subscription',
+        success: 'Your subscription is successfully upgraded',
+        error: 'Failed to upgrade your subscription',
+        config: 'Switch to another plan or billing cycle',
+        confirm: 'Confirm changes to your subscription',
+        summary: 'What you will pay for starting {date}',
+        total: 'Total (metered items excluded)',
+        appliedCredit: 'Credit applied',
+        newCredit: 'Credit issued',
+        remaining: 'Amount due today',
+      },
+      invoice: {
+        summary: 'Summary',
+        details: 'Details',
+        download: 'Download PDF',
+        unitPrice: 'Unit Price',
+        amountPaid: 'Amount Paid',
+        rawQuantity: 'Raw Quantity: {quantity}',
+        amountDue: 'Amount Due',
+        amountApplied: 'Applied Credit',
+        pay: 'Pay this invoice',
+        paySuccess: 'You have successfully paid the invoice',
+        payError: 'Failed to paid the invoice',
+        empty: 'Seems you do not have any payments here',
+      },
+      subscriptions: {
+        title: 'Manage subscriptions',
+        current: 'Current subscriptions',
+        empty: 'Seems you do not have any subscriptions here',
+      },
+    },
+  },
+});

package/src/locales/index.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable no-prototype-builtins */
+import en from './en';
+import zh from './zh';
+
+// eslint-disable-next-line import/prefer-default-export
+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 }, langs: any = translations) => {
+  return (key: string, locale = fallbackLocale, data: Record<string, any> = {}) => {
+    if (!langs[locale] || !langs[locale][key]) {
+      if (fallbackLocale && langs[fallbackLocale]?.[key]) {
+        return replace(langs[fallbackLocale]?.[key], data);
+      }
+
+      return key;
+    }
+
+    // @ts-ignore
+    return replace(langs[locale][key], data);
+  };
+};
+
+export const translate = createTranslator({ fallbackLocale: 'en' });
+export const t = translate;

package/src/locales/zh.tsx

@@ -0,0 +1,214 @@
+import flat from 'flat';
+
+export default flat({
+  common: {
+    id: 'ID',
+    url: 'URL',
+    createdAt: '创建时间',
+    updatedAt: '更新时间',
+    resumesAt: '恢复时间',
+    actions: '操作',
+    options: '选项',
+    advanced: '高级选项',
+    settings: '设置',
+    preview: '预览',
+    required: '必填',
+    setup: '设置',
+    name: '姓名',
+    login: '登录以访问此页面',
+    amount: '金额',
+    total: '总计',
+    subtotal: '小计',
+    status: '状态',
+    livemode: '测试模式',
+    afterTime: '在{time}后',
+    timeAgo: '{time}前',
+    save: '保存',
+    saved: '更改已保存',
+    remove: '删除',
+    removed: '资源已删除',
+    confirm: '确认',
+    cancel: '取消',
+    every: '每',
+    per: '每{interval}',
+    slash: '每{interval}',
+    unit: '件',
+    edit: '编辑',
+    quantity: '数量',
+    yes: '是',
+    no: '否',
+    email: '邮箱',
+    did: 'DID',
+    txHash: '交易哈希',
+    customer: '客户',
+    custom: '自定义',
+    description: '描述',
+    statementDescriptor: '声明描述',
+    loadMore: '查看更多{resource}',
+    loadingMore: '正在加载更多{resource}...',
+    noMore: '没有更多{resource}',
+    copied: '已复制',
+    previous: '返回',
+    continue: '继续',
+    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: '年',
+  },
+  payment: {
+    checkout: {
+      contact: '联系信息',
+      method: '支付方式',
+      processing: '处理中',
+      payment: '支付',
+      try: '免费试用',
+      include: '包括：',
+      subscription: '订阅',
+      select: '选择',
+      selected: '已选',
+      noPricing: '没有可购买的物品',
+      setup: '订阅',
+      continue: '确认{action}',
+      connect: '连接并{action}',
+      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: '感谢您的订阅',
+        setup: '感谢您的订阅',
+        tip: '向{payee}的付款已完成。您可以在您的账户中查看此付款的详细信息。',
+      },
+      confirm: '通过确认您的订阅，您允许{payee}按照其条款对您的账户进行付款。您随时可以取消您的订阅。',
+      required: '必填项',
+      invalid: '无效',
+      billing: {
+        auto: '国家/地区',
+        required: '账单地址',
+        country: '国家/地区',
+        state: '州或省',
+        city: '城市或镇',
+        line1: '地址',
+        line2: '地址2',
+        postal_code: '邮政编码',
+      },
+      customer: {
+        name: '姓名',
+        email: '邮件',
+        phone: '电话',
+        phonePlaceholder: '电话号码',
+        phoneTip: '以防需要与您联系有关您的订单',
+      },
+      upsell: {
+        save: '使用{recurring}计费方式',
+        revert: '切换到{recurring}计费方式',
+        off: '省 {saving}%',
+      },
+      expired: {
+        title: '链接已过期',
+        description: '此链接已过期。这意味着您的付款已经处理完成或会话已过期。',
+      },
+      complete: {
+        title: '结账已完成',
+        description: '此结账会话已完成。这意味着您的付款已成功处理完成。',
+      },
+      cross_sell: {
+        add: '添加到订单',
+        remove: '从订单移除',
+      },
+    },
+    customer: {
+      invoices: '发票历史',
+      details: '计费详情',
+      update: '更新客户信息',
+      empty: '看起来您在这里没有任何订阅或支付',
+      cancel: {
+        button: '取消',
+        title: '取消您的订阅',
+        description: '您的订阅将被取消，但仍然可用直到您当前计费周期结束于{date}',
+        feedback: {
+          tip: '我们希望听到您的反馈，这将帮助我们改进我们的服务',
+          too_expensive: '服务费用太高',
+          missing_features: '服务缺少功能',
+          switched_service: '我已切换到其他服务',
+          unused: '我不再使用此服务',
+          customer_service: '客户服务不佳',
+          too_complex: '服务使用过于复杂',
+          low_quality: '服务质量不佳',
+          other: '其他原因',
+        },
+      },
+      pastDue: {
+        button: '续费',
+      },
+      recover: {
+        button: '续订',
+        title: '续订您的订阅',
+        description: '您的订阅将不再被取消，将在{date}续订',
+      },
+      upgrade: {
+        button: '更新',
+        current: '当前订阅',
+        pay: '需要支付',
+        scan: '完成支付以更新你的订阅',
+        success: '你的订阅已经更新成功',
+        error: '订阅更新失败',
+        config: '切换套餐或周期',
+        confirm: '确认变更细节',
+        summary: '新的付款计划（{date} 开始)',
+        total: '套餐定价（不含按量部分）',
+        appliedCredit: '信用扣除',
+        newCredit: '信用增加',
+        remaining: '还需支付',
+      },
+      invoice: {
+        summary: '摘要',
+        details: '详情',
+        download: '下载PDF',
+        unitPrice: '单价',
+        rawQuantity: '汇总前数量: {quantity}',
+        amountPaid: '已支付',
+        amountDue: '待支付',
+        amountApplied: '余额变更',
+        pay: '支付此发票',
+        paySuccess: '支付成功',
+        payError: '支付失败',
+        empty: '你没有任何支付',
+      },
+      subscriptions: {
+        title: '订阅管理',
+        current: '当前订阅',
+        empty: '你还没有任何订阅',
+      },
+    },
+  },
+});

package/src/payment/amount.tsx

@@ -0,0 +1,24 @@
+import { Typography } from '@mui/material';
+
+type Props = { amount: string; sx?: any };
+
+export default function PaymentAmount({ amount, sx }: Props) {
+  return (
+    <Typography
+      sx={{
+        my: 0.5,
+        fontWeight: 600,
+        fontSize: '2.5rem',
+        lineHeight: '1.3',
+        letterSpacing: '-0.03rem',
+        fontVariantNumeric: 'tabular-nums',
+        ...sx,
+      }}>
+      {amount}
+    </Typography>
+  );
+}
+
+PaymentAmount.defaultProps = {
+  sx: {},
+};

package/src/payment/error.tsx

@@ -0,0 +1,29 @@
+import { Button, Link, Stack, Typography } from '@mui/material';
+
+type Props = {
+  title: string;
+  description: string;
+  button?: string;
+};
+
+export default function PaymentError({ title, description, button }: Props) {
+  return (
+    <Stack sx={{ height: '100vh' }} alignItems="center" justifyContent="center">
+      <Stack sx={{ width: '280px' }} direction="column" alignItems="center" justifyContent="center">
+        <Typography variant="h5" sx={{ mb: 2 }}>
+          {title}
+        </Typography>
+        <Typography variant="body1" sx={{ mb: 2, textAlign: 'center' }}>
+          {description}
+        </Typography>
+        <Button variant="text" size="small" component={Link} href={window.blocklet.appUrl}>
+          {button}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}
+
+PaymentError.defaultProps = {
+  button: 'Back',
+};

package/src/payment/footer.tsx

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

package/src/payment/form/addon.tsx

@@ -0,0 +1,24 @@
+import SessionManager from '@arcblock/did-connect/lib/SessionManager';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
+import { Stack, Tooltip } from '@mui/material';
+
+import { usePaymentContext } from '../../contexts/payment';
+
+export default function UserButtons() {
+  const { t } = useLocaleContext();
+  const { session } = usePaymentContext();
+
+  return (
+    <Stack direction="row" alignItems="center" justifyContent="space-between">
+      <LocaleSelector showText={false} />
+      {session.user ? (
+        <SessionManager session={session} />
+      ) : (
+        <Tooltip title={t('payment.checkout.login')} arrow>
+          <SessionManager session={session} />
+        </Tooltip>
+      )}
+    </Stack>
+  );
+}

package/src/payment/form/address.tsx

@@ -0,0 +1,119 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Fade, Stack, Typography } from '@mui/material';
+import { Controller, useFormContext } from 'react-hook-form';
+import { CountrySelector } from 'react-international-phone';
+
+import FormInput from '../../components/input';
+
+type Props = {
+  mode: string;
+  stripe: boolean;
+};
+
+export default function AddressForm({ mode, stripe }: Props) {
+  const { t } = useLocaleContext();
+  const { control, setValue } = 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 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')}
+              />
+            </Stack>
+            <FormInput
+              name="billing_address.state"
+              rules={{ required: t('payment.checkout.required') }}
+              errorPosition="right"
+              variant="outlined"
+              placeholder={t('payment.checkout.billing.state')}
+            />
+            <FormInput
+              name="billing_address.line1"
+              rules={{ required: t('payment.checkout.required') }}
+              errorPosition="right"
+              variant="outlined"
+              placeholder={t('payment.checkout.billing.line1')}
+            />
+            <FormInput
+              name="billing_address.city"
+              rules={{ required: t('payment.checkout.required') }}
+              errorPosition="right"
+              variant="outlined"
+              placeholder={t('payment.checkout.billing.city')}
+            />
+          </Stack>
+        </Stack>
+      </Fade>
+    );
+  }
+
+  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 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')}
+              />
+            </Stack>
+          </Stack>
+        </Stack>
+      </Fade>
+    );
+  }
+
+  return null;
+}