payment-kit 1.13.22 → 1.13.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.22",
+  "version": "1.13.24",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -64,6 +64,7 @@
     "axios": "^0.27.2",
     "body-parser": "^1.20.2",
     "cookie-parser": "^1.4.6",
+    "copy-to-clipboard": "^3.3.3",
     "cors": "^2.8.5",
     "dayjs": "^1.11.10",
     "dotenv-flow": "^3.3.0",
@@ -100,7 +101,7 @@
   "devDependencies": {
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.22",
+    "@did-pay/types": "1.13.24",
     "@types/cookie-parser": "^1.4.4",
     "@types/cors": "^2.8.14",
     "@types/dotenv-flow": "^3.3.1",
@@ -137,5 +138,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "c8b53669ddb7118a2e43596548f031547b2d3da3"
+  "gitHead": "abe08b8cb109399d3b53b985f628d9688b561c0c"
 }

package/src/components/actions.tsx

@@ -4,6 +4,8 @@ import { Button, IconButton, ListItemText, Menu, MenuItem } from '@mui/material'
 import React, { useState } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
+import { stopEvent } from '../libs/util';
+
 type ActionItem = {
   label: string;
   handler: Function;
@@ -30,20 +32,12 @@ export default function Actions(props: ActionsProps) {
   const open = Boolean(anchorEl);
 
   const onOpen = (e: React.SyntheticEvent<any>) => {
-    try {
-      e.stopPropagation();
-      e.preventDefault();
-      // eslint-disable-next-line no-empty
-    } catch {}
+    stopEvent(e);
     setAnchorEl(e.currentTarget);
   };
 
   const onClose = (e: React.SyntheticEvent<any>, handler?: Function) => {
-    try {
-      e.stopPropagation();
-      e.preventDefault();
-      // eslint-disable-next-line no-empty
-    } catch {}
+    stopEvent(e);
     setAnchorEl(null);
 
     if (typeof handler === 'function') {

package/src/components/blockchain/tx.tsx

@@ -1,27 +1,56 @@
-import type { TPaymentMethod } from '@did-pay/types';
+import type { PaymentDetails, TPaymentMethod } from '@did-pay/types';
 import { OpenInNewOutlined } from '@mui/icons-material';
 import { Link, Stack, Typography } from '@mui/material';
 import { joinURL } from 'ufo';
 
-const getTxLink = (method: TPaymentMethod, hash: string) => {
+const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
   if (method.type === 'arcblock') {
-    return joinURL(method.settings.arcblock?.explorer_host as string, '/tx', hash);
+    return {
+      link: joinURL(method.settings.arcblock?.explorer_host as string, '/tx', details.arcblock?.tx_hash as string),
+      text: details.arcblock?.tx_hash as string,
+    };
   }
   if (method.type === 'bitcoin') {
-    return joinURL(method.settings.bitcoin?.explorer_host as string, '/tx', hash);
+    return {
+      link: joinURL(method.settings.bitcoin?.explorer_host as string, '/tx', details.bitcoin?.tx_hash as string),
+      text: details.bitcoin?.tx_hash as string,
+    };
   }
   if (method.type === 'ethereum') {
-    return joinURL(method.settings.ethereum?.explorer_host as string, '/tx', hash);
+    return {
+      link: joinURL(method.settings.ethereum?.explorer_host as string, '/tx', details.ethereum?.tx_hash as string),
+      text: details.ethereum?.tx_hash as string,
+    };
+  }
+  if (method.type === 'stripe') {
+    const dashboard = method.livemode ? 'https://dashboard.stripe.com' : 'https://dashboard.stripe.com/test';
+    return {
+      link: joinURL(
+        method.settings.stripe?.dashboard || dashboard,
+        'payments',
+        details.stripe?.payment_intent_id as string
+      ),
+      text: details.stripe?.payment_intent_id as string,
+    };
   }
 
-  return hash;
+  return { text: 'N/A', link: '' };
 };
 
-export default function TxLink(props: { hash: string; method: TPaymentMethod }) {
+export default function TxLink(props: { details: PaymentDetails; method: TPaymentMethod }) {
+  if (!props.details) {
+    return (
+      <Typography component="small" color="text.secondary">
+        None
+      </Typography>
+    );
+  }
+
+  const { text, link } = getTxLink(props.method, props.details);
   return (
-    <Link href={getTxLink(props.method, props.hash)} target="_blank" rel="noopener noreferrer">
+    <Link href={link} target="_blank" rel="noopener noreferrer">
       <Stack component="span" direction="row" alignItems="center" spacing={1}>
-        <Typography component="span">{props.hash}</Typography>
+        <Typography component="span">{text}</Typography>
         <OpenInNewOutlined fontSize="small" />
       </Stack>
     </Link>

package/src/components/click-boundary.tsx

@@ -0,0 +1,7 @@
+import { Box } from '@mui/material';
+
+import { stopEvent } from '../libs/util';
+
+export default function ClickBoundary({ children }: { children: React.ReactNode }) {
+  return <Box onClick={stopEvent}>{children}</Box>;
+}

package/src/components/confirm.tsx

@@ -17,29 +17,13 @@ export default function ConfirmDialog({
   loading?: boolean;
 }) {
   const { t } = useLocaleContext();
-  const handleConfirm = (e: any) => {
-    try {
-      e.stopPropagation();
-      e.preventDefault();
-      // eslint-disable-next-line no-empty
-    } catch {}
-    onConfirm(e);
-  };
-  const handleCancel = (e: any) => {
-    try {
-      e.stopPropagation();
-      e.preventDefault();
-      // eslint-disable-next-line no-empty
-    } catch {}
-    onCancel(e);
-  };
 
   return (
     <Confirm
       open
       title={title}
-      onConfirm={handleConfirm}
-      onCancel={handleCancel}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
       confirmButton={{
         text: t('common.confirm'),
         props: { color: 'error', size: 'small', variant: 'contained', disabled: !!loading },

package/src/components/customer/actions.tsx

@@ -7,6 +7,7 @@ import type { LiteralUnion } from 'type-fest';
 import api from '../../libs/api';
 import { formatError } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
 
 type Props = {
@@ -41,7 +42,7 @@ export default function CustomerActions({ data, onChange, variant }: Props) {
   };
 
   return (
-    <>
+    <ClickBoundary>
       <Actions
         variant={variant}
         actions={[
@@ -68,6 +69,6 @@ export default function CustomerActions({ data, onChange, variant }: Props) {
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }

package/src/components/invoice/action.tsx

@@ -8,6 +8,7 @@ import type { LiteralUnion } from 'type-fest';
 import api from '../../libs/api';
 import { formatError } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
 
 type Props = {
@@ -78,7 +79,7 @@ export default function InvoiceActions({ data, variant, onChange }: Props) {
   }
 
   return (
-    <>
+    <ClickBoundary>
       <Actions variant={variant} actions={actions} />
       {state.action === 'xxx' && (
         <ConfirmDialog
@@ -89,6 +90,6 @@ export default function InvoiceActions({ data, variant, onChange }: Props) {
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }

package/src/components/payment-intent/actions.tsx

@@ -8,6 +8,7 @@ import type { LiteralUnion } from 'type-fest';
 import api from '../../libs/api';
 import { formatError } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
 
 type Props = {
@@ -58,14 +59,14 @@ export default function PaymentIntentActions({ data, variant }: Props) {
   if (variant === 'compact') {
     actions.push({
       label: t('admin.paymentIntent.view'),
-      handler: () => navigate(`/admin/payments/${data.customer_id}`),
+      handler: () => navigate(`/admin/payments/${data.id}`),
       color: 'primary',
       disabled: false,
     });
   }
 
   return (
-    <>
+    <ClickBoundary>
       <Actions variant={variant} actions={actions} />
       {state.action === 'refund' && (
         <ConfirmDialog
@@ -76,6 +77,6 @@ export default function PaymentIntentActions({ data, variant }: Props) {
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }

package/src/components/payment-intent/list.tsx

@@ -6,7 +6,7 @@ import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography }
 import { fromUnitToToken } from '@ocap/util';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import api from '../../libs/api';
 import { formatTime, getPaymentIntentStatusColor } from '../../libs/util';
@@ -152,7 +152,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
-          return <Link to={`/admin/customers/${item?.customer.id}`}>{item?.customer.email}</Link>;
+          return item.customer.email;
         },
       },
     });

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

@@ -2,11 +2,14 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TPaymentLinkExpanded } from '@did-pay/types';
 import { useSetState } from 'ahooks';
+import Copy from 'copy-to-clipboard';
 import type { LiteralUnion } from 'type-fest';
+import { joinURL } from 'ufo';
 
 import api from '../../libs/api';
 import { formatError } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
 import RenamePaymentLink from './rename';
 
@@ -53,7 +56,7 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
       setState({ loading: false, action: '' });
     }
   };
-  const noRemove = async () => {
+  const onRemove = async () => {
     try {
       setState({ loading: true });
       await api.delete(`/api/payment-links/${data.id}`).then((res) => res.data);
@@ -66,18 +69,27 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
       setState({ loading: false, action: '' });
     }
   };
+  const onCopyLink = () => {
+    Copy(joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pay/${data.id}`));
+    Toast.success(t('common.copied'));
+  };
 
   return (
-    <>
+    <ClickBoundary>
       <Actions
         variant={variant}
         actions={[
-          // {
-          //   label: t('admin.paymentLink.edit'),
-          //   handler: () => setState({ action: 'edit' }),
-          //   color: 'primary',
-          //   divider: true,
-          // },
+          {
+            label: t('admin.paymentLink.edit'),
+            handler: () => setState({ action: 'edit' }),
+            color: 'primary',
+            disabled: true,
+          },
+          {
+            label: t('admin.paymentLink.copyLink'),
+            handler: onCopyLink,
+            color: 'primary',
+          },
           { label: t('admin.paymentLink.rename'), handler: () => setState({ action: 'rename' }), color: 'primary' },
           { label: t('admin.paymentLink.archive'), handler: () => setState({ action: 'archive' }), color: 'primary' },
           { label: t('admin.paymentLink.remove'), handler: () => setState({ action: 'remove' }), color: 'error' },
@@ -102,13 +114,13 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
       )}
       {state.action === 'remove' && (
         <ConfirmDialog
-          onConfirm={noRemove}
+          onConfirm={onRemove}
           onCancel={() => setState({ action: '' })}
           title={t('admin.paymentLink.remove')}
           message={t('admin.paymentLink.removeTip')}
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }

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

@@ -9,6 +9,7 @@ import { useSettingsContext } from '../../contexts/settings';
 import api from '../../libs/api';
 import { formatError, formatPrice } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import InfoCard from '../info-card';
 import EditProduct from '../product/edit';
 
@@ -52,21 +53,23 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
         borderRadius: 2,
         position: 'relative',
       }}>
-      <Actions
-        sx={{ position: 'absolute', top: 0, right: 0 }}
-        actions={[
-          {
-            label: t('admin.product.edit'),
-            handler: () => setState({ editing: true }),
-            color: 'primary',
-          },
-          {
-            label: t('admin.product.remove'),
-            handler: onRemove,
-            color: 'error',
-          },
-        ]}
-      />
+      <ClickBoundary>
+        <Actions
+          sx={{ position: 'absolute', top: 0, right: 0 }}
+          actions={[
+            {
+              label: t('admin.product.edit'),
+              handler: () => setState({ editing: true }),
+              color: 'primary',
+            },
+            {
+              label: t('admin.product.remove'),
+              handler: onRemove,
+              color: 'error',
+            },
+          ]}
+        />
+      </ClickBoundary>
       <Stack direction="column" alignItems="flex-start">
         <InfoCard
           logo={product.images[0]}

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

@@ -9,7 +9,6 @@ export default function StripeMethodForm() {
   return (
     <>
       <FormInput
-        key="name"
         name="name"
         type="text"
         rules={{ required: true }}
@@ -17,7 +16,6 @@ export default function StripeMethodForm() {
         placeholder={t('admin.paymentMethod.name.tip')}
       />
       <FormInput
-        key="description"
         name="description"
         type="text"
         rules={{ required: true }}
@@ -25,7 +23,13 @@ export default function StripeMethodForm() {
         placeholder={t('admin.paymentMethod.description.tip')}
       />
       <FormInput
-        key="publishable_key"
+        name="settings.stripe.dashboard"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.stripe.dashboard.label')}
+        placeholder={t('admin.paymentMethod.stripe.dashboard.tip')}
+      />
+      <FormInput
         name="settings.stripe.publishable_key"
         type="text"
         rules={{ required: true }}
@@ -33,7 +37,6 @@ export default function StripeMethodForm() {
         placeholder={t('admin.paymentMethod.stripe.publishable_key.tip')}
       />
       <FormInput
-        key="secret_key"
         name="settings.stripe.secret_key"
         type="password"
         rules={{ required: true }}

package/src/components/price/actions.tsx

@@ -1,6 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 
 type PriceActionProps = {
   onDuplicate: Function;
@@ -11,11 +12,13 @@ export default function PriceActions(props: PriceActionProps) {
   const { t } = useLocaleContext();
 
   return (
-    <Actions
-      actions={[
-        { label: t('admin.price.duplicate'), handler: props.onDuplicate, color: 'primary' },
-        { label: t('admin.price.remove'), handler: props.onRemove, color: 'error' },
-      ]}
-    />
+    <ClickBoundary>
+      <Actions
+        actions={[
+          { label: t('admin.price.duplicate'), handler: props.onDuplicate, color: 'primary' },
+          { label: t('admin.price.remove'), handler: props.onRemove, color: 'error' },
+        ]}
+      />
+    </ClickBoundary>
   );
 }

package/src/components/price/form.tsx

@@ -125,7 +125,10 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
         <Controller
           name={getFieldName('unit_amount')}
           control={control}
-          rules={{ required: t('admin.price.unit_amount.required'), min: t('admin.price.unit_amount.positive') }}
+          rules={{
+            required: t('admin.price.unit_amount.required'),
+            validate: (v) => (Number(v) > 0 ? true : t('admin.price.unit_amount.positive')),
+          }}
           disabled={isLocked}
           render={({ field }) => (
             <Box>

package/src/components/product/actions.tsx

@@ -7,6 +7,7 @@ import type { LiteralUnion } from 'type-fest';
 import api from '../../libs/api';
 import { formatError } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
 import EditProduct from './edit';
 
@@ -68,7 +69,7 @@ export default function ProductActions({ data, variant, onChange }: ProductActio
   };
 
   return (
-    <>
+    <ClickBoundary>
       <Actions
         variant={variant}
         actions={[
@@ -120,6 +121,6 @@ export default function ProductActions({ data, variant, onChange }: ProductActio
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }

package/src/components/subscription/actions/index.tsx

@@ -9,6 +9,7 @@ import type { LiteralUnion } from 'type-fest';
 import api from '../../../libs/api';
 import { formatError } from '../../../libs/util';
 import Actions from '../../actions';
+import ClickBoundary from '../../click-boundary';
 import ConfirmDialog from '../../confirm';
 import SubscriptionCancelForm from './cancel';
 import SubscriptionPauseForm from './pause';
@@ -111,7 +112,7 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
   }
 
   return (
-    <>
+    <ClickBoundary>
       <Actions variant={variant} actions={actions} />
       {state.action === 'cancel' && (
         <ConfirmDialog
@@ -140,7 +141,7 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }
 

package/src/components/subscription/items/actions.tsx

@@ -3,6 +3,7 @@ import type { TLineItemExpanded } from '@did-pay/types';
 import { useNavigate } from 'react-router-dom';
 
 import Actions from '../../actions';
+import ClickBoundary from '../../click-boundary';
 
 type Props = {
   data: TLineItemExpanded;
@@ -13,19 +14,21 @@ export default function LineItemActions(props: Props) {
   const navigate = useNavigate();
 
   return (
-    <Actions
-      actions={[
-        {
-          label: t('admin.price.view'),
-          handler: () => navigate(`/admin/products/${props.data.price_id}`),
-          color: 'primary',
-        },
-        {
-          label: t('admin.product.view'),
-          handler: () => navigate(`/admin/products/${props.data.price.product_id}`),
-          color: 'primary',
-        },
-      ]}
-    />
+    <ClickBoundary>
+      <Actions
+        actions={[
+          {
+            label: t('admin.price.view'),
+            handler: () => navigate(`/admin/products/${props.data.price_id}`),
+            color: 'primary',
+          },
+          {
+            label: t('admin.product.view'),
+            handler: () => navigate(`/admin/products/${props.data.price.product_id}`),
+            color: 'primary',
+          },
+        ]}
+      />
+    </ClickBoundary>
   );
 }

package/src/libs/util.ts

@@ -132,11 +132,17 @@ export const formatProductPrice = (
   return 'No price';
 };
 
-export const formatPrice = (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity: number = 1) => {
-  const amount = fromUnitToToken(
-    new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(quantity)),
-    currency.decimal
-  ).toString();
+export const formatPrice = (
+  price: TPrice,
+  currency: TPaymentCurrency,
+  unit_label?: string,
+  quantity: number = 1,
+  bn: boolean = true
+) => {
+  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, '/');
 
@@ -572,3 +578,13 @@ export function getSupportedPaymentCurrencies(items: TLineItemExpanded[]) {
 export function isValidCountry(code: string) {
   return defaultCountries.some((x) => x[1] === code);
 }
+
+export function stopEvent(e: React.SyntheticEvent<any>) {
+  try {
+    e.stopPropagation();
+    e.preventDefault();
+    // eslint-disable-next-line no-empty
+  } catch {
+    // Do nothing
+  }
+}

package/src/locales/en.tsx

@@ -44,6 +44,7 @@ export default flat({
     loadMore: 'View more {resource}',
     loadingMore: 'Loading more {resource}...',
     noMore: 'No more {resource}',
+    copied: 'Copied',
     metadata: {
       label: 'Metadata',
       add: 'Add more metadata',
@@ -173,6 +174,7 @@ export default flat({
       info: 'Payment link information',
       add: 'Create payment link',
       save: 'Create link',
+      copyLink: 'Copy URL',
       saved: 'Payment link successfully saved',
       additional: 'Additional options',
       beforePay: 'Payment page',
@@ -232,6 +234,10 @@ export default flat({
         tip: 'Not consumer facing',
       },
       stripe: {
+        dashboard: {
+          label: 'Dashboard URL',
+          tip: 'Used to generate links to Stripe dashboard',
+        },
         publishable_key: {
           label: 'Publishable Key',
           tip: 'Publishable Key, See Dashboard > Developers > API Keys',

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

@@ -176,7 +176,7 @@ export default function SubscriptionDetail(props: { id: string }) {
           {data.payment_details?.arcblock?.tx_hash && (
             <InfoRow
               label={t('common.txHash')}
-              value={<TxLink hash={data.payment_details.arcblock?.tx_hash} method={data.paymentMethod} />}
+              value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
             />
           )}
         </Stack>

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

@@ -141,12 +141,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
           />
           <InfoRow
             label={t('common.txHash')}
-            value={
-              <TxLink
-                hash={data.payment_details?.arcblock?.tx_hash || data.metadata?.txHash}
-                method={data.paymentMethod}
-              />
-            }
+            value={<TxLink details={data.payment_details as any} method={data.paymentMethod} />}
           />
         </Stack>
       </Box>