@bunnyapp/components 1.7.0-beta.44 → 1.7.0-beta.45

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.43';
+const PACKAGE_VERSION = '1.7.0-beta.44';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -26496,6 +26496,36 @@ const everythingInPlusString = ({ priceList }) => {
     return `Everything in ${priceList.plan.name}, plus`;
 };
 
+const ChargeHasPriceTiers_PriceListChargeFragment = t(`
+    fragment ChargeHasPriceTiers_PriceListChargeFragment on PriceListCharge {
+      priceListChargeTiers {
+        starts
+        price
+      }
+    }
+  `);
+function chargeHasPriceTiers(maskedCharge) {
+    var _a;
+    // Read fragments
+    const charge = readFragment(ChargeHasPriceTiers_PriceListChargeFragment, maskedCharge);
+    return ((_a = charge.priceListChargeTiers) === null || _a === void 0 ? void 0 : _a.length) && charge.priceListChargeTiers.length > 1;
+}
+
+const PriceListHasPriceTiers_PriceListFragment = t(`
+    fragment PriceListHasPriceTiers_PriceListFragment on PriceList {
+      charges {
+        ...ChargeHasPriceTiers_PriceListChargeFragment
+      }
+    }
+  `, [ChargeHasPriceTiers_PriceListChargeFragment]);
+// a pricelist has price tiers if any of its charges have > 1 price tier
+const priceListHasPriceTiers = (maskedPriceList) => {
+    var _a;
+    // Read fragments
+    const priceList = readFragment(PriceListHasPriceTiers_PriceListFragment, maskedPriceList);
+    return (_a = priceList.charges) === null || _a === void 0 ? void 0 : _a.some(chargeHasPriceTiers);
+};
+
 const TOOLTIP_BG_COLOR = '#2F353B';
 
 function Tooltip(props) {
@@ -26509,53 +26539,97 @@ function Tooltip(props) {
         } }));
 }
 
