@bunnyapp/components 1.0.6 → 1.0.7

package/dist/esm/index.js

@@ -2,11 +2,11 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useContext, useEffect, useState, useMemo, useRef } from 'react';
 import { Markup } from 'interweave';
-import { ConfigProvider, Button, Typography, Checkbox, Input, Divider, Modal, Form, Tag, Popconfirm, Drawer, Select, Image, Card as Card$1, Dropdown } from 'antd';
+import { ConfigProvider, Button, Typography, Checkbox, Input, Divider, Modal, Form, Tag, Drawer, Card as Card$1, Popconfirm, Select, Image, Dropdown } from 'antd';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, createGraphQLClient, Misc, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, QueryKeyFactory, useDownloadFile, NotificationUtils, invokePlugin, useIsMobile as useIsMobile$1, GRAY_500, GRAY_200, CHARCOAL_GRAY, StringUtils, usePaymentPlugins, ApiUtils, PAYABLE_INVOICE_STATES, DOCUMENT_NAME as DOCUMENT_NAME$1, QuoteInvoiceUtils, usePlugins, GraphqlUtils, Lists, getTaxationRequiredAccountFields, getAccount, useCurrentUserData, SLATE_500, PRIMARY_COLOR, FrontendTransaction, SLATE_600, WHITE, TransactionKind, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, createGraphQLClient, Misc, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, QueryKeyFactory, useDownloadFile, NotificationUtils, invokePlugin, useIsMobile as useIsMobile$1, GRAY_500, GRAY_200, CHARCOAL_GRAY, StringUtils, usePaymentPlugins, ApiUtils, PAYABLE_INVOICE_STATES, DOCUMENT_NAME as DOCUMENT_NAME$1, QuoteInvoiceUtils, usePlugins, GraphqlUtils, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getTaxationRequiredAccountFields, getAccount, useCurrentUserData, SLATE_500, PRIMARY_COLOR, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
 import { QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient, keepPreviousData } from '@tanstack/react-query';
-import { RecoilRoot, atom, useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
+import { RecoilRoot, atom, useSetRecoilState, useRecoilValue, useRecoilState } from 'recoil';
 import theme from 'antd/lib/theme';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
@@ -3293,1095 +3293,1175 @@ function Quote(_a) {
 }
 var templateObject_1$5;
 
-var DrawerHeader = function (_a) {
-    var description = _a.description, onClose = _a.onClose, title = _a.title;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx("div", __assign({ className: "text-xl" }, { children: title })), jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsx(CloseOutlined$1, {}) }))] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
-};
-
-var LargeCardIcon = function () {
-    return (jsx("svg", __assign({ width: "72", height: "56", viewBox: "0 0 72 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M8 0H64C68.375 0 72 3.625 72 8V12H0V8C0 3.625 3.5 0 8 0ZM72 24V48C72 52.5 68.375 56 64 56H8C3.5 56 0 52.5 0 48V24H72ZM14 40C12.875 40 12 41 12 42C12 43.125 12.875 44 14 44H22C23 44 24 43.125 24 42C24 41 23 40 22 40H14ZM28 42C28 43.125 28.875 44 30 44H46C47 44 48 43.125 48 42C48 41 47 40 46 40H30C28.875 40 28 41 28 42Z", fill: "#E2E8F0" }) })));
+var QUOTES_QUERY = function (filter) { return "\n  query quotes {\n    quotes ".concat(filter ? "(".concat(filter, ")") : "", " {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n      nodes {\n        id\n        name\n        account {\n          name\n          id\n        }\n        applicationDate\n        state\n        createdAt\n        expiresAt\n        currencyId\n        amount\n        number\n      }\n    }\n  }"); };
+var getQuotes = function (_a) {
+    var token = _a.token, subdomain = _a.subdomain, filter = _a.filter;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: QUOTES_QUERY(filter),
+                        token: token,
+                        vars: {},
+                        subdomain: subdomain,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quotes];
+            }
+        });
+    });
 };
 
-var PlusIcon = function (_a) {
-    var color = _a.color;
-    return (jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
-};
+var transactionMutation = function (filter) { return "\nquery transactions {\n  transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n    nodes {\n      amount\n      createdAt\n      currencyId\n      description\n      id\n      kind\n      state\n      transactionableId\n      transactionable {\n        ...on Payment { amount }\n        ...on Invoice { amount number }\n      }\n    }\n  }\n}"); };
+var getTransactions = function (filter, token, subdomain, kindsToShow) { return __awaiter(void 0, void 0, void 0, function () {
+    var response, _a, data, errors, transactions;
+    var _b, _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
+            case 0: return [4 /*yield*/, fetch(subdomain + "/graphql", {
+                    method: "POST",
+                    headers: {
+                        "Content-type": "application/json; charset=utf-8",
+                        Authorization: "Bearer ".concat(token),
+                    },
+                    body: JSON.stringify({
+                        query: transactionMutation(filter),
+                    }),
+                })];
+            case 1:
+                response = _d.sent();
+                return [4 /*yield*/, response.json()];
+            case 2:
+                _a = _d.sent(), data = _a.data, errors = _a.errors;
+                if (errors) {
+                    throw new Error(errors[0].message);
+                }
+                transactions = (_c = (_b = data === null || data === void 0 ? void 0 : data.transactions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.filter(function (transaction) { return kindsToShow.includes(transaction.kind); });
+                return [2 /*return*/, transactions === null || transactions === void 0 ? void 0 : transactions.reverse()];
+        }
+    });
+}); };
 
-var PaymentMethodContext = createContext({});
+var pageContentRefState = atom({
+    key: "pageContentRefState",
+    default: undefined,
+});
 
