@bunnyapp/components 1.0.41 → 1.0.43

package/README.md

@@ -30,6 +30,11 @@ Ensure all peer dependencies in the package.json are installed.
 
 To run the development server, run `npm run dev`.
 
-#### Storybook stories
+### Storybook stories
 
-To view the storybook stories, run `npm run storybook`.
+To view the storybook stories, run `npx storybook dev`.
+
+#### Visual tests
+
+Once storybook is running, visual tests can be run by clicking on the visual tests tab, and then clicking on the "Run Tests" button.
+Refer to [these docs](https://storybook.js.org/docs/writing-tests/visual-testing#enable-visual-tests) for more information.

package/dist/cjs/index.js

@@ -19498,7 +19498,7 @@ var getBillingDetails = function (_a) {
 var Text$5 = antd.Typography.Text;
 var DrawerHeader = function (_a) {
     var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx(Text$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx(Text$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
 };
 
 var PaymentMethod = function (_a) {
@@ -19555,7 +19555,7 @@ var PaymentMethodDisplay = function (_a) {
                 body: {
                     padding: "1rem 0 0 0",
                 },
-            }, title: jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(DrawerHeader, { title: "New payment method", onClose: function () { return setShowModal(false); }, closeButtonClassName: "bg-transparent border-none cursor-pointer hover:bg-gray-100 p-2 rounded-sm transition-all duration-200" }) })), footer: null }, { children: children })));
+            }, title: jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(DrawerHeader, { closeButtonClassName: "bg-transparent border-none cursor-pointer hover:bg-gray-100 p-2 rounded-sm transition-all duration-200", onClose: function () { return setShowModal(false); }, title: "New payment method" }) })), footer: null }, { children: children })));
     }
     return (jsxRuntime.jsx(antd.Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
             body: {
@@ -19931,8 +19931,8 @@ function InitialSignupForm(_a) {
                             { required: true, message: "Please input your email!" },
                             { type: "email", message: "Please enter a valid email!" },
                         ] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [
-                            { required: true, message: "Please input your account name!" },
-                        ] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Account name" }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
+                            { required: true, message: "Please input your company name!" },
+                        ] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
 }
 
 var Title = antd.Typography.Title, Text$4 = antd.Typography.Text;
@@ -19965,6 +19965,7 @@ function Signup(_a) {
     var _j = react.useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
     var _k = react.useState(undefined), paymentMethodGraphQLClient = _k[0], setPaymentMethodGraphQLClient = _k[1];
     var paymentMethod = usePaymentMethod({
+        accountId: accountId,
         entityId: entityId,
         graphQLClient: paymentMethodGraphQLClient || graphQLClient,
         token: token,
@@ -19999,11 +20000,14 @@ function Signup(_a) {
                         data = _a.sent();
                         setAccountId(data.account.id);
                         setPortalSessionToken(data.portalSessionToken);
-                        setPaymentMethodGraphQLClient(createGraphQLClient(apiHost || "", data.portalSessionToken));
+                        setPaymentMethodGraphQLClient(createGraphQLClient(apiHost, data.portalSessionToken));
                         // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
                         // to instead use paymentMethods from portalSessionToken.
                         queryClient.invalidateQueries({
-                            queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({ entityId: entityId, token: token }),
+                            queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
+                                entityId: entityId,
+                                token: token,
+                            }),
                         });
                         setProceedingToPayment(false);
                         setQuote(data.quote);
@@ -20040,6 +20044,9 @@ function Signup(_a) {
                         if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
                             throw new Error("Plugin ID is required");
                         }
+                        if (!(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id)) {
+                            throw new Error("Payment method ID is required");
+                        }
                         return [4 /*yield*/, accountSignup({
                                 token: portalSessionToken,
                                 apiHost: apiHost,
@@ -20062,7 +20069,9 @@ function Signup(_a) {
         var children = _a.children, className = _a.className, style = _a.style;
         return isCardEnabled ? (jsxRuntime.jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsxRuntime.jsx("div", __assign({ className: className, style: style }, { children: children })));
     };
-    return (jsxRuntime.jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "flex ".concat(isMobile ? "items-center justify-center my-12" : "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 }) })) }))] }))) })));
+    return (jsxRuntime.jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "flex ".concat(isMobile
+                        ? "items-center justify-center my-12"
+                        : "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 }) })) }))] }))) })));
 }
 
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
@@ -20099,10 +20108,10 @@ var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      n
 var getSubscriptions = function (_a) {
     var apiHost = _a.apiHost, entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var response, combinedSubscriptions;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0: return [4 /*yield*/, common.gqlRequest({
                         isInPreviewMode: isInPreviewMode,
                         query: SUBSCRIPTIONS_QUERY,
@@ -20111,78 +20120,14 @@ var getSubscriptions = function (_a) {
                         apiHost: apiHost,
                     })];
                 case 1:
-                    response = _c.sent();
-                    return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes];
+                    response = _d.sent();
+                    combinedSubscriptions = (_c = (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (subscription) { return (__assign(__assign({}, subscription), { charges: common.sortSubscriptionCharges(subscription.charges) })); });
+                    return [2 /*return*/, combinedSubscriptions];
             }
         });
     });
 };
 
-var useSubscriptions = function (_a) {
-    var data = _a.data;
-    return react.useMemo(function () {
-        var clonedData = lodashExports.cloneDeep(data);
-        var combinedSubscriptions = clonedData === null || clonedData === void 0 ? void 0 : clonedData.map(function (subscription) {
-            var _a;
-            var orderedSubscriptionCharges = subscription.charges.sort(function (a, b) {
-                if (a.priceListChargeId !== b.priceListChargeId) {
-                    return a.priceListChargeId.localeCompare(b.priceListChargeId);
-                }
-                if (a.kind === common.SubscriptionChargeKind.DISCOUNT &&
-                    b.kind !== common.SubscriptionChargeKind.DISCOUNT) {
-                    return 1;
-                }
-                if (a.kind !== common.SubscriptionChargeKind.DISCOUNT &&
-                    b.kind === common.SubscriptionChargeKind.DISCOUNT) {
-                    return -1;
-                }
-                return (a.endDate.localeCompare(b.endDate) ||
-                    a.startDate.localeCompare(b.startDate));
-            });
-            var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
-            var combinedSubscriptionCharges = [];
-            var aggregationCharge;
-            for (var index = 0; index < orderedSubscriptionCharges.length; index++) {
-                var charge = orderedSubscriptionCharges[index];
-                var nextCharge = orderedSubscriptionCharges[index + 1];
-                if (!aggregationCharge)
-                    aggregationCharge = charge;
-                // If the next charge is the same priceListChargeId and endDate, aggregate the quantities
-                if (nextCharge &&
-                    charge.priceListChargeId === nextCharge.priceListChargeId &&
-                    charge.endDate === nextCharge.endDate &&
-                    charge.startDate === nextCharge.startDate &&
-                    charge.kind === nextCharge.kind) {
-                    aggregationCharge.quantity += nextCharge.quantity;
-                    // If the next charge is different, push the aggregationCharge to the combinedSubscriptionCharges
-                }
-                else if (nextCharge &&
-                    charge.priceListChargeId === nextCharge.priceListChargeId &&
-                    (charge.endDate !== nextCharge.endDate ||
-                        charge.startDate !== nextCharge.startDate) &&
-                    charge.kind === nextCharge.kind &&
-                    (!isTrial || charge.trial) &&
-                    (isTrial || !charge.trial)) {
-                    nextCharge.name = "";
-                    combinedSubscriptionCharges.push(aggregationCharge);
-                    aggregationCharge = undefined;
-                }
-                else {
-                    combinedSubscriptionCharges.push(aggregationCharge);
-                    aggregationCharge = undefined;
-                }
-            }
-            subscription.charges = combinedSubscriptionCharges;
-            return subscription;
-        });
-        var subscriptionOrder = Object.values(common.SubscriptionState);
-        combinedSubscriptions === null || combinedSubscriptions === void 0 ? void 0 : combinedSubscriptions.sort(function (a, b) {
-            return subscriptionOrder.indexOf(a.state) - subscriptionOrder.indexOf(b.state);
-        });
-        return combinedSubscriptions;
-    }, [data]);
-};
-
 var ErrorView = function (_a) {
     var children = _a.children, message = _a.message;
     return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsxRuntime.jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
@@ -20615,14 +20560,12 @@ var Subscriptions = function (_a) {
         }),
         queryFn: function () { return getSubscriptions({ entityId: entityId, token: token, apiHost: apiHost }); },
         enabled: Boolean(entityId),
-    }), rawSubscriptions = _d.data, subscriptionsAreLoading = _d.isLoading;
+    }), subscriptions = _d.data, subscriptionsAreLoading = _d.isLoading;
     var _e = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
         queryFn: function () { return getPlanChangeOptions({ token: token, apiHost: apiHost }); },
         enabled: Boolean(onChangePlanClick),
     }), planChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
