@blocklet/payment-react 1.13.113

package/src/checkout/index.tsx

@@ -0,0 +1,74 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { TCheckoutSessionExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import { useRequest, useSetState } from 'ahooks';
+import noop from 'lodash/noop';
+import { useEffect } from 'react';
+import { joinURL } from 'ufo';
+
+import api from '../api';
+import Payment from '../payment';
+import { CheckoutContext, CheckoutProps } from '../types';
+import { getPrefix, mergeExtraParams } from '../util';
+
+const startFromPaymentLink = async (id: string, params?: Record<string, any>): Promise<CheckoutContext> => {
+  const { data } = await api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`);
+  return data;
+};
+
+const fetchCheckoutSession = async (id: string): Promise<CheckoutContext> => {
+  const { data } = await api.get(`/api/checkout-sessions/retrieve/${id}`);
+  return data;
+};
+
+export default function Checkout({ id, onPaid, onError, mode, extraParams }: CheckoutProps) {
+  if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
+    throw new Error('Either a checkout session or a payment link id is required.');
+  }
+
+  const type = id.startsWith('plink_') ? 'paymentLink' : 'checkoutSession';
+
+  const [state, setState] = useSetState({ completed: false, appError: null });
+
+  const { error: apiError, data } = useRequest(() =>
+    type === 'paymentLink' ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id)
+  );
+
+  useEffect(() => {
+    if (type === 'paymentLink' && mode === 'standalone' && data) {
+      window.location.replace(joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}`));
+    }
+  }, [type, mode, data]);
+
+  const handlePaid = () => {
+    setState({ completed: true });
+    onPaid?.(data as CheckoutContext);
+  };
+
+  const handleError = (err: any) => {
+    console.error(err);
+    setState({ appError: err });
+    onError?.(err);
+  };
+
+  return (
+    <Payment
+      checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
+      paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
+      paymentIntent={data?.paymentIntent}
+      paymentLink={data?.paymentLink}
+      customer={data?.customer}
+      completed={state.completed}
+      error={apiError || state.appError}
+      onPaid={handlePaid}
+      onError={handleError}
+      mode={mode as string}
+    />
+  );
+}
+
+Checkout.defaultProps = {
+  onPaid: noop,
+  onError: console.error,
+  mode: 'inline',
+  extraParams: {},
+};

package/src/components/input.tsx

