payment-kit 1.13.18 → 1.13.20

package/src/components/payment-link/product-select.tsx

@@ -8,7 +8,7 @@ import type { LiteralUnion } from 'type-fest';
 
 import { useProductsContext } from '../../contexts/products';
 import { useSettingsContext } from '../../contexts/settings';
-import { formatPrice } from '../../libs/util';
+import { formatPrice, getPriceCurrencyOptions } from '../../libs/util';
 
 type Props = {
   mode: LiteralUnion<'waiting' | 'selecting', string>;
@@ -39,7 +39,7 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
 
   if (mode === 'selecting') {
     return (
-      <Select value="" fullWidth size="small" onChange={handleSelect}>
+      <Select value="" fullWidth size="small" onChange={handleSelect} MenuProps={{ style: { maxHeight: 480 } }}>
         <MenuItem value="add">
           <AddOutlined />
           {t('admin.product.add')}
@@ -50,7 +50,12 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
           </ListSubheader>,
           ...product.prices.map((price) => (
             <MenuItem key={price.id} sx={{ pl: 3 }} value={price.id}>
-              {formatPrice(price, settings.baseCurrency)}
+              <Typography color="text.primary">{formatPrice(price, settings.baseCurrency)}</Typography>
+              <Typography color="text.secondary" sx={{ ml: 2 }}>
+                {getPriceCurrencyOptions(price).length > 1
+                  ? ` +${getPriceCurrencyOptions(price).length - 1} more currencies`
+                  : ''}
+              </Typography>
             </MenuItem>
           )),
         ])}

package/src/components/payment-link/rename.tsx

@@ -26,8 +26,8 @@ export default function RenamePaymentLink({
   });
 
   const { handleSubmit, reset } = methods;