-var Card = function (_a) {
+var PageContent = function (_a) {
     var children = _a.children, className = _a.className, style = _a.style;
-    var darkMode = useContext(BunnyContext).darkMode;
-    return (jsx("div", __assign({ className: "flex flex-col rounded-md shadow-md ".concat(className), style: __assign(__assign({}, style), { backgroundColor: darkMode
-                ? "var(--row-background-dark)"
-                : "var(--row-background)" }) }, { children: children })));
+    var pageContentRef = useRef(null);
+    var setPageContentRef = useSetRecoilState(pageContentRefState);
+    useEffect(function () {
+        setPageContentRef(pageContentRef === null || pageContentRef === void 0 ? void 0 : pageContentRef.current);
+    }, [pageContentRef, setPageContentRef]);
+    return (jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
 };
 
 var Text$b = Typography.Text;
-var CreditCard = function (_a) {
-    var _b, _c, _d;
-    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData;
-    var isExpired = function (paymentMethodData) {
-        // paymentMethodData.expirationDate
-        var expDate = dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate);
-        return expDate.isBefore(dayjs());
-    };
+var PageHeaderWithActions = function (_a) {
+    var children = _a.children, title = _a.title;
     var isMobile = useIsMobile$1();
-    var processPublicUrl = useContext(PaymentMethodContext).processPublicUrl;
-    return (jsxs(Card, __assign({ className: "shadow-md m-0" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [getCardImage((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) && (jsx("img", { alt: "Card", width: "24px", src: "".concat(processPublicUrl, "/").concat(getCardImage((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.issuer)) })), jsx(Text$b, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.description })] })), jsx(Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxs(Fragment, { children: [jsx(Divider, {}), jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsx(CardAttribute, { title: "EXPIRATION", value: dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).format("MM/YY") }), isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
+    return (jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsx(PageSubTitle, { title: title }), children] })));
 };
-var CardAttribute = function (_a) {
-    var title = _a.title, value = _a.value;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsx(Text$b, { children: value })] })));
+var PageSubTitle = function (_a) {
+    var title = _a.title;
+    var secondaryColor = useContext(BrandContext).secondaryColor;
+    var darkMode = useContext(BunnyContext).darkMode;
+    return (jsx(Text$b, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
 };
-var CardActions = function (_a) {
-    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
-    var isMobile = useIsMobile$1();
-    return (jsxs("div", __assign({ className: "flex items-center gap-6 ".concat(isMobile ? "justify-center mt-4" : "") }, { children: [jsx(Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsx(Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove payment method" })) })), jsx(Divider, { style: { height: "24px" }, type: "vertical" }), jsx(Button, __assign({ onClick: onClickUpdate, type: "primary" }, { children: "Update" }))] })));
+
+var StateTag = function (_a) {
+    var state = _a.state;
+    return jsx(Tag, __assign({ color: getColor(state) }, { children: capitalize(startCase(state)) }));
 };
-var EmptyCard = function (_a) {
-    var onClick = _a.onClick;
-    var brandColor = useContext(BrandContext).brandColor;
-    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center w-full pt-8 px-4 pb-6 cursor-pointer bg-white shadow-md rounded-md", onClick: onClick }, { children: [jsx(LargeCardIcon, {}), jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsx(Button, __assign({ type: "link" }, { children: jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
+var getColor = function (state) {
+    switch (state) {
+        case FrontendTransaction.TransactionState.not_due:
+            return "yellow";
+        case FrontendTransaction.TransactionState.voided:
+            return "black";
+        case FrontendTransaction.TransactionState.ready:
+            return "orange";
+        case FrontendTransaction.TransactionState.preparing:
+            return "purple";
+        case FrontendTransaction.TransactionState.unapplied:
+        case FrontendTransaction.TransactionState.partially_applied:
+        case FrontendTransaction.TransactionState.applied:
+            return "blue";
+        case FrontendTransaction.TransactionState.due:
+        case FrontendTransaction.TransactionState.unpaid:
+            return "orange";
+        case FrontendTransaction.TransactionState.failed:
+            return "red";
+        case FrontendTransaction.TransactionState.paid:
+            return "green";
+        default:
+            return "blue";
+    }
 };
-var getCardImage = function (issuer) {
-    if (issuer === "visa")
-        return "Visa_Brandmark_Blue_RGB_2021.png";
-    else if (issuer === "mastercard")
-        return "mc_symbol_opt_73_3x.png";
+
+var TransactionGridCell = styled.div.withConfig({
+    shouldForwardProp: function (prop) {
+        return !["gridColumn", "padding", "right"].includes(prop);
+    },
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"], ["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) { return (props.right ? "flex-end" : "flex-start"); }, function (props) { return (props.right ? "right" : "left"); }, SLATE_600);
+var templateObject_1$4;
+
+var Text$a = Typography.Text;
+var TransactionDate = function (_a) {
+    var date = _a.date;
+    return jsx(Text$a, __assign({ className: "text-sm" }, { children: Misc.formatDate(date) }));
 };
 
-var ActualPaymentMethod = function () {
-    var _a = useContext(BunnyContext), token = _a.token, subdomain = _a.subdomain, graphQLClient = _a.graphQLClient;
-    var accountId = useContext(PaymentContext).accountId;
-    // Hooks
-    var queryClient = useQueryClient();
-    var paymentPlugins = usePaymentPlugins({ subdomain: subdomain, token: token }).paymentPlugins;
-    var showErrorNotification = NotificationUtils.useErrorNotification();
-    var showSuccessNotification = NotificationUtils.useSuccessNotification();
-    var handleAllErrorFormats = NotificationUtils.useAllErrorFormats(function () {
-        console.log("Navigation in PaymentMethod.tsx useAllErrorFormats not implemented");
-    });
-    var isMobile = useIsMobile$1();
-    var data = usePaymentMethod(graphQLClient).data;
-    // Local state
-    var _b = useState(false), showModal = _b[0], setShowModal = _b[1];
-    var _c = useState(false), isSaving = _c[0], setIsSaving = _c[1];
-    // Queries
-    useQuery({
-        queryKey: QueryKeyFactory.default.currentUserKey,
-        queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
-    });
-    var plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (paymentPlugin) { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
-    var onClickRemove = function () {
-        if (data && plugin) {
-            invokePlugin({
-                plugin: plugin,
-                method: "remove_payment_method",
-                payload: {
-                    payment_method_id: data.id,
-                    account_id: accountId,
-                },
-                token: token,
-                subdomain: subdomain,
-            })
-                .then(function () {
-                showSuccessNotification("Payment method was removed", "Success");
-                queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodKey, null);
-            })
-                .catch(function (error) {
-                showErrorNotification(error.message, "Error removing Payment Method");
-            });
-        }
-    };
-    var onSuccess = function () {
-        queryClient.invalidateQueries({
-            queryKey: QueryKeyFactory.default.accountPaymentMethodKey,
-        });
-        setShowModal(false);
-        showSuccessNotification("Your payment method has been saved");
-    };
-    if (data === undefined)
+var isInvoice = function (transaction) {
+    return transaction.kind === "INVOICE";
+};
+var isQuote = function (transaction) {
+    return transaction.kind === "QUOTE";
+};
+var TransactionRowTitle = function (_a) {
+    var transaction = _a.transaction;
+    if (!isInvoice(transaction) && !isQuote(transaction)) {
         return jsx(Fragment, {});
-    return (jsxs(Fragment, { children: [data ? (jsx(CreditCard, { onClickRemove: onClickRemove, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data })) : (jsx(EmptyCard, { onClick: function () { return setShowModal(true); } })), jsx(Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
-                    body: isMobile
-                        ? {
-                            padding: "1rem 0 0",
-                        }
-                        : {},
-                    wrapper: isMobile ? { width: "100vw" } : { width: "min-content" },
-                }, title: jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method" }) }, { children: jsx(PaymentForm, { isSaving: isSaving, onFail: function (error) {
-                        handleAllErrorFormats(error);
-                        setIsSaving(false);
-                    }, onPaymentSuccess: function () {
-                        onSuccess();
-                        setIsSaving(false);
-                    }, setIsSaving: setIsSaving }) }))] }));
+    }
+    return (jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
 };
-function PaymentMethod(_a) {
-    var footer = _a.footer, processPublicUrl = _a.processPublicUrl;
-    return (jsx(PaymentMethodContext.Provider, __assign({ value: { footer: footer, processPublicUrl: processPublicUrl } }, { children: jsx(ActualPaymentMethod, {}) })));
-}
 
-var MUTATION$5 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account { id }\n        errors\n      }\n  }\n";
-var accountUpdate = function (_a) {
-    var accountId = _a.accountId, attributes = _a.attributes, token = _a.token;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response, errors;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    vars = { id: accountId, attributes: attributes };
-                    return [4 /*yield*/, gqlRequest({ query: MUTATION$5, token: token, vars: vars })];
-                case 1:
-                    response = _c.sent();
-                    errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, response.accountUpdate];
-            }
-        });
-    });
+// TODO: delete
+var ArrowDownToLine = function (_a) {
+    var className = _a.className, _b = _a.color, color = _b === void 0 ? SLATE_600 : _b;
+    return (jsxs("svg", __assign({ className: className, fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M8 11.3333V2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M4 7.33301L8 11.333L12 7.33301", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M12.6654 14H3.33203", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
-var COUNTRIES_REQUIRING_STATE = ["US", "CA"];
-var TaxationForm = function (_a) {
-    var account = _a.account, quote = _a.quote;
-    // Hooks
-    var queryClient = useQueryClient();
-    var token = useContext(BunnyContext).token;
-    var form = Form.useForm()[0];
-    // Mutations
-    var _b = useMutation({
-        mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
-            var account;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, accountUpdate({
-                            accountId: quote.accountId,
-                            attributes: changedFormData,
-                            token: token,
-                        })];
-                    case 1:
-                        account = _a.sent();
-                        return [2 /*return*/, account];
-                }
-            });
-        }); },
-        onSuccess: function () {
-            queryClient.invalidateQueries({
-                queryKey: ["getTaxationRequiredAccountFields", token],
-            });
-        },
-    }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
-    return (jsxs(Form, __assign({ className: "flex flex-col gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsx(Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsx(Input, { placeholder: "Street" }) })), jsx(Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsx(Input, { placeholder: "City" }) })), jsx(FormBillingState, { form: form }), jsx(Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsx(Select, { options: Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
-                        var _a, _b;
-                        return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
-                            ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
-                    } }) })), jsx(Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsx(Input, { placeholder: "Zip" }) })), jsx(Form.Item, { children: jsx(Button, __assign({ className: "w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
+var TransactionsListContext = createContext({});
+
+var TransactionDownload = function (_a) {
+    var transaction = _a.transaction, token = _a.token, subdomain = _a.subdomain;
+    var darkMode = useContext(BunnyContext).darkMode;
+    var downloadTransactionLink = useContext(TransactionsListContext).downloadTransactionLink;
+    var downloadFile = useDownloadFile();
+    var isMobile = useIsMobile$1();
+    var isClickable = transaction.kind === "INVOICE" || downloadTransactionLink !== undefined;
+    var downloadLink = downloadTransactionLink
+        ? downloadTransactionLink(transaction.transactionableId)
+        : "".concat(subdomain, "/api/pdf/invoice/").concat(transaction.transactionableId);
+    if (!isClickable)
+        return null;
+    return (jsx("div", __assign({ onClick: function (e) {
+            e.stopPropagation();
+            downloadFile(downloadLink, token);
+        } }, { children: jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "show-on-hover"), color: darkMode ? WHITE : SLATE_600 }) })));
 };
-var FormBillingState = function (_a) {
-    _a.form;
-    var billingCountry = Form.useWatch("billingCountry");
-    var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
-    return (jsx(Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsx(Input, { placeholder: "State" }) })));
+
+var Text$9 = Typography.Text;
+var TransactionsEmptyState = function () {
+    var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
+    return (jsx(Text$9, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
 };
 
-var QuoteCheckout = function (_a) {
-    var account = _a.account, isSaving = _a.isSaving, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, setIsSaving = _a.setIsSaving, taxationRequiredAccountFields = _a.taxationRequiredAccountFields; _a.storedPaymentMethod;
-    // Context
-    var isMobile = useIsMobile$1();
-    var _b = useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token;
-    var paymentRequired = getQuoteAmountDue(quote) > 0;
-    var checkoutMutation = useMutation({
-        mutationFn: function (_a) {
-            var pluginPaymentMethod = _a.pluginPaymentMethod, savedPaymentMethod = _a.storedPaymentMethod;
-            if (!quote)
-                throw new Error("Quote is required");
-            if (!paymentRequired)
-                return checkout({ quoteId: quote.id, token: token, subdomain: subdomain });
-            if (savedPaymentMethod) {
-                var paymentMethodId = savedPaymentMethod.paymentMethodId;
-                return checkout({
-                    quoteId: quote.id,
-                    paymentMethodId: paymentMethodId,
-                    token: token,
-                    subdomain: subdomain,
-                });
-            }
-            if (pluginPaymentMethod) {
-                var plugin = pluginPaymentMethod.plugin, savePaymentMethod = pluginPaymentMethod.savePaymentMethod, metadata = pluginPaymentMethod.metadata;
-                var paymentToken = pluginPaymentMethod.token;
-                return checkout({
-                    quoteId: quote.id,
-                    paymentMethodData: {
-                        metadata: metadata,
-                        pluginGuid: plugin.guid,
-                        savePaymentMethod: savePaymentMethod,
-                        token: paymentToken,
-                    },
-                    token: token,
-                    subdomain: subdomain,
-                });
-            }
-            throw new Error("Pay payment method provided");
-        },
-        onSuccess: onSuccess,
-        onError: onFail,
-    });
-    // Handlers
-    var handleCheckout = function (_a) {
-        var pluginPaymentResponse = _a.pluginPaymentResponse, savedPaymentMethodResponse = _a.savedPaymentMethodResponse;
-        return __awaiter(void 0, void 0, void 0, function () {
-            var token_1, plugin, savePaymentMethod, metadata, paymentMethodId;
-            return __generator(this, function (_b) {
-                if (pluginPaymentResponse) {
-                    token_1 = pluginPaymentResponse.token, plugin = pluginPaymentResponse.plugin, savePaymentMethod = pluginPaymentResponse.savePaymentMethod, metadata = pluginPaymentResponse.metadata;
-                    checkoutMutation.mutate({
-                        pluginPaymentMethod: {
-                            savePaymentMethod: savePaymentMethod,
-                            plugin: plugin,
-                            metadata: metadata,
-                            token: token_1,
-                        },
-                    });
-                }
-                else if (savedPaymentMethodResponse) {
-                    paymentMethodId = savedPaymentMethodResponse.paymentMethodId;
-                    checkoutMutation.mutate({
-                        storedPaymentMethod: {
-                            paymentMethodId: paymentMethodId,
-                        },
-                    });
-                }
-                else {
-                    checkoutMutation.mutate({});
-                }
-                return [2 /*return*/];
-            });
-        });
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+var WARREN_STATE_LS_KEY = "warrenState";
+var CURRENT_WARREN_ID_LS_KEY = "currentWarrenId";
+var getIsCapacitorApp = function () {
+    var isAndroid = window.location.origin === "http://localhost";
+    var isIOS = window.location.protocol === "capacitor:";
+    return isAndroid || isIOS;
+};
+var getLocalStorageSubdomain = function () {
+    var warrenState = JSON.parse(window.localStorage.getItem(WARREN_STATE_LS_KEY) || "{}");
+    var subdomain = warrenState[CURRENT_WARREN_ID_LS_KEY];
+    if (!subdomain) {
+        console.warn("ERROR_MESSAGE_NO_SUBDOMAIN_DEFINED");
+        //throw new Error(ERROR_MESSAGE_NO_SUBDOMAIN_DEFINED);
+    }
+    return subdomain;
+};
+var getApiHost = function (subdomain) {
+    var isLocalHost = window.location.href.indexOf(".internal") > 0;
+    var sub = subdomain || getLocalStorageSubdomain();
+    if (getIsCapacitorApp()) {
+        return isLocalHost || process.env.REACT_APP_IS_INTERNAL === "true"
+            ? "https://".concat(sub, ".bunny.internal")
+            : "https://".concat(sub, ".").concat(process.env.REACT_APP_ROOT_DOMAIN);
+    }
+    return "";
+};
+var getGraphQLBase = function () {
+    if (getIsCapacitorApp()) {
+        return "".concat(getApiHost(), "/graphql");
+    }
+    return "/graphql";
+};
+var createRequestHeaders = function (token) {
+    var bearerToken = "Bearer ".concat(token);
+    var headers = {
+        "Content-type": "application/json; charset=utf-8",
     };
-    if (taxationRequiredAccountFields)
-        return (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsx(TaxationForm, { account: account, quote: quote }) })));
-    return (jsx(Fragment, { children: paymentRequired ? (jsx(PaymentForm, { isSaving: isSaving, onFail: onFail, onPaymentSuccess: handleCheckout, quote: quote, setIsSaving: setIsSaving })) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "shadow-padding-x" : "") }, { children: [jsx(Button, __assign({ disabled: isSaving, onClick: function () {
-                            setIsSaving(true);
-                            handleCheckout({});
-                        }, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsx("div", __assign({ className: "text-xs text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
+    headers["Authorization"] = bearerToken;
+    return headers;
 };
+var useGraphQLRequest = function () { return function (query, token, variables) { return __awaiter(void 0, void 0, void 0, function () {
+    var error_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 2, , 3]);
+                return [4 /*yield*/, request(getGraphQLBase(), query, variables, createRequestHeaders(token))];
+            case 1: return [2 /*return*/, _a.sent()];
+            case 2:
+                error_1 = _a.sent();
+                throw error_1;
+            case 3: return [2 /*return*/];
+        }
+    });
+}); }; };
 
-var useHasTaxPlugin = function (_a) {
-    var subdomain = _a.subdomain, token = _a.token;
-    var plugins = usePlugins({
-        subdomain: subdomain,
-        token: token,
-    }).data;
-    return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
+var Text$8 = Typography.Text;
+var TransactionsListDesktop = function (_a) {
+    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
+    var columns = useContext(TransactionsListContext).columns;
+    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, darkMode = _b.darkMode;
+    var showAmount = columns.includes("amount");
+    var showDateAndTitle = columns.includes("date-and-title");
+    var showDownload = columns.includes("download");
+    var showState = columns.includes("state");
+    if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
+        return jsx(TransactionsEmptyState, {});
+    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
+        var _a;
+        var isClickable = onTransactionClick !== undefined;
+        return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
+                onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
+            }, style: {
+                backgroundColor: index % 2 === 0
+                    ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
+                    : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
+            } }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transaction.createdAt }) })), jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$8, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })), showState && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$8, { children: Misc.formatCurrency(((_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _a === void 0 ? void 0 : _a.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
+    });
 };
 
-var QUOTE_FIELDS = "quote {\n  formattedQuote {\n    html\n  }\n  acceptedByName\n  acceptedByTitle\n  accountId\n  amount\n  amountDue\n  applicationDate\n  applied\n  billingDay\n  contactId\n  createdAt\n  credits\n  currencyId\n  dealId\n  discount\n  discountValue\n  endDate\n  evergreen\n  expiresAt\n  id\n  invoiceUntil\n  isPendingApprovalRequest\n  kind\n  message\n  name\n  netPaymentDays\n  notes\n  ownerId\n  periodAmount\n  poNumber\n  requiresApproval\n  startDate\n  state\n  subtotal\n  taxAmount\n  updatedAt\n  uuid\n  amountsByPeriod {\n    amount\n    id\n    name\n  }\n  endDateOptions {\n    endDate\n    label\n  }\n  invoiceUntilOptions {\n    endDate\n    label\n  }\n  quoteChanges {\n    id\n    priceListId\n    charges {\n      amount\n      amountsByPeriod { amount startDate }\n      billingPeriod\n      billingPeriodAmounts { id amount prorationRate }\n      chargeType\n      couponId\n      createdAt\n      currencyId\n      discount\n      endDate\n      feature { id name code isUnit unitName }\n      id\n      invoiceLineText\n      name\n      price\n      priceDecimals\n      priceTiers { starts price }\n      pricingModel\n      prorationRate\n      quantity\n      quantityMax\n      quantityMin\n      startDate\n      tieredAveragePrice\n      updatedAt\n    }\n  }\n}";
-
-var QUOTE_RECALCULATE_TAXES = "\n  mutation QuoteRecalculateTaxes($id: ID!) {\n    quoteRecalculateTaxes(id: $id) {\n      ".concat(QUOTE_FIELDS, "\n      errors\n    }\n  }\n");
-var quoteRecalculateTaxes = function (_a) {
-    var quoteId = _a.quoteId, token = _a.token;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response, errors;
-        var _b, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
-                case 0:
-                    vars = { id: quoteId };
-                    return [4 /*yield*/, gqlRequest({
-                            query: QUOTE_RECALCULATE_TAXES,
-                            token: token,
-                            vars: vars,
-                        })];
-                case 1:
-                    response = _d.sent();
-                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteRecalculateTaxes) === null || _b === void 0 ? void 0 : _b.errors;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, (_c = response.quoteRecalculateTaxes) === null || _c === void 0 ? void 0 : _c.quote];
-            }
-        });
+var Text$7 = Typography.Text;
+var TransactionsListMobile = function (_a) {
+    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
+    var columns = useContext(TransactionsListContext).columns;
+    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, darkMode = _b.darkMode;
+    var showAmount = columns.includes("amount");
+    var showDateAndTitle = columns.includes("date-and-title");
+    var showDownload = columns.includes("download");
+    var showState = columns.includes("state");
+    if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
+        return jsx(TransactionsEmptyState, {});
+    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
+        var isClickable = transaction.kind === "INVOICE";
+        return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
+                onTransactionClick(transaction);
+            }, style: {
+                backgroundColor: index % 2 === 0
+                    ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
+                    : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
+            } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(Text$7, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsx(Text$7, { children: "\u00B7" }), showAmount && (jsx(Text$7, { children: Misc.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })))] }), index));
     });
 };
 
