@bunnyapp/components 1.7.0-beta.40 → 1.7.0-beta.42

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.7.0-beta.39';
+const PACKAGE_VERSION = '1.7.0-beta.41';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -28713,7 +28713,7 @@ const useQuoteRecalculateTaxes$1 = () => {
     };
 };
 
-const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
+const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, }) => {
     const token = useToken();
     const queryClient = reactQuery.useQueryClient();
     const showSuccessNotification = useSuccessNotification();
@@ -28734,7 +28734,6 @@ const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityD
         invalidateSubscriptionsQueryKeys(queryClient, token);
         showSuccessNotification('Your plan has been updated', 'Payment successful');
         setPayModalVisible(false);
-        setShowInactive(true);
         setUpdatingChargeQuantityId(undefined);
     };
     const onCancel = () => {
@@ -28755,12 +28754,12 @@ const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityD
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(QuantityChangeDrawerDesktop, { onClose: handleDrawerClose, open: quantityDrawerOpen, openCheckout: handleOpenCheckout, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, onRecalculateTaxes: quoteRecalculateTaxesMutation, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: false, isRecalculatingTaxes: isRecalculatingTaxes })] }));
 };
-const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
+const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, }) => {
     const { quoteRecalculateTaxesMutation, isRecalculatingTaxes } = useQuoteRecalculateTaxes$1();
     return (jsxRuntime.jsx(QuoteIdProvider, { children: jsxRuntime.jsx(QuoteIsLoadingProvider, { children: jsxRuntime.jsx(QuoteRecalculateTaxesProvider, { value: {
                     quoteRecalculateTaxesMutation: (quoteId) => quoteRecalculateTaxesMutation({ quoteId }),
                     isRecalculatingTaxes,
-                }, children: jsxRuntime.jsx(QuantityDrawerContent, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setShowInactive: setShowInactive }) }) }) }));
+                }, children: jsxRuntime.jsx(QuantityDrawerContent, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors }) }) }) }));
 };
 
 // TODO: this query will be trimmed and cleaned up once we fully migrate to gql.tada codegen
@@ -29617,7 +29616,7 @@ const getSubscriptions = async ({ apiHost, isInPreviewMode, token, }) => {
 };
 
 const showInfoNotification = useInfoNotification();
-const UpgradeWrapper = ({ onChangePlanCancel, handlePortalErrors, onPaymentMethodSaved, onPaymentMethodRemoved, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow = 'md', defaultBillingPeriod, }) => {
+const UpgradeWrapper = ({ onChangePlanCancel, handlePortalErrors, onPaymentMethodSaved, onPaymentMethodRemoved, upgradingSubscriptionId, isInPreviewMode = false, productId, className, shadow = 'md', defaultBillingPeriod, }) => {
     var _a, _b, _c;
     // Context
     const token = useToken();
@@ -29682,11 +29681,11 @@ const UpgradeContent = ({ onChangePlanCancel, handlePortalErrors, subscriptions,
                     if (isInPreviewMode)
                         return showInfoNotification('You are in preview mode');
                     onClearQuote();
-                    onChangePlanCancel();
-                } }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", { className: `bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ${isSticky ? 'bunny-mx-4' : 'bunny-mx-0'}`, children: selectedPriceList && (jsxRuntime.jsx(PlanPickerCheckoutBar, { selectedPriceList: selectedPriceList, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: () => onChangePlanCancel() })) })] }));
+                    onChangePlanCancel === null || onChangePlanCancel === void 0 ? void 0 : onChangePlanCancel();
+                } }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", { className: `bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ${isSticky ? 'bunny-mx-4' : 'bunny-mx-0'}`, children: selectedPriceList && (jsxRuntime.jsx(PlanPickerCheckoutBar, { selectedPriceList: selectedPriceList, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: () => onChangePlanCancel === null || onChangePlanCancel === void 0 ? void 0 : onChangePlanCancel() })) })] }));
 };
 