-    // Derived state
-    var subscriptions = useSubscriptions({ data: rawSubscriptions });
     react.useEffect(function () {
         if (subscriptions)
             onSubscriptionsLoaded === null || onSubscriptionsLoaded === void 0 ? void 0 : onSubscriptionsLoaded(subscriptions);

package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts

@@ -2,7 +2,7 @@ import { PlanChangeOptions, Subscription } from "@bunnyapp/common";
 declare const SubscriptionCardActions: ({ onChangePlanClick, onCancelSubscriptionClick, planChangeOptions, subscription, }: {
     onChangePlanClick: (subscription: Subscription) => void;
     onCancelSubscriptionClick: (subscription: Subscription) => void;
-    planChangeOptions?: PlanChangeOptions | undefined;
+    planChangeOptions?: any;
     subscription: Subscription;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default SubscriptionCardActions;

package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardHeader.d.ts

@@ -2,7 +2,7 @@ import { PlanChangeOptions, Subscription } from "@bunnyapp/common";
 declare const SubscriptionCardHeader: ({ onChangePlanClick, onCancelSubscriptionClick, planChangeOptions, subscription, }: {
     onChangePlanClick?: ((subscription: Subscription) => void) | undefined;
     onCancelSubscriptionClick?: ((subscription: Subscription) => void) | undefined;
-    planChangeOptions?: PlanChangeOptions | undefined;
+    planChangeOptions?: any;
     subscription: Subscription;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionCardHeader;

package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts

@@ -3,7 +3,7 @@ declare const SubscriptionsList: ({ hideExpired, onChangePlanClick, onCancelSubs
     hideExpired: boolean;
     onChangePlanClick?: ((subscription: Subscription) => void) | undefined;
     onCancelSubscriptionClick?: ((subscription: Subscription) => void) | undefined;
-    planChangeOptions?: PlanChangeOptions | undefined;
+    planChangeOptions?: any;
     subscriptions: Subscription[];
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionsList;

package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts

@@ -2,7 +2,7 @@ import { PlanChangeOptions, Subscription } from "@bunnyapp/common";
 declare const SubscriptionCardDesktop: ({ onChangePlanClick, onCancelSubscriptionClick, planChangeOptions, subscription, }: {
     onChangePlanClick?: ((subscription: Subscription) => void) | undefined;
     onCancelSubscriptionClick?: ((subscription: Subscription) => void) | undefined;
-    planChangeOptions?: PlanChangeOptions | undefined;
+    planChangeOptions?: any;
     subscription: Subscription;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionCardDesktop;

package/dist/esm/index.js

@@ -4,7 +4,7 @@ import { Markup } from 'interweave';
 import { ConfigProvider, Button, Typography, Tag, Divider, Popconfirm, Input, Checkbox, Collapse, Skeleton, Modal, Form, Drawer, Card as Card$1, Select, Image, Dropdown } from 'antd';
 import { DownloadOutlined, CreditCardOutlined, BankOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled } from '@ant-design/icons';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, useAllErrorFormats, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useErrorNotification, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, SubscriptionChargeKind, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, DataInterval, TAG_COLORS, ChargeType, PricingModel } from '@bunnyapp/common';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, useAllErrorFormats, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useErrorNotification, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, sortSubscriptionCharges, MODAL_MAX_HEIGHT, SLATE_500, DataInterval, SubscriptionState as SubscriptionState$2, TAG_COLORS, ChargeType, SubscriptionChargeKind, PricingModel } from '@bunnyapp/common';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient, keepPreviousData, useMutation } from '@tanstack/react-query';
 import theme from 'antd/lib/theme/index.js';
 import { RecoilRoot } from 'recoil';
@@ -19470,7 +19470,7 @@ var getBillingDetails = function (_a) {
 var Text$5 = Typography.Text;
 var DrawerHeader = function (_a) {
     var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx(Text$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx(Text$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
 };
 
 var PaymentMethod = function (_a) {
@@ -19527,7 +19527,7 @@ var PaymentMethodDisplay = function (_a) {
                 body: {
                     padding: "1rem 0 0 0",
                 },
-            }, title: jsx("div", __assign({ className: "px-4" }, { children: jsx(DrawerHeader, { title: "New payment method", onClose: function () { return setShowModal(false); }, closeButtonClassName: "bg-transparent border-none cursor-pointer hover:bg-gray-100 p-2 rounded-sm transition-all duration-200" }) })), footer: null }, { children: children })));
+            }, title: jsx("div", __assign({ className: "px-4" }, { children: jsx(DrawerHeader, { closeButtonClassName: "bg-transparent border-none cursor-pointer hover:bg-gray-100 p-2 rounded-sm transition-all duration-200", onClose: function () { return setShowModal(false); }, title: "New payment method" }) })), footer: null }, { children: children })));
     }
     return (jsx(Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
             body: {
@@ -19903,8 +19903,8 @@ function InitialSignupForm(_a) {
                             { required: true, message: "Please input your email!" },
                             { type: "email", message: "Please enter a valid email!" },
                         ] }, { children: jsx(Input, { placeholder: "Email" }) })), jsx(Form.Item, __assign({ name: "accountName", rules: [
-                            { required: true, message: "Please input your account name!" },
-                        ] }, { children: jsx(Input, { placeholder: "Account name" }) }))] })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
+                            { required: true, message: "Please input your company name!" },
+                        ] }, { children: jsx(Input, { placeholder: "Company name" }) }))] })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
 }
 
 var Title = Typography.Title, Text$4 = Typography.Text;
