@bunnyapp/components 1.6.0-beta.9.3 → 1.6.0-beta.9.4

package/dist/cjs/index.js

@@ -52,7 +52,7 @@ var css_248z = ":root {\n  --row-background: #ffffff;\n  --row-background-altern
 styleInject(css_248z);
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.6.0-beta.9.2';
+const PACKAGE_VERSION = '1.6.0-beta.9.4';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -22919,7 +22919,7 @@ const isSubscriptionActiveOrPending = (subscription) => {
 const isSubscriptionTrial = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL; };
 const isSubscriptionTrialExpired = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL_EXPIRED; };
 // Helper function to check if charge is a discount
-const isDiscount = (kind) => kind === common.QuoteChangeKind.DISCOUNT || kind === common.QuoteChangeKind.FREE_PERIOD_DISCOUNT;
+const isDiscount$1 = (kind) => kind === common.QuoteChangeKind.DISCOUNT || kind === common.QuoteChangeKind.FREE_PERIOD_DISCOUNT;
 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);
@@ -23068,10 +23068,9 @@ var BillingPeriodConverter;
 })(BillingPeriodConverter || (BillingPeriodConverter = {}));
 var BillingPeriodConverter$1 = BillingPeriodConverter;
 
-const SubscriptionChargeTotal = ({ charge, subscription, }) => {
+const SubscriptionChargeTotal = ({ charge, currencyId, }) => {
     const billingPeriod = charge.billingPeriod && BillingPeriodConverter$1[charge.billingPeriod];
     const isMobile = common.useIsMobile();
-    const { currencyId } = subscription;
     const formattedDiscountedPrice = common.formatCurrency(charge.price, currencyId);
     const formattedPeriodPrice = common.formatCurrency(charge.periodPrice, currencyId);
     return (jsxRuntime.jsx("div", { className: `bunny-flex bunny-gap-1 ${isMobile ? 'bunny-flex-col' : ''}`, children: charge.chargeType === common.ChargeType.USAGE || charge.trial
@@ -23137,7 +23136,7 @@ const SubscriptionChargeUnitPrice = ({ charge, currencyId, }) => {
     const price = charge.trial
         ? '-'
         : common.formatCurrency(charge.discountedPrice, currencyId, charge.priceDecimals);
-    const isChargeDiscount = isDiscount(charge.kind);
+    const isChargeDiscount = isDiscount$1(charge.kind);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasPriceTiers(charge) ? (jsxRuntime.jsx(TieredDisplayDropdown, { charge: charge, currencyId: currencyId, truncatedText: `${charge.kind === common.QuoteChangeKind.PRICE_UPDATE ? 'new ' : ''}${getApplicablePriceTier(charge, currencyId, charge.priceDecimals)}` })) : isChargeDiscount ? (`-${price}`) : (price) }));
 };
 
@@ -23156,6 +23155,37 @@ const SubscriptionsListCell = ({ children, className, gridColumn, right, style,
         }, children: children }));
 };
 
