@blocklet/payment-react 1.15.4 → 1.15.6

package/es/components/pricing-table.js

@@ -28,7 +28,8 @@ import {
   formatPriceAmount,
   formatRecurring,
   getPriceCurrencyOptions,
-  getPriceUintAmountByCurrency
+  getPriceUintAmountByCurrency,
+  isMobileSafari
 } from "../libs/util.js";
 import Amount from "../payment/amount.js";
 import { useMobile } from "../hooks/mobile.js";
@@ -63,8 +64,19 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
   const {
-    settings: { paymentMethods = [] }
+    settings: { paymentMethods = [] },
+    livemode,
+    setLivemode,
+    refresh
   } = usePaymentContext();
+  const isMobileSafariEnv = isMobileSafari();
+  useEffect(() => {
+    if (table) {
+      if (livemode !== table.livemode) {
+        setLivemode(table.livemode);
+      }
+    }
+  }, [table, livemode, setLivemode, refresh]);
   const [currency, setCurrency] = useState(table.currency || {});
   const { recurring, grouped } = useMemo(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
   const recurringKeysList = useMemo(() => {
@@ -139,6 +151,13 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       width: 100%;
       gap: 20px;
     }
+    .price-table-wrap {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
     @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
       // .price-table-item {
       //   width: 90% !important;
@@ -159,233 +178,259 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       }
     }
   `;
-  return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsxs(
-    Stack,
+  return /* @__PURE__ */ jsx(
+    Root,
     {
-      direction: "column",
-      alignItems: alignItems === "center" ? "center" : "flex-start",
       sx: {
-        gap: {
-          xs: 3,
-          sm: mode === "select" ? 3 : 5
-        }
+        flex: 1,
+        overflow: {
+          xs: isMobileSafariEnv ? "visible" : "hidden",
+          md: "hidden"
+        },
+        display: "flex",
+        flexDirection: "column"
       },
-      children: [
-        /* @__PURE__ */ jsxs(Stack, { className: "btn-row", flexDirection: "row", children: [
-          recurringKeysList.length > 0 && /* @__PURE__ */ jsx(Box, { children: isMobile && recurringKeysList.length > 1 ? /* @__PURE__ */ jsx(
-            Select,
-            {
-              value: state.interval,
-              onChange: (e) => setState({ interval: e.target.value }),
-              size: "small",
-              sx: { m: 1 },
-              children: recurringKeysList.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x, children: /* @__PURE__ */ jsx(Typography, { color: x === state.interval ? "text.primary" : "text.secondary", children: formatRecurring(recurring[x], true, "", locale) }) }, x))
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "column",
+          alignItems: alignItems === "center" ? "center" : "flex-start",
+          sx: {
+            gap: {
+              xs: 3,
+              sm: mode === "select" ? 3 : 5
+            },
+            height: "100%",
+            overflow: {
+              xs: "auto",
+              md: "hidden"
             }
-          ) : /* @__PURE__ */ jsx(
-            ToggleButtonGroup,
-            {
-              size: "small",
-              value: state.interval,
-              sx: {
-                padding: "4px",
-                borderRadius: "36px",
-                height: "40px",
-                boxSizing: "border-box",
-                backgroundColor: "#f1f3f5",
-                border: 0
-              },
-              onChange: (_, value) => {
-                if (value !== null) {
-                  setState({ interval: value });
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Stack, { className: "btn-row", flexDirection: "row", children: [
+              recurringKeysList.length > 0 && /* @__PURE__ */ jsx(Box, { children: isMobile && recurringKeysList.length > 1 ? /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: state.interval,
+                  onChange: (e) => setState({ interval: e.target.value }),
+                  size: "small",
+                  sx: { m: 1 },
+                  children: recurringKeysList.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x, children: /* @__PURE__ */ jsx(Typography, { color: x === state.interval ? "text.primary" : "text.secondary", children: formatRecurring(recurring[x], true, "", locale) }) }, x))
                 }
-              },
-              exclusive: true,
-              children: recurringKeysList.map((x) => /* @__PURE__ */ jsx(
-                ToggleButton,
+              ) : /* @__PURE__ */ jsx(
+                ToggleButtonGroup,
                 {
                   size: "small",
-                  value: x,
+                  value: state.interval,
                   sx: {
-                    textTransform: "capitalize",
-                    padding: "5px 12px",
-                    fontSize: "13px",
-                    backgroundColor: x === state.interval ? "#fff !important" : "#f1f3f5 !important",
-                    border: "0px",
-                    "&.Mui-selected": {
-                      borderRadius: "9999px !important",
-                      border: "1px solid #e5e7eb"
+                    padding: "4px",
+                    borderRadius: "36px",
+                    height: "40px",
+                    boxSizing: "border-box",
+                    backgroundColor: "#f1f3f5",
+                    border: 0
+                  },
+                  onChange: (_, value) => {
+                    if (value !== null) {
+                      setState({ interval: value });
                     }
                   },
-                  children: formatRecurring(recurring[x], true, "", locale)
-                },
-                x
-              ))
-            }
-          ) }),
-          currencyList.length > 0 && /* @__PURE__ */ jsx(
-            Select,
-            {
-              value: currency?.id,
-              onChange: (e) => setCurrency(currencyList.find((v) => v?.id === e.target.value)),
-              size: "small",
-              sx: { m: 1, width: 120 },
-              children: currencyList.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x?.id, children: /* @__PURE__ */ jsx(Typography, { color: x?.id === currency?.id ? "text.primary" : "text.secondary", children: x?.symbol }) }, x?.id))
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          Stack,
-          {
-            flexWrap: "wrap",
-            direction: "row",
-            gap: "20px",
-            justifyContent: alignItems === "center" ? "center" : "flex-start",
-            className: "price-table-wrap",
-            children: productList?.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__ */ jsxs(
-                Stack,
-                {
-                  padding: 4,
-                  spacing: 2,
-                  direction: "column",
-                  alignItems: "flex-start",
-                  className: "price-table-item",
-                  justifyContent: "flex-start",
-                  sx: {
-                    cursor: "pointer",
-                    borderWidth: "1px",
-                    borderStyle: "solid",
-                    borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
-                    borderRadius: 2,
-                    transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
-                    boxShadow: "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)",
-                    "&:hover": {
-                      borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
-                      boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
-                    },
-                    width: {
-                      xs: "100%",
-                      md: "320px"
+                  exclusive: true,
+                  children: recurringKeysList.map((x) => /* @__PURE__ */ jsx(
+                    ToggleButton,
+                    {
+                      size: "small",
+                      value: x,
+                      sx: {
+                        textTransform: "capitalize",
+                        padding: "5px 12px",
+                        fontSize: "13px",
+                        backgroundColor: x === state.interval ? "#fff !important" : "#f1f3f5 !important",
+                        border: "0px",
+                        "&.Mui-selected": {
+                          borderRadius: "9999px !important",
+                          border: "1px solid #e5e7eb"
+                        }
+                      },
+                      children: formatRecurring(recurring[x], true, "", locale)
                     },
-                    maxWidth: "360px",
-                    padding: "20px",
-                    position: "relative"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Box, { textAlign: "center", children: /* @__PURE__ */ jsxs(
-                      Stack,
-                      {
-                        direction: "column",
-                        justifyContent: "center",
-                        alignItems: "flex-start",
-                        spacing: 1,
-                        sx: { gap: "12px" },
-                        children: [
-                          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                            /* @__PURE__ */ jsx(
-                              Typography,
+                    x
+                  ))
+                }
+              ) }),
+              currencyList.length > 0 && /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: currency?.id,
+                  onChange: (e) => setCurrency(currencyList.find((v) => v?.id === e.target.value)),
+                  size: "small",
+                  sx: { m: 1, width: 120 },
+                  children: currencyList.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x?.id, children: /* @__PURE__ */ jsx(Typography, { color: x?.id === currency?.id ? "text.primary" : "text.secondary", children: x?.symbol }) }, x?.id))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Stack,
+              {
+                flexWrap: "wrap",
+                direction: "row",
+                gap: "20px",
+                justifyContent: alignItems === "center" ? "center" : "flex-start",
+                sx: {
+                  flex: "0 1 auto",
+                  overflow: "auto",
+                  pb: 2.5
+                },
+                className: "price-table-wrap",
+                children: productList?.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__ */ jsxs(
+                    Stack,
+                    {
+                      padding: 4,
+                      spacing: 2,
+                      direction: "column",
+                      alignItems: "flex-start",
+                      className: "price-table-item",
+                      justifyContent: "flex-start",
+                      sx: {
+                        cursor: "pointer",
+                        borderWidth: "1px",
+                        borderStyle: "solid",
+                        borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
+                        borderRadius: 2,
+                        transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
+                        boxShadow: "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)",
+                        "&:hover": {
+                          borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
+                          boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
+                        },
+                        width: {
+                          xs: "100%",
+                          md: "320px"
+                        },
+                        maxWidth: "360px",
+                        minWidth: "300px",
+                        padding: "20px",
+                        position: "relative",
+                        height: "fit-content"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Box, { textAlign: "center", children: /* @__PURE__ */ jsxs(
+                          Stack,
+                          {
+                            direction: "column",
+                            justifyContent: "center",
+                            alignItems: "flex-start",
+                            spacing: 1,
+                            sx: { gap: "12px" },
+                            children: [
+                              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                                /* @__PURE__ */ jsx(
+                                  Typography,
+                                  {
+                                    color: "text.primary",
+                                    fontWeight: 600,
+                                    sx: {
+                                      fontSize: "18px !important",
+                                      fontWeight: "600"
+                                    },
+                                    children: /* @__PURE__ */ jsx(TruncatedText, { text: x.product.name, maxLength: 26, useWidth: true })
+                                  }
+                                ),
+                                x.is_highlight && /* @__PURE__ */ jsx(
+                                  Chip,
+                                  {
+                                    label: x.highlight_text,
+                                    color: "default",
+                                    size: "small",
+                                    sx: {
+                                      position: "absolute",
+                                      top: "20px",
+                                      right: "20px"
+                                    }
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsx(
+                                Amount,
+                                {
+                                  amount: formatPriceAmount(x.price, currency, x.product.unit_label),
+                                  sx: { my: 0, marginTop: "0px !important", fontSize: "48px", fontWeight: "bold" }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                Typography,
+                                {
+                                  color: "text.secondary",
+                                  sx: {
+                                    marginTop: "0px !important",
+                                    fontWeight: "400",
+                                    fontSize: "16px",
+                                    textAlign: "left"
+                                  },
+                                  children: x.product.description
+                                }
+                              )
+                            ]
+                          }
+                        ) }),
+                        x.product.features.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(List, { dense: true, sx: { display: "flex", flexDirection: "column", gap: "16px", padding: "0px" }, children: [
+                          /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              sx: {
+                                width: "100%",
+                                position: "relative",
+                                borderTop: "1px solid #e5e7eb",
+                                boxSizing: "border-box",
+                                height: "1px"
+                              }
+                            }
+                          ),
+                          x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, sx: { fontSize: "16px !important" }, children: [
+                            /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25, color: "#059669", fontSize: "64px" }, children: /* @__PURE__ */ jsx(
+                              CheckOutlined,
                               {
-                                color: "text.primary",
-                                fontWeight: 600,
+                                color: "success",
+                                fontSize: "small",
                                 sx: {
-                                  fontSize: "18px !important",
-                                  fontWeight: "600"
-                                },
-                                children: /* @__PURE__ */ jsx(TruncatedText, { text: x.product.name, maxLength: 26, useWidth: true })
+                                  color: "#059669",
+                                  fontSize: "18px"
+                                }
                               }
-                            ),
-                            x.is_highlight && /* @__PURE__ */ jsx(
-                              Chip,
+                            ) }),
+                            /* @__PURE__ */ jsx(
+                              ListItemText,
                               {
-                                label: x.highlight_text,
-                                color: "default",
-                                size: "small",
                                 sx: {
-                                  position: "absolute",
-                                  top: "20px",
-                                  right: "20px"
-                                }
+                                  ".MuiListItemText-primary": {
+                                    fontSize: "16px",
+                                    color: "#030712",
+                                    fontWeight: "500"
+                                  }
+                                },
+                                primary: f.name
                               }
                             )
-                          ] }),
-                          /* @__PURE__ */ jsx(
-                            Amount,
-                            {
-                              amount: formatPriceAmount(x.price, currency, x.product.unit_label),
-                              sx: { my: 0, marginTop: "0px !important", fontSize: "48px", fontWeight: "bold" }
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            Typography,
-                            {
-                              color: "text.secondary",
-                              sx: {
-                                marginTop: "0px !important",
-                                fontWeight: "400",
-                                fontSize: "16px",
-                                textAlign: "left"
-                              },
-                              children: x.product.description
-                            }
-                          )
-                        ]
-                      }
-                    ) }),
-                    x.product.features.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(List, { dense: true, sx: { display: "flex", flexDirection: "column", gap: "16px", padding: "0px" }, children: [
-                      /* @__PURE__ */ jsx(
-                        Box,
-                        {
-                          sx: {
-                            width: "100%",
-                            position: "relative",
-                            borderTop: "1px solid #e5e7eb",
-                            boxSizing: "border-box",
-                            height: "1px"
-                          }
-                        }
-                      ),
-                      x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, sx: { fontSize: "16px !important" }, children: [
-                        /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25, color: "#059669", fontSize: "64px" }, children: /* @__PURE__ */ jsx(
-                          CheckOutlined,
-                          {
-                            color: "success",
-                            fontSize: "small",
-                            sx: {
-                              color: "#059669",
-                              fontSize: "18px"
-                            }
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsx(
-                          ListItemText,
-                          {
-                            sx: {
-                              ".MuiListItemText-primary": {
-                                fontSize: "16px",
-                                color: "#030712",
-                                fontWeight: "500"
-                              }
-                            },
-                            primary: f.name
-                          }
-                        )
-                      ] }, f.name))
-                    ] }) }),
-                    /* @__PURE__ */ jsx(Subscribe, { x, action, onSelect, currencyId: currency?.id })
-                  ]
-                },
-                x?.price_id
-              );
-            })
-          }
-        )
-      ]
+                          ] }, f.name))
+                        ] }) }),
+                        /* @__PURE__ */ jsx(Subscribe, { x, action, onSelect, currencyId: currency?.id })
+                      ]
+                    },
+                    x?.price_id
+                  );
+                })
+              }
+            )
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 function Subscribe({ x, action, onSelect, currencyId }) {
   const [state, setState] = useState({ loading: "", loaded: false });

package/es/contexts/payment.js

@@ -8,13 +8,14 @@ const PaymentContext = createContext({ api });
 const { Provider, Consumer } = PaymentContext;
 let settingsPromise = null;
 const getSettings = () => {
-  const cacheKey = `payment-settings-${window.location.pathname}`;
+  const livemode = localStorage.getItem("livemode") !== "false";
+  const cacheKey = `payment-settings-${window.location.pathname}-${livemode}`;
   const cachedData = sessionStorage.getItem(cacheKey);
   if (cachedData) {
     return JSON.parse(cachedData);
   }
   if (!settingsPromise) {
-    settingsPromise = api.get("/api/settings").then(({ data }) => {
+    settingsPromise = api.get("/api/settings", { params: { livemode } }).then(({ data }) => {
       sessionStorage.setItem(cacheKey, JSON.stringify(data));
       return data;
     }).catch((error) => {
@@ -36,8 +37,10 @@ function PaymentProvider({ session, connect, children, baseUrl }) {
   if (baseUrl) {
     window.__PAYMENT_KIT_BASE_URL = baseUrl;
   }
-  const { data, error, run, loading } = useRequest(getSettings);
   const [livemode, setLivemode] = useLocalStorageState("livemode", { defaultValue: true });
+  const { data, error, run, loading } = useRequest(getSettings, {
+    refreshDeps: [livemode]
+  });
   const prefix = getPrefix();
   const [payable, setPayable] = useState(true);
   if (error) {

package/es/history/invoice/list.d.ts

@@ -10,6 +10,7 @@ type Props = {
     target?: string;
     action?: string;
     type?: 'list' | 'table';
+    onTableDataChange?: Function;
 };
 declare function CustomerInvoiceList(props: Props): JSX.Element;
 declare namespace CustomerInvoiceList {
@@ -24,6 +25,7 @@ declare namespace CustomerInvoiceList {
         target: string;
         action: string;
         type: string;
+        onTableDataChange: () => void;
     };
 }
 export default CustomerInvoiceList;

package/es/history/invoice/list.js

@@ -69,7 +69,8 @@ const InvoiceTable = React.memo((props) => {
     currency_id,
     subscription_id,
     include_staking,
-    include_recovered_from
+    include_recovered_from,
+    onTableDataChange
   } = props;
   const listKey = "invoice-table";
   const { t, locale } = useLocaleContext();
@@ -77,7 +78,11 @@ const InvoiceTable = React.memo((props) => {
     pageSize: pageSize || 10,
     page: 1
   });
-  const { loading, data = { list: [], count: 0 } } = useRequest(
+  const {
+    loading,
+    data = { list: [], count: 0 },
+    refresh
+  } = useRequest(
     () => fetchData({
       ...search,
       status,
@@ -92,6 +97,22 @@ const InvoiceTable = React.memo((props) => {
       refreshDeps: [search]
     }
   );
+  useEffect(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data);
+    }
+  }, [data]);
+  const subscription = useSubscription("events");
+  useEffect(() => {
+    if (subscription && customer_id) {
+      subscription.on("invoice.paid", ({ response }) => {
+        if (response.customer_id === customer_id) {
+          Toast.success(t("payment.customer.invoice.paySuccess"));
+          refresh();
+        }
+      });
+    }
+  }, [subscription]);
   const columns = [
     {
       label: t("common.amount"),
@@ -226,7 +247,8 @@ const InvoiceList = React.memo((props) => {
     pageSize,
     target,
     action,
-    onPay
+    onPay,
+    onTableDataChange
   } = props;
   const size = pageSize || 10;
   const subscription = useSubscription("events");
@@ -250,10 +272,16 @@ const InvoiceList = React.memo((props) => {
       reloadDeps: [customer_id, subscription_id, status, include_staking, include_recovered_from]
     }
   );
+  useEffect(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data);
+    }
+  }, [data]);
   useEffect(() => {
     if (subscription && customer_id) {
       subscription.on("invoice.paid", async ({ response }) => {
         if (response.customer_id === customer_id) {
+          Toast.success(t("payment.customer.invoice.paySuccess"));
           await reloadAsync();
         }
       });
@@ -384,7 +412,9 @@ CustomerInvoiceList.defaultProps = {
   pageSize: 10,
   target: "_self",
   action: "",
-  type: "list"
+  type: "list",
+  onTableDataChange: () => {
+  }
 };
 const Root = styled(Stack)`
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {

package/es/libs/util.js

@@ -839,5 +839,6 @@ export function truncateText(text, maxLength, useWidth = false) {
   return `${truncated}...`;
 }
 export function getCustomerAvatar(did, updated_at, imageSize = 48) {
-  return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated_at || dayjs().unix()}`;
+  const updated = typeof updated_at === "number" ? updated_at : dayjs(updated_at).unix();
+  return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated || dayjs().unix()}`;
 }

package/es/payment/index.js

@@ -260,9 +260,6 @@ export default function Payment({
     if (checkoutSession) {
       if (livemode !== checkoutSession.livemode) {
         setLivemode(checkoutSession.livemode);
-        setTimeout(() => {
-          refresh();
-        }, 10);
       }
     }
   }, [checkoutSession, livemode, setLivemode, refresh]);