@bunnyapp/components 1.0.21 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +8 -0
  2. package/dist/cjs/index.js +7 -3
  3. package/dist/cjs/playground/billingdetails/index.d.ts +1 -0
  4. package/dist/cjs/playground/transactions/index.d.ts +1 -0
  5. package/dist/cjs/src/components/Quote/Quote.stories.d.ts +20 -20
  6. package/dist/esm/index.js +8 -4
  7. package/dist/esm/playground/billingdetails/index.d.ts +1 -0
  8. package/dist/esm/playground/transactions/index.d.ts +1 -0
  9. package/dist/esm/src/components/Quote/Quote.stories.d.ts +20 -20
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -80,3 +80,11 @@ function App() {
80
80
  - `token`: Token that allows access to the Bunny API. Generate this using `portalSessionCreate` from [docs](https://docs.bunny.com/developer/api-reference/mutations/portalsessioncreate)
81
81
  - `subdomain`: The subdomain the components will make requests to. e.g. `https://acme.bunny.com`
82
82
  - `window`: The window to use for the BunnyProvider. We use the window for handling payment objects.
83
+
84
+ ## Development
85
+
86
+ To run the development server, run `npm run dev`.
87
+
88
+ ### Storybook stories
89
+
90
+ To view the storybook stories, run `npm run storybook`.
package/dist/cjs/index.js CHANGED
@@ -4214,7 +4214,7 @@ function Signup(_a) {
4214
4214
  : "w-1/2 items-center justify-center my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
4215
4215
  }
4216
4216
 
4217
- var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
4217
+ var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
4218
4218
  var getSubscriptions = function (_a) {
4219
4219
  var apiHost = _a.apiHost, entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
4220
4220
  return __awaiter(void 0, void 0, void 0, function () {
@@ -4240,7 +4240,8 @@ var getSubscriptions = function (_a) {
4240
4240
  var useSubscriptions = function (_a) {
4241
4241
  var data = _a.data;
4242
4242
  return React.useMemo(function () {
4243
- var combinedSubscriptions = data === null || data === void 0 ? void 0 : data.map(function (subscription) {
4243
+ var clonedData = lodash.cloneDeep(data);
4244
+ var combinedSubscriptions = clonedData === null || clonedData === void 0 ? void 0 : clonedData.map(function (subscription) {
4244
4245
  var _a;
4245
4246
  var orderedSubscriptionCharges = subscription.charges.sort(function (a, b) {
4246
4247
  if (a.priceListChargeId !== b.priceListChargeId) {
@@ -4662,6 +4663,7 @@ var SubscriptionCardDesktop = function (_a) {
4662
4663
  })] }))] })));
4663
4664
  };
4664
4665
  var SubscriptionCardDesktopRow = function (_a) {
4666
+ var _b, _c;
4665
4667
  var charge = _a.charge, chargeIndex = _a.chargeIndex, subscription = _a.subscription;
4666
4668
  // Context
4667
4669
  var apiHost = React.useContext(BunnyContext).apiHost;
@@ -4699,7 +4701,9 @@ var SubscriptionCardDesktopRow = function (_a) {
4699
4701
  ? ""
4700
4702
  : charge.chargeType === common.ChargeType.USAGE
4701
4703
  ? data && jsxRuntime.jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
4702
- : charge.quantity })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
4704
+ : charge.isAmendment
4705
+ ? "+".concat((_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString())
4706
+ : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
4703
4707
  };
4704
4708
 
4705
4709
  var Text = antd.Typography.Text;
package/dist/cjs/playground/billingdetails/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/cjs/playground/transactions/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/cjs/src/components/Quote/Quote.stories.d.ts CHANGED
@@ -16,13 +16,13 @@ export declare const Default: import("@storybook/csf").StoryAnnotations<import("
16
16
  className?: string | undefined;
17
17
  hideDownloadButton?: boolean | undefined;
18
18
  }, {
19
- entityId?: string | undefined;
20
- className?: string | undefined;
21
- id?: string | undefined;
22
- shadow?: import("../../types/shadowType").ShadowType | undefined;
23
19
  backButtonName?: string | undefined;
24
20
  onBackButtonClick?: (() => void) | undefined;
21
+ shadow?: import("../../types/shadowType").ShadowType | undefined;
25
22
  hideDownloadButton?: boolean | undefined;
23
+ id?: string | undefined;
24
+ className?: string | undefined;
25
+ entityId?: string | undefined;
26
26
  onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
27
27
  invoiceQuoteViewComponent?: import("react").ReactNode;
28
28
  onInvoiceDownloadError?: (() => void) | undefined;
@@ -39,13 +39,13 @@ export declare const NoShadow: import("@storybook/csf").StoryAnnotations<import(
39
39
  className?: string | undefined;
40
40
  hideDownloadButton?: boolean | undefined;
41
41
  }, {
42
- entityId?: string | undefined;
43
- className?: string | undefined;
44
- id?: string | undefined;
45
- shadow?: import("../../types/shadowType").ShadowType | undefined;
46
42
  backButtonName?: string | undefined;
47
43
  onBackButtonClick?: (() => void) | undefined;
44
+ shadow?: import("../../types/shadowType").ShadowType | undefined;
48
45
  hideDownloadButton?: boolean | undefined;
46
+ id?: string | undefined;
47
+ className?: string | undefined;
48
+ entityId?: string | undefined;
49
49
  onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
50
50
  invoiceQuoteViewComponent?: import("react").ReactNode;
51
51
  onInvoiceDownloadError?: (() => void) | undefined;
@@ -62,13 +62,13 @@ export declare const Mobile: import("@storybook/csf").StoryAnnotations<import("@
62
62
  className?: string | undefined;
63
63
  hideDownloadButton?: boolean | undefined;
64
64
  }, {
65
- entityId?: string | undefined;
66
- className?: string | undefined;
67
- id?: string | undefined;
68
- shadow?: import("../../types/shadowType").ShadowType | undefined;
69
65
  backButtonName?: string | undefined;
70
66
  onBackButtonClick?: (() => void) | undefined;
67
+ shadow?: import("../../types/shadowType").ShadowType | undefined;
71
68
  hideDownloadButton?: boolean | undefined;
69
+ id?: string | undefined;
70
+ className?: string | undefined;
71
+ entityId?: string | undefined;
72
72
  onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
73
73
  invoiceQuoteViewComponent?: import("react").ReactNode;
74
74
  onInvoiceDownloadError?: (() => void) | undefined;
@@ -85,13 +85,13 @@ export declare const CustomClassName: import("@storybook/csf").StoryAnnotations<
85
85
  className?: string | undefined;
86
86
  hideDownloadButton?: boolean | undefined;
87
87
  }, {
88
- entityId?: string | undefined;
89
- className?: string | undefined;
90
- id?: string | undefined;
91
- shadow?: import("../../types/shadowType").ShadowType | undefined;
92
88
  backButtonName?: string | undefined;
93
89
  onBackButtonClick?: (() => void) | undefined;
90
+ shadow?: import("../../types/shadowType").ShadowType | undefined;
94
91
  hideDownloadButton?: boolean | undefined;
92
+ id?: string | undefined;
93
+ className?: string | undefined;
94
+ entityId?: string | undefined;
95
95
  onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
96
96
  invoiceQuoteViewComponent?: import("react").ReactNode;
97
97
  onInvoiceDownloadError?: (() => void) | undefined;
@@ -111,13 +111,13 @@ export declare const DarkMode: import("@storybook/csf").StoryAnnotations<import(
111
111
  className?: string | undefined;
112
112
  hideDownloadButton?: boolean | undefined;
113
113
  }, {
114
- entityId?: string | undefined;
115
- className?: string | undefined;
116
- id?: string | undefined;
117
- shadow?: import("../../types/shadowType").ShadowType | undefined;
118
114
  backButtonName?: string | undefined;
119
115
  onBackButtonClick?: (() => void) | undefined;
116
+ shadow?: import("../../types/shadowType").ShadowType | undefined;
120
117
  hideDownloadButton?: boolean | undefined;
118
+ id?: string | undefined;
119
+ className?: string | undefined;
120
+ entityId?: string | undefined;
121
121
  onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
122
122
  invoiceQuoteViewComponent?: import("react").ReactNode;
123
123
  onInvoiceDownloadError?: (() => void) | undefined;
package/dist/esm/index.js CHANGED
@@ -12,7 +12,7 @@ import request, { GraphQLClient } from 'graphql-request';
12
12
  import { HelmetProvider, Helmet } from 'react-helmet-async';
13
13
  import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
14
14
  import { loadStripe } from '@stripe/stripe-js/pure';
15
- import { capitalize, startCase, omit } from 'lodash';
15
+ import { capitalize, startCase, cloneDeep, omit } from 'lodash';
16
16
  import { BarChart, ResponsiveContainer, XAxis, Tooltip, Bar, Rectangle } from 'recharts';
17
17
 
18
18
  function styleInject(css, ref) {
@@ -4185,7 +4185,7 @@ function Signup(_a) {
4185
4185
  : "w-1/2 items-center justify-center my-12") }, { children: jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
4186
4186
  }
4187
4187
 
4188
- var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
4188
+ var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
4189
4189
  var getSubscriptions = function (_a) {
4190
4190
  var apiHost = _a.apiHost, entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
4191
4191
  return __awaiter(void 0, void 0, void 0, function () {
@@ -4211,7 +4211,8 @@ var getSubscriptions = function (_a) {
4211
4211
  var useSubscriptions = function (_a) {
4212
4212
  var data = _a.data;
4213
4213
  return useMemo(function () {
4214
- var combinedSubscriptions = data === null || data === void 0 ? void 0 : data.map(function (subscription) {
4214
+ var clonedData = cloneDeep(data);
4215
+ var combinedSubscriptions = clonedData === null || clonedData === void 0 ? void 0 : clonedData.map(function (subscription) {
4215
4216
  var _a;
4216
4217
  var orderedSubscriptionCharges = subscription.charges.sort(function (a, b) {
4217
4218
  if (a.priceListChargeId !== b.priceListChargeId) {
@@ -4633,6 +4634,7 @@ var SubscriptionCardDesktop = function (_a) {
4633
4634
  })] }))] })));
4634
4635
  };
4635
4636
  var SubscriptionCardDesktopRow = function (_a) {
4637
+ var _b, _c;
4636
4638
  var charge = _a.charge, chargeIndex = _a.chargeIndex, subscription = _a.subscription;
4637
4639
  // Context
4638
4640
  var apiHost = useContext(BunnyContext).apiHost;
@@ -4670,7 +4672,9 @@ var SubscriptionCardDesktopRow = function (_a) {
4670
4672
  ? ""
4671
4673
  : charge.chargeType === ChargeType.USAGE
4672
4674
  ? data && jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
4673
- : charge.quantity })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
4675
+ : charge.isAmendment
4676
+ ? "+".concat((_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString())
4677
+ : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
4674
4678
  };
4675
4679
 
4676
4680
  var Text = Typography.Text;
package/dist/esm/playground/billingdetails/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/esm/playground/transactions/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/esm/src/components/Quote/Quote.stories.d.ts CHANGED
@@ -16,13 +16,13 @@ export declare const Default: import("@storybook/csf").StoryAnnotations<import("
16
16
  className?: string | undefined;
17
17
  hideDownloadButton?: boolean | undefined;
18
18
  }, {
19
- entityId?: string | undefined;
20
- className?: string | undefined;
21
- id?: string | undefined;
22
- shadow?: import("../../types/shadowType").ShadowType | undefined;
23
19
  backButtonName?: string | undefined;
24
20
  onBackButtonClick?: (() => void) | undefined;
21
+ shadow?: import("../../types/shadowType").ShadowType | undefined;
25
22
  hideDownloadButton?: boolean | undefined;
23
+ id?: string | undefined;
24
+ className?: string | undefined;
25
+ entityId?: string | undefined;
26
26
  onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
27
27
  invoiceQuoteViewComponent?: import("react").ReactNode;
28
28
  onInvoiceDownloadError?: (() => void) | undefined;
@@ -39,13 +39,13 @@ export declare const NoShadow: import("@storybook/csf").StoryAnnotations<import(
39
39
  className?: string | undefined;
40
40
  hideDownloadButton?: boolean | undefined;
41
41
  }, {
42
- entityId?: string | undefined;
43
- className?: string | undefined;
44
- id?: string | undefined;
45
- shadow?: import("../../types/shadowType").ShadowType | undefined;
46
42
  backButtonName?: string | undefined;
47
43
  onBackButtonClick?: (() => void) | undefined;
44
+ shadow?: import("../../types/shadowType").ShadowType | undefined;
48
45
  hideDownloadButton?: boolean | undefined;
46
+ id?: string | undefined;
47
+ className?: string | undefined;
48
+ entityId?: string | undefined;
49
49
  onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
50
50
  invoiceQuoteViewComponent?: import("react").ReactNode;
51
51
  onInvoiceDownloadError?: (() => void) | undefined;
@@ -62,13 +62,13 @@ export declare const Mobile: import("@storybook/csf").StoryAnnotations<import("@
62
62
  className?: string | undefined;
63
63
  hideDownloadButton?: boolean | undefined;
64
64
  }, {
65
- entityId?: string | undefined;
66
- className?: string | undefined;
67
- id?: string | undefined;
68
- shadow?: import("../../types/shadowType").ShadowType | undefined;
69
65
  backButtonName?: string | undefined;
70
66
  onBackButtonClick?: (() => void) | undefined;
67
+ shadow?: import("../../types/shadowType").ShadowType | undefined;
71
68
  hideDownloadButton?: boolean | undefined;
69
+ id?: string | undefined;
70
+ className?: string | undefined;
71
+ entityId?: string | undefined;
72
72
  onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
73
73
  invoiceQuoteViewComponent?: import("react").ReactNode;
74
74
  onInvoiceDownloadError?: (() => void) | undefined;
@@ -85,13 +85,13 @@ export declare const CustomClassName: import("@storybook/csf").StoryAnnotations<
85
85
  className?: string | undefined;
86
86
  hideDownloadButton?: boolean | undefined;
87
87
  }, {
88
- entityId?: string | undefined;
89
- className?: string | undefined;
90
- id?: string | undefined;
91
- shadow?: import("../../types/shadowType").ShadowType | undefined;
92
88
  backButtonName?: string | undefined;
93
89
  onBackButtonClick?: (() => void) | undefined;
90
+ shadow?: import("../../types/shadowType").ShadowType | undefined;
94
91
  hideDownloadButton?: boolean | undefined;
92
+ id?: string | undefined;
93
+ className?: string | undefined;
94
+ entityId?: string | undefined;
95
95
  onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
96
96
  invoiceQuoteViewComponent?: import("react").ReactNode;
97
97
  onInvoiceDownloadError?: (() => void) | undefined;
@@ -111,13 +111,13 @@ export declare const DarkMode: import("@storybook/csf").StoryAnnotations<import(
111
111
  className?: string | undefined;
112
112
  hideDownloadButton?: boolean | undefined;
113
113
  }, {
114
- entityId?: string | undefined;
115
- className?: string | undefined;
116
- id?: string | undefined;
117
- shadow?: import("../../types/shadowType").ShadowType | undefined;
118
114
  backButtonName?: string | undefined;
119
115
  onBackButtonClick?: (() => void) | undefined;
116
+ shadow?: import("../../types/shadowType").ShadowType | undefined;
120
117
  hideDownloadButton?: boolean | undefined;
118
+ id?: string | undefined;
119
+ className?: string | undefined;
120
+ entityId?: string | undefined;
121
121
  onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
122
122
  invoiceQuoteViewComponent?: import("react").ReactNode;
123
123
  onInvoiceDownloadError?: (() => void) | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bunnyapp/components",
3
- "version": "1.0.21",
3
+ "version": "1.0.23",
4
4
  "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",