@blocklet/payment-react 1.13.239 → 1.13.241

package/es/checkout/donate.js

@@ -19,9 +19,9 @@ import { useRequest, useSetState } from "ahooks";
 import omit from "lodash/omit";
 import uniqBy from "lodash/unionBy";
 import { useEffect } from "react";
-import api from "../api.js";
 import TxLink from "../components/blockchain/tx.js";
-import { formatBNStr, formatDateTime, formatError } from "../util.js";
+import api from "../libs/api.js";
+import { formatBNStr, formatDateTime, formatError } from "../libs/util.js";
 import CheckoutForm from "./form.js";
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
@@ -35,9 +35,9 @@ const createOrUpdateDonation = (settings, livemode = true) => {
   return donationCache[settings.target];
 };
 const supporterCache = {};
-const fetchSupporters = (target) => {
+const fetchSupporters = (target, livemode = true) => {
   if (!supporterCache[target]) {
-    supporterCache[target] = api.get("/api/donations", { params: { target } }).then((res) => res.data).finally(() => {
+    supporterCache[target] = api.get("/api/donations", { params: { target, livemode } }).then((res) => res.data).finally(() => {
       setTimeout(() => {
         delete supporterCache[target];
       }, 3e3);
@@ -126,7 +126,9 @@ export default function CheckoutDonate({ settings, livemode, onPaid, onError })
     exist: false
   });
   const donation = useRequest(() => createOrUpdateDonation(settings, livemode));
-  const supporters = useRequest(() => donation.data ? fetchSupporters(donation.data.id) : Promise.resolve({}));
+  const supporters = useRequest(
+    () => donation.data ? fetchSupporters(donation.data.id, livemode) : Promise.resolve({})
+  );
   useEffect(() => {
     if (donation.data && state.supporterLoaded === false) {
       setState({ supporterLoaded: true });

package/es/checkout/form.js

@@ -3,9 +3,9 @@ import { useRequest, useSetState } from "ahooks";
 import noop from "lodash/noop";
 import { useEffect } from "react";
 import { joinURL } from "ufo";
-import api from "../api.js";
+import api from "../libs/api.js";
+import { getPrefix, mergeExtraParams } from "../libs/util.js";
 import Payment from "../payment/index.js";
-import { getPrefix, mergeExtraParams } from "../util.js";
 const promises = {};
 const startFromPaymentLink = (id, params) => {
   if (!promises[id]) {

package/es/checkout/table.js

@@ -5,10 +5,10 @@ import { Alert, CircularProgress, Stack, Typography } from "@mui/material";
 import { Box } from "@mui/system";
 import { useRequest } from "ahooks";
 import { useState } from "react";
-import api from "../api.js";
 import Livemode from "../components/livemode.js";
 import PricingTable from "../components/pricing-table.js";
-import { mergeExtraParams } from "../util.js";
+import api from "../libs/api.js";
+import { mergeExtraParams } from "../libs/util.js";
 import CheckoutForm from "./form.js";
 const fetchData = async (id) => {
   const { data } = await api.get(`/api/pricing-tables/${id}`);

package/es/components/blockchain/gas.js

@@ -3,7 +3,7 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Typography } from "@mui/material";
 import { fromUnitToToken } from "@ocap/util";
 import { usePaymentContext } from "../../contexts/payment.js";
-import { getTxLink } from "../../util.js";
+import { getTxLink } from "../../libs/util.js";
 TxGas.defaultProps = {};
 export default function TxGas(props) {
   const { t } = useLocaleContext();

package/es/components/blockchain/tx.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { OpenInNewOutlined } from "@mui/icons-material";
 import { Link, Stack, Typography } from "@mui/material";
-import { getTxLink } from "../../util.js";
+import { getTxLink } from "../../libs/util.js";
 TxLink.defaultProps = {
   mode: "dashboard",
   align: "left"

package/es/components/confirm.d.ts

@@ -1,11 +1,12 @@
 import type { EventHandler } from 'react';
-declare function ConfirmDialog({ onConfirm, onCancel, title, message, confirm, cancel, loading, }: {
+declare function ConfirmDialog({ onConfirm, onCancel, title, message, confirm, color, cancel, loading, }: {
     onConfirm: EventHandler<any>;
     onCancel: EventHandler<any>;
     title: string | React.ReactNode;
     message: string | React.ReactNode;
     confirm?: string | React.ReactNode;
-    cancel?: string | React.ReactNode;
+    color?: string;
+    cancel?: boolean | string | React.ReactNode;
     loading?: boolean;
 }): import("react").JSX.Element;
 declare namespace ConfirmDialog {
@@ -13,6 +14,7 @@ declare namespace ConfirmDialog {
         loading: boolean;
         confirm: string;
         cancel: string;
+        color: string;
     };
 }
 export default ConfirmDialog;

package/es/components/confirm.js

@@ -8,6 +8,7 @@ export default function ConfirmDialog({
   title,
   message,
   confirm,
+  color,
   cancel,
   loading
 }) {
@@ -21,9 +22,10 @@ export default function ConfirmDialog({
       onCancel,
       confirmButton: {
         text: confirm || t("common.confirm"),
-        props: { color: "error", size: "small", variant: "contained", disabled: !!loading }
+        props: { color, size: "small", variant: "contained", disabled: !!loading }
       },
       cancelButton: { text: cancel || t("common.cancel"), props: { color: "inherit", size: "small" } },
+      showCancelButton: typeof cancel !== "boolean" || !!cancel,
       children: /* @__PURE__ */ jsx(Typography, { children: message })
     }
   );
@@ -31,5 +33,6 @@ export default function ConfirmDialog({
 ConfirmDialog.defaultProps = {
   loading: false,
   confirm: "",
-  cancel: ""
+  cancel: "",
+  color: "error"
 };

package/es/components/pricing-table.js

@@ -18,8 +18,8 @@ import {
 import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
 import { useEffect, useState } from "react";
+import { formatError, formatPriceAmount, formatRecurring } from "../libs/util.js";
 import Amount from "../payment/amount.js";
-import { formatError, formatPriceAmount, formatRecurring } from "../util.js";
 const groupItemsByRecurring = (items) => {
   const grouped = {};
   const recurring = {};

package/es/components/safe-guard.js

@@ -1,4 +1,4 @@
-import { PAYMENT_KIT_DID, isPaymentKitMounted } from "../util.js";
+import { PAYMENT_KIT_DID, isPaymentKitMounted } from "../libs/util.js";
 export default function SafeGuard({ children }) {
   const mounted = isPaymentKitMounted();
   if (mounted === false) {

package/es/contexts/payment.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { Alert } from "@mui/material";
 import { useLocalStorageState, useRequest } from "ahooks";
 import { createContext, useContext } from "react";
-import api from "../api.js";
-import { getPrefix } from "../util.js";
+import api from "../libs/api.js";
+import { getPrefix } from "../libs/util.js";
 const prefix = getPrefix();
 const PaymentContext = createContext({ api });
 const { Provider, Consumer } = PaymentContext;

package/es/history/invoice/list.js

@@ -1,13 +1,25 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Toast from "@arcblock/ux/lib/Toast";
 import { OpenInNewOutlined } from "@mui/icons-material";
 import { Box, Button, CircularProgress, Hidden, Stack, Typography } from "@mui/material";
 import { styled } from "@mui/system";
-import { useInfiniteScroll } from "ahooks";
+import { useInfiniteScroll, useSetState } from "ahooks";
+import { useEffect } from "react";
 import { joinURL } from "ufo";
-import api from "../../api.js";
 import Status from "../../components/status.js";
-import { formatBNStr, formatToDate, formatToDatetime, getInvoiceStatusColor, getPrefix, getTxLink } from "../../util.js";
+import { usePaymentContext } from "../../contexts/payment.js";
+import { useSubscription } from "../../hooks/subscription.js";
+import api from "../../libs/api.js";
+import {
+  formatBNStr,
+  formatError,
+  formatToDate,
+  formatToDatetime,
+  getInvoiceStatusColor,
+  getPrefix,
+  getTxLink
+} from "../../libs/util.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {
@@ -32,6 +44,7 @@ const getInvoiceLink = (invoice, action) => {
   if (invoice.id.startsWith("in_")) {
     return {
       external: false,
+      connect: invoice.status === "uncollectible",
       url: joinURL(
         window.location.origin,
         getPrefix(),
@@ -41,6 +54,7 @@ const getInvoiceLink = (invoice, action) => {
   }
   return {
     external: true,
+    connect: false,
     url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link
   };
 };
@@ -54,9 +68,12 @@ export default function CustomerInvoiceList({
   target,
   action
 }) {
-  const { t, locale } = useLocaleContext();
   const size = pageSize || 10;
-  const { data, loadMore, loadingMore, loading } = useInfiniteScroll(
+  const subscription = useSubscription("events");
+  const { t, locale } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [state, setState] = useSetState({ paying: "" });
+  const { data, loadMore, loadingMore, loading, reloadAsync } = useInfiniteScroll(
     (d) => {
       const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
       return fetchData({
@@ -71,9 +88,47 @@ export default function CustomerInvoiceList({
       });
     },
     {
-      reloadDeps: [customer_id, subscription_id, status]
+      reloadDeps: [customer_id, subscription_id, status, include_staking]
     }
   );
+  useEffect(() => {
+    if (subscription && customer_id) {
+      subscription.on("invoice.paid", async ({ response }) => {
+        if (response.customer_id === customer_id) {
+          await reloadAsync();
+        }
+      });
+    }
+  }, [subscription]);
+  const onPay = (invoiceId) => {
+    if (state.paying) {
+      return;
+    }
+    setState({ paying: invoiceId });
+    connect.open({
+      action: "collect",
+      messages: {
+        scan: "",
+        title: t(`payment.customer.invoice.${action || "pay"}`),
+        success: t(`payment.customer.invoice.${action || "pay"}Success`),
+        error: t(`payment.customer.invoice.${action || "pay"}Error`),
+        confirm: ""
+      },
+      extraParams: { invoiceId, action },
+      onSuccess: () => {
+        connect.close();
+        setState({ paying: "" });
+      },
+      onClose: () => {
+        connect.close();
+        setState({ paying: "" });
+      },
+      onError: (err) => {
+        setState({ paying: "" });
+        Toast.error(formatError(err));
+      }
+    });
+  };
   if (loading || !data) {
     return /* @__PURE__ */ jsx(CircularProgress, {});
   }
@@ -114,7 +169,7 @@ export default function CustomerInvoiceList({
               ] }) }),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") }) }),
               !action && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(Box, { flex: 2, className: "invoice-description", textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? link.connect ? /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", size: "small", onClick: () => onPay(invoice.id), children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
                 Button,
                 {
                   component: "a",
@@ -154,9 +209,6 @@ const Root = styled(Stack)`
     .invoice-description {
       display: none !important;
     }
-    svg[data-testid='OpenInNewOutlinedIcon'] {
-      display: none !important;
-    }
   }
 
   a.MuiButton-root {

package/es/history/mini-invoice/list.js

@@ -14,9 +14,11 @@ import {
   Typography
 } from "@mui/material";
 import { useRequest } from "ahooks";
-import { joinURL } from "ufo";
-import api from "../../api.js";
+import { useMemo } from "react";
+import { joinURL, withQuery } from "ufo";
 import Status from "../../components/status.js";
+import api from "../../libs/api.js";
+import { getDidConnectQueryParams } from "../../libs/did-connect.js";
 import {
   formatBNStr,
   formatError,
@@ -26,7 +28,7 @@ import {
   getInvoiceStatusColor,
   getPrefix,
   getSubscriptionStatusColor
-} from "../../util.js";
+} from "../../libs/util.js";
 const fetchInvoiceData = (params = {}) => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
@@ -57,6 +59,16 @@ export default function MiniInvoiceList() {
       include_staking: true
     })
   );
+  const subscriptionPageUrl = useMemo(() => {
+    if (!subscription) {
+      return "#";
+    }
+    const pageUrl = joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`);
+    return withQuery(pageUrl, {
+      source: "embed",
+      ...getDidConnectQueryParams({ forceConnected: subscription.customer.did })
+    });
+  }, [subscription]);
   if (error) {
     return /* @__PURE__ */ jsx(Position, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: formatError(error) }) });
   }
@@ -152,11 +164,7 @@ export default function MiniInvoiceList() {
                 variant: "contained",
                 sx: { color: "#fff!important", width: subscription.service_actions?.length ? "auto" : "100%" },
                 target: "_blank",
-                href: joinURL(
-                  window.location.origin,
-                  getPrefix(),
-                  `/customer/subscription/${subscription.id}?source=embed`
-                ),
+                href: subscriptionPageUrl,
                 children: t("payment.customer.subscriptions.view")
               }
             )

package/es/history/payment/list.js

@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Button, CircularProgress, Stack, Typography } from "@mui/material";
 import { useInfiniteScroll } from "ahooks";
-import api from "../../api.js";
 import TxLink from "../../components/blockchain/tx.js";
 import Status from "../../components/status.js";
-import { formatBNStr, formatToDate, getPaymentIntentStatusColor } from "../../util.js";
+import api from "../../libs/api.js";
+import { formatBNStr, formatToDate, getPaymentIntentStatusColor } from "../../libs/util.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {

package/es/hooks/subscription.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description channel 的值不能包含分隔符 / . : 等，否则前端接受不到事件
+ * @export
+ * @param {string} channel
+ * @return {*}
+ */
+export declare function useSubscription(channel: string): any;

package/es/hooks/subscription.js

@@ -0,0 +1,55 @@
+import { WsClient } from "@arcblock/ws";
+import get from "lodash/get";
+import { useEffect, useRef } from "react";
+const RELAY_SOCKET_PREFIX = "/.well-known/service/relay";
+const getAppId = () => get(window, "blocklet.appPid") || get(window, "blocklet.appId") || "";
+const getRelayChannel = (token) => `relay:${getAppId()}:${token}`;
+const getRelayProtocol = () => window.location.protocol === "https:" ? "wss:" : "ws:";
+const getSocketHost = () => new URL(window.location.href).host;
+export function useSubscription(channel) {
+  const socket = useRef(null);
+  const subscription = useRef(null);
+  useEffect(() => {
+    if (getAppId()) {
+      const needReconnect = !socket.current || socket.current.isConnected() === false;
+      if (needReconnect) {
+        socket.current = new WsClient(`${getRelayProtocol()}//${getSocketHost()}${RELAY_SOCKET_PREFIX}`, {
+          longpollerTimeout: 5e3,
+          // connection timeout
+          heartbeatIntervalMs: 30 * 1e3
+        });
+        socket.current.connect();
+      }
+    }
+    return () => {
+      if (socket.current) {
+        socket.current.disconnect();
+        socket.current = null;
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (channel) {
+      let needSubscription = false;
+      if (subscription.current) {
+        if (subscription.current.channel !== channel) {
+          socket.current?.unsubscribe(getRelayChannel(subscription.current.channel));
+          needSubscription = true;
+        }
+      } else {
+        needSubscription = true;
+      }
+      if (needSubscription) {
+        subscription.current = socket.current.subscribe(getRelayChannel(channel));
+        subscription.current.channel = channel;
+      }
+    }
+    return () => {
+      if (subscription.current) {
+        socket.current?.unsubscribe(getRelayChannel(subscription.current.channel));
+        subscription.current = null;
+      }
+    };
+  }, [channel]);
+  return subscription.current;
+}

package/es/index.d.ts

@@ -1,4 +1,3 @@
-import api from './api';
 import CheckoutDonate from './checkout/donate';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
@@ -11,10 +10,11 @@ import PricingTable from './components/pricing-table';
 import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
-import dayjs from './dayjs';
 import CustomerInvoiceList from './history/invoice/list';
 import MiniInvoiceList from './history/mini-invoice/list';
 import CustomerPaymentList from './history/payment/list';
+import api from './libs/api';
+import dayjs from './libs/dayjs';
 import Amount from './payment/amount';
 import AddressForm from './payment/form/address';
 import CurrencySelector from './payment/form/currency';
@@ -23,7 +23,8 @@ import StripeForm from './payment/form/stripe';
 import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
-export * from './util';
+export * from './libs/util';
 export * from './contexts/payment';
+export * from './hooks/subscription';
 export { translations, createTranslator } from './locales';
 export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, TxGas, SafeGuard, };

package/es/index.js

@@ -1,4 +1,3 @@
-import api from "./api.js";
 import CheckoutDonate from "./checkout/donate.js";
 import CheckoutForm from "./checkout/form.js";
 import CheckoutTable from "./checkout/table.js";
@@ -11,10 +10,11 @@ import PricingTable from "./components/pricing-table.js";
 import SafeGuard from "./components/safe-guard.js";
 import Status from "./components/status.js";
 import Switch from "./components/switch-button.js";
-import dayjs from "./dayjs.js";
 import CustomerInvoiceList from "./history/invoice/list.js";
 import MiniInvoiceList from "./history/mini-invoice/list.js";
 import CustomerPaymentList from "./history/payment/list.js";
+import api from "./libs/api.js";
+import dayjs from "./libs/dayjs.js";
 import Amount from "./payment/amount.js";
 import AddressForm from "./payment/form/address.js";
 import CurrencySelector from "./payment/form/currency.js";
@@ -23,8 +23,9 @@ import StripeForm from "./payment/form/stripe.js";
 import Payment from "./payment/index.js";
 import ProductSkeleton from "./payment/product-skeleton.js";
 import PaymentSummary from "./payment/summary.js";
-export * from "./util.js";
+export * from "./libs/util.js";
 export * from "./contexts/payment.js";
+export * from "./hooks/subscription.js";
 export { translations, createTranslator } from "./locales/index.js";
 export {
   api,

package/es/{api.js → libs/api.js}

@@ -7,9 +7,13 @@ api.interceptors.request.use(
   (config) => {
     const prefix = getPrefix();
     config.baseURL = prefix || "";
-    const livemode = localStorage.getItem("livemode");
     const locale = getLocale(window.blocklet?.languages);
-    config.params = { ...config.params || {}, livemode: isNull(livemode) ? true : JSON.parse(livemode), locale };
+    const query = new URLSearchParams(config.url?.split("?").pop());
+    config.params = { ...config.params || {}, locale };
+    if (typeof config.params.livemode === "undefined" && query.has("livemode") === false) {
+      const livemode = localStorage.getItem("livemode");
+      config.params.livemode = isNull(livemode) ? true : JSON.parse(livemode);
+    }
     return config;
   },
   (err) => Promise.reject(err)

package/es/libs/did-connect.d.ts

@@ -0,0 +1,10 @@
+export interface DIDConnectCustomQuery {
+    forceConnected: string;
+    sourceAppPid?: string;
+    switchBehavior?: 'auto' | 'disabled' | 'required';
+    showClose?: boolean;
+}
+declare function getDidConnectQueryParams(params: DIDConnectCustomQuery): {
+    '__did-connect__': string;
+};
+export { getDidConnectQueryParams };

package/es/libs/did-connect.js

@@ -0,0 +1,11 @@
+function getDidConnectQueryParams(params) {
+  const didConnectQueryParams = {
+    switchBehavior: "auto",
+    showClose: false,
+    ...params
+  };
+  return {
+    "__did-connect__": Buffer.from(JSON.stringify(didConnectQueryParams), "utf8").toString("base64")
+  };
+}
+export { getDidConnectQueryParams };

package/es/{util.d.ts → libs/util.d.ts}

@@ -2,7 +2,7 @@
 import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
-export declare const getPrefix: () => any;
+export declare const getPrefix: () => string;
 export declare function formatToDate(date: Date | string | number, locale?: string, format?: string): any;
 export declare function formatToDatetime(date: Date | string | number, locale?: string): any;
 export declare function formatTime(date: Date | string | number, format?: string, locale?: string): any;

package/es/{util.js → libs/util.js}

@@ -4,8 +4,8 @@ import trimEnd from "lodash/trimEnd";
 import numbro from "numbro";
 import { defaultCountries } from "react-international-phone";
 import { joinURL } from "ufo";
+import { t } from "../locales/index.js";
 import dayjs from "./dayjs.js";
-import { t } from "./locales/index.js";
 export const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export const isPaymentKitMounted = () => {
   return (window.blocklet?.componentMountPoints || []).some((x) => x.did === PAYMENT_KIT_DID);

package/es/locales/en.js

@@ -263,6 +263,7 @@ export default flat({
         title: "Manage subscriptions",
         view: "View Subscription",
         current: "Current subscription",
+        viewAll: "View all",
         empty: "There are no subscriptions here",
         changePayment: "Change payment method"
       }

package/es/locales/zh.js

@@ -263,6 +263,7 @@ export default flat({
         title: "\u8BA2\u9605\u7BA1\u7406",
         view: "\u7BA1\u7406\u8BA2\u9605",
         current: "\u5F53\u524D\u8BA2\u9605",
+        viewAll: "\u67E5\u770B\u6240\u6709",
         empty: "\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605",
         changePayment: "\u5207\u6362\u652F\u4ED8\u65B9\u5F0F"
       }

package/es/payment/form/index.js

@@ -13,11 +13,12 @@ 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 ConfirmDialog from "../../components/confirm.js";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
-import { flattenPaymentMethods, formatError, getPrefix, getStatementDescriptor } from "../../util.js";
+import { useSubscription } from "../../hooks/subscription.js";
+import api from "../../libs/api.js";
+import { flattenPaymentMethods, formatError, getPrefix, getStatementDescriptor } from "../../libs/util.js";
 import UserButtons from "./addon.js";
 import AddressForm from "./address.js";
 import CurrencySelector from "./currency.js";
@@ -58,6 +59,7 @@ export default function PaymentForm({
   const theme = useTheme();
   const { t } = useLocaleContext();
   const { session, connect } = usePaymentContext();
+  const subscription = useSubscription("events");
   const { control, getValues, setValue, handleSubmit } = useFormContext();
   const [state, setState] = useSetState({
     submitting: false,
@@ -71,6 +73,22 @@ export default function PaymentForm({
   });
   const currencies = flattenPaymentMethods(paymentMethods);
   const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(0);
+  const onCheckoutComplete = useMemoizedFn(async ({ response }) => {
+    if (response.id === checkoutSession.id && state.paid === false) {
+      await handleConnected();
+    }
+  });
+  const onInvoicePaid = useMemoizedFn(async ({ response }) => {
+    if (response.customer_id === customer?.id && state.customerLimited) {
+      await onAction();
+    }
+  });
+  useEffect(() => {
+    if (subscription) {
+      subscription.on("checkout.session.completed", onCheckoutComplete);
+      subscription.on("invoice.paid", onInvoicePaid);
+    }
+  }, [subscription]);
   useEffect(() => {
     if (session?.user) {
       const values = getValues();
@@ -126,8 +144,10 @@ export default function PaymentForm({
   const handleConnected = async () => {
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
-      setState({ paid: true, paying: false });
-      onPaid(result);
+      if (state.paid === false) {
+        setState({ paid: true, paying: false });
+        onPaid(result);
+      }
     } catch (err) {
       Toast.error(formatError(err));
     } finally {
@@ -175,7 +195,8 @@ export default function PaymentForm({
         paymentIntent: result.data.paymentIntent,
         stripeContext: result.data.stripeContext,
         customer: result.data.customer,
-        submitting: false
+        submitting: false,
+        customerLimited: false
       });
       if (["arcblock", "ethereum"].includes(method.type)) {
         setState({ paying: true });
@@ -380,7 +401,8 @@ export default function PaymentForm({
         onCancel: () => setState({ customerLimited: false }),
         confirm: t("payment.customer.pastDue.alert.confirm"),
         title: t("payment.customer.pastDue.alert.title"),
-        message: t("payment.customer.pastDue.alert.description")
+        message: t("payment.customer.pastDue.alert.description"),
+        color: "primary"
       }
     )
   ] });

package/es/payment/form/phone.js

@@ -5,7 +5,7 @@ import { useEffect } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { FlagEmoji, defaultCountries, parseCountry, usePhoneInput } from "react-international-phone";
 import FormInput from "../../components/input.js";
-import { isValidCountry } from "../../util.js";
+import { isValidCountry } from "../../libs/util.js";
 export default function PhoneInput({ ...props }) {
   const countryFieldName = props.countryFieldName || "billing_address.country";
   const { control, getValues, setValue } = useFormContext();