@@ -19937,6 +19937,7 @@ function Signup(_a) {
     var _j = useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
     var _k = useState(undefined), paymentMethodGraphQLClient = _k[0], setPaymentMethodGraphQLClient = _k[1];
     var paymentMethod = usePaymentMethod({
+        accountId: accountId,
         entityId: entityId,
         graphQLClient: paymentMethodGraphQLClient || graphQLClient,
         token: token,
@@ -19971,11 +19972,14 @@ function Signup(_a) {
                         data = _a.sent();
                         setAccountId(data.account.id);
                         setPortalSessionToken(data.portalSessionToken);
-                        setPaymentMethodGraphQLClient(createGraphQLClient(apiHost || "", data.portalSessionToken));
+                        setPaymentMethodGraphQLClient(createGraphQLClient(apiHost, data.portalSessionToken));
                         // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
                         // to instead use paymentMethods from portalSessionToken.
                         queryClient.invalidateQueries({
-                            queryKey: QueryKeyFactory.default.accountPaymentMethodKey({ entityId: entityId, token: token }),
+                            queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
+                                entityId: entityId,
+                                token: token,
+                            }),
                         });
                         setProceedingToPayment(false);
                         setQuote(data.quote);
@@ -20012,6 +20016,9 @@ function Signup(_a) {
                         if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
                             throw new Error("Plugin ID is required");
                         }
+                        if (!(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id)) {
+                            throw new Error("Payment method ID is required");
+                        }
                         return [4 /*yield*/, accountSignup({
                                 token: portalSessionToken,
                                 apiHost: apiHost,
@@ -20034,7 +20041,9 @@ function Signup(_a) {
         var children = _a.children, className = _a.className, style = _a.style;
         return isCardEnabled ? (jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsx("div", __assign({ className: className, style: style }, { children: children })));
     };
-    return (jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsx(Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsx(Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsx("div", __assign({ className: "flex ".concat(isMobile ? "items-center justify-center my-12" : "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 }) })) }))] }))) })));
+    return (jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsx(Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsx(Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsx("div", __assign({ className: "flex ".concat(isMobile
+                        ? "items-center justify-center my-12"
+                        : "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 }) })) }))] }))) })));
 }
 
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
@@ -20071,10 +20080,10 @@ var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      n
 var getSubscriptions = function (_a) {
     var apiHost = _a.apiHost, entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var response, combinedSubscriptions;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
                         isInPreviewMode: isInPreviewMode,
                         query: SUBSCRIPTIONS_QUERY,
@@ -20083,78 +20092,14 @@ var getSubscriptions = function (_a) {
                         apiHost: apiHost,
                     })];
                 case 1:
-                    response = _c.sent();
-                    return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes];
+                    response = _d.sent();
+                    combinedSubscriptions = (_c = (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (subscription) { return (__assign(__assign({}, subscription), { charges: sortSubscriptionCharges(subscription.charges) })); });
+                    return [2 /*return*/, combinedSubscriptions];
             }
         });
     });
 };
 
-var useSubscriptions = function (_a) {
-    var data = _a.data;
-    return useMemo(function () {
-        var clonedData = lodashExports.cloneDeep(data);
-        var combinedSubscriptions = clonedData === null || clonedData === void 0 ? void 0 : clonedData.map(function (subscription) {
-            var _a;
-            var orderedSubscriptionCharges = subscription.charges.sort(function (a, b) {
-                if (a.priceListChargeId !== b.priceListChargeId) {
-                    return a.priceListChargeId.localeCompare(b.priceListChargeId);
-                }
-                if (a.kind === SubscriptionChargeKind.DISCOUNT &&
-                    b.kind !== SubscriptionChargeKind.DISCOUNT) {
-                    return 1;
-                }
-                if (a.kind !== SubscriptionChargeKind.DISCOUNT &&
-                    b.kind === SubscriptionChargeKind.DISCOUNT) {
-                    return -1;
-                }
-                return (a.endDate.localeCompare(b.endDate) ||
-                    a.startDate.localeCompare(b.startDate));
-            });
-            var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL;
-            var combinedSubscriptionCharges = [];
-            var aggregationCharge;
-            for (var index = 0; index < orderedSubscriptionCharges.length; index++) {
-                var charge = orderedSubscriptionCharges[index];
-                var nextCharge = orderedSubscriptionCharges[index + 1];
-                if (!aggregationCharge)
-                    aggregationCharge = charge;
-                // If the next charge is the same priceListChargeId and endDate, aggregate the quantities
-                if (nextCharge &&
-                    charge.priceListChargeId === nextCharge.priceListChargeId &&
-                    charge.endDate === nextCharge.endDate &&
-                    charge.startDate === nextCharge.startDate &&
-                    charge.kind === nextCharge.kind) {
-                    aggregationCharge.quantity += nextCharge.quantity;
-                    // If the next charge is different, push the aggregationCharge to the combinedSubscriptionCharges
-                }
-                else if (nextCharge &&
-                    charge.priceListChargeId === nextCharge.priceListChargeId &&
-                    (charge.endDate !== nextCharge.endDate ||
-                        charge.startDate !== nextCharge.startDate) &&
-                    charge.kind === nextCharge.kind &&
-                    (!isTrial || charge.trial) &&
-                    (isTrial || !charge.trial)) {
-                    nextCharge.name = "";
-                    combinedSubscriptionCharges.push(aggregationCharge);
-                    aggregationCharge = undefined;
-                }
-                else {
-                    combinedSubscriptionCharges.push(aggregationCharge);
-                    aggregationCharge = undefined;
-                }
-            }
-            subscription.charges = combinedSubscriptionCharges;
-            return subscription;
-        });
-        var subscriptionOrder = Object.values(SubscriptionState$2);
-        combinedSubscriptions === null || combinedSubscriptions === void 0 ? void 0 : combinedSubscriptions.sort(function (a, b) {
-            return subscriptionOrder.indexOf(a.state) - subscriptionOrder.indexOf(b.state);
-        });
-        return combinedSubscriptions;
-    }, [data]);
-};
-
 var ErrorView = function (_a) {
     var children = _a.children, message = _a.message;
     return (jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
@@ -20587,14 +20532,12 @@ var Subscriptions = function (_a) {
         }),
         queryFn: function () { return getSubscriptions({ entityId: entityId, token: token, apiHost: apiHost }); },
         enabled: Boolean(entityId),
-    }), rawSubscriptions = _d.data, subscriptionsAreLoading = _d.isLoading;
+    }), subscriptions = _d.data, subscriptionsAreLoading = _d.isLoading;
     var _e = useQuery({
         queryKey: QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
         queryFn: function () { return getPlanChangeOptions({ token: token, apiHost: apiHost }); },
         enabled: Boolean(onChangePlanClick),
     }), planChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
-    // Derived state
-    var subscriptions = useSubscriptions({ data: rawSubscriptions });
     useEffect(function () {
         if (subscriptions)
             onSubscriptionsLoaded === null || onSubscriptionsLoaded === void 0 ? void 0 : onSubscriptionsLoaded(subscriptions);

package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts

@@ -2,7 +2,7 @@ import { PlanChangeOptions, Subscription } from "@bunnyapp/common";
 declare const SubscriptionCardActions: ({ onChangePlanClick, onCancelSubscriptionClick, planChangeOptions, subscription, }: {
     onChangePlanClick: (subscription: Subscription) => void;
     onCancelSubscriptionClick: (subscription: Subscription) => void;
-    planChangeOptions?: PlanChangeOptions | undefined;
+    planChangeOptions?: any;
     subscription: Subscription;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default SubscriptionCardActions;

package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardHeader.d.ts

@@ -2,7 +2,7 @@ import { PlanChangeOptions, Subscription } from "@bunnyapp/common";
 declare const SubscriptionCardHeader: ({ onChangePlanClick, onCancelSubscriptionClick, planChangeOptions, subscription, }: {
     onChangePlanClick?: ((subscription: Subscription) => void) | undefined;
     onCancelSubscriptionClick?: ((subscription: Subscription) => void) | undefined;
-    planChangeOptions?: PlanChangeOptions | undefined;
+    planChangeOptions?: any;
     subscription: Subscription;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionCardHeader;

package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts

@@ -3,7 +3,7 @@ declare const SubscriptionsList: ({ hideExpired, onChangePlanClick, onCancelSubs
     hideExpired: boolean;
     onChangePlanClick?: ((subscription: Subscription) => void) | undefined;
     onCancelSubscriptionClick?: ((subscription: Subscription) => void) | undefined;
-    planChangeOptions?: PlanChangeOptions | undefined;
+    planChangeOptions?: any;
     subscriptions: Subscription[];
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionsList;

package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts

@@ -2,7 +2,7 @@ import { PlanChangeOptions, Subscription } from "@bunnyapp/common";
 declare const SubscriptionCardDesktop: ({ onChangePlanClick, onCancelSubscriptionClick, planChangeOptions, subscription, }: {
     onChangePlanClick?: ((subscription: Subscription) => void) | undefined;
     onCancelSubscriptionClick?: ((subscription: Subscription) => void) | undefined;
-    planChangeOptions?: PlanChangeOptions | undefined;
+    planChangeOptions?: any;
     subscription: Subscription;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionCardDesktop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.0.41",
+  "version": "1.0.43",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -63,7 +63,8 @@
     "vite": "^6.2.1"
   },
   "peerDependencies": {
-    "@bunnyapp/common": "^1.0.47",
+    "@ant-design/icons": "^5.6.1",
+    "@bunnyapp/common": "^1.0.52",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
@@ -78,17 +79,19 @@
     "interweave": "^13.1.0",
     "less": "^4.2.0",
     "lodash-es": "^4.17.21",
+    "pluralize": "^8.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "recharts": "^2.15.0",
     "recoil": "^0.7.7",
-    "@ant-design/icons": "^5.6.1",
-    "styled-components": "^6.1.13",
-    "pluralize": "^8.0.0"
+    "styled-components": "^6.1.13"
   },
   "msw": {
     "workerDirectory": [
       "public"
     ]
+  },
+  "dependencies": {
+    "msw-storybook-addon": "^2.0.4"
   }
 }

package/dist/cjs/src/hooks/subscriptions/useSubscriptions.d.ts

@@ -1,5 +0,0 @@
-import { Subscription } from "@bunnyapp/common";
-declare const useSubscriptions: ({ data }: {
-    data: Subscription[];
-}) => Subscription[];
-export default useSubscriptions;

package/dist/esm/src/hooks/subscriptions/useSubscriptions.d.ts

@@ -1,5 +0,0 @@
-import { Subscription } from "@bunnyapp/common";
-declare const useSubscriptions: ({ data }: {
-    data: Subscription[];
-}) => Subscription[];
-export default useSubscriptions;