@blocklet/payment-react 1.13.122 → 1.13.124

package/es/components/pricing-table.js

@@ -98,73 +98,75 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
             direction: "row",
             gap: { xs: 3, sm: 5, md: mode === "checkout" ? 10 : 5 },
             justifyContent: alignItems === "center" ? "center" : "flex-start",
-            children: grouped[state.interval]?.map((x) => {
-              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 /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
-                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%)"
-                    }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs(Box, { textAlign: "center", children: [
+            children: grouped[state.interval]?.map(
+              (x) => {
+                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 /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
+                  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%)"
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(Box, { textAlign: "center", children: [
+                        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+                          /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", fontWeight: 600, children: x.product.name }),
+                          x.is_highlight && /* @__PURE__ */ jsx(Chip, { label: x.highlight_text, color: "default", size: "small" })
+                        ] }),
+                        /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: x.product.description })
+                      ] }),
                       /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-                        /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", fontWeight: 600, children: x.product.name }),
-                        x.is_highlight && /* @__PURE__ */ jsx(Chip, { label: x.highlight_text, color: "default", size: "small" })
+                        /* @__PURE__ */ jsx(Amount, { amount: formatPriceAmount(x.price, table.currency, x.product.unit_label) }),
+                        /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", children: [
+                          /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: t("payment.checkout.per") }),
+                          /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: formatRecurring(x.price.recurring, false, "", locale) })
+                        ] })
                       ] }),
-                      /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: x.product.description })
-                    ] }),
-                    /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-                      /* @__PURE__ */ jsx(Amount, { amount: formatPriceAmount(x.price, table.currency, x.product.unit_label) }),
-                      /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", children: [
-                        /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: t("payment.checkout.per") }),
-                        /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: formatRecurring(x.price.recurring, false, "", locale) })
+                      /* @__PURE__ */ jsx(
+                        LoadingButton,
+                        {
+                          fullWidth: true,
+                          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),
+                          children: action
+                        }
+                      ),
+                      x.product.features.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+                        /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.include") }),
+                        /* @__PURE__ */ jsx(List, { dense: true, children: x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, children: [
+                          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25 }, children: /* @__PURE__ */ jsx(CheckOutlined, { color: "success", fontSize: "small" }) }),
+                          /* @__PURE__ */ jsx(ListItemText, { primary: f.name })
+                        ] }, f.name)) })
                       ] })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      LoadingButton,
-                      {
-                        fullWidth: true,
-                        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),
-                        children: action
-                      }
-                    ),
-                    x.product.features.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-                      /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.include") }),
-                      /* @__PURE__ */ jsx(List, { dense: true, children: x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, children: [
-                        /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25 }, children: /* @__PURE__ */ jsx(CheckOutlined, { color: "success", fontSize: "small" }) }),
-                        /* @__PURE__ */ jsx(ListItemText, { primary: f.name })
-                      ] }, f.name)) })
-                    ] })
-                  ]
-                }
-              ) }, x.price_id);
-            })
+                    ]
+                  }
+                ) }, x.price_id);
+              }
+            )
           }
         )
       ]

package/es/contexts/payment.d.ts