+// Helper function to check if charge is a discount
+const isDiscount = (kind) => kind === common.QuoteChangeKind.DISCOUNT;
+const sortSubscriptionCharges = (charges) => {
+    // Make a copy of charges array and sort them by specific criteria
+    const orderedCharges = [...charges].sort((a, b) => {
+        // First group by priceListChargeId to keep related charges together
+        if (a.priceListChargeId !== b.priceListChargeId) {
+            return a.priceListChargeId.localeCompare(b.priceListChargeId);
+        }
+        // Move discount charges to the end within each priceList group
+        if (isDiscount(a.kind) && !isDiscount(b.kind)) {
+            return 1;
+        }
+        if (!isDiscount(a.kind) && isDiscount(b.kind)) {
+            return -1;
+        }
+        // Then sort by end date, start date, and finally show amendments last
+        return (a.endDate.localeCompare(b.endDate) ||
+            a.startDate.localeCompare(b.startDate) ||
+            (a.isAmendment ? 1 : -1));
+    });
+    return orderedCharges;
+};
+
+const filterSubscriptionCharges = (charges) => {
+    return charges.filter(charge => {
+        const isEndDateBeforeCurrentDate = dayjs(charge.endDate).isBefore(dayjs(), 'day');
+        return !isEndDateBeforeCurrentDate;
+    });
+};
+
 const NON_ADDON_CARD_COLUMNS = [
     {
         title: 'Charge',
@@ -23210,6 +23240,7 @@ const SubscriptionCardDesktop = ({ onChangePlanClick, onCancelSubscriptionClick,
     var _a;
     const { shadow } = react.useContext(SubscriptionsContext);
     const CARD_COLUMNS = isAddon ? ADDON_CARD_COLUMNS : NON_ADDON_CARD_COLUMNS;
+    const charges = sortSubscriptionCharges(filterSubscriptionCharges((_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) !== null && _a !== void 0 ? _a : []));
     return (jsxRuntime.jsxs(Card, { className: `bunny-p-4 ${shadow ? `shadow-${shadow}` : ''}`, children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
                     gridColumn: '1 / 5',
                     width: 'calc(100% + 32px)',
@@ -23217,15 +23248,15 @@ const SubscriptionCardDesktop = ({ onChangePlanClick, onCancelSubscriptionClick,
                 } }), jsxRuntime.jsxs("div", { className: "bunny-grid bunny-w-full", style: {
                     gridTemplateColumns: CARD_COLUMNS.map(column => column.width).join(' '),
                     rowGap: '0.75rem',
-                }, children: [jsxRuntime.jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), (_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _a === void 0 ? void 0 : _a.map((charge, chargeIndex) => {
-                        return (jsxRuntime.jsx(SubscriptionCardDesktopRow, { charge: charge, chargeIndex: chargeIndex, subscription: subscription }, chargeIndex));
+                }, children: [jsxRuntime.jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), charges.map((charge, chargeIndex) => {
+                        return (jsxRuntime.jsx(SubscriptionCardDesktopRow, { charge: charge, chargeIndex: chargeIndex, charges: charges, currencyId: subscription.currencyId }, chargeIndex));
                     })] })] }));
 };
-const SubscriptionCardDesktopRow = ({ charge, chargeIndex, subscription, }) => {
-    var _a, _b, _c;
+const SubscriptionCardDesktopRow = ({ charge, chargeIndex, charges, currencyId, }) => {
+    var _a, _b;
     // Derived state
     const { isRamp } = charge;
-    const prevCharge = (_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _a === void 0 ? void 0 : _a[chargeIndex - 1];
+    const prevCharge = charges === null || charges === void 0 ? void 0 : charges[chargeIndex - 1];
     const chargePeriod = `${common.formatDate(charge.startDate)} - ${common.formatDate(charge.endDate)}`;
     const isRampFirstRow = isRamp && chargeIndex === 0;
     const isTrial = charge.trial;
@@ -23234,13 +23265,13 @@ const SubscriptionCardDesktopRow = ({ charge, chargeIndex, subscription, }) => {
         !isDiscount &&
         (!isTrial || (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.trial)) &&
         (isTrial || !(prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.trial));
-    return (jsxRuntime.jsxs("div", { className: "bunny-contents", children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, { gridColumn: isRamp ? '1/-1' : '1', children: jsxRuntime.jsx("div", { className: `bunny-flex bunny-items-center bunny-gap-2 ${isDiscount ? 'bunny-pl-4' : ''}`, children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : '' }) }) })), jsxRuntime.jsx(SubscriptionsListCell, { gridColumn: 2, children: jsxRuntime.jsx("div", { children: chargePeriod }) }), jsxRuntime.jsx(SubscriptionsListCell, { right: true, children: charge.kind === common.QuoteChangeKind.DISCOUNT
+    return (jsxRuntime.jsxs("div", { className: "bunny-contents", children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, { gridColumn: isRamp ? '1/-1' : '1', children: jsxRuntime.jsx("div", { className: `bunny-flex bunny-items-center bunny-gap-2 ${isDiscount ? 'bunny-pl-0' : ''}`, children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : '' }) }) })), jsxRuntime.jsx(SubscriptionsListCell, { gridColumn: 2, children: jsxRuntime.jsx("div", { children: chargePeriod }) }), jsxRuntime.jsx(SubscriptionsListCell, { right: true, children: charge.kind === common.QuoteChangeKind.DISCOUNT
                     ? ''
                     : charge.chargeType === common.ChargeType.USAGE
                         ? charge.histogram && (jsxRuntime.jsx(FeatureUsageGraph, { charge: charge, featureUsage: charge.histogram, useAreaChart: true }))
                         : charge.isAmendment
-                            ? `+${(_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString()}`
-                            : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() }), jsxRuntime.jsx(SubscriptionsListCell, { right: true, children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) }), jsxRuntime.jsx(SubscriptionsListCell, { right: true, children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) })] }));
+                            ? `+${(_a = charge.quantity) === null || _a === void 0 ? void 0 : _a.toLocaleString()}`
+                            : (_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString() }), jsxRuntime.jsx(SubscriptionsListCell, { right: true, children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: currencyId }) }), jsxRuntime.jsx(SubscriptionsListCell, { right: true, children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, currencyId: currencyId }) })] }));
 };
 
 function AddonSubscriptionsCards({ onCancelSubscriptionClick, subscriptions, subscription, showInactive, }) {
@@ -23284,6 +23315,7 @@ const SubscriptionCard = ({ subscription }) => {
     const { shadow } = react.useContext(SubscriptionsContext);
     // Derived state
     const backgroundColor = darkMode ? 'var(--row-background-dark)' : 'var(--row-background)';
+    const charges = sortSubscriptionCharges(filterSubscriptionCharges((_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) !== null && _a !== void 0 ? _a : []));
     return (jsxRuntime.jsxs(Card, { className: `bunny-flex bunny-flex-col bunny-p-4 ${shadow ? `shadow-${shadow}` : ''}`, children: [jsxRuntime.jsx(SubscriptionCardHeader, { subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
                     gridColumn: '1 / -1',
                     width: 'calc(100% + 32px)',
@@ -23293,10 +23325,10 @@ const SubscriptionCard = ({ subscription }) => {
                     gridTemplateColumns: `1fr auto auto auto`,
                     rowGap: '0.75rem',
                     backgroundColor,
-                }, children: [CHARGE_COLUMNS.map((subscriptionColumn, index) => (jsxRuntime.jsx(SubscriptionCardCellMobile, { className: `bunny-text-slate-400 ${subscriptionColumn.className}`, style: { fontSize: '11px' }, children: subscriptionColumn.title }, index))), (_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _a === void 0 ? void 0 : _a.map((charge, chargeIndex) => {
+                }, children: [CHARGE_COLUMNS.map((subscriptionColumn, index) => (jsxRuntime.jsx(SubscriptionCardCellMobile, { className: `bunny-text-slate-400 ${subscriptionColumn.className}`, style: { fontSize: '11px' }, children: subscriptionColumn.title }, index))), charges.map((charge, chargeIndex) => {
                         const { isRamp } = charge;
                         const chargePeriod = `${common.formatDate(charge.startDate)} - ${common.formatDate(charge.endDate)}`;
-                        return (jsxRuntime.jsxs("div", { className: "bunny-contents", children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxRuntime.jsxs(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? '1/-1' : '1' }, children: [jsxRuntime.jsx("span", { children: charge.name }), !isRamp ? ` - ${chargePeriod}` : ''] })), isRamp && (jsxRuntime.jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[0].className, children: `- ${chargePeriod}` })), jsxRuntime.jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[1].className, children: charge.kind === common.QuoteChangeKind.DISCOUNT ? '' : charge.quantity }), jsxRuntime.jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[2].className, children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) }), jsxRuntime.jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[3].className, children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) })] }, chargeIndex));
+                        return (jsxRuntime.jsxs("div", { className: "bunny-contents", children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxRuntime.jsxs(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? '1/-1' : '1' }, children: [jsxRuntime.jsx("span", { children: charge.name }), !isRamp ? ` - ${chargePeriod}` : ''] })), isRamp && (jsxRuntime.jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[0].className, children: `- ${chargePeriod}` })), jsxRuntime.jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[1].className, children: charge.kind === common.QuoteChangeKind.DISCOUNT ? '' : charge.quantity }), jsxRuntime.jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[2].className, children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) }), jsxRuntime.jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[3].className, children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, currencyId: subscription.currencyId }) })] }, chargeIndex));
                     })] })] }));
 };
 

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