-const filterDeprecatedCharges_PriceListChargeFragment = t(`
-    fragment filterDeprecatedCharges_PriceListChargeFragment on PriceListCharge {
-      deprecated
-      removeOnRenewal
+const priceListChargePriceDescription_PriceListChargeFragment = t(`
+    fragment priceListChargePriceDescription_PriceListChargeFragment on PriceListCharge {
+      showPriceAsMonthly
+      billingPeriod
+      feature {
+        unitName
+      }
     }
   `);
-function filterDeprecatedCharges(quoteChangeKind, maskedCharge) {
-    const charge = readFragment(filterDeprecatedCharges_PriceListChargeFragment, maskedCharge);
-    // If kind are not subscribe, reinstate or renew, then the deprecated charge is grandfathered in and can be displayed
-    if (quoteChangeKind &&
-        !(quoteChangeKind === t.scalar('QuoteChangeKind', 'SUBSCRIBE') ||
-            quoteChangeKind === t.scalar('QuoteChangeKind', 'REINSTATE') ||
-            quoteChangeKind === t.scalar('QuoteChangeKind', 'RENEW'))) {
-        return true;
-    }
-    const deprecated = charge.deprecated;
-    if (deprecated && quoteChangeKind === t.scalar('QuoteChangeKind', 'RENEW')) {
-        return !charge.removeOnRenewal;
+function priceListChargePriceDescription(maskedPriceListCharge) {
+    var _a;
+    // Read fragments
+    const priceListCharge = readFragment(priceListChargePriceDescription_PriceListChargeFragment, maskedPriceListCharge);
+    const billingPeriod = priceListCharge.billingPeriod;
+    const periodLabel = billingPeriod ? PERIOD_LABELS[billingPeriod] : null;
+    const unitName = (_a = priceListCharge.feature) === null || _a === void 0 ? void 0 : _a.unitName;
+    return `Per ${unitName ? `${unitName} / ` : ''}${priceListCharge.showPriceAsMonthly ? 'month' : periodLabel}`;
+}
+
+const GetActiveCharges_PriceListChargeFragment = t(`
+    fragment GetActiveCharges_PriceListChargeFragment on PriceListCharge {
+      deprecated
+      featureAddon
     }
-    return !deprecated;
+  `);
+// Active charges: any charge that is not deprecated and not a feature addon
+function getActiveCharges(charges) {
+    return charges.filter(maskedCharge => {
+        const charge = readFragment(GetActiveCharges_PriceListChargeFragment, maskedCharge);
+        return !charge.deprecated && !charge.featureAddon;
+    });
 }
 
-const DoesPriceListHaveFlatFeeCharges_PriceListFragment = t(`
-    fragment DoesPriceListHaveFlatFeeCharges_PriceListFragment on PriceList {
+const getPriceListUnitName_PriceListFragment = t(`
+    fragment getPriceListUnitName_PriceListFragment on PriceList {
       charges {
-        pricingModel
-        basePrice
+        chargeType
+        featureAddon
+        deprecated
+        feature {
+          unitName
+        }
       }
     }
-  `);
-function doesPriceListHaveFlatFeeCharges(maskedPriceList) {
-    var _a, _b;
+  `, []);
+function getPriceListUnitName(maskedPriceList) {
+    var _a, _b, _c;
     // Read fragments
-    const priceList = readFragment(DoesPriceListHaveFlatFeeCharges_PriceListFragment, maskedPriceList);
-    return ((_b = (_a = priceList.charges) === null || _a === void 0 ? void 0 : _a.some(charge => charge.pricingModel === t.scalar('PricingModel', 'FLAT') &&
-        charge.basePrice != undefined &&
-        charge.basePrice > 0)) !== null && _b !== void 0 ? _b : false);
+    const priceList = readFragment(getPriceListUnitName_PriceListFragment, maskedPriceList);
+    const activeCharges = (_a = priceList.charges) === null || _a === void 0 ? void 0 : _a.filter(charge => !charge.deprecated && !charge.featureAddon);
+    const recurringCharges = activeCharges === null || activeCharges === void 0 ? void 0 : activeCharges.filter(charge => charge.chargeType === 'RECURRING');
+    const usageCharges = activeCharges === null || activeCharges === void 0 ? void 0 : activeCharges.filter(charge => charge.chargeType === 'USAGE');
+    // Strategy 1: If only 1 recurring charge
+    //             return that charge.unit
+    if ((recurringCharges === null || recurringCharges === void 0 ? void 0 : recurringCharges.length) === 1) {
+        return (_b = recurringCharges[0].feature) === null || _b === void 0 ? void 0 : _b.unitName;
+    }
+    // Strategy 2: If only 1 usage charge
+    //             return that charge.unit
+    if ((usageCharges === null || usageCharges === void 0 ? void 0 : usageCharges.length) === 1) {
+        return (_c = usageCharges[0].feature) === null || _c === void 0 ? void 0 : _c.unitName;
+    }
+    // Stragey 3:  Else there are conflicting charges
+    //             return null
+    return null;
 }
 
-function priceDescriptionString({ unitName, showPriceAsMonthly, periodMonths, priceListHasFlatFeeCharges, }) {
-    const periodMonthsConverted = periodMonthsConverter(periodMonths);
+const priceDescriptionString_PriceListFragment = t(`
+    fragment priceDescriptionString_PriceListFragment on PriceList {
+      showPriceAsMonthly
+      periodMonths
+      ...getPriceListUnitName_PriceListFragment
+    }
+  `, [getPriceListUnitName_PriceListFragment]);
+function priceDescriptionString(maskedPriceList) {
+    // Read fragments
+    const priceList = readFragment(priceDescriptionString_PriceListFragment, maskedPriceList);
+    const periodMonthsConverted = periodMonthsConverter(priceList.periodMonths);
     const periodLabel = periodMonthsConverted ? PERIOD_LABELS[periodMonthsConverted] : null;
-    return `Per ${unitName && !priceListHasFlatFeeCharges ? `${unitName} / ` : ''}${showPriceAsMonthly ? 'month' : periodLabel}`;
+    const unitName = getPriceListUnitName(priceList);
+    return `Per ${unitName ? `${unitName} / ` : ''}${priceList.showPriceAsMonthly ? 'month' : periodLabel}`;
 }
 
 const { Text: Text$e } = antd.Typography;
-const PriceTierPrice = ({ currencyId, priceDecimals, tier, }) => {
+const PriceTierPrice_PriceTierFragment = t(`
+    fragment PriceTierPrice_PriceTierFragment on PriceListChargeTier {
+      price
+    }
+  `);
+const PriceTierPrice = ({ currencyId, priceDecimals, tier: maskedTier, }) => {
+    const tier = readFragment(PriceTierPrice_PriceTierFragment, maskedTier);
     return (jsxRuntime.jsx(Text$e, { className: "bunny-text-white", children: formatCurrency(tier.price, currencyId, priceDecimals) }));
 };
 
@@ -26586,11 +26660,11 @@ const ChargePriceTiers_PriceListChargeFragment = t(`
       priceDecimals
       priceListChargeTiers {
         starts
-        price
         ...PriceTierRow_PriceTierFragment
+        ...PriceTierPrice_PriceTierFragment
       }
     }
-  `, [PriceTierRow_PriceTierFragment]);
+  `, [PriceTierRow_PriceTierFragment, PriceTierPrice_PriceTierFragment]);
 const ChargePriceTiers = ({ charge: maskedCharge, currencyId, }) => {
     var _a;
     const charge = readFragment(ChargePriceTiers_PriceListChargeFragment, maskedCharge);
@@ -26606,21 +26680,6 @@ const ChargePriceTiers = ({ charge: maskedCharge, currencyId, }) => {
                 }) })] }));
 };
 