-const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode = false, productId, className, styles: userStyles = {}, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle = true, onPaymentMethodSaved, onPaymentMethodRemoved, }) => {
+const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode = false, productId, className, styles: userStyles = {}, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle = true, onPaymentMethodSaved, onPaymentMethodRemoved, onSubscriptionUpgradeClick, }) => {
     var _a, _b;
     // Context
     const token = useToken();
@@ -29718,9 +29717,9 @@ const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode
             productId,
             isInPreviewMode,
             showInactiveSubscriptions,
-        }, children: jsxRuntime.jsx(UpgradingSubscriptionIdProvider, { children: jsxRuntime.jsx(OnPaymentMethodSavedProvider, { value: onPaymentMethodSaved, children: jsxRuntime.jsx(OnPaymentMethodRemovedProvider, { value: onPaymentMethodRemoved, children: jsxRuntime.jsx(Subscriptions, { subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, showInactiveSubscriptionsToggle: showInactiveSubscriptionsToggle }) }) }) }) }));
+        }, children: jsxRuntime.jsx(UpgradingSubscriptionIdProvider, { children: jsxRuntime.jsx(OnPaymentMethodSavedProvider, { value: onPaymentMethodSaved, children: jsxRuntime.jsx(OnPaymentMethodRemovedProvider, { value: onPaymentMethodRemoved, children: jsxRuntime.jsx(Subscriptions, { subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, showInactiveSubscriptionsToggle: showInactiveSubscriptionsToggle, onSubscriptionUpgradeClick: onSubscriptionUpgradeClick }) }) }) }) }));
 };
-const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoading, handlePortalErrors, companyName, noSubscriptionsComponent, showInactiveSubscriptionsToggle, }) => {
+const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoading, handlePortalErrors, companyName, noSubscriptionsComponent, showInactiveSubscriptionsToggle, onSubscriptionUpgradeClick, }) => {
     // Context
     const token = useToken();
     const { apiHost } = react.useContext(BunnyContext);
@@ -29754,6 +29753,7 @@ const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoa
     });
     // Handlers
     const onChangePlanClick = (subscriptionId) => {
+        onSubscriptionUpgradeClick === null || onSubscriptionUpgradeClick === void 0 ? void 0 : onSubscriptionUpgradeClick(subscriptionId);
         setUpgradingSubscriptionId(subscriptionId);
         setIsChangingPlan(true);
     };
@@ -29791,7 +29791,7 @@ const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoa
     }
     if (!subscriptions)
         return null;
