@bunnyapp/components 1.0.5 → 1.0.7

package/dist/esm/index.js

@@ -2,16 +2,16 @@ 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';
 import { loadStripe } from '@stripe/stripe-js/pure';
 import { capitalize, startCase, cloneDeep, omit } from 'lodash';
-import { HelmetProvider, Helmet } from 'react-helmet-async';
 import request from 'graphql-request';
 import { BarChart, ResponsiveContainer, XAxis, Tooltip, Bar, Rectangle } from 'recharts';
 
@@ -88,6 +88,36 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".ant-tag {\n  border: none;\n  border-radius: 14px;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  white-space: nowrap;\n  margin: 0;\n}\n.ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-primary:disabled {\n  background: #eef0f2 !important;\n  color: rgba(0, 0, 0, 0.25) !important;\n  border: none;\n}\n.ant-btn {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  box-shadow: none;\n  text-shadow: none;\n  outline: none !important;\n  line-height: 1;\n  font-size: 0.875rem;\n  font-weight: normal;\n}\n.ant-btn > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-lg {\n  height: 44px !important;\n}\n.ant-btn-default:disabled {\n  border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.ant-btn-link {\n  border: none !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link:disabled {\n  background-color: transparent !important;\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-input-affix-wrapper .ant-input-prefix {\n  transition: color 0.3s;\n}\n.ant-select-selector {\n  box-shadow: none !important;\n  background-color: transparent !important;\n  border: none !important;\n}\n.ant-form-item-label {\n  text-transform: none !important;\n  font-size: 0.75rem;\n  padding-bottom: 2px !important;\n}\n.ant-form-item-label > label {\n  width: 100%;\n  color: #4b5563 !important;\n}\n.ant-form-item-explain-error {\n  font-size: 11px;\n  min-height: 11px;\n  line-height: 11px;\n  padding-top: 2px;\n}\n.ant-form-item {\n  margin-bottom: 0;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-divider {\n  margin: 0;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n  display: flex !important;\n  align-items: center !important;\n}\n.ant-menu-submenu::after {\n  display: none !important;\n}\n.ant-drawer-title {\n  font-weight: 400 !important;\n}\n.ant-drawer-header-title {\n  flex-direction: row-reverse !important;\n  align-items: start !important ;\n}\n.ant-drawer-close {\n  margin-inline-end: 0 !important;\n}\n@media (min-width: 768px) {\n  .ant-input,\n  .ant-picker,\n  .ant-select,\n  .ant-input-affix-wrapper {\n    font-size: 1rem !important;\n  }\n  .ant-drawer-header {\n    padding-right: 1.5rem !important;\n    padding-left: 1.5rem !important;\n  }\n}\n:root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n  height: 1px;\n  min-width: 128px;\n  background: #717d94;\n}\n.plan-step-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid #717d94;\n  background: white;\n  width: 24px;\n  height: 24px;\n  color: #717d94;\n}\n.plan-step-number.active {\n  border: none;\n  color: white;\n  background: #ff6e1c;\n}\n.hidden {\n  display: none;\n}\n.cardElement {\n  padding: 8px 11px;\n  border: 1px solid #e5e7eb;\n  background-color: white;\n  font-family: Inter !important;\n}\n.tooltip {\n  visibility: hidden;\n  position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\n}\n.show-on-hover {\n  opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n  opacity: 1;\n}\n.pdf-only {\n  display: none !important;\n}\n.notes p {\n  margin: 0;\n  padding: 0;\n  padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n  color: #717d94 !important;\n  font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n  margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n  height: 34px !important;\n}\n#form-element #finix-form-container .field {\n  margin-top: 0 !important;\n  padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n  font-size: 11px !important;\n  color: #ff4d4f !important;\n}\n.icon-path {\n  transition: fill 0.3s;\n}\n.shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.shadow-padding-xb {\n  padding-right: 1rem;\n  padding-left: 1rem;\n  padding-bottom: 0.5rem;\n}\n.content-container {\n  width: 100%;\n  margin: 0 auto;\n}\n@media (min-width: 1220px) {\n  .content-container {\n    width: 1220px !important;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 768px) {\n  .shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .shadow-padding-xb {\n    padding-right: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 0.5rem;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.fixed {\n  position: fixed;\n}\n.top-0 {\n  top: 0;\n}\n.right-0 {\n  right: 0;\n}\n.bottom-0 {\n  bottom: 0;\n}\n.left-0 {\n  left: 0;\n}\n.overflow-hidden {\n  overflow: hidden !important;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.z-50 {\n  z-index: 50;\n}\n.-top-1\\/10 {\n  top: -10%;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-xl {\n  border-radius: 0.75rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-tr {\n  border-top-right-radius: 0.25rem;\n}\n.rounded-br {\n  border-bottom-right-radius: 0.25rem;\n}\n.rounded-bl {\n  border-bottom-left-radius: 0.25rem;\n}\n.rounded-tl {\n  border-top-left-radius: 0.25rem;\n}\n.rounded-t {\n  border-top-right-radius: 0.25rem;\n  border-top-left-radius: 0.25rem;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.grow {\n  flex-grow: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.basis-0 {\n  flex-basis: 0;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n.items-center {\n  align-items: center;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-start {\n  align-items: flex-start;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.underline {\n  text-decoration: underline;\n}\n.no-underline {\n  text-decoration: none;\n}\n.text-nowrap {\n  white-space: nowrap;\n}\n.text-white {\n  color: white;\n}\n.text-xxs {\n  font-size: 0.625rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n}\n.text-base {\n  font-size: 1rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n}\n.text-3xl {\n  font-size: 2rem;\n}\n.text-4xl {\n  font-size: 2.5rem;\n}\n.text-5xl {\n  font-size: 3rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.text-gray {\n  color: #808080 !important;\n}\n.text-gray-400 {\n  color: #9ca3af !important;\n}\n.text-gray-500 {\n  color: #6b7280 !important;\n}\n.text-blue-gray {\n  color: #717d94;\n}\n.text-primary {\n  color: #ff6e1c;\n}\n.text-secondary {\n  color: #4956dc;\n}\n.capitalize {\n  text-transform: capitalize !important;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-bold {\n  font-weight: 700;\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  background-color: white;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.border-t-solid {\n  border-top-style: solid;\n}\n.border-b-solid {\n  border-bottom-style: solid;\n}\n.border-t-1 {\n  border-top-width: 1px;\n}\n.border-b-1 {\n  border-bottom-width: 1px;\n}\n.gap-0 {\n  gap: 0 !important;\n}\n.gap-0\\.5 {\n  gap: 0.125rem;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem !important;\n}\n.gap-5 {\n  gap: 1.25rem;\n}\n.gap-6 {\n  gap: 1.5rem !important;\n}\n.gap-8 {\n  gap: 2rem !important;\n}\n.gap-12 {\n  gap: 3rem !important;\n}\n/* Padding Utilities */\n.p-0 {\n  padding: 0;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-5 {\n  padding: 1.25rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.p-8 {\n  padding: 2rem;\n}\n/* Padding X Utilities */\n.px-0 {\n  padding-right: 0;\n  padding-left: 0;\n}\n.px-1 {\n  padding-right: 0.25rem;\n  padding-left: 0.25rem;\n}\n.px-2 {\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n}\n.px-3 {\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n}\n.px-4 {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.px-5 {\n  padding-right: 1.25rem;\n  padding-left: 1.25rem;\n}\n.px-6 {\n  padding-right: 1.5rem;\n  padding-left: 1.5rem;\n}\n.px-8 {\n  padding-right: 2rem;\n  padding-left: 2rem;\n}\n.px-12 {\n  padding-right: 3rem;\n  padding-left: 3rem;\n}\n/* Padding Y Utilities */\n.py-0 {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n/* Padding Top Utilities */\n.pt-0 {\n  padding-top: 0;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-3 {\n  padding-top: 0.75rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.pt-5 {\n  padding-top: 1.25rem;\n}\n.pt-6 {\n  padding-top: 1.5rem;\n}\n.pt-8 {\n  padding-top: 2rem;\n}\n/* Padding Right Utilities */\n.pr-0 {\n  padding-right: 0;\n}\n.pr-4 {\n  padding-right: 1rem;\n}\n.pr-8 {\n  padding-right: 2rem;\n}\n/* Padding Bottom Utilities */\n.pb-0 {\n  padding-bottom: 0;\n}\n.pb-1 {\n  padding-bottom: 0.25rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-3 {\n  padding-bottom: 0.75rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-5 {\n  padding-bottom: 1.25rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n/* Padding Left Utilities */\n.pl-0 {\n  padding-left: 0;\n}\n.pl-1 {\n  padding-left: 0.25rem;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pl-8 {\n  padding-left: 2rem;\n}\n/* Space Utilities */\n.space-y-2 {\n  gap: 0.5rem;\n}\n.space-y-4 {\n  gap: 1rem;\n}\n.space-y-8 {\n  gap: 2rem;\n}\n/* Margin Utilities */\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.ml-6 {\n  margin-left: 1.5rem;\n}\n.ml-8 {\n  margin-left: 2rem;\n}\n.mb-0 {\n  margin-bottom: 0;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-5 {\n  margin-bottom: 1.25rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-6 {\n  margin-right: 1.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\n}\n.mt-0 {\n  margin-top: 0;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-5 {\n  margin-top: 1.25rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.my-8 {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n.my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.mx-8 {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n.w-full {\n  width: 100%;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-14 {\n  width: 3.5rem;\n  /* 56px */\n}\n.w-20 {\n  width: 5rem;\n  /* 80px */\n}\n.h-full {\n  height: 100%;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-14 {\n  height: 3.5rem;\n  /* 56px */\n}\n.h-80 {\n  height: 20rem;\n}\n.h-96 {\n  height: 24rem;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-4 {\n  grid-template-columns: repeat(4, minMax(0, 1fr));\n}\n.col-span-2 {\n  grid-column: span 2 / span 2;\n}\n.col-span-3 {\n  grid-column: span 3 / span 3;\n}\n.col-span-4 {\n  grid-column: span 4 / span 4;\n}\n.col-span-full {\n  grid-column: 1 / -1;\n}\n/* Background colors */\n.bg-black {\n  background-color: #000000;\n}\n.bg-slate-50 {\n  background-color: #f8fafc;\n}\n.bg-slate-100 {\n  background-color: #f1f5f9;\n}\n.bg-slate-200 {\n  background-color: #e2e8f0;\n}\n.bg-slate-300 {\n  background-color: #cbd5e1;\n}\n.bg-slate-400 {\n  background-color: #94a3b8;\n}\n.bg-slate-500 {\n  background-color: #64748b;\n}\n.bg-slate-600 {\n  background-color: #475569;\n}\n.bg-slate-700 {\n  background-color: #334155;\n}\n.bg-slate-800 {\n  background-color: #1e293b;\n}\n.bg-slate-900 {\n  background-color: #0f172a;\n}\n.bg-slate-950 {\n  background-color: #020617;\n}\n.bg-gray-50 {\n  background-color: #f9fafb;\n}\n.bg-gray-100 {\n  background-color: #f3f4f6;\n}\n.bg-gray-200 {\n  background-color: #e5e7eb;\n}\n.bg-gray-300 {\n  background-color: #d1d5db;\n}\n.bg-gray-400 {\n  background-color: #9ca3af;\n}\n.bg-gray-500 {\n  background-color: #6b7280;\n}\n.bg-gray-600 {\n  background-color: #4b5563;\n}\n.bg-gray-700 {\n  background-color: #374151;\n}\n.bg-gray-800 {\n  background-color: #1f2937;\n}\n.bg-gray-900 {\n  background-color: #111827;\n}\n.bg-gray-950 {\n  background-color: #030712;\n}\n.bg-green-200 {\n  background-color: #a7f3d0;\n}\n.bg-green-500 {\n  background-color: #10b981;\n}\n.bg-blue-50 {\n  background-color: #eff6ff;\n}\n.bg-blue-100 {\n  background-color: #dbeafe;\n}\n.bg-blue-200 {\n  background-color: #bfdbfe;\n}\n.bg-blue-300 {\n  background-color: #93c5fd;\n}\n.bg-blue-400 {\n  background-color: #60a5fa;\n}\n.bg-blue-500 {\n  background-color: #3b82f6;\n}\n.bg-blue-600 {\n  background-color: #2563eb;\n}\n.bg-blue-700 {\n  background-color: #1d4ed8;\n}\n.bg-blue-800 {\n  background-color: #1e40af;\n}\n.bg-blue-900 {\n  background-color: #1e3a8a;\n}\n.bg-blue-950 {\n  background-color: #172554;\n}\n.bg-orange-50 {\n  background-color: #fff7ed;\n}\n.bg-orange-100 {\n  background-color: #ffedd5;\n}\n.bg-orange-200 {\n  background-color: #fed7aa;\n}\n.bg-orange-300 {\n  background-color: #fdba74;\n}\n.bg-orange-400 {\n  background-color: #fb923c;\n}\n.bg-orange-500 {\n  background-color: #f97316;\n}\n.bg-orange-600 {\n  background-color: #ea580c;\n}\n.bg-orange-700 {\n  background-color: #c2410c;\n}\n.bg-orange-800 {\n  background-color: #9a3412;\n}\n.bg-orange-900 {\n  background-color: #7c2d12;\n}\n.bg-orange-950 {\n  background-color: #431407;\n}\n.bg-yellow-200 {\n  background-color: #fde68a;\n}\n.bg-red-200 {\n  background-color: #fecaca;\n}\n/* Text colors */\n.text-black {\n  color: #000000;\n}\n.text-white {\n  color: #ffffff;\n}\n.text-slate-50 {\n  color: #f8fafc;\n}\n.text-slate-100 {\n  color: #f1f5f9;\n}\n.text-slate-200 {\n  color: #e2e8f0;\n}\n.text-slate-300 {\n  color: #cbd5e1;\n}\n.text-slate-400 {\n  color: #94a3b8;\n}\n.text-slate-500 {\n  color: #64748b;\n}\n.text-slate-600 {\n  color: #475569;\n}\n.text-slate-700 {\n  color: #334155;\n}\n.text-slate-800 {\n  color: #1e293b;\n}\n.text-slate-900 {\n  color: #0f172a;\n}\n.text-slate-950 {\n  color: #020617;\n}\n.text-gray-50 {\n  color: #f9fafb;\n}\n.text-gray-100 {\n  color: #f3f4f6;\n}\n.text-gray-200 {\n  color: #e5e7eb;\n}\n.text-gray-300 {\n  color: #d1d5db;\n}\n.text-gray-400 {\n  color: #9ca3af;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.text-gray-600 {\n  color: #4b5563;\n}\n.text-gray-700 {\n  color: #374151;\n}\n.text-gray-800 {\n  color: #1f2937;\n}\n.text-gray-900 {\n  color: #111827;\n}\n.text-gray-950 {\n  color: #030712;\n}\n.text-green-600 {\n  color: #059669;\n}\n.text-green-700 {\n  color: #047857;\n}\n.text-blue-50 {\n  color: #eff6ff;\n}\n.text-blue-100 {\n  color: #dbeafe;\n}\n.text-blue-200 {\n  color: #bfdbfe;\n}\n.text-blue-300 {\n  color: #93c5fd;\n}\n.text-blue-400 {\n  color: #60a5fa;\n}\n.text-blue-500 {\n  color: #3b82f6;\n}\n.text-blue-600 {\n  color: #2563eb;\n}\n.text-blue-700 {\n  color: #1d4ed8;\n}\n.text-blue-800 {\n  color: #1e40af;\n}\n.text-blue-900 {\n  color: #1e3a8a;\n}\n.text-blue-950 {\n  color: #172554;\n}\n.text-orange-50 {\n  color: #fff7ed;\n}\n.text-orange-100 {\n  color: #ffedd5;\n}\n.text-orange-200 {\n  color: #fed7aa;\n}\n.text-orange-300 {\n  color: #fdba74;\n}\n.text-orange-400 {\n  color: #fb923c;\n}\n.text-orange-500 {\n  color: #f97316;\n}\n.text-orange-600 {\n  color: #ea580c;\n}\n.text-orange-700 {\n  color: #c2410c;\n}\n.text-orange-800 {\n  color: #9a3412;\n}\n.text-orange-900 {\n  color: #7c2d12;\n}\n.text-orange-950 {\n  color: #431407;\n}\n.text-yellow-500 {\n  color: #f59e0b;\n}\n.text-yellow-700 {\n  color: #b45309;\n}\n.text-red-500 {\n  color: #ef4444;\n}\n.text-red-700 {\n  color: #b91c1c;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-dashed {\n  border-style: dashed;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-slate-50 {\n  border-color: #f8fafc;\n}\n.border-slate-100 {\n  border-color: #f1f5f9;\n}\n.border-slate-200 {\n  border-color: #e2e8f0;\n}\n.border-slate-300 {\n  border-color: #cbd5e1;\n}\n.border-slate-400 {\n  border-color: #94a3b8;\n}\n.border-slate-500 {\n  border-color: #64748b;\n}\n.border-slate-600 {\n  border-color: #475569;\n}\n.border-slate-700 {\n  border-color: #334155;\n}\n.border-slate-800 {\n  border-color: #1e293b;\n}\n.border-slate-900 {\n  border-color: #0f172a;\n}\n.border-slate-950 {\n  border-color: #020617;\n}\n.border-gray-400 {\n  border-color: #9ca3af;\n}\n.border-gray-500 {\n  border-color: #6b7280;\n}\n.origin-center {\n  transform-origin: center;\n}\n.rotate-45 {\n  transform: rotate(45deg);\n}\n.translate-x-2\\/4 {\n  transform: translateX(50%);\n}\n.-translate-x-2\\/4 {\n  transform: translateX(-50%);\n}\n.translate-y-2\\/4 {\n  transform: translateY(50%);\n}\n.translate-y-full {\n  transform: translateY(100%);\n}\n.-translate-y-full {\n  transform: translateY(-100%);\n}\n.shadow-sm {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow {\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n}\n.shadow-md {\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n}\n.shadow-lg {\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n}\n.shadow-xl {\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n}\n.shadow-2xl {\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n}\n.shadow-inner {\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow-none {\n  box-shadow: 0 0 #0000;\n}\n@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.15;\n}\nbody {\n  color: #232323;\n  background-color: #f8fafc;\n}\nth {\n  font-weight: normal;\n}\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\n}\n@media only screen and (max-width: 768px) {\n  select,\n  textarea,\n  input[type=\"text\"],\n  input[type=\"password\"],\n  input[type=\"datetime\"],\n  input[type=\"datetime-local\"],\n  input[type=\"date\"],\n  input[type=\"month\"],\n  input[type=\"time\"],\n  input[type=\"week\"],\n  input[type=\"number\"],\n  input[type=\"email\"],\n  input[type=\"url\"],\n  input[type=\"search\"],\n  input[type=\"tel\"],\n  input[type=\"color\"] {\n    font-size: 16px !important;\n  }\n}\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+styleInject(css_248z);
+
 var IconContext = /*#__PURE__*/createContext({});
 var Context = IconContext;
 
