@bunnyapp/components 1.0.62-beta.2 → 1.0.62-beta.4
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.
- package/dist/cjs/index.js +40 -30
- package/dist/cjs/src/components/Quote/Quote.stories.d.ts +70 -116
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts +1 -1
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +1 -1
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +1 -1
- package/dist/cjs/src/components/Subscriptions/SubscriptionsListContainer.d.ts +2 -2
- package/dist/cjs/src/enums/BillingPeriodConverter.d.ts +8 -0
- package/dist/cjs/src/hooks/usePlugins.d.ts +1 -1
- package/dist/cjs/src/mocks/handlers.d.ts +1 -1
- package/dist/esm/index.js +40 -31
- package/dist/esm/src/components/Quote/Quote.stories.d.ts +70 -116
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts +1 -1
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +1 -1
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +1 -1
- package/dist/esm/src/components/Subscriptions/SubscriptionsListContainer.d.ts +2 -2
- package/dist/esm/src/enums/BillingPeriodConverter.d.ts +8 -0
- package/dist/esm/src/hooks/usePlugins.d.ts +1 -1
- package/dist/esm/src/mocks/handlers.d.ts +1 -1
- package/package.json +3 -2
- package/dist/cjs/src/graphql/queries/getPlanChangeOptions.d.ts +0 -8
- package/dist/esm/src/graphql/queries/getPlanChangeOptions.d.ts +0 -8
package/dist/cjs/index.js
CHANGED
|
@@ -15,6 +15,7 @@ var recoil = require('recoil');
|
|
|
15
15
|
var request = require('graphql-request');
|
|
16
16
|
var reactStripeJs = require('@stripe/react-stripe-js');
|
|
17
17
|
var index_js = require('@stripe/stripe-js/pure/index.js');
|
|
18
|
+
var parse = require('html-react-parser');
|
|
18
19
|
var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
19
20
|
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
|
|
20
21
|
var recharts = require('recharts');
|
|
@@ -44,6 +45,7 @@ function _interopNamespace(e) {
|
|
|
44
45
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
45
46
|
var theme__default = /*#__PURE__*/_interopDefaultLegacy(theme);
|
|
46
47
|
var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
|
|
48
|
+
var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
|
|
47
49
|
var pkg__default = /*#__PURE__*/_interopDefaultLegacy(pkg);
|
|
48
50
|
|
|
49
51
|
function styleInject(css, ref) {
|
|
@@ -171,7 +173,7 @@ var BrandContext = react.createContext({
|
|
|
171
173
|
});
|
|
172
174
|
|
|
173
175
|
// This will be replaced at build time by rollup-plugin-replace
|
|
174
|
-
var PACKAGE_VERSION = '1.0.62-beta.
|
|
176
|
+
var PACKAGE_VERSION = '1.0.62-beta.4';
|
|
175
177
|
var createRequestHeaders = function (token) {
|
|
176
178
|
var _a;
|
|
177
179
|
var bearerToken = token ? "Bearer ".concat(token) : null;
|
|
@@ -19036,7 +19038,6 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
|
|
|
19036
19038
|
return { setDefaultPaymentMethod: setDefaultPaymentMethod, loading: loading };
|
|
19037
19039
|
}
|
|
19038
19040
|
|
|
19039
|
-
var Panel = antd.Collapse.Panel;
|
|
19040
19041
|
var showErrorNotification$1 = common.useErrorNotification();
|
|
19041
19042
|
var PaymentForm = function (_a) {
|
|
19042
19043
|
var _b;
|
|
@@ -19119,7 +19120,14 @@ var PaymentForm = function (_a) {
|
|
|
19119
19120
|
storedPaymentMethods: storedPaymentMethods,
|
|
19120
19121
|
defaultPaymentMethod: defaultPaymentMethod,
|
|
19121
19122
|
customCheckoutFunction: customCheckoutFunction,
|
|
19122
|
-
} }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsxRuntime.jsx(antd.Collapse,
|
|
19123
|
+
} }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsxRuntime.jsx(antd.Collapse, { bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyOnHidden: true, items: [
|
|
19124
|
+
{
|
|
19125
|
+
key: '1',
|
|
19126
|
+
showArrow: false,
|
|
19127
|
+
label: !showPaymentMethodForm ? (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null,
|
|
19128
|
+
children: (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] }))),
|
|
19129
|
+
},
|
|
19130
|
+
] }), paying && !selectedPaymentPluginIsManualPayment ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultPaymentMethod && selectedPaymentMethodPlugin ? (jsxRuntime.jsx("div", __assign({ className: "bunny-px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, plugin: selectedPaymentMethodPlugin, paymentHoldOptions: paymentHoldOptions }) }))) : null })) : null] }) })) })) })));
|
|
19123
19131
|
};
|
|
19124
19132
|
function StripeWrapper(_a) {
|
|
19125
19133
|
var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
|
|
@@ -19214,7 +19222,7 @@ var getFormattedQuote = function (_a) {
|
|
|
19214
19222
|
var usePlugins = function (_a) {
|
|
19215
19223
|
var apiHost = _a.apiHost, token = _a.token;
|
|
19216
19224
|
var response = reactQuery.useQuery({
|
|
19217
|
-
queryKey: common.QueryKeyFactory.default.pluginsKey(token ||
|
|
19225
|
+
queryKey: common.QueryKeyFactory.default.pluginsKey(token || ''),
|
|
19218
19226
|
queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
19219
19227
|
var plugins;
|
|
19220
19228
|
return __generator(this, function (_a) {
|
|
@@ -19225,7 +19233,6 @@ var usePlugins = function (_a) {
|
|
|
19225
19233
|
})];
|
|
19226
19234
|
case 1:
|
|
19227
19235
|
plugins = _a.sent();
|
|
19228
|
-
console.log("plugins in usePlugins: ", plugins);
|
|
19229
19236
|
return [2 /*return*/, plugins];
|
|
19230
19237
|
}
|
|
19231
19238
|
});
|
|
@@ -19252,9 +19259,7 @@ var getPlugins = function (_a) {
|
|
|
19252
19259
|
plugins = _b.sent();
|
|
19253
19260
|
filteredPlugins = plugins.filter(function (plugin) {
|
|
19254
19261
|
var _a, _b;
|
|
19255
|
-
var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) ||
|
|
19256
|
-
((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 ||
|
|
19257
|
-
!entityId;
|
|
19262
|
+
var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) || ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 || !entityId;
|
|
19258
19263
|
return result;
|
|
19259
19264
|
});
|
|
19260
19265
|
return [2 /*return*/, filteredPlugins];
|
|
@@ -21232,8 +21237,9 @@ var PlanPickerCheckoutBar = function (_a) {
|
|
|
21232
21237
|
}) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsxRuntime.jsx(Checkout, { isMobile: isMobile, onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
|
|
21233
21238
|
};
|
|
21234
21239
|
|
|
21240
|
+
console.log('PriceListChangeOptionsQuery');
|
|
21235
21241
|
// WARNING: There is a preview button on APP that will need to be changed if this query is changed
|
|
21236
|
-
var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n basePrice\n id\n
|
|
21242
|
+
var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
|
|
21237
21243
|
var getPriceListChangeOptions = function (_a) {
|
|
21238
21244
|
var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
|
|
21239
21245
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -21339,21 +21345,35 @@ var PriceListCardTitle = function (_a) {
|
|
|
21339
21345
|
|
|
21340
21346
|
var PriceListCardPrice = function (_a) {
|
|
21341
21347
|
var priceList = _a.priceList;
|
|
21342
|
-
return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize:
|
|
21343
|
-
? common.formatCurrency(priceList.
|
|
21348
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: '32px' } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
|
|
21349
|
+
? common.formatCurrency(priceList.monthlyBasePrice, priceList.currencyId, 0)
|
|
21344
21350
|
: priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US
|
|
21345
|
-
?
|
|
21346
|
-
:
|
|
21351
|
+
? ''
|
|
21352
|
+
: 'Free' })));
|
|
21347
21353
|
};
|
|
21348
21354
|
|
|
21349
21355
|
var Text$c = antd.Typography.Text;
|
|
21350
21356
|
var PriceListCardDescription = function (_a) {
|
|
21351
21357
|
var description = _a.description;
|
|
21358
|
+
var htmlParsedDescription = parse__default["default"](description || '');
|
|
21352
21359
|
if (!description)
|
|
21353
21360
|
return null;
|
|
21354
|
-
return jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center" }, { children:
|
|
21361
|
+
return jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: htmlParsedDescription }));
|
|
21355
21362
|
};
|
|
21356
21363
|
|
|
21364
|
+
var BillingPeriodConverter;
|
|
21365
|
+
(function (BillingPeriodConverter) {
|
|
21366
|
+
BillingPeriodConverter["ONCE"] = "once";
|
|
21367
|
+
BillingPeriodConverter["MONTHLY"] = "monthly";
|
|
21368
|
+
BillingPeriodConverter["ANNUAL"] = "annually";
|
|
21369
|
+
BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
|
|
21370
|
+
BillingPeriodConverter["QUARTERLY"] = "quarterly";
|
|
21371
|
+
})(BillingPeriodConverter || (BillingPeriodConverter = {}));
|
|
21372
|
+
var BillingPeriodConverter$1 = BillingPeriodConverter;
|
|
21373
|
+
|
|
21374
|
+
var isEmptyHtml = function (html) {
|
|
21375
|
+
return /^<[^>]*>(\s*)<\/[^>]*>$/.test(html);
|
|
21376
|
+
};
|
|
21357
21377
|
var Text$b = antd.Typography.Text;
|
|
21358
21378
|
var PriceListCardPriceDescription = function (_a) {
|
|
21359
21379
|
var feature = _a.feature, priceList = _a.priceList;
|
|
@@ -21361,13 +21381,11 @@ var PriceListCardPriceDescription = function (_a) {
|
|
|
21361
21381
|
var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === common.PricingModel.FLAT && charge.basePrice > 0; });
|
|
21362
21382
|
if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== common.PricingStyle.PRICED)
|
|
21363
21383
|
return null;
|
|
21364
|
-
return (jsxRuntime.jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
|
|
21365
|
-
|
|
21366
|
-
|
|
21367
|
-
|
|
21368
|
-
|
|
21369
|
-
? "".concat(feature.unitName.toLowerCase(), " / ")
|
|
21370
|
-
: "").concat(common.PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)]) })));
|
|
21384
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
|
|
21385
|
+
fontSize: isMobile ? '13px' : '12px',
|
|
21386
|
+
} }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsxRuntime.jsx(interweave.Markup, { content: priceList.plan.pricingDescription })) : ("per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
|
|
21387
|
+
? "".concat(feature.unitName.toLowerCase(), " / ")
|
|
21388
|
+
: '', "month")) })), priceList.periodMonths > 1 && (jsxRuntime.jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
|
|
21371
21389
|
};
|
|
21372
21390
|
|
|
21373
21391
|
var CheckIcon = function (_a) {
|
|
@@ -22232,17 +22250,9 @@ var SubscriptionCardHeader = function (_a) {
|
|
|
22232
22250
|
} }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsxRuntime.jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsxRuntime.jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
|
|
22233
22251
|
};
|
|
22234
22252
|
|
|
22235
|
-
var BillingPeriodConverter;
|
|
22236
|
-
(function (BillingPeriodConverter) {
|
|
22237
|
-
BillingPeriodConverter["ONCE"] = "once";
|
|
22238
|
-
BillingPeriodConverter["MONTHLY"] = "monthly";
|
|
22239
|
-
BillingPeriodConverter["ANNUAL"] = "annually";
|
|
22240
|
-
BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
|
|
22241
|
-
BillingPeriodConverter["QUARTERLY"] = "quarterly";
|
|
22242
|
-
})(BillingPeriodConverter || (BillingPeriodConverter = {}));
|
|
22243
22253
|
var SubscriptionChargeTotal = function (_a) {
|
|
22244
22254
|
var charge = _a.charge, subscription = _a.subscription;
|
|
22245
|
-
var billingPeriod = charge.billingPeriod && BillingPeriodConverter[charge.billingPeriod];
|
|
22255
|
+
var billingPeriod = charge.billingPeriod && BillingPeriodConverter$1[charge.billingPeriod];
|
|
22246
22256
|
var isMobile = common.useIsMobile();
|
|
22247
22257
|
var currencyId = subscription.currencyId;
|
|
22248
22258
|
var formattedDiscountedPrice = common.formatCurrency(charge.price, currencyId);
|
|
@@ -1,134 +1,88 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
3
2
|
import Quote from "./Quote";
|
|
4
3
|
declare const meta: Meta<typeof Quote>;
|
|
5
4
|
export default meta;
|
|
6
5
|
type Story = StoryObj<typeof meta>;
|
|
7
|
-
export declare const Default: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-
|
|
8
|
-
|
|
9
|
-
invoiceQuoteViewComponent?: import("react").ReactNode;
|
|
10
|
-
backButtonName?: string | undefined;
|
|
11
|
-
onBackButtonClick?: (() => void) | undefined;
|
|
12
|
-
onInvoiceDownloadError?: (() => void) | undefined;
|
|
13
|
-
onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
|
|
14
|
-
shadow?: import("../../types/shadowType").ShadowType | undefined;
|
|
15
|
-
className?: string | undefined;
|
|
16
|
-
hideDownloadButton?: boolean | undefined;
|
|
17
|
-
onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
|
|
18
|
-
onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
|
|
6
|
+
export declare const Default: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-5617c98e").R, {
|
|
7
|
+
[x: string]: any;
|
|
19
8
|
}, {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
9
|
+
[x: string]: any;
|
|
10
|
+
className?: any;
|
|
11
|
+
id?: any;
|
|
12
|
+
backButtonName?: any;
|
|
13
|
+
onBackButtonClick?: any;
|
|
14
|
+
shadow?: any;
|
|
15
|
+
hideDownloadButton?: any;
|
|
16
|
+
onPaymentSuccess?: any;
|
|
17
|
+
invoiceQuoteViewComponent?: any;
|
|
18
|
+
onInvoiceDownloadError?: any;
|
|
19
|
+
onInvoiceLoaded?: any;
|
|
20
|
+
onQuoteLoaded?: any;
|
|
31
21
|
}>;
|
|
32
|
-
export declare const NoShadow: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-
|
|
33
|
-
|
|
34
|
-
invoiceQuoteViewComponent?: import("react").ReactNode;
|
|
35
|
-
backButtonName?: string | undefined;
|
|
36
|
-
onBackButtonClick?: (() => void) | undefined;
|
|
37
|
-
onInvoiceDownloadError?: (() => void) | undefined;
|
|
38
|
-
onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
|
|
39
|
-
shadow?: import("../../types/shadowType").ShadowType | undefined;
|
|
40
|
-
className?: string | undefined;
|
|
41
|
-
hideDownloadButton?: boolean | undefined;
|
|
42
|
-
onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
|
|
43
|
-
onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
|
|
22
|
+
export declare const NoShadow: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-5617c98e").R, {
|
|
23
|
+
[x: string]: any;
|
|
44
24
|
}, {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
25
|
+
[x: string]: any;
|
|
26
|
+
className?: any;
|
|
27
|
+
id?: any;
|
|
28
|
+
backButtonName?: any;
|
|
29
|
+
onBackButtonClick?: any;
|
|
30
|
+
shadow?: any;
|
|
31
|
+
hideDownloadButton?: any;
|
|
32
|
+
onPaymentSuccess?: any;
|
|
33
|
+
invoiceQuoteViewComponent?: any;
|
|
34
|
+
onInvoiceDownloadError?: any;
|
|
35
|
+
onInvoiceLoaded?: any;
|
|
36
|
+
onQuoteLoaded?: any;
|
|
56
37
|
}>;
|
|
57
|
-
export declare const Mobile: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-
|
|
58
|
-
|
|
59
|
-
invoiceQuoteViewComponent?: import("react").ReactNode;
|
|
60
|
-
backButtonName?: string | undefined;
|
|
61
|
-
onBackButtonClick?: (() => void) | undefined;
|
|
62
|
-
onInvoiceDownloadError?: (() => void) | undefined;
|
|
63
|
-
onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
|
|
64
|
-
shadow?: import("../../types/shadowType").ShadowType | undefined;
|
|
65
|
-
className?: string | undefined;
|
|
66
|
-
hideDownloadButton?: boolean | undefined;
|
|
67
|
-
onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
|
|
68
|
-
onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
|
|
38
|
+
export declare const Mobile: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-5617c98e").R, {
|
|
39
|
+
[x: string]: any;
|
|
69
40
|
}, {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
41
|
+
[x: string]: any;
|
|
42
|
+
className?: any;
|
|
43
|
+
id?: any;
|
|
44
|
+
backButtonName?: any;
|
|
45
|
+
onBackButtonClick?: any;
|
|
46
|
+
shadow?: any;
|
|
47
|
+
hideDownloadButton?: any;
|
|
48
|
+
onPaymentSuccess?: any;
|
|
49
|
+
invoiceQuoteViewComponent?: any;
|
|
50
|
+
onInvoiceDownloadError?: any;
|
|
51
|
+
onInvoiceLoaded?: any;
|
|
52
|
+
onQuoteLoaded?: any;
|
|
81
53
|
}>;
|
|
82
|
-
export declare const CustomClassName: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-
|
|
83
|
-
|
|
84
|
-
invoiceQuoteViewComponent?: import("react").ReactNode;
|
|
85
|
-
backButtonName?: string | undefined;
|
|
86
|
-
onBackButtonClick?: (() => void) | undefined;
|
|
87
|
-
onInvoiceDownloadError?: (() => void) | undefined;
|
|
88
|
-
onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
|
|
89
|
-
shadow?: import("../../types/shadowType").ShadowType | undefined;
|
|
90
|
-
className?: string | undefined;
|
|
91
|
-
hideDownloadButton?: boolean | undefined;
|
|
92
|
-
onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
|
|
93
|
-
onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
|
|
54
|
+
export declare const CustomClassName: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-5617c98e").R, {
|
|
55
|
+
[x: string]: any;
|
|
94
56
|
}, {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
57
|
+
[x: string]: any;
|
|
58
|
+
className?: any;
|
|
59
|
+
id?: any;
|
|
60
|
+
backButtonName?: any;
|
|
61
|
+
onBackButtonClick?: any;
|
|
62
|
+
shadow?: any;
|
|
63
|
+
hideDownloadButton?: any;
|
|
64
|
+
onPaymentSuccess?: any;
|
|
65
|
+
invoiceQuoteViewComponent?: any;
|
|
66
|
+
onInvoiceDownloadError?: any;
|
|
67
|
+
onInvoiceLoaded?: any;
|
|
68
|
+
onQuoteLoaded?: any;
|
|
106
69
|
}>;
|
|
107
70
|
export declare const HideDownloadButton: Story;
|
|
108
71
|
export declare const AcceptedQuote: Story;
|
|
109
72
|
export declare const AcceptedQuoteDarkMode: Story;
|
|
110
|
-
export declare const DarkMode: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-
|
|
111
|
-
|
|
112
|
-
invoiceQuoteViewComponent?: import("react").ReactNode;
|
|
113
|
-
backButtonName?: string | undefined;
|
|
114
|
-
onBackButtonClick?: (() => void) | undefined;
|
|
115
|
-
onInvoiceDownloadError?: (() => void) | undefined;
|
|
116
|
-
onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
|
|
117
|
-
shadow?: import("../../types/shadowType").ShadowType | undefined;
|
|
118
|
-
className?: string | undefined;
|
|
119
|
-
hideDownloadButton?: boolean | undefined;
|
|
120
|
-
onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
|
|
121
|
-
onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
|
|
73
|
+
export declare const DarkMode: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-5617c98e").R, {
|
|
74
|
+
[x: string]: any;
|
|
122
75
|
}, {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
76
|
+
[x: string]: any;
|
|
77
|
+
className?: any;
|
|
78
|
+
id?: any;
|
|
79
|
+
backButtonName?: any;
|
|
80
|
+
onBackButtonClick?: any;
|
|
81
|
+
shadow?: any;
|
|
82
|
+
hideDownloadButton?: any;
|
|
83
|
+
onPaymentSuccess?: any;
|
|
84
|
+
invoiceQuoteViewComponent?: any;
|
|
85
|
+
onInvoiceDownloadError?: any;
|
|
86
|
+
onInvoiceLoaded?: any;
|
|
87
|
+
onQuoteLoaded?: any;
|
|
134
88
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const handlers: import("msw/lib/core/GraphQLHandler-
|
|
1
|
+
export declare const handlers: import("msw/lib/core/GraphQLHandler-noP9MRWa").G[];
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { createContext, useEffect, useContext, useMemo, useState, useCallback, useRef } from 'react';
|
|
3
3
|
import { Markup } from 'interweave';
|
|
4
|
-
import { ConfigProvider, Button, Tag, Typography, Dropdown, Input, Checkbox,
|
|
4
|
+
import { ConfigProvider, Button, Tag, Typography, Dropdown, Input, Checkbox, Skeleton, Collapse, Modal, Form, Tooltip, Drawer, Card as Card$1, Image, Divider, Select, Radio, Space, Popconfirm, Table } from 'antd';
|
|
5
5
|
import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CheckCircleFilled, CloseOutlined, ArrowLeftOutlined } from '@ant-design/icons';
|
|
6
6
|
import styled from 'styled-components';
|
|
7
7
|
import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory, useIsMobile, isColorTooDark, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, useErrorNotification, invokePlugin, useAllErrorFormats, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, request as request$1, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR as PRIMARY_COLOR$1, sortSubscriptionCharges, Lists, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, useInfoNotification, MODAL_MAX_HEIGHT, DataInterval, QuoteChangeKind, TAG_COLORS } from '@bunnyapp/common';
|
|
@@ -11,6 +11,7 @@ import { RecoilRoot } from 'recoil';
|
|
|
11
11
|
import request, { GraphQLClient } from 'graphql-request';
|
|
12
12
|
import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
|
|
13
13
|
import { loadStripe } from '@stripe/stripe-js/pure/index.js';
|
|
14
|
+
import parse from 'html-react-parser';
|
|
14
15
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
15
16
|
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
|
|
16
17
|
import { BarChart, ResponsiveContainer, XAxis, Tooltip as Tooltip$1, Bar, Rectangle } from 'recharts';
|
|
@@ -142,7 +143,7 @@ var BrandContext = createContext({
|
|
|
142
143
|
});
|
|
143
144
|
|
|
144
145
|
// This will be replaced at build time by rollup-plugin-replace
|
|
145
|
-
var PACKAGE_VERSION = '1.0.62-beta.
|
|
146
|
+
var PACKAGE_VERSION = '1.0.62-beta.4';
|
|
146
147
|
var createRequestHeaders = function (token) {
|
|
147
148
|
var _a;
|
|
148
149
|
var bearerToken = token ? "Bearer ".concat(token) : null;
|
|
@@ -19007,7 +19008,6 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
|
|
|
19007
19008
|
return { setDefaultPaymentMethod: setDefaultPaymentMethod, loading: loading };
|
|
19008
19009
|
}
|
|
19009
19010
|
|
|
19010
|
-
var Panel = Collapse.Panel;
|
|
19011
19011
|
var showErrorNotification$1 = useErrorNotification();
|
|
19012
19012
|
var PaymentForm = function (_a) {
|
|
19013
19013
|
var _b;
|
|
@@ -19090,7 +19090,14 @@ var PaymentForm = function (_a) {
|
|
|
19090
19090
|
storedPaymentMethods: storedPaymentMethods,
|
|
19091
19091
|
defaultPaymentMethod: defaultPaymentMethod,
|
|
19092
19092
|
customCheckoutFunction: customCheckoutFunction,
|
|
19093
|
-
} }, { children: jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsx(Collapse,
|
|
19093
|
+
} }, { children: jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsx(Collapse, { bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyOnHidden: true, items: [
|
|
19094
|
+
{
|
|
19095
|
+
key: '1',
|
|
19096
|
+
showArrow: false,
|
|
19097
|
+
label: !showPaymentMethodForm ? (jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsx(Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null,
|
|
19098
|
+
children: (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] }))),
|
|
19099
|
+
},
|
|
19100
|
+
] }), paying && !selectedPaymentPluginIsManualPayment ? (jsx(Fragment, { children: defaultPaymentMethod && selectedPaymentMethodPlugin ? (jsx("div", __assign({ className: "bunny-px-4" }, { children: jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, plugin: selectedPaymentMethodPlugin, paymentHoldOptions: paymentHoldOptions }) }))) : null })) : null] }) })) })) })));
|
|
19094
19101
|
};
|
|
19095
19102
|
function StripeWrapper(_a) {
|
|
19096
19103
|
var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
|
|
@@ -19185,7 +19192,7 @@ var getFormattedQuote = function (_a) {
|
|
|
19185
19192
|
var usePlugins = function (_a) {
|
|
19186
19193
|
var apiHost = _a.apiHost, token = _a.token;
|
|
19187
19194
|
var response = useQuery({
|
|
19188
|
-
queryKey: QueryKeyFactory.default.pluginsKey(token ||
|
|
19195
|
+
queryKey: QueryKeyFactory.default.pluginsKey(token || ''),
|
|
19189
19196
|
queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
19190
19197
|
var plugins;
|
|
19191
19198
|
return __generator(this, function (_a) {
|
|
@@ -19196,7 +19203,6 @@ var usePlugins = function (_a) {
|
|
|
19196
19203
|
})];
|
|
19197
19204
|
case 1:
|
|
19198
19205
|
plugins = _a.sent();
|
|
19199
|
-
console.log("plugins in usePlugins: ", plugins);
|
|
19200
19206
|
return [2 /*return*/, plugins];
|
|
19201
19207
|
}
|
|
19202
19208
|
});
|
|
@@ -19223,9 +19229,7 @@ var getPlugins = function (_a) {
|
|
|
19223
19229
|
plugins = _b.sent();
|
|
19224
19230
|
filteredPlugins = plugins.filter(function (plugin) {
|
|
19225
19231
|
var _a, _b;
|
|
19226
|
-
var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) ||
|
|
19227
|
-
((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 ||
|
|
19228
|
-
!entityId;
|
|
19232
|
+
var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) || ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 || !entityId;
|
|
19229
19233
|
return result;
|
|
19230
19234
|
});
|
|
19231
19235
|
return [2 /*return*/, filteredPlugins];
|
|
@@ -21203,8 +21207,9 @@ var PlanPickerCheckoutBar = function (_a) {
|
|
|
21203
21207
|
}) })), jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsx(Checkout, { isMobile: isMobile, onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
|
|
21204
21208
|
};
|
|
21205
21209
|
|
|
21210
|
+
console.log('PriceListChangeOptionsQuery');
|
|
21206
21211
|
// WARNING: There is a preview button on APP that will need to be changed if this query is changed
|
|
21207
|
-
var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n basePrice\n id\n
|
|
21212
|
+
var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
|
|
21208
21213
|
var getPriceListChangeOptions = function (_a) {
|
|
21209
21214
|
var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
|
|
21210
21215
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -21310,21 +21315,35 @@ var PriceListCardTitle = function (_a) {
|
|
|
21310
21315
|
|
|
21311
21316
|
var PriceListCardPrice = function (_a) {
|
|
21312
21317
|
var priceList = _a.priceList;
|
|
21313
|
-
return (jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize:
|
|
21314
|
-
? formatCurrency(priceList.
|
|
21318
|
+
return (jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: '32px' } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === PricingStyle.PRICED
|
|
21319
|
+
? formatCurrency(priceList.monthlyBasePrice, priceList.currencyId, 0)
|
|
21315
21320
|
: priceList.plan.pricingStyle === PricingStyle.CONTACT_US
|
|
21316
|
-
?
|
|
21317
|
-
:
|
|
21321
|
+
? ''
|
|
21322
|
+
: 'Free' })));
|
|
21318
21323
|
};
|
|
21319
21324
|
|
|
21320
21325
|
var Text$c = Typography.Text;
|
|
21321
21326
|
var PriceListCardDescription = function (_a) {
|
|
21322
21327
|
var description = _a.description;
|
|
21328
|
+
var htmlParsedDescription = parse(description || '');
|
|
21323
21329
|
if (!description)
|
|
21324
21330
|
return null;
|
|
21325
|
-
return jsx(Text$c, __assign({ className: "bunny-text-center" }, { children:
|
|
21331
|
+
return jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: htmlParsedDescription }));
|
|
21326
21332
|
};
|
|
21327
21333
|
|
|
21334
|
+
var BillingPeriodConverter;
|
|
21335
|
+
(function (BillingPeriodConverter) {
|
|
21336
|
+
BillingPeriodConverter["ONCE"] = "once";
|
|
21337
|
+
BillingPeriodConverter["MONTHLY"] = "monthly";
|
|
21338
|
+
BillingPeriodConverter["ANNUAL"] = "annually";
|
|
21339
|
+
BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
|
|
21340
|
+
BillingPeriodConverter["QUARTERLY"] = "quarterly";
|
|
21341
|
+
})(BillingPeriodConverter || (BillingPeriodConverter = {}));
|
|
21342
|
+
var BillingPeriodConverter$1 = BillingPeriodConverter;
|
|
21343
|
+
|
|
21344
|
+
var isEmptyHtml = function (html) {
|
|
21345
|
+
return /^<[^>]*>(\s*)<\/[^>]*>$/.test(html);
|
|
21346
|
+
};
|
|
21328
21347
|
var Text$b = Typography.Text;
|
|
21329
21348
|
var PriceListCardPriceDescription = function (_a) {
|
|
21330
21349
|
var feature = _a.feature, priceList = _a.priceList;
|
|
@@ -21332,13 +21351,11 @@ var PriceListCardPriceDescription = function (_a) {
|
|
|
21332
21351
|
var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === PricingModel.FLAT && charge.basePrice > 0; });
|
|
21333
21352
|
if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== PricingStyle.PRICED)
|
|
21334
21353
|
return null;
|
|
21335
|
-
return (jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
|
|
21336
|
-
|
|
21337
|
-
|
|
21338
|
-
|
|
21339
|
-
|
|
21340
|
-
? "".concat(feature.unitName.toLowerCase(), " / ")
|
|
21341
|
-
: "").concat(PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)]) })));
|
|
21354
|
+
return (jsxs(Fragment, { children: [jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
|
|
21355
|
+
fontSize: isMobile ? '13px' : '12px',
|
|
21356
|
+
} }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsx(Markup, { content: priceList.plan.pricingDescription })) : ("per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
|
|
21357
|
+
? "".concat(feature.unitName.toLowerCase(), " / ")
|
|
21358
|
+
: '', "month")) })), priceList.periodMonths > 1 && (jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
|
|
21342
21359
|
};
|
|
21343
21360
|
|
|
21344
21361
|
var CheckIcon = function (_a) {
|
|
@@ -22203,17 +22220,9 @@ var SubscriptionCardHeader = function (_a) {
|
|
|
22203
22220
|
} }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsx(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name })), jsxs(CustomizedTag, __assign({ color: TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
|
|
22204
22221
|
};
|
|
22205
22222
|
|
|
22206
|
-
var BillingPeriodConverter;
|
|
22207
|
-
(function (BillingPeriodConverter) {
|
|
22208
|
-
BillingPeriodConverter["ONCE"] = "once";
|
|
22209
|
-
BillingPeriodConverter["MONTHLY"] = "monthly";
|
|
22210
|
-
BillingPeriodConverter["ANNUAL"] = "annually";
|
|
22211
|
-
BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
|
|
22212
|
-
BillingPeriodConverter["QUARTERLY"] = "quarterly";
|
|
22213
|
-
})(BillingPeriodConverter || (BillingPeriodConverter = {}));
|
|
22214
22223
|
var SubscriptionChargeTotal = function (_a) {
|
|
22215
22224
|
var charge = _a.charge, subscription = _a.subscription;
|
|
22216
|
-
var billingPeriod = charge.billingPeriod && BillingPeriodConverter[charge.billingPeriod];
|
|
22225
|
+
var billingPeriod = charge.billingPeriod && BillingPeriodConverter$1[charge.billingPeriod];
|
|
22217
22226
|
var isMobile = useIsMobile();
|
|
22218
22227
|
var currencyId = subscription.currencyId;
|
|
22219
22228
|
var formattedDiscountedPrice = formatCurrency(charge.price, currencyId);
|
|
@@ -1,134 +1,88 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
3
2
|
import Quote from "./Quote";
|
|
4
3
|
declare const meta: Meta<typeof Quote>;
|
|
5
4
|
export default meta;
|
|
6
5
|
type Story = StoryObj<typeof meta>;
|
|
7
|
-
export declare const Default: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-
|
|
8
|
-
|
|
9
|
-
invoiceQuoteViewComponent?: import("react").ReactNode;
|
|
10
|
-
backButtonName?: string | undefined;
|
|
11
|
-
onBackButtonClick?: (() => void) | undefined;
|
|
12
|
-
onInvoiceDownloadError?: (() => void) | undefined;
|
|
13
|
-
onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
|
|
14
|
-
shadow?: import("../../types/shadowType").ShadowType | undefined;
|
|
15
|
-
className?: string | undefined;
|
|
16
|
-
hideDownloadButton?: boolean | undefined;
|
|
17
|
-
onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
|
|
18
|
-
onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
|
|
6
|
+
export declare const Default: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-5617c98e").R, {
|
|
7
|
+
[x: string]: any;
|
|
19
8
|
}, {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
9
|
+
[x: string]: any;
|
|
10
|
+
className?: any;
|
|
11
|
+
id?: any;
|
|
12
|
+
backButtonName?: any;
|
|
13
|
+
onBackButtonClick?: any;
|
|
14
|
+
shadow?: any;
|
|
15
|
+
hideDownloadButton?: any;
|
|
16
|
+
onPaymentSuccess?: any;
|
|
17
|
+
invoiceQuoteViewComponent?: any;
|
|
18
|
+
onInvoiceDownloadError?: any;
|
|
19
|
+
onInvoiceLoaded?: any;
|
|
20
|
+
onQuoteLoaded?: any;
|
|
31
21
|
}>;
|
|
32
|
-
export declare const NoShadow: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-
|
|
33
|
-
|
|
34
|
-
invoiceQuoteViewComponent?: import("react").ReactNode;
|
|
35
|
-
backButtonName?: string | undefined;
|
|
36
|
-
onBackButtonClick?: (() => void) | undefined;
|
|
37
|
-
onInvoiceDownloadError?: (() => void) | undefined;
|
|
38
|
-
onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
|
|
39
|
-
shadow?: import("../../types/shadowType").ShadowType | undefined;
|
|
40
|
-
className?: string | undefined;
|
|
41
|
-
hideDownloadButton?: boolean | undefined;
|
|
42
|
-
onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
|
|
43
|
-
onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
|
|
22
|
+
export declare const NoShadow: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-5617c98e").R, {
|
|
23
|
+
[x: string]: any;
|
|
44
24
|
}, {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
25
|
+
[x: string]: any;
|
|
26
|
+
className?: any;
|
|
27
|
+
id?: any;
|
|
28
|
+
backButtonName?: any;
|
|
29
|
+
onBackButtonClick?: any;
|
|
30
|
+
shadow?: any;
|
|
31
|
+
hideDownloadButton?: any;
|
|
32
|
+
onPaymentSuccess?: any;
|
|
33
|
+
invoiceQuoteViewComponent?: any;
|
|
34
|
+
onInvoiceDownloadError?: any;
|
|
35
|
+
onInvoiceLoaded?: any;
|
|
36
|
+
onQuoteLoaded?: any;
|
|
56
37
|
}>;
|
|
57
|
-
export declare const Mobile: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-
|
|
58
|
-
|
|
59
|
-
invoiceQuoteViewComponent?: import("react").ReactNode;
|
|
60
|
-
backButtonName?: string | undefined;
|
|
61
|
-
onBackButtonClick?: (() => void) | undefined;
|
|
62
|
-
onInvoiceDownloadError?: (() => void) | undefined;
|
|
63
|
-
onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
|
|
64
|
-
shadow?: import("../../types/shadowType").ShadowType | undefined;
|
|
65
|
-
className?: string | undefined;
|
|
66
|
-
hideDownloadButton?: boolean | undefined;
|
|
67
|
-
onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
|
|
68
|
-
onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
|
|
38
|
+
export declare const Mobile: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-5617c98e").R, {
|
|
39
|
+
[x: string]: any;
|
|
69
40
|
}, {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
41
|
+
[x: string]: any;
|
|
42
|
+
className?: any;
|
|
43
|
+
id?: any;
|
|
44
|
+
backButtonName?: any;
|
|
45
|
+
onBackButtonClick?: any;
|
|
46
|
+
shadow?: any;
|
|
47
|
+
hideDownloadButton?: any;
|
|
48
|
+
onPaymentSuccess?: any;
|
|
49
|
+
invoiceQuoteViewComponent?: any;
|
|
50
|
+
onInvoiceDownloadError?: any;
|
|
51
|
+
onInvoiceLoaded?: any;
|
|
52
|
+
onQuoteLoaded?: any;
|
|
81
53
|
}>;
|
|
82
|
-
export declare const CustomClassName: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-
|
|
83
|
-
|
|
84
|
-
invoiceQuoteViewComponent?: import("react").ReactNode;
|
|
85
|
-
backButtonName?: string | undefined;
|
|
86
|
-
onBackButtonClick?: (() => void) | undefined;
|
|
87
|
-
onInvoiceDownloadError?: (() => void) | undefined;
|
|
88
|
-
onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
|
|
89
|
-
shadow?: import("../../types/shadowType").ShadowType | undefined;
|
|
90
|
-
className?: string | undefined;
|
|
91
|
-
hideDownloadButton?: boolean | undefined;
|
|
92
|
-
onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
|
|
93
|
-
onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
|
|
54
|
+
export declare const CustomClassName: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-5617c98e").R, {
|
|
55
|
+
[x: string]: any;
|
|
94
56
|
}, {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
57
|
+
[x: string]: any;
|
|
58
|
+
className?: any;
|
|
59
|
+
id?: any;
|
|
60
|
+
backButtonName?: any;
|
|
61
|
+
onBackButtonClick?: any;
|
|
62
|
+
shadow?: any;
|
|
63
|
+
hideDownloadButton?: any;
|
|
64
|
+
onPaymentSuccess?: any;
|
|
65
|
+
invoiceQuoteViewComponent?: any;
|
|
66
|
+
onInvoiceDownloadError?: any;
|
|
67
|
+
onInvoiceLoaded?: any;
|
|
68
|
+
onQuoteLoaded?: any;
|
|
106
69
|
}>;
|
|
107
70
|
export declare const HideDownloadButton: Story;
|
|
108
71
|
export declare const AcceptedQuote: Story;
|
|
109
72
|
export declare const AcceptedQuoteDarkMode: Story;
|
|
110
|
-
export declare const DarkMode: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-
|
|
111
|
-
|
|
112
|
-
invoiceQuoteViewComponent?: import("react").ReactNode;
|
|
113
|
-
backButtonName?: string | undefined;
|
|
114
|
-
onBackButtonClick?: (() => void) | undefined;
|
|
115
|
-
onInvoiceDownloadError?: (() => void) | undefined;
|
|
116
|
-
onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
|
|
117
|
-
shadow?: import("../../types/shadowType").ShadowType | undefined;
|
|
118
|
-
className?: string | undefined;
|
|
119
|
-
hideDownloadButton?: boolean | undefined;
|
|
120
|
-
onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
|
|
121
|
-
onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
|
|
73
|
+
export declare const DarkMode: import("@storybook/core/csf").StoryAnnotations<import("@storybook/react/dist/types-5617c98e").R, {
|
|
74
|
+
[x: string]: any;
|
|
122
75
|
}, {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
76
|
+
[x: string]: any;
|
|
77
|
+
className?: any;
|
|
78
|
+
id?: any;
|
|
79
|
+
backButtonName?: any;
|
|
80
|
+
onBackButtonClick?: any;
|
|
81
|
+
shadow?: any;
|
|
82
|
+
hideDownloadButton?: any;
|
|
83
|
+
onPaymentSuccess?: any;
|
|
84
|
+
invoiceQuoteViewComponent?: any;
|
|
85
|
+
onInvoiceDownloadError?: any;
|
|
86
|
+
onInvoiceLoaded?: any;
|
|
87
|
+
onQuoteLoaded?: any;
|
|
134
88
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const handlers: import("msw/lib/core/GraphQLHandler-
|
|
1
|
+
export declare const handlers: import("msw/lib/core/GraphQLHandler-noP9MRWa").G[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bunnyapp/components",
|
|
3
|
-
"version": "1.0.62-beta.
|
|
3
|
+
"version": "1.0.62-beta.4",
|
|
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",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
67
|
"@ant-design/icons": "^5.6.1",
|
|
68
|
-
"@bunnyapp/common": "^1.0.62-beta.
|
|
68
|
+
"@bunnyapp/common": "^1.0.62-beta.5",
|
|
69
69
|
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
|
70
70
|
"@fortawesome/free-brands-svg-icons": "^6.7.2",
|
|
71
71
|
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
|
@@ -93,6 +93,7 @@
|
|
|
93
93
|
]
|
|
94
94
|
},
|
|
95
95
|
"dependencies": {
|
|
96
|
+
"html-react-parser": "^5.2.5",
|
|
96
97
|
"msw-storybook-addon": "^2.0.4"
|
|
97
98
|
}
|
|
98
99
|
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { Subscription } from '@bunnyapp/common';
|
|
2
|
-
declare const getPlanChangeOptions: ({ isInPreviewMode, token, upgradingSubscription, apiHost, }: {
|
|
3
|
-
isInPreviewMode?: boolean | undefined;
|
|
4
|
-
token?: string | undefined;
|
|
5
|
-
upgradingSubscription?: Subscription | undefined;
|
|
6
|
-
apiHost: string;
|
|
7
|
-
}) => Promise<any>;
|
|
8
|
-
export default getPlanChangeOptions;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { Subscription } from '@bunnyapp/common';
|
|
2
|
-
declare const getPlanChangeOptions: ({ isInPreviewMode, token, upgradingSubscription, apiHost, }: {
|
|
3
|
-
isInPreviewMode?: boolean | undefined;
|
|
4
|
-
token?: string | undefined;
|
|
5
|
-
upgradingSubscription?: Subscription | undefined;
|
|
6
|
-
apiHost: string;
|
|
7
|
-
}) => Promise<any>;
|
|
8
|
-
export default getPlanChangeOptions;
|