-    return (jsxRuntime.jsx(UpgradingSubscriptionProvider, { value: upgradingSubscription, children: jsxRuntime.jsx(SubscriptionCancelProvider, { value: onCancelSubscriptionClick, children: jsxRuntime.jsx(ChangeUpgradingSubscriptionProvider, { value: onChangePlanClick, children: jsxRuntime.jsxs("div", { className: className, children: [jsxRuntime.jsx(PageHeaderWithActions, { title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile && inactiveSwitchVisible && (jsxRuntime.jsx(ShowInactiveToggle, { showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState })) }), children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { inactiveSwitchVisible: inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) }), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, showInactive: showInactiveSubscriptions, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", { className: "bunny-pt-4 bunny-pb-2", children: jsxRuntime.jsx(SubscriptionsNavigation, { inactiveSwitchVisible: inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) })), jsxRuntime.jsx(QuantityDrawer, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setShowInactive: setShowInactiveSubscriptionsState })] }) }) }) }));
+    return (jsxRuntime.jsx(UpgradingSubscriptionProvider, { value: upgradingSubscription, children: jsxRuntime.jsx(SubscriptionCancelProvider, { value: onCancelSubscriptionClick, children: jsxRuntime.jsx(ChangeUpgradingSubscriptionProvider, { value: onChangePlanClick, children: jsxRuntime.jsxs("div", { className: className, children: [jsxRuntime.jsx(PageHeaderWithActions, { title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile && inactiveSwitchVisible && (jsxRuntime.jsx(ShowInactiveToggle, { showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState })) }), children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { inactiveSwitchVisible: inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) }), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, showInactive: showInactiveSubscriptions, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", { className: "bunny-pt-4 bunny-pb-2", children: jsxRuntime.jsx(SubscriptionsNavigation, { inactiveSwitchVisible: inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) })), jsxRuntime.jsx(QuantityDrawer, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors })] }) }) }) }));
 };
 const PageHeaderWithActions = ({ children, title, }) => {
     const isMobile = useIsMobile();

package/dist/cjs/types/src/components/Subscriptions/Subscriptions.d.ts

@@ -1,4 +1,4 @@
-declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, }: {
+declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, onSubscriptionUpgradeClick, }: {
     handlePortalErrors?: (errors: any) => void;
     companyName: string;
     isInPreviewMode?: boolean;
@@ -14,5 +14,6 @@ declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPrev
     showInactiveSubscriptionsToggle?: boolean;
     onPaymentMethodSaved?: (paymentMethodId: string) => void;
     onPaymentMethodRemoved?: (paymentMethodId: string) => void;
+    onSubscriptionUpgradeClick?: (subscriptionId: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionsWrapper;

package/dist/cjs/types/src/components/Subscriptions/Upgrade/Upgrade.d.ts

@@ -1,17 +1,16 @@
-import { BillingPeriod } from '@/graphql-codegen/exportedScalarTypes';
 declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, onPaymentMethodSaved, onPaymentMethodRemoved, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow, defaultBillingPeriod, }: {
-    onChangePlanCancel: () => void;
+    onChangePlanCancel?: () => void;
     handlePortalErrors?: (error: any) => void;
     onPaymentMethodSaved?: (paymentMethodId: string) => void;
     onPaymentMethodRemoved?: (paymentMethodId: string) => void;
     upgradingSubscriptionId?: string;
-    isInPreviewMode: boolean;
-    productId: string | undefined;
+    isInPreviewMode?: boolean;
+    productId?: string | undefined;
     className?: string;
     shadow?: "none" | "sm" | "md" | "lg";
     /**
      * If provided and the billing period is available, the billing period selector will default to this value.
      */
-    defaultBillingPeriod?: BillingPeriod;
+    defaultBillingPeriod?: "ONCE" | "MONTHLY" | "QUARTERLY" | "SEMI_ANNUAL" | "ANNUAL";
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default UpgradeWrapper;

package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/QuantityDrawer.d.ts

@@ -5,8 +5,7 @@ interface QuantityDrawerProps {
     quantityDrawerOpen: boolean;
     setQuantityDrawerOpen: (open: boolean) => void;
     handlePortalErrors?: (errors: any) => void;
-    setShowInactive: (showInactive: boolean) => void;
 }
-export declare const QuantityDrawerContent: ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }: QuantityDrawerProps) => import("react/jsx-runtime").JSX.Element;
-export declare const QuantityDrawer: ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }: QuantityDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuantityDrawerContent: ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, }: QuantityDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuantityDrawer: ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, }: QuantityDrawerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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.7.0-beta.39';
+const PACKAGE_VERSION = '1.7.0-beta.41';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -28711,7 +28711,7 @@ const useQuoteRecalculateTaxes$1 = () => {
     };
 };
 
-const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
+const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, }) => {
     const token = useToken();
     const queryClient = useQueryClient();
     const showSuccessNotification = useSuccessNotification();
@@ -28732,7 +28732,6 @@ const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityD
         invalidateSubscriptionsQueryKeys(queryClient, token);
         showSuccessNotification('Your plan has been updated', 'Payment successful');
         setPayModalVisible(false);
-        setShowInactive(true);
         setUpdatingChargeQuantityId(undefined);
     };
     const onCancel = () => {
@@ -28753,12 +28752,12 @@ const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityD
     };
     return (jsxs(Fragment, { children: [jsx(QuantityChangeDrawerDesktop, { onClose: handleDrawerClose, open: quantityDrawerOpen, openCheckout: handleOpenCheckout, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, onRecalculateTaxes: quoteRecalculateTaxesMutation, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: false, isRecalculatingTaxes: isRecalculatingTaxes })] }));
 };
-const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
+const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, }) => {
     const { quoteRecalculateTaxesMutation, isRecalculatingTaxes } = useQuoteRecalculateTaxes$1();
     return (jsx(QuoteIdProvider, { children: jsx(QuoteIsLoadingProvider, { children: jsx(QuoteRecalculateTaxesProvider, { value: {
                     quoteRecalculateTaxesMutation: (quoteId) => quoteRecalculateTaxesMutation({ quoteId }),
                     isRecalculatingTaxes,
-                }, children: jsx(QuantityDrawerContent, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setShowInactive: setShowInactive }) }) }) }));
+                }, children: jsx(QuantityDrawerContent, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors }) }) }) }));
 };
 
 // TODO: this query will be trimmed and cleaned up once we fully migrate to gql.tada codegen
