@bunnyapp/components 1.8.0-beta.11 → 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.10';
+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] })),
                 },
             ] }) }));
@@ -21474,11 +21489,9 @@ function PaymentFormRoot({ currencyId: accountCurrencyId, invoice: maskedInvoice
 }
 // Default layout that uses PaymentFormRoot under the hood when no children are provided.
 function PaymentFormDefault(props) {
-    console.log('PaymentFormDefault', props);
     return jsxRuntime.jsx(PaymentFormRoot, { ...props, children: ({ hasPaymentMethods, isPaymentMethodDetailsOpen, isPayableAvailable, amountDue }) => {
             const showPayButton = amountDue !== undefined && amountDue > 0 && !isPaymentMethodDetailsOpen && hasPaymentMethods;
             const checkoutNoPaymentButton = amountDue !== undefined && amountDue === 0;
-            console.log('props.disablePayButton', props.disablePayButton);
             if (checkoutNoPaymentButton) {
                 return jsxRuntime.jsx(PaymentForm.CheckoutNoPayment, { className: "bunny-px-4", disabled: props.disablePayButton });
             }
@@ -24388,11 +24401,11 @@ function useQuantityEditableCharges({ upgradingSubscription: maskedUpgradingSubs
         // 2. Get all quote charges
         // We cannot edit adjustment charges so filter them out.
         const nonAdjustmentQuoteChanges = (_d = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _d === void 0 ? void 0 : _d.filter(qc => qc.kind !== 'ADJUSTMENT');
-        const allQuoteCharges = (_e = nonAdjustmentQuoteChanges === null || nonAdjustmentQuoteChanges === void 0 ? void 0 : nonAdjustmentQuoteChanges.flatMap(qc => qc.charges.flatMap(charge => charge === null || charge === void 0 ? void 0 : charge.priceListCharge)).filter(c => c !== null)) !== null && _e !== void 0 ? _e : [];
-        // 3. Filter out quote charges that are already in the subscription
+        const allCharges = (_e = nonAdjustmentQuoteChanges === null || nonAdjustmentQuoteChanges === void 0 ? void 0 : nonAdjustmentQuoteChanges.flatMap(qc => qc.charges.flatMap(charge => charge === null || charge === void 0 ? void 0 : charge.priceListCharge)).filter(c => c !== null)) !== null && _e !== void 0 ? _e : [];
+        // 3. Filter out charges that are already in the subscription (duplicates)
         const allSubscriptionChargeIds = new Set(allSubscriptionCharges === null || allSubscriptionCharges === void 0 ? void 0 : allSubscriptionCharges.map(c => c === null || c === void 0 ? void 0 : c.id));
-        const filteredQuoteCharges = allQuoteCharges === null || allQuoteCharges === void 0 ? void 0 : allQuoteCharges.filter(charge => !allSubscriptionChargeIds.has(charge === null || charge === void 0 ? void 0 : charge.id));
-        return [...allSubscriptionCharges, ...filteredQuoteCharges];
+        const filteredCharges = allCharges === null || allCharges === void 0 ? void 0 : allCharges.filter(charge => !allSubscriptionChargeIds.has(charge === null || charge === void 0 ? void 0 : charge.id));
+        return [...allSubscriptionCharges, ...filteredCharges];
     }, [upgradingSubscription, quote, pricelistId]);
     /**
      * Rules for when pricelist charges can be edited:
@@ -24425,7 +24438,7 @@ function useQuantityEditableCharges({ upgradingSubscription: maskedUpgradingSubs
             return true;
         });
         return thirdPassCharges !== null && thirdPassCharges !== void 0 ? thirdPassCharges : [];
-    }, [selectedPriceListQuoteChange]);
+    }, [selectedPriceListQuoteChange, priceListCharges]);
     /**
      * Find a subscription charge by price list charge ID
      * @param priceListChargeId - The ID of the price list charge to find
@@ -27485,6 +27498,9 @@ const AddonPlans_PlanFragment = t(`
         id
         name
         periodMonths
+        plan {
+          selfServiceBuy
+        }
         ...AddonPlanModal_PriceListFragment
         ...AddonPlanRow_PriceListFragment
       }
@@ -27536,7 +27552,7 @@ const AddonPlans = ({ selectedPriceList, subscriptions, selectedBillingPeriod, c
     const addonPlans = maskedAddonPlans === null || maskedAddonPlans === void 0 ? void 0 : maskedAddonPlans.map(maskedAddonPlan => readFragment(AddonPlans_PlanFragment, maskedAddonPlan));
     // Derived state
     const addonPriceLists = addonPlans
-        ? getAddonsForBillingPeriod(selectedBillingPeriod, addonPlans)
+        ? getAddonsForBillingPeriod(selectedBillingPeriod, addonPlans).filter(priceList => { var _a; return (_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.selfServiceBuy; })
         : [];
     const selectedAddonPriceList = addonPriceLists.find(priceList => priceList.id === selectedAddonPriceListId);
     function isAddonPriceListPurchased(priceList) {

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/cjs/types/src/components/Subscriptions/Upgrade/PlanPicker/planPickerDesktop/priceListCardDesktop/addonPlans/fragments/AddonPlans_PlanFragment.d.ts

@@ -5,6 +5,9 @@ export declare const AddonPlans_PlanFragment: import("gql.tada").TadaDocumentNod
         id: string;
         name: string;
         periodMonths: number | null;
+        plan: {
+            selfServiceBuy: boolean | null;
+        } | null;
         [$tada.fragmentRefs]: {
             AddonPlanModal_PriceListFragment: "PriceList";
         } & {

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.10';
+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] })),
                 },
             ] }) }));
@@ -21472,11 +21487,9 @@ function PaymentFormRoot({ currencyId: accountCurrencyId, invoice: maskedInvoice
 }
 // Default layout that uses PaymentFormRoot under the hood when no children are provided.
 function PaymentFormDefault(props) {
-    console.log('PaymentFormDefault', props);
     return jsx(PaymentFormRoot, { ...props, children: ({ hasPaymentMethods, isPaymentMethodDetailsOpen, isPayableAvailable, amountDue }) => {
             const showPayButton = amountDue !== undefined && amountDue > 0 && !isPaymentMethodDetailsOpen && hasPaymentMethods;
             const checkoutNoPaymentButton = amountDue !== undefined && amountDue === 0;
-            console.log('props.disablePayButton', props.disablePayButton);
             if (checkoutNoPaymentButton) {
                 return jsx(PaymentForm.CheckoutNoPayment, { className: "bunny-px-4", disabled: props.disablePayButton });
             }
@@ -24386,11 +24399,11 @@ function useQuantityEditableCharges({ upgradingSubscription: maskedUpgradingSubs
         // 2. Get all quote charges
         // We cannot edit adjustment charges so filter them out.
         const nonAdjustmentQuoteChanges = (_d = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _d === void 0 ? void 0 : _d.filter(qc => qc.kind !== 'ADJUSTMENT');
-        const allQuoteCharges = (_e = nonAdjustmentQuoteChanges === null || nonAdjustmentQuoteChanges === void 0 ? void 0 : nonAdjustmentQuoteChanges.flatMap(qc => qc.charges.flatMap(charge => charge === null || charge === void 0 ? void 0 : charge.priceListCharge)).filter(c => c !== null)) !== null && _e !== void 0 ? _e : [];
-        // 3. Filter out quote charges that are already in the subscription
+        const allCharges = (_e = nonAdjustmentQuoteChanges === null || nonAdjustmentQuoteChanges === void 0 ? void 0 : nonAdjustmentQuoteChanges.flatMap(qc => qc.charges.flatMap(charge => charge === null || charge === void 0 ? void 0 : charge.priceListCharge)).filter(c => c !== null)) !== null && _e !== void 0 ? _e : [];
+        // 3. Filter out charges that are already in the subscription (duplicates)
         const allSubscriptionChargeIds = new Set(allSubscriptionCharges === null || allSubscriptionCharges === void 0 ? void 0 : allSubscriptionCharges.map(c => c === null || c === void 0 ? void 0 : c.id));
-        const filteredQuoteCharges = allQuoteCharges === null || allQuoteCharges === void 0 ? void 0 : allQuoteCharges.filter(charge => !allSubscriptionChargeIds.has(charge === null || charge === void 0 ? void 0 : charge.id));
-        return [...allSubscriptionCharges, ...filteredQuoteCharges];
+        const filteredCharges = allCharges === null || allCharges === void 0 ? void 0 : allCharges.filter(charge => !allSubscriptionChargeIds.has(charge === null || charge === void 0 ? void 0 : charge.id));
+        return [...allSubscriptionCharges, ...filteredCharges];
     }, [upgradingSubscription, quote, pricelistId]);
     /**
      * Rules for when pricelist charges can be edited:
@@ -24423,7 +24436,7 @@ function useQuantityEditableCharges({ upgradingSubscription: maskedUpgradingSubs
             return true;
         });
         return thirdPassCharges !== null && thirdPassCharges !== void 0 ? thirdPassCharges : [];
-    }, [selectedPriceListQuoteChange]);
+    }, [selectedPriceListQuoteChange, priceListCharges]);
     /**
      * Find a subscription charge by price list charge ID
      * @param priceListChargeId - The ID of the price list charge to find
@@ -27483,6 +27496,9 @@ const AddonPlans_PlanFragment = t(`
         id
         name
         periodMonths
+        plan {
+          selfServiceBuy
+        }
         ...AddonPlanModal_PriceListFragment
         ...AddonPlanRow_PriceListFragment
       }
@@ -27534,7 +27550,7 @@ const AddonPlans = ({ selectedPriceList, subscriptions, selectedBillingPeriod, c
     const addonPlans = maskedAddonPlans === null || maskedAddonPlans === void 0 ? void 0 : maskedAddonPlans.map(maskedAddonPlan => readFragment(AddonPlans_PlanFragment, maskedAddonPlan));
     // Derived state
     const addonPriceLists = addonPlans
-        ? getAddonsForBillingPeriod(selectedBillingPeriod, addonPlans)
+        ? getAddonsForBillingPeriod(selectedBillingPeriod, addonPlans).filter(priceList => { var _a; return (_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.selfServiceBuy; })
         : [];
     const selectedAddonPriceList = addonPriceLists.find(priceList => priceList.id === selectedAddonPriceListId);
     function isAddonPriceListPurchased(priceList) {

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/dist/esm/types/src/components/Subscriptions/Upgrade/PlanPicker/planPickerDesktop/priceListCardDesktop/addonPlans/fragments/AddonPlans_PlanFragment.d.ts

@@ -5,6 +5,9 @@ export declare const AddonPlans_PlanFragment: import("gql.tada").TadaDocumentNod
         id: string;
         name: string;
         periodMonths: number | null;
+        plan: {
+            selfServiceBuy: boolean | null;
+        } | null;
         [$tada.fragmentRefs]: {
             AddonPlanModal_PriceListFragment: "PriceList";
         } & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.8.0-beta.11",
+  "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",