@@ -7,8 +7,10 @@ export interface Settings {
 }
 export type PaymentContextType = {
     livemode: boolean;
-    session: any;
-    connect: any;
+    session: import('@arcblock/did-connect/lib/types').SessionContext['session'] & {
+        user: any;
+    };
+    connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
     prefix: string;
     settings: Settings;
     refresh: () => void;

package/es/payment/form/index.js

@@ -10,12 +10,13 @@ import { PhoneNumberUtil } from "google-libphonenumber";
 import pWaitFor from "p-wait-for";
 import { useEffect, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { joinURL } from "ufo";
 import { dispatch } from "use-bus";
 import isEmail from "validator/es/lib/isEmail";
 import api from "../../api.js";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
-import { formatError, getStatementDescriptor } from "../../util.js";
+import { formatError, getPrefix, getStatementDescriptor } from "../../util.js";
 import UserButtons from "./addon.js";
 import AddressForm from "./address.js";
 import PhoneInput from "./phone.js";
@@ -168,8 +169,9 @@ export default function PaymentForm({
           await handleConnected();
         } else {
           connect.open({
+            containerEl: void 0,
             action: checkoutSession.mode,
-            timeout: 5 * 60 * 1e3,
+            prefix: joinURL(window.location.origin, getPrefix(), "/api/did"),
             extraParams: { checkoutSessionId: checkoutSession.id },
             onSuccess: async () => {
               connect.close();

package/lib/contexts/payment.d.ts

@@ -7,8 +7,10 @@ export interface Settings {
 }
 export type PaymentContextType = {
     livemode: boolean;
-    session: any;
-    connect: any;
+    session: import('@arcblock/did-connect/lib/types').SessionContext['session'] & {
+        user: any;
+    };
+    connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
     prefix: string;
     settings: Settings;
     refresh: () => void;

package/lib/payment/form/index.js

@@ -16,6 +16,7 @@ var _googleLibphonenumber = require("google-libphonenumber");
 var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
 var _react = require("react");
 var _reactHookForm = require("react-hook-form");
+var _ufo = require("ufo");
 var _useBus = require("use-bus");
 var _isEmail = _interopRequireDefault(require("validator/es/lib/isEmail"));
 var _api = _interopRequireDefault(require("../../api"));
@@ -203,8 +204,9 @@ function PaymentForm({
           await handleConnected();
         } else {
           connect.open({
+            containerEl: void 0,
             action: checkoutSession.mode,
-            timeout: 5 * 60 * 1e3,
+            prefix: (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), "/api/did"),
             extraParams: {
               checkoutSessionId: checkoutSession.id
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.122",
+  "version": "1.13.124",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -89,7 +89,7 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
-    "@blocklet/payment-types": "1.13.122",
+    "@blocklet/payment-types": "1.13.124",
     "@storybook/addon-essentials": "^7.6.10",
     "@storybook/addon-interactions": "^7.6.10",
     "@storybook/addon-links": "^7.6.10",
@@ -118,5 +118,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "015a834e0971d7d0d9947953daeb96a240248c2f"
+  "gitHead": "aa43e00accb681c724d88facc2dd5b61519e17ef"
 }

package/src/components/pricing-table.tsx

@@ -119,86 +119,88 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         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');
-          }
+        {grouped[state.interval as string]?.map(
+          (x: TPricingTableItem & { is_selected?: boolean; is_disabled?: boolean }) => {
+            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">
+            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}>
-                    <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>
+                    <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>
-                <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>
-          );
-        })}
+              </Fade>
+            );
+          }
+        )}
       </Stack>
     </Stack>
   );

package/src/contexts/payment.tsx

@@ -16,8 +16,8 @@ export interface Settings {
 
 export type PaymentContextType = {
   livemode: boolean;
-  session: any;
-  connect: any;
+  session: import('@arcblock/did-connect/lib/types').SessionContext['session'] & { user: any };
+  connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
   prefix: string;
   settings: Settings;
   refresh: () => void;

package/src/payment/form/index.tsx

@@ -11,6 +11,7 @@ import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import { joinURL } from 'ufo';
 import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
 
@@ -18,7 +19,7 @@ import api from '../../api';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
-import { formatError, getStatementDescriptor } from '../../util';
+import { formatError, getPrefix, getStatementDescriptor } from '../../util';
 import UserButtons from './addon';
 import AddressForm from './address';
 import PhoneInput from './phone';
@@ -224,9 +225,11 @@ export default function PaymentForm({
         if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
           await handleConnected();
         } else {
+          // @FIXME: 需要考虑如何正确地适配前端组件的使用 @wangshijun
           connect.open({
+            containerEl: undefined as unknown as Element,
             action: checkoutSession.mode,
-            timeout: 5 * 60 * 1000,
+            prefix: joinURL(window.location.origin, getPrefix(), '/api/did'),
             extraParams: { checkoutSessionId: checkoutSession.id },
             onSuccess: async () => {
               connect.close();
@@ -240,7 +243,7 @@ export default function PaymentForm({
               setState({ submitting: false, paying: false });
               onError(err);
             },
-          });
+          } as any);
         }
       }
       if (['stripe'].includes(method.type)) {
@@ -264,6 +267,7 @@ export default function PaymentForm({
     if (session?.user) {
       handleSubmit(onSubmit)();
     } else {
+      // @ts-ignored
       session?.login({
         onSuccess: onUserLoggedIn,
         extraParams: {},