payment-kit 1.13.113 → 1.13.114

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.113
+version: 1.13.114
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.113",
+  "version": "1.13.114",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev",
     "eject": "vite eject",
@@ -50,7 +50,7 @@
     "@arcblock/jwt": "^1.18.108",
     "@arcblock/ux": "^2.9.15",
     "@blocklet/logger": "1.16.23-beta-aeb9f5bd",
-    "@blocklet/payment-react": "1.13.113",
+    "@blocklet/payment-react": "1.13.114",
     "@blocklet/sdk": "1.16.23-beta-aeb9f5bd",
     "@blocklet/ui-react": "^2.9.15",
     "@blocklet/uploader": "^0.0.65",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23-beta-aeb9f5bd",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.113",
+    "@blocklet/payment-types": "1.13.114",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "d1a99d9bbdb06d4e7742d7741ec511fa0fee4663"
+  "gitHead": "c8323e8e3322d6cb7b3a329576900bb8342d8631"
 }

package/src/pages/checkout/pay.tsx

@@ -1,4 +1,4 @@
-import { Checkout } from '@blocklet/payment-react';
+import { CheckoutForm } from '@blocklet/payment-react';
 
 type Props = {
   id: string;
@@ -23,5 +23,5 @@ export default function Payment({ id }: Props) {
     }
   };
 
-  return <Checkout mode="standalone" id={id} onPaid={onPaid} />;
+  return <CheckoutForm mode="standalone" id={id} onPaid={onPaid} />;
 }

package/src/pages/checkout/pricing-table.tsx

@@ -1,134 +1,20 @@
 import Center from '@arcblock/ux/lib/Center';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import Toast from '@arcblock/ux/lib/Toast';
-import { Livemode, PricingTable, ProductSkeleton, api } from '@blocklet/payment-react';
-import type { TPricingTableExpanded } from '@blocklet/payment-types';
+import { CheckoutTable } from '@blocklet/payment-react';
 import Header from '@blocklet/ui-react/lib/Header';
-import { Alert, Box, Skeleton, Stack, Typography } from '@mui/material';
-import { useLocalStorageState, useRequest } from 'ahooks';
-import { useSearchParams } from 'react-router-dom';
+import { Box } from '@mui/material';
 
 type Props = {
   id: string;
 };
 
-const fetchData = async (id: string): Promise<TPricingTableExpanded> => {
-  const { data } = await api.get(`/api/pricing-tables/${id}`);
-  return data;
-};
-
 export default function PricingTablePage({ id }: Props) {
-  const { t } = useLocaleContext();
-  const [params] = useSearchParams();
-  const [livemode] = useLocalStorageState('livemode', { defaultValue: true });
-  const { error, loading, data } = useRequest(() => fetchData(id));
-
-  if (error) {
-    return (
-      <Box
-        sx={{
-          width: '100vw',
-          minHeight: '90vh',
-          pb: 4,
-          display: 'flex',
-          flexDirection: 'column',
-        }}>
-        <Header
-          meta={undefined}
-          addons={undefined}
-          sessionManagerProps={undefined}
-          homeLink={undefined}
-          theme={undefined}
-        />
-        <Center relative="parent">
-          <Alert severity="error">{error.message}</Alert>
-        </Center>
-      </Box>
-    );
-  }
-
-  if (loading || !data) {
-    return (
-      <Box
-        sx={{
-          width: '100vw',
-          minHeight: '90vh',
-          pb: 4,
-          display: 'flex',
-          flexDirection: 'column',
-        }}>
-        <Header
-          meta={undefined}
-          addons={undefined}
-          sessionManagerProps={undefined}
-          homeLink={undefined}
-          theme={undefined}
-        />
-        <Center>
-          <Stack direction="column" alignItems="center" spacing={4}>
-            <Typography component="div" variant="h3" sx={{ width: '40%' }}>
-              <Skeleton />
-            </Typography>
-            <Typography component="div" variant="h6" sx={{ width: '10%' }}>
-              <Skeleton />
-            </Typography>
-            <Stack flexWrap="wrap" direction="row" gap={{ xs: 3, sm: 5, md: 10 }} justifyContent="center">
-              <ProductSkeleton key={1} count={2} />
-              <ProductSkeleton key={2} count={3} />
-              <ProductSkeleton key={3} count={4} />
-            </Stack>
-          </Stack>
-        </Center>
-      </Box>
-    );
-  }
-
-  if (data.items.length === 0) {
-    return (
-      <Box
-        sx={{
-          width: '100vw',
-          minHeight: '90vh',
-          pb: 4,
-          display: 'flex',
-          flexDirection: 'column',
-        }}>
-        <Header
-          meta={undefined}
-          addons={undefined}
-          sessionManagerProps={undefined}
-          homeLink={undefined}
-          theme={undefined}
-        />
-        <Center relative="parent">
-          <Alert severity="warning">{t('payment.checkout.noPricing')}</Alert>
-        </Center>
-      </Box>
-    );
-  }
-
-  const onStartCheckoutSession = (priceId: string) => {
-    api
-      .post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${params.toString()}`)
-      .then((res) => {
-        window.location.href = res.data.url;
-      })
-      .catch((err) => {
-        console.error(err);
-        Toast.error(err.message);
-      });
-  };
-
   return (
     <Box
       sx={{
         width: '100vw',
         minHeight: '90vh',
         pb: 4,
-        display: {
-          xs: 'block',
-          sm: 'flex',
-        },
+        display: 'flex',
         flexDirection: 'column',
       }}>
       <Header
@@ -139,13 +25,7 @@ export default function PricingTablePage({ id }: Props) {
         theme={undefined}
       />
       <Center relative="parent">
-        <Stack direction="column" alignItems="center" spacing={4}>
-          <Typography variant="h4" color="text.primary" fontWeight={600}>
-            {data.name}
-            {!livemode && <Livemode />}
-          </Typography>
-          <PricingTable table={data} onSelect={onStartCheckoutSession} />
-        </Stack>
+        <CheckoutTable id={id} mode="standalone" />;
       </Center>
     </Box>
   );