-const ChargeHasPriceTiers_PriceListChargeFragment = t(`
-    fragment ChargeHasPriceTiers_PriceListChargeFragment on PriceListCharge {
-      priceListChargeTiers {
-        starts
-        price
-      }
-    }
-  `);
-function chargeHasPriceTiers(maskedCharge) {
-    var _a;
-    // Read fragments
-    const charge = readFragment(ChargeHasPriceTiers_PriceListChargeFragment, maskedCharge);
-    return ((_a = charge.priceListChargeTiers) === null || _a === void 0 ? void 0 : _a.length) && charge.priceListChargeTiers.length > 1;
-}
-
 const getFirstTierPrice = (charge, currencyId) => {
     var _a, _b, _c;
     const price = (_b = (_a = charge.priceListChargeTiers) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.price;
@@ -26652,75 +26711,41 @@ const PricingTooltip_PriceListChargeFragment = t(`
       priceDecimals
       basePrice
       name
+      ...priceListChargePriceDescription_PriceListChargeFragment
       ...ChargeHasPriceTiers_PriceListChargeFragment
       ...ChargePriceTiers_PriceListChargeFragment
+      ...GetActiveCharges_PriceListChargeFragment
     }
-  `, [ChargeHasPriceTiers_PriceListChargeFragment, ChargePriceTiers_PriceListChargeFragment]);
+  `, [
+    ChargeHasPriceTiers_PriceListChargeFragment,
+    ChargePriceTiers_PriceListChargeFragment,
+    GetActiveCharges_PriceListChargeFragment,
+    priceListChargePriceDescription_PriceListChargeFragment
+]);
 const PricingTooltip_PriceListFragment = t(`
     fragment PricingTooltip_PriceListFragment on PriceList {
-      showPriceAsMonthly
-      periodMonths
       currencyId
       monthlyBasePrice
       basePrice
-      ...DoesPriceListHaveFlatFeeCharges_PriceListFragment
+      ...priceDescriptionString_PriceListFragment
     }
-  `, [DoesPriceListHaveFlatFeeCharges_PriceListFragment]);
-const PricingTooltip = ({ className, priceListCharges: maskedPriceListCharges, currencyId, priceList: maskedPriceList, }) => {
+  `, [priceDescriptionString_PriceListFragment]);
+const PricingTooltip = ({ className, priceListCharges: maskedPriceListCharges, currencyId, }) => {
     // Read fragments
-    const priceList = readFragment(PricingTooltip_PriceListFragment, maskedPriceList);
     const priceListCharges = maskedPriceListCharges.map(charge => readFragment(PricingTooltip_PriceListChargeFragment, charge));
-    const filteredPriceListCharges = priceListCharges.filter(charge => filterDeprecatedCharges(undefined, charge));
+    const activeCharges = getActiveCharges(priceListCharges);
     const content = react.useMemo(() => {
-        return (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-3", children: filteredPriceListCharges === null || filteredPriceListCharges === void 0 ? void 0 : filteredPriceListCharges.map((charge, index) => {
-                var _a;
+        return (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-3", children: activeCharges === null || activeCharges === void 0 ? void 0 : activeCharges.map((charge, index) => {
                 const hasPriceTiers = chargeHasPriceTiers(charge);
                 if (hasPriceTiers) {
                     return jsxRuntime.jsx(ChargePriceTiers, { charge: charge, currencyId: currencyId }, index);
                 }
-                return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-1", children: [jsxRuntime.jsx("div", { className: "bunny-text-white bunny-font-bold", children: charge.name }), jsxRuntime.jsxs("div", { className: "bunny-text-gray-400 bunny-text-xs/3", children: [getChargeBasePrice(charge, currencyId), ' ', priceDescriptionString({
-                                    unitName: (_a = charge.feature) === null || _a === void 0 ? void 0 : _a.unitName,
-                                    showPriceAsMonthly: priceList === null || priceList === void 0 ? void 0 : priceList.showPriceAsMonthly,
-                                    periodMonths: priceList === null || priceList === void 0 ? void 0 : priceList.periodMonths,
-                                    priceListHasFlatFeeCharges: doesPriceListHaveFlatFeeCharges(priceList),
-                                })] })] }, index));
+                return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-1", children: [jsxRuntime.jsx("div", { className: "bunny-text-white bunny-font-bold", children: charge.name }), jsxRuntime.jsxs("div", { className: "bunny-text-gray-400 bunny-text-xs/3", children: [getChargeBasePrice(charge, currencyId), ' ', priceListChargePriceDescription(charge)] })] }, index));
             }) }));
-    }, [filteredPriceListCharges, currencyId]);
+    }, [activeCharges, currencyId]);
     return (jsxRuntime.jsx(Tooltip, { className: `bunny-text-gray-400 bunny-text-sm ${className}`, title: content, children: jsxRuntime.jsx(icons.InfoCircleOutlined, { className: "bunny-text-gray-400 ", size: 15 }) }));
 };
 