@@ -1715,35 +1745,28 @@ var InvoiceQuoteView = function (_a) {
 };
 var templateObject_1$9;
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = ".ant-tag {\n  border: none;\n  border-radius: 14px;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  white-space: nowrap;\n  margin: 0;\n}\n.ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-primary:disabled {\n  background: #eef0f2 !important;\n  color: rgba(0, 0, 0, 0.25) !important;\n  border: none;\n}\n.ant-btn {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  box-shadow: none;\n  text-shadow: none;\n  outline: none !important;\n  line-height: 1;\n  font-size: 0.875rem;\n  font-weight: normal;\n}\n.ant-btn > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-lg {\n  height: 44px !important;\n}\n.ant-btn-default:disabled {\n  border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.ant-btn-link {\n  border: none !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link:disabled {\n  background-color: transparent !important;\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-input-affix-wrapper .ant-input-prefix {\n  transition: color 0.3s;\n}\n.ant-select-selector {\n  box-shadow: none !important;\n  background-color: transparent !important;\n  border: none !important;\n}\n.ant-form-item-label {\n  text-transform: none !important;\n  font-size: 0.75rem;\n  padding-bottom: 2px !important;\n}\n.ant-form-item-label > label {\n  width: 100%;\n  color: #4b5563 !important;\n}\n.ant-form-item-explain-error {\n  font-size: 11px;\n  min-height: 11px;\n  line-height: 11px;\n  padding-top: 2px;\n}\n.ant-form-item {\n  margin-bottom: 0;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-divider {\n  margin: 0;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n  display: flex !important;\n  align-items: center !important;\n}\n.ant-menu-submenu::after {\n  display: none !important;\n}\n.ant-drawer-title {\n  font-weight: 400 !important;\n}\n.ant-drawer-header-title {\n  flex-direction: row-reverse !important;\n  align-items: start !important ;\n}\n.ant-drawer-close {\n  margin-inline-end: 0 !important;\n}\n@media (min-width: 768px) {\n  .ant-input,\n  .ant-picker,\n  .ant-select,\n  .ant-input-affix-wrapper {\n    font-size: 1rem !important;\n  }\n  .ant-drawer-header {\n    padding-right: 1.5rem !important;\n    padding-left: 1.5rem !important;\n  }\n}\n:root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n  height: 1px;\n  min-width: 128px;\n  background: #717d94;\n}\n.plan-step-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid #717d94;\n  background: white;\n  width: 24px;\n  height: 24px;\n  color: #717d94;\n}\n.plan-step-number.active {\n  border: none;\n  color: white;\n  background: #ff6e1c;\n}\n.hidden {\n  display: none;\n}\n.cardElement {\n  padding: 8px 11px;\n  border: 1px solid #e5e7eb;\n  background-color: white;\n  font-family: Inter !important;\n}\n.tooltip {\n  visibility: hidden;\n  position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\n}\n.show-on-hover {\n  opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n  opacity: 1;\n}\n.pdf-only {\n  display: none !important;\n}\n.notes p {\n  margin: 0;\n  padding: 0;\n  padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n  color: #717d94 !important;\n  font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n  margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n  height: 34px !important;\n}\n#form-element #finix-form-container .field {\n  margin-top: 0 !important;\n  padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n  font-size: 11px !important;\n  color: #ff4d4f !important;\n}\n.icon-path {\n  transition: fill 0.3s;\n}\n.shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.shadow-padding-xb {\n  padding-right: 1rem;\n  padding-left: 1rem;\n  padding-bottom: 0.5rem;\n}\n.content-container {\n  width: 100%;\n  margin: 0 auto;\n}\n@media (min-width: 1220px) {\n  .content-container {\n    width: 1220px !important;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 768px) {\n  .shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .shadow-padding-xb {\n    padding-right: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 0.5rem;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.fixed {\n  position: fixed;\n}\n.top-0 {\n  top: 0;\n}\n.right-0 {\n  right: 0;\n}\n.bottom-0 {\n  bottom: 0;\n}\n.left-0 {\n  left: 0;\n}\n.overflow-hidden {\n  overflow: hidden !important;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.z-50 {\n  z-index: 50;\n}\n.-top-1\\/10 {\n  top: -10%;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-xl {\n  border-radius: 0.75rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-tr {\n  border-top-right-radius: 0.25rem;\n}\n.rounded-br {\n  border-bottom-right-radius: 0.25rem;\n}\n.rounded-bl {\n  border-bottom-left-radius: 0.25rem;\n}\n.rounded-tl {\n  border-top-left-radius: 0.25rem;\n}\n.rounded-t {\n  border-top-right-radius: 0.25rem;\n  border-top-left-radius: 0.25rem;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.grow {\n  flex-grow: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.basis-0 {\n  flex-basis: 0;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n.items-center {\n  align-items: center;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-start {\n  align-items: flex-start;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.underline {\n  text-decoration: underline;\n}\n.no-underline {\n  text-decoration: none;\n}\n.text-nowrap {\n  white-space: nowrap;\n}\n.text-white {\n  color: white;\n}\n.text-xxs {\n  font-size: 0.625rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n}\n.text-base {\n  font-size: 1rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n}\n.text-3xl {\n  font-size: 2rem;\n}\n.text-4xl {\n  font-size: 2.5rem;\n}\n.text-5xl {\n  font-size: 3rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.text-gray {\n  color: #808080 !important;\n}\n.text-gray-400 {\n  color: #9ca3af !important;\n}\n.text-gray-500 {\n  color: #6b7280 !important;\n}\n.text-blue-gray {\n  color: #717d94;\n}\n.text-primary {\n  color: #ff6e1c;\n}\n.text-secondary {\n  color: #4956dc;\n}\n.capitalize {\n  text-transform: capitalize !important;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-bold {\n  font-weight: 700;\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  background-color: white;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.border-t-solid {\n  border-top-style: solid;\n}\n.border-b-solid {\n  border-bottom-style: solid;\n}\n.border-t-1 {\n  border-top-width: 1px;\n}\n.border-b-1 {\n  border-bottom-width: 1px;\n}\n.gap-0 {\n  gap: 0 !important;\n}\n.gap-0\\.5 {\n  gap: 0.125rem;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem !important;\n}\n.gap-5 {\n  gap: 1.25rem;\n}\n.gap-6 {\n  gap: 1.5rem !important;\n}\n.gap-8 {\n  gap: 2rem !important;\n}\n.gap-12 {\n  gap: 3rem !important;\n}\n/* Padding Utilities */\n.p-0 {\n  padding: 0;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-5 {\n  padding: 1.25rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.p-8 {\n  padding: 2rem;\n}\n/* Padding X Utilities */\n.px-0 {\n  padding-right: 0;\n  padding-left: 0;\n}\n.px-1 {\n  padding-right: 0.25rem;\n  padding-left: 0.25rem;\n}\n.px-2 {\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n}\n.px-3 {\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n}\n.px-4 {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.px-5 {\n  padding-right: 1.25rem;\n  padding-left: 1.25rem;\n}\n.px-6 {\n  padding-right: 1.5rem;\n  padding-left: 1.5rem;\n}\n.px-8 {\n  padding-right: 2rem;\n  padding-left: 2rem;\n}\n.px-12 {\n  padding-right: 3rem;\n  padding-left: 3rem;\n}\n/* Padding Y Utilities */\n.py-0 {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n/* Padding Top Utilities */\n.pt-0 {\n  padding-top: 0;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-3 {\n  padding-top: 0.75rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.pt-5 {\n  padding-top: 1.25rem;\n}\n.pt-6 {\n  padding-top: 1.5rem;\n}\n.pt-8 {\n  padding-top: 2rem;\n}\n/* Padding Right Utilities */\n.pr-0 {\n  padding-right: 0;\n}\n.pr-4 {\n  padding-right: 1rem;\n}\n.pr-8 {\n  padding-right: 2rem;\n}\n/* Padding Bottom Utilities */\n.pb-0 {\n  padding-bottom: 0;\n}\n.pb-1 {\n  padding-bottom: 0.25rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-3 {\n  padding-bottom: 0.75rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-5 {\n  padding-bottom: 1.25rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n/* Padding Left Utilities */\n.pl-0 {\n  padding-left: 0;\n}\n.pl-1 {\n  padding-left: 0.25rem;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pl-8 {\n  padding-left: 2rem;\n}\n/* Space Utilities */\n.space-y-2 {\n  gap: 0.5rem;\n}\n.space-y-4 {\n  gap: 1rem;\n}\n.space-y-8 {\n  gap: 2rem;\n}\n/* Margin Utilities */\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.ml-6 {\n  margin-left: 1.5rem;\n}\n.ml-8 {\n  margin-left: 2rem;\n}\n.mb-0 {\n  margin-bottom: 0;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-5 {\n  margin-bottom: 1.25rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-6 {\n  margin-right: 1.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\n}\n.mt-0 {\n  margin-top: 0;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-5 {\n  margin-top: 1.25rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.my-8 {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n.my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.mx-8 {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n.w-full {\n  width: 100%;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-14 {\n  width: 3.5rem;\n  /* 56px */\n}\n.w-20 {\n  width: 5rem;\n  /* 80px */\n}\n.h-full {\n  height: 100%;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-14 {\n  height: 3.5rem;\n  /* 56px */\n}\n.h-80 {\n  height: 20rem;\n}\n.h-96 {\n  height: 24rem;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-4 {\n  grid-template-columns: repeat(4, minMax(0, 1fr));\n}\n.col-span-2 {\n  grid-column: span 2 / span 2;\n}\n.col-span-3 {\n  grid-column: span 3 / span 3;\n}\n.col-span-4 {\n  grid-column: span 4 / span 4;\n}\n.col-span-full {\n  grid-column: 1 / -1;\n}\n/* Background colors */\n.bg-black {\n  background-color: #000000;\n}\n.bg-slate-50 {\n  background-color: #f8fafc;\n}\n.bg-slate-100 {\n  background-color: #f1f5f9;\n}\n.bg-slate-200 {\n  background-color: #e2e8f0;\n}\n.bg-slate-300 {\n  background-color: #cbd5e1;\n}\n.bg-slate-400 {\n  background-color: #94a3b8;\n}\n.bg-slate-500 {\n  background-color: #64748b;\n}\n.bg-slate-600 {\n  background-color: #475569;\n}\n.bg-slate-700 {\n  background-color: #334155;\n}\n.bg-slate-800 {\n  background-color: #1e293b;\n}\n.bg-slate-900 {\n  background-color: #0f172a;\n}\n.bg-slate-950 {\n  background-color: #020617;\n}\n.bg-gray-50 {\n  background-color: #f9fafb;\n}\n.bg-gray-100 {\n  background-color: #f3f4f6;\n}\n.bg-gray-200 {\n  background-color: #e5e7eb;\n}\n.bg-gray-300 {\n  background-color: #d1d5db;\n}\n.bg-gray-400 {\n  background-color: #9ca3af;\n}\n.bg-gray-500 {\n  background-color: #6b7280;\n}\n.bg-gray-600 {\n  background-color: #4b5563;\n}\n.bg-gray-700 {\n  background-color: #374151;\n}\n.bg-gray-800 {\n  background-color: #1f2937;\n}\n.bg-gray-900 {\n  background-color: #111827;\n}\n.bg-gray-950 {\n  background-color: #030712;\n}\n.bg-green-200 {\n  background-color: #a7f3d0;\n}\n.bg-green-500 {\n  background-color: #10b981;\n}\n.bg-blue-50 {\n  background-color: #eff6ff;\n}\n.bg-blue-100 {\n  background-color: #dbeafe;\n}\n.bg-blue-200 {\n  background-color: #bfdbfe;\n}\n.bg-blue-300 {\n  background-color: #93c5fd;\n}\n.bg-blue-400 {\n  background-color: #60a5fa;\n}\n.bg-blue-500 {\n  background-color: #3b82f6;\n}\n.bg-blue-600 {\n  background-color: #2563eb;\n}\n.bg-blue-700 {\n  background-color: #1d4ed8;\n}\n.bg-blue-800 {\n  background-color: #1e40af;\n}\n.bg-blue-900 {\n  background-color: #1e3a8a;\n}\n.bg-blue-950 {\n  background-color: #172554;\n}\n.bg-orange-50 {\n  background-color: #fff7ed;\n}\n.bg-orange-100 {\n  background-color: #ffedd5;\n}\n.bg-orange-200 {\n  background-color: #fed7aa;\n}\n.bg-orange-300 {\n  background-color: #fdba74;\n}\n.bg-orange-400 {\n  background-color: #fb923c;\n}\n.bg-orange-500 {\n  background-color: #f97316;\n}\n.bg-orange-600 {\n  background-color: #ea580c;\n}\n.bg-orange-700 {\n  background-color: #c2410c;\n}\n.bg-orange-800 {\n  background-color: #9a3412;\n}\n.bg-orange-900 {\n  background-color: #7c2d12;\n}\n.bg-orange-950 {\n  background-color: #431407;\n}\n.bg-yellow-200 {\n  background-color: #fde68a;\n}\n.bg-red-200 {\n  background-color: #fecaca;\n}\n/* Text colors */\n.text-black {\n  color: #000000;\n}\n.text-white {\n  color: #ffffff;\n}\n.text-slate-50 {\n  color: #f8fafc;\n}\n.text-slate-100 {\n  color: #f1f5f9;\n}\n.text-slate-200 {\n  color: #e2e8f0;\n}\n.text-slate-300 {\n  color: #cbd5e1;\n}\n.text-slate-400 {\n  color: #94a3b8;\n}\n.text-slate-500 {\n  color: #64748b;\n}\n.text-slate-600 {\n  color: #475569;\n}\n.text-slate-700 {\n  color: #334155;\n}\n.text-slate-800 {\n  color: #1e293b;\n}\n.text-slate-900 {\n  color: #0f172a;\n}\n.text-slate-950 {\n  color: #020617;\n}\n.text-gray-50 {\n  color: #f9fafb;\n}\n.text-gray-100 {\n  color: #f3f4f6;\n}\n.text-gray-200 {\n  color: #e5e7eb;\n}\n.text-gray-300 {\n  color: #d1d5db;\n}\n.text-gray-400 {\n  color: #9ca3af;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.text-gray-600 {\n  color: #4b5563;\n}\n.text-gray-700 {\n  color: #374151;\n}\n.text-gray-800 {\n  color: #1f2937;\n}\n.text-gray-900 {\n  color: #111827;\n}\n.text-gray-950 {\n  color: #030712;\n}\n.text-green-600 {\n  color: #059669;\n}\n.text-green-700 {\n  color: #047857;\n}\n.text-blue-50 {\n  color: #eff6ff;\n}\n.text-blue-100 {\n  color: #dbeafe;\n}\n.text-blue-200 {\n  color: #bfdbfe;\n}\n.text-blue-300 {\n  color: #93c5fd;\n}\n.text-blue-400 {\n  color: #60a5fa;\n}\n.text-blue-500 {\n  color: #3b82f6;\n}\n.text-blue-600 {\n  color: #2563eb;\n}\n.text-blue-700 {\n  color: #1d4ed8;\n}\n.text-blue-800 {\n  color: #1e40af;\n}\n.text-blue-900 {\n  color: #1e3a8a;\n}\n.text-blue-950 {\n  color: #172554;\n}\n.text-orange-50 {\n  color: #fff7ed;\n}\n.text-orange-100 {\n  color: #ffedd5;\n}\n.text-orange-200 {\n  color: #fed7aa;\n}\n.text-orange-300 {\n  color: #fdba74;\n}\n.text-orange-400 {\n  color: #fb923c;\n}\n.text-orange-500 {\n  color: #f97316;\n}\n.text-orange-600 {\n  color: #ea580c;\n}\n.text-orange-700 {\n  color: #c2410c;\n}\n.text-orange-800 {\n  color: #9a3412;\n}\n.text-orange-900 {\n  color: #7c2d12;\n}\n.text-orange-950 {\n  color: #431407;\n}\n.text-yellow-500 {\n  color: #f59e0b;\n}\n.text-yellow-700 {\n  color: #b45309;\n}\n.text-red-500 {\n  color: #ef4444;\n}\n.text-red-700 {\n  color: #b91c1c;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-dashed {\n  border-style: dashed;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-slate-50 {\n  border-color: #f8fafc;\n}\n.border-slate-100 {\n  border-color: #f1f5f9;\n}\n.border-slate-200 {\n  border-color: #e2e8f0;\n}\n.border-slate-300 {\n  border-color: #cbd5e1;\n}\n.border-slate-400 {\n  border-color: #94a3b8;\n}\n.border-slate-500 {\n  border-color: #64748b;\n}\n.border-slate-600 {\n  border-color: #475569;\n}\n.border-slate-700 {\n  border-color: #334155;\n}\n.border-slate-800 {\n  border-color: #1e293b;\n}\n.border-slate-900 {\n  border-color: #0f172a;\n}\n.border-slate-950 {\n  border-color: #020617;\n}\n.border-gray-400 {\n  border-color: #9ca3af;\n}\n.border-gray-500 {\n  border-color: #6b7280;\n}\n.origin-center {\n  transform-origin: center;\n}\n.rotate-45 {\n  transform: rotate(45deg);\n}\n.translate-x-2\\/4 {\n  transform: translateX(50%);\n}\n.-translate-x-2\\/4 {\n  transform: translateX(-50%);\n}\n.translate-y-2\\/4 {\n  transform: translateY(50%);\n}\n.translate-y-full {\n  transform: translateY(100%);\n}\n.-translate-y-full {\n  transform: translateY(-100%);\n}\n.shadow-sm {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow {\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n}\n.shadow-md {\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n}\n.shadow-lg {\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n}\n.shadow-xl {\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n}\n.shadow-2xl {\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n}\n.shadow-inner {\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow-none {\n  box-shadow: 0 0 #0000;\n}\n@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.15;\n}\nbody {\n  color: #232323;\n  background-color: #f8fafc;\n}\nth {\n  font-weight: normal;\n}\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\n}\n@media only screen and (max-width: 768px) {\n  select,\n  textarea,\n  input[type=\"text\"],\n  input[type=\"password\"],\n  input[type=\"datetime\"],\n  input[type=\"datetime-local\"],\n  input[type=\"date\"],\n  input[type=\"month\"],\n  input[type=\"time\"],\n  input[type=\"week\"],\n  input[type=\"number\"],\n  input[type=\"email\"],\n  input[type=\"url\"],\n  input[type=\"search\"],\n  input[type=\"tel\"],\n  input[type=\"color\"] {\n    font-size: 16px !important;\n  }\n}\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
-styleInject(css_248z);
+var MUTATION$8 = "\nquery FormattedInvoice($id: ID) {\n  formattedInvoice(id: $id) {\n    amount\n    amountDue\n    amountPaid\n    billingCity\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    createdAt\n    credits\n    currency\n    currencyId\n    currencySymbol\n    customerBillingCity\n    customerBillingContact\n    customerBillingCountry\n    customerBillingState\n    customerBillingStreet\n    customerBillingZip\n    customerName\n    dueAt\n    html\n    id\n    isLegacy\n    netPaymentDays\n    number\n    payableId\n    poNumber\n    printedState\n    smallUnitAmountDue\n    state\n    subscriptionEndDate\n    subscriptionStartDate\n    subtotal\n    taxAmount\n    taxNumber\n    uuid\n    vendorName\n    formattedLines {\n      amount\n      billingPeriodEnd\n      billingPeriodStart\n      chargeType\n      discount\n      frequency\n      lineText\n      position\n      price\n      priceDecimals\n      priceListChargeId\n      priceListChargeName\n      priceListName\n      prorationRate\n      quantity\n      unitOfMeasure\n      priceTiers {\n        price\n        starts\n      }\n    }\n  }\n}";
+var getFormattedInvoice = function (_a) {
+    var id = _a.id, token = _a.token, subdomain = _a.subdomain;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    vars = { id: id };
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$8,
+                            token: token,
+                            vars: vars,
+                            subdomain: subdomain,
+                        })];
+                case 1:
+                    response = _b.sent();
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedInvoice];
+            }
+        });
+    });
+};
 
 var paymentMethodsQuery = "query paymentMethods ($filter: String, $first: Int, $sort: String) {\n  paymentMethods (filter: $filter, first: $first, sort: $sort) {\n    nodes {\n      id\n      disabled\n      pluginId\n      accountId\n      expirationDate\n      plugin {\n        guid\n        id\n      }\n      state\n      metadata {\n        issuer\n        identifier\n        kind\n        description\n        icon\n      }\n    }\n  }\n}";
 var usePaymentMethod = function (graphQLClient) {
@@ -1901,7 +1924,6 @@ var PaymentContext = createContext({});
 var CheckoutFooter = function (_a) {
     var amountDue = _a.amountDue, currencyId = _a.currencyId, isSaving = _a.isSaving, onPaymentSubmit = _a.onPaymentSubmit, onlySavePaymentMethod = _a.onlySavePaymentMethod, noPadding = _a.noPadding;
     var isMobile = useIsMobile$1();
-    var invoice = useContext(InvoiceCheckoutContext).invoice;
     var displayPayButtonNameAnyways = useContext(PaymentContext).displayPayButtonNameAnyways;
     var buttonName = function () {
         return onlySavePaymentMethod && !displayPayButtonNameAnyways
@@ -1912,11 +1934,6 @@ var CheckoutFooter = function (_a) {
                 ? "Paying"
                 : "Pay";
     };
-    useEffect(function () {
-        if (invoice) {
-            onPaymentSubmit();
-        }
-    }, [invoice]);
     return (jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: jsx(Button, __assign({ className: "w-full", disabled: isSaving, onClick: onPaymentSubmit, size: isMobile ? "large" : "middle", type: "primary" }, { children: "".concat(buttonName()).concat(amountDue && currencyId
                 ? " ".concat(Misc.formatCurrency(amountDue, currencyId))
                 : "") })) })));
@@ -2252,8 +2269,8 @@ var DemoPayForm = function (_a) {
             switch (_a.label) {
                 case 0:
                     _a.trys.push([0, 6, , 7]);
-                    validateCardDetails();
                     if (!onlySavePaymentMethod) return [3 /*break*/, 2];
+                    validateCardDetails();
                     setIsSaving(true);
                     return [4 /*yield*/, storePayment({
                             testCreditCardNumber: unformatCardNumber(cardDetails.number),
@@ -2279,6 +2296,7 @@ var DemoPayForm = function (_a) {
                     return [3 /*break*/, 5];
                 case 2:
                     if (!(amountDue !== undefined && currencyId)) return [3 /*break*/, 4];
+                    validateCardDetails();
                     setIsSaving(true);
                     return [4 /*yield*/, confirmPayment({
                             amount: amountDue,
@@ -2769,7 +2787,7 @@ var PaymentForm = function (_a) {
     return (jsx(ActualPaymentForm, { invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, quote: quote, setIsSaving: setIsSaving }));
 };
 
-var MUTATION$8 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
+var MUTATION$7 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
 var checkout = function (_a) {
     var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, subdomain = _a.subdomain;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -2786,7 +2804,7 @@ var checkout = function (_a) {
                         mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
                     }
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$8,
+                            query: MUTATION$7,
                             token: token,
                             vars: mutationVars,
                             subdomain: subdomain,
@@ -2923,31 +2941,8 @@ function InvoicePDF(_a) {
         }, title: "Invoice PDF", width: "100%" }));
 }
 
-var MUTATION$7 = "\nquery FormattedInvoice($id: ID) {\n  formattedInvoice(id: $id) {\n    amount\n    amountDue\n    amountPaid\n    billingCity\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    createdAt\n    credits\n    currency\n    currencyId\n    currencySymbol\n    customerBillingCity\n    customerBillingContact\n    customerBillingCountry\n    customerBillingState\n    customerBillingStreet\n    customerBillingZip\n    customerName\n    dueAt\n    html\n    id\n    isLegacy\n    netPaymentDays\n    number\n    payableId\n    poNumber\n    printedState\n    smallUnitAmountDue\n    state\n    subscriptionEndDate\n    subscriptionStartDate\n    subtotal\n    taxAmount\n    taxNumber\n    uuid\n    vendorName\n    formattedLines {\n      amount\n      billingPeriodEnd\n      billingPeriodStart\n      chargeType\n      discount\n      frequency\n      lineText\n      position\n      price\n      priceDecimals\n      priceListChargeId\n      priceListChargeName\n      priceListName\n      prorationRate\n      quantity\n      unitOfMeasure\n      priceTiers {\n        price\n        starts\n      }\n    }\n  }\n}";
-var getFormattedInvoice = function (_a) {
-    var id = _a.id, token = _a.token, subdomain = _a.subdomain;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    vars = { id: id };
-                    return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$7,
-                            token: token,
-                            vars: vars,
-                            subdomain: subdomain,
-                        })];
-                case 1:
-                    response = _b.sent();
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedInvoice];
-            }
-        });
-    });
-};
-
 function ActualInvoice(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess; _a.storedPaymentMethod;
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess;
     var _b = useState(false), isSaving = _b[0], setIsSaving = _b[1];
     var queryClient = useQueryClient();
     var isMobile = useIsMobile$1();
@@ -3298,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 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 TransactionsListContext = createContext({});
 
-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 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 _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*/];
-            });
-        });
-    };
-    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 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 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$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 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];
-            }
-        });
-    });
+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 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 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",
+    };
+    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 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,
+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));
     });
-    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 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 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];
+// 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 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$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];
+            if (columns.includes("download")) {
+                templateColumns.push("auto");
             }
-        });
-    });
-};
-
-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)));
+        }
+        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(" ");
     };
-    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 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" }) })) })] })));
+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 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 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 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 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;
 
-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 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 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 }); },
-    });
-    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;
-            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, {})] }));
-    }
-}
-
-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 pageContentRefState = atom({
-    key: "pageContentRefState",
-    default: undefined,
-});
+var PaymentMethodContext = createContext({});
 
-var PageContent = function (_a) {
+var Card = 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 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 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";
-    }
+    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 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 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 isInvoice = function (transaction) {
-    return transaction.kind === "INVOICE";
+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 isQuote = function (transaction) {
-    return transaction.kind === "QUOTE";
+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 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 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"] })) }))] })));
 };
-
-// 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 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 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 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 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 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 invoices" })));
-};
-
-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",
+    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");
+            });
+        }
     };
-    headers["Authorization"] = bearerToken;
-    return headers;
+    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 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*/];
-        }
-    });
-}); }; };
+function PaymentMethod(_a) {
+    var footer = _a.footer, processPublicUrl = _a.processPublicUrl;
+    return (jsx(PaymentMethodContext.Provider, __assign({ value: { footer: footer, processPublicUrl: processPublicUrl } }, { children: jsx(ActualPaymentMethod, {}) })));
+}
 
-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$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];
+            }
+        });
     });
 };
 
-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 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 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" }) })));
 };
 
-// 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,
+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*/];
+            });
+        });
     };
-    return (jsx(QueryClientProvider, __assign({ client: queryClient }, { children: jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsWrapper, {}) })) })));
+    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 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 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);
+    // 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 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 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];
+            }
+        });
+    });
+};
+
+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 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 Text$4 = Typography.Text;
+function PriceListDisplay(_a) {
+    var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
+    if (!priceListData)
+        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$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." }))] }))] })) })) }));
 }
-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 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" }) })) })] })));
+};
+
+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 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 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 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 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 }); },
+    });
+    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({
@@ -5509,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 };