@blocklet/payment-react 1.13.253 → 1.13.254

package/es/contexts/payment.d.ts

@@ -18,13 +18,15 @@ export type PaymentContextType = {
     setLivemode: (livemode: boolean) => void;
     api: Axios;
 };
+export type PaymentContextProps = {
+    session: import('@arcblock/did-connect/lib/types').SessionContext['session'];
+    connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
+    children: any;
+    baseUrl?: string;
+};
 declare const PaymentContext: import("react").Context<PaymentContextType>;
 declare const Consumer: import("react").Consumer<PaymentContextType>;
-declare function PaymentProvider({ children, session, connect }: {
-    children: any;
-    session: any;
-    connect: any;
-}): import("react").JSX.Element | null;
+declare function PaymentProvider({ session, connect, children, baseUrl }: PaymentContextProps): import("react").JSX.Element | null;
 declare namespace PaymentProvider {
     var defaultProps: {};
 }

package/es/contexts/payment.js

@@ -4,7 +4,6 @@ import { useLocalStorageState, useRequest } from "ahooks";
 import { createContext, useContext } from "react";
 import api from "../libs/api.js";
 import { getPrefix } from "../libs/util.js";
-const prefix = getPrefix();
 const PaymentContext = createContext({ api });
 const { Provider, Consumer } = PaymentContext;
 const getSettings = async () => {
@@ -15,9 +14,13 @@ const getCurrency = (currencyId, methods) => {
   const currencies = methods.reduce((acc, x) => acc.concat(x.payment_currencies), []);
   return currencies.find((x) => x.id === currencyId);
 };
-function PaymentProvider({ children, session, connect }) {
+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 prefix = getPrefix();
   if (error) {
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
   }

package/es/history/invoice/list.js

@@ -46,7 +46,6 @@ const getInvoiceLink = (invoice, action) => {
       external: false,
       connect: invoice.status === "uncollectible",
       url: joinURL(
-        window.location.origin,
         getPrefix(),
         `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`
       )

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

@@ -63,7 +63,7 @@ export default function MiniInvoiceList() {
     if (!subscription) {
       return "#";
     }
-    const pageUrl = joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`);
+    const pageUrl = joinURL(getPrefix(), `/customer/subscription/${subscription.id}`);
     return withQuery(pageUrl, {
       source: "embed",
       ...getDidConnectQueryParams({ forceConnected: subscription.customer.did })

package/es/libs/util.js

@@ -11,15 +11,29 @@ export const isPaymentKitMounted = () => {
   return (window.blocklet?.componentMountPoints || []).some((x) => x.did === PAYMENT_KIT_DID);
 };
 export const getPrefix = () => {
-  const componentId = (window?.blocklet?.componentId || "").split("/").pop();
+  const prefix = window.blocklet?.prefix || "/";
+  let baseUrl = window.location?.origin;
+  if (window.__PAYMENT_KIT_BASE_URL) {
+    try {
+      const tmp = new URL(window.__PAYMENT_KIT_BASE_URL);
+      if (tmp.origin !== window.location.origin) {
+        baseUrl = window.__PAYMENT_KIT_BASE_URL;
+      } else {
+        baseUrl = tmp.origin;
+      }
+    } catch (err) {
+      console.warn("Invalid baseUrl for PaymentProvider", window.__PAYMENT_KIT_BASE_URL);
+    }
+  }
+  const componentId = (window.blocklet?.componentId || "").split("/").pop();
   if (componentId === PAYMENT_KIT_DID) {
-    return window.blocklet?.prefix;
+    return joinURL(baseUrl, prefix);
   }
   const component = (window.blocklet?.componentMountPoints || []).find((x) => x.did === PAYMENT_KIT_DID);
   if (component) {
-    return component.mountPoint;
+    return joinURL(baseUrl, component.mountPoint);
   }
-  return window.blocklet?.prefix;
+  return joinURL(baseUrl, prefix);
 };
 export function formatToDate(date, locale = "en", format = "YYYY-MM-DD HH:mm:ss") {
   if (!date) {

package/es/payment/form/index.js

@@ -206,7 +206,7 @@ export default function PaymentForm({
           connect.open({
             containerEl: void 0,
             action: checkoutSession.mode,
-            prefix: joinURL(window.location.origin, getPrefix(), "/api/did"),
+            prefix: joinURL(getPrefix(), "/api/did"),
             saveConnect: false,
             extraParams: { checkoutSessionId: checkoutSession.id },
             onSuccess: async () => {
@@ -398,7 +398,7 @@ export default function PaymentForm({
     state.customerLimited && /* @__PURE__ */ jsx(
       ConfirmDialog,
       {
-        onConfirm: () => window.open(joinURL(window.location.origin, getPrefix(), "/customer/invoice/past-due"), "_blank"),
+        onConfirm: () => window.open(joinURL(getPrefix(), "/customer/invoice/past-due"), "_blank"),
         onCancel: () => setState({ customerLimited: false }),
         confirm: t("payment.customer.pastDue.alert.confirm"),
         title: t("payment.customer.pastDue.alert.title"),

package/es/types/shims.d.ts

@@ -14,3 +14,5 @@ declare module '@blocklet/*';
 declare module 'pretty-ms-i18n';
 
 declare var blocklet: import('@blocklet/sdk').WindowBlocklet;
+
+declare var __PAYMENT_KIT_BASE_URL: string;

package/lib/contexts/payment.d.ts

@@ -18,13 +18,15 @@ export type PaymentContextType = {
     setLivemode: (livemode: boolean) => void;
     api: Axios;
 };
+export type PaymentContextProps = {
+    session: import('@arcblock/did-connect/lib/types').SessionContext['session'];
+    connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
+    children: any;
+    baseUrl?: string;
+};
 declare const PaymentContext: import("react").Context<PaymentContextType>;
 declare const Consumer: import("react").Consumer<PaymentContextType>;
-declare function PaymentProvider({ children, session, connect }: {
-    children: any;
-    session: any;
-    connect: any;
-}): import("react").JSX.Element | null;
+declare function PaymentProvider({ session, connect, children, baseUrl }: PaymentContextProps): import("react").JSX.Element | null;
 declare namespace PaymentProvider {
     var defaultProps: {};
 }

package/lib/contexts/payment.js

@@ -14,7 +14,6 @@ var _react = require("react");
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const prefix = (0, _util.getPrefix)();
 const PaymentContext = exports.PaymentContext = (0, _react.createContext)({
   api: _api.default
 });
@@ -34,10 +33,14 @@ const getCurrency = (currencyId, methods) => {
   return currencies.find(x => x.id === currencyId);
 };
 function PaymentProvider({
-  children,
   session,
-  connect
+  connect,
+  children,
+  baseUrl
 }) {
+  if (baseUrl) {
+    window.__PAYMENT_KIT_BASE_URL = baseUrl;
+  }
   const {
     data,
     error,
@@ -47,6 +50,7 @@ function PaymentProvider({
   const [livemode, setLivemode] = (0, _ahooks.useLocalStorageState)("livemode", {
     defaultValue: true
   });
+  const prefix = (0, _util.getPrefix)();
   if (error) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
       severity: "error",

package/lib/history/invoice/list.js

@@ -44,7 +44,7 @@ const getInvoiceLink = (invoice, action) => {
     return {
       external: false,
       connect: invoice.status === "uncollectible",
-      url: (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`)
+      url: (0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`)
     };
   }
   return {

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

@@ -56,7 +56,7 @@ function MiniInvoiceList() {
     if (!subscription) {
       return "#";
     }
-    const pageUrl = (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), `/customer/subscription/${subscription.id}`);
+    const pageUrl = (0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/subscription/${subscription.id}`);
     return (0, _ufo.withQuery)(pageUrl, {
       source: "embed",
       ...(0, _didConnect.getDidConnectQueryParams)({

package/lib/libs/util.js

@@ -55,15 +55,29 @@ const isPaymentKitMounted = () => {
 };
 exports.isPaymentKitMounted = isPaymentKitMounted;
 const getPrefix = () => {
-  const componentId = (window?.blocklet?.componentId || "").split("/").pop();
+  const prefix = window.blocklet?.prefix || "/";
+  let baseUrl = window.location?.origin;
+  if (window.__PAYMENT_KIT_BASE_URL) {
+    try {
+      const tmp = new URL(window.__PAYMENT_KIT_BASE_URL);
+      if (tmp.origin !== window.location.origin) {
+        baseUrl = window.__PAYMENT_KIT_BASE_URL;
+      } else {
+        baseUrl = tmp.origin;
+      }
+    } catch (err) {
+      console.warn("Invalid baseUrl for PaymentProvider", window.__PAYMENT_KIT_BASE_URL);
+    }
+  }
+  const componentId = (window.blocklet?.componentId || "").split("/").pop();
   if (componentId === PAYMENT_KIT_DID) {
-    return window.blocklet?.prefix;
+    return (0, _ufo.joinURL)(baseUrl, prefix);
   }
   const component = (window.blocklet?.componentMountPoints || []).find(x => x.did === PAYMENT_KIT_DID);
   if (component) {
-    return component.mountPoint;
+    return (0, _ufo.joinURL)(baseUrl, component.mountPoint);
   }
-  return window.blocklet?.prefix;
+  return (0, _ufo.joinURL)(baseUrl, prefix);
 };
 exports.getPrefix = getPrefix;
 function formatToDate(date, locale = "en", format = "YYYY-MM-DD HH:mm:ss") {

package/lib/payment/form/index.js

@@ -245,7 +245,7 @@ function PaymentForm({
           connect.open({
             containerEl: void 0,
             action: checkoutSession.mode,
-            prefix: (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), "/api/did"),
+            prefix: (0, _ufo.joinURL)((0, _util.getPrefix)(), "/api/did"),
             saveConnect: false,
             extraParams: {
               checkoutSessionId: checkoutSession.id
@@ -485,7 +485,7 @@ function PaymentForm({
         })]
       })
     }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
-      onConfirm: () => window.open((0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), "/customer/invoice/past-due"), "_blank"),
+      onConfirm: () => window.open((0, _ufo.joinURL)((0, _util.getPrefix)(), "/customer/invoice/past-due"), "_blank"),
       onCancel: () => setState({
         customerLimited: false
       }),

package/lib/types/shims.d.ts

@@ -14,3 +14,5 @@ declare module '@blocklet/*';
 declare module 'pretty-ms-i18n';
 
 declare var blocklet: import('@blocklet/sdk').WindowBlocklet;
+
+declare var __PAYMENT_KIT_BASE_URL: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.253",
+  "version": "1.13.254",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -91,7 +91,7 @@
     "@babel/core": "^7.24.5",
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
-    "@blocklet/payment-types": "1.13.253",
+    "@blocklet/payment-types": "1.13.254",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -120,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "4ad023bae87cc6b0c7480e701e5ba51b7b66ca19"
+  "gitHead": "9a6635035f3979e3f5dce34867cc748f22a8436e"
 }

package/src/contexts/payment.tsx

@@ -7,8 +7,6 @@ import { createContext, useContext } from 'react';
 import api from '../libs/api';
 import { getPrefix } from '../libs/util';
 
-const prefix = getPrefix();
-
 export interface Settings {
   paymentMethods: TPaymentMethodExpanded[];
   baseCurrency: TPaymentCurrency;
@@ -26,6 +24,14 @@ export type PaymentContextType = {
   api: Axios;
 };
 
+export type PaymentContextProps = {
+  session: import('@arcblock/did-connect/lib/types').SessionContext['session'];
+  connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
+  children: any;
+  // eslint-disable-next-line react/require-default-props
+  baseUrl?: string;
+};
+
 // @ts-ignore
 const PaymentContext = createContext<PaymentContextType>({ api });
 const { Provider, Consumer } = PaymentContext;
@@ -40,10 +46,15 @@ const getCurrency = (currencyId: string, methods: TPaymentMethodExpanded[]) => {
   return currencies.find((x) => x.id === currencyId);
 };
 
-// eslint-disable-next-line react/prop-types
-function PaymentProvider({ children, session, connect }: { children: any; session: any; connect: any }) {
+function PaymentProvider({ session, connect, children, baseUrl }: PaymentContextProps) {
+  if (baseUrl) {
+    // This is hack but efficient to share
+    window.__PAYMENT_KIT_BASE_URL = baseUrl;
+  }
+
   const { data, error, run, loading } = useRequest(getSettings);
   const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });
+  const prefix = getPrefix();
 
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
@@ -56,7 +67,7 @@ function PaymentProvider({ children, session, connect }: { children: any; sessio
   return (
     <Provider
       value={{
-        session,
+        session: session as any,
         connect,
         prefix,
         livemode: !!livemode,

package/src/history/invoice/list.tsx

@@ -65,7 +65,6 @@ const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
       external: false,
       connect: invoice.status === 'uncollectible',
       url: joinURL(
-        window.location.origin,
         getPrefix(),
         `/customer/invoice/${invoice.id}?action=${invoice.status === 'uncollectible' ? action : ''}`
       ),

package/src/history/mini-invoice/list.tsx

@@ -73,7 +73,7 @@ export default function MiniInvoiceList() {
       return '#';
     }
 
-    const pageUrl: string = joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`);
+    const pageUrl: string = joinURL(getPrefix(), `/customer/subscription/${subscription.id}`);
 
     return withQuery(pageUrl, {
       source: 'embed',

package/src/libs/api.ts

@@ -9,7 +9,6 @@ const api = axios.create();
 api.interceptors.request.use(
   (config) => {
     const prefix = getPrefix();
-    // 'https://storage.staging.abtnet.io/app/payment-kit/.well-known/service'
     config.baseURL = prefix || '';
 
     const locale = getLocale(window.blocklet?.languages);

package/src/libs/util.ts

@@ -31,16 +31,30 @@ export const isPaymentKitMounted = () => {
 };
 
 export const getPrefix = (): string => {
-  const componentId = (window?.blocklet?.componentId || '').split('/').pop();
+  const prefix = window.blocklet?.prefix || '/';
+  let baseUrl = window.location?.origin; // required when use payment feature cross origin
+  if (window.__PAYMENT_KIT_BASE_URL) {
+    try {
+      const tmp = new URL(window.__PAYMENT_KIT_BASE_URL);
+      if (tmp.origin !== window.location.origin) {
+        baseUrl = window.__PAYMENT_KIT_BASE_URL;
+      } else {
+        baseUrl = tmp.origin;
+      }
+    } catch (err) {
+      console.warn('Invalid baseUrl for PaymentProvider', window.__PAYMENT_KIT_BASE_URL);
+    }
+  }
+  const componentId = (window.blocklet?.componentId || '').split('/').pop();
   if (componentId === PAYMENT_KIT_DID) {
-    return window.blocklet?.prefix;
+    return joinURL(baseUrl, prefix);
   }
   const component = (window.blocklet?.componentMountPoints || []).find((x: TComponent) => x.did === PAYMENT_KIT_DID);
   if (component) {
-    return component.mountPoint;
+    return joinURL(baseUrl, component.mountPoint);
   }
 
-  return window.blocklet?.prefix;
+  return joinURL(baseUrl, prefix);
 };
 
 export function formatToDate(date: Date | string | number, locale = 'en', format = 'YYYY-MM-DD HH:mm:ss') {

package/src/payment/form/index.tsx

@@ -270,7 +270,7 @@ export default function PaymentForm({
           connect.open({
             containerEl: undefined as unknown as Element,
             action: checkoutSession.mode,
-            prefix: joinURL(window.location.origin, getPrefix(), '/api/did'),
+            prefix: joinURL(getPrefix(), '/api/did'),
             saveConnect: false,
             extraParams: { checkoutSessionId: checkoutSession.id },
             onSuccess: async () => {
@@ -464,9 +464,7 @@ export default function PaymentForm({
       </Fade>
       {state.customerLimited && (
         <ConfirmDialog
-          onConfirm={() =>
-            window.open(joinURL(window.location.origin, getPrefix(), '/customer/invoice/past-due'), '_blank')
-          }
+          onConfirm={() => window.open(joinURL(getPrefix(), '/customer/invoice/past-due'), '_blank')}
           onCancel={() => setState({ customerLimited: false })}
           confirm={t('payment.customer.pastDue.alert.confirm')}
           title={t('payment.customer.pastDue.alert.title')}

package/src/types/shims.d.ts

@@ -14,3 +14,5 @@ declare module '@blocklet/*';
 declare module 'pretty-ms-i18n';
 
 declare var blocklet: import('@blocklet/sdk').WindowBlocklet;
+
+declare var __PAYMENT_KIT_BASE_URL: string;