payment-kit 1.13.17 → 1.13.19

package/src/components/checkout/pay.tsx

@@ -2,6 +2,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type {
   TCheckoutSessionExpanded,
   TCustomer,
+  TPaymentCurrency,
   TPaymentIntent,
   TPaymentLink,
   TPaymentMethodExpanded,
@@ -9,9 +10,11 @@ import type {
 import { Box, Fade, Stack } from '@mui/material';
 import { styled } from '@mui/system';
 import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
 
+import { useSessionContext } from '../../contexts/session';
 import { useSettingsContext } from '../../contexts/settings';
-import { formatError, getStatementDescriptor } from '../../libs/util';
+import { findCurrency, formatError, getStatementDescriptor } from '../../libs/util';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
 import PaymentForm from './form';
@@ -54,7 +57,6 @@ export default function CheckoutPay({
   onPaid,
   onError,
 }: Props) {
-  const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = useSettingsContext();
 
   useEffect(() => {
@@ -108,42 +110,117 @@ export default function CheckoutPay({
     );
   }
 
-  const brand = getStatementDescriptor(checkoutSession.line_items);
+  return (
+    <CheckoutPayMain
+      checkoutSession={checkoutSession}
+      paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
+      paymentLink={paymentLink}
+      paymentIntent={paymentIntent}
+      completed={completed}
+      customer={customer as TCustomer}
+      onPaid={onPaid}
+      onError={onError}
+    />
+  );
+}
+
+type MainProps = {
+  onPaid: Function;
+  onError: Function;
+  checkoutSession: TCheckoutSessionExpanded;
+  paymentMethods: TPaymentMethodExpanded[];
+  paymentLink?: TPaymentLink;
+  paymentIntent?: TPaymentIntent;
+  customer: TCustomer;
+  completed?: boolean;
+};
+
+CheckoutPayMain.defaultProps = {
+  paymentLink: null,
+  paymentIntent: null,
+  completed: false,
+};
+
+export function CheckoutPayMain({
+  checkoutSession,
+  paymentMethods,
+  paymentLink,
+  paymentIntent,
+  customer,
+  completed,
+  onPaid,
+  onError,
+}: MainProps) {
+  const { t } = useLocaleContext();
+  const { session } = useSessionContext();
+  const { settings } = useSettingsContext();
+
+  const defaultCurrencyId = checkoutSession?.currency_id || checkoutSession?.line_items[0]?.price.currency_id;
+  const defaultMethodId = paymentMethods.find((m) => m.payment_currencies.some((c) => c.id === defaultCurrencyId))?.id;
+
+  const methods = useForm({
+    defaultValues: {
+      customer_name: customer?.name || session.user?.fullName || '',
+      customer_email: customer?.email || session.user?.email || '',
+      customer_phone: customer?.phone || session.user?.phone || '',
+      payment_method: defaultMethodId,
+      payment_currency: defaultCurrencyId,
+      billing_address: Object.assign(
+        {
+          country: '',
+          state: '',
+          city: '',
+          line1: '',
+          line2: '',
+          postal_code: '',
+        },
+        customer?.address || {},
+        { country: customer?.address?.country || 'us' }
+      ),
+    },
+  });
+
+  const currencyId = methods.watch('payment_currency') as string;
+  const currency =
+    (findCurrency(paymentMethods as TPaymentMethodExpanded[], currencyId as string) as TPaymentCurrency) ||
+    settings.baseCurrency;
 
   return (
-    <PaymentRoot>
-      <Stack direction="row" className="cko-container">
-        <Fade in>
-          <Stack className="cko-overview" direction="column">
-            <PaymentHeader checkoutSession={checkoutSession} />
-            <PaymentSummary checkoutSession={checkoutSession} />
+    <FormProvider {...methods}>
+      <PaymentRoot>
+        <Stack direction="row" className="cko-container">
+          <Fade in>
+            <Stack className="cko-overview" direction="column">
+              <PaymentHeader checkoutSession={checkoutSession} />
+              <PaymentSummary checkoutSession={checkoutSession} currency={currency} />
+            </Stack>
+          </Fade>
+          <Stack className="cko-payment" direction="column" spacing={4}>
+            {completed && (
+              <PaymentSuccess
+                payee={getStatementDescriptor(checkoutSession.line_items)}
+                action={checkoutSession.mode}
+                message={
+                  paymentLink?.after_completion?.hosted_confirmation?.custom_message ||
+                  t(`checkout.completed.${checkoutSession.mode}`)
+                }
+              />
+            )}
+            {!completed && (
+              <PaymentForm
+                checkoutSession={checkoutSession}
+                paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
+                paymentIntent={paymentIntent}
+                customer={customer}
+                onPaid={onPaid}
+                onError={onError}
+              />
+            )}
           </Stack>
-        </Fade>
-        <Stack className="cko-payment" direction="column" spacing={4}>
-          {completed && (
-            <PaymentSuccess
-              payee={brand}
-              action={checkoutSession.mode}
-              message={
-                paymentLink?.after_completion?.hosted_confirmation?.custom_message ||
-                t(`checkout.completed.${checkoutSession.mode}`)
-              }
-            />
-          )}
-          {!completed && (
-            <PaymentForm
-              checkoutSession={checkoutSession}
-              paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
-              paymentIntent={paymentIntent}
-              customer={customer}
-              onPaid={onPaid}
-              onError={onError}
-            />
-          )}
+          <CheckoutFooter className="cko-footer" />
         </Stack>
-        <CheckoutFooter className="cko-footer" />
-      </Stack>
-    </PaymentRoot>
+      </PaymentRoot>
+    </FormProvider>
   );
 }
 
@@ -198,6 +275,10 @@ export const PaymentRoot = styled(Box)`
       margin: -1px 0 0 -1px;
     }
 
+    .MuiFormHelperText-root {
+      margin-left: 14px;
+    }
+
     .MuiOutlinedInput-notchedOutline {
       border: none;
     }

package/src/components/checkout/product-item.tsx

@@ -1,4 +1,4 @@
-import type { TCheckoutSessionExpanded, TLineItemExpanded } from '@did-pay/types';
+import type { TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@did-pay/types';
 import { Stack, Typography } from '@mui/material';
 
 import { formatLineItemPricing, formatRecurring } from '../../libs/util';
@@ -7,10 +7,11 @@ import ProductCard from './product-card';
 type Props = {
   item: TLineItemExpanded;
   session: TCheckoutSessionExpanded;
+  currency: TPaymentCurrency;
 };
 
-export default function ProductItem({ item, session }: Props) {
-  const pricing = formatLineItemPricing(item, session.currency, session.subscription_data?.trial_period_days || 0);
+export default function ProductItem({ item, session, currency }: Props) {
+  const pricing = formatLineItemPricing(item, currency, session.subscription_data?.trial_period_days || 0);
   const metered = item.price?.recurring?.usage_type === 'metered' ? ' based on usage' : '';
   return (
     <Stack direction="row" alignItems="center" justifyContent="space-between">

package/src/components/checkout/summary.tsx

@@ -1,4 +1,4 @@
-import type { TCheckoutSessionExpanded, TLineItemExpanded } from '@did-pay/types';
+import type { TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@did-pay/types';
 import { Fade, Stack, Typography } from '@mui/material';
 
 import { formatCheckoutHeadlines } from '../../libs/util';
@@ -7,10 +7,11 @@ import ProductItem from './product-item';
 
 type Props = {
   checkoutSession: TCheckoutSessionExpanded;
+  currency: TPaymentCurrency;
 };
 
-export default function PaymentSummary({ checkoutSession }: Props) {
-  const headlines = formatCheckoutHeadlines(checkoutSession);
+export default function PaymentSummary({ checkoutSession, currency }: Props) {
+  const headlines = formatCheckoutHeadlines(checkoutSession, currency);
   return (
     <Fade in>
       <Stack className="cko-product" direction="column" sx={{ mt: 4 }}>
@@ -25,7 +26,7 @@ export default function PaymentSummary({ checkoutSession }: Props) {
         </Stack>
         <Stack spacing={2}>
           {checkoutSession.line_items.map((x: TLineItemExpanded) => (
-            <ProductItem key={x.price_id} item={x} session={checkoutSession} />
+            <ProductItem key={x.price_id} item={x} session={checkoutSession} currency={currency} />
           ))}
         </Stack>
       </Stack>

package/src/components/drawer-form.tsx

@@ -12,13 +12,13 @@ type Props = {
   text: string;
   addons: React.ReactNode;
   children: React.ReactNode;
-  maxWidth?: number;
+  width?: number;
   style?: Record<string, any>;
 };
 
 DrawerForm.defaultProps = {
   style: {},
-  maxWidth: 960,
+  width: 960,
 };
 
 export default function DrawerForm(props: Props) {
@@ -38,7 +38,7 @@ export default function DrawerForm(props: Props) {
         open={open}
         onClose={() => setOpen(false)}
         sx={props.style || {}}
-        maxWidth={props.maxWidth}
+        width={props.width}
         disableEscapeKeyDown>
         <Stack
           direction="row"
@@ -72,6 +72,6 @@ const Container = styled<any>(Drawer)`
   .MuiPaper-root {
     width: 80%;
     min-width: 360px;
-    max-width: ${(props) => props.maxWidth}px;
+    max-width: ${(props) => props.width}px;
   }
 `;

package/src/components/input.tsx

@@ -1,21 +1,35 @@
-import { Box, FormLabel, TextField, TextFieldProps } from '@mui/material';
+import { Box, FormLabel, InputAdornment, TextField, TextFieldProps, Typography } from '@mui/material';
+import get from 'lodash/get';
 import { Controller, RegisterOptions, useFormContext } from 'react-hook-form';
 
 type InputProps = TextFieldProps & {
   name: string;
   label?: string;
   placeholder?: string;
+  errorPosition?: 'right' | 'bottom';
   rules?: RegisterOptions;
 };
 
 FormInput.defaultProps = {
   label: '',
   placeholder: '',
+  errorPosition: 'bottom',
   rules: {},
 };
 
-export default function FormInput({ name, label, placeholder, rules, ...rest }: InputProps) {
+export function FormInputError({ error }: { error: string }) {
+  return (
+    <InputAdornment position="end">
+      <Typography component="span" color="error">
+        {error}
+      </Typography>
+    </InputAdornment>
+  );
+}
+
+export default function FormInput({ name, label, placeholder, rules, errorPosition, ...rest }: InputProps) {
   const { control, formState } = useFormContext();
+  const error = get(formState.errors, name)?.message as string;
   return (
     <Controller
       name={name}
@@ -26,12 +40,16 @@ export default function FormInput({ name, label, placeholder, rules, ...rest }:
           {!!label && <FormLabel>{label}</FormLabel>}
           <TextField
             fullWidth
-            error={!!formState.errors[name]}
-            helperText={formState.errors[name]?.message as string}
+            error={!!get(formState.errors, name)}
+            helperText={errorPosition === 'bottom' && error ? error : ''}
             placeholder={placeholder}
             size="small"
             {...field}
             {...rest}
+            InputProps={Object.assign(
+              rest.InputProps || {},
+              errorPosition === 'right' && error ? { endAdornment: <FormInputError error={error} /> } : {}
+            )}
           />
         </Box>
       )}

package/src/components/invoice/table.tsx

@@ -2,7 +2,7 @@ import type { TInvoiceExpanded } from '@did-pay/types';
 import { Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 
-import { formatAmount, formatToDate } from '../../libs/util';
+import { formatAmount, formatToDate, getPriceUintAmountByCurrency } from '../../libs/util';
 import LineItemActions from '../subscription/items/actions';
 
 type Props = {
@@ -53,7 +53,12 @@ export default function InvoiceTable({ invoice, simple }: Props) {
               {line.price.product.unit_label ? ` (per ${line.price.product.unit_label})` : ''}
             </TableCell>
             <TableCell align="right">{line.quantity}</TableCell>
-            <TableCell align="right">{formatAmount(line.price.unit_amount, invoice.paymentCurrency.decimal)}</TableCell>
+            <TableCell align="right">
+              {formatAmount(
+                getPriceUintAmountByCurrency(line.price, invoice.paymentCurrency),
+                invoice.paymentCurrency.decimal
+              )}
+            </TableCell>
             <TableCell align="right">{formatAmount(line.amount, invoice.paymentCurrency.decimal)}</TableCell>
             {!simple && (
               <TableCell align="right">
@@ -94,7 +99,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
             Amount Due
           </TableCell>
           <TableCell align="right" sx={{ fontWeight: 600 }}>
-            {formatAmount(invoice.amount_due, invoice.paymentCurrency.decimal)}
+            {formatAmount(invoice.amount_remaining, invoice.paymentCurrency.decimal)}
           </TableCell>
           <TableCell>&nbsp;</TableCell>
         </TableRow>

package/src/components/payment-link/before-pay.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 
 import { useProductsContext } from '../../contexts/products';
-import { getProductByPriceId, isPriceRecurringAligned } from '../../libs/util';
+import { getProductByPriceId, isPriceAligned } from '../../libs/util';
 import CreateProduct from '../product/create';
 import LineItem from './item';
 import ProductSelect from './product-select';
@@ -53,11 +53,11 @@ export default function BeforePay() {
   };
 
   return (
-    <Stack spacing={2}>
+    <Stack spacing={2} sx={{ width: '100%' }}>
       <Typography variant="h6" sx={{ fontWeight: 600 }}>
         {t('admin.paymentLink.products')} ({getValues().line_items.length})
       </Typography>
-      <Stack spacing={2}>
+      <Stack spacing={2} sx={{ width: '100%' }}>
         {items.fields.map((item, index) => {
           // @ts-ignore
           const product = getProductByPriceId(products, item.price_id);
@@ -69,7 +69,7 @@ export default function BeforePay() {
             <LineItem
               key={item.id}
               // @ts-ignore
-              valid={isPriceRecurringAligned(items.fields, products, index)}
+              valid={isPriceAligned(items.fields, products, index).aligned}
               prefix={`line_items.${index}`}
               product={product}
               onRemove={() => items.remove(index)}
@@ -77,9 +77,14 @@ export default function BeforePay() {
             />
           );
         })}
-        {items.fields.some((_, index) => !isPriceRecurringAligned(items.fields as any[], products, index)) && (
+        {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).recurring) && (
           <Typography color="error" fontSize="small">
-            {t('admin.paymentLink.notAligned')}
+            {t('admin.paymentLink.recurringNotAligned')}
+          </Typography>
+        )}
+        {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).currency) && (
+          <Typography color="error" fontSize="small">
+            {t('admin.paymentLink.currencyNotAligned')}
           </Typography>
         )}
         <ProductSelect

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

@@ -0,0 +1,13 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/system';
+
+const Chrome = styled(Box)`
+  background-color: #fcfeff;
+  border-radius: 8px;
+  margin-top: 40px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 20px 44px #32325d1f, 0 -1px 32px #32325d0f, 0 3px 12px #00000014;
+`;
+
+export default Chrome;

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

@@ -0,0 +1,31 @@
+import { Box } from '@mui/material';
+import { useSize } from 'ahooks';
+import IframeResizer from 'iframe-resizer-react';
+import { useRef } from 'react';
+
+import Chrome from './chrome';
+
+PaymentLinkPreview.defaultProps = {
+  version: 1,
+};
+
+export default function PaymentLinkPreview({ id, version }: { id: string; version?: number }) {
+  const ref = useRef(null);
+  const size = useSize(ref);
+  return (
+    <Chrome ref={ref}>
+      <Box sx={{ width: '100%' }}>&nbsp;</Box>
+      <IframeResizer
+        style={{
+          width: '1px',
+          minWidth: size?.width,
+          minHeight: '64vh',
+          transform: 'scale(0.8)',
+          transformOrigin: 'center',
+          border: 'none',
+        }}
+        src={`${window.blocklet.prefix}checkout/pay/${id}?preview=1&version=${version}`}
+      />
+    </Chrome>
+  );
+}

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-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')}
+      />
+    </>
+  );
+}