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

package/dist/cjs/index.js

@@ -1280,7 +1280,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.7.0-beta.14';
+const PACKAGE_VERSION = '1.7.0-beta.15';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -24512,6 +24512,198 @@ const hasPriceTiers = (charge) => {
     var _a;
     return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
 };
+const splitSubscriptionsByPriceList_SubscriptionFragment = t(`
+    fragment splitSubscriptionsByPriceList_SubscriptionFragment on Subscription {
+      id
+      state
+      evergreen
+      startDate
+      endDate
+      chargeReport {
+        kind
+        startDate
+        endDate
+        priceList {
+          id
+          plan {
+            id
+            name
+            selfServiceBuy
+            selfServiceCancel
+            selfServiceRenew
+            addon
+            addonPlans {
+              id
+            }
+          }
+          product {
+            id
+            name
+            showProductNameOnLineItem
+          }
+          periodMonths
+          name
+        }
+      }
+      charges {
+        priceList {
+          id
+        }
+      }
+    }
+  `, []);
+// Helper to safely get date as string
+const getDateString = (date) => {
+    return date;
+};
+/**
+ * Splits a subscription into multiple subscriptions if it has RENEW charges
+ * with different price lists.
+ * This handles cases where a subscription has been changed to a different plan/price list.
+ * Each resulting subscription is a complete duplicate with just the charges filtered.
+ */
+function splitSubscriptionsByPriceList(maskedSubscriptions) {
+    const result = [];
+    maskedSubscriptions.forEach(maskedSubscription => {
+        var _a;
+        // Read the fragment to get typed data
+        const subscription = readFragment(splitSubscriptionsByPriceList_SubscriptionFragment, maskedSubscription);
+        // Skip if no chargeReport
+        if (!subscription.chargeReport) {
+            result.push(maskedSubscription);
+            return;
+        }
+        // Group chargeReport by priceListId
+        const chargesByPriceList = new Map();
+        subscription.chargeReport.forEach(charge => {
+            var _a;
+            const priceListId = (_a = charge.priceList) === null || _a === void 0 ? void 0 : _a.id;
+            if (!priceListId)
+                return;
+            if (!chargesByPriceList.has(priceListId)) {
+                chargesByPriceList.set(priceListId, []);
+            }
+            chargesByPriceList.get(priceListId).push(charge);
+        });
+        // Check if there are RENEW charges with different price lists
+        const hasRenewChargesWithDifferentPriceLists = chargesByPriceList.size > 1 &&
+            subscription.chargeReport.some(charge => charge.kind === 'RENEW');
+        // If all charges have the same priceListId or no RENEW charges, keep subscription as-is
+        if (!hasRenewChargesWithDifferentPriceLists) {
+            result.push(maskedSubscription);
+        }
+        else {
+            // Find the charge with the latest endDate to determine which subscription will actually renew
+            const latestCharge = subscription.chargeReport.reduce((latest, current) => {
+                if (!latest)
+                    return current;
+                // Compare endDates, and if equal, compare startDates
+                const currentEnd = getDateString(current.endDate);
+                const latestEnd = getDateString(latest.endDate);
+                const currentStart = getDateString(current.startDate);
+                const latestStart = getDateString(latest.startDate);
+                if (currentEnd > latestEnd)
+                    return current;
+                if (currentEnd === latestEnd && currentStart > latestStart)
+                    return current;
+                return latest;
+            }, subscription.chargeReport[0]);
+            const latestPriceListId = (_a = latestCharge.priceList) === null || _a === void 0 ? void 0 : _a.id;
+            if (!latestPriceListId) {
+                result.push(maskedSubscription);
+                return;
+            }
+            // Split into multiple subscriptions, one per price list
+            // DUPLICATE the entire subscription, just filter the charges
+            const splitSubscriptions = [];
+            chargesByPriceList.forEach((charges, priceListId) => {
+                var _a, _b;
+                // Get the first charge to extract priceList, plan, and product info
+                const firstCharge = charges === null || charges === void 0 ? void 0 : charges[0];
+                if (!firstCharge || !charges)
+                    return;
+                // Find the latest endDate from the charges in this group
+                const latestEndDate = charges.reduce((latest, current) => {
+                    const currentEnd = getDateString(current.endDate);
+                    if (!latest)
+                        return currentEnd;
+                    return currentEnd > latest ? currentEnd : latest;
+                }, getDateString(charges[0].endDate));
+                // Find the earliest startDate from the charges in this group
+                const earliestStartDate = charges.reduce((earliest, current) => {
+                    const currentStart = getDateString(current.startDate);
+                    if (!earliest)
+                        return currentStart;
+                    return currentStart < earliest ? currentStart : earliest;
+                }, getDateString(charges[0].startDate));
+                // Determine the state based on the date range of charges
+                const now = new Date().toISOString().split('T')[0]; // Get current date in YYYY-MM-DD format
+                let state = subscription.state;
+                // If the latest endDate is before today, it's expired
+                if (latestEndDate < now) {
+                    state = t.scalar('SubscriptionState', 'EXPIRED');
+                }
+                // If the earliest startDate is after today, it's pending
+                else if (earliestStartDate > now) {
+                    state = t.scalar('SubscriptionState', 'PENDING');
+                }
+                // Otherwise, if current date is within the range, keep it active
+                else if (earliestStartDate <= now && latestEndDate >= now) {
+                    state = t.scalar('SubscriptionState', 'ACTIVE');
+                }
+                // Only the subscription with the latest charge will actually renew
+                const willRenew = priceListId === latestPriceListId;
+                splitSubscriptions.push({
+                    ...maskedSubscription,
+                    // Keep the original subscription ID intact (from maskedSubscription spread)
+                    // Update priceList from the charge
+                    priceList: firstCharge.priceList,
+                    // Update plan from the charge's priceList.plan
+                    plan: firstCharge.priceList.plan,
+                    // Update product from the charge's priceList.product
+                    product: firstCharge.priceList.product,
+                    // Update endDate to match the latest charge endDate in this group
+                    endDate: latestEndDate,
+                    // Update startDate to match the earliest charge startDate in this group
+                    startDate: earliestStartDate,
+                    // Update state based on the charge dates
+                    state,
+                    // Set evergreen to false for subscriptions that won't renew (will transition instead)
+                    evergreen: willRenew ? subscription.evergreen : false,
+                    // Filter chargeReport to only include charges for this price list
+                    chargeReport: charges,
+                    // Filter charges array to only include charges for this price list
+                    charges: (_b = (_a = subscription.charges) === null || _a === void 0 ? void 0 : _a.filter(charge => {
+                        var _a;
+                        const chargeWithPriceList = charge;
+                        return ((_a = chargeWithPriceList.priceList) === null || _a === void 0 ? void 0 : _a.id) === priceListId;
+                    })) !== null && _b !== void 0 ? _b : [],
+                });
+            });
+            // Sort split subscriptions by endDate (earliest first)
+            splitSubscriptions.sort((a, b) => {
+                const aData = readFragment(splitSubscriptionsByPriceList_SubscriptionFragment, a);
+                const bData = readFragment(splitSubscriptionsByPriceList_SubscriptionFragment, b);
+                const aEnd = getDateString(aData.endDate);
+                const bEnd = getDateString(bData.endDate);
+                const aStart = getDateString(aData.startDate);
+                const bStart = getDateString(bData.startDate);
+                if (aEnd < bEnd)
+                    return -1;
+                if (aEnd > bEnd)
+                    return 1;
+                // If endDates are equal, sort by startDate
+                if (aStart < bStart)
+                    return -1;
+                if (aStart > bStart)
+                    return 1;
+                return 0;
+            });
+            result.push(...splitSubscriptions);
+        }
+    });
+    return result;
+}
 
 const SubscriptionCardActions_PriceListChangeOptionsFragment = t(`
   fragment SubscriptionCardActions_PriceListChangeOptionsFragment on PriceListChangeOptions {
@@ -25413,12 +25605,14 @@ const SubscriptionsList_SubscriptionFragment = t(`
     fragment SubscriptionsList_SubscriptionFragment on Subscription {
       id
       state
+      ...splitSubscriptionsByPriceList_SubscriptionFragment
       ...findNonAddonSubscriptions_SubscriptionFragment
       ...SubscriptionCardDesktop_SubscriptionFragment
       ...SubscriptionCardMobile_SubscriptionFragment
       ...AddonSubscriptionsCards_SubscriptionFragment
     }
   `, [
+    splitSubscriptionsByPriceList_SubscriptionFragment,
     findNonAddonSubscriptions_SubscriptionFragment,
     SubscriptionCardDesktop_SubscriptionFragment,
     SubscriptionCardMobile_SubscriptionFragment,
@@ -25429,15 +25623,17 @@ const SubscriptionsList = ({ showInactive, subscriptions: maskedSubscriptions, }
     const { gap } = useSubscriptionProps();
     // Read fragments
     const subscriptions = maskedSubscriptions.map(maskedSubscription => readFragment(SubscriptionsList_SubscriptionFragment, maskedSubscription));
+    // Split subscriptions by price list
+    const splitSubscriptions = splitSubscriptionsByPriceList(subscriptions);
     // Hooks
     const isMobile = useIsMobile();
-    const nonAddonSubscriptions = findNonAddonSubscriptions(subscriptions);
+    const nonAddonSubscriptions = findNonAddonSubscriptions(splitSubscriptions);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: nonAddonSubscriptions === null || nonAddonSubscriptions === void 0 ? void 0 : nonAddonSubscriptions.map((subscription, subscriptionIndex) => {
             if (!showInactive && isSubscriptionNotActive(subscription.state))
                 return null;
             if (isMobile)
-                return (jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsxRuntime.jsx(SubscriptionCard, { subscription: subscription }), jsxRuntime.jsx(AddonSubscriptionsCards, { subscription: subscription, subscriptions: subscriptions, showInactive: showInactive })] }, subscriptionIndex));
-            return (jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsxRuntime.jsx(SubscriptionCardDesktop, { subscription: subscription }), jsxRuntime.jsx(AddonSubscriptionsCards, { subscription: subscription, subscriptions: subscriptions, showInactive: showInactive })] }, subscriptionIndex));
+                return (jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsxRuntime.jsx(SubscriptionCard, { subscription: subscription }), jsxRuntime.jsx(AddonSubscriptionsCards, { subscription: subscription, subscriptions: splitSubscriptions, showInactive: showInactive })] }, subscriptionIndex));
+            return (jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsxRuntime.jsx(SubscriptionCardDesktop, { subscription: subscription }), jsxRuntime.jsx(AddonSubscriptionsCards, { subscription: subscription, subscriptions: splitSubscriptions, showInactive: showInactive })] }, subscriptionIndex));
         }) }));
 };
 

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

@@ -3,6 +3,8 @@ export declare const SubscriptionsList_SubscriptionFragment: import("gql.tada").
     id: string;
     state: "ACTIVE" | "TRIAL" | "CANCELED" | "EXPIRED" | "TRIAL_EXPIRED" | "PENDING";
     [$tada.fragmentRefs]: {
+        splitSubscriptionsByPriceList_SubscriptionFragment: "Subscription";
+    } & {
         findNonAddonSubscriptions_SubscriptionFragment: "Subscription";
     } & {
         SubscriptionCardDesktop_SubscriptionFragment: "Subscription";

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

@@ -3,6 +3,7 @@ import { Plan } from '@/types/Plan';
 import Product from '@/types/Product';
 import Subscription from '@/types/Subscription';
 import { SubscriptionCharge } from '@/types/SubscriptionCharge';
+import { FragmentOf } from 'gql.tada';
 export declare const isSubscriptionNotActive: (subscriptionState: SubscriptionState) => boolean;
 export declare const productPlanName: ({ plan, product }: {
     plan: Plan;
@@ -16,3 +17,52 @@ export declare const hasPriceTiers: (charge: {
     priceTiers: {}[] | null;
 }) => boolean;
 export declare const getUpdatingChargeQuantityId: (charge: SubscriptionCharge, subscription: Subscription) => string;
+export declare const splitSubscriptionsByPriceList_SubscriptionFragment: import("gql.tada").TadaDocumentNode<{
+    id: string;
+    state: "ACTIVE" | "TRIAL" | "CANCELED" | "EXPIRED" | "TRIAL_EXPIRED" | "PENDING";
+    evergreen: boolean;
+    startDate: unknown;
+    endDate: unknown;
+    chargeReport: {
+        kind: "SUBSCRIBE" | "UPDATE" | "RENEW" | "REINSTATE" | "UNSUBSCRIBE" | "ADJUSTMENT" | "COUPON" | "DISCOUNT" | "CREDIT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "FREE_PERIOD_DISCOUNT" | "ACTIVATE" | null;
+        startDate: unknown;
+        endDate: unknown;
+        priceList: {
+            id: string;
+            plan: {
+                id: string;
+                name: string;
+                selfServiceBuy: boolean | null;
+                selfServiceCancel: boolean | null;
+                selfServiceRenew: boolean | null;
+                addon: boolean | null;
+                addonPlans: {
+                    id: string;
+                }[] | null;
+            } | null;
+            product: {
+                id: string;
+                name: string;
+                showProductNameOnLineItem: boolean | null;
+            } | null;
+            periodMonths: number | null;
+            name: string;
+        } | null;
+    }[] | null;
+    charges: {
+        priceList: {
+            id: string;
+        } | null;
+    }[] | null;
+}, {}, {
+    fragment: "splitSubscriptionsByPriceList_SubscriptionFragment";
+    on: "Subscription";
+    masked: true;
+}>;
+/**
+ * Splits a subscription into multiple subscriptions if it has RENEW charges
+ * with different price lists.
+ * This handles cases where a subscription has been changed to a different plan/price list.
+ * Each resulting subscription is a complete duplicate with just the charges filtered.
+ */
+export declare function splitSubscriptionsByPriceList<T extends FragmentOf<typeof splitSubscriptionsByPriceList_SubscriptionFragment>>(maskedSubscriptions: T[]): T[];

package/dist/esm/index.js

@@ -1278,7 +1278,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.7.0-beta.14';
+const PACKAGE_VERSION = '1.7.0-beta.15';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -24510,6 +24510,198 @@ const hasPriceTiers = (charge) => {
     var _a;
     return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
 };
+const splitSubscriptionsByPriceList_SubscriptionFragment = t(`
+    fragment splitSubscriptionsByPriceList_SubscriptionFragment on Subscription {
+      id
+      state
+      evergreen
+      startDate
+      endDate
+      chargeReport {
+        kind
+        startDate
+        endDate
+        priceList {
+          id
+          plan {
+            id
+            name
+            selfServiceBuy
+            selfServiceCancel
+            selfServiceRenew
+            addon
+            addonPlans {
+              id
+            }
+          }
+          product {
+            id
+            name
+            showProductNameOnLineItem
+          }
+          periodMonths
+          name
+        }
+      }
+      charges {
+        priceList {
+          id
+        }
+      }
+    }
+  `, []);
+// Helper to safely get date as string
+const getDateString = (date) => {
+    return date;
+};
+/**
+ * Splits a subscription into multiple subscriptions if it has RENEW charges
+ * with different price lists.
+ * This handles cases where a subscription has been changed to a different plan/price list.
+ * Each resulting subscription is a complete duplicate with just the charges filtered.
+ */
+function splitSubscriptionsByPriceList(maskedSubscriptions) {
+    const result = [];
+    maskedSubscriptions.forEach(maskedSubscription => {
+        var _a;
+        // Read the fragment to get typed data
+        const subscription = readFragment(splitSubscriptionsByPriceList_SubscriptionFragment, maskedSubscription);
+        // Skip if no chargeReport
+        if (!subscription.chargeReport) {
+            result.push(maskedSubscription);
+            return;
+        }
+        // Group chargeReport by priceListId
+        const chargesByPriceList = new Map();
+        subscription.chargeReport.forEach(charge => {
+            var _a;
+            const priceListId = (_a = charge.priceList) === null || _a === void 0 ? void 0 : _a.id;
+            if (!priceListId)
+                return;
+            if (!chargesByPriceList.has(priceListId)) {
+                chargesByPriceList.set(priceListId, []);
+            }
+            chargesByPriceList.get(priceListId).push(charge);
+        });
+        // Check if there are RENEW charges with different price lists
+        const hasRenewChargesWithDifferentPriceLists = chargesByPriceList.size > 1 &&
+            subscription.chargeReport.some(charge => charge.kind === 'RENEW');
+        // If all charges have the same priceListId or no RENEW charges, keep subscription as-is
+        if (!hasRenewChargesWithDifferentPriceLists) {
+            result.push(maskedSubscription);
+        }
+        else {
+            // Find the charge with the latest endDate to determine which subscription will actually renew
+            const latestCharge = subscription.chargeReport.reduce((latest, current) => {
+                if (!latest)
+                    return current;
+                // Compare endDates, and if equal, compare startDates
+                const currentEnd = getDateString(current.endDate);
+                const latestEnd = getDateString(latest.endDate);
+                const currentStart = getDateString(current.startDate);
+                const latestStart = getDateString(latest.startDate);
+                if (currentEnd > latestEnd)
+                    return current;
+                if (currentEnd === latestEnd && currentStart > latestStart)
+                    return current;
+                return latest;
+            }, subscription.chargeReport[0]);
+            const latestPriceListId = (_a = latestCharge.priceList) === null || _a === void 0 ? void 0 : _a.id;
+            if (!latestPriceListId) {
+                result.push(maskedSubscription);
+                return;
+            }
+            // Split into multiple subscriptions, one per price list
+            // DUPLICATE the entire subscription, just filter the charges
+            const splitSubscriptions = [];
+            chargesByPriceList.forEach((charges, priceListId) => {
+                var _a, _b;
+                // Get the first charge to extract priceList, plan, and product info
+                const firstCharge = charges === null || charges === void 0 ? void 0 : charges[0];
+                if (!firstCharge || !charges)
+                    return;
+                // Find the latest endDate from the charges in this group
+                const latestEndDate = charges.reduce((latest, current) => {
+                    const currentEnd = getDateString(current.endDate);
+                    if (!latest)
+                        return currentEnd;
+                    return currentEnd > latest ? currentEnd : latest;
+                }, getDateString(charges[0].endDate));
+                // Find the earliest startDate from the charges in this group
+                const earliestStartDate = charges.reduce((earliest, current) => {
+                    const currentStart = getDateString(current.startDate);
+                    if (!earliest)
+                        return currentStart;
+                    return currentStart < earliest ? currentStart : earliest;
+                }, getDateString(charges[0].startDate));
+                // Determine the state based on the date range of charges
+                const now = new Date().toISOString().split('T')[0]; // Get current date in YYYY-MM-DD format
+                let state = subscription.state;
+                // If the latest endDate is before today, it's expired
+                if (latestEndDate < now) {
+                    state = t.scalar('SubscriptionState', 'EXPIRED');
+                }
+                // If the earliest startDate is after today, it's pending
+                else if (earliestStartDate > now) {
+                    state = t.scalar('SubscriptionState', 'PENDING');
+                }
+                // Otherwise, if current date is within the range, keep it active
+                else if (earliestStartDate <= now && latestEndDate >= now) {
+                    state = t.scalar('SubscriptionState', 'ACTIVE');
+                }
+                // Only the subscription with the latest charge will actually renew
+                const willRenew = priceListId === latestPriceListId;
+                splitSubscriptions.push({
+                    ...maskedSubscription,
+                    // Keep the original subscription ID intact (from maskedSubscription spread)
+                    // Update priceList from the charge
+                    priceList: firstCharge.priceList,
+                    // Update plan from the charge's priceList.plan
+                    plan: firstCharge.priceList.plan,
+                    // Update product from the charge's priceList.product
+                    product: firstCharge.priceList.product,
+                    // Update endDate to match the latest charge endDate in this group
+                    endDate: latestEndDate,
+                    // Update startDate to match the earliest charge startDate in this group
+                    startDate: earliestStartDate,
+                    // Update state based on the charge dates
+                    state,
+                    // Set evergreen to false for subscriptions that won't renew (will transition instead)
+                    evergreen: willRenew ? subscription.evergreen : false,
+                    // Filter chargeReport to only include charges for this price list
+                    chargeReport: charges,
+                    // Filter charges array to only include charges for this price list
+                    charges: (_b = (_a = subscription.charges) === null || _a === void 0 ? void 0 : _a.filter(charge => {
+                        var _a;
+                        const chargeWithPriceList = charge;
+                        return ((_a = chargeWithPriceList.priceList) === null || _a === void 0 ? void 0 : _a.id) === priceListId;
+                    })) !== null && _b !== void 0 ? _b : [],
+                });
+            });
+            // Sort split subscriptions by endDate (earliest first)
+            splitSubscriptions.sort((a, b) => {
+                const aData = readFragment(splitSubscriptionsByPriceList_SubscriptionFragment, a);
+                const bData = readFragment(splitSubscriptionsByPriceList_SubscriptionFragment, b);
+                const aEnd = getDateString(aData.endDate);
+                const bEnd = getDateString(bData.endDate);
+                const aStart = getDateString(aData.startDate);
+                const bStart = getDateString(bData.startDate);
+                if (aEnd < bEnd)
+                    return -1;
+                if (aEnd > bEnd)
+                    return 1;
+                // If endDates are equal, sort by startDate
+                if (aStart < bStart)
+                    return -1;
+                if (aStart > bStart)
+                    return 1;
+                return 0;
+            });
+            result.push(...splitSubscriptions);
+        }
+    });
+    return result;
+}
 
 const SubscriptionCardActions_PriceListChangeOptionsFragment = t(`
   fragment SubscriptionCardActions_PriceListChangeOptionsFragment on PriceListChangeOptions {
@@ -25411,12 +25603,14 @@ const SubscriptionsList_SubscriptionFragment = t(`
     fragment SubscriptionsList_SubscriptionFragment on Subscription {
       id
       state
+      ...splitSubscriptionsByPriceList_SubscriptionFragment
       ...findNonAddonSubscriptions_SubscriptionFragment
       ...SubscriptionCardDesktop_SubscriptionFragment
       ...SubscriptionCardMobile_SubscriptionFragment
       ...AddonSubscriptionsCards_SubscriptionFragment
     }
   `, [
+    splitSubscriptionsByPriceList_SubscriptionFragment,
     findNonAddonSubscriptions_SubscriptionFragment,
     SubscriptionCardDesktop_SubscriptionFragment,
     SubscriptionCardMobile_SubscriptionFragment,
@@ -25427,15 +25621,17 @@ const SubscriptionsList = ({ showInactive, subscriptions: maskedSubscriptions, }
     const { gap } = useSubscriptionProps();
     // Read fragments
     const subscriptions = maskedSubscriptions.map(maskedSubscription => readFragment(SubscriptionsList_SubscriptionFragment, maskedSubscription));
+    // Split subscriptions by price list
+    const splitSubscriptions = splitSubscriptionsByPriceList(subscriptions);
     // Hooks
     const isMobile = useIsMobile();
-    const nonAddonSubscriptions = findNonAddonSubscriptions(subscriptions);
+    const nonAddonSubscriptions = findNonAddonSubscriptions(splitSubscriptions);
     return (jsx(Fragment, { children: nonAddonSubscriptions === null || nonAddonSubscriptions === void 0 ? void 0 : nonAddonSubscriptions.map((subscription, subscriptionIndex) => {
             if (!showInactive && isSubscriptionNotActive(subscription.state))
                 return null;
             if (isMobile)
-                return (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsx(SubscriptionCard, { subscription: subscription }), jsx(AddonSubscriptionsCards, { subscription: subscription, subscriptions: subscriptions, showInactive: showInactive })] }, subscriptionIndex));
-            return (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsx(SubscriptionCardDesktop, { subscription: subscription }), jsx(AddonSubscriptionsCards, { subscription: subscription, subscriptions: subscriptions, showInactive: showInactive })] }, subscriptionIndex));
+                return (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsx(SubscriptionCard, { subscription: subscription }), jsx(AddonSubscriptionsCards, { subscription: subscription, subscriptions: splitSubscriptions, showInactive: showInactive })] }, subscriptionIndex));
+            return (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsx(SubscriptionCardDesktop, { subscription: subscription }), jsx(AddonSubscriptionsCards, { subscription: subscription, subscriptions: splitSubscriptions, showInactive: showInactive })] }, subscriptionIndex));
         }) }));
 };
 

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