-  const onSubmit = async (data: any) => {
-    await handleSubmit(onSave)(data);
+  const onSubmit = async () => {
+    await handleSubmit(onSave)();
     reset();
     onCancel(null);
   };

package/src/components/payment-method/arcblock.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+import FormInput from '../input';
+
+export default function ArcBlockMethodForm() {
+  const { t } = useLocaleContext();
+
+  return (
+    <>
+      <FormInput
+        key="name"
+        name="name"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.name.label')}
+        placeholder={t('admin.paymentMethod.name.tip')}
+      />
+      <FormInput
+        key="description"
+        name="description"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.description.label')}
+        placeholder={t('admin.paymentMethod.description.tip')}
+      />
+      <FormInput
+        key="secret_key"
+        name="settings.arcblock.chain_id"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.arcblock.chain_id.label')}
+        placeholder={t('admin.paymentMethod.arcblock.chain_id.tip')}
+      />
+      <FormInput
+        key="api_host"
+        name="settings.arcblock.api_host"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.arcblock.api_host.label')}
+        placeholder={t('admin.paymentMethod.arcblock.api_host.tip')}
+      />
+      <FormInput
+        key="explorer_host"
+        name="settings.arcblock.explorer_host"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.arcblock.explorer_host.label')}
+        placeholder={t('admin.paymentMethod.arcblock.explorer_host.tip')}
+      />
+    </>
+  );
+}

package/src/components/payment-method/bitcoin.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+import FormInput from '../input';
+
+export default function BitcoinMethodForm() {
+  const { t } = useLocaleContext();
+
+  return (
+    <>
+      <FormInput
+        key="name"
+        name="name"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.name.label')}
+        placeholder={t('admin.paymentMethod.name.tip')}
+      />
+      <FormInput
+        key="description"
+        name="description"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.description.label')}
+        placeholder={t('admin.paymentMethod.description.tip')}
+      />
+      <FormInput
+        key="secret_key"
+        name="settings.bitcoin.chain_id"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.bitcoin.chain_id.label')}
+        placeholder={t('admin.paymentMethod.bitcoin.chain_id.tip')}
+      />
+      <FormInput
+        key="api_host"
+        name="settings.bitcoin.api_host"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.bitcoin.api_host.label')}
+        placeholder={t('admin.paymentMethod.bitcoin.api_host.tip')}
+      />
+      <FormInput
+        key="explorer_host"
+        name="settings.bitcoin.explorer_host"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.bitcoin.explorer_host.label')}
+        placeholder={t('admin.paymentMethod.bitcoin.explorer_host.tip')}
+      />
+    </>
+  );
+}

package/src/components/payment-method/ethereum.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+import FormInput from '../input';
+
+export default function EthereumMethodForm() {
+  const { t } = useLocaleContext();
+
+  return (
+    <>
+      <FormInput
+        key="name"
+        name="name"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.name.label')}
+        placeholder={t('admin.paymentMethod.name.tip')}
+      />
+      <FormInput
+        key="description"
+        name="description"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.description.label')}
+        placeholder={t('admin.paymentMethod.description.tip')}
+      />
+      <FormInput
+        key="secret_key"
+        name="settings.ethereum.chain_id"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.ethereum.chain_id.label')}
+        placeholder={t('admin.paymentMethod.ethereum.chain_id.tip')}
+      />
+      <FormInput
+        key="api_host"
+        name="settings.ethereum.api_host"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.ethereum.api_host.label')}
+        placeholder={t('admin.paymentMethod.ethereum.api_host.tip')}
+      />
+      <FormInput
+        key="explorer_host"
+        name="settings.ethereum.explorer_host"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.ethereum.explorer_host.label')}
+        placeholder={t('admin.paymentMethod.ethereum.explorer_host.tip')}
+      />
+    </>
+  );
+}

package/src/components/payment-method/form.tsx

@@ -0,0 +1,54 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Stack, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+
+import ArcBlockMethodForm from './arcblock';
+import BitcoinMethodForm from './bitcoin';
+import EthereumMethodForm from './ethereum';
+import StripeMethodForm from './stripe';
+
+export default function PaymentMethodForm() {
+  const { t } = useLocaleContext();
+  const { control, setValue } = useFormContext();
+
+  const type = useWatch({ control, name: 'type' });
+
+  return (
+    <Root direction="column" alignItems="flex-start" spacing={2}>
+      <Controller
+        name="type"
+        control={control}
+        render={({ field }) => (
+          <ToggleButtonGroup {...field} onChange={(_, value: string) => setValue(field.name, value)} exclusive>
+            <ToggleButton value="arcblock">ArcBlock</ToggleButton>
+            <ToggleButton value="stripe">Stripe</ToggleButton>
+            <ToggleButton value="ethereum" disabled>
+              Ethereum
+            </ToggleButton>
+            <ToggleButton value="bitcoin" disabled>
+              Bitcoin
+            </ToggleButton>
+          </ToggleButtonGroup>
+        )}
+      />
+      <Typography variant="h6" sx={{ mb: 3, fontWeight: 600 }}>
+        {t('admin.paymentMethod.settings')}
+      </Typography>
+      {type === 'stripe' && <StripeMethodForm />}
+      {type === 'arcblock' && <ArcBlockMethodForm />}
+      {type === 'ethereum' && <EthereumMethodForm />}
+      {type === 'bitcoin' && <BitcoinMethodForm />}
+    </Root>
+  );
+}
+
+const Root = styled(Stack)`
+  select {
+    border: none;
+    &:active,
+    &:focus {
+      border: none;
+    }
+  }
+`;

package/src/components/payment-method/stripe.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+import FormInput from '../input';
+
+export default function StripeMethodForm() {
+  const { t } = useLocaleContext();
+
+  return (
+    <>
+      <FormInput
+        key="name"
+        name="name"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.name.label')}
+        placeholder={t('admin.paymentMethod.name.tip')}
+      />
+      <FormInput
+        key="description"
+        name="description"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.description.label')}
+        placeholder={t('admin.paymentMethod.description.tip')}
+      />
+      <FormInput
+        key="publishable_key"
+        name="settings.stripe.publishable_key"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.stripe.publishable_key.label')}
+        placeholder={t('admin.paymentMethod.stripe.publishable_key.tip')}
+      />
+      <FormInput
+        key="secret_key"
+        name="settings.stripe.secret_key"
+        type="password"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.stripe.secret_key.label')}
+        placeholder={t('admin.paymentMethod.stripe.secret_key.tip')}
+      />
+    </>
+  );
+}

package/src/components/portal/invoice/list.tsx

@@ -43,7 +43,7 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TInvoiceExpanded>>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, size: pageSize, status: 'open,paid', customer_id });
+      return fetchData({ page, pageSize, status: 'open,paid', customer_id });
     },
     {
       reloadDeps: [customer_id],

package/src/components/portal/subscription/list.tsx

@@ -41,7 +41,7 @@ export function CurrentSubscriptionsInner({ id, onChange }: Props) {
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TSubscriptionExpanded>>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, size: pageSize, status: 'active,trialing,paused', customer_id: id });
+      return fetchData({ page, pageSize, status: 'active,trialing,paused', customer_id: id });
     },
     {
       reloadDeps: [id],

package/src/components/price/currency-select.tsx

@@ -0,0 +1,53 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { AddOutlined } from '@mui/icons-material';
+import { ListSubheader, MenuItem, Select, Stack, Typography } from '@mui/material';
+import { useState } from 'react';
+import type { LiteralUnion } from 'type-fest';
+
+import { useSettingsContext } from '../../contexts/settings';
+import { getSupportedPaymentMethods } from '../../libs/util';
+import Currency from '../currency';
+
+type Props = {
+  mode: LiteralUnion<'waiting' | 'selecting', string>;
+  hasSelected: (currency: any) => boolean;
+  onSelect: (currencyId: string) => void;
+};
+
+export default function CurrencySelect({ mode: initialMode, hasSelected, onSelect }: Props) {
+  const { t } = useLocaleContext();
+  const { settings } = useSettingsContext();
+  const [mode, setMode] = useState(initialMode);
+
+  const handleSelect = (e: any) => {
+    setMode('waiting');
+    onSelect(e.target.value);
+  };
+
+  if (mode === 'selecting') {
+    return (
+      <Select value="" sx={{ width: 260 }} size="small" onChange={handleSelect}>
+        {getSupportedPaymentMethods(settings.paymentMethods, hasSelected).map((method) => [
+          <ListSubheader key={method.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
+            {method.name}
+          </ListSubheader>,
+          ...method.payment_currencies.map((currency) => (
+            <MenuItem key={currency.id} sx={{ pl: 3 }} value={currency.id}>
+              <Stack direction="row" justifyContent="space-between" sx={{ width: '100%' }}>
+                <Currency logo={currency.logo} name={currency.name} />
+                <Typography fontWeight="bold">{currency.symbol}</Typography>
+              </Stack>
+            </MenuItem>
+          )),
+        ])}
+      </Select>
+    );
+  }
+
+  return (
+    <Stack sx={{ cursor: 'pointer' }} direction="row" alignItems="center" onClick={() => setMode('selecting')}>
+      <AddOutlined color="primary" />
+      <Typography color="primary">{t('admin.price.currency.add')}</Typography>
+    </Stack>
+  );
+}