-const PriceListHasPriceTiers_PriceListFragment = t(`
-    fragment PriceListHasPriceTiers_PriceListFragment on PriceList {
-      charges {
-        ...ChargeHasPriceTiers_PriceListChargeFragment
-      }
-    }
-  `, [ChargeHasPriceTiers_PriceListChargeFragment]);
-// a pricelist has price tiers if any of its charges have > 1 price tier
-const priceListHasPriceTiers = (maskedPriceList) => {
-    var _a;
-    // Read fragments
-    const priceList = readFragment(PriceListHasPriceTiers_PriceListFragment, maskedPriceList);
-    return (_a = priceList.charges) === null || _a === void 0 ? void 0 : _a.some(chargeHasPriceTiers);
-};
-
-const HasMultipleRecurringCharges_PriceListFragment = t(`
-    fragment HasMultipleRecurringCharges_PriceListFragment on PriceList {
-      charges {
-        chargeType
-        featureAddon
-      }
-    }
-  `);
-// Exclude add-on charges because they may not be present in the quote/subscription
-// Exclude usage charges because their price depends on the usage (we don't know what the usage will be)
-const hasMultipleRecurringCharges = (maskedPriceList) => {
-    var _a, _b;
-    // Read fragments
-    const priceList = readFragment(HasMultipleRecurringCharges_PriceListFragment, maskedPriceList);
-    return (((_b = (_a = priceList.charges) === null || _a === void 0 ? void 0 : _a.filter(charge => charge.chargeType !== t.scalar('ChargeType', 'USAGE') && charge.featureAddon !== true).length) !== null && _b !== void 0 ? _b : 0) > 1);
-};
-
 /**
  * It is possible for html based descriptions to return something like '<p></p>'
  * In which case a null check or character length count doesn't work.
@@ -26731,6 +26756,22 @@ function isEmptyHTML(html) {
     return /^<[^>]*>(\s*)<\/[^>]*>$/.test(html);
 }
 
+const BillingPeriodDescription_PriceListFragment = t(`
+    fragment BillingPeriodDescription_PriceListFragment on PriceList {
+      periodMonths
+    }
+  `);
+const BillingPeriodDescription = ({ priceList: maskedPriceList, }) => {
+    // Read fragments
+    const priceList = readFragment(BillingPeriodDescription_PriceListFragment, maskedPriceList);
+    const periodMonthsConverted = periodMonthsConverter(priceList.periodMonths);
+    const billingPeriodText = periodMonthsConverted
+        ? BillingPeriodConverter$1[periodMonthsConverted]
+        : 'undefined';
+    const showDescription = priceList.periodMonths && priceList.periodMonths > 1;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showDescription && (jsxRuntime.jsxs("div", { children: ["Billed ", billingPeriodText] })) }));
+};
+
 const { Text: Text$b } = antd.Typography;
 const MarkupWrapper = defaultStyled.div `
   padding: 0 !important;
@@ -26747,28 +26788,32 @@ const PriceListCardPriceDescription_PriceListFragment = t(`
       plan {
         pricingDescription
       }
-      showPriceAsMonthly
+      charges {
+        ...GetActiveCharges_PriceListChargeFragment
+        ...PricingTooltip_PriceListChargeFragment
+      }
+      currencyId
       periodMonths
-      ...DoesPriceListHaveFlatFeeCharges_PriceListFragment
-      ...HasMultipleRecurringCharges_PriceListFragment
+      ...priceDescriptionString_PriceListFragment
+      ...BillingPeriodDescription_PriceListFragment
+      ...PriceListHasPriceTiers_PriceListFragment
     }
-  `, [DoesPriceListHaveFlatFeeCharges_PriceListFragment, HasMultipleRecurringCharges_PriceListFragment]);
-const PriceListCardPriceDescription = ({ feature, priceList: maskedPriceList, }) => {
-    var _a;
+  `, [
+    priceDescriptionString_PriceListFragment,
+    BillingPeriodDescription_PriceListFragment,
+    PriceListHasPriceTiers_PriceListFragment,
+    GetActiveCharges_PriceListChargeFragment,
+    PricingTooltip_PriceListChargeFragment
+]);
+const PriceListCardPriceDescription = ({ priceList: maskedPriceList, }) => {
+    var _a, _b;
     // Read fragments
     const priceList = readFragment(PriceListCardPriceDescription_PriceListFragment, maskedPriceList);
+    const activeCharges = getActiveCharges((_a = priceList.charges) !== null && _a !== void 0 ? _a : []);
+    const showPricingTooltip = priceListHasPriceTiers(priceList) || activeCharges.length > 1;
     if (priceList.periodMonths && priceList.periodMonths <= 0)
         return null;
-    const periodMonthsConverted = periodMonthsConverter(priceList.periodMonths);
-    const billingPeriodText = periodMonthsConverted
-        ? BillingPeriodConverter$1[periodMonthsConverted]
-        : 'undefined';
-    return (jsxRuntime.jsxs(Text$b, { className: "bunny-text-start bunny-text-gray-400 bunny-text-sm", children: [jsxRuntime.jsx("div", { children: ((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.pricingDescription) && !isEmptyHTML(priceList.plan.pricingDescription) ? (jsxRuntime.jsx(MarkupWrapper, { children: jsxRuntime.jsx(interweave.Markup, { content: priceList.plan.pricingDescription }) })) : (priceDescriptionString({
-                    unitName: hasMultipleRecurringCharges(priceList) ? undefined : feature === null || feature === void 0 ? void 0 : feature.unitName,
-                    showPriceAsMonthly: priceList.showPriceAsMonthly,
-                    periodMonths: priceList.periodMonths,
-                    priceListHasFlatFeeCharges: doesPriceListHaveFlatFeeCharges(priceList),
-                })) }), priceList.periodMonths && priceList.periodMonths > 1 && (jsxRuntime.jsxs("div", { children: ["Billed ", billingPeriodText] }))] }));
+    return (jsxRuntime.jsxs(Text$b, { className: "bunny-text-start bunny-text-gray-400 bunny-text-sm", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsxRuntime.jsx("div", { children: ((_b = priceList.plan) === null || _b === void 0 ? void 0 : _b.pricingDescription) && !isEmptyHTML(priceList.plan.pricingDescription) ? (jsxRuntime.jsx(MarkupWrapper, { children: jsxRuntime.jsx(interweave.Markup, { content: priceList.plan.pricingDescription }) })) : (priceDescriptionString(priceList)) }), showPricingTooltip && (jsxRuntime.jsx(PricingTooltip, { priceListCharges: activeCharges, currencyId: priceList.currencyId }))] }), jsxRuntime.jsx(BillingPeriodDescription, { priceList: priceList })] }));
 };
 
 /**
@@ -26805,6 +26850,28 @@ const PriceListCardDescription = ({ description, className }) => {
     return jsxRuntime.jsx(TruncatedText, { className: `bunny-text-gray-400 bunny-text-sm ${className !== null && className !== void 0 ? className : ''}`, text: description });
 };
 
+const filterDeprecatedCharges_PriceListChargeFragment = t(`
+    fragment filterDeprecatedCharges_PriceListChargeFragment on PriceListCharge {
+      deprecated
+      removeOnRenewal
+    }
+  `);
+function filterDeprecatedCharges(quoteChangeKind, maskedCharge) {
+    const charge = readFragment(filterDeprecatedCharges_PriceListChargeFragment, maskedCharge);
+    // If kind are not subscribe, reinstate or renew, then the deprecated charge is grandfathered in and can be displayed
+    if (quoteChangeKind &&
+        !(quoteChangeKind === t.scalar('QuoteChangeKind', 'SUBSCRIBE') ||
+            quoteChangeKind === t.scalar('QuoteChangeKind', 'REINSTATE') ||
+            quoteChangeKind === t.scalar('QuoteChangeKind', 'RENEW'))) {
+        return true;
+    }
+    const deprecated = charge.deprecated;
+    if (deprecated && quoteChangeKind === t.scalar('QuoteChangeKind', 'RENEW')) {
+        return !charge.removeOnRenewal;
+    }
+    return !deprecated;
+}
+
 const GetPrice_PriceListFragment = t(`
     fragment GetPrice_PriceListFragment on PriceList {
       showPriceAsMonthly
@@ -26813,37 +26880,21 @@ const GetPrice_PriceListFragment = t(`
       charges {
         basePrice
         chargeType
-        featureAddon
-        deprecated
         ...filterDeprecatedCharges_PriceListChargeFragment
+        ...GetActiveCharges_PriceListChargeFragment
       }
     }
-  `, [filterDeprecatedCharges_PriceListChargeFragment]);
+  `, [filterDeprecatedCharges_PriceListChargeFragment, GetActiveCharges_PriceListChargeFragment]);
 function getPrice(maskedPriceList) {
-    var _a, _b;
+    var _a;
     // Read fragments
     const priceList = readFragment(GetPrice_PriceListFragment, maskedPriceList);
-    // ============= HACK FOR THOMAS' CUSTOMER MEETING =============
-    // note: delete shortly after and implement a better pricing solution
-    // to take other charges into account.
-    // Filter charges: exclude deprecated and featureAddon charges, keep only USAGE charges
-    const usageCharges = (_b = (_a = priceList.charges) === null || _a === void 0 ? void 0 : _a.filter(charge => {
-        // Exclude deprecated charges
-        if (!filterDeprecatedCharges(undefined, charge)) {
-            return false;
-        }
-        // Exclude featureAddon charges
-        if (charge.featureAddon === true) {
-            return false;
-        }
-        // Keep only USAGE charges
-        return charge.chargeType === t.scalar('ChargeType', 'USAGE');
-    })) !== null && _b !== void 0 ? _b : [];
-    // If there are any usage charges, sum their basePrice
-    if (usageCharges.length > 0) {
-        return usageCharges.reduce((sum, charge) => sum + charge.basePrice, 0);
-    }
-    // =================================================================
+    const activeCharges = getActiveCharges((_a = priceList.charges) !== null && _a !== void 0 ? _a : []);
+    const onlyUsageChargesExist = activeCharges === null || activeCharges === void 0 ? void 0 : activeCharges.every(charge => charge.chargeType === 'USAGE');
+    // HACK: If there are ONLY usage charges, sum their basePrice
+    if (onlyUsageChargesExist) {
+        return activeCharges === null || activeCharges === void 0 ? void 0 : activeCharges.reduce((sum, charge) => sum + charge.basePrice, 0);
+    }
     // Otherwise, return the priceList basePrice or monthlyBasePrice
     if (priceList.showPriceAsMonthly) {
         return priceList.monthlyBasePrice;
@@ -26932,32 +26983,19 @@ const PriceListCardDesktop_PriceListFragment = t(`
         contactUsUrl
         name
       }
-      charges {
-        id
-        featureAddon
-        priceListChargeTiers {
-          starts
-          price
-        }
-        ...PricingTooltip_PriceListChargeFragment
-      }
-      currencyId
       ...PriceListCardButton_PriceListFragment
       ...PriceListHasPriceTiers_PriceListFragment
-      ...PricingTooltip_PriceListFragment
       ...PriceListCardPrice_PriceListFragment
       ...PriceListCardPriceDescription_PriceListFragment
     }
   `, [
     PriceListCardButton_PriceListFragment,
-    PricingTooltip_PriceListChargeFragment,
     PriceListHasPriceTiers_PriceListFragment,
-    PricingTooltip_PriceListFragment,
     PriceListCardPrice_PriceListFragment,
     PriceListCardPriceDescription_PriceListFragment,
 ]);
-const PriceListCardDesktop = ({ hideButton, description, disableSelectCurrentPlan, feature, isPriceListCurrentSubscription, isSelected, priceList: maskedPriceList, subscriptionPlan, trialRemainingDays, noBorder, onClickPriceListCard, }) => {
-    var _a, _b, _c, _d;
+const PriceListCardDesktop = ({ hideButton, description, disableSelectCurrentPlan, isPriceListCurrentSubscription, isSelected, priceList: maskedPriceList, subscriptionPlan, trialRemainingDays, noBorder, onClickPriceListCard, }) => {
+    var _a, _b;
     // Read fragments
     const priceList = readFragment(PriceListCardDesktop_PriceListFragment, maskedPriceList);
     return (jsxRuntime.jsx(PlanPickerGridCell, { noBorder: noBorder, children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-4 bunny-px-4 ${disableSelectCurrentPlan ? '' : 'cursor-pointer'} bunny-box-border`, onClick: () => {
@@ -26976,7 +27014,7 @@ const PriceListCardDesktop = ({ hideButton, description, disableSelectCurrentPla
                                 display: 'grid',
                                 gridTemplateRows: 'auto minmax(40px, auto)',
                                 alignItems: 'start',
-                            }, children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList }), priceListHasPriceTiers(priceList) && (jsxRuntime.jsx(PricingTooltip, { priceListCharges: (_d = (_c = priceList.charges) === null || _c === void 0 ? void 0 : _c.filter(charge => charge.featureAddon !== true)) !== null && _d !== void 0 ? _d : [], currencyId: priceList.currencyId, priceList: priceList }))] })] })] }), !hideButton && (jsxRuntime.jsx(PriceListCardButton, { disableSelectCurrentPlan: disableSelectCurrentPlan, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan }))] }) }));
+                            }, children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: jsxRuntime.jsx(PriceListCardPriceDescription, { priceList: priceList }) })] })] }), !hideButton && (jsxRuntime.jsx(PriceListCardButton, { disableSelectCurrentPlan: disableSelectCurrentPlan, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan }))] }) }));
 };
 
 const CheckIcon = ({ backgroundColor, size, }) => {
@@ -26999,7 +27037,7 @@ const PriceListCardMobile_PriceListFragment = t(`
     PriceListCardPrice_PriceListFragment,
     PriceListCardButton_PriceListFragment,
 ]);
-const PriceListCardMobile = ({ description, feature, isPriceListCurrentSubscription, isSelected, priceList: maskedPriceList, subscriptionPlan, trialRemainingDays, disableOnClickPriceListCard, onClickPriceListCard, }) => {
+const PriceListCardMobile = ({ description, isPriceListCurrentSubscription, isSelected, priceList: maskedPriceList, subscriptionPlan, trialRemainingDays, disableOnClickPriceListCard, onClickPriceListCard, }) => {
     var _a, _b;
     // Context
     const { brandColor } = useBrand();
@@ -27014,7 +27052,7 @@ const PriceListCardMobile = ({ description, feature, isPriceListCurrentSubscript
         }, children: [isSelected && (jsxRuntime.jsx("div", { className: "bunny-absolute", style: {
                     top: '10px',
                     right: '10px',
-                }, children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) })), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2", children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, planName: (_b = (_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'undefined', trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2", children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }), jsxRuntime.jsx(PriceListCardButton, { disableSelectCurrentPlan: disableOnClickPriceListCard, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })] }));
+                }, children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) })), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2", children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, planName: (_b = (_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'undefined', trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2", children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { priceList: priceList })] }), jsxRuntime.jsx(PriceListCardButton, { disableSelectCurrentPlan: disableOnClickPriceListCard, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })] }));
 };
 
 function getAddonsForBillingPeriod(billingPeriod, addonPlans) {
@@ -27048,43 +27086,6 @@ const removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
 const createPlanDescription = (planDescription) => {
     return (planDescription || '').replace(removeHTMLTagsRegex, (_, y) => (y ? ' & ' : ''));
 };
-const getActivePlanPriceData = (priceList, selectedPriceList) => {
-    if (!priceList) {
-        return;
-    }
-    // If a period option is selected, return the charge that matches the selected period option
-    let activeBillingPLCharge;
-    // Default to first price list charge
-    let lowestPLCharge;
-    // Find the lowest price list charge with a billing period that matches the selected period option
-    if (priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
-        activeBillingPLCharge = priceList.charges[0];
-    }
-    for (let j = 0; j < priceList.charges.length; j++) {
-        const charge = priceList.charges[j];
-        if (charge.chargeType === ChargeType$1.USAGE || charge.featureAddon === true)
-            continue;
-        if (activeBillingPLCharge) {
-            // If we already found a charge with the same billing period check if this charge is lower
-            if (charge.basePrice < activeBillingPLCharge.basePrice &&
-                charge.billingPeriod === (activeBillingPLCharge === null || activeBillingPLCharge === void 0 ? void 0 : activeBillingPLCharge.billingPeriod)) {
-                activeBillingPLCharge = charge;
-            }
-        }
-        // If a period option is selected, only return the charge if it matches the selected period option
-        else if (selectedPriceList &&
-            charge.billingPeriod === periodMonthsConverter(selectedPriceList.periodMonths)) {
-            activeBillingPLCharge = charge;
-        }
-        // Otherwise, return the lowest price list charge
-        else if (charge.basePrice < ((lowestPLCharge === null || lowestPLCharge === void 0 ? void 0 : lowestPLCharge.basePrice) || -1)) {
-            lowestPLCharge = charge;
-        }
-    }
-    return {
-        activeCharge: activeBillingPLCharge || lowestPLCharge,
-    };
-};
 
 const PriceListCard_PriceListFragment = t(`
     fragment PriceListCard_PriceListFragment on PriceList {
@@ -27098,17 +27099,15 @@ const PriceListCard_PriceListFragment = t(`
     }
   `, [PriceListCardDesktop_PriceListFragment, PriceListCardMobile_PriceListFragment]);
 const PriceListCard = ({ hideButton, isSelected, priceList: maskedPriceList, subscriptions, trialRemainingDays, noBorder, onClickPriceListCard, disableCurrentPlan = false, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const isMobile = useIsMobile();
     const upgradingSubscription = useUpgradingSubscription();
     // Read fragments
     const priceList = readFragment(PriceListCard_PriceListFragment, maskedPriceList);
     // Derived state
     const description = createPlanDescription((_b = (_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : '');
-    // Get the active price list charge for this plan
-    const activeCharge = (_c = getActivePlanPriceData(priceList, priceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
     // Is the price list the current price list for the upgradingSubscription
-    const isPriceListCurrentSubscription = ((_d = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) === null || _d === void 0 ? void 0 : _d.id) === priceList.id;
+    const isPriceListCurrentSubscription = ((_c = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) === null || _c === void 0 ? void 0 : _c.id) === priceList.id;
     const disableSelectCurrentPlan = disableCurrentPlan;
     // We now support updating quantities by clicking the current plan. Therefore we shouldn't disable current plan
     // disableCurrentPlan ??
@@ -27123,13 +27122,9 @@ const PriceListCard = ({ hideButton, isSelected, priceList: maskedPriceList, sub
             subscription.state !== t.scalar('SubscriptionState', 'EXPIRED') &&
             ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
     });
-    if (!activeCharge) {
-        return null;
-    }
-    const { feature } = activeCharge;
-    return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, 
+    return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, 
         // TODO: naming mismatch disableOnClickPriceListCard vs disableSelectCurrentPlan, maybe also functionality mismatch? (ignore for now, mobile won't ever show this currently)
-        disableOnClickPriceListCard: disableSelectCurrentPlan, onClickPriceListCard: onClickPriceListCard })) : (jsxRuntime.jsx(PriceListCardDesktop, { hideButton: hideButton, description: description, disableSelectCurrentPlan: disableSelectCurrentPlan, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, noBorder: noBorder, onClickPriceListCard: onClickPriceListCard }));
+        disableOnClickPriceListCard: disableSelectCurrentPlan, onClickPriceListCard: onClickPriceListCard })) : (jsxRuntime.jsx(PriceListCardDesktop, { hideButton: hideButton, description: description, disableSelectCurrentPlan: disableSelectCurrentPlan, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, noBorder: noBorder, onClickPriceListCard: onClickPriceListCard }));
 };
 
 const mutation$a = t(`
@@ -27295,9 +27290,8 @@ const FeatureAddonRow_PriceListFragment = t(`
         id
         name
       }
-      ...PricingTooltip_PriceListFragment
     }
-  `, [PricingTooltip_PriceListFragment]);
+  `);
 const FeatureAddonRow_PriceListChargeFragment = t(`
     fragment FeatureAddonRow_PriceListChargeFragment on PriceListCharge {
       id
@@ -27318,7 +27312,7 @@ function FeatureAddonRow({ featureAddon: maskedFeatureAddon, priceList: maskedPr
     const isPurchased = isAddonPurchased(featureAddon, upgradingSubscription);
     const isDisabled = !isPriceListSelected || isPurchased;
     const checked = isChecked || isPurchased;
-    return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-flex-wrap bunny-items-center bunny-justify-between bunny-gap-1", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-1", children: [jsxRuntime.jsx(Text$7, { className: "bunny-flex bunny-text-sm bunny-items-center bunny-gap-1 bunny-text-gray-600", children: featureAddon.name }), jsxRuntime.jsx(PricingTooltip, { priceListCharges: [featureAddon], currencyId: priceList.currencyId, priceList: priceList })] }), jsxRuntime.jsx(antd.Switch, { id: featureAddonSwitchTestId(featureAddon.name), size: "small", loading: isPending, disabled: isDisabled || !quote, checked: checked, onChange: checked => {
+    return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-flex-wrap bunny-items-center bunny-justify-between bunny-gap-1", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-1", children: [jsxRuntime.jsx(Text$7, { className: "bunny-flex bunny-text-sm bunny-items-center bunny-gap-1 bunny-text-gray-600", children: featureAddon.name }), jsxRuntime.jsx(PricingTooltip, { priceListCharges: [featureAddon], currencyId: priceList.currencyId })] }), jsxRuntime.jsx(antd.Switch, { id: featureAddonSwitchTestId(featureAddon.name), size: "small", loading: isPending, disabled: isDisabled || !quote, checked: checked, onChange: checked => {
                     if (checked) {
                         handleAddFeatureAddon();
                     }
@@ -27694,20 +27688,19 @@ const AddonPlanRow_PriceListFragment = t(`
     PriceListCardPriceDescription_PriceListFragment,
 ]);
 function AddonPlanRow({ addonPriceList: maskedAddonPriceList, selectedPriceList, onClickSelect, isPurchased, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     // Read fragments
     const addonPriceList = readFragment(AddonPlanRow_PriceListFragment, maskedAddonPriceList);
     const { quote: maskedQuote, setIsAddonPlanLoading } = react.useContext(QuoteContext);
     const quote = readFragment(AddonPlanRow_QuoteFragment, maskedQuote);
     const { shadow, isInPreviewMode } = useSubscriptionProps();
     const { isPending, addedQuoteChange, addAddonQuoteChange, deleteQuoteChange } = useToggleAddonPlan(quote, addonPriceList.id, selectedPriceList, setIsAddonPlanLoading);
-    const activeCharge = (_a = getActivePlanPriceData(addonPriceList, selectedPriceList)) === null || _a === void 0 ? void 0 : _a.activeCharge;
     // Derived state
     const switchDisabled = isInPreviewMode || isPurchased;
-    const hasCustomPrice = !isEmptyHTML((_b = addonPriceList.plan) === null || _b === void 0 ? void 0 : _b.pricingDescription);
-    return (jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-row bunny-gap-2 bunny-justify-between bunny-items-center bunny-p-4 bunny-rounded-md bunny-bg-white ${shadow ? `shadow-${shadow}` : ''} bunny-mb-2`, children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center bunny-min-w-0 bunny-flex-1", children: [jsxRuntime.jsx(Shrink0Wrapper, { className: "bunny-font-medium bunny-text-center bunny-text-orange-600", children: (_c = addonPriceList.plan) === null || _c === void 0 ? void 0 : _c.name }), jsxRuntime.jsx("div", { className: "bunny-min-w-0 bunny-flex-1", children: jsxRuntime.jsx(PriceListCardDescription, { description: (_e = (_d = addonPriceList.plan) === null || _d === void 0 ? void 0 : _d.description) !== null && _e !== void 0 ? _e : '', className: "bunny-whitespace-nowrap" }) })] }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center bunny-shrink-0", children: [!hasCustomPrice && (jsxRuntime.jsx(Shrink0Wrapper, { children: jsxRuntime.jsx(PriceListCardPrice, { priceList: addonPriceList, className: "bunny-whitespace-nowrap bunny-text-sm bunny-font-medium bunny-text-gray-900" }) })), jsxRuntime.jsx(Shrink0Wrapper, { children: jsxRuntime.jsx(PriceListCardPriceDescription, { feature: activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.feature, priceList: addonPriceList }) }), jsxRuntime.jsx(Shrink0Wrapper, { children: jsxRuntime.jsx(antd.Button, { type: "link", onClick: () => {
+    const hasCustomPrice = !isEmptyHTML((_a = addonPriceList.plan) === null || _a === void 0 ? void 0 : _a.pricingDescription);
+    return (jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-row bunny-gap-2 bunny-justify-between bunny-items-center bunny-p-4 bunny-rounded-md bunny-bg-white ${shadow ? `shadow-${shadow}` : ''} bunny-mb-2`, children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center bunny-min-w-0 bunny-flex-1", children: [jsxRuntime.jsx(Shrink0Wrapper, { className: "bunny-font-medium bunny-text-center bunny-text-orange-600", children: (_b = addonPriceList.plan) === null || _b === void 0 ? void 0 : _b.name }), jsxRuntime.jsx("div", { className: "bunny-min-w-0 bunny-flex-1", children: jsxRuntime.jsx(PriceListCardDescription, { description: (_d = (_c = addonPriceList.plan) === null || _c === void 0 ? void 0 : _c.description) !== null && _d !== void 0 ? _d : '', className: "bunny-whitespace-nowrap" }) })] }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center bunny-shrink-0", children: [!hasCustomPrice && (jsxRuntime.jsx(Shrink0Wrapper, { children: jsxRuntime.jsx(PriceListCardPrice, { priceList: addonPriceList, className: "bunny-whitespace-nowrap bunny-text-sm bunny-font-medium bunny-text-gray-900" }) })), jsxRuntime.jsx(Shrink0Wrapper, { children: jsxRuntime.jsx(PriceListCardPriceDescription, { priceList: addonPriceList }) }), jsxRuntime.jsx(Shrink0Wrapper, { children: jsxRuntime.jsx(antd.Button, { type: "link", onClick: () => {
                                 onClickSelect();
-                            }, children: jsxRuntime.jsx(icons.InfoCircleOutlined, {}) }) }), jsxRuntime.jsx(antd.Switch, { id: addonPlanSwitchTestId((_g = (_f = addonPriceList.plan) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : ''), loading: isPending && !switchDisabled, checked: addedQuoteChange || isPurchased, onChange: (checked) => {
+                            }, children: jsxRuntime.jsx(icons.InfoCircleOutlined, {}) }) }), jsxRuntime.jsx(antd.Switch, { id: addonPlanSwitchTestId((_f = (_e = addonPriceList.plan) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : ''), loading: isPending && !switchDisabled, checked: addedQuoteChange || isPurchased, onChange: (checked) => {
                             if (checked) {
                                 addAddonQuoteChange();
                             }