-var planPickerQuoteDataState = atom({
-    key: "planPickerQuoteDataState",
-    default: undefined,
-});
-
-var pageWrapperClassName = function (isMobile) {
-    return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
-};
-
-var queryKeyFactory = QueryKeyFactory.default;
-var Checkout = function (_a) {
-    var _b, _c;
-    var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, isMobile = _a.isMobile, token = _a.token, storedPaymentMethod = _a.storedPaymentMethod;
-    var subdomain = useContext(BunnyContext).subdomain;
-    var _d = useState(false), isSaving = _d[0], setIsSaving = _d[1];
-    var hasTaxPlugin = useHasTaxPlugin({ subdomain: subdomain || "", token: token });
-    var queryClient = useQueryClient();
-    var quotePreviewData = useRecoilValue(planPickerQuoteDataState);
+// Create a client
+var queryClient = new QueryClient();
+function Transactions(_a) {
+    var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.columns, columns = _d === void 0 ? ["date-and-title", "state", "amount"] : _d, className = _a.className, _e = _a.shadow, shadow = _e === void 0 ? "md" : _e, searchBarClassName = _a.searchBarClassName, _f = _a.useModal, useModal = _f === void 0 ? false : _f, onTransactionClick = _a.onTransactionClick, _g = _a.suppressTransactionDisplay, suppressTransactionDisplay = _g === void 0 ? false : _g, _h = _a.kindsToShow, kindsToShow = _h === void 0 ? [
+        TransactionKind.INVOICE,
+        TransactionKind.PAYMENT,
+        TransactionKind.REFUND,
+        TransactionKind.WRITE_OFF,
+    ] : _h, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage;
+    var contextValues = {
+        showSearchBar: showSearchBar,
+        showTitle: showTitle,
+        transactionComponent: transactionComponent,
+        columns: columns,
+        className: className,
+        searchBarClassName: searchBarClassName,
+        shadow: shadow,
+        useModal: useModal,
+        onTransactionClick: onTransactionClick,
+        suppressTransactionDisplay: suppressTransactionDisplay,
+        kindsToShow: kindsToShow,
+        style: style,
+        filter: filter,
+        noTransactionsMessage: noTransactionsMessage,
+    };
+    return (jsx(QueryClientProvider, __assign({ client: queryClient }, { children: jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsWrapper, {}) })) })));
+}
+function TransactionsWrapper() {
+    var _a = useContext(TransactionsListContext), kindsToShow = _a.kindsToShow, filterFromContext = _a.filter;
+    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
+    // Local state
+    var _c = useState(""), search = _c[0], setSearch = _c[1];
+    var filter = filterFromContext ||
+        (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
     // Queries
-    var _e = useQuery({
-        queryKey: ["getTaxationRequiredAccountFields", token],
-        queryFn: function () { return getTaxationRequiredAccountFields({ token: token }); },
-        enabled: Boolean(quote),
-        staleTime: 0,
-    }), taxationRequiredAccountFields = _e.data, isLoadingTaxationRequiredAccountFields = _e.isLoading;
-    var _f = useQuery({
-        queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
-        queryFn: function () {
-            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, token: token });
-        },
-        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
-            ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
-    }), account = _f.data, isLoadingAccount = _f.isLoading;
-    useQuery({
-        queryKey: queryKeyFactory.createQuoteTaxCalculateKey(quote === null || quote === void 0 ? void 0 : quote.id),
-        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
-            var updatedQuote;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!quote) return [3 /*break*/, 2];
-                        return [4 /*yield*/, quoteRecalculateTaxes({
-                                quoteId: quote.id,
-                                token: token,
-                            })];
-                    case 1:
-                        updatedQuote = _a.sent();
-                        if (updatedQuote) {
-                            queryClient.setQueryData(queryKeyFactory.createObjectKey("editingQuote", updatedQuote.id), updatedQuote);
-                            queryClient.setQueryData(queryKeyFactory.calculatedPricesKey((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), updatedQuote);
-                        }
-                        _a.label = 2;
-                    case 2: return [2 /*return*/, {}];
-                }
-            });
-        }); },
-        // Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
-        enabled: Boolean(quote) &&
-            open &&
-            hasTaxPlugin &&
-            !taxationRequiredAccountFields &&
-            !isLoadingTaxationRequiredAccountFields,
-        staleTime: 0,
-    });
-    if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
-        return null;
-    return (jsx("div", __assign({ className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 bg-slate-50 overflow-auto", style: {
-            zIndex: 1001,
-        } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsx(CloseOutlined$1, { className: "text-base shadow-padding-xb", onClick: onCancel }) })), jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "flex-col" : "shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "", isMobile: isMobile })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsx(Divider, { className: "h-full", type: "vertical" })), invoice ? (jsx(InvoiceCheckout, { invoice: invoice, isSaving: isSaving, onFail: function (error) {
-                                onFail(error);
-                                setIsSaving(false);
-                            }, onSuccess: function (_a) {
-                                var savePaymentMethod = _a.savePaymentMethod;
-                                onSuccess({ savePaymentMethod: savePaymentMethod });
-                                setIsSaving(false);
-                            }, setIsSaving: setIsSaving })) : quote ? (jsx(QuoteCheckout, { account: account, isSaving: isSaving, onFail: function (error) {
-                                onFail(error);
-                                setIsSaving(false);
-                            }, onSuccess: function (_a) {
-                                var savePaymentMethod = _a.savePaymentMethod;
-                                onSuccess({ savePaymentMethod: savePaymentMethod });
-                                setIsSaving(false);
-                            }, quote: quote, setIsSaving: setIsSaving, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, storedPaymentMethod: storedPaymentMethod })) : (jsx(PaymentForm, { isSaving: isSaving, onFail: function (error) {
-                                onFail(error);
-                                setIsSaving(false);
-                            }, onPaymentSuccess: function (_a) {
-                                var pluginPaymentResponse = _a.pluginPaymentResponse;
-                                onSuccess({
-                                    savePaymentMethod: pluginPaymentResponse === null || pluginPaymentResponse === void 0 ? void 0 : pluginPaymentResponse.savePaymentMethod,
-                                });
-                                setIsSaving(false);
-                            }, setIsSaving: setIsSaving }))] }))] })) })));
-};
-
-var MUTATION$4 = function () { return "\nmutation AccountSignup (\n  $entityId: ID!,\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!\n) {\n  accountSignup(\n    entityId: $entityId,\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId\n  ) {\n    errors\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
-var accountSignup = function (_a) {
-    var token = _a.token, subdomain = _a.subdomain, entityId = _a.entityId, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response, errors;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    vars = {
-                        entityId: entityId,
-                        accountId: accountId,
-                        quoteId: quoteId,
-                        paymentToken: paymentToken,
-                        pluginId: pluginId,
-                        paymentMethodId: paymentMethodId,
-                        priceListCode: priceListCode,
-                    };
-                    return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$4(),
-                            token: token,
-                            vars: vars,
-                            subdomain: subdomain,
-                        })];
-                case 1:
-                    response = _c.sent();
-                    errors = (_b = response === null || response === void 0 ? void 0 : response.accountSignup) === null || _b === void 0 ? void 0 : _b.errors;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.accountSignup];
+    var data = useQuery({
+        queryKey: ["transactions", token, filter],
+        queryFn: function () { return getTransactions(filter, token, subdomain, kindsToShow); },
+        placeholderData: keepPreviousData,
+    }).data;
+    return (jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }));
+}
+function TransactionsDisplay(_a) {
+    var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search, title = _a.title;
+    var _b = useContext(TransactionsListContext), showSearchBar = _b.showSearchBar, showTitle = _b.showTitle, transactionComponent = _b.transactionComponent, useModal = _b.useModal, suppressTransactionDisplay = _b.suppressTransactionDisplay, className = _b.className, shadow = _b.shadow, searchBarClassName = _b.searchBarClassName, style = _b.style, onTransactionClick = _b.onTransactionClick;
+    var columns = useContext(TransactionsListContext).columns;
+    var darkMode = useContext(BunnyContext).darkMode;
+    // Local state
+    var _c = useState(null), selectedTransaction = _c[0], setSelectedTransaction = _c[1];
+    var _d = useState(false), drawerOpen = _d[0], setDrawerOpen = _d[1];
+    // Hooks
+    var isMobile = useIsMobile$1();
+    function handleTransactionClick(transaction) {
+        if (onTransactionClick) {
+            onTransactionClick(transaction);
+        }
+        if (!suppressTransactionDisplay) {
+            setSelectedTransaction(transaction);
+            setDrawerOpen(true);
+        }
+    }
+    // Since the columns are dynamic, we need to calculate the grid template columns
+    var gridTemplateColumns = function () {
+        var templateColumns = [];
+        if (isMobile) {
+            if (columns.includes("date-and-title") ||
+                columns.includes("state") ||
+                columns.includes("amount")) {
+                templateColumns.push("auto");
             }
-        });
-    });
-};
-
-var MUTATION$3 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $entityId: ID!,\n  $priceListCode: String!\n) {\n  quoteAccountSignup(\n    entityId: $entityId,\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact\n  ) {\n    account {\n      id\n    }\n    amount\n    currencyId\n    quote {\n      id\n    }\n    tenant {\n      code\n    }\n    errors\n  }\n}"; };
-var quoteAccountSignup = function (_a) {
-    var token = _a.token, subdomain = _a.subdomain, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response, errors;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    vars = {
-                        entityId: entityId,
-                        priceListCode: priceListCode,
-                        accountName: accountName,
-                        billingContact: billingContact,
-                    };
-                    return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$3(),
-                            token: token,
-                            vars: vars,
-                            subdomain: subdomain,
-                        })];
-                case 1:
-                    response = _c.sent();
-                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAccountSignup) === null || _b === void 0 ? void 0 : _b.errors;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quoteAccountSignup];
+            if (columns.includes("download")) {
+                templateColumns.push("auto");
             }