@@ -29615,7 +29614,7 @@ const getSubscriptions = async ({ apiHost, isInPreviewMode, token, }) => {
 };
 
 const showInfoNotification = useInfoNotification();
-const UpgradeWrapper = ({ onChangePlanCancel, handlePortalErrors, onPaymentMethodSaved, onPaymentMethodRemoved, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow = 'md', defaultBillingPeriod, }) => {
+const UpgradeWrapper = ({ onChangePlanCancel, handlePortalErrors, onPaymentMethodSaved, onPaymentMethodRemoved, upgradingSubscriptionId, isInPreviewMode = false, productId, className, shadow = 'md', defaultBillingPeriod, }) => {
     var _a, _b, _c;
     // Context
     const token = useToken();
@@ -29680,11 +29679,11 @@ const UpgradeContent = ({ onChangePlanCancel, handlePortalErrors, subscriptions,
                     if (isInPreviewMode)
                         return showInfoNotification('You are in preview mode');
                     onClearQuote();
-                    onChangePlanCancel();
-                } }), jsx("div", { ref: stickyRef }), jsx("div", { className: `bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ${isSticky ? 'bunny-mx-4' : 'bunny-mx-0'}`, children: selectedPriceList && (jsx(PlanPickerCheckoutBar, { selectedPriceList: selectedPriceList, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: () => onChangePlanCancel() })) })] }));
+                    onChangePlanCancel === null || onChangePlanCancel === void 0 ? void 0 : onChangePlanCancel();
+                } }), jsx("div", { ref: stickyRef }), jsx("div", { className: `bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ${isSticky ? 'bunny-mx-4' : 'bunny-mx-0'}`, children: selectedPriceList && (jsx(PlanPickerCheckoutBar, { selectedPriceList: selectedPriceList, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: () => onChangePlanCancel === null || onChangePlanCancel === void 0 ? void 0 : onChangePlanCancel() })) })] }));
 };
 
-const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode = false, productId, className, styles: userStyles = {}, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle = true, onPaymentMethodSaved, onPaymentMethodRemoved, }) => {
+const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode = false, productId, className, styles: userStyles = {}, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle = true, onPaymentMethodSaved, onPaymentMethodRemoved, onSubscriptionUpgradeClick, }) => {
     var _a, _b;
     // Context
     const token = useToken();
@@ -29716,9 +29715,9 @@ const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode
             productId,
             isInPreviewMode,
             showInactiveSubscriptions,
-        }, children: jsx(UpgradingSubscriptionIdProvider, { children: jsx(OnPaymentMethodSavedProvider, { value: onPaymentMethodSaved, children: jsx(OnPaymentMethodRemovedProvider, { value: onPaymentMethodRemoved, children: jsx(Subscriptions, { subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, showInactiveSubscriptionsToggle: showInactiveSubscriptionsToggle }) }) }) }) }));
+        }, children: jsx(UpgradingSubscriptionIdProvider, { children: jsx(OnPaymentMethodSavedProvider, { value: onPaymentMethodSaved, children: jsx(OnPaymentMethodRemovedProvider, { value: onPaymentMethodRemoved, children: jsx(Subscriptions, { subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, showInactiveSubscriptionsToggle: showInactiveSubscriptionsToggle, onSubscriptionUpgradeClick: onSubscriptionUpgradeClick }) }) }) }) }));
 };
