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

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';
+const PACKAGE_VERSION = '1.6.0-beta.9.2';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -21983,23 +21983,22 @@ const QuantityInput = ({ charge: maskedCharge, chargeIndex, editingQuote, setEdi
             setUpdatingChargeQuantityId(undefined);
             setEditingQuoteData(undefined);
         }
-        if (quantity === charge.quantity) {
-            setEditingQuoteData(undefined);
-            showErrorNotification('New quantity cannot be the same as current');
-        }
-        else {
-            if (quantity !== undefined && quantity !== charge.quantity) {
-                if (!(charge === null || charge === void 0 ? void 0 : charge.priceListChargeId)) {
-                    showErrorNotification('Charge ID is not found');
-                    return;
-                }
-                setUpdatingChargeQuantityId(getUpdatingChargeQuantityId(charge.priceListChargeId, subscription.id));
+        if (quantity !== undefined && quantity !== charge.quantity) {
+            if (!(charge === null || charge === void 0 ? void 0 : charge.priceListChargeId)) {
+                showErrorNotification('Charge ID is not found');
+                return;
             }
+            setUpdatingChargeQuantityId(getUpdatingChargeQuantityId(charge.priceListChargeId, subscription.id));
         }
     };
     const handleSubscriptionUpdate = (editedSubscription) => {
         if (!editedSubscription || editedSubscription.quantity === undefined)
             return;
+        if (editedSubscription.quantity === charge.quantity) {
+            setEditingQuoteData(undefined);
+            showErrorNotification('New quantity cannot be the same as current');
+            return;
+        }
         // If we are not editing a quote, we create a new one
         if (!editingQuote) {
             createQuote.mutate(editedSubscription.subscription.id);
@@ -22627,51 +22626,6 @@ function getAddonsForBillingPeriod(billingPeriod, addonPlans) {
 
 const AddonIndentation = ({ isLast, indentation, verticalMargin, }) => (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-relative", style: { width: `${indentation}px` }, children: [jsxRuntime.jsx("div", { className: `bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto`, style: { marginTop: verticalMargin } }), jsxRuntime.jsx("div", { className: "bunny-bg-gray-300 bunny-h-0.5 bunny-w-1/2 bunny-ml-auto" }), isLast ? (jsxRuntime.jsx("div", { className: "bunny-flex-1" })) : (jsxRuntime.jsx("div", { className: `bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto`, style: { marginBottom: verticalMargin } }))] }));
 
-const FEATURE_USAGE_MUTATION = `
-query GetFeatureUsage($id: ID!) {
-  featureUsageHistogram(subscriptionChargeId: $id) {
-    subscriptionCharge { 
-      id
-      name
-      amount
-      currentPeriodPriceByTiers { 
-        tier { starts price } 
-        quantity
-        amount
-      }
-    }
-    feature { id name }
-    periodRange
-    dataInterval
-    data {
-      periodStart
-      periodEnd
-      intervals {
-        intervalStart
-        intervalUsage
-      }
-      intervalsTotal
-    }
-  }
-}
-`;
-const getFeatureUsage = async ({ subscriptionChargeId, token, apiHost, }) => {
-    var _a;
-    const vars = {
-        id: subscriptionChargeId,
-    };
-    const response = await gqlRequest({
-        query: FEATURE_USAGE_MUTATION,
-        token,
-        vars,
-        apiHost,
-    });
-    if ((_a = response.featureUsageHistogram) === null || _a === void 0 ? void 0 : _a.data)
-        return response.featureUsageHistogram;
-    else
-        throw new Error('No data found');
-};
-
 var utc$2 = {exports: {}};
 
 var utc$1 = utc$2.exports;
@@ -23269,24 +23223,10 @@ const SubscriptionCardDesktop = ({ onChangePlanClick, onCancelSubscriptionClick,
 };
 const SubscriptionCardDesktopRow = ({ charge, chargeIndex, subscription, }) => {
     var _a, _b, _c;
-    // Context
-    const { apiHost } = react.useContext(BunnyContext);
-    const token = useToken();
     // 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 isFirstRampRow = chargeIndex === 0 || (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId) !== charge.priceListChargeId;
     const chargePeriod = `${common.formatDate(charge.startDate)} - ${common.formatDate(charge.endDate)}`;
-    // Queries
-    const { data } = reactQuery.useQuery({
-        queryKey: ['getFeatureUsage', charge.id],
-        queryFn: () => getFeatureUsage({
-            subscriptionChargeId: charge.id,
-            token,
-            apiHost,
-        }),
-        enabled: (!isRamp || (isRamp && isFirstRampRow)) && charge.chargeType === common.ChargeType.USAGE,
-    });
     const isRampFirstRow = isRamp && chargeIndex === 0;
     const isTrial = charge.trial;
     const isDiscount = charge.kind === common.QuoteChangeKind.DISCOUNT;
@@ -23297,7 +23237,7 @@ const SubscriptionCardDesktopRow = ({ charge, chargeIndex, subscription, }) => {
     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
                     ? ''
                     : charge.chargeType === common.ChargeType.USAGE
-                        ? data && jsxRuntime.jsx(FeatureUsageGraph, { charge: charge, featureUsage: data, useAreaChart: true })
+                        ? 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 }) })] }));
@@ -25354,6 +25294,23 @@ const SubscriptionsQuery = t(`
               id
               code
             }
+            histogram {
+              feature {
+                id
+                name
+              }
+              periodRange
+              dataInterval
+              data {
+                periodStart
+                periodEnd
+                intervals {
+                  intervalStart
+                  intervalUsage
+                }
+                intervalsTotal
+              }
+            }
             amount
             billingPeriod
             chargeType

package/dist/cjs/types/src/types/SubscriptionCharge.d.ts

@@ -0,0 +1,39 @@
+import { Account, BillingPeriod, ChargeType, Currency, Feature, FeatureUsage, PriceList, PriceListCharge, PriceTier, PricingModel, QuoteChangeKind } from '@bunnyapp/common';
+export type SubscriptionCharge = {
+    account: Account;
+    amount: number;
+    billingPeriod: BillingPeriod;
+    chargeType: ChargeType;
+    createdAt: string;
+    currency: Currency;
+    discount?: number;
+    discountedPrice: string;
+    endDate: string;
+    expired: boolean;
+    feature?: Feature;
+    id: string;
+    invoiceLineText: string;
+    isAmendment: boolean;
+    isRamp?: boolean;
+    kind: QuoteChangeKind;
+    name: string;
+    periodPrice: number;
+    price: string;
+    priceDecimals: number;
+    priceList: PriceList;
+    priceListCharge?: PriceListCharge;
+    priceListChargeId: string;
+    priceListId: string;
+    priceTiers: PriceTier[];
+    pricingModel: PricingModel;
+    prorationRate?: number;
+    quantity: number;
+    quantityMax?: number;
+    quantityMin?: number;
+    selfServiceQuantity?: boolean;
+    startDate: string;
+    tieredAveragePrice?: number;
+    trial: boolean;
+    updatedAt: string;
+    histogram?: FeatureUsage;
+};

package/dist/cjs/types/src/utils/pricePickerUtils.d.ts

@@ -1,5 +1,5 @@
 import { BillingPeriod, Plan, Product } from "@bunnyapp/common";
 export type PeriodMonths = 0 | 1 | 3 | 6 | 12;
 export declare const periodMonthsConverter: (period: PeriodMonths) => BillingPeriod;
-export declare const billingPeriodConverter: (period?: BillingPeriod) => 0 | 1 | 3 | 6 | 12;
+export declare const billingPeriodConverter: (period?: BillingPeriod) => 1 | 0 | 3 | 6 | 12;
 export declare const createAvailableBillingPeriods: (plans?: Plan[], selectedProduct?: Product) => (0 | 1 | 3 | 6 | 12)[] | undefined;

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';
+const PACKAGE_VERSION = '1.6.0-beta.9.2';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -21981,23 +21981,22 @@ const QuantityInput = ({ charge: maskedCharge, chargeIndex, editingQuote, setEdi
             setUpdatingChargeQuantityId(undefined);
             setEditingQuoteData(undefined);
         }
-        if (quantity === charge.quantity) {
-            setEditingQuoteData(undefined);
-            showErrorNotification('New quantity cannot be the same as current');
-        }
-        else {
-            if (quantity !== undefined && quantity !== charge.quantity) {
-                if (!(charge === null || charge === void 0 ? void 0 : charge.priceListChargeId)) {
-                    showErrorNotification('Charge ID is not found');
-                    return;
-                }
-                setUpdatingChargeQuantityId(getUpdatingChargeQuantityId(charge.priceListChargeId, subscription.id));
+        if (quantity !== undefined && quantity !== charge.quantity) {
+            if (!(charge === null || charge === void 0 ? void 0 : charge.priceListChargeId)) {
+                showErrorNotification('Charge ID is not found');
+                return;
             }
+            setUpdatingChargeQuantityId(getUpdatingChargeQuantityId(charge.priceListChargeId, subscription.id));
         }
     };
     const handleSubscriptionUpdate = (editedSubscription) => {
         if (!editedSubscription || editedSubscription.quantity === undefined)
             return;
+        if (editedSubscription.quantity === charge.quantity) {
+            setEditingQuoteData(undefined);
+            showErrorNotification('New quantity cannot be the same as current');
+            return;
+        }
         // If we are not editing a quote, we create a new one
         if (!editingQuote) {
             createQuote.mutate(editedSubscription.subscription.id);
@@ -22625,51 +22624,6 @@ function getAddonsForBillingPeriod(billingPeriod, addonPlans) {
 
 const AddonIndentation = ({ isLast, indentation, verticalMargin, }) => (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-relative", style: { width: `${indentation}px` }, children: [jsx("div", { className: `bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto`, style: { marginTop: verticalMargin } }), jsx("div", { className: "bunny-bg-gray-300 bunny-h-0.5 bunny-w-1/2 bunny-ml-auto" }), isLast ? (jsx("div", { className: "bunny-flex-1" })) : (jsx("div", { className: `bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto`, style: { marginBottom: verticalMargin } }))] }));
 
-const FEATURE_USAGE_MUTATION = `
-query GetFeatureUsage($id: ID!) {
-  featureUsageHistogram(subscriptionChargeId: $id) {
-    subscriptionCharge { 
-      id
-      name
-      amount
-      currentPeriodPriceByTiers { 
-        tier { starts price } 
-        quantity
-        amount
-      }
-    }
-    feature { id name }
-    periodRange
-    dataInterval
-    data {
-      periodStart
-      periodEnd
-      intervals {
-        intervalStart
-        intervalUsage
-      }
-      intervalsTotal
-    }
-  }
-}
-`;
-const getFeatureUsage = async ({ subscriptionChargeId, token, apiHost, }) => {
-    var _a;
-    const vars = {
-        id: subscriptionChargeId,
-    };
-    const response = await gqlRequest({
-        query: FEATURE_USAGE_MUTATION,
-        token,
-        vars,
-        apiHost,
-    });
-    if ((_a = response.featureUsageHistogram) === null || _a === void 0 ? void 0 : _a.data)
-        return response.featureUsageHistogram;
-    else
-        throw new Error('No data found');
-};
-
 var utc$2 = {exports: {}};
 
 var utc$1 = utc$2.exports;
@@ -23267,24 +23221,10 @@ const SubscriptionCardDesktop = ({ onChangePlanClick, onCancelSubscriptionClick,
 };
 const SubscriptionCardDesktopRow = ({ charge, chargeIndex, subscription, }) => {
     var _a, _b, _c;
-    // Context
-    const { apiHost } = useContext(BunnyContext);
-    const token = useToken();
     // 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 isFirstRampRow = chargeIndex === 0 || (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId) !== charge.priceListChargeId;
     const chargePeriod = `${formatDate(charge.startDate)} - ${formatDate(charge.endDate)}`;
-    // Queries
-    const { data } = useQuery({
-        queryKey: ['getFeatureUsage', charge.id],
-        queryFn: () => getFeatureUsage({
-            subscriptionChargeId: charge.id,
-            token,
-            apiHost,
-        }),
-        enabled: (!isRamp || (isRamp && isFirstRampRow)) && charge.chargeType === ChargeType.USAGE,
-    });
     const isRampFirstRow = isRamp && chargeIndex === 0;
     const isTrial = charge.trial;
     const isDiscount = charge.kind === QuoteChangeKind.DISCOUNT;
@@ -23295,7 +23235,7 @@ const SubscriptionCardDesktopRow = ({ charge, chargeIndex, subscription, }) => {
     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
                     ? ''
                     : charge.chargeType === ChargeType.USAGE
-                        ? data && jsx(FeatureUsageGraph, { charge: charge, featureUsage: data, useAreaChart: true })
+                        ? 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 }) })] }));
@@ -25352,6 +25292,23 @@ const SubscriptionsQuery = t(`
               id
               code
             }
+            histogram {
+              feature {
+                id
+                name
+              }
+              periodRange
+              dataInterval
+              data {
+                periodStart
+                periodEnd
+                intervals {
+                  intervalStart
+                  intervalUsage
+                }
+                intervalsTotal
+              }
+            }
             amount
             billingPeriod
             chargeType

package/dist/esm/types/src/types/SubscriptionCharge.d.ts

@@ -0,0 +1,39 @@
+import { Account, BillingPeriod, ChargeType, Currency, Feature, FeatureUsage, PriceList, PriceListCharge, PriceTier, PricingModel, QuoteChangeKind } from '@bunnyapp/common';
+export type SubscriptionCharge = {
+    account: Account;
+    amount: number;
+    billingPeriod: BillingPeriod;
+    chargeType: ChargeType;
+    createdAt: string;
+    currency: Currency;
+    discount?: number;
+    discountedPrice: string;
+    endDate: string;
+    expired: boolean;
+    feature?: Feature;
+    id: string;
+    invoiceLineText: string;
+    isAmendment: boolean;
+    isRamp?: boolean;
+    kind: QuoteChangeKind;
+    name: string;
+    periodPrice: number;
+    price: string;
+    priceDecimals: number;
+    priceList: PriceList;
+    priceListCharge?: PriceListCharge;
+    priceListChargeId: string;
+    priceListId: string;
+    priceTiers: PriceTier[];
+    pricingModel: PricingModel;
+    prorationRate?: number;
+    quantity: number;
+    quantityMax?: number;
+    quantityMin?: number;
+    selfServiceQuantity?: boolean;
+    startDate: string;
+    tieredAveragePrice?: number;
+    trial: boolean;
+    updatedAt: string;
+    histogram?: FeatureUsage;
+};

package/dist/esm/types/src/utils/pricePickerUtils.d.ts

@@ -1,5 +1,5 @@
 import { BillingPeriod, Plan, Product } from "@bunnyapp/common";
 export type PeriodMonths = 0 | 1 | 3 | 6 | 12;
 export declare const periodMonthsConverter: (period: PeriodMonths) => BillingPeriod;
-export declare const billingPeriodConverter: (period?: BillingPeriod) => 0 | 1 | 3 | 6 | 12;
+export declare const billingPeriodConverter: (period?: BillingPeriod) => 1 | 0 | 3 | 6 | 12;
 export declare const createAvailableBillingPeriods: (plans?: Plan[], selectedProduct?: Product) => (0 | 1 | 3 | 6 | 12)[] | undefined;

package/package.json

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

package/dist/cjs/types/src/graphql/queries/getFeatureUsage.d.ts

@@ -1,7 +0,0 @@
-import { FeatureUsage } from '@bunnyapp/common';
-declare const getFeatureUsage: ({ subscriptionChargeId, token, apiHost, }: {
-    subscriptionChargeId: string;
-    token?: string;
-    apiHost: string;
-}) => Promise<FeatureUsage>;
-export default getFeatureUsage;

package/dist/esm/types/src/graphql/queries/getFeatureUsage.d.ts

@@ -1,7 +0,0 @@
-import { FeatureUsage } from '@bunnyapp/common';
-declare const getFeatureUsage: ({ subscriptionChargeId, token, apiHost, }: {
-    subscriptionChargeId: string;
-    token?: string;
-    apiHost: string;
-}) => Promise<FeatureUsage>;
-export default getFeatureUsage;