-        });
-    });
-};
-
-var MUTATION$2 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
-var getPriceList = function (_a) {
-    var token = _a.token, code = _a.code, subdomain = _a.subdomain;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$2(),
-                        token: token,
-                        vars: { code: code },
-                        subdomain: subdomain,
-                    })];
-                case 1:
-                    response = _b.sent();
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.priceList];
+        }
+        else {
+            if (columns.includes("date-and-title")) {
+                templateColumns.push("auto 3fr");
             }
-        });
-    });
-};
-
-function PaymentForms(_a) {
-    var quote = _a.quote, paying = _a.paying, setIsPaying = _a.setIsPaying, handlePaymentSaveSuccess = _a.handlePaymentSaveSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId;
-    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: accountId && (jsx(PaymentContext.Provider, __assign({ value: { accountId: accountId, displayPayButtonNameAnyways: true } }, { children: jsx(PaymentForm, { isSaving: paying, setIsSaving: setIsPaying, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSaveSuccess }) }))) })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
-}
-function InitialSignupForm(_a) {
-    var onSubmit = _a.onSubmit, submitting = _a.submitting;
-    var _b = useState({
-        firstName: "",
-        lastName: "",
-        email: "",
-        accountName: "",
-    }), formData = _b[0], setFormData = _b[1];
-    var handleInputChange = function (e) {
-        var _a;
-        var _b = e.target, name = _b.name, value = _b.value;
-        setFormData(__assign(__assign({}, formData), (_a = {}, _a[name] = value, _a)));
+            if (columns.includes("download")) {
+                templateColumns.push("auto");
+            }
+            if (columns.includes("state")) {
+                templateColumns.push("auto");
+            }
+            if (columns.includes("amount")) {
+                templateColumns.push("auto");
+            }
+        }
+        return templateColumns.join(" ");
     };