-const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoading, handlePortalErrors, companyName, noSubscriptionsComponent, showInactiveSubscriptionsToggle, }) => {
+const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoading, handlePortalErrors, companyName, noSubscriptionsComponent, showInactiveSubscriptionsToggle, onSubscriptionUpgradeClick, }) => {
     // Context
     const token = useToken();
     const { apiHost } = useContext(BunnyContext);
@@ -29752,6 +29751,7 @@ const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoa
     });
     // Handlers
     const onChangePlanClick = (subscriptionId) => {
+        onSubscriptionUpgradeClick === null || onSubscriptionUpgradeClick === void 0 ? void 0 : onSubscriptionUpgradeClick(subscriptionId);
         setUpgradingSubscriptionId(subscriptionId);
         setIsChangingPlan(true);
     };
@@ -29789,7 +29789,7 @@ const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoa
     }
     if (!subscriptions)
         return null;
-    return (jsx(UpgradingSubscriptionProvider, { value: upgradingSubscription, children: jsx(SubscriptionCancelProvider, { value: onCancelSubscriptionClick, children: jsx(ChangeUpgradingSubscriptionProvider, { value: onChangePlanClick, children: jsxs("div", { className: className, children: [jsx(PageHeaderWithActions, { title: jsx(Fragment, { children: isMobile && inactiveSwitchVisible && (jsx(ShowInactiveToggle, { showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState })) }), children: !isMobile && (jsx(SubscriptionsNavigation, { inactiveSwitchVisible: inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) }), jsx(SubscriptionsListContainer, { companyName: companyName, showInactive: showInactiveSubscriptions, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsx("div", { className: "bunny-pt-4 bunny-pb-2", children: jsx(SubscriptionsNavigation, { inactiveSwitchVisible: inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) })), jsx(QuantityDrawer, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setShowInactive: setShowInactiveSubscriptionsState })] }) }) }) }));
+    return (jsx(UpgradingSubscriptionProvider, { value: upgradingSubscription, children: jsx(SubscriptionCancelProvider, { value: onCancelSubscriptionClick, children: jsx(ChangeUpgradingSubscriptionProvider, { value: onChangePlanClick, children: jsxs("div", { className: className, children: [jsx(PageHeaderWithActions, { title: jsx(Fragment, { children: isMobile && inactiveSwitchVisible && (jsx(ShowInactiveToggle, { showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState })) }), children: !isMobile && (jsx(SubscriptionsNavigation, { inactiveSwitchVisible: inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) }), jsx(SubscriptionsListContainer, { companyName: companyName, showInactive: showInactiveSubscriptions, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsx("div", { className: "bunny-pt-4 bunny-pb-2", children: jsx(SubscriptionsNavigation, { inactiveSwitchVisible: inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) })), jsx(QuantityDrawer, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors })] }) }) }) }));
 };
 const PageHeaderWithActions = ({ children, title, }) => {
     const isMobile = useIsMobile();

package/dist/esm/types/src/components/Subscriptions/Subscriptions.d.ts

@@ -1,4 +1,4 @@
-declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, }: {
+declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, onSubscriptionUpgradeClick, }: {
     handlePortalErrors?: (errors: any) => void;
     companyName: string;
     isInPreviewMode?: boolean;
@@ -14,5 +14,6 @@ declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPrev
     showInactiveSubscriptionsToggle?: boolean;
     onPaymentMethodSaved?: (paymentMethodId: string) => void;
     onPaymentMethodRemoved?: (paymentMethodId: string) => void;
+    onSubscriptionUpgradeClick?: (subscriptionId: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionsWrapper;

package/dist/esm/types/src/components/Subscriptions/Upgrade/Upgrade.d.ts

@@ -1,17 +1,16 @@
-import { BillingPeriod } from '@/graphql-codegen/exportedScalarTypes';
 declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, onPaymentMethodSaved, onPaymentMethodRemoved, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow, defaultBillingPeriod, }: {
-    onChangePlanCancel: () => void;
+    onChangePlanCancel?: () => void;
     handlePortalErrors?: (error: any) => void;
     onPaymentMethodSaved?: (paymentMethodId: string) => void;
     onPaymentMethodRemoved?: (paymentMethodId: string) => void;
     upgradingSubscriptionId?: string;
-    isInPreviewMode: boolean;
-    productId: string | undefined;
+    isInPreviewMode?: boolean;
+    productId?: string | undefined;
     className?: string;
     shadow?: "none" | "sm" | "md" | "lg";
     /**
      * If provided and the billing period is available, the billing period selector will default to this value.
      */
-    defaultBillingPeriod?: BillingPeriod;
+    defaultBillingPeriod?: "ONCE" | "MONTHLY" | "QUARTERLY" | "SEMI_ANNUAL" | "ANNUAL";
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default UpgradeWrapper;

package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/QuantityDrawer.d.ts

@@ -5,8 +5,7 @@ interface QuantityDrawerProps {
     quantityDrawerOpen: boolean;
     setQuantityDrawerOpen: (open: boolean) => void;
     handlePortalErrors?: (errors: any) => void;
-    setShowInactive: (showInactive: boolean) => void;
 }
-export declare const QuantityDrawerContent: ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }: QuantityDrawerProps) => import("react/jsx-runtime").JSX.Element;
-export declare const QuantityDrawer: ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }: QuantityDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuantityDrawerContent: ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, }: QuantityDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuantityDrawer: ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, }: QuantityDrawerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -8,7 +8,6 @@ import Invoice$1 from '@/types/Invoice';
 import { QueryClient } from '@tanstack/react-query';
 import { ThemeConfig } from 'antd';
 import react from 'react';
-import { BillingPeriod } from '@/graphql-codegen/exportedScalarTypes';
 
 type ShadowType = "shadow-none" | "shadow-sm" | "shadow-md" | "shadow-lg" | "shadow-xl";
 
@@ -223,7 +222,7 @@ declare function Transactions({ transactionComponent, showSearchBar, showTitle,
     hidePaymentForm?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, }: {
+declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, onSubscriptionUpgradeClick, }: {
     handlePortalErrors?: (errors: any) => void;
     companyName: string;
     isInPreviewMode?: boolean;
@@ -239,22 +238,23 @@ declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPrev
     showInactiveSubscriptionsToggle?: boolean;
     onPaymentMethodSaved?: (paymentMethodId: string) => void;
     onPaymentMethodRemoved?: (paymentMethodId: string) => void;
+    onSubscriptionUpgradeClick?: (subscriptionId: string) => void;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, onPaymentMethodSaved, onPaymentMethodRemoved, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow, defaultBillingPeriod, }: {
-    onChangePlanCancel: () => void;
+    onChangePlanCancel?: () => void;
     handlePortalErrors?: (error: any) => void;
     onPaymentMethodSaved?: (paymentMethodId: string) => void;
     onPaymentMethodRemoved?: (paymentMethodId: string) => void;
     upgradingSubscriptionId?: string;
-    isInPreviewMode: boolean;
-    productId: string | undefined;
+    isInPreviewMode?: boolean;
+    productId?: string | undefined;
     className?: string;
     shadow?: "none" | "sm" | "md" | "lg";
     /**
      * If provided and the billing period is available, the billing period selector will default to this value.
      */
-    defaultBillingPeriod?: BillingPeriod;
+    defaultBillingPeriod?: "ONCE" | "MONTHLY" | "QUARTERLY" | "SEMI_ANNUAL" | "ANNUAL";
 }) => react_jsx_runtime.JSX.Element | null;
 
 declare const BillingDetails: ({ className, countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isCardEnabled, isUpgradeFromTrial, shadow, onSavePaymentMethod, onPaymentMethodRemoved, }: {

package/package.json

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