@bunnyapp/components 1.8.0-beta.12 → 1.8.0-beta.13

package/dist/cjs/index.js

@@ -1283,7 +1283,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.8.0-beta.11';
+const PACKAGE_VERSION = '1.8.0-beta.12';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -20561,6 +20561,8 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
     const invoice = readFragment(PaymentProvider_InvoiceFragment, maskedInvoice);
     // State
     const [isPaid, setIsPaid] = react.useState(false);
+    const [isPaying, setIsPaying] = react.useState(false);
+    const [isApprovingHold, setIsApprovingHold] = react.useState(false);
     const getAmountDue = () => {
         return quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
     };
@@ -20596,7 +20598,11 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
             amountDue: amountDue !== null && amountDue !== void 0 ? amountDue : undefined,
             formattedAmountDue: formattedAmountDueValue,
             isPaid,
-            setIsPaid
+            setIsPaid,
+            isPaying,
+            setIsPaying,
+            isApprovingHold,
+            setIsApprovingHold,
         }, children: children }));
 }
 
@@ -21100,7 +21106,7 @@ function Pay(props = {}) {
     const isMobile = useIsMobile();
     const { onPaymentSuccess, onPaymentHoldSuccess, onSavePaymentMethod, paymentHoldPrecondition } = usePaymentFormCallbacks();
     const selectedPlugin = useSelectedPlugin();
-    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid } = usePayable();
+    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid, setIsPaying, setIsApprovingHold } = usePayable();
     const accountId = useAccountId();
     const { defaultPaymentMethod } = usePaymentMethod({ accountId });
     const [showPaymentDetailsForm, setShowPaymentDetailsForm] = useShowPaymentDetails();
@@ -21175,6 +21181,14 @@ function Pay(props = {}) {
             return;
         }
     }
+    react.useEffect(() => {
+        setIsPaying(isPaying);
+        return () => setIsPaying(false);
+    }, [isPaying, setIsPaying]);
+    react.useEffect(() => {
+        setIsApprovingHold(isApprovingHold);
+        return () => setIsApprovingHold(false);
+    }, [isApprovingHold, setIsApprovingHold]);
     return (jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isPaying || isApprovingHold || isSaving || disabled, loading: isPaying || isApprovingHold || isSaving, onClick: handlePayment, size: isMobile ? 'large' : 'middle', type: "primary", children: paymentButtonText }));
 }
 
@@ -21331,6 +21345,7 @@ function PaymentMethodDetailsRoot(props = {}) {
     const accountId = useAccountId();
     const { paymentMethods } = usePaymentMethod({ accountId });
     const { paymentPlugins } = usePaymentPlugins(accountId);
+    const { isPaying, isApprovingHold } = usePayable();
     function handleClickAddPaymentMethod() {
         if ((paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) === 0) {
             showErrorNotification$6('No payment plugins available', 'Error adding payment method');
@@ -21349,7 +21364,7 @@ function PaymentMethodDetailsRoot(props = {}) {
                 {
                     key: '1',
                     showArrow: false,
-                    label: !showPaymentMethodForm ? (jsxRuntime.jsx("div", { className: "bunny-pt-2", children: jsxRuntime.jsx(antd.Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", children: "Add payment method" }) })) : null,
+                    label: !showPaymentMethodForm ? (jsxRuntime.jsx("div", { className: "bunny-pt-2", children: jsxRuntime.jsx(antd.Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", disabled: isPaying || isApprovingHold, children: "Add payment method" }) })) : null,
                     children: (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2", children: [jsxRuntime.jsx(PaymentMethodSelector, {}), selectedPlugin && (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col", children: getPaymentMethodForm((_b = (_a = selectedPlugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) })), footer] })),
                 },
             ] }) }));

package/dist/cjs/types/src/components/PaymentForm/context/PaymentProvider.d.ts

@@ -13,6 +13,10 @@ declare const PayableProvider: ({ value, children }: {
         formattedAmountDue: string | undefined;
         isPaid: boolean;
         setIsPaid: React.Dispatch<React.SetStateAction<boolean>>;
+        isPaying: boolean;
+        setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
+        isApprovingHold: boolean;
+        setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
     };
     children?: import("react").ReactNode;
 }) => import("react/jsx-runtime").JSX.Element, usePayable: () => {
@@ -27,6 +31,10 @@ declare const PayableProvider: ({ value, children }: {
     formattedAmountDue: string | undefined;
     isPaid: boolean;
     setIsPaid: React.Dispatch<React.SetStateAction<boolean>>;
+    isPaying: boolean;
+    setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
+    isApprovingHold: boolean;
+    setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export { PayableProvider, usePayable, };
 export declare const PaymentProvider_QuoteFragment: import("gql.tada").TadaDocumentNode<{

package/dist/esm/index.js

@@ -1281,7 +1281,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.8.0-beta.11';
+const PACKAGE_VERSION = '1.8.0-beta.12';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -20559,6 +20559,8 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
     const invoice = readFragment(PaymentProvider_InvoiceFragment, maskedInvoice);
     // State
     const [isPaid, setIsPaid] = useState(false);
+    const [isPaying, setIsPaying] = useState(false);
+    const [isApprovingHold, setIsApprovingHold] = useState(false);
     const getAmountDue = () => {
         return quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
     };
@@ -20594,7 +20596,11 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
             amountDue: amountDue !== null && amountDue !== void 0 ? amountDue : undefined,
             formattedAmountDue: formattedAmountDueValue,
             isPaid,
-            setIsPaid
+            setIsPaid,
+            isPaying,
+            setIsPaying,
+            isApprovingHold,
+            setIsApprovingHold,
         }, children: children }));
 }
 
@@ -21098,7 +21104,7 @@ function Pay(props = {}) {
     const isMobile = useIsMobile();
     const { onPaymentSuccess, onPaymentHoldSuccess, onSavePaymentMethod, paymentHoldPrecondition } = usePaymentFormCallbacks();
     const selectedPlugin = useSelectedPlugin();
-    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid } = usePayable();
+    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid, setIsPaying, setIsApprovingHold } = usePayable();
     const accountId = useAccountId();
     const { defaultPaymentMethod } = usePaymentMethod({ accountId });
     const [showPaymentDetailsForm, setShowPaymentDetailsForm] = useShowPaymentDetails();
@@ -21173,6 +21179,14 @@ function Pay(props = {}) {
             return;
         }
     }
+    useEffect(() => {
+        setIsPaying(isPaying);
+        return () => setIsPaying(false);
+    }, [isPaying, setIsPaying]);
+    useEffect(() => {
+        setIsApprovingHold(isApprovingHold);
+        return () => setIsApprovingHold(false);
+    }, [isApprovingHold, setIsApprovingHold]);
     return (jsx(Button, { className: "bunny-w-full", disabled: isPaying || isApprovingHold || isSaving || disabled, loading: isPaying || isApprovingHold || isSaving, onClick: handlePayment, size: isMobile ? 'large' : 'middle', type: "primary", children: paymentButtonText }));
 }
 
@@ -21329,6 +21343,7 @@ function PaymentMethodDetailsRoot(props = {}) {
     const accountId = useAccountId();
     const { paymentMethods } = usePaymentMethod({ accountId });
     const { paymentPlugins } = usePaymentPlugins(accountId);
+    const { isPaying, isApprovingHold } = usePayable();
     function handleClickAddPaymentMethod() {
         if ((paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) === 0) {
             showErrorNotification$6('No payment plugins available', 'Error adding payment method');
@@ -21347,7 +21362,7 @@ function PaymentMethodDetailsRoot(props = {}) {
                 {
                     key: '1',
                     showArrow: false,
-                    label: !showPaymentMethodForm ? (jsx("div", { className: "bunny-pt-2", children: jsx(Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", children: "Add payment method" }) })) : null,
+                    label: !showPaymentMethodForm ? (jsx("div", { className: "bunny-pt-2", children: jsx(Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", disabled: isPaying || isApprovingHold, children: "Add payment method" }) })) : null,
                     children: (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2", children: [jsx(PaymentMethodSelector, {}), selectedPlugin && (jsx("div", { className: "bunny-flex bunny-flex-col", children: getPaymentMethodForm((_b = (_a = selectedPlugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) })), footer] })),
                 },
             ] }) }));

package/dist/esm/types/src/components/PaymentForm/context/PaymentProvider.d.ts

@@ -13,6 +13,10 @@ declare const PayableProvider: ({ value, children }: {
         formattedAmountDue: string | undefined;
         isPaid: boolean;
         setIsPaid: React.Dispatch<React.SetStateAction<boolean>>;
+        isPaying: boolean;
+        setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
+        isApprovingHold: boolean;
+        setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
     };
     children?: import("react").ReactNode;
 }) => import("react/jsx-runtime").JSX.Element, usePayable: () => {
@@ -27,6 +31,10 @@ declare const PayableProvider: ({ value, children }: {
     formattedAmountDue: string | undefined;
     isPaid: boolean;
     setIsPaid: React.Dispatch<React.SetStateAction<boolean>>;
+    isPaying: boolean;
+    setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
+    isApprovingHold: boolean;
+    setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export { PayableProvider, usePayable, };
 export declare const PaymentProvider_QuoteFragment: import("gql.tada").TadaDocumentNode<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.8.0-beta.12",
+  "version": "1.8.0-beta.13",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",