payment-kit 1.13.15

package/src/pages/admin/settings/payment-methods.tsx

@@ -0,0 +1,80 @@
+import type { TPaymentMethodExpanded } from '@did-pay/types';
+import { Alert, Box, CircularProgress, Grid, Typography } from '@mui/material';
+import { useRequest } from 'ahooks';
+
+import IconCollapse from '../../../components/collapse';
+import InfoCard from '../../../components/info-card';
+import InfoRow from '../../../components/info-row';
+import Switch from '../../../components/switch';
+import api from '../../../libs/api';
+
+const getMethods = (params: Record<string, any> = {}): Promise<TPaymentMethodExpanded[]> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/payment-methods?${search.toString()}`).then((res) => res.data);
+};
+
+const groupByType = (methods: TPaymentMethodExpanded[]) => {
+  const groups: Record<string, TPaymentMethodExpanded[]> = {};
+  methods.forEach((x) => {
+    groups[x.type] = groups[x.type] || [];
+    (groups[x.type] as any).push(x);
+  });
+
+  return groups;
+};
+
+export default function PaymentMethods() {
+  const { loading, error, data } = useRequest(() => getMethods({}));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const groups = groupByType(data);
+
+  // FIXME: i18n
+  return (
+    <>
+      {Object.keys(groups).map((x) => (
+        <Box key={x} mt={3}>
+          <Typography variant="h6" sx={{ mb: 1, textTransform: 'uppercase' }}>
+            {x}
+          </Typography>
+          {(groups[x] as TPaymentMethodExpanded[]).map((method) => (
+            <IconCollapse
+              key={method.id}
+              trigger={<InfoCard {...method} />}
+              addons={<Switch checked={method.active} />}
+              style={{
+                py: 1,
+                borderTop: '1px solid #eee',
+                borderBottom: '1px solid #eee',
+                '& :hover': { color: 'text.primary' },
+              }}>
+              <Grid container spacing={2} mt={0}>
+                <Grid item xs={12} md={6}>
+                  <InfoRow label="Type" value={method.type} />
+                  <InfoRow label="Confirmation" value={method.confirmation.type} />
+                  <InfoRow label="Recurring payments" value={method.features.recurring ? 'Yes' : 'No'} />
+                  <InfoRow label="Refund support" value={method.features.refund ? 'Yes' : 'No'} />
+                  <InfoRow label="Dispute support" value={method.features.dispute ? 'Yes' : 'No'} />
+                  <InfoRow
+                    label="Currencies"
+                    value={method.payment_currencies.map((currency) => currency.symbol).join(', ')}
+                  />
+                </Grid>
+              </Grid>
+            </IconCollapse>
+          ))}
+        </Box>
+      ))}
+    </>
+  );
+}

package/src/pages/checkout/index.tsx

@@ -0,0 +1,38 @@
+import Center from '@arcblock/ux/lib/Center';
+import { Box, CircularProgress } from '@mui/material';
+import React, { Suspense } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { SettingsProvider } from '../../contexts/settings';
+
+const pages = {
+  pay: React.lazy(() => import('./pay')),
+};
+
+function Checkout() {
+  const { action, id } = useParams<{ action: 'pay'; id: string }>();
+
+  // @ts-ignore
+  const TabComponent = pages[action];
+
+  return (
+    <Box>
+      <Suspense
+        fallback={
+          <Center relative="parent">
+            <CircularProgress />
+          </Center>
+        }>
+        <TabComponent id={id} />
+      </Suspense>
+    </Box>
+  );
+}
+
+export default function WrappedAdmin() {
+  return (
+    <SettingsProvider>
+      <Checkout />
+    </SettingsProvider>
+  );
+}

package/src/pages/checkout/pay.tsx

@@ -0,0 +1,89 @@
+import type {
+  TCheckoutSessionExpanded,
+  TCustomer,
+  TPaymentIntent,
+  TPaymentLink,
+  TPaymentMethodExpanded,
+} from '@did-pay/types';
+import { useRequest, useSetState } from 'ahooks';
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+import CheckoutPay from '../../components/checkout/pay';
+import api from '../../libs/api';
+
+type Props = {
+  id: string;
+};
+
+type PageData = {
+  checkoutSession: TCheckoutSessionExpanded;
+  paymentMethods: TPaymentMethodExpanded[];
+  paymentLink?: TPaymentLink;
+  paymentIntent?: TPaymentIntent;
+  customer?: TCustomer;
+};
+
+const startFromPaymentLink = async (id: string, preview: string): Promise<PageData> => {
+  const { data } = await api.post(`/api/checkout-sessions/start/${id}?preview=${preview}`);
+  return data;
+};
+
+const fetchCheckoutSession = async (id: string): Promise<PageData> => {
+  const { data } = await api.get(`/api/checkout-sessions/retrieve/${id}`);
+  return data;
+};
+
+export default function Payment({ id }: Props) {
+  const type = id.startsWith('plink_') ? 'paymentLink' : 'checkoutSession';
+
+  const navigate = useNavigate();
+  const [params] = useSearchParams();
+  const [state, setState] = useSetState({ completed: false, appError: null });
+
+  const { error: apiError, data } = useRequest(() =>
+    type === 'paymentLink' ? startFromPaymentLink(id, params.get('preview') || '') : fetchCheckoutSession(id)
+  );
+
+  useEffect(() => {
+    if (data && type === 'paymentLink') {
+      navigate(`/checkout/pay/${data.checkoutSession.id}`, { replace: true });
+    }
+  }, [type, data, navigate]);
+
+  const onPaid = () => {
+    setState({ completed: true });
+    if (data?.paymentLink) {
+      if (data.paymentLink.after_completion?.type === 'redirect' && data.paymentLink.after_completion?.redirect?.url) {
+        setTimeout(() => {
+          // @ts-ignore
+          window.location.href = data.paymentLink?.after_completion?.redirect?.url;
+        }, 1000);
+      }
+    } else if (data?.checkoutSession?.success_url) {
+      setTimeout(() => {
+        // @ts-ignore
+        window.location.href = data?.checkoutSession?.success_url;
+      }, 1000);
+    }
+  };
+
+  const onError = (err: any) => {
+    setState({ appError: err });
+    console.error(err);
+  };
+
+  return (
+    <CheckoutPay
+      checkoutSession={data?.checkoutSession}
+      paymentMethods={data?.paymentMethods}
+      paymentIntent={data?.paymentIntent}
+      paymentLink={data?.paymentLink}
+      customer={data?.customer}
+      completed={state.completed}
+      error={apiError || state.appError}
+      onPaid={onPaid}
+      onError={onError}
+    />
+  );
+}

package/src/pages/customer/index.tsx

@@ -0,0 +1,93 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TCustomerExpanded } from '@did-pay/types';
+import { Edit } from '@mui/icons-material';
+import { Alert, Box, Button, CircularProgress, Grid, Stack } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest, useSetState } from 'ahooks';
+
+import InfoRow from '../../components/info-row';
+import Layout from '../../components/layout';
+import CustomerInvoiceList from '../../components/portal/invoice/list';
+import CurrentSubscriptions from '../../components/portal/subscription/list';
+import SectionHeader from '../../components/section/header';
+import api from '../../libs/api';
+import { formatError } from '../../libs/util';
+
+const fetchData = (): Promise<TCustomerExpanded> => {
+  return api.get('/api/customers/me').then((res) => res.data);
+};
+
+export default function CustomerHome() {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    editing: false,
+    loading: false,
+  });
+
+  const { loading, error, data, runAsync } = useRequest(fetchData);
+
+  if (error) {
+    return <Alert severity="error">{formatError(error)}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Layout>
+      <Grid container spacing={5}>
+        <Grid item xs={12} md={8}>
+          <Root direction="column" spacing={3} sx={{ my: 2 }}>
+            <Box className="section">
+              <SectionHeader title={t('customer.subscriptions')} mb={0} />
+              <Box className="section-body">
+                <CurrentSubscriptions id={data.id} onChange={runAsync} />
+              </Box>
+            </Box>
+            <Box className="section">
+              <SectionHeader title={t('customer.invoices')} mb={0} />
+              <Box className="section-body">
+                <CustomerInvoiceList customer_id={data.id} />
+              </Box>
+            </Box>
+          </Root>
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <Root direction="column" spacing={4} sx={{ my: 2 }}>
+            <Box className="section">
+              <SectionHeader title={t('customer.details')}>
+                <Button
+                  variant="outlined"
+                  color="inherit"
+                  size="small"
+                  disabled={state.editing || state.loading}
+                  onClick={() => setState({ editing: true })}>
+                  <Edit fontSize="small" sx={{ mr: 0.5 }} />
+                  {t('customer.update')}
+                </Button>
+              </SectionHeader>
+              <Stack>
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.name')} value={data.name} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.phone')} value={data.phone} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.email')} value={data.email} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.country')} value={data.address?.country} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.state')} value={data.address?.state} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.city')} value={data.address?.city} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.line1')} value={data.address?.line1} />
+                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.line2')} value={data.address?.line2} />
+                <InfoRow
+                  sizes={[1, 2]}
+                  label={t('admin.customer.address.postal_code')}
+                  value={data.address?.postal_code}
+                />
+              </Stack>
+            </Box>
+          </Root>
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+}
+
+const Root = styled(Stack)``;

package/src/pages/customer/invoice.tsx

@@ -0,0 +1,147 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TInvoiceExpanded } from '@did-pay/types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+import { useRequest, useSetState } from 'ahooks';
+import { Link, useParams } from 'react-router-dom';
+
+import Currency from '../../components/currency';
+import InfoRow from '../../components/info-row';
+import InvoiceTable from '../../components/invoice/table';
+import Layout from '../../components/layout';
+import SectionHeader from '../../components/section/header';
+import Status from '../../components/status';
+import { useSessionContext } from '../../contexts/session';
+import api from '../../libs/api';
+import { formatError, formatTime, getInvoiceStatusColor } from '../../libs/util';
+
+const fetchData = (id: string): Promise<TInvoiceExpanded> => {
+  return api.get(`/api/invoices/${id}`).then((res) => res.data);
+};
+
+// TODO: download feature using: https://react-pdf.org/
+export default function CustomerHome() {
+  const { t } = useLocaleContext();
+  const { connectApi } = useSessionContext();
+  const params = useParams<{ id: string }>();
+  const [state, setState] = useSetState({
+    downloading: false,
+    paying: false,
+  });
+
+  const { loading, error, data, runAsync } = useRequest(() => fetchData(params.id as string));
+
+  const onPay = () => {
+    try {
+      setState({ paying: true });
+      connectApi.open({
+        action: 'collect',
+        timeout: 5 * 60 * 1000,
+        extraParams: { invoiceId: params.id },
+        onSuccess: async () => {
+          connectApi.close();
+          await runAsync();
+        },
+        onClose: () => {
+          connectApi.close();
+          setState({ paying: false });
+        },
+        onError: (err: any) => {
+          setState({ paying: false });
+          Toast.error(formatError(err));
+        },
+      });
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      setState({ paying: false });
+    }
+  };
+
+  if (error) {
+    return <Alert severity="error">{formatError(error)}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Layout>
+      <Grid container spacing={3} sx={{ mt: 1 }}>
+        <Grid item xs={12} md={12}>
+          <Link to="/customer">
+            <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
+              <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+              <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+                {t('admin.invoices')}
+              </Typography>
+            </Stack>
+          </Link>
+        </Grid>
+        <Grid item xs={12} md={5}>
+          <Box>
+            <SectionHeader title={t('customer.invoice.summary')} mb={0} />
+            <Stack sx={{ mt: 1 }}>
+              <InfoRow label={t('admin.invoice.number')} value={data.number} />
+              <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
+              <InfoRow label={t('admin.invoice.customer')} value={data.customer.name} />
+              <InfoRow
+                label={t('common.status')}
+                value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}
+              />
+              <InfoRow
+                label={t('admin.subscription.currentPeriod')}
+                value={
+                  data.period_start && data.period_end
+                    ? [formatTime(data.period_start * 1000), formatTime(data.period_end * 1000)].join(' ~ ')
+                    : ''
+                }
+              />
+              {data.status_transitions?.paid_at && (
+                <InfoRow label={t('admin.invoice.paidAt')} value={formatTime(data.status_transitions.paid_at * 1000)} />
+              )}
+              <InfoRow
+                label={t('admin.paymentCurrency.name')}
+                value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+              />
+              <InfoRow
+                label={t('common.total')}
+                value={
+                  <Typography component="span" fontWeight="bold">
+                    {fromUnitToToken(data.total, data.paymentCurrency.decimal)}&nbsp;
+                    {data.paymentCurrency.symbol}
+                  </Typography>
+                }
+              />
+            </Stack>
+          </Box>
+        </Grid>
+        <Grid item xs={12} md={7}>
+          <SectionHeader title={t('customer.invoice.details')} mb={0}>
+            {['open'].includes(data.status) && (
+              <Button
+                variant="contained"
+                color="primary"
+                size="small"
+                disabled={state.downloading}
+                onClick={() => setState({ downloading: true })}>
+                {t('customer.invoice.download')}
+              </Button>
+            )}
+          </SectionHeader>
+          <InvoiceTable invoice={data} simple />
+          <Stack direction="row" justifyContent="flex-end" alignItems="center" mt={2}>
+            {['open', 'uncollectible'].includes(data.status) && (
+              <Button variant="contained" color="primary" disabled={state.paying} onClick={onPay}>
+                {t('customer.invoice.pay')}
+              </Button>
+            )}
+          </Stack>
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+}

package/src/pages/home.tsx

@@ -0,0 +1,9 @@
+function Home() {
+  return (
+    <pre style={{ textAlign: 'left' }}>
+      <code>window.blocklet = {JSON.stringify(window.blocklet, null, 2)}</code>
+    </pre>
+  );
+}
+
+export default Home;

package/tsconfig.api.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "outDir": "api/dist",
+    "noEmit": false,
+    "noEmitOnError": true
+  },
+  "include": ["api/*.d.ts", "api/src"]
+}

package/tsconfig.eslint.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": [".eslintrc.js"]
+}

package/tsconfig.json

@@ -0,0 +1,99 @@
+{
+  "ts-node": {
+    "files": true
+  },
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+    /* Language and Environment */
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+    /* Modules */
+    "module": "commonjs" /* Specify what module code is generated. */,
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    "noEmit": true /* Disable emitting files from a compilation. */,
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    "importsNotUsedAsValues": "error",
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+    /* Interop Constraints */
+    "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
+    "strictFunctionTypes": true /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */,
+    "strictBindCallApply": true /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */,
+    "strictPropertyInitialization": true /* Check for class properties that are declared but not set in the constructor. */,
+    "noImplicitThis": true /* Enable error reporting when 'this' is given the type 'any'. */,
+    "useUnknownInCatchVariables": false /* Default catch clause variables as 'unknown' instead of 'any'. */,
+    "alwaysStrict": true /* Ensure 'use strict' is always emitted. */,
+    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+    // "exactOptionalPropertyTypes": false /* Interpret optional property types as written, rather than adding 'undefined'. */,
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
+    "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
+    "noImplicitOverride": true /* Ensure overriding members in derived classes are marked with an override modifier. */,
+    // "noPropertyAccessFromIndexSignature": true /* Enforces using indexed accessors for keys declared using an indexed type. */,
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
+}

package/tsconfig.types.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "outDir": "types",
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "noEmitOnError": true
+  },
+  "include": ["api/*.d.ts", "api/src/store/models"]
+}

package/vite.config.ts

@@ -0,0 +1,19 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { createBlockletPlugin } from 'vite-plugin-blocklet';
+import svgr from 'vite-plugin-svgr';
+
+// https://vitejs.dev/config/
+export default defineConfig(() => {
+  return {
+    plugins: [react(), createBlockletPlugin(), svgr()],
+    build: {
+      // 禁止 preload 可以解决 js 的请求没有 referer 的问题
+      cssCodeSplit: false,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+      },
+    },
+  };
+});