@@ -1,6 +1,6 @@
-import { Subscription, SubscriptionCharge } from '@bunnyapp/common';
-declare const SubscriptionChargeTotal: ({ charge, subscription, }: {
+import { SubscriptionCharge } from '@bunnyapp/common';
+declare const SubscriptionChargeTotal: ({ charge, currencyId, }: {
     charge: SubscriptionCharge;
-    subscription: Subscription;
+    currencyId: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionChargeTotal;

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

@@ -0,0 +1,2 @@
+import { SubscriptionCharge } from '../../../../types/SubscriptionCharge';
+export declare const filterSubscriptionCharges: (charges: SubscriptionCharge[]) => SubscriptionCharge[];

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

@@ -0,0 +1,2 @@
+import { SubscriptionCharge } from '../../../../types/SubscriptionCharge';
+export declare const sortSubscriptionCharges: (charges: SubscriptionCharge[]) => SubscriptionCharge[];

package/dist/esm/index.js

@@ -50,7 +50,7 @@ var css_248z = ":root {\n  --row-background: #ffffff;\n  --row-background-altern
 styleInject(css_248z);
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.6.0-beta.9.2';
+const PACKAGE_VERSION = '1.6.0-beta.9.4';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -22917,7 +22917,7 @@ const isSubscriptionActiveOrPending = (subscription) => {
 const isSubscriptionTrial = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL; };
 const isSubscriptionTrialExpired = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL_EXPIRED; };
 // Helper function to check if charge is a discount
-const isDiscount = (kind) => kind === QuoteChangeKind.DISCOUNT || kind === QuoteChangeKind.FREE_PERIOD_DISCOUNT;
+const isDiscount$1 = (kind) => kind === QuoteChangeKind.DISCOUNT || kind === QuoteChangeKind.FREE_PERIOD_DISCOUNT;
 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);
@@ -23066,10 +23066,9 @@ var BillingPeriodConverter;
 })(BillingPeriodConverter || (BillingPeriodConverter = {}));
 var BillingPeriodConverter$1 = BillingPeriodConverter;
 