@@ -3,6 +3,8 @@ export declare const SubscriptionsList_SubscriptionFragment: import("gql.tada").
     id: string;
     state: "ACTIVE" | "TRIAL" | "CANCELED" | "EXPIRED" | "TRIAL_EXPIRED" | "PENDING";
     [$tada.fragmentRefs]: {
+        splitSubscriptionsByPriceList_SubscriptionFragment: "Subscription";
+    } & {
         findNonAddonSubscriptions_SubscriptionFragment: "Subscription";
     } & {
         SubscriptionCardDesktop_SubscriptionFragment: "Subscription";

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

@@ -3,6 +3,7 @@ import { Plan } from '@/types/Plan';
 import Product from '@/types/Product';
 import Subscription from '@/types/Subscription';
 import { SubscriptionCharge } from '@/types/SubscriptionCharge';
+import { FragmentOf } from 'gql.tada';
 export declare const isSubscriptionNotActive: (subscriptionState: SubscriptionState) => boolean;
 export declare const productPlanName: ({ plan, product }: {
     plan: Plan;
@@ -16,3 +17,52 @@ export declare const hasPriceTiers: (charge: {
     priceTiers: {}[] | null;
 }) => boolean;
 export declare const getUpdatingChargeQuantityId: (charge: SubscriptionCharge, subscription: Subscription) => string;
+export declare const splitSubscriptionsByPriceList_SubscriptionFragment: import("gql.tada").TadaDocumentNode<{
+    id: string;
+    state: "ACTIVE" | "TRIAL" | "CANCELED" | "EXPIRED" | "TRIAL_EXPIRED" | "PENDING";
+    evergreen: boolean;
+    startDate: unknown;
+    endDate: unknown;
+    chargeReport: {
+        kind: "SUBSCRIBE" | "UPDATE" | "RENEW" | "REINSTATE" | "UNSUBSCRIBE" | "ADJUSTMENT" | "COUPON" | "DISCOUNT" | "CREDIT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "FREE_PERIOD_DISCOUNT" | "ACTIVATE" | null;
+        startDate: unknown;
+        endDate: unknown;
+        priceList: {
+            id: string;
+            plan: {
+                id: string;
+                name: string;
+                selfServiceBuy: boolean | null;
+                selfServiceCancel: boolean | null;
+                selfServiceRenew: boolean | null;
+                addon: boolean | null;
+                addonPlans: {
+                    id: string;
+                }[] | null;
+            } | null;
+            product: {
+                id: string;
+                name: string;
+                showProductNameOnLineItem: boolean | null;
+            } | null;
+            periodMonths: number | null;
+            name: string;
+        } | null;
+    }[] | null;
+    charges: {
+        priceList: {
+            id: string;
+        } | null;
+    }[] | null;
+}, {}, {
+    fragment: "splitSubscriptionsByPriceList_SubscriptionFragment";
+    on: "Subscription";
+    masked: true;
+}>;
+/**
+ * Splits a subscription into multiple subscriptions if it has RENEW charges
+ * with different price lists.
+ * This handles cases where a subscription has been changed to a different plan/price list.
+ * Each resulting subscription is a complete duplicate with just the charges filtered.
+ */
+export declare function splitSubscriptionsByPriceList<T extends FragmentOf<typeof splitSubscriptionsByPriceList_SubscriptionFragment>>(maskedSubscriptions: T[]): T[];

package/package.json

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