@blocklet/payment-react 1.15.7 → 1.15.9

package/es/history/invoice/list.js

@@ -94,7 +94,7 @@ const InvoiceTable = React.memo((props) => {
       ignore_zero: true
     }),
     {
-      refreshDeps: [search]
+      refreshDeps: [search, status, customer_id, currency_id, subscription_id, include_staking, include_recovered_from]
     }
   );
   useEffect(() => {

package/es/libs/api.js

@@ -1,8 +1,8 @@
 import { getLocale } from "@arcblock/ux/lib/Locale/context";
-import axios from "axios";
+import { createAxios } from "@blocklet/js-sdk";
 import isNull from "lodash/isNull";
 import { getPrefix } from "./util.js";
-const api = axios.create();
+const api = createAxios();
 api.interceptors.request.use(
   (config) => {
     const prefix = getPrefix();

package/es/payment/form/index.d.ts

@@ -2,7 +2,7 @@
 import 'react-international-phone/style.css';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
 type PageData = CheckoutContext & CheckoutCallbacks;
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, }: PageData): import("react").JSX.Element;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, currencyId, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {
     var defaultProps: {};
 }

package/es/payment/form/index.js

@@ -61,7 +61,8 @@ export default function PaymentForm({
   onPaid,
   onError,
   // mode,
-  action
+  action,
+  currencyId
 }) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
@@ -98,7 +99,8 @@ export default function PaymentForm({
   const currencies = flattenPaymentMethods(paymentMethods);
   const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(() => {
     const query = getQueryParams(window.location.href);
-    const index = currencies.findIndex((x) => x.id === query.currencyId);
+    const queryCurrencyId = query.currencyId || currencyId;
+    const index = currencies.findIndex((x) => x.id === queryCurrencyId);
     return index >= 0 ? index : 0;
   });
   const onCheckoutComplete = useMemoizedFn(async ({ response }) => {
@@ -356,7 +358,8 @@ export default function PaymentForm({
             customer: state.customer,
             mode: checkoutSession.mode,
             onConfirm: onStripeConfirm,
-            onCancel: onStripeCancel
+            onCancel: onStripeCancel,
+            returnUrl: checkoutSession?.success_url
           }
         )
       ] }) }),

package/es/payment/form/stripe.d.ts

@@ -8,6 +8,12 @@ type StripeCheckoutProps = {
     customer: TCustomer;
     onConfirm: Function;
     onCancel: Function;
+    returnUrl?: string;
 };
-export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, }: StripeCheckoutProps): import("react").JSX.Element;
-export {};
+declare function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, returnUrl, }: StripeCheckoutProps): import("react").JSX.Element;
+declare namespace StripeCheckout {
+    var defaultProps: {
+        returnUrl: string;
+    };
+}
+export default StripeCheckout;

package/es/payment/form/stripe.js

@@ -9,7 +9,14 @@ import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-
 import { loadStripe } from "@stripe/stripe-js";
 import { useSetState } from "ahooks";
 import { useEffect, useCallback } from "react";
-function StripeCheckoutForm({ clientSecret, intentType, customer, mode, onConfirm }) {
+function StripeCheckoutForm({
+  clientSecret,
+  intentType,
+  customer,
+  mode,
+  onConfirm,
+  returnUrl = ""
+}) {
   const stripe = useStripe();
   const elements = useElements();
   const { t } = useLocaleContext();
@@ -54,6 +61,7 @@ function StripeCheckoutForm({ clientSecret, intentType, customer, mode, onConfir
           elements,
           redirect: "if_required",
           confirmParams: {
+            return_url: returnUrl || window.location.href,
             payment_method_data: {
               billing_details: {
                 name: customer.name,
@@ -124,7 +132,8 @@ export default function StripeCheckout({
   mode,
   customer,
   onConfirm,
-  onCancel
+  onCancel,
+  returnUrl = ""
 }) {
   const stripePromise = loadStripe(publicKey);
   const { t } = useLocaleContext();
@@ -154,9 +163,13 @@ export default function StripeCheckout({
           intentType,
           mode,
           customer,
-          onConfirm
+          onConfirm,
+          returnUrl
         }
       ) })
     }
   );
 }
+StripeCheckout.defaultProps = {
+  returnUrl: ""
+};

package/es/payment/index.js

@@ -12,7 +12,14 @@ import { FormProvider, useForm, useWatch } from "react-hook-form";
 import trim from "lodash/trim";
 import { usePaymentContext } from "../contexts/payment.js";
 import api from "../libs/api.js";
-import { findCurrency, formatError, getStatementDescriptor, isMobileSafari, isValidCountry } from "../libs/util.js";
+import {
+  findCurrency,
+  formatError,
+  getQueryParams,
+  getStatementDescriptor,
+  isMobileSafari,
+  isValidCountry
+} from "../libs/util.js";
 import PaymentError from "./error.js";
 import CheckoutFooter from "./footer.js";
 import PaymentForm from "./form/index.js";
@@ -43,7 +50,8 @@ function PaymentInner({
   const { settings, session } = usePaymentContext();
   const { isMobile } = useMobile();
   const [state, setState] = useSetState({ checkoutSession });
-  const defaultCurrencyId = state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
+  const query = getQueryParams(window.location.href);
+  const defaultCurrencyId = query.currencyId || state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
   const defaultMethodId = paymentMethods.find((m) => m.payment_currencies.some((c) => c.id === defaultCurrencyId))?.id;
   const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
   const methods = useForm({
@@ -86,6 +94,14 @@ function PaymentInner({
       document.body.removeEventListener("focusout", focusoutHandler);
     };
   }, []);
+  useEffect(() => {
+    if (!methods || query.currencyId) {
+      return;
+    }
+    if (state.checkoutSession.currency_id !== defaultCurrencyId) {
+      methods.setValue("payment_currency", state.checkoutSession.currency_id);
+    }
+  }, [state.checkoutSession, defaultCurrencyId, query.currencyId]);
   const currencyId = useWatch({ control: methods.control, name: "payment_currency", defaultValue: defaultCurrencyId });
   const currency = findCurrency(paymentMethods, currencyId) || settings.baseCurrency;
   const method = paymentMethods.find((x) => x.id === currency.payment_method_id);
@@ -207,6 +223,7 @@ function PaymentInner({
           !completed && /* @__PURE__ */ jsx(
             PaymentForm,
             {
+              currencyId,
               checkoutSession: state.checkoutSession,
               paymentMethods,
               paymentIntent,

package/es/types/index.d.ts

@@ -10,6 +10,7 @@ export type CheckoutContext = {
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
     action?: string;
     showCheckoutSummary?: boolean;
+    currencyId?: string;
 };
 export type CheckoutFormData = {
     customer_name: string;

package/lib/history/invoice/list.js

@@ -96,7 +96,7 @@ const InvoiceTable = _react.default.memo(props => {
     include_recovered_from,
     ignore_zero: true
   }), {
-    refreshDeps: [search]
+    refreshDeps: [search, status, customer_id, currency_id, subscription_id, include_staking, include_recovered_from]
   });
   (0, _react.useEffect)(() => {
     if (onTableDataChange) {

package/lib/libs/api.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 var _context = require("@arcblock/ux/lib/Locale/context");
-var _axios = _interopRequireDefault(require("axios"));
+var _jsSdk = require("@blocklet/js-sdk");
 var _isNull = _interopRequireDefault(require("lodash/isNull"));
 var _util = require("./util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const api = _axios.default.create();
+const api = (0, _jsSdk.createAxios)();
 api.interceptors.request.use(config => {
   const prefix = (0, _util.getPrefix)();
   config.baseURL = prefix || "";

package/lib/payment/form/index.d.ts

@@ -2,7 +2,7 @@
 import 'react-international-phone/style.css';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
 type PageData = CheckoutContext & CheckoutCallbacks;
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, }: PageData): import("react").JSX.Element;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, currencyId, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {
     var defaultProps: {};
 }

package/lib/payment/form/index.js

@@ -63,7 +63,8 @@ function PaymentForm({
   onPaid,
   onError,
   // mode,
-  action
+  action,
+  currencyId
 }) {
   const {
     t
@@ -110,7 +111,8 @@ function PaymentForm({
   const currencies = (0, _util.flattenPaymentMethods)(paymentMethods);
   const [paymentCurrencyIndex, setPaymentCurrencyIndex] = (0, _react.useState)(() => {
     const query = (0, _util.getQueryParams)(window.location.href);
-    const index = currencies.findIndex(x => x.id === query.currencyId);
+    const queryCurrencyId = query.currencyId || currencyId;
+    const index = currencies.findIndex(x => x.id === queryCurrencyId);
     return index >= 0 ? index : 0;
   });
   const onCheckoutComplete = (0, _ahooks.useMemoizedFn)(async ({
@@ -420,7 +422,8 @@ function PaymentForm({
               customer: state.customer,
               mode: checkoutSession.mode,
               onConfirm: onStripeConfirm,
-              onCancel: onStripeCancel
+              onCancel: onStripeCancel,
+              returnUrl: checkoutSession?.success_url
             })]
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {

package/lib/payment/form/stripe.d.ts

@@ -8,6 +8,12 @@ type StripeCheckoutProps = {
     customer: TCustomer;
     onConfirm: Function;
     onCancel: Function;
+    returnUrl?: string;
 };
-export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, }: StripeCheckoutProps): import("react").JSX.Element;
-export {};
+declare function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, returnUrl, }: StripeCheckoutProps): import("react").JSX.Element;
+declare namespace StripeCheckout {
+    var defaultProps: {
+        returnUrl: string;
+    };
+}
+export default StripeCheckout;

package/lib/payment/form/stripe.js

@@ -21,7 +21,8 @@ function StripeCheckoutForm({
   intentType,
   customer,
   mode,
-  onConfirm
+  onConfirm,
+  returnUrl = ""
 }) {
   const stripe = (0, _reactStripeJs.useStripe)();
   const elements = (0, _reactStripeJs.useElements)();
@@ -79,6 +80,7 @@ function StripeCheckoutForm({
         elements,
         redirect: "if_required",
         confirmParams: {
+          return_url: returnUrl || window.location.href,
           payment_method_data: {
             billing_details: {
               name: customer.name,
@@ -172,7 +174,8 @@ function StripeCheckout({
   mode,
   customer,
   onConfirm,
-  onCancel
+  onCancel,
+  returnUrl = ""
 }) {
   const stripePromise = (0, _stripeJs.loadStripe)(publicKey);
   const {
@@ -209,8 +212,12 @@ function StripeCheckout({
         intentType,
         mode,
         customer,
-        onConfirm
+        onConfirm,
+        returnUrl
       })
     })
   });
-}
+}
+StripeCheckout.defaultProps = {
+  returnUrl: ""
+};

package/lib/payment/index.js

@@ -60,7 +60,8 @@ function PaymentInner({
   const [state, setState] = (0, _ahooks.useSetState)({
     checkoutSession
   });
-  const defaultCurrencyId = state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
+  const query = (0, _util2.getQueryParams)(window.location.href);
+  const defaultCurrencyId = query.currencyId || state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
   const defaultMethodId = paymentMethods.find(m => m.payment_currencies.some(c => c.id === defaultCurrencyId))?.id;
   const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
   const methods = (0, _reactHookForm.useForm)({
@@ -100,6 +101,14 @@ function PaymentInner({
       document.body.removeEventListener("focusout", focusoutHandler);
     };
   }, []);
+  (0, _react.useEffect)(() => {
+    if (!methods || query.currencyId) {
+      return;
+    }
+    if (state.checkoutSession.currency_id !== defaultCurrencyId) {
+      methods.setValue("payment_currency", state.checkoutSession.currency_id);
+    }
+  }, [state.checkoutSession, defaultCurrencyId, query.currencyId]);
   const currencyId = (0, _reactHookForm.useWatch)({
     control: methods.control,
     name: "payment_currency",
@@ -257,6 +266,7 @@ function PaymentInner({
           subscriptionId: state.checkoutSession.subscription_id,
           message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.submit_type === "donate" ? "donate" : state.checkoutSession.mode}`)
         }), !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
+          currencyId,
           checkoutSession: state.checkoutSession,
           paymentMethods,
           paymentIntent,

package/lib/types/index.d.ts

@@ -10,6 +10,7 @@ export type CheckoutContext = {
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
     action?: string;
     showCheckoutSummary?: boolean;
+    currencyId?: string;
 };
 export type CheckoutFormData = {
     customer_name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.15.7",
+  "version": "1.15.9",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.15.7",
+    "@blocklet/payment-types": "1.15.9",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -122,5 +122,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "9aae61000ca85dc8199f750e3989d756a8747307"
+  "gitHead": "d2919fe52ba2b7aee1c6c1275c325f91b81027da"
 }

package/src/history/invoice/list.tsx

@@ -124,7 +124,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
         ignore_zero: true,
       }),
     {
-      refreshDeps: [search],
+      refreshDeps: [search, status, customer_id, currency_id, subscription_id, include_staking, include_recovered_from],
     }
   );
   useEffect(() => {

package/src/libs/api.ts

@@ -1,10 +1,11 @@
 import { getLocale } from '@arcblock/ux/lib/Locale/context';
-import axios from 'axios';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createAxios } from '@blocklet/js-sdk';
 import isNull from 'lodash/isNull';
 
 import { getPrefix } from './util';
 
-const api = axios.create();
+const api = createAxios();
 
 api.interceptors.request.use(
   (config) => {

package/src/payment/form/index.tsx

@@ -96,6 +96,7 @@ export default function PaymentForm({
   onError,
   // mode,
   action,
+  currencyId,
 }: PageData) {
   // const theme = useTheme();
   const { t } = useLocaleContext();
@@ -148,7 +149,8 @@ export default function PaymentForm({
 
   const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(() => {
     const query = getQueryParams(window.location.href);
-    const index = currencies.findIndex((x) => x.id === query.currencyId);
+    const queryCurrencyId = query.currencyId || currencyId;
+    const index = currencies.findIndex((x) => x.id === queryCurrencyId);
     return index >= 0 ? index : 0;
   });
 
@@ -439,6 +441,7 @@ export default function PaymentForm({
                   mode={checkoutSession.mode}
                   onConfirm={onStripeConfirm}
                   onCancel={onStripeCancel}
+                  returnUrl={checkoutSession?.success_url}
                 />
               )}
             </Stack>

package/src/payment/form/stripe.tsx

@@ -16,10 +16,18 @@ type StripeCheckoutFormProps = {
   customer: TCustomer;
   mode: string;
   onConfirm: Function;
+  returnUrl: string;
 };
 
 // @doc https://stripe.com/docs/js/elements_object/create_payment_element
-function StripeCheckoutForm({ clientSecret, intentType, customer, mode, onConfirm }: StripeCheckoutFormProps) {
+function StripeCheckoutForm({
+  clientSecret,
+  intentType,
+  customer,
+  mode,
+  onConfirm,
+  returnUrl = '',
+}: StripeCheckoutFormProps) {
   const stripe = useStripe();
   const elements = useElements();
   const { t } = useLocaleContext();
@@ -72,6 +80,7 @@ function StripeCheckoutForm({ clientSecret, intentType, customer, mode, onConfir
           elements,
           redirect: 'if_required',
           confirmParams: {
+            return_url: returnUrl || window.location.href,
             payment_method_data: {
               billing_details: {
                 name: customer.name,
@@ -82,7 +91,6 @@ function StripeCheckoutForm({ clientSecret, intentType, customer, mode, onConfir
             },
           },
         });
-
         setState({ confirming: false });
         if (error) {
           if (error.type === 'validation_error') {
@@ -150,6 +158,7 @@ type StripeCheckoutProps = {
   customer: TCustomer;
   onConfirm: Function;
   onCancel: Function;
+  returnUrl?: string;
 };
 
 export default function StripeCheckout({
@@ -160,6 +169,7 @@ export default function StripeCheckout({
   customer,
   onConfirm,
   onCancel,
+  returnUrl = '',
 }: StripeCheckoutProps) {
   const stripePromise = loadStripe(publicKey);
   const { t } = useLocaleContext();
@@ -191,8 +201,13 @@ export default function StripeCheckout({
           mode={mode}
           customer={customer}
           onConfirm={onConfirm}
+          returnUrl={returnUrl}
         />
       </Elements>
     </Dialog>
   );
 }
+
+StripeCheckout.defaultProps = {
+  returnUrl: '',
+};

package/src/payment/index.tsx

@@ -23,7 +23,14 @@ import type { LiteralUnion } from 'type-fest';
 
 import { usePaymentContext } from '../contexts/payment';
 import api from '../libs/api';
-import { findCurrency, formatError, getStatementDescriptor, isMobileSafari, isValidCountry } from '../libs/util';
+import {
+  findCurrency,
+  formatError,
+  getQueryParams,
+  getStatementDescriptor,
+  isMobileSafari,
+  isValidCountry,
+} from '../libs/util';
 import { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
@@ -61,8 +68,9 @@ function PaymentInner({
   const { settings, session } = usePaymentContext();
   const { isMobile } = useMobile();
   const [state, setState] = useSetState<{ checkoutSession: TCheckoutSessionExpanded }>({ checkoutSession });
-
-  const defaultCurrencyId = state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
+  const query = getQueryParams(window.location.href);
+  const defaultCurrencyId =
+    query.currencyId || state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
   const defaultMethodId = paymentMethods.find((m) => m.payment_currencies.some((c) => c.id === defaultCurrencyId))?.id;
   const hideSummaryCard = mode.endsWith('-minimal') || !showCheckoutSummary;
 
@@ -107,6 +115,16 @@ function PaymentInner({
     };
   }, []);
 
+  useEffect(() => {
+    if (!methods || query.currencyId) {
+      return;
+    }
+    if (state.checkoutSession.currency_id !== defaultCurrencyId) {
+      methods.setValue('payment_currency', state.checkoutSession.currency_id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.checkoutSession, defaultCurrencyId, query.currencyId]);
+
   const currencyId = useWatch({ control: methods.control, name: 'payment_currency', defaultValue: defaultCurrencyId });
   const currency =
     (findCurrency(paymentMethods as TPaymentMethodExpanded[], currencyId as string) as TPaymentCurrency) ||
@@ -248,6 +266,7 @@ function PaymentInner({
           )}
           {!completed && (
             <PaymentForm
+              currencyId={currencyId}
               checkoutSession={state.checkoutSession}
               paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
               paymentIntent={paymentIntent}

package/src/types/index.ts

@@ -18,6 +18,7 @@ export type CheckoutContext = {
   mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
   action?: string;
   showCheckoutSummary?: boolean;
+  currencyId?: string;
 };
 
 export type CheckoutFormData = {