-const SubscriptionChargeTotal = ({ charge, subscription, }) => {
+const SubscriptionChargeTotal = ({ charge, currencyId, }) => {
     const billingPeriod = charge.billingPeriod && BillingPeriodConverter$1[charge.billingPeriod];
     const isMobile = useIsMobile();
-    const { currencyId } = subscription;
     const formattedDiscountedPrice = formatCurrency(charge.price, currencyId);
     const formattedPeriodPrice = formatCurrency(charge.periodPrice, currencyId);
     return (jsx("div", { className: `bunny-flex bunny-gap-1 ${isMobile ? 'bunny-flex-col' : ''}`, children: charge.chargeType === ChargeType.USAGE || charge.trial
@@ -23135,7 +23134,7 @@ const SubscriptionChargeUnitPrice = ({ charge, currencyId, }) => {
     const price = charge.trial
         ? '-'
         : formatCurrency(charge.discountedPrice, currencyId, charge.priceDecimals);
-    const isChargeDiscount = isDiscount(charge.kind);
+    const isChargeDiscount = isDiscount$1(charge.kind);
     return (jsx(Fragment, { children: hasPriceTiers(charge) ? (jsx(TieredDisplayDropdown, { charge: charge, currencyId: currencyId, truncatedText: `${charge.kind === QuoteChangeKind.PRICE_UPDATE ? 'new ' : ''}${getApplicablePriceTier(charge, currencyId, charge.priceDecimals)}` })) : isChargeDiscount ? (`-${price}`) : (price) }));
 };
 
@@ -23154,6 +23153,37 @@ const SubscriptionsListCell = ({ children, className, gridColumn, right, style,
         }, children: children }));
 };
 
+// Helper function to check if charge is a discount
+const isDiscount = (kind) => kind === QuoteChangeKind.DISCOUNT;
+const sortSubscriptionCharges = (charges) => {
+    // Make a copy of charges array and sort them by specific criteria
+    const orderedCharges = [...charges].sort((a, b) => {
+        // First group by priceListChargeId to keep related charges together
+        if (a.priceListChargeId !== b.priceListChargeId) {
+            return a.priceListChargeId.localeCompare(b.priceListChargeId);
+        }
+        // Move discount charges to the end within each priceList group
+        if (isDiscount(a.kind) && !isDiscount(b.kind)) {
+            return 1;
+        }
+        if (!isDiscount(a.kind) && isDiscount(b.kind)) {
+            return -1;
+        }
+        // Then sort by end date, start date, and finally show amendments last
+        return (a.endDate.localeCompare(b.endDate) ||
+            a.startDate.localeCompare(b.startDate) ||
+            (a.isAmendment ? 1 : -1));
+    });
+    return orderedCharges;
+};
+
+const filterSubscriptionCharges = (charges) => {
+    return charges.filter(charge => {
+        const isEndDateBeforeCurrentDate = dayjs(charge.endDate).isBefore(dayjs(), 'day');
+        return !isEndDateBeforeCurrentDate;
+    });
+};
+
 const NON_ADDON_CARD_COLUMNS = [
     {
         title: 'Charge',
@@ -23208,6 +23238,7 @@ const SubscriptionCardDesktop = ({ onChangePlanClick, onCancelSubscriptionClick,
     var _a;
     const { shadow } = useContext(SubscriptionsContext);
     const CARD_COLUMNS = isAddon ? ADDON_CARD_COLUMNS : NON_ADDON_CARD_COLUMNS;
+    const charges = sortSubscriptionCharges(filterSubscriptionCharges((_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) !== null && _a !== void 0 ? _a : []));
     return (jsxs(Card, { className: `bunny-p-4 ${shadow ? `shadow-${shadow}` : ''}`, children: [jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }), jsx(Divider, { className: "bunny-my-4", style: {
                     gridColumn: '1 / 5',
                     width: 'calc(100% + 32px)',
@@ -23215,15 +23246,15 @@ const SubscriptionCardDesktop = ({ onChangePlanClick, onCancelSubscriptionClick,
                 } }), jsxs("div", { className: "bunny-grid bunny-w-full", style: {
                     gridTemplateColumns: CARD_COLUMNS.map(column => column.width).join(' '),
                     rowGap: '0.75rem',
-                }, children: [jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), (_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _a === void 0 ? void 0 : _a.map((charge, chargeIndex) => {
-                        return (jsx(SubscriptionCardDesktopRow, { charge: charge, chargeIndex: chargeIndex, subscription: subscription }, chargeIndex));
+                }, children: [jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), charges.map((charge, chargeIndex) => {
+                        return (jsx(SubscriptionCardDesktopRow, { charge: charge, chargeIndex: chargeIndex, charges: charges, currencyId: subscription.currencyId }, chargeIndex));
                     })] })] }));
 };
-const SubscriptionCardDesktopRow = ({ charge, chargeIndex, subscription, }) => {
-    var _a, _b, _c;
+const SubscriptionCardDesktopRow = ({ charge, chargeIndex, charges, currencyId, }) => {
+    var _a, _b;
     // Derived state
     const { isRamp } = charge;
-    const prevCharge = (_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _a === void 0 ? void 0 : _a[chargeIndex - 1];
+    const prevCharge = charges === null || charges === void 0 ? void 0 : charges[chargeIndex - 1];
     const chargePeriod = `${formatDate(charge.startDate)} - ${formatDate(charge.endDate)}`;
     const isRampFirstRow = isRamp && chargeIndex === 0;
     const isTrial = charge.trial;
@@ -23232,13 +23263,13 @@ const SubscriptionCardDesktopRow = ({ charge, chargeIndex, subscription, }) => {
         !isDiscount &&
         (!isTrial || (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.trial)) &&
         (isTrial || !(prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.trial));
-    return (jsxs("div", { className: "bunny-contents", children: [(isRampFirstRow || !isRamp) && (jsx(SubscriptionsListCell, { gridColumn: isRamp ? '1/-1' : '1', children: jsx("div", { className: `bunny-flex bunny-items-center bunny-gap-2 ${isDiscount ? 'bunny-pl-4' : ''}`, children: jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : '' }) }) })), jsx(SubscriptionsListCell, { gridColumn: 2, children: jsx("div", { children: chargePeriod }) }), jsx(SubscriptionsListCell, { right: true, children: charge.kind === QuoteChangeKind.DISCOUNT
+    return (jsxs("div", { className: "bunny-contents", children: [(isRampFirstRow || !isRamp) && (jsx(SubscriptionsListCell, { gridColumn: isRamp ? '1/-1' : '1', children: jsx("div", { className: `bunny-flex bunny-items-center bunny-gap-2 ${isDiscount ? 'bunny-pl-0' : ''}`, children: jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : '' }) }) })), jsx(SubscriptionsListCell, { gridColumn: 2, children: jsx("div", { children: chargePeriod }) }), jsx(SubscriptionsListCell, { right: true, children: charge.kind === QuoteChangeKind.DISCOUNT
                     ? ''
                     : charge.chargeType === ChargeType.USAGE
                         ? charge.histogram && (jsx(FeatureUsageGraph, { charge: charge, featureUsage: charge.histogram, useAreaChart: true }))
                         : charge.isAmendment
-                            ? `+${(_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString()}`
-                            : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() }), jsx(SubscriptionsListCell, { right: true, children: jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) }), jsx(SubscriptionsListCell, { right: true, children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) })] }));
+                            ? `+${(_a = charge.quantity) === null || _a === void 0 ? void 0 : _a.toLocaleString()}`
+                            : (_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString() }), jsx(SubscriptionsListCell, { right: true, children: jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: currencyId }) }), jsx(SubscriptionsListCell, { right: true, children: jsx(SubscriptionChargeTotal, { charge: charge, currencyId: currencyId }) })] }));
 };
 
 function AddonSubscriptionsCards({ onCancelSubscriptionClick, subscriptions, subscription, showInactive, }) {
@@ -23282,6 +23313,7 @@ const SubscriptionCard = ({ subscription }) => {
     const { shadow } = useContext(SubscriptionsContext);
     // Derived state
     const backgroundColor = darkMode ? 'var(--row-background-dark)' : 'var(--row-background)';
+    const charges = sortSubscriptionCharges(filterSubscriptionCharges((_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) !== null && _a !== void 0 ? _a : []));
     return (jsxs(Card, { className: `bunny-flex bunny-flex-col bunny-p-4 ${shadow ? `shadow-${shadow}` : ''}`, children: [jsx(SubscriptionCardHeader, { subscription: subscription }), jsx(Divider, { className: "bunny-my-4", style: {
                     gridColumn: '1 / -1',
                     width: 'calc(100% + 32px)',
@@ -23291,10 +23323,10 @@ const SubscriptionCard = ({ subscription }) => {
                     gridTemplateColumns: `1fr auto auto auto`,
                     rowGap: '0.75rem',
                     backgroundColor,
-                }, children: [CHARGE_COLUMNS.map((subscriptionColumn, index) => (jsx(SubscriptionCardCellMobile, { className: `bunny-text-slate-400 ${subscriptionColumn.className}`, style: { fontSize: '11px' }, children: subscriptionColumn.title }, index))), (_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _a === void 0 ? void 0 : _a.map((charge, chargeIndex) => {
+                }, children: [CHARGE_COLUMNS.map((subscriptionColumn, index) => (jsx(SubscriptionCardCellMobile, { className: `bunny-text-slate-400 ${subscriptionColumn.className}`, style: { fontSize: '11px' }, children: subscriptionColumn.title }, index))), charges.map((charge, chargeIndex) => {
                         const { isRamp } = charge;
                         const chargePeriod = `${formatDate(charge.startDate)} - ${formatDate(charge.endDate)}`;
-                        return (jsxs("div", { className: "bunny-contents", children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxs(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? '1/-1' : '1' }, children: [jsx("span", { children: charge.name }), !isRamp ? ` - ${chargePeriod}` : ''] })), isRamp && (jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[0].className, children: `- ${chargePeriod}` })), jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[1].className, children: charge.kind === QuoteChangeKind.DISCOUNT ? '' : charge.quantity }), jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[2].className, children: jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) }), jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[3].className, children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) })] }, chargeIndex));
+                        return (jsxs("div", { className: "bunny-contents", children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxs(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? '1/-1' : '1' }, children: [jsx("span", { children: charge.name }), !isRamp ? ` - ${chargePeriod}` : ''] })), isRamp && (jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[0].className, children: `- ${chargePeriod}` })), jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[1].className, children: charge.kind === QuoteChangeKind.DISCOUNT ? '' : charge.quantity }), jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[2].className, children: jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) }), jsx(SubscriptionCardCellMobile, { className: CHARGE_COLUMNS[3].className, children: jsx(SubscriptionChargeTotal, { charge: charge, currencyId: subscription.currencyId }) })] }, chargeIndex));
                     })] })] }));
 };
 

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

@@ -1,6 +1,6 @@
-import { Subscription, SubscriptionCharge } from '@bunnyapp/common';
-declare const SubscriptionChargeTotal: ({ charge, subscription, }: {
+import { SubscriptionCharge } from '@bunnyapp/common';
+declare const SubscriptionChargeTotal: ({ charge, currencyId, }: {
     charge: SubscriptionCharge;
-    subscription: Subscription;
+    currencyId: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionChargeTotal;

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

@@ -0,0 +1,2 @@
+import { SubscriptionCharge } from '../../../../types/SubscriptionCharge';
+export declare const filterSubscriptionCharges: (charges: SubscriptionCharge[]) => SubscriptionCharge[];

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

@@ -0,0 +1,2 @@
+import { SubscriptionCharge } from '../../../../types/SubscriptionCharge';
+export declare const sortSubscriptionCharges: (charges: SubscriptionCharge[]) => SubscriptionCharge[];

package/package.json

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