@@ -0,0 +1,58 @@
+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 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}
+      control={control}
+      rules={rules}
+      render={({ field }) => (
+        <Box sx={{ width: '100%' }}>
+          {!!label && <FormLabel>{label}</FormLabel>}
+          <TextField
+            fullWidth
+            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/livemode.tsx

@@ -0,0 +1,23 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Chip } from '@mui/material';
+
+export default function Livemode() {
+  const { t } = useLocaleContext();
+  return (
+    <Chip
+      label={t('common.livemode')}
+      size="small"
+      sx={{
+        ml: 2,
+        height: 18,
+        lineHeight: 1,
+        textTransform: 'uppercase',
+        fontSize: '0.8rem',
+        fontWeight: 'bold',
+        borderRadius: '4px',
+        backgroundColor: '#ffde92',
+        color: '#bb5504',
+      }}
+    />
+  );
+}

package/src/components/pricing-table.tsx

@@ -0,0 +1,207 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { PriceRecurring, TPricingTableExpanded, TPricingTableItem } from '@blocklet/payment-types';
+import { CheckOutlined } from '@mui/icons-material';
+import { LoadingButton } from '@mui/lab';
+import {
+  Box,
+  Chip,
+  Fade,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Stack,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from '@mui/material';
+import { useSetState } from 'ahooks';
+import { useEffect } from 'react';
+
+import Amount from '../payment/amount';
+import { formatError, formatPriceAmount, formatRecurring } from '../util';
+
+const groupItemsByRecurring = (items: TPricingTableItem[]) => {
+  const grouped: { [key: string]: TPricingTableItem[] } = {};
+  const recurring: { [key: string]: PriceRecurring } = {};
+
+  items.forEach((x) => {
+    const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join('-');
+    recurring[key] = x.price.recurring as PriceRecurring;
+
+    if (!grouped[key]) {
+      grouped[key] = [];
+    }
+
+    // @ts-ignore
+    grouped[key].push(x);
+  });
+
+  return { recurring, grouped };
+};
+
+type Props = {
+  table: TPricingTableExpanded;
+  onSelect: (priceId: string) => void;
+  alignItems?: 'center' | 'left';
+  mode?: 'checkout' | 'select';
+  interval?: string;
+};
+
+PricingTable.defaultProps = {
+  alignItems: 'center',
+  mode: 'checkout',
+  interval: '',
+};
+
+export default function PricingTable({ table, alignItems, interval, mode, onSelect }: Props) {
+  const { t, locale } = useLocaleContext();
+  const [state, setState] = useSetState({ interval, loading: '' });
+  const { recurring, grouped } = groupItemsByRecurring(table.items);
+
+  useEffect(() => {
+    if (table) {
+      if (!state.interval || !grouped[state.interval]) {
+        const keys = Object.keys(recurring);
+        if (keys[0]) {
+          setState({ interval: keys[0] });
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table]);
+
+  const handleSelect = async (priceId: string) => {
+    try {
+      setState({ loading: priceId });
+      await onSelect(priceId);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: '' });
+    }
+  };
+
+  return (
+    <Stack
+      direction="column"
+      alignItems={alignItems === 'center' ? 'center' : 'flex-start'}
+      sx={{
+        pt: {
+          xs: 4,
+          sm: 2,
+        },
+        gap: {
+          xs: 3,
+          sm: mode === 'select' ? 3 : 5,
+        },
+      }}>
+      {Object.keys(recurring).length > 1 && (
+        <ToggleButtonGroup
+          color="primary"
+          value={state.interval}
+          onChange={(_, value) => {
+            if (value !== null) {
+              setState({ interval: value });
+            }
+          }}
+          exclusive>
+          {Object.keys(recurring).map((x) => (
+            <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
+              {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
+            </ToggleButton>
+          ))}
+        </ToggleButtonGroup>
+      )}
+      <Stack
+        flexWrap="wrap"
+        direction="row"
+        gap={{ xs: 3, sm: 5, md: mode === 'checkout' ? 10 : 5 }}
+        justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}>
+        {grouped[state.interval as string]?.map((x: TPricingTableItem) => {
+          let action = x.subscription_data?.trial_period_days
+            ? t('payment.checkout.try')
+            : t('payment.checkout.subscription');
+          if (mode === 'select') {
+            action = x.is_selected ? t('payment.checkout.selected') : t('payment.checkout.select');
+          }
+
+          return (
+            <Fade key={x.price_id} in>
+              <Stack
+                padding={4}
+                spacing={2}
+                direction="column"
+                alignItems="center"
+                sx={{
+                  width: 320,
+                  cursor: 'pointer',
+                  borderWidth: '1px',
+                  borderStyle: 'solid',
+                  borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
+                  borderRadius: 1,
+                  transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
+                  boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
+                  '&:hover': {
+                    borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
+                    boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
+                  },
+                }}>
+                <Box textAlign="center">
+                  <Stack direction="row" alignItems="center" spacing={1}>
+                    <Typography variant="h5" color="text.primary" fontWeight={600}>
+                      {x.product.name}
+                    </Typography>
+                    {x.is_highlight && <Chip label={x.highlight_text} color="default" size="small" />}
+                  </Stack>
+                  <Typography color="text.secondary">{x.product.description}</Typography>
+                </Box>
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  <Amount amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)} />
+                  <Stack direction="column" alignItems="flex-start">
+                    <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                      {t('payment.checkout.per')}
+                    </Typography>
+                    <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                      {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
+                    </Typography>
+                  </Stack>
+                </Stack>
+                <LoadingButton
+                  fullWidth
+                  size="large"
+                  loadingPosition="end"
+                  variant={x.is_highlight || x.is_selected ? 'contained' : 'outlined'}
+                  color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
+                  sx={{ fontSize: '1.2rem' }}
+                  loading={state.loading === x.price_id}
+                  disabled={x.is_disabled}
+                  onClick={() => handleSelect(x.price_id)}>
+                  {action}
+                </LoadingButton>
+                {x.product.features.length > 0 && (
+                  <Box>
+                    <Typography>{t('payment.checkout.include')}</Typography>
+                    <List dense>
+                      {x.product.features.map((f: any) => (
+                        <ListItem key={f.name} disableGutters disablePadding>
+                          <ListItemIcon sx={{ minWidth: 25 }}>
+                            <CheckOutlined color="success" fontSize="small" />
+                          </ListItemIcon>
+                          <ListItemText primary={f.name} />
+                        </ListItem>
+                      ))}
+                    </List>
+                  </Box>
+                )}
+              </Stack>
+            </Fade>
+          );
+        })}
+      </Stack>
+    </Stack>
+  );
+}

package/src/components/status.tsx

@@ -0,0 +1,19 @@
+import { Chip, ChipProps } from '@mui/material';
+
+export default function Status(props: ChipProps) {
+  return (
+    <Chip
+      size="small"
+      variant="outlined"
+      {...props}
+      sx={{
+        ...(props.sx || {}),
+        borderRadius: '4px',
+        height: 20,
+        lineHeight: 1,
+        textTransform: 'capitalize',
+        marginRight: '10px',
+      }}
+    />
+  );
+}

package/src/components/switch.tsx

@@ -0,0 +1,48 @@
+import { Switch } from '@mui/material';
+import { styled } from '@mui/system';
+import type { LiteralUnion } from 'type-fest';
+
+type SwitchProps = {
+  variant?: LiteralUnion<'success' | 'error' | 'warning' | 'info' | 'primary' | 'secondary', string>;
+};
+
+export default styled(Switch)<SwitchProps>(({ variant = 'success', theme }) => ({
+  width: 28,
+  height: 16,
+  padding: 0,
+  display: 'inline-flex',
+  '&:active': {
+    '& .MuiSwitch-thumb': {
+      width: 15,
+    },
+    '& .MuiSwitch-switchBase.Mui-checked': {
+      transform: 'translateX(9px)',
+    },
+  },
+  '& .MuiSwitch-switchBase': {
+    padding: 2,
+    '&.Mui-checked': {
+      transform: 'translateX(12px)',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: theme.palette[variant].light,
+      },
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    transition: (theme.transitions as any).create(['width'], {
+      duration: 200,
+    }),
+  },
+  '& .MuiSwitch-track': {
+    borderRadius: 16 / 2,
+    opacity: 1,
+    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)',
+    boxSizing: 'border-box',
+  },
+}));

package/src/contexts/payment.tsx

@@ -0,0 +1,74 @@
+import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import { Alert, CircularProgress } from '@mui/material';
+import { useLocalStorageState, useRequest } from 'ahooks';
+import type { Axios } from 'axios';
+import { createContext, useContext } from 'react';
+
+import api from '../api';
+import { getPrefix } from '../util';
+
+const prefix = getPrefix();
+
+export interface Settings {
+  paymentMethods: TPaymentMethodExpanded[];
+  baseCurrency: TPaymentCurrency;
+}
+
+export type PaymentContextType = {
+  livemode: boolean;
+  session: any;
+  connect: any;
+  prefix: string;
+  settings: Settings;
+  refresh: () => void;
+  setLivemode: (livemode: boolean) => void;
+  api: Axios;
+};
+
+// @ts-ignore
+const PaymentContext = createContext<PaymentContextType>({ api });
+const { Provider, Consumer } = PaymentContext;
+
+const getSettings = async () => {
+  const { data } = await api.get('/api/settings');
+  return data;
+};
+
+// eslint-disable-next-line react/prop-types
+function PaymentProvider({ children, session, connect }: { children: any; session: any; connect: any }): JSX.Element {
+  const { data, error, run, loading } = useRequest(getSettings);
+  const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Provider
+      value={{
+        session,
+        connect,
+        prefix,
+        livemode: !!livemode,
+        settings: data,
+        refresh: run,
+        setLivemode,
+        api,
+      }}>
+      {children}
+    </Provider>
+  );
+}
+
+function usePaymentContext() {
+  const context = useContext(PaymentContext);
+  return context;
+}
+
+PaymentProvider.defaultProps = {};
+
+export { PaymentContext, PaymentProvider, Consumer as SettingsConsumer, usePaymentContext };

package/src/dayjs.ts

@@ -0,0 +1,17 @@
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import timezone from 'dayjs/plugin/timezone'; // dependent on utc plugin
+import utc from 'dayjs/plugin/utc';
+
+import('dayjs/locale/en');
+import('dayjs/locale/zh');
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(duration);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export default dayjs;

package/src/index.ts

@@ -0,0 +1,32 @@
+import api from './api';
+import Checkout from './checkout';
+import FormInput from './components/input';
+import Livemode from './components/livemode';
+import PricingTable from './components/pricing-table';
+import Status from './components/status';
+import Switch from './components/switch';
+import dayjs from './dayjs';
+import Amount from './payment/amount';
+import PhoneInput from './payment/form/phone';
+import Payment from './payment/index';
+import ProductSkeleton from './payment/product-skeleton';
+
+export * from './util';
+export * from './contexts/payment';
+
+export { translations, createTranslator } from './locales';
+
+export {
+  api,
+  dayjs,
+  FormInput,
+  PhoneInput,
+  Status,
+  Livemode,
+  Switch,
+  Checkout,
+  Payment,
+  PricingTable,
+  ProductSkeleton,
+  Amount,
+};