payment-kit 1.13.24 → 1.13.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.24",
+  "version": "1.13.26",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -45,8 +45,8 @@
     "@arcblock/did-connect": "^2.7.28",
     "@arcblock/did-util": "^1.18.92",
     "@arcblock/ux": "^2.7.28",
-    "@blocklet/logger": "^1.16.16",
-    "@blocklet/sdk": "^1.16.16",
+    "@blocklet/logger": "1.16.17-beta-ce49fe0e",
+    "@blocklet/sdk": "1.16.17-beta-ce49fe0e",
     "@blocklet/ui-react": "^2.7.28",
     "@blocklet/uploader": "^0.0.26",
     "@mui/icons-material": "^5.14.13",
@@ -101,7 +101,7 @@
   "devDependencies": {
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.24",
+    "@did-pay/types": "1.13.26",
     "@types/cookie-parser": "^1.4.4",
     "@types/cors": "^2.8.14",
     "@types/dotenv-flow": "^3.3.1",
@@ -138,5 +138,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "abe08b8cb109399d3b53b985f628d9688b561c0c"
+  "gitHead": "d58aed96307bf2c0e3fdcfcd6d98992436b290fd"
 }

package/src/app.tsx

@@ -36,7 +36,7 @@ function App() {
         <ErrorBoundary FallbackComponent={ErrorFallback} onReset={window.location.reload}>
           <Suspense
             fallback={
-              <Center relative="parent">
+              <Center>
                 <CircularProgress />
               </Center>
             }>

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

@@ -97,7 +97,7 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
       />
       {state.action === 'rename' && (
         <RenamePaymentLink
-          paymentLink={data}
+          data={data}
           loading={state.loading}
           onSave={onUpdate}
           onCancel={() => setState({ action: '' })}

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

@@ -1,7 +1,11 @@
 import { Box } from '@mui/material';
 import { styled } from '@mui/system';
 
-const Chrome = styled(Box)`
+export default function Chrome({ children, ...props }: any) {
+  return <Root {...props}>{children}</Root>;
+}
+
+const Root = styled(Box)`
   background-color: #fcfeff;
   border-radius: 8px;
   margin-top: 40px;
@@ -9,5 +13,3 @@ const Chrome = styled(Box)`
   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

@@ -1,3 +1,4 @@
+/* eslint-disable no-unsafe-optional-chaining */
 import { Box } from '@mui/material';
 import { useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
@@ -13,15 +14,17 @@ export default function PaymentLinkPreview({ id, version }: { id: string; versio
   const ref = useRef(null);
   const size = useSize(ref);
   return (
-    <Chrome ref={ref}>
-      <Box sx={{ width: '100%' }}>&nbsp;</Box>
+    <Chrome>
+      <Box ref={ref} sx={{ width: '100%' }}>
+        &nbsp;
+      </Box>
       <IframeResizer
         style={{
-          width: '1px',
-          minWidth: size?.width,
+          // @ts-ignore
+          minWidth: size?.width / 0.8,
           minHeight: '64vh',
           transform: 'scale(0.8)',
-          transformOrigin: 'center',
+          transformOrigin: 'top left',
           border: 'none',
         }}
         src={`${window.blocklet.prefix}checkout/pay/${id}?preview=1&version=${version}`}

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

@@ -8,12 +8,12 @@ import { FormProvider, useForm } from 'react-hook-form';
 import TextInput from '../input';
 
 export default function RenamePaymentLink({
-  paymentLink,
+  data,
   loading,
   onSave,
   onCancel,
 }: {
-  paymentLink: TPaymentLink;
+  data: TPaymentLink;
   loading: boolean;
   onSave: EventHandler<any>;
   onCancel: EventHandler<any>;
@@ -21,7 +21,7 @@ export default function RenamePaymentLink({
   const { t } = useLocaleContext();
   const methods = useForm<TPaymentLink>({
     defaultValues: {
-      name: paymentLink.name,
+      name: data.name,
     },
   });
 

package/src/components/pricing-table/actions.tsx

@@ -0,0 +1,126 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPricingTableExpanded } 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 RenamePricingTable from './rename';
+
+type Props = {
+  data: TPricingTableExpanded;
+  onChange: (action: string) => void;
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+};
+
+PricingTableActions.defaultProps = {
+  variant: 'compact',
+};
+
+export default function PricingTableActions({ data, variant, onChange }: Props) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const onUpdate = async (updates: TPricingTableExpanded) => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/pricing-tables/${data.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+  const onArchive = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/pricing-tables/${data.id}/archive`).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+  const onRemove = async () => {
+    try {
+      setState({ loading: true });
+      await api.delete(`/api/pricing-tables/${data.id}`).then((res) => res.data);
+      Toast.success(t('common.removed'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+  const onCopyLink = () => {
+    Copy(joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pricing-table/${data.id}`));
+    Toast.success(t('common.copied'));
+  };
+
+  return (
+    <ClickBoundary>
+      <Actions
+        variant={variant}
+        actions={[
+          {
+            label: t('admin.pricingTable.edit'),
+            handler: () => setState({ action: 'edit' }),
+            color: 'primary',
+            disabled: true,
+          },
+          {
+            label: t('admin.pricingTable.copyLink'),
+            handler: onCopyLink,
+            color: 'primary',
+          },
+          { label: t('admin.pricingTable.rename'), handler: () => setState({ action: 'rename' }), color: 'primary' },
+          { label: t('admin.pricingTable.archive'), handler: () => setState({ action: 'archive' }), color: 'primary' },
+          { label: t('admin.pricingTable.remove'), handler: () => setState({ action: 'remove' }), color: 'error' },
+        ]}
+      />
+      {state.action === 'rename' && (
+        <RenamePricingTable
+          data={data}
+          loading={state.loading}
+          onSave={onUpdate}
+          onCancel={() => setState({ action: '' })}
+        />
+      )}
+      {state.action === 'archive' && (
+        <ConfirmDialog
+          onConfirm={onArchive}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.pricingTable.archive')}
+          message={t('admin.pricingTable.archiveTip')}
+          loading={state.loading}
+        />
+      )}
+      {state.action === 'remove' && (
+        <ConfirmDialog
+          onConfirm={onRemove}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.pricingTable.remove')}
+          message={t('admin.pricingTable.removeTip')}
+          loading={state.loading}
+        />
+      )}
+    </ClickBoundary>
+  );
+}

package/src/components/pricing-table/customer-settings.tsx

@@ -0,0 +1,17 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Stack, Typography } from '@mui/material';
+
+export default function PricingTableCustomerSettings() {
+  const { t } = useLocaleContext();
+
+  return (
+    <Stack spacing={2} alignItems="flex-start">
+      <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+        {t('admin.pricingTable.customer')}
+      </Typography>
+      <Stack spacing={2} sx={{ width: '100%' }}>
+        FIXME
+      </Stack>
+    </Stack>
+  );
+}

package/src/components/pricing-table/payment-settings.tsx

@@ -0,0 +1,179 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import type { TPrice, TProduct } from '@did-pay/types';
+import { Box, Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
+import get from 'lodash/get';
+import { useState } from 'react';
+import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+
+import { useProductsContext } from '../../contexts/products';
+import { useSettingsContext } from '../../contexts/settings';
+import { formatPrice, getPriceFromProducts, groupPricingTableItems } from '../../libs/util';
+import IconCollapse from '../collapse';
+
+export function PricePaymentSettings({ index }: { index: number }) {
+  const getFieldName = (name: string) => `items.${index}.${name}`;
+
+  const { t } = useLocaleContext();
+  const { control, setValue, getValues } = useFormContext();
+  const type = useWatch({ control, name: getFieldName('after_completion.type') });
+
+  const values = getValues();
+
+  return (
+    <Stack spacing={2} mb={2}>
+      <Controller
+        name={getFieldName('billing_address_collection')}
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={get(values, getFieldName('billing_address_collection')) === 'required'}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked ? 'required' : 'auto')}
+              />
+            }
+            label={t('admin.paymentLink.requireBillingAddress')}
+          />
+        )}
+      />
+      <Controller
+        name={getFieldName('phone_number_collection.enabled')}
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={get(values, getFieldName('phone_number_collection.enabled'))}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked)}
+              />
+            }
+            label={t('admin.paymentLink.requirePhoneNumber')}
+          />
+        )}
+      />
+      <Controller
+        name={getFieldName('allow_promotion_codes')}
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={get(values, getFieldName('allow_promotion_codes'))}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked)}
+              />
+            }
+            label={t('admin.paymentLink.allowPromotionCodes')}
+          />
+        )}
+      />
+      <Controller
+        name={getFieldName('after_completion.type')}
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={get(values, getFieldName('after_completion.type')) === 'hosted_confirmation'}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked ? 'hosted_confirmation' : 'redirect')}
+              />
+            }
+            label={t('admin.paymentLink.showConfirmPage')}
+          />
+        )}
+      />
+      {type === 'hosted_confirmation' && (
+        <Controller
+          name={getFieldName('after_completion.hosted_confirmation.custom_message')}
+          control={control}
+          render={({ field }) => (
+            <TextField {...field} placeholder="Replace default success message" fullWidth size="small" />
+          )}
+        />
+      )}
+      <Controller
+        name={getFieldName('after_completion.type')}
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={get(values, getFieldName('after_completion.type')) === 'redirect'}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked ? 'redirect' : 'hosted_confirmation')}
+              />
+            }
+            label={t('admin.paymentLink.noConfirmPage')}
+          />
+        )}
+      />
+      {type === 'redirect' && (
+        <Controller
+          name={getFieldName('after_completion.redirect.url')}
+          control={control}
+          render={({ field }) => (
+            <TextField placeholder="Redirect customers to your site" {...field} fullWidth size="small" />
+          )}
+        />
+      )}
+    </Stack>
+  );
+}
+
+export function ProductPaymentSettings({ product, prices }: { product: TProduct; prices: TPrice[] }) {
+  const { settings } = useSettingsContext();
+  const { products } = useProductsContext();
+  const [current, setCurrent] = useState(prices[0]?.id);
+  const tabs = prices.map((x: any) => ({
+    value: x.id,
+    label: formatPrice(getPriceFromProducts(products, x.price_id) as TPrice, settings.baseCurrency),
+    component: <PricePaymentSettings index={x.index} />,
+  }));
+
+  return (
+    <Box sx={{ px: 2, py: 0, border: '1px solid #eee', borderRadius: 2 }}>
+      <IconCollapse
+        key={product.id}
+        expanded
+        trigger={<Typography variant="h6">{product.name}</Typography>}
+        style={{ py: 1 }}>
+        <Tabs
+          tabs={tabs}
+          current={current}
+          onChange={(v: string) => setCurrent(v)}
+          style={{ width: '100%' }}
+          scrollButtons="auto"
+        />
+        {tabs.find((x) => x.value === current)?.component}
+      </IconCollapse>
+    </Box>
+  );
+}
+
+export default function PricingTablePaymentSettings() {
+  const { t } = useLocaleContext();
+  const { products } = useProductsContext();
+  const { control } = useFormContext();
+  const items = useFieldArray({ control, name: 'items' });
+
+  const grouped = groupPricingTableItems(items.fields);
+
+  return (
+    <Stack spacing={2} alignItems="flex-start">
+      <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+        {t('admin.paymentLink.products')}
+      </Typography>
+      <Stack spacing={2} sx={{ width: '100%' }}>
+        {grouped.map((item) => {
+          const [productId, prices] = item;
+          const product = products.find((x) => x.id === productId);
+          return product ? <ProductPaymentSettings key={productId} product={product} prices={prices} /> : null;
+        })}
+      </Stack>
+    </Stack>
+  );
+}

package/src/components/pricing-table/preview.tsx

@@ -0,0 +1,34 @@
+import { Box } from '@mui/material';
+import { useSize } from 'ahooks';
+import IframeResizer from 'iframe-resizer-react';
+import { useRef } from 'react';
+
+import Chrome from '../payment-link/chrome';
+
+PricingTablePreview.defaultProps = {
+  version: 1,
+};
+
+export default function PricingTablePreview({ id, version }: { id: string; version?: number }) {
+  const ref = useRef(null);
+  const size = useSize(ref);
+  return (
+    <Chrome>
+      <Box ref={ref} sx={{ width: '100%' }}>
+        &nbsp;
+      </Box>
+      <IframeResizer
+        style={{
+          // @ts-ignore
+          // eslint-disable-next-line no-unsafe-optional-chaining
+          minWidth: size?.width / 0.8,
+          minHeight: '64vh',
+          transform: 'scale(0.8)',
+          transformOrigin: 'top left',
+          border: 'none',
+        }}
+        src={`${window.blocklet.prefix}checkout/pricing-table/${id}?preview=1&version=${version}`}
+      />
+    </Chrome>
+  );
+}

package/src/components/pricing-table/price-item.tsx

@@ -0,0 +1,64 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TPrice } from '@did-pay/types';
+import { DeleteOutlineOutlined } from '@mui/icons-material';
+import { Box, Checkbox, FormControlLabel, IconButton, InputAdornment, Stack, Typography } from '@mui/material';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+
+import { useSettingsContext } from '../../contexts/settings';
+import { formatPrice } from '../../libs/util';
+import FormInput from '../input';
+
+type Props = {
+  prefix: string;
+  price: TPrice;
+  onRemove: () => void;
+};
+
+export default function PriceItem({ prefix, price, onRemove }: Props) {
+  const { t } = useLocaleContext();
+  const getFieldName = (name: string) => (prefix ? `${prefix}.${name}` : name);
+  const { settings } = useSettingsContext();
+  const { control, setValue } = useFormContext();
+  const includeFreeTrail = useWatch({ control, name: getFieldName('include_free_trial') });
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Stack direction="row" alignItems="center" justifyContent="space-between">
+        <Typography>{formatPrice(price, settings.baseCurrency)}</Typography>
+        <IconButton size="small" onClick={onRemove}>
+          <DeleteOutlineOutlined color="inherit" sx={{ opacity: 0.75 }} />
+        </IconButton>
+      </Stack>
+      <Controller
+        name={getFieldName('include_free_trial')}
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            label={t('admin.paymentLink.includeFreeTrail')}
+            control={
+              <Checkbox
+                sx={{ ml: 1 }}
+                {...field}
+                onChange={(_, checked) => {
+                  setValue(field.name, checked);
+                }}
+              />
+            }
+          />
+        )}
+      />
+      {includeFreeTrail && (
+        <FormInput
+          name={getFieldName('subscription_data.trial_period_days')}
+          rules={{ required: t('checkout.required') }}
+          errorPosition="right"
+          sx={{ mt: 0.5 }}
+          fullWidth={false}
+          InputProps={{
+            endAdornment: <InputAdornment position="end">days</InputAdornment>,
+          }}
+        />
+      )}
+    </Box>
+  );
+}

package/src/components/pricing-table/product-item.tsx

@@ -0,0 +1,86 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { PricingTableItem, TProduct, TProductExpanded } from '@did-pay/types';
+import { Box, Stack } from '@mui/material';
+import { useSetState } from 'ahooks';
+
+import { useProductsContext } from '../../contexts/products';
+import api from '../../libs/api';
+import { formatError, getPriceFromProducts } from '../../libs/util';
+import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
+import InfoCard from '../info-card';
+import EditProduct from '../product/edit';
+import PriceItem from './price-item';
+
+type Props = {
+  product: TProductExpanded;
+  prices: PricingTableItem[];
+  valid: boolean;
+  onUpdate: () => void;
+  onRemove: (i: number) => void;
+};
+
+export default function ProductItem({ product, prices, valid, onUpdate, onRemove }: Props) {
+  const { t } = useLocaleContext();
+  const { products } = useProductsContext();
+  const [state, setState] = useSetState({ editing: false, loading: false });
+
+  const onSave = async (updates: TProduct) => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/products/${product.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      onUpdate();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false });
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        p: 2,
+        borderWidth: valid ? 1 : 2,
+        borderStyle: 'solid',
+        borderColor: valid ? '#eee' : 'error.main',
+        borderRadius: 2,
+        position: 'relative',
+      }}>
+      <ClickBoundary>
+        <Actions
+          sx={{ position: 'absolute', top: 8, right: 16 }}
+          actions={[
+            {
+              label: t('admin.product.edit'),
+              handler: () => setState({ editing: true }),
+              color: 'primary',
+            },
+          ]}
+        />
+      </ClickBoundary>
+      <InfoCard logo={product.images[0]} name={product.name} description={product.description} />
+      <Stack direction="column" spacing={2} alignItems="flex-start">
+        {prices.map((x: any) => (
+          <PriceItem
+            key={x.index}
+            prefix={`items.${x.index}`}
+            price={getPriceFromProducts(products, x.price_id) as any}
+            onRemove={() => onRemove(x.index)}
+          />
+        ))}
+      </Stack>
+      {state.editing && (
+        <EditProduct
+          product={product}
+          loading={state.loading}
+          onSave={onSave}
+          onCancel={() => setState({ editing: false })}
+        />
+      )}
+    </Box>
+  );
+}