-    return (jsxs(Form, __assign({ className: "flex w-1/2 flex-col justify-between h-full", onFinish: function () { return onSubmit(formData); } }, { children: [jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsx(Form.Item, __assign({ rules: [{ required: true, message: "Please input your first name!" }], initialValue: formData.firstName }, { children: jsx(Input, { placeholder: "First name", value: formData.firstName, onChange: function (e) {
-                                handleInputChange(e);
-                                setFormData(__assign(__assign({}, formData), { firstName: e.target.value }));
-                            } }) })), jsx(Form.Item, __assign({ rules: [{ required: true, message: "Please input your last name!" }], initialValue: formData.lastName }, { children: jsx(Input, { placeholder: "Last name", value: formData.lastName, onChange: function (e) {
-                                handleInputChange(e);
-                                setFormData(__assign(__assign({}, formData), { lastName: e.target.value }));
-                            } }) })), jsx(Form.Item, __assign({ rules: [
-                            { required: true, message: "Please input your email!" },
-                            { type: "email", message: "Please enter a valid email!" },
-                        ], initialValue: formData.email }, { children: jsx(Input, { placeholder: "Email", value: formData.email, onChange: function (e) {
-                                handleInputChange(e);
-                                setFormData(__assign(__assign({}, formData), { email: e.target.value }));
-                            } }) })), jsx(Form.Item, __assign({ rules: [
-                            { required: true, message: "Please input your account name!" },
-                        ], initialValue: formData.accountName }, { children: jsx(Input, { placeholder: "Account name", value: formData.accountName, onChange: function (e) {
-                                handleInputChange(e);
-                                setFormData(__assign(__assign({}, formData), { accountName: e.target.value }));
-                            } }) }))] })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", htmlType: "submit", loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
+    var drawerTitle = function () {
+        if (!selectedTransaction)
+            return "";
+        var kind = selectedTransaction.kind.toLowerCase();
+        return kind.charAt(0).toUpperCase() + kind.slice(1);
+    };
+    return (jsxs("div", __assign({ style: style }, { children: [jsx(PageHeaderWithActions, __assign({ title: title || (showTitle ? "Past transactions" : undefined) }, { children: showSearchBar && (jsx("div", { children: jsx(Input, { className: searchBarClassName
+                            ? searchBarClassName
+                            : "border border-slate-200", onChange: function (e) {
+                            if (isNaN(Number(e.target.value))) {
+                                return;
+                            }
+                            onSearchValueChanged(e.target.value);
+                        }, prefix: jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
+                            minWidth: "300px",
+                        }, value: search }) })) })), jsx(PageContent, __assign({ className: "flex w-full shadow-padding-xb ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: jsx("div", __assign({ className: "grid w-full rounded-md overflow-auto ".concat("shadow-".concat(shadow)), style: {
+                        gridTemplateColumns: gridTemplateColumns(),
+                        backgroundColor: "var(--row-background".concat(darkMode ? "-dark" : "", ")"),
+                    } }, { children: isMobile ? (jsx(Fragment, { children: TransactionsListMobile({
+                            transactions: transactions,
+                            onTransactionClick: handleTransactionClick,
+                        }) })) : (jsx(Fragment, { children: TransactionsListDesktop({
+                            transactions: transactions,
+                            onTransactionClick: handleTransactionClick,
+                        }) })) })) })), useModal ? (jsx(Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsx(Drawer, __assign({ title: drawerTitle(), onClose: function () { return setDrawerOpen(false); }, open: drawerOpen, width: 900 }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxs(Card$1, __assign({ className: "shadow-md" }, { children: [jsx(Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Amount:" }), " ", jsx(Typography.Text, { children: Misc.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Description:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Kind:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "State:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
 }
 
-var Title = Typography.Title, Text$a = Typography.Text;
-function PaymentSuccessDisplay(_a) {
-    var className = _a.className, amountPaid = _a.amountPaid, style = _a.style, returnUrl = _a.returnUrl;
-    var window = useContext(BunnyContext).window;
-    var companyName = useCurrentUserData().companyName;
-    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", Misc.formatCurrency(amountPaid, "USD"), " successful"] })), returnUrl && (jsxs(Text$a, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
+function Quotes(_a) {
+    var filter = _a.filter, quoteComponent = _a.quoteComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.columns, columns = _d === void 0 ? ["date-and-title", "amount", "download"] : _d, className = _a.className, _e = _a.shadow, shadow = _e === void 0 ? "md" : _e, searchBarClassName = _a.searchBarClassName, _f = _a.useModal, useModal = _f === void 0 ? false : _f; _a.onQuoteClick; var _g = _a.suppressQuoteDisplay, suppressQuoteDisplay = _g === void 0 ? false : _g, style = _a.style, _h = _a.noQuotesMessage, noQuotesMessage = _h === void 0 ? "There are no quotes" : _h;
+    var subdomain = useContext(BunnyContext).subdomain;
+    var _j = useState(null), component = _j[0], setComponent = _j[1];
+    var contextValues = {
+        columns: columns,
+        kindsToShow: [],
+        onTransactionClick: handleQuoteClick,
+        transactionComponent: component,
+        showSearchBar: showSearchBar,
+        showTitle: showTitle,
+        className: className,
+        shadow: shadow,
+        searchBarClassName: searchBarClassName,
+        useModal: useModal,
+        suppressTransactionDisplay: suppressQuoteDisplay,
+        style: style,
+        noTransactionsMessage: noQuotesMessage,
+        filter: filter,
+        downloadTransactionLink: function (id) { return "".concat(subdomain, "/api/pdf/quote/").concat(id); },
+    };
+    function handleQuoteClick(quote) {
+        if (quoteComponent) {
+            setComponent(quoteComponent);
+        }
+        else {
+            setComponent(jsx(Quote, { id: quote === null || quote === void 0 ? void 0 : quote.transactionableId }));
+        }
+    }
+    return (jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(QuotesWrapper, {}) })));
 }
-
-var Text$9 = Typography.Text;
-function PriceListDisplay(_a) {
-    var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
-    if (!priceListData)
+function QuotesWrapper() {
+    var _a = useContext(BunnyContext), token = _a.token, subdomain = _a.subdomain;
+    var filterFromContext = useContext(TransactionsListContext).filter;
+    // Local state
+    var _b = useState(""), search = _b[0], setSearch = _b[1];
+    var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : "");
+    // Queries
+    var data = useQuery({
+        queryKey: ["quotes", token, filter],
+        queryFn: function () { return getQuotes({ token: token, subdomain: subdomain, filter: filter }); },
+        placeholderData: keepPreviousData,
+    }).data;
+    if (data === undefined)
         return null;
-    return (jsx(Fragment, { children: jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsx(Text$9, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxs(Text$9, __assign({ className: "font-bold text-xl" }, { children: [Misc.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxs(Text$9, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$9, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))] })) })) }));
+    var quotesAsTransactions = data.nodes.map(function (quote) { return ({
+        transactionableId: quote.id,
+        state: "unapplied",
+        amount: quote.amount || quote.amountDue,
+        kind: "QUOTE",
+        currencyId: quote.currencyId,
+        transactionable: {
+            number: quote.number,
+        },
+        createdAt: quote.createdAt,
+    }); });
+    return (jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search, title: "Past quotes" }));
 }
 
-var BunnyFooterIcon = function (_a) {
+var DrawerHeader = function (_a) {
+    var description = _a.description, onClose = _a.onClose, title = _a.title;
+    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx("div", __assign({ className: "text-xl" }, { children: title })), jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsx(CloseOutlined$1, {}) }))] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+};
+
+var LargeCardIcon = function () {
+    return (jsx("svg", __assign({ width: "72", height: "56", viewBox: "0 0 72 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M8 0H64C68.375 0 72 3.625 72 8V12H0V8C0 3.625 3.5 0 8 0ZM72 24V48C72 52.5 68.375 56 64 56H8C3.5 56 0 52.5 0 48V24H72ZM14 40C12.875 40 12 41 12 42C12 43.125 12.875 44 14 44H22C23 44 24 43.125 24 42C24 41 23 40 22 40H14ZM28 42C28 43.125 28.875 44 30 44H46C47 44 48 43.125 48 42C48 41 47 40 46 40H30C28.875 40 28 41 28 42Z", fill: "#E2E8F0" }) })));
+};
+
+var PlusIcon = function (_a) {
     var color = _a.color;
-    return (jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsx("path", { className: "icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsx("path", { className: "icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsx("path", { className: "icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsx("path", { className: "icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsx("path", { className: "icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsx("path", { className: "icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsx("defs", { children: jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
+    return (jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
-var Footer = function (_a) {
-    var className = _a.className;
-    var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
-    var window = useContext(BunnyContext).window;
-    var isMobile = useIsMobile(window);
-    var quotePreviewData = useRecoilValue(planPickerQuoteDataState);
-    var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
-    if (selectedPriceList && isMobile)
-        return null;
-    return (jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(className, " ").concat(isMobile ? "flex-col gap-2 grow" : "") }, { children: [(termsUrl || privacyUrl) && (jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsx(BunnyMarketingLink, {})] })));
+var PaymentMethodContext = createContext({});
+
+var Card = function (_a) {
+    var children = _a.children, className = _a.className, style = _a.style;
+    var darkMode = useContext(BunnyContext).darkMode;
+    return (jsx("div", __assign({ className: "flex flex-col rounded-md shadow-md ".concat(className), style: __assign(__assign({}, style), { backgroundColor: darkMode
+                ? "var(--row-background-dark)"
+                : "var(--row-background)" }) }, { children: children })));
 };
-var BunnyMarketingLink = function () {
-    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
-    var window = useContext(BunnyContext).window;
-    var isMobile = useIsMobile(window);
-    return (jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: jsxs("div", __assign({ className: "flex items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsx("div", __assign({ style: { paddingTop: "5px" } }, { children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) }))] })) })) })));
+
+var Text$6 = Typography.Text;
+var CreditCard = function (_a) {
+    var _b, _c, _d;
+    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData;
+    var isExpired = function (paymentMethodData) {
+        // paymentMethodData.expirationDate
+        var expDate = dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate);
+        return expDate.isBefore(dayjs());
+    };
+    var isMobile = useIsMobile$1();
+    var processPublicUrl = useContext(PaymentMethodContext).processPublicUrl;
+    return (jsxs(Card, __assign({ className: "shadow-md m-0" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [getCardImage((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) && (jsx("img", { alt: "Card", width: "24px", src: "".concat(processPublicUrl, "/").concat(getCardImage((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.issuer)) })), jsx(Text$6, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.description })] })), jsx(Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxs(Fragment, { children: [jsx(Divider, {}), jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsx(CardAttribute, { title: "EXPIRATION", value: dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).format("MM/YY") }), isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
+};
+var CardAttribute = function (_a) {
+    var title = _a.title, value = _a.value;
+    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsx(Text$6, { children: value })] })));
+};
+var CardActions = function (_a) {
+    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
+    var isMobile = useIsMobile$1();
+    return (jsxs("div", __assign({ className: "flex items-center gap-6 ".concat(isMobile ? "justify-center mt-4" : "") }, { children: [jsx(Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsx(Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove payment method" })) })), jsx(Divider, { style: { height: "24px" }, type: "vertical" }), jsx(Button, __assign({ onClick: onClickUpdate, type: "primary" }, { children: "Update" }))] })));
+};
+var EmptyCard = function (_a) {
+    var onClick = _a.onClick;
+    var brandColor = useContext(BrandContext).brandColor;
+    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center w-full pt-8 px-4 pb-6 cursor-pointer bg-white shadow-md rounded-md", onClick: onClick }, { children: [jsx(LargeCardIcon, {}), jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsx(Button, __assign({ type: "link" }, { children: jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
+};
+var getCardImage = function (issuer) {
+    if (issuer === "visa")
+        return "Visa_Brandmark_Blue_RGB_2021.png";
+    else if (issuer === "mastercard")
+        return "mc_symbol_opt_73_3x.png";
+};
+
+var ActualPaymentMethod = function () {
+    var _a = useContext(BunnyContext), token = _a.token, subdomain = _a.subdomain, graphQLClient = _a.graphQLClient;
+    var accountId = useContext(PaymentContext).accountId;
+    // Hooks
+    var queryClient = useQueryClient();
+    var paymentPlugins = usePaymentPlugins({ subdomain: subdomain, token: token }).paymentPlugins;
+    var showErrorNotification = NotificationUtils.useErrorNotification();
+    var showSuccessNotification = NotificationUtils.useSuccessNotification();
+    var handleAllErrorFormats = NotificationUtils.useAllErrorFormats(function () {
+        console.log("Navigation in PaymentMethod.tsx useAllErrorFormats not implemented");
+    });
+    var isMobile = useIsMobile$1();
+    var data = usePaymentMethod(graphQLClient).data;
+    // Local state
+    var _b = useState(false), showModal = _b[0], setShowModal = _b[1];
+    var _c = useState(false), isSaving = _c[0], setIsSaving = _c[1];
+    // Queries
+    useQuery({
+        queryKey: QueryKeyFactory.default.currentUserKey,
+        queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
+    });
+    var plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (paymentPlugin) { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
+    var onClickRemove = function () {
+        if (data && plugin) {
+            invokePlugin({
+                plugin: plugin,
+                method: "remove_payment_method",
+                payload: {
+                    payment_method_id: data.id,
+                    account_id: accountId,
+                },
+                token: token,
+                subdomain: subdomain,
+            })
+                .then(function () {
+                showSuccessNotification("Payment method was removed", "Success");
+                queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodKey, null);
+            })
+                .catch(function (error) {
+                showErrorNotification(error.message, "Error removing Payment Method");
+            });
+        }
+    };
+    var onSuccess = function () {
+        queryClient.invalidateQueries({
+            queryKey: QueryKeyFactory.default.accountPaymentMethodKey,
+        });
+        setShowModal(false);
+        showSuccessNotification("Your payment method has been saved");
+    };
+    if (data === undefined)
+        return jsx(Fragment, {});
+    return (jsxs(Fragment, { children: [data ? (jsx(CreditCard, { onClickRemove: onClickRemove, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data })) : (jsx(EmptyCard, { onClick: function () { return setShowModal(true); } })), jsx(Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
+                    body: isMobile
+                        ? {
+                            padding: "1rem 0 0",
+                        }
+                        : {},
+                    wrapper: isMobile ? { width: "100vw" } : { width: "min-content" },
+                }, title: jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method" }) }, { children: jsx(PaymentForm, { isSaving: isSaving, onFail: function (error) {
+                        handleAllErrorFormats(error);
+                        setIsSaving(false);
+                    }, onPaymentSuccess: function () {
+                        onSuccess();
+                        setIsSaving(false);
+                    }, setIsSaving: setIsSaving }) }))] }));
 };
-var StyedLink = styled.a(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n"])), SLATE_400, SLATE_500);
-var StyledBunnyLink = styled(StyedLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), PRIMARY_COLOR);
-var templateObject_1$4, templateObject_2;
+function PaymentMethod(_a) {
+    var footer = _a.footer, processPublicUrl = _a.processPublicUrl;
+    return (jsx(PaymentMethodContext.Provider, __assign({ value: { footer: footer, processPublicUrl: processPublicUrl } }, { children: jsx(ActualPaymentMethod, {}) })));
+}
 
-var MUTATION$1 = "\n  mutation portalSessionCreate ($tenantCode: String!, $expiry: Int!, $returnUrl: String!) {\n    portalSessionCreate (tenantCode: $tenantCode, expiry: $expiry, returnUrl: $returnUrl) {\n        errors\n        token\n    }\n  }\n";
-var portalSessionCreate = function (_a) {
-    var tenantCode = _a.tenantCode, expiry = _a.expiry, returnUrl = _a.returnUrl, token = _a.token, subdomain = _a.subdomain;
+var MUTATION$5 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account { id }\n        errors\n      }\n  }\n";
+var accountUpdate = function (_a) {
+    var accountId = _a.accountId, attributes = _a.attributes, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
-        var response, errors;
+        var vars, response, errors;
         var _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
-                case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$1,
-                        token: token,
-                        vars: { tenantCode: tenantCode, expiry: expiry, returnUrl: returnUrl },
-                        subdomain: subdomain,
-                    })];
+                case 0:
+                    vars = { id: accountId, attributes: attributes };
+                    return [4 /*yield*/, gqlRequest({ query: MUTATION$5, token: token, vars: vars })];
                 case 1:
                     response = _c.sent();
-                    errors = (response === null || response === void 0 ? void 0 : response.portalSessionCreate).errors;
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
                     if (errors)
                         throw errors;
-                    return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.portalSessionCreate) === null || _b === void 0 ? void 0 : _b.token];
+                    return [2 /*return*/, response.accountUpdate];
             }
         });
     });
 };
 
-var showErrorNotification = NotificationUtils.useErrorNotification();
-function Signup(_a) {
-    var priceListCode = _a.priceListCode, returnUrl = _a.returnUrl;
+var COUNTRIES_REQUIRING_STATE = ["US", "CA"];
+var TaxationForm = function (_a) {
+    var account = _a.account, quote = _a.quote;
     // Hooks
-    var _b = useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token, window = _b.window;
-    useQuery({
-        queryKey: QueryKeyFactory.default.currentUserKey,
-        queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
-    });
-    var isMobile = useIsMobile(window);
-    var topNavImageUrl = useContext(BrandContext).topNavImageUrl;
-    var entityId = useCurrentUserData().entityId;
-    var _c = useState(undefined), quote = _c[0], setQuote = _c[1];
-    var _d = useState(undefined), accountId = _d[0], setAccountId = _d[1];
-    var _e = useState(undefined), quoteId = _e[0], setQuoteId = _e[1];
-    var _f = useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
-    var _g = useState(undefined), formData = _g[0], setFormData = _g[1];
-    var _h = useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
-    var _j = useState(false), paying = _j[0], setIsPaying = _j[1];
-    var _k = useState(false), purchaseSucceeded = _k[0], setPurchaseSucceeded = _k[1];
-    // Queries
-    var priceListData = useQuery({
-        queryKey: ["priceList", priceListCode],
-        queryFn: function () { return getPriceList({ token: token, subdomain: subdomain, code: priceListCode }); },
-    }).data;
-    function handleSubmit(formData) {
-        return __awaiter(this, void 0, void 0, function () {
-            var data, portalSessionToken;
+    var queryClient = useQueryClient();
+    var token = useContext(BunnyContext).token;
+    var form = Form.useForm()[0];
+    // Mutations
+    var _b = useMutation({
+        mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
+            var account;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        setProceedingToPayment(true);
-                        setFormData(formData);
-                        return [4 /*yield*/, quoteAccountSignup({
-                                token: token,
-                                subdomain: subdomain,
-                                entityId: entityId,
-                                priceListCode: priceListCode,
-                                accountName: formData.accountName,
-                                billingContact: {
-                                    firstName: formData.firstName,
-                                    lastName: formData.lastName,
-                                    email: formData.email,
-                                },
-                            })];
+                    case 0: return [4 /*yield*/, accountUpdate({
+                            accountId: quote.accountId,
+                            attributes: changedFormData,
+                            token: token,
+                        })];
                     case 1:
-                        data = _a.sent();
-                        setAccountId(data.account.id);
-                        return [4 /*yield*/, portalSessionCreate({
-                                token: token,
-                                subdomain: subdomain,
-                                tenantCode: data.tenant.code,
-                                expiry: 24,
-                                returnUrl: returnUrl || "",
-                            })];
-                    case 2:
-                        portalSessionToken = _a.sent();
-                        setPortalSessionToken(portalSessionToken);
-                        setQuoteId(data.quote.id);
-                        setProceedingToPayment(false);
-                        setQuote({
-                            amountDue: data.quote.amountDue,
-                            currencyId: data.quote.currencyId,
-                        });
-                        return [2 /*return*/];
+                        account = _a.sent();
+                        return [2 /*return*/, account];
                 }
             });
-        });
-    }
-    function handlePaymentSaveSuccess(paymentSuccess) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function () {
-            var response, plugin;
+        }); },
+        onSuccess: function () {
+            queryClient.invalidateQueries({
+                queryKey: ["getTaxationRequiredAccountFields", token],
+            });
+        },
+    }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
+    return (jsxs(Form, __assign({ className: "flex flex-col gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsx(Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsx(Input, { placeholder: "Street" }) })), jsx(Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsx(Input, { placeholder: "City" }) })), jsx(FormBillingState, { form: form }), jsx(Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsx(Select, { options: Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
+                        var _a, _b;
+                        return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
+                            ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
+                    } }) })), jsx(Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsx(Input, { placeholder: "Zip" }) })), jsx(Form.Item, { children: jsx(Button, __assign({ className: "w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
+};
+var FormBillingState = function (_a) {
+    _a.form;
+    var billingCountry = Form.useWatch("billingCountry");
+    var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
+    return (jsx(Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsx(Input, { placeholder: "State" }) })));
+};
+
+var QuoteCheckout = function (_a) {
+    var account = _a.account, isSaving = _a.isSaving, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, setIsSaving = _a.setIsSaving, taxationRequiredAccountFields = _a.taxationRequiredAccountFields; _a.storedPaymentMethod;
+    // Context
+    var isMobile = useIsMobile$1();
+    var _b = useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token;
+    var paymentRequired = getQuoteAmountDue(quote) > 0;
+    var checkoutMutation = useMutation({
+        mutationFn: function (_a) {
+            var pluginPaymentMethod = _a.pluginPaymentMethod, savedPaymentMethod = _a.storedPaymentMethod;
+            if (!quote)
+                throw new Error("Quote is required");
+            if (!paymentRequired)
+                return checkout({ quoteId: quote.id, token: token, subdomain: subdomain });
+            if (savedPaymentMethod) {
+                var paymentMethodId = savedPaymentMethod.paymentMethodId;
+                return checkout({
+                    quoteId: quote.id,
+                    paymentMethodId: paymentMethodId,
+                    token: token,
+                    subdomain: subdomain,
+                });
+            }
+            if (pluginPaymentMethod) {
+                var plugin = pluginPaymentMethod.plugin, savePaymentMethod = pluginPaymentMethod.savePaymentMethod, metadata = pluginPaymentMethod.metadata;
+                var paymentToken = pluginPaymentMethod.token;
+                return checkout({
+                    quoteId: quote.id,
+                    paymentMethodData: {
+                        metadata: metadata,
+                        pluginGuid: plugin.guid,
+                        savePaymentMethod: savePaymentMethod,
+                        token: paymentToken,
+                    },
+                    token: token,
+                    subdomain: subdomain,
+                });
+            }
+            throw new Error("Pay payment method provided");
+        },
+        onSuccess: onSuccess,
+        onError: onFail,
+    });
+    // Handlers
+    var handleCheckout = function (_a) {
+        var pluginPaymentResponse = _a.pluginPaymentResponse, savedPaymentMethodResponse = _a.savedPaymentMethodResponse;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var token_1, plugin, savePaymentMethod, metadata, paymentMethodId;
             return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!formData) {
-                            throw new Error("Form data is required");
-                        }
-                        response = paymentSuccess.pluginPaymentResponse;
-                        plugin = response === null || response === void 0 ? void 0 : response.plugin;
-                        if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
-                            throw new Error("Plugin ID is required");
-                        }
-                        if (!accountId) {
-                            throw new Error("Account ID is required");
-                        }
-                        if (!portalSessionToken) {
-                            throw new Error("Portal session token is required");
-                        }
-                        return [4 /*yield*/, accountSignup({
-                                token: portalSessionToken,
-                                subdomain: subdomain,
-                                entityId: entityId,
-                                quoteId: quoteId,
-                                paymentMethodId: (_a = paymentSuccess.savedPaymentMethodResponse) === null || _a === void 0 ? void 0 : _a.paymentMethodId.toString(),
-                                pluginId: plugin.id.toString(),
-                                priceListCode: priceListCode,
-                                accountId: accountId,
-                            })];
-                    case 1:
-                        _b.sent();
-                        setIsPaying(false);
-                        setPurchaseSucceeded(true);
-                        return [2 /*return*/];
+                if (pluginPaymentResponse) {
+                    token_1 = pluginPaymentResponse.token, plugin = pluginPaymentResponse.plugin, savePaymentMethod = pluginPaymentResponse.savePaymentMethod, metadata = pluginPaymentResponse.metadata;
+                    checkoutMutation.mutate({
+                        pluginPaymentMethod: {
+                            savePaymentMethod: savePaymentMethod,
+                            plugin: plugin,
+                            metadata: metadata,
+                            token: token_1,
+                        },
+                    });
+                }
+                else if (savedPaymentMethodResponse) {
+                    paymentMethodId = savedPaymentMethodResponse.paymentMethodId;
+                    checkoutMutation.mutate({
+                        storedPaymentMethod: {
+                            paymentMethodId: paymentMethodId,
+                        },
+                    });
+                }
+                else {
+                    checkoutMutation.mutate({});
                 }
+                return [2 /*return*/];
             });
         });
-    }
-    function handlePaymentFail(error) {
-        showErrorNotification(error.message);
-        setIsPaying(false);
-    }
-    if (isMobile) {
-        return (jsx(Card, __assign({ className: "p-4 flex flex-col" }, { children: purchaseSucceeded ? (jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col items-center" }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "mx-8" }, { children: jsx(Divider, { className: "h-full" }) })), jsx("div", __assign({ className: "flex items-center justify-center my-12" }, { children: jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })));
-    }
-    else {
-        return (jsxs(Fragment, { children: [jsx(Card, __assign({ className: "p-4 flex flex-col w-screen h-screen" }, { children: purchaseSucceeded ? (jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col w-1/2 items-center" }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "my-4" }, { children: jsx(Divider, { className: "h-full", type: "vertical" }) })), jsx("div", __assign({ className: "flex w-1/2 items-center justify-center my-12" }, { children: jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })), jsx(Footer, {})] }));
-    }
-}
+    };
+    if (taxationRequiredAccountFields)
+        return (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsx(TaxationForm, { account: account, quote: quote }) })));
+    return (jsx(Fragment, { children: paymentRequired ? (jsx(PaymentForm, { isSaving: isSaving, onFail: onFail, onPaymentSuccess: handleCheckout, quote: quote, setIsSaving: setIsSaving })) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "shadow-padding-x" : "") }, { children: [jsx(Button, __assign({ disabled: isSaving, onClick: function () {
+                            setIsSaving(true);
+                            handleCheckout({});
+                        }, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsx("div", __assign({ className: "text-xs text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
+};
 
-var transactionMutation = function (filter) { return "\nquery transactions {\n  transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n    nodes {\n      amount\n      createdAt\n      currencyId\n      description\n      id\n      kind\n      state\n      transactionableId\n      transactionable {\n        ...on Payment { amount }\n        ...on Invoice { amount number }\n      }\n    }\n  }\n}"); };
-var getTransactions = function (filter, token, subdomain, kindsToShow) { return __awaiter(void 0, void 0, void 0, function () {
-    var response, _a, data, errors, transactions;
-    var _b, _c;
-    return __generator(this, function (_d) {
-        switch (_d.label) {
-            case 0: return [4 /*yield*/, fetch(subdomain + "/graphql", {
-                    method: "POST",
-                    headers: {
-                        "Content-type": "application/json; charset=utf-8",
-                        Authorization: "Bearer ".concat(token),
-                    },
-                    body: JSON.stringify({
-                        query: transactionMutation(filter),
-                    }),
-                })];
-            case 1:
-                response = _d.sent();
-                return [4 /*yield*/, response.json()];
-            case 2:
-                _a = _d.sent(), data = _a.data, errors = _a.errors;
-                if (errors) {
-                    throw new Error(errors[0].message);
-                }
-                transactions = (_c = (_b = data === null || data === void 0 ? void 0 : data.transactions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.filter(function (transaction) { return kindsToShow.includes(transaction.kind); });
-                return [2 /*return*/, transactions === null || transactions === void 0 ? void 0 : transactions.reverse()];
-        }
+var useHasTaxPlugin = function (_a) {
+    var subdomain = _a.subdomain, token = _a.token;
+    var plugins = usePlugins({
+        subdomain: subdomain,
+        token: token,
+    }).data;
+    return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
+};
+
+var QUOTE_FIELDS = "quote {\n  formattedQuote {\n    html\n  }\n  acceptedByName\n  acceptedByTitle\n  accountId\n  amount\n  amountDue\n  applicationDate\n  applied\n  billingDay\n  contactId\n  createdAt\n  credits\n  currencyId\n  dealId\n  discount\n  discountValue\n  endDate\n  evergreen\n  expiresAt\n  id\n  invoiceUntil\n  isPendingApprovalRequest\n  kind\n  message\n  name\n  netPaymentDays\n  notes\n  ownerId\n  periodAmount\n  poNumber\n  requiresApproval\n  startDate\n  state\n  subtotal\n  taxAmount\n  updatedAt\n  uuid\n  amountsByPeriod {\n    amount\n    id\n    name\n  }\n  endDateOptions {\n    endDate\n    label\n  }\n  invoiceUntilOptions {\n    endDate\n    label\n  }\n  quoteChanges {\n    id\n    priceListId\n    charges {\n      amount\n      amountsByPeriod { amount startDate }\n      billingPeriod\n      billingPeriodAmounts { id amount prorationRate }\n      chargeType\n      couponId\n      createdAt\n      currencyId\n      discount\n      endDate\n      feature { id name code isUnit unitName }\n      id\n      invoiceLineText\n      name\n      price\n      priceDecimals\n      priceTiers { starts price }\n      pricingModel\n      prorationRate\n      quantity\n      quantityMax\n      quantityMin\n      startDate\n      tieredAveragePrice\n      updatedAt\n    }\n  }\n}";
+
+var QUOTE_RECALCULATE_TAXES = "\n  mutation QuoteRecalculateTaxes($id: ID!) {\n    quoteRecalculateTaxes(id: $id) {\n      ".concat(QUOTE_FIELDS, "\n      errors\n    }\n  }\n");
+var quoteRecalculateTaxes = function (_a) {
+    var quoteId = _a.quoteId, token = _a.token;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, errors;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    vars = { id: quoteId };
+                    return [4 /*yield*/, gqlRequest({
+                            query: QUOTE_RECALCULATE_TAXES,
+                            token: token,
+                            vars: vars,
+                        })];
+                case 1:
+                    response = _d.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteRecalculateTaxes) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, (_c = response.quoteRecalculateTaxes) === null || _c === void 0 ? void 0 : _c.quote];
+            }
+        });
     });
-}); };
+};
 
-var pageContentRefState = atom({
-    key: "pageContentRefState",
+var planPickerQuoteDataState = atom({
+    key: "planPickerQuoteDataState",
     default: undefined,
 });
 
-var PageContent = function (_a) {
-    var children = _a.children, className = _a.className, style = _a.style;
-    var pageContentRef = useRef(null);
-    var setPageContentRef = useSetRecoilState(pageContentRefState);
-    useEffect(function () {
-        setPageContentRef(pageContentRef === null || pageContentRef === void 0 ? void 0 : pageContentRef.current);
-    }, [pageContentRef, setPageContentRef]);
-    return (jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
+var pageWrapperClassName = function (isMobile) {
+    return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
 };
 
-var Text$8 = Typography.Text;
-var PageHeaderWithActions = function (_a) {
-    var children = _a.children, title = _a.title;
-    var isMobile = useIsMobile$1();
-    return (jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsx(PageSubTitle, { title: title }), children] })));
-};
-var PageSubTitle = function (_a) {
-    var title = _a.title;
-    var secondaryColor = useContext(BrandContext).secondaryColor;
-    var darkMode = useContext(BunnyContext).darkMode;
-    return (jsx(Text$8, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
+var queryKeyFactory = QueryKeyFactory.default;
+var Checkout = function (_a) {
+    var _b, _c;
+    var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, isMobile = _a.isMobile, token = _a.token, storedPaymentMethod = _a.storedPaymentMethod;
+    var subdomain = useContext(BunnyContext).subdomain;
+    var _d = useState(false), isSaving = _d[0], setIsSaving = _d[1];
+    var hasTaxPlugin = useHasTaxPlugin({ subdomain: subdomain || "", token: token });
+    var queryClient = useQueryClient();
+    var quotePreviewData = useRecoilValue(planPickerQuoteDataState);
+    // Queries
+    var _e = useQuery({
+        queryKey: ["getTaxationRequiredAccountFields", token],
+        queryFn: function () { return getTaxationRequiredAccountFields({ token: token }); },
+        enabled: Boolean(quote),
+        staleTime: 0,
+    }), taxationRequiredAccountFields = _e.data, isLoadingTaxationRequiredAccountFields = _e.isLoading;
+    var _f = useQuery({
+        queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
+        queryFn: function () {
+            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, token: token });
+        },
+        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
+            ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
+    }), account = _f.data, isLoadingAccount = _f.isLoading;
+    useQuery({
+        queryKey: queryKeyFactory.createQuoteTaxCalculateKey(quote === null || quote === void 0 ? void 0 : quote.id),
+        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
+            var updatedQuote;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!quote) return [3 /*break*/, 2];
+                        return [4 /*yield*/, quoteRecalculateTaxes({
+                                quoteId: quote.id,
+                                token: token,
+                            })];
+                    case 1:
+                        updatedQuote = _a.sent();
+                        if (updatedQuote) {
+                            queryClient.setQueryData(queryKeyFactory.createObjectKey("editingQuote", updatedQuote.id), updatedQuote);
+                            queryClient.setQueryData(queryKeyFactory.calculatedPricesKey((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), updatedQuote);
+                        }
+                        _a.label = 2;
+                    case 2: return [2 /*return*/, {}];
+                }
+            });
+        }); },
+        // Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
+        enabled: Boolean(quote) &&
+            open &&
+            hasTaxPlugin &&
+            !taxationRequiredAccountFields &&
+            !isLoadingTaxationRequiredAccountFields,
+        staleTime: 0,
+    });
+    if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
+        return null;
+    return (jsx("div", __assign({ className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 bg-slate-50 overflow-auto", style: {
+            zIndex: 1001,
+        } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsx(CloseOutlined$1, { className: "text-base shadow-padding-xb", onClick: onCancel }) })), jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "flex-col" : "shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "", isMobile: isMobile })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsx(Divider, { className: "h-full", type: "vertical" })), invoice ? (jsx(InvoiceCheckout, { invoice: invoice, isSaving: isSaving, onFail: function (error) {
+                                onFail(error);
+                                setIsSaving(false);
+                            }, onSuccess: function (_a) {
+                                var savePaymentMethod = _a.savePaymentMethod;
+                                onSuccess({ savePaymentMethod: savePaymentMethod });
+                                setIsSaving(false);
+                            }, setIsSaving: setIsSaving })) : quote ? (jsx(QuoteCheckout, { account: account, isSaving: isSaving, onFail: function (error) {
+                                onFail(error);
+                                setIsSaving(false);
+                            }, onSuccess: function (_a) {
+                                var savePaymentMethod = _a.savePaymentMethod;
+                                onSuccess({ savePaymentMethod: savePaymentMethod });
+                                setIsSaving(false);
+                            }, quote: quote, setIsSaving: setIsSaving, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, storedPaymentMethod: storedPaymentMethod })) : (jsx(PaymentForm, { isSaving: isSaving, onFail: function (error) {
+                                onFail(error);
+                                setIsSaving(false);
+                            }, onPaymentSuccess: function (_a) {
+                                var pluginPaymentResponse = _a.pluginPaymentResponse;
+                                onSuccess({
+                                    savePaymentMethod: pluginPaymentResponse === null || pluginPaymentResponse === void 0 ? void 0 : pluginPaymentResponse.savePaymentMethod,
+                                });
+                                setIsSaving(false);
+                            }, setIsSaving: setIsSaving }))] }))] })) })));
 };
 
-var StateTag = function (_a) {
-    var state = _a.state;
-    return jsx(Tag, __assign({ color: getColor(state) }, { children: capitalize(startCase(state)) }));
-};
-var getColor = function (state) {
-    switch (state) {
-        case FrontendTransaction.TransactionState.not_due:
-            return "yellow";
-        case FrontendTransaction.TransactionState.voided:
-            return "black";
-        case FrontendTransaction.TransactionState.ready:
-            return "orange";
-        case FrontendTransaction.TransactionState.preparing:
-            return "purple";
-        case FrontendTransaction.TransactionState.unapplied:
-        case FrontendTransaction.TransactionState.partially_applied:
-        case FrontendTransaction.TransactionState.applied:
-            return "blue";
-        case FrontendTransaction.TransactionState.due:
-        case FrontendTransaction.TransactionState.unpaid:
-            return "orange";
-        case FrontendTransaction.TransactionState.failed:
-            return "red";
-        case FrontendTransaction.TransactionState.paid:
-            return "green";
-        default:
-            return "blue";
-    }
+var MUTATION$4 = function () { return "\nmutation AccountSignup (\n  $entityId: ID!,\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!\n) {\n  accountSignup(\n    entityId: $entityId,\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId\n  ) {\n    errors\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
+var accountSignup = function (_a) {
+    var token = _a.token, subdomain = _a.subdomain, entityId = _a.entityId, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, errors;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    vars = {
+                        entityId: entityId,
+                        accountId: accountId,
+                        quoteId: quoteId,
+                        paymentToken: paymentToken,
+                        pluginId: pluginId,
+                        paymentMethodId: paymentMethodId,
+                        priceListCode: priceListCode,
+                    };
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$4(),
+                            token: token,
+                            vars: vars,
+                            subdomain: subdomain,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.accountSignup) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.accountSignup];
+            }
+        });
+    });
 };
 
-var TransactionGridCell = styled.div.withConfig({
-    shouldForwardProp: function (prop) {
-        return !["gridColumn", "padding", "right"].includes(prop);
-    },
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"], ["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) { return (props.right ? "flex-end" : "flex-start"); }, function (props) { return (props.right ? "right" : "left"); }, SLATE_600);
-var templateObject_1$3;
-
-var Text$7 = Typography.Text;
-var TransactionDate = function (_a) {
-    var date = _a.date;
-    return jsx(Text$7, __assign({ className: "text-sm" }, { children: Misc.formatDate(date) }));
+var MUTATION$3 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $entityId: ID!,\n  $priceListCode: String!\n) {\n  quoteAccountSignup(\n    entityId: $entityId,\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact\n  ) {\n    account {\n      id\n    }\n    amount\n    currencyId\n    quote {\n      id\n    }\n    tenant {\n      code\n    }\n    errors\n  }\n}"; };
+var quoteAccountSignup = function (_a) {
+    var token = _a.token, subdomain = _a.subdomain, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, errors;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    vars = {
+                        entityId: entityId,
+                        priceListCode: priceListCode,
+                        accountName: accountName,
+                        billingContact: billingContact,
+                    };
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$3(),
+                            token: token,
+                            vars: vars,
+                            subdomain: subdomain,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAccountSignup) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quoteAccountSignup];
+            }
+        });
+    });
 };
 
-var isInvoice = function (transaction) {
-    return transaction.kind === "INVOICE";
-};
-var isQuote = function (transaction) {
-    return transaction.kind === "QUOTE";
-};
-var TransactionRowTitle = function (_a) {
-    var transaction = _a.transaction;
-    if (!isInvoice(transaction) && !isQuote(transaction)) {
-        return jsx(Fragment, {});
-    }
-    return (jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
+var MUTATION$2 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
+var getPriceList = function (_a) {
+    var token = _a.token, code = _a.code, subdomain = _a.subdomain;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: MUTATION$2(),
+                        token: token,
+                        vars: { code: code },
+                        subdomain: subdomain,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.priceList];
+            }
+        });
+    });
 };
 
-// TODO: delete
-var ArrowDownToLine = function (_a) {
-    var className = _a.className, _b = _a.color, color = _b === void 0 ? SLATE_600 : _b;
-    return (jsxs("svg", __assign({ className: className, fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M8 11.3333V2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M4 7.33301L8 11.333L12 7.33301", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M12.6654 14H3.33203", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
-};
+function PaymentForms(_a) {
+    var quote = _a.quote, paying = _a.paying, setIsPaying = _a.setIsPaying, handlePaymentSaveSuccess = _a.handlePaymentSaveSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId;
+    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: accountId && (jsx(PaymentContext.Provider, __assign({ value: { accountId: accountId, displayPayButtonNameAnyways: true } }, { children: jsx(PaymentForm, { isSaving: paying, setIsSaving: setIsPaying, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSaveSuccess }) }))) })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
+}
+function InitialSignupForm(_a) {
+    var onSubmit = _a.onSubmit, submitting = _a.submitting;
+    var _b = useState({
+        firstName: "",
+        lastName: "",
+        email: "",
+        accountName: "",
+    }), formData = _b[0], setFormData = _b[1];
+    var handleInputChange = function (e) {
+        var _a;
+        var _b = e.target, name = _b.name, value = _b.value;
+        setFormData(__assign(__assign({}, formData), (_a = {}, _a[name] = value, _a)));
+    };
+    return (jsxs(Form, __assign({ className: "flex w-1/2 flex-col justify-between h-full", onFinish: function () { return onSubmit(formData); } }, { children: [jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsx(Form.Item, __assign({ rules: [{ required: true, message: "Please input your first name!" }], initialValue: formData.firstName }, { children: jsx(Input, { placeholder: "First name", value: formData.firstName, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { firstName: e.target.value }));
+                            } }) })), jsx(Form.Item, __assign({ rules: [{ required: true, message: "Please input your last name!" }], initialValue: formData.lastName }, { children: jsx(Input, { placeholder: "Last name", value: formData.lastName, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { lastName: e.target.value }));
+                            } }) })), jsx(Form.Item, __assign({ rules: [
+                            { required: true, message: "Please input your email!" },
+                            { type: "email", message: "Please enter a valid email!" },
+                        ], initialValue: formData.email }, { children: jsx(Input, { placeholder: "Email", value: formData.email, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { email: e.target.value }));
+                            } }) })), jsx(Form.Item, __assign({ rules: [
+                            { required: true, message: "Please input your account name!" },
+                        ], initialValue: formData.accountName }, { children: jsx(Input, { placeholder: "Account name", value: formData.accountName, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { accountName: e.target.value }));
+                            } }) }))] })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", htmlType: "submit", loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
+}
 
-var TransactionsListContext = createContext({});
+var Title = Typography.Title, Text$5 = Typography.Text;
+function PaymentSuccessDisplay(_a) {
+    var className = _a.className, amountPaid = _a.amountPaid, style = _a.style, returnUrl = _a.returnUrl;
+    var window = useContext(BunnyContext).window;
+    var companyName = useCurrentUserData().companyName;
+    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", Misc.formatCurrency(amountPaid, "USD"), " successful"] })), returnUrl && (jsxs(Text$5, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
+}
 
-var TransactionDownload = function (_a) {
-    var transaction = _a.transaction, token = _a.token, subdomain = _a.subdomain;
-    var darkMode = useContext(BunnyContext).darkMode;
-    var downloadTransactionLink = useContext(TransactionsListContext).downloadTransactionLink;
-    var downloadFile = useDownloadFile();
-    var isMobile = useIsMobile$1();
-    var isClickable = transaction.kind === "INVOICE" || downloadTransactionLink !== undefined;
-    var downloadLink = downloadTransactionLink
-        ? downloadTransactionLink(transaction.transactionableId)
-        : "".concat(subdomain, "/api/pdf/invoice/").concat(transaction.transactionableId);
-    if (!isClickable)
+var Text$4 = Typography.Text;
+function PriceListDisplay(_a) {
+    var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
+    if (!priceListData)
         return null;
-    return (jsx("div", __assign({ onClick: function (e) {
-            e.stopPropagation();
-            downloadFile(downloadLink, token);
-        } }, { children: jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "show-on-hover"), color: darkMode ? WHITE : SLATE_600 }) })));
-};
+    return (jsx(Fragment, { children: jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsx(Text$4, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxs(Text$4, __assign({ className: "font-bold text-xl" }, { children: [Misc.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxs(Text$4, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$4, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))] })) })) }));
+}
 
-var Text$6 = Typography.Text;
-var TransactionsEmptyState = function () {
-    var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
-    return (jsx(Text$6, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
+var BunnyFooterIcon = function (_a) {
+    var color = _a.color;
+    return (jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsx("path", { className: "icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsx("path", { className: "icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsx("path", { className: "icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsx("path", { className: "icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsx("path", { className: "icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsx("path", { className: "icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsx("defs", { children: jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
 };
 
-function capitalizeFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-var WARREN_STATE_LS_KEY = "warrenState";
-var CURRENT_WARREN_ID_LS_KEY = "currentWarrenId";
-var getIsCapacitorApp = function () {
-    var isAndroid = window.location.origin === "http://localhost";
-    var isIOS = window.location.protocol === "capacitor:";
-    return isAndroid || isIOS;
-};
-var getLocalStorageSubdomain = function () {
-    var warrenState = JSON.parse(window.localStorage.getItem(WARREN_STATE_LS_KEY) || "{}");
-    var subdomain = warrenState[CURRENT_WARREN_ID_LS_KEY];
-    if (!subdomain) {
-        console.warn("ERROR_MESSAGE_NO_SUBDOMAIN_DEFINED");
-        //throw new Error(ERROR_MESSAGE_NO_SUBDOMAIN_DEFINED);
-    }
-    return subdomain;
-};
-var getApiHost = function (subdomain) {
-    var isLocalHost = window.location.href.indexOf(".internal") > 0;
-    var sub = subdomain || getLocalStorageSubdomain();
-    if (getIsCapacitorApp()) {
-        return isLocalHost || process.env.REACT_APP_IS_INTERNAL === "true"
-            ? "https://".concat(sub, ".bunny.internal")
-            : "https://".concat(sub, ".").concat(process.env.REACT_APP_ROOT_DOMAIN);
-    }
-    return "";
-};
-var getGraphQLBase = function () {
-    if (getIsCapacitorApp()) {
-        return "".concat(getApiHost(), "/graphql");
-    }
-    return "/graphql";
+var Footer = function (_a) {
+    var className = _a.className;
+    var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
+    var window = useContext(BunnyContext).window;
+    var isMobile = useIsMobile(window);
+    var quotePreviewData = useRecoilValue(planPickerQuoteDataState);
+    var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
+    if (selectedPriceList && isMobile)
+        return null;
+    return (jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(className, " ").concat(isMobile ? "flex-col gap-2 grow" : "") }, { children: [(termsUrl || privacyUrl) && (jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsx(BunnyMarketingLink, {})] })));
 };
-var createRequestHeaders = function (token) {
-    var bearerToken = "Bearer ".concat(token);
-    var headers = {
-        "Content-type": "application/json; charset=utf-8",
-    };
-    headers["Authorization"] = bearerToken;
-    return headers;
+var BunnyMarketingLink = function () {
+    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
+    var window = useContext(BunnyContext).window;
+    var isMobile = useIsMobile(window);
+    return (jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: jsxs("div", __assign({ className: "flex items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsx("div", __assign({ style: { paddingTop: "5px" } }, { children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) }))] })) })) })));
 };
-var useGraphQLRequest = function () { return function (query, token, variables) { return __awaiter(void 0, void 0, void 0, function () {
-    var error_1;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                _a.trys.push([0, 2, , 3]);
-                return [4 /*yield*/, request(getGraphQLBase(), query, variables, createRequestHeaders(token))];
-            case 1: return [2 /*return*/, _a.sent()];
-            case 2:
-                error_1 = _a.sent();
-                throw error_1;
-            case 3: return [2 /*return*/];
-        }
-    });
-}); }; };
+var StyedLink = styled.a(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n"])), SLATE_400, SLATE_500);
+var StyledBunnyLink = styled(StyedLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), PRIMARY_COLOR);
+var templateObject_1$3, templateObject_2;
 
-var Text$5 = Typography.Text;
-var TransactionsListDesktop = function (_a) {
-    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
-    var columns = useContext(TransactionsListContext).columns;
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, darkMode = _b.darkMode;
-    var showAmount = columns.includes("amount");
-    var showDateAndTitle = columns.includes("date-and-title");
-    var showDownload = columns.includes("download");
-    var showState = columns.includes("state");
-    if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
-        return jsx(TransactionsEmptyState, {});
-    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
-        var _a;
-        var isClickable = onTransactionClick !== undefined;
-        return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
-                onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
-            }, style: {
-                backgroundColor: index % 2 === 0
-                    ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
-                    : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-            } }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transaction.createdAt }) })), jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$5, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })), showState && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$5, { children: Misc.formatCurrency(((_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _a === void 0 ? void 0 : _a.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
+var MUTATION$1 = "\n  mutation portalSessionCreate ($tenantCode: String!, $expiry: Int!, $returnUrl: String!) {\n    portalSessionCreate (tenantCode: $tenantCode, expiry: $expiry, returnUrl: $returnUrl) {\n        errors\n        token\n    }\n  }\n";
+var portalSessionCreate = function (_a) {
+    var tenantCode = _a.tenantCode, expiry = _a.expiry, returnUrl = _a.returnUrl, token = _a.token, subdomain = _a.subdomain;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response, errors;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: MUTATION$1,
+                        token: token,
+                        vars: { tenantCode: tenantCode, expiry: expiry, returnUrl: returnUrl },
+                        subdomain: subdomain,
+                    })];
+                case 1:
+                    response = _c.sent();
+                    errors = (response === null || response === void 0 ? void 0 : response.portalSessionCreate).errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.portalSessionCreate) === null || _b === void 0 ? void 0 : _b.token];
+            }
+        });
     });
 };
 
-var Text$4 = Typography.Text;
-var TransactionsListMobile = function (_a) {
-    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
-    var columns = useContext(TransactionsListContext).columns;
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, darkMode = _b.darkMode;
-    var showAmount = columns.includes("amount");
-    var showDateAndTitle = columns.includes("date-and-title");
-    var showDownload = columns.includes("download");
-    var showState = columns.includes("state");
-    if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
-        return jsx(TransactionsEmptyState, {});
-    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
-        var isClickable = transaction.kind === "INVOICE";
-        return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
-                onTransactionClick(transaction);
-            }, style: {
-                backgroundColor: index % 2 === 0
-                    ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
-                    : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-            } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(Text$4, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsx(Text$4, { children: "\u00B7" }), showAmount && (jsx(Text$4, { children: Misc.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })))] }), index));
+var showErrorNotification = NotificationUtils.useErrorNotification();
+function Signup(_a) {
+    var priceListCode = _a.priceListCode, returnUrl = _a.returnUrl;
+    // Hooks
+    var _b = useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token, window = _b.window;
+    useQuery({
+        queryKey: QueryKeyFactory.default.currentUserKey,
+        queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
     });
-};
-
-// Create a client
-var queryClient = new QueryClient();
-function Transactions(_a) {
-    var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.columns, columns = _d === void 0 ? ["date-and-title", "state", "amount"] : _d, className = _a.className, _e = _a.shadow, shadow = _e === void 0 ? "md" : _e, searchBarClassName = _a.searchBarClassName, _f = _a.useModal, useModal = _f === void 0 ? false : _f, onTransactionClick = _a.onTransactionClick, _g = _a.suppressTransactionDisplay, suppressTransactionDisplay = _g === void 0 ? false : _g, _h = _a.kindsToShow, kindsToShow = _h === void 0 ? [
-        TransactionKind.INVOICE,
-        TransactionKind.PAYMENT,
-        TransactionKind.REFUND,
-        TransactionKind.WRITE_OFF,
-    ] : _h, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage;
-    var contextValues = {
-        showSearchBar: showSearchBar,
-        showTitle: showTitle,
-        transactionComponent: transactionComponent,
-        columns: columns,
-        className: className,
-        searchBarClassName: searchBarClassName,
-        shadow: shadow,
-        useModal: useModal,
-        onTransactionClick: onTransactionClick,
-        suppressTransactionDisplay: suppressTransactionDisplay,
-        kindsToShow: kindsToShow,
-        style: style,
-        filter: filter,
-        noTransactionsMessage: noTransactionsMessage,
-    };
-    return (jsx(QueryClientProvider, __assign({ client: queryClient }, { children: jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsWrapper, {}) })) })));
-}
-function TransactionsWrapper() {
-    var _a = useContext(TransactionsListContext), kindsToShow = _a.kindsToShow, filterFromContext = _a.filter;
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
-    // Local state
-    var _c = useState(""), search = _c[0], setSearch = _c[1];
-    var filter = filterFromContext ||
-        (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
+    var isMobile = useIsMobile(window);
+    var topNavImageUrl = useContext(BrandContext).topNavImageUrl;
+    var entityId = useCurrentUserData().entityId;
+    var _c = useState(undefined), quote = _c[0], setQuote = _c[1];
+    var _d = useState(undefined), accountId = _d[0], setAccountId = _d[1];
+    var _e = useState(undefined), quoteId = _e[0], setQuoteId = _e[1];
+    var _f = useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
+    var _g = useState(undefined), formData = _g[0], setFormData = _g[1];
+    var _h = useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
+    var _j = useState(false), paying = _j[0], setIsPaying = _j[1];
+    var _k = useState(false), purchaseSucceeded = _k[0], setPurchaseSucceeded = _k[1];
     // Queries
-    var data = useQuery({
-        queryKey: ["transactions", token, filter],
-        queryFn: function () { return getTransactions(filter, token, subdomain, kindsToShow); },
-        placeholderData: keepPreviousData,
+    var priceListData = useQuery({
+        queryKey: ["priceList", priceListCode],
+        queryFn: function () { return getPriceList({ token: token, subdomain: subdomain, code: priceListCode }); },
     }).data;
-    return (jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }));
-}
-function TransactionsDisplay(_a) {
-    var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search, title = _a.title;
-    var _b = useContext(TransactionsListContext), showSearchBar = _b.showSearchBar, showTitle = _b.showTitle, transactionComponent = _b.transactionComponent, useModal = _b.useModal, suppressTransactionDisplay = _b.suppressTransactionDisplay, className = _b.className, shadow = _b.shadow, searchBarClassName = _b.searchBarClassName, style = _b.style, onTransactionClick = _b.onTransactionClick;
-    var columns = useContext(TransactionsListContext).columns;
-    var darkMode = useContext(BunnyContext).darkMode;
-    // Local state
-    var _c = useState(null), selectedTransaction = _c[0], setSelectedTransaction = _c[1];
-    var _d = useState(false), drawerOpen = _d[0], setDrawerOpen = _d[1];
-    // Hooks
-    var isMobile = useIsMobile$1();
-    function handleTransactionClick(transaction) {
-        if (onTransactionClick) {
-            onTransactionClick(transaction);
-        }
-        if (!suppressTransactionDisplay) {
-            setSelectedTransaction(transaction);
-            setDrawerOpen(true);
-        }
+    function handleSubmit(formData) {
+        return __awaiter(this, void 0, void 0, function () {
+            var data, portalSessionToken;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setProceedingToPayment(true);
+                        setFormData(formData);
+                        return [4 /*yield*/, quoteAccountSignup({
+                                token: token,
+                                subdomain: subdomain,
+                                entityId: entityId,
+                                priceListCode: priceListCode,
+                                accountName: formData.accountName,
+                                billingContact: {
+                                    firstName: formData.firstName,
+                                    lastName: formData.lastName,
+                                    email: formData.email,
+                                },
+                            })];
+                    case 1:
+                        data = _a.sent();
+                        setAccountId(data.account.id);
+                        return [4 /*yield*/, portalSessionCreate({
+                                token: token,
+                                subdomain: subdomain,
+                                tenantCode: data.tenant.code,
+                                expiry: 24,
+                                returnUrl: returnUrl || "",
+                            })];
+                    case 2:
+                        portalSessionToken = _a.sent();
+                        setPortalSessionToken(portalSessionToken);
+                        setQuoteId(data.quote.id);
+                        setProceedingToPayment(false);
+                        setQuote({
+                            amountDue: data.quote.amountDue,
+                            currencyId: data.quote.currencyId,
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function handlePaymentSaveSuccess(paymentSuccess) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var response, plugin;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!formData) {
+                            throw new Error("Form data is required");
+                        }
+                        response = paymentSuccess.pluginPaymentResponse;
+                        plugin = response === null || response === void 0 ? void 0 : response.plugin;
+                        if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
+                            throw new Error("Plugin ID is required");
+                        }
+                        if (!accountId) {
+                            throw new Error("Account ID is required");
+                        }
+                        if (!portalSessionToken) {
+                            throw new Error("Portal session token is required");
+                        }
+                        return [4 /*yield*/, accountSignup({
+                                token: portalSessionToken,
+                                subdomain: subdomain,
+                                entityId: entityId,
+                                quoteId: quoteId,
+                                paymentMethodId: (_a = paymentSuccess.savedPaymentMethodResponse) === null || _a === void 0 ? void 0 : _a.paymentMethodId.toString(),
+                                pluginId: plugin.id.toString(),
+                                priceListCode: priceListCode,
+                                accountId: accountId,
+                            })];
+                    case 1:
+                        _b.sent();
+                        setIsPaying(false);
+                        setPurchaseSucceeded(true);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function handlePaymentFail(error) {
+        showErrorNotification(error.message);
+        setIsPaying(false);
+    }
+    if (isMobile) {
+        return (jsx(Card, __assign({ className: "p-4 flex flex-col" }, { children: purchaseSucceeded ? (jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col items-center" }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "mx-8" }, { children: jsx(Divider, { className: "h-full" }) })), jsx("div", __assign({ className: "flex items-center justify-center my-12" }, { children: jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })));
+    }
+    else {
+        return (jsxs(Fragment, { children: [jsx(Card, __assign({ className: "p-4 flex flex-col w-screen h-screen" }, { children: purchaseSucceeded ? (jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col w-1/2 items-center" }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "my-4" }, { children: jsx(Divider, { className: "h-full", type: "vertical" }) })), jsx("div", __assign({ className: "flex w-1/2 items-center justify-center my-12" }, { children: jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })), jsx(Footer, {})] }));
     }
-    // Since the columns are dynamic, we need to calculate the grid template columns
-    var gridTemplateColumns = function () {
-        var templateColumns = [];
-        if (isMobile) {
-            if (columns.includes("date-and-title") ||
-                columns.includes("state") ||
-                columns.includes("amount")) {
-                templateColumns.push("auto");
-            }
-            if (columns.includes("download")) {
-                templateColumns.push("auto");
-            }
-        }
-        else {
-            if (columns.includes("date-and-title")) {
-                templateColumns.push("auto 3fr");
-            }
-            if (columns.includes("download")) {
-                templateColumns.push("auto");
-            }
-            if (columns.includes("state")) {
-                templateColumns.push("auto");
-            }
-            if (columns.includes("amount")) {
-                templateColumns.push("auto");
-            }
-        }
-        return templateColumns.join(" ");
-    };
-    var drawerTitle = function () {
-        if (!selectedTransaction)
-            return "";
-        var kind = selectedTransaction.kind.toLowerCase();
-        return kind.charAt(0).toUpperCase() + kind.slice(1);
-    };
-    return (jsxs("div", __assign({ style: style }, { children: [jsx(PageHeaderWithActions, __assign({ title: title || (showTitle ? "Past transactions" : undefined) }, { children: showSearchBar && (jsx("div", { children: jsx(Input, { className: searchBarClassName
-                            ? searchBarClassName
-                            : "border border-slate-200", onChange: function (e) {
-                            if (isNaN(Number(e.target.value))) {
-                                return;
-                            }
-                            onSearchValueChanged(e.target.value);
-                        }, prefix: jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
-                            minWidth: "300px",
-                        }, value: search }) })) })), jsx(PageContent, __assign({ className: "flex w-full shadow-padding-xb ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: jsx("div", __assign({ className: "grid w-full rounded-md overflow-auto ".concat("shadow-".concat(shadow)), style: {
-                        gridTemplateColumns: gridTemplateColumns(),
-                        backgroundColor: "var(--row-background".concat(darkMode ? "-dark" : "", ")"),
-                    } }, { children: isMobile ? (jsx(Fragment, { children: TransactionsListMobile({
-                            transactions: transactions,
-                            onTransactionClick: handleTransactionClick,
-                        }) })) : (jsx(Fragment, { children: TransactionsListDesktop({
-                            transactions: transactions,
-                            onTransactionClick: handleTransactionClick,
-                        }) })) })) })), useModal ? (jsx(Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsx(Drawer, __assign({ title: drawerTitle(), onClose: function () { return setDrawerOpen(false); }, open: drawerOpen, width: 900 }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxs(Card$1, __assign({ className: "shadow-md" }, { children: [jsx(Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Amount:" }), " ", jsx(Typography.Text, { children: Misc.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Description:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Kind:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "State:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
 }
 
 var updatingChargeQuantityIdState = atom({
@@ -5504,4 +5584,4 @@ var Subscriptions = function (_a) {
                 } }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsx(SubscriptionsList, { hideExpired: hideExpired, planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscriptions: subscriptions })) : (jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) }))) })), isMobile && (jsx("div", __assign({ className: "pt-4 pb-2" }, { children: jsx(SubscriptionsNavigation, { hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsx(Footer, {}), jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile })] })));
 };
 
-export { BunnyProvider, Checkout, Invoice, PaymentMethod, Quote, Signup, Subscriptions, Transactions, getQuoteAmountDue, usePaymentMethod };
+export { BunnyProvider, Checkout, Invoice, PaymentMethod, Quote, Quotes, Signup, Subscriptions, Transactions, getQuoteAmountDue, usePaymentMethod };