@bunnyapp/components 1.8.0-beta.15 → 1.8.0-beta.16

package/dist/cjs/index.js

@@ -1288,7 +1288,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.8.0-beta.14';
+const PACKAGE_VERSION = '1.8.0-beta.15';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -20568,6 +20568,7 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
     const [isPaid, setIsPaid] = react.useState(false);
     const [isPaying, setIsPaying] = react.useState(false);
     const [isApprovingHold, setIsApprovingHold] = react.useState(false);
+    const [isSaving, setIsSaving] = react.useState(false);
     const getAmountDue = () => {
         return quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
     };
@@ -20608,6 +20609,8 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
             setIsPaying,
             isApprovingHold,
             setIsApprovingHold,
+            isSaving,
+            setIsSaving,
         }, children: children }));
 }
 
@@ -21111,7 +21114,7 @@ function Pay(props = {}) {
     const isMobile = useIsMobile();
     const { onPaymentSuccess, onPaymentHoldSuccess, onSavePaymentMethod, paymentHoldPrecondition } = usePaymentFormCallbacks();
     const selectedPlugin = useSelectedPlugin();
-    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid, setIsPaying, setIsApprovingHold } = usePayable();
+    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid, setIsPaying, setIsApprovingHold, setIsSaving } = usePayable();
     const accountId = useAccountId();
     const { defaultPaymentMethod } = usePaymentMethod({ accountId });
     const [showPaymentDetailsForm, setShowPaymentDetailsForm] = useShowPaymentDetails();
@@ -21194,6 +21197,10 @@ function Pay(props = {}) {
         setIsApprovingHold(isApprovingHold);
         return () => setIsApprovingHold(false);
     }, [isApprovingHold, setIsApprovingHold]);
+    react.useEffect(() => {
+        setIsSaving(isSaving);
+        return () => setIsSaving(false);
+    }, [isSaving, setIsSaving]);
     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 }));
 }
 
@@ -21286,7 +21293,8 @@ const [PaymentMethodFormVisibilityProvider, usePaymentMethodFormVisibility] = cr
 function Cancel() {
     const isMobile = useIsMobile();
     const [, setShowPaymentMethodForm] = useShowPaymentDetails();
-    return (jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", size: isMobile ? 'large' : 'middle', onClick: () => setShowPaymentMethodForm(false), children: "Cancel" }));
+    const { isApprovingHold, isPaying, isSaving } = usePayable();
+    return (jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", size: isMobile ? 'large' : 'middle', onClick: () => setShowPaymentMethodForm(false), disabled: isApprovingHold || isPaying || isSaving, children: "Cancel" }));
 }
 
 const CardIcon = ({ className }) => {
@@ -21298,16 +21306,17 @@ const PaymentMethodSelector = () => {
     const accountId = useAccountId();
     const { paymentPlugins } = usePaymentPlugins(accountId);
     const [selectedPluginId, setSelectedPluginId] = useSelectedPluginId();
-    return (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map((plugin, index) => (jsxRuntime.jsx(PaymentOption, { name: plugin.name, onClick: setSelectedPluginId, paymentPluginId: plugin.id, selected: selectedPluginId === plugin.id }, index))) }));
+    const { isSaving, isPaying, isApprovingHold } = usePayable();
+    return (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map((plugin, index) => (jsxRuntime.jsx(PaymentOption, { name: plugin.name, onClick: setSelectedPluginId, paymentPluginId: plugin.id, selected: selectedPluginId === plugin.id, disabled: isSaving || isPaying || isApprovingHold }, index))) }));
 };
-const PaymentOption = ({ selected, paymentPluginId, onClick, name, }) => {
+const PaymentOption = ({ selected, paymentPluginId, onClick, name, disabled, }) => {
     const { brandColor } = useBrand();
     const { darkMode } = react.useContext(BunnyContext);
     const isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('ach');
     const isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
     return (jsxRuntime.jsxs(PaymentOptionContainer, { "$brandColor": brandColor, "$selected": selected, className: `bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ${darkMode
             ? `var(--row-background-dark) border-gray-500`
-            : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => onClick(paymentPluginId), children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$B, { children: name })] }), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] }));
+            : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => !disabled && onClick(paymentPluginId), children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$B, { children: name })] }), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] }));
 };
 const PaymentOptionContainer = defaultStyled.div `
   transition: border 0.3s ease;
@@ -21328,6 +21337,7 @@ function Save() {
     const isMobile = useIsMobile();
     const { onSavePaymentMethod } = usePaymentFormCallbacks();
     const [_, setShowPaymentDetailsForm] = useShowPaymentDetails();
+    const { setIsSaving } = usePayable();
     const { save: handleSave, isSaving } = useSave({
         accountId,
         onSaveSuccess: (response) => {
@@ -21337,6 +21347,10 @@ function Save() {
         onSaveError: handleAllErrorFormats$1,
         invalidatePaymentMethodsQuery: true,
     });
+    react.useEffect(() => {
+        setIsSaving(isSaving);
+        return () => setIsSaving(false);
+    }, [isSaving, setIsSaving]);
     const saveButtonText = isSaving ? 'Saving' : 'Save';
     return (jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isSaving, loading: isSaving, onClick: handleSave, size: isMobile ? 'large' : 'middle', type: "primary", children: saveButtonText }));
 }

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

@@ -17,6 +17,8 @@ declare const PayableProvider: ({ value, children }: {
         setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
         isApprovingHold: boolean;
         setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
+        isSaving: boolean;
+        setIsSaving: React.Dispatch<React.SetStateAction<boolean>>;
     };
     children?: import("react").ReactNode;
 }) => import("react/jsx-runtime").JSX.Element, usePayable: () => {
@@ -35,6 +37,8 @@ declare const PayableProvider: ({ value, children }: {
     setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
     isApprovingHold: boolean;
     setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
+    isSaving: boolean;
+    setIsSaving: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export { PayableProvider, usePayable, };
 export declare const PaymentProvider_QuoteFragment: import("gql.tada").TadaDocumentNode<{

package/dist/esm/index.js

@@ -1286,7 +1286,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.8.0-beta.14';
+const PACKAGE_VERSION = '1.8.0-beta.15';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -20566,6 +20566,7 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
     const [isPaid, setIsPaid] = useState(false);
     const [isPaying, setIsPaying] = useState(false);
     const [isApprovingHold, setIsApprovingHold] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
     const getAmountDue = () => {
         return quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
     };
@@ -20606,6 +20607,8 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
             setIsPaying,
             isApprovingHold,
             setIsApprovingHold,
+            isSaving,
+            setIsSaving,
         }, children: children }));
 }
 
@@ -21109,7 +21112,7 @@ function Pay(props = {}) {
     const isMobile = useIsMobile();
     const { onPaymentSuccess, onPaymentHoldSuccess, onSavePaymentMethod, paymentHoldPrecondition } = usePaymentFormCallbacks();
     const selectedPlugin = useSelectedPlugin();
-    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid, setIsPaying, setIsApprovingHold } = usePayable();
+    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid, setIsPaying, setIsApprovingHold, setIsSaving } = usePayable();
     const accountId = useAccountId();
     const { defaultPaymentMethod } = usePaymentMethod({ accountId });
     const [showPaymentDetailsForm, setShowPaymentDetailsForm] = useShowPaymentDetails();
@@ -21192,6 +21195,10 @@ function Pay(props = {}) {
         setIsApprovingHold(isApprovingHold);
         return () => setIsApprovingHold(false);
     }, [isApprovingHold, setIsApprovingHold]);
+    useEffect(() => {
+        setIsSaving(isSaving);
+        return () => setIsSaving(false);
+    }, [isSaving, setIsSaving]);
     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 }));
 }
 
@@ -21284,7 +21291,8 @@ const [PaymentMethodFormVisibilityProvider, usePaymentMethodFormVisibility] = cr
 function Cancel() {
     const isMobile = useIsMobile();
     const [, setShowPaymentMethodForm] = useShowPaymentDetails();
-    return (jsx(Button, { className: "bunny-w-full", size: isMobile ? 'large' : 'middle', onClick: () => setShowPaymentMethodForm(false), children: "Cancel" }));
+    const { isApprovingHold, isPaying, isSaving } = usePayable();
+    return (jsx(Button, { className: "bunny-w-full", size: isMobile ? 'large' : 'middle', onClick: () => setShowPaymentMethodForm(false), disabled: isApprovingHold || isPaying || isSaving, children: "Cancel" }));
 }
 
 const CardIcon = ({ className }) => {
@@ -21296,16 +21304,17 @@ const PaymentMethodSelector = () => {
     const accountId = useAccountId();
     const { paymentPlugins } = usePaymentPlugins(accountId);
     const [selectedPluginId, setSelectedPluginId] = useSelectedPluginId();
-    return (jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map((plugin, index) => (jsx(PaymentOption, { name: plugin.name, onClick: setSelectedPluginId, paymentPluginId: plugin.id, selected: selectedPluginId === plugin.id }, index))) }));
+    const { isSaving, isPaying, isApprovingHold } = usePayable();
+    return (jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map((plugin, index) => (jsx(PaymentOption, { name: plugin.name, onClick: setSelectedPluginId, paymentPluginId: plugin.id, selected: selectedPluginId === plugin.id, disabled: isSaving || isPaying || isApprovingHold }, index))) }));
 };
-const PaymentOption = ({ selected, paymentPluginId, onClick, name, }) => {
+const PaymentOption = ({ selected, paymentPluginId, onClick, name, disabled, }) => {
     const { brandColor } = useBrand();
     const { darkMode } = useContext(BunnyContext);
     const isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('ach');
     const isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
     return (jsxs(PaymentOptionContainer, { "$brandColor": brandColor, "$selected": selected, className: `bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ${darkMode
             ? `var(--row-background-dark) border-gray-500`
-            : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => onClick(paymentPluginId), children: [jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$B, { children: name })] }), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] }));
+            : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => !disabled && onClick(paymentPluginId), children: [jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$B, { children: name })] }), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] }));
 };
 const PaymentOptionContainer = defaultStyled.div `
   transition: border 0.3s ease;
@@ -21326,6 +21335,7 @@ function Save() {
     const isMobile = useIsMobile();
     const { onSavePaymentMethod } = usePaymentFormCallbacks();
     const [_, setShowPaymentDetailsForm] = useShowPaymentDetails();
+    const { setIsSaving } = usePayable();
     const { save: handleSave, isSaving } = useSave({
         accountId,
         onSaveSuccess: (response) => {
@@ -21335,6 +21345,10 @@ function Save() {
         onSaveError: handleAllErrorFormats$1,
         invalidatePaymentMethodsQuery: true,
     });
+    useEffect(() => {
+        setIsSaving(isSaving);
+        return () => setIsSaving(false);
+    }, [isSaving, setIsSaving]);
     const saveButtonText = isSaving ? 'Saving' : 'Save';
     return (jsx(Button, { className: "bunny-w-full", disabled: isSaving, loading: isSaving, onClick: handleSave, size: isMobile ? 'large' : 'middle', type: "primary", children: saveButtonText }));
 }

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

@@ -17,6 +17,8 @@ declare const PayableProvider: ({ value, children }: {
         setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
         isApprovingHold: boolean;
         setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
+        isSaving: boolean;
+        setIsSaving: React.Dispatch<React.SetStateAction<boolean>>;
     };
     children?: import("react").ReactNode;
 }) => import("react/jsx-runtime").JSX.Element, usePayable: () => {
@@ -35,6 +37,8 @@ declare const PayableProvider: ({ value, children }: {
     setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
     isApprovingHold: boolean;
     setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
+    isSaving: boolean;
+    setIsSaving: 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.15",
+  "version": "1.8.0-beta.16",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",