@blocklet/payment-react 1.15.8 → 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/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 }) => {

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/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 ({

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.8",
+  "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.8",
+    "@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": "d0e3c23bed5a41a9b16554fc3b7458e8dee4fd60"
+  "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/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;
   });
 

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 = {