payment-kit 1.13.23 → 1.13.25

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

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

@@ -0,0 +1,195 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Checkbox, FormControlLabel, MenuItem, Select, Stack, Typography } from '@mui/material';
+import { useSetState } from 'ahooks';
+import { useEffect } from 'react';
+import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+
+import { useProductsContext } from '../../contexts/products';
+import { getProductByPriceId, groupPricingTableItems, isPriceCurrencyAligned } from '../../libs/util';
+import ProductSelect from '../payment-link/product-select';
+import CreateProduct from '../product/create';
+import ProductItem from './product-item';
+
+export default function PricingTableProductSettings() {
+  const { t } = useLocaleContext();
+  const { products, refresh } = useProductsContext();
+  const { control, setValue, getValues } = useFormContext();
+  const items = useFieldArray({ control, name: 'items' });
+  const [state, setState] = useSetState({ creating: false });
+  const highlight = useWatch({ control, name: 'highlight' });
+
+  useEffect(() => {
+    if (items.fields.length) {
+      const selected: any[] = items.fields.map((x: any) => getProductByPriceId(products, x.price_id));
+      const name = selected.length > 1 ? `${selected[0].name} and ${selected.length - 1} more` : selected[0].name;
+      setValue('name', name);
+    } else {
+      setValue('name', '');
+    }
+  }, [items.fields, setValue, products]);
+
+  const onProductSelected = (priceId: string) => {
+    if (priceId === 'add') {
+      setState({ creating: true });
+    } else if (priceId) {
+      const product = getProductByPriceId(products, priceId);
+      if (product) {
+        items.append({
+          price_id: priceId,
+          product_id: product.id,
+          is_highlight: false,
+          highlight_text: 'popular',
+          adjustable_quantity: {
+            enabled: false,
+            maximum: 1,
+            minimum: 0,
+          },
+          after_completion: {
+            type: 'hosted_confirmation',
+            hosted_confirmation: {
+              custom_message: '',
+            },
+            redirect: {
+              url: '',
+            },
+          },
+          allow_promotion_codes: false,
+          customer_creation: 'always',
+          consent_collection: {
+            promotions: 'none',
+            terms_of_service: 'none',
+          },
+          phone_number_collection: {
+            enabled: false,
+          },
+          billing_address_collection: 'auto',
+          include_free_trial: false,
+          subscription_data: {
+            description: '',
+            trial_period_days: 0,
+          },
+          custom_fields: [],
+          submit_type: 'auto',
+        });
+      }
+    }
+  };
+
+  const onProductCreated = () => {
+    setState({ creating: false });
+    refresh();
+  };
+
+  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;
+          // @ts-ignore
+          const product = products.find((x) => x.id === productId);
+          if (!product) {
+            return null;
+          }
+
+          return (
+            <ProductItem
+              key={productId}
+              // @ts-ignore
+              valid={prices.every((x) => isPriceCurrencyAligned(items.fields, products, x.index))}
+              product={product}
+              prices={prices}
+              onUpdate={refresh}
+              onRemove={(i: number) => items.remove(i)}
+            />
+          );
+        })}
+        {items.fields.some((_, index) => !isPriceCurrencyAligned(items.fields as any[], products, index)) && (
+          <Typography color="error" fontSize="small">
+            {t('admin.paymentLink.currencyNotAligned')}
+          </Typography>
+        )}
+        <ProductSelect
+          mode={items.fields.length ? 'waiting' : 'selecting'}
+          onSelect={onProductSelected}
+          hasSelected={(price) => price.type !== 'recurring' || items.fields.some((x: any) => x.price_id === price.id)}
+        />
+        {state.creating && <CreateProduct onCancel={() => setState({ creating: false })} onSave={onProductCreated} />}
+      </Stack>
+      <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+        {t('admin.pricingTable.display')}
+      </Typography>
+      {grouped.length > 0 && (
+        <Stack direction="column" spacing={2}>
+          <Controller
+            name="highlight"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                label={t('admin.pricingTable.highlight')}
+                control={
+                  <Checkbox
+                    checked={getValues().highlight}
+                    {...field}
+                    onChange={(_, checked) => {
+                      setValue(field.name, checked);
+                      if (checked && !getValues().highlight_product_id && grouped[0]) {
+                        setValue('highlight_product_id', grouped[0][0]);
+                      }
+                    }}
+                  />
+                }
+              />
+            )}
+          />
+          {highlight && (
+            <Stack direction="row" alignItems="center" spacing={0.5}>
+              <Controller
+                name="highlight_product_id"
+                control={control}
+                render={({ field }) => (
+                  <Select {...field} size="small">
+                    {grouped.map(([productId]) => {
+                      const product = products.find((x) => x.id === productId);
+                      if (!product) {
+                        return null;
+                      }
+
+                      return (
+                        <MenuItem key={productId} value={productId}>
+                          {product.name}
+                        </MenuItem>
+                      );
+                    })}
+                  </Select>
+                )}
+              />
+              <Typography>as</Typography>
+              <Controller
+                name="highlight_text"
+                control={control}
+                render={({ field }) => (
+                  <Select {...field} size="small">
+                    <MenuItem key="deal" value="deal">
+                      Best deal
+                    </MenuItem>
+                    <MenuItem key="popular" value="popular">
+                      Most popular
+                    </MenuItem>
+                    <MenuItem key="recommended" value="recommended">
+                      Recommended
+                    </MenuItem>
+                  </Select>
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,67 @@
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TPricingTable } from '@did-pay/types';
+import { Button, CircularProgress, Stack } from '@mui/material';
+import type { EventHandler } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import TextInput from '../input';
+
+export default function RenamePricingTable({
+  data,
+  loading,
+  onSave,
+  onCancel,
+}: {
+  data: TPricingTable;
+  loading: boolean;
+  onSave: EventHandler<any>;
+  onCancel: EventHandler<any>;
+}) {
+  const { t } = useLocaleContext();
+  const methods = useForm<TPricingTable>({
+    defaultValues: {
+      name: data.name,
+    },
+  });
+
+  const { handleSubmit, reset } = methods;
+  const onSubmit = () => {
+    handleSubmit(async (formData: any) => {
+      await onSave(formData);
+      reset();
+      onCancel(null);
+    })();
+  };
+
+  return (
+    <Dialog
+      open
+      disableEscapeKeyDown
+      fullWidth
+      maxWidth="sm"
+      onClose={() => onCancel(null)}
+      showCloseButton={false}
+      title={t('admin.product.edit')}
+      actions={
+        <Stack direction="row">
+          <Button size="small" sx={{ mr: 2 }} onClick={onCancel}>
+            {t('common.cancel')}
+          </Button>
+          <Button variant="contained" color="primary" size="small" disabled={loading} onClick={onSubmit}>
+            {loading && <CircularProgress size="small" />} {t('common.save')}
+          </Button>
+        </Stack>
+      }>
+      <FormProvider {...methods}>
+        <TextInput
+          name="name"
+          rules={{ required: true }}
+          label={t('admin.paymentLink.name.label')}
+          placeholder={t('admin.paymentLink.name.placeholder')}
+          autoFocus
+        />
+      </FormProvider>
+    </Dialog>
+  );
+}