@blocklet/payment-react 1.13.182 → 1.13.183

package/es/checkout/form.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, onPaid, onError, mode, goBack, extraParams }: CheckoutProps): import("react").JSX.Element;
+declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams }: CheckoutProps): import("react").JSX.Element;
 declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;

package/es/checkout/form.js

@@ -14,7 +14,7 @@ const fetchCheckoutSession = async (id) => {
   const { data } = await api.get(`/api/checkout-sessions/retrieve/${id}`);
   return data;
 };
-export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraParams }) {
+export default function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
     throw new Error("Either a checkoutSession or a paymentLink id is required.");
   }
@@ -49,6 +49,7 @@ export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraP
       error: apiError || state.appError,
       onPaid: handlePaid,
       onError: handleError,
+      onChange,
       goBack,
       mode
     }

package/es/checkout/table.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-export default function CheckoutTable({ id, onPaid, onError, mode, extraParams, goBack }: CheckoutProps): import("react").JSX.Element;
+export default function CheckoutTable({ id, mode, onPaid, onError, onChange, extraParams, goBack }: CheckoutProps): import("react").JSX.Element;

package/es/checkout/table.js

@@ -14,7 +14,7 @@ const fetchData = async (id) => {
   const { data } = await api.get(`/api/pricing-tables/${id}`);
   return data;
 };
-export default function CheckoutTable({ id, onPaid, onError, mode, extraParams, goBack }) {
+export default function CheckoutTable({ id, mode, onPaid, onError, onChange, extraParams, goBack }) {
   if (!id.startsWith("prctbl_")) {
     throw new Error("A valid pricing table id is required.");
   }
@@ -66,5 +66,15 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams,
     }
     return /* @__PURE__ */ jsx(PricingTable, { mode: "select", table: data, onSelect: handleSelect });
   }
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CheckoutForm, { id: hashSessionId || sessionId, onPaid, onError, mode, ...prop }) });
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    CheckoutForm,
+    {
+      id: hashSessionId || sessionId,
+      mode,
+      onPaid,
+      onError,
+      onChange,
+      ...prop
+    }
+  ) });
 }

package/es/contexts/payment.d.ts

@@ -14,6 +14,7 @@ export type PaymentContextType = {
     prefix: string;
     settings: Settings;
     refresh: () => void;
+    getCurrency: (currencyId: string) => TPaymentCurrency | undefined;
     setLivemode: (livemode: boolean) => void;
     api: Axios;
 };

package/es/contexts/payment.js

@@ -11,6 +11,10 @@ const getSettings = async () => {
   const { data } = await api.get("/api/settings");
   return data;
 };
+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 }) {
   const { data, error, run, loading } = useRequest(getSettings);
   const [livemode, setLivemode] = useLocalStorageState("livemode", { defaultValue: true });
@@ -29,6 +33,7 @@ function PaymentProvider({ children, session, connect }) {
         prefix,
         livemode: !!livemode,
         settings: data,
+        getCurrency: (currencyId) => getCurrency(currencyId, data.paymentMethods),
         refresh: run,
         setLivemode,
         api

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

@@ -63,7 +63,7 @@ export default function MiniInvoiceList() {
         Typography,
         {
           sx: {
-            color: "#34BE74",
+            color: "success.main",
             fontWeight: "bold",
             marginRight: "10px"
           },

package/es/payment/index.d.ts

@@ -5,7 +5,7 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
     error?: any;
 };
-declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, goBack, }: Props): import("react").JSX.Element;
+declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, }: Props): import("react").JSX.Element;
 declare namespace Payment {
     var defaultProps: {
         completed: boolean;
@@ -16,7 +16,7 @@ export default Payment;
 type MainProps = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
 };
-export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, goBack, }: MainProps): import("react").JSX.Element;
+export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, onChange, goBack, }: MainProps): import("react").JSX.Element;
 export declare namespace PaymentInner {
     var defaultProps: {
         completed: boolean;

package/es/payment/index.js

@@ -33,6 +33,7 @@ export default function Payment({
   mode,
   onPaid,
   onError,
+  onChange,
   goBack
 }) {
   const { t } = useLocaleContext();
@@ -57,7 +58,7 @@ export default function Payment({
     return /* @__PURE__ */ jsx(PaymentError, { title: "Oops", description: formatError(error) });
   }
   if (!checkoutSession || !delay) {
-    return /* @__PURE__ */ jsx(Root, { mode, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", children: [
+    return /* @__PURE__ */ jsx(Root, { mode, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : 8 } }, children: [
       /* @__PURE__ */ jsx(Stack, { className: "cko-overview", children: /* @__PURE__ */ jsx(OverviewSkeleton, {}) }),
       /* @__PURE__ */ jsx(Stack, { className: "cko-payment", children: /* @__PURE__ */ jsx(PaymentSkeleton, {}) }),
       /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer" })
@@ -92,6 +93,7 @@ export default function Payment({
       customer,
       onPaid,
       onError,
+      onChange,
       goBack,
       mode
     }
@@ -110,6 +112,7 @@ export function PaymentInner({
   mode,
   onPaid,
   onError,
+  onChange,
   goBack
 }) {
   const { t } = useLocaleContext();
@@ -140,6 +143,11 @@ export function PaymentInner({
   });
   const currencyId = useWatch({ control: methods.control, name: "payment_currency", defaultValue: defaultCurrencyId });
   const currency = findCurrency(paymentMethods, currencyId) || settings.baseCurrency;
+  useEffect(() => {
+    if (onChange) {
+      onChange(methods.getValues());
+    }
+  }, [currencyId]);
   const onUpsell = async (from, to) => {
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/upsell`, { from, to });

package/es/types/index.d.ts

@@ -8,6 +8,21 @@ export type CheckoutContext = {
     customer?: TCustomer;
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
 };
+export type CheckoutFormData = {
+    customer_name: string;
+    customer_email?: string;
+    customer_phone?: string;
+    payment_method: string;
+    payment_currency: string;
+    billing_address?: {
+        country: string;
+        state?: string;
+        city?: string;
+        line1?: string;
+        line2?: string;
+        postal_code: string;
+    };
+};
 export type CheckoutProps = Partial<CheckoutCallbacks> & {
     id: string;
     extraParams?: Record<string, any>;
@@ -16,5 +31,6 @@ export type CheckoutProps = Partial<CheckoutCallbacks> & {
 export type CheckoutCallbacks = {
     onPaid: (res: CheckoutContext) => void;
     onError: (err: Error) => void;
+    onChange?: (data: CheckoutFormData) => void;
     goBack?: () => void;
 };

package/lib/checkout/form.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, onPaid, onError, mode, goBack, extraParams }: CheckoutProps): import("react").JSX.Element;
+declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams }: CheckoutProps): import("react").JSX.Element;
 declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;

package/lib/checkout/form.js

@@ -27,9 +27,10 @@ const fetchCheckoutSession = async id => {
 };
 function CheckoutForm({
   id,
+  mode,
   onPaid,
   onError,
-  mode,
+  onChange,
   goBack,
   extraParams
 }) {
@@ -73,6 +74,7 @@ function CheckoutForm({
     error: apiError || state.appError,
     onPaid: handlePaid,
     onError: handleError,
+    onChange,
     goBack,
     mode
   });

package/lib/checkout/table.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-export default function CheckoutTable({ id, onPaid, onError, mode, extraParams, goBack }: CheckoutProps): import("react").JSX.Element;
+export default function CheckoutTable({ id, mode, onPaid, onError, onChange, extraParams, goBack }: CheckoutProps): import("react").JSX.Element;

package/lib/checkout/table.js

@@ -25,9 +25,10 @@ const fetchData = async id => {
 };
 function CheckoutTable({
   id,
+  mode,
   onPaid,
   onError,
-  mode,
+  onChange,
   extraParams,
   goBack
 }) {
@@ -108,9 +109,10 @@ function CheckoutTable({
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_system.Box, {
     children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
       id: hashSessionId || sessionId,
+      mode,
       onPaid,
       onError,
-      mode,
+      onChange,
       ...prop
     })
   });

package/lib/contexts/payment.d.ts

@@ -14,6 +14,7 @@ export type PaymentContextType = {
     prefix: string;
     settings: Settings;
     refresh: () => void;
+    getCurrency: (currencyId: string) => TPaymentCurrency | undefined;
     setLivemode: (livemode: boolean) => void;
     api: Axios;
 };

package/lib/contexts/payment.js

@@ -29,6 +29,10 @@ const getSettings = async () => {
   } = await _api.default.get("/api/settings");
   return data;
 };
+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,
@@ -59,6 +63,7 @@ function PaymentProvider({
       prefix,
       livemode: !!livemode,
       settings: data,
+      getCurrency: currencyId => getCurrency(currencyId, data.paymentMethods),
       refresh: run,
       setLivemode,
       api: _api.default

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

@@ -67,7 +67,7 @@ function MiniInvoiceList() {
       name: t("payment.customer.subscriptions.nextInvoice"),
       value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         sx: {
-          color: "#34BE74",
+          color: "success.main",
           fontWeight: "bold",
           marginRight: "10px"
         },

package/lib/payment/index.d.ts

@@ -5,7 +5,7 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
     error?: any;
 };
-declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, goBack, }: Props): import("react").JSX.Element;
+declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, }: Props): import("react").JSX.Element;
 declare namespace Payment {
     var defaultProps: {
         completed: boolean;
@@ -16,7 +16,7 @@ export default Payment;
 type MainProps = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
 };
-export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, goBack, }: MainProps): import("react").JSX.Element;
+export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, onChange, goBack, }: MainProps): import("react").JSX.Element;
 export declare namespace PaymentInner {
     var defaultProps: {
         completed: boolean;

package/lib/payment/index.js

@@ -42,6 +42,7 @@ function Payment({
   mode,
   onPaid,
   onError,
+  onChange,
   goBack
 }) {
   const {
@@ -79,6 +80,11 @@ function Payment({
       mode,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-container",
+        sx: {
+          gap: {
+            sm: mode === "standalone" ? 0 : 8
+          }
+        },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
           className: "cko-overview",
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_overview.default, {})
@@ -112,6 +118,7 @@ function Payment({
     customer,
     onPaid,
     onError,
+    onChange,
     goBack,
     mode
   });
@@ -129,6 +136,7 @@ function PaymentInner({
   mode,
   onPaid,
   onError,
+  onChange,
   goBack
 }) {
   const {
@@ -168,6 +176,11 @@ function PaymentInner({
     defaultValue: defaultCurrencyId
   });
   const currency = (0, _util.findCurrency)(paymentMethods, currencyId) || settings.baseCurrency;
+  (0, _react.useEffect)(() => {
+    if (onChange) {
+      onChange(methods.getValues());
+    }
+  }, [currencyId]);
   const onUpsell = async (from, to) => {
     try {
       const {

package/lib/types/index.d.ts

@@ -8,6 +8,21 @@ export type CheckoutContext = {
     customer?: TCustomer;
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
 };
+export type CheckoutFormData = {
+    customer_name: string;
+    customer_email?: string;
+    customer_phone?: string;
+    payment_method: string;
+    payment_currency: string;
+    billing_address?: {
+        country: string;
+        state?: string;
+        city?: string;
+        line1?: string;
+        line2?: string;
+        postal_code: string;
+    };
+};
 export type CheckoutProps = Partial<CheckoutCallbacks> & {
     id: string;
     extraParams?: Record<string, any>;
@@ -16,5 +31,6 @@ export type CheckoutProps = Partial<CheckoutCallbacks> & {
 export type CheckoutCallbacks = {
     onPaid: (res: CheckoutContext) => void;
     onError: (err: Error) => void;
+    onChange?: (data: CheckoutFormData) => void;
     goBack?: () => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.182",
+  "version": "1.13.183",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -90,7 +90,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.182",
+    "@blocklet/payment-types": "1.13.183",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "b1935163989f89ce3e66e93cc006b39b671c074b"
+  "gitHead": "8cf0deb151d24b4a1d58a18dd225d9ef8a8faecb"
 }

package/src/checkout/form.tsx

@@ -21,7 +21,7 @@ const fetchCheckoutSession = async (id: string): Promise<CheckoutContext> => {
 };
 
 // FIXME: @wangshijun support popup
-export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraParams }: CheckoutProps) {
+export default function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams }: CheckoutProps) {
   if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
     throw new Error('Either a checkoutSession or a paymentLink id is required.');
   }
@@ -62,6 +62,7 @@ export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraP
       error={apiError || state.appError}
       onPaid={handlePaid}
       onError={handleError}
+      onChange={onChange}
       goBack={goBack}
       mode={mode as string}
     />

package/src/checkout/table.tsx

@@ -18,7 +18,7 @@ const fetchData = async (id: string): Promise<TPricingTableExpanded> => {
   return data;
 };
 
-export default function CheckoutTable({ id, onPaid, onError, mode, extraParams, goBack }: CheckoutProps) {
+export default function CheckoutTable({ id, mode, onPaid, onError, onChange, extraParams, goBack }: CheckoutProps) {
   if (!id.startsWith('prctbl_')) {
     throw new Error('A valid pricing table id is required.');
   }
@@ -88,7 +88,14 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams,
 
   return (
     <Box>
-      <CheckoutForm id={hashSessionId || sessionId} onPaid={onPaid} onError={onError} mode={mode} {...prop} />
+      <CheckoutForm
+        id={hashSessionId || sessionId}
+        mode={mode}
+        onPaid={onPaid}
+        onError={onError}
+        onChange={onChange}
+        {...prop}
+      />
     </Box>
   );
 }

package/src/contexts/payment.tsx

@@ -21,6 +21,7 @@ export type PaymentContextType = {
   prefix: string;
   settings: Settings;
   refresh: () => void;
+  getCurrency: (currencyId: string) => TPaymentCurrency | undefined;
   setLivemode: (livemode: boolean) => void;
   api: Axios;
 };
@@ -34,6 +35,11 @@ const getSettings = async () => {
   return data;
 };
 
+const getCurrency = (currencyId: string, methods: TPaymentMethodExpanded[]) => {
+  const currencies = methods.reduce((acc, x) => acc.concat(x.payment_currencies), [] as TPaymentCurrency[]);
+  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 }): JSX.Element {
   const { data, error, run, loading } = useRequest(getSettings);
@@ -55,6 +61,7 @@ function PaymentProvider({ children, session, connect }: { children: any; sessio
         prefix,
         livemode: !!livemode,
         settings: data,
+        getCurrency: (currencyId: string) => getCurrency(currencyId, data.paymentMethods),
         refresh: run,
         setLivemode,
         api,

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

@@ -81,7 +81,7 @@ export default function MiniInvoiceList() {
       value: (
         <Typography
           sx={{
-            color: '#34BE74',
+            color: 'success.main',
             fontWeight: 'bold',
             marginRight: '10px',
           }}>

package/src/payment/index.tsx

@@ -17,7 +17,7 @@ import { LiteralUnion } from 'type-fest';
 
 import api from '../api';
 import { usePaymentContext } from '../contexts/payment';
-import { CheckoutCallbacks, CheckoutContext } from '../types';
+import { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
 import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../util';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
@@ -46,6 +46,7 @@ export default function Payment({
   mode,
   onPaid,
   onError,
+  onChange,
   goBack,
 }: Props) {
   const { t } = useLocaleContext();
@@ -77,7 +78,7 @@ export default function Payment({
   if (!checkoutSession || !delay) {
     return (
       <Root mode={mode}>
-        <Stack className="cko-container">
+        <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : 8 } }}>
           <Stack className="cko-overview">
             <OverviewSkeleton />
           </Stack>
@@ -120,6 +121,7 @@ export default function Payment({
       customer={customer as TCustomer}
       onPaid={onPaid}
       onError={onError}
+      onChange={onChange}
       goBack={goBack}
       mode={mode}
     />
@@ -142,6 +144,7 @@ export function PaymentInner({
   mode,
   onPaid,
   onError,
+  onChange,
   goBack,
 }: MainProps) {
   const { t } = useLocaleContext();
@@ -151,7 +154,7 @@ export function PaymentInner({
   const defaultCurrencyId = 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 methods = useForm({
+  const methods = useForm<CheckoutFormData>({
     defaultValues: {
       customer_name: customer?.name || session?.user?.fullName || '',
       customer_email: customer?.email || session?.user?.email || '',
@@ -178,6 +181,12 @@ export function PaymentInner({
     (findCurrency(paymentMethods as TPaymentMethodExpanded[], currencyId as string) as TPaymentCurrency) ||
     settings.baseCurrency;
 
+  useEffect(() => {
+    if (onChange) {
+      onChange(methods.getValues());
+    }
+  }, [currencyId]); // eslint-disable-line
+
   const onUpsell = async (from: string, to: string) => {
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/upsell`, { from, to });

package/src/types/index.ts

@@ -17,6 +17,22 @@ export type CheckoutContext = {
   mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
 };
 
+export type CheckoutFormData = {
+  customer_name: string;
+  customer_email?: string;
+  customer_phone?: string;
+  payment_method: string;
+  payment_currency: string;
+  billing_address?: {
+    country: string;
+    state?: string;
+    city?: string;
+    line1?: string;
+    line2?: string;
+    postal_code: string;
+  };
+};
+
 export type CheckoutProps = Partial<CheckoutCallbacks> & {
   id: string;
   extraParams?: Record<string, any>;
@@ -26,5 +42,6 @@ export type CheckoutProps = Partial<CheckoutCallbacks> & {
 export type CheckoutCallbacks = {
   onPaid: (res: CheckoutContext) => void;
   onError: (err: Error) => void;
+  onChange?: (data: CheckoutFormData) => void;
   goBack?: () => void;
 };