@bunnyapp/components 1.0.5 → 1.0.7

package/dist/cjs/index.js

@@ -11,10 +11,10 @@ var common = require('@bunnyapp/common');
 var reactQuery = require('@tanstack/react-query');
 var recoil = require('recoil');
 var theme = require('antd/lib/theme');
+var reactHelmetAsync = require('react-helmet-async');
 var reactStripeJs = require('@stripe/react-stripe-js');
 var pure = require('@stripe/stripe-js/pure');
 var lodash = require('lodash');
-var reactHelmetAsync = require('react-helmet-async');
 var request = import('graphql-request');
 var recharts = require('recharts');
 
@@ -117,6 +117,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__*/React.createContext({});
 var Context = IconContext;
 
@@ -1744,35 +1774,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*/, common.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) {
@@ -1930,7 +1953,6 @@ var PaymentContext = React.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 = common.useIsMobile();
-    var invoice = React.useContext(InvoiceCheckoutContext).invoice;
     var displayPayButtonNameAnyways = React.useContext(PaymentContext).displayPayButtonNameAnyways;
     var buttonName = function () {
         return onlySavePaymentMethod && !displayPayButtonNameAnyways
@@ -1941,11 +1963,6 @@ var CheckoutFooter = function (_a) {
                 ? "Paying"
                 : "Pay";
     };
-    React.useEffect(function () {
-        if (invoice) {
-            onPaymentSubmit();
-        }
-    }, [invoice]);
     return (jsxRuntime.jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isSaving, onClick: onPaymentSubmit, size: isMobile ? "large" : "middle", type: "primary" }, { children: "".concat(buttonName()).concat(amountDue && currencyId
                 ? " ".concat(common.Misc.formatCurrency(amountDue, currencyId))
                 : "") })) })));
@@ -2281,8 +2298,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),
@@ -2308,6 +2325,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,
@@ -2798,7 +2816,7 @@ var PaymentForm = function (_a) {
     return (jsxRuntime.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 () {
@@ -2815,7 +2833,7 @@ var checkout = function (_a) {
                         mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
                     }
                     return [4 /*yield*/, common.gqlRequest({
-                            query: MUTATION$8,
+                            query: MUTATION$7,
                             token: token,
                             vars: mutationVars,
                             subdomain: subdomain,
@@ -2952,31 +2970,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*/, common.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 = React.useState(false), isSaving = _b[0], setIsSaving = _b[1];
     var queryClient = reactQuery.useQueryClient();
     var isMobile = common.useIsMobile();
@@ -3327,1095 +3322,1175 @@ function Quote(_a) {
 }
 var templateObject_1$5;
 
-var DrawerHeader = function (_a) {
-    var description = _a.description, onClose = _a.onClose, title = _a.title;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-xl" }, { children: title })), jsxRuntime.jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsxRuntime.jsx(CloseOutlined$1, {}) }))] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
-};
-
-var LargeCardIcon = function () {
-    return (jsxRuntime.jsx("svg", __assign({ width: "72", height: "56", viewBox: "0 0 72 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.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*/, common.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 (jsxRuntime.jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.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 = React.createContext({});
+var pageContentRefState = recoil.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 = React.useContext(BunnyContext).darkMode;
-    return (jsxRuntime.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 = React.useRef(null);
+    var setPageContentRef = recoil.useSetRecoilState(pageContentRefState);
+    React.useEffect(function () {
+        setPageContentRef(pageContentRef === null || pageContentRef === void 0 ? void 0 : pageContentRef.current);
+    }, [pageContentRef, setPageContentRef]);
+    return (jsxRuntime.jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
 };
 
 var Text$b = antd.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 = common.useIsMobile();
-    var processPublicUrl = React.useContext(PaymentMethodContext).processPublicUrl;
-    return (jsxRuntime.jsxs(Card, __assign({ className: "shadow-md m-0" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.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) && (jsxRuntime.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)) })), jsxRuntime.jsx(Text$b, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.description })] })), jsxRuntime.jsx(antd.Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(antd.Divider, {}), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(CardAttribute, { title: "EXPIRATION", value: dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).format("MM/YY") }), isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsxRuntime.jsx(PageSubTitle, { title: title }), children] })));
 };
-var CardAttribute = function (_a) {
-    var title = _a.title, value = _a.value;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.jsx(Text$b, { children: value })] })));
+var PageSubTitle = function (_a) {
+    var title = _a.title;
+    var secondaryColor = React.useContext(BrandContext).secondaryColor;
+    var darkMode = React.useContext(BunnyContext).darkMode;
+    return (jsxRuntime.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 = common.useIsMobile();
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6 ".concat(isMobile ? "justify-center mt-4" : "") }, { children: [jsxRuntime.jsx(antd.Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove payment method" })) })), jsxRuntime.jsx(antd.Divider, { style: { height: "24px" }, type: "vertical" }), jsxRuntime.jsx(antd.Button, __assign({ onClick: onClickUpdate, type: "primary" }, { children: "Update" }))] })));
+
+var StateTag = function (_a) {
+    var state = _a.state;
+    return jsxRuntime.jsx(antd.Tag, __assign({ color: getColor(state) }, { children: lodash.capitalize(lodash.startCase(state)) }));
 };
-var EmptyCard = function (_a) {
-    var onClick = _a.onClick;
-    var brandColor = React.useContext(BrandContext).brandColor;
-    return (jsxRuntime.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: [jsxRuntime.jsx(LargeCardIcon, {}), jsxRuntime.jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsxRuntime.jsx(antd.Button, __assign({ type: "link" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsxRuntime.jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
+var getColor = function (state) {
+    switch (state) {
+        case common.FrontendTransaction.TransactionState.not_due:
+            return "yellow";
+        case common.FrontendTransaction.TransactionState.voided:
+            return "black";
+        case common.FrontendTransaction.TransactionState.ready:
+            return "orange";
+        case common.FrontendTransaction.TransactionState.preparing:
+            return "purple";
+        case common.FrontendTransaction.TransactionState.unapplied:
+        case common.FrontendTransaction.TransactionState.partially_applied:
+        case common.FrontendTransaction.TransactionState.applied:
+            return "blue";
+        case common.FrontendTransaction.TransactionState.due:
+        case common.FrontendTransaction.TransactionState.unpaid:
+            return "orange";
+        case common.FrontendTransaction.TransactionState.failed:
+            return "red";
+        case common.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__default["default"].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"); }, common.SLATE_600);
+var templateObject_1$4;
+
+var Text$a = antd.Typography.Text;
+var TransactionDate = function (_a) {
+    var date = _a.date;
+    return jsxRuntime.jsx(Text$a, __assign({ className: "text-sm" }, { children: common.Misc.formatDate(date) }));
 };
 
-var ActualPaymentMethod = function () {
-    var _a = React.useContext(BunnyContext), token = _a.token, subdomain = _a.subdomain, graphQLClient = _a.graphQLClient;
-    var accountId = React.useContext(PaymentContext).accountId;
-    // Hooks
-    var queryClient = reactQuery.useQueryClient();
-    var paymentPlugins = common.usePaymentPlugins({ subdomain: subdomain, token: token }).paymentPlugins;
-    var showErrorNotification = common.NotificationUtils.useErrorNotification();
-    var showSuccessNotification = common.NotificationUtils.useSuccessNotification();
-    var handleAllErrorFormats = common.NotificationUtils.useAllErrorFormats(function () {
-        console.log("Navigation in PaymentMethod.tsx useAllErrorFormats not implemented");
-    });
-    var isMobile = common.useIsMobile();
-    var data = usePaymentMethod(graphQLClient).data;
-    // Local state
-    var _b = React.useState(false), showModal = _b[0], setShowModal = _b[1];
-    var _c = React.useState(false), isSaving = _c[0], setIsSaving = _c[1];
-    // Queries
-    reactQuery.useQuery({
-        queryKey: common.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) {
-            common.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(common.QueryKeyFactory.default.accountPaymentMethodKey, null);
-            })
-                .catch(function (error) {
-                showErrorNotification(error.message, "Error removing Payment Method");
-            });
-        }
-    };
-    var onSuccess = function () {
-        queryClient.invalidateQueries({
-            queryKey: common.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 jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [data ? (jsxRuntime.jsx(CreditCard, { onClickRemove: onClickRemove, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data })) : (jsxRuntime.jsx(EmptyCard, { onClick: function () { return setShowModal(true); } })), jsxRuntime.jsx(antd.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: jsxRuntime.jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method" }) }, { children: jsxRuntime.jsx(PaymentForm, { isSaving: isSaving, onFail: function (error) {
-                        handleAllErrorFormats(error);
-                        setIsSaving(false);
-                    }, onPaymentSuccess: function () {
-                        onSuccess();
-                        setIsSaving(false);
-                    }, setIsSaving: setIsSaving }) }))] }));
+    }
+    return (jsxRuntime.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 (jsxRuntime.jsx(PaymentMethodContext.Provider, __assign({ value: { footer: footer, processPublicUrl: processPublicUrl } }, { children: jsxRuntime.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*/, common.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 ? common.SLATE_600 : _b;
+    return (jsxRuntime.jsxs("svg", __assign({ className: className, fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M8 11.3333V2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M4 7.33301L8 11.333L12 7.33301", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.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 = reactQuery.useQueryClient();
-    var token = React.useContext(BunnyContext).token;
-    var form = antd.Form.useForm()[0];
-    // Mutations
-    var _b = reactQuery.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 (jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Street" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "City" }) })), jsxRuntime.jsx(FormBillingState, { form: form }), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsxRuntime.jsx(antd.Select, { options: common.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());
-                    } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Zip" }) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
-};
-var FormBillingState = function (_a) {
-    _a.form;
-    var billingCountry = antd.Form.useWatch("billingCountry");
-    var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
-    return (jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "State" }) })));
-};
+var TransactionsListContext = React.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 = React.useContext(BunnyContext).darkMode;
+    var downloadTransactionLink = React.useContext(TransactionsListContext).downloadTransactionLink;
+    var downloadFile = common.useDownloadFile();
     var isMobile = common.useIsMobile();
-    var _b = React.useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token;
-    var paymentRequired = getQuoteAmountDue(quote) > 0;
-    var checkoutMutation = reactQuery.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 (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { isSaving: isSaving, onFail: onFail, onPaymentSuccess: handleCheckout, quote: quote, setIsSaving: setIsSaving })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "shadow-padding-x" : "") }, { children: [jsxRuntime.jsx(antd.Button, __assign({ disabled: isSaving, onClick: function () {
-                            setIsSaving(true);
-                            handleCheckout({});
-                        }, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsxRuntime.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 (jsxRuntime.jsx("div", __assign({ onClick: function (e) {
+            e.stopPropagation();
+            downloadFile(downloadLink, token);
+        } }, { children: jsxRuntime.jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "show-on-hover"), color: darkMode ? common.WHITE : common.SLATE_600 }) })));
 };
 
-var useHasTaxPlugin = function (_a) {
-    var subdomain = _a.subdomain, token = _a.token;
-    var plugins = common.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 = antd.Typography.Text;
+var TransactionsEmptyState = function () {
+    var noTransactionsMessage = React.useContext(TransactionsListContext).noTransactionsMessage;
+    return (jsxRuntime.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*/, common.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 = recoil.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__default["default"](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 = common.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 = React.useContext(BunnyContext).subdomain;
-    var _d = React.useState(false), isSaving = _d[0], setIsSaving = _d[1];
-    var hasTaxPlugin = useHasTaxPlugin({ subdomain: subdomain || "", token: token });
-    var queryClient = reactQuery.useQueryClient();
-    var quotePreviewData = recoil.useRecoilValue(planPickerQuoteDataState);
-    // Queries
-    var _e = reactQuery.useQuery({
-        queryKey: ["getTaxationRequiredAccountFields", token],
-        queryFn: function () { return common.getTaxationRequiredAccountFields({ token: token }); },
-        enabled: Boolean(quote),
-        staleTime: 0,
-    }), taxationRequiredAccountFields = _e.data, isLoadingTaxationRequiredAccountFields = _e.isLoading;
-    var _f = reactQuery.useQuery({
-        queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
-        queryFn: function () {
-            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && common.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;
-    reactQuery.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 = antd.Typography.Text;
+var TransactionsListDesktop = function (_a) {
+    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
+    var columns = React.useContext(TransactionsListContext).columns;
+    var _b = React.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 jsxRuntime.jsx(TransactionsEmptyState, {});
+    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
+        var _a;
+        var isClickable = onTransactionClick !== undefined;
+        return (jsxRuntime.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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt }) })), jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(Text$8, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })), showState && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$8, { children: common.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 (jsxRuntime.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: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsxRuntime.jsx(CloseOutlined$1, { className: "text-base shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.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)) && (jsxRuntime.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)) && (jsxRuntime.jsx(antd.Divider, { className: "h-full", type: "vertical" })), invoice ? (jsxRuntime.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 ? (jsxRuntime.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 })) : (jsxRuntime.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*/, common.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 = antd.Typography.Text;
+var TransactionsListMobile = function (_a) {
+    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
+    var columns = React.useContext(TransactionsListContext).columns;
+    var _b = React.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 jsxRuntime.jsx(TransactionsEmptyState, {});
+    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
+        var isClickable = transaction.kind === "INVOICE";
+        return (jsxRuntime.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: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$7, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsxRuntime.jsx(Text$7, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$7, { children: common.Misc.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.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*/, common.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 reactQuery.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 ? [
+        common.TransactionKind.INVOICE,
+        common.TransactionKind.PAYMENT,
+        common.TransactionKind.REFUND,
+        common.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 (jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient }, { children: jsxRuntime.jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsxRuntime.jsx(TransactionsWrapper, {}) })) })));
+}
+function TransactionsWrapper() {
+    var _a = React.useContext(TransactionsListContext), kindsToShow = _a.kindsToShow, filterFromContext = _a.filter;
+    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
+    // Local state
+    var _c = React.useState(""), search = _c[0], setSearch = _c[1];
+    var filter = filterFromContext ||
+        (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
+    // Queries
+    var data = reactQuery.useQuery({
+        queryKey: ["transactions", token, filter],
+        queryFn: function () { return getTransactions(filter, token, subdomain, kindsToShow); },
+        placeholderData: reactQuery.keepPreviousData,
+    }).data;
+    return (jsxRuntime.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 = React.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 = React.useContext(TransactionsListContext).columns;
+    var darkMode = React.useContext(BunnyContext).darkMode;
+    // Local state
+    var _c = React.useState(null), selectedTransaction = _c[0], setSelectedTransaction = _c[1];
+    var _d = React.useState(false), drawerOpen = _d[0], setDrawerOpen = _d[1];
+    // Hooks
+    var isMobile = common.useIsMobile();
+    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*/, common.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 (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: accountId && (jsxRuntime.jsx(PaymentContext.Provider, __assign({ value: { accountId: accountId, displayPayButtonNameAnyways: true } }, { children: jsxRuntime.jsx(PaymentForm, { isSaving: paying, setIsSaving: setIsPaying, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSaveSuccess }) }))) })) : (jsxRuntime.jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
-}
-function InitialSignupForm(_a) {
-    var onSubmit = _a.onSubmit, submitting = _a.submitting;
-    var _b = React.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 (jsxRuntime.jsxs(antd.Form, __assign({ className: "flex w-1/2 flex-col justify-between h-full", onFinish: function () { return onSubmit(formData); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [{ required: true, message: "Please input your first name!" }], initialValue: formData.firstName }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name", value: formData.firstName, onChange: function (e) {
-                                handleInputChange(e);
-                                setFormData(__assign(__assign({}, formData), { firstName: e.target.value }));
-                            } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [{ required: true, message: "Please input your last name!" }], initialValue: formData.lastName }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name", value: formData.lastName, onChange: function (e) {
-                                handleInputChange(e);
-                                setFormData(__assign(__assign({}, formData), { lastName: e.target.value }));
-                            } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [
-                            { required: true, message: "Please input your email!" },
-                            { type: "email", message: "Please enter a valid email!" },
-                        ], initialValue: formData.email }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email", value: formData.email, onChange: function (e) {
-                                handleInputChange(e);
-                                setFormData(__assign(__assign({}, formData), { email: e.target.value }));
-                            } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [
-                            { required: true, message: "Please input your account name!" },
-                        ], initialValue: formData.accountName }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Account name", value: formData.accountName, onChange: function (e) {
-                                handleInputChange(e);
-                                setFormData(__assign(__assign({}, formData), { accountName: e.target.value }));
-                            } }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.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 (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: title || (showTitle ? "Past transactions" : undefined) }, { children: showSearchBar && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
+                            ? searchBarClassName
+                            : "border border-slate-200", onChange: function (e) {
+                            if (isNaN(Number(e.target.value))) {
+                                return;
+                            }
+                            onSearchValueChanged(e.target.value);
+                        }, prefix: jsxRuntime.jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
+                            minWidth: "300px",
+                        }, value: search }) })) })), jsxRuntime.jsx(PageContent, __assign({ className: "flex w-full shadow-padding-xb ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: jsxRuntime.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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: TransactionsListMobile({
+                            transactions: transactions,
+                            onTransactionClick: handleTransactionClick,
+                        }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: TransactionsListDesktop({
+                            transactions: transactions,
+                            onTransactionClick: handleTransactionClick,
+                        }) })) })) })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsxRuntime.jsx(antd.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" ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxRuntime.jsxs(antd.Card, __assign({ className: "shadow-md" }, { children: [jsxRuntime.jsx(antd.Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Amount:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: common.Misc.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Description:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Kind:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "State:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
 }
 
-var Title = antd.Typography.Title, Text$a = antd.Typography.Text;
-function PaymentSuccessDisplay(_a) {
-    var className = _a.className, amountPaid = _a.amountPaid, style = _a.style, returnUrl = _a.returnUrl;
-    var window = React.useContext(BunnyContext).window;
-    var companyName = common.useCurrentUserData().companyName;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", common.Misc.formatCurrency(amountPaid, "USD"), " successful"] })), returnUrl && (jsxRuntime.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 = React.useContext(BunnyContext).subdomain;
+    var _j = React.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(jsxRuntime.jsx(Quote, { id: quote === null || quote === void 0 ? void 0 : quote.transactionableId }));
+        }
+    }
+    return (jsxRuntime.jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsxRuntime.jsx(QuotesWrapper, {}) })));
 }
-
-var Text$9 = antd.Typography.Text;
-function PriceListDisplay(_a) {
-    var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
-    if (!priceListData)
+function QuotesWrapper() {
+    var _a = React.useContext(BunnyContext), token = _a.token, subdomain = _a.subdomain;
+    var filterFromContext = React.useContext(TransactionsListContext).filter;
+    // Local state
+    var _b = React.useState(""), search = _b[0], setSearch = _b[1];
+    var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : "");
+    // Queries
+    var data = reactQuery.useQuery({
+        queryKey: ["quotes", token, filter],
+        queryFn: function () { return getQuotes({ token: token, subdomain: subdomain, filter: filter }); },
+        placeholderData: reactQuery.keepPreviousData,
+    }).data;
+    if (data === undefined)
         return null;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsx(Text$9, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$9, __assign({ className: "font-bold text-xl" }, { children: [common.Misc.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsxs(Text$9, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.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 (jsxRuntime.jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search, title: "Past quotes" }));
 }
 
-var BunnyFooterIcon = function (_a) {
-    var color = _a.color;
-    return (jsxRuntime.jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
+var DrawerHeader = function (_a) {
+    var description = _a.description, onClose = _a.onClose, title = _a.title;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-xl" }, { children: title })), jsxRuntime.jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsxRuntime.jsx(CloseOutlined$1, {}) }))] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
 };
 
-var Footer = function (_a) {
-    var className = _a.className;
-    var _b = common.useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
-    var window = React.useContext(BunnyContext).window;
-    var isMobile = useIsMobile(window);
-    var quotePreviewData = recoil.useRecoilValue(planPickerQuoteDataState);
-    var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
-    if (selectedPriceList && isMobile)
-        return null;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(className, " ").concat(isMobile ? "flex-col gap-2 grow" : "") }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
-};
-var BunnyMarketingLink = function () {
-    var _a = React.useState(false), isHovered = _a[0], setIsHovered = _a[1];
-    var window = React.useContext(BunnyContext).window;
-    var isMobile = useIsMobile(window);
-    return (jsxRuntime.jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsxRuntime.jsx("div", __assign({ style: { paddingTop: "5px" } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
+var LargeCardIcon = function () {
+    return (jsxRuntime.jsx("svg", __assign({ width: "72", height: "56", viewBox: "0 0 72 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.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__default["default"].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"])), common.SLATE_400, common.SLATE_500);
-var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), common.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*/, common.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 (jsxRuntime.jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
-var showErrorNotification = common.NotificationUtils.useErrorNotification();
-function Signup(_a) {
-    var priceListCode = _a.priceListCode, returnUrl = _a.returnUrl;
-    // Hooks
-    var _b = React.useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token, window = _b.window;
-    reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.currentUserKey,
-        queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
-    });
-    var isMobile = useIsMobile(window);
-    var topNavImageUrl = React.useContext(BrandContext).topNavImageUrl;
-    var entityId = common.useCurrentUserData().entityId;
-    var _c = React.useState(undefined), quote = _c[0], setQuote = _c[1];
-    var _d = React.useState(undefined), accountId = _d[0], setAccountId = _d[1];
-    var _e = React.useState(undefined), quoteId = _e[0], setQuoteId = _e[1];
-    var _f = React.useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
-    var _g = React.useState(undefined), formData = _g[0], setFormData = _g[1];
-    var _h = React.useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
-    var _j = React.useState(false), paying = _j[0], setIsPaying = _j[1];
-    var _k = React.useState(false), purchaseSucceeded = _k[0], setPurchaseSucceeded = _k[1];
-    // Queries
-    var priceListData = reactQuery.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 (jsxRuntime.jsx(Card, __assign({ className: "p-4 flex flex-col" }, { children: purchaseSucceeded ? (jsxRuntime.jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-center" }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "mx-8" }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full" }) })), jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center my-12" }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })));
-    }
-    else {
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Card, __assign({ className: "p-4 flex flex-col w-screen h-screen" }, { children: purchaseSucceeded ? (jsxRuntime.jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col w-1/2 items-center" }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "my-4" }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full", type: "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "flex w-1/2 items-center justify-center my-12" }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })), jsxRuntime.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 = recoil.atom({
-    key: "pageContentRefState",
-    default: undefined,
-});
+var PaymentMethodContext = React.createContext({});
 
-var PageContent = function (_a) {
+var Card = function (_a) {
     var children = _a.children, className = _a.className, style = _a.style;
-    var pageContentRef = React.useRef(null);
-    var setPageContentRef = recoil.useSetRecoilState(pageContentRefState);
-    React.useEffect(function () {
-        setPageContentRef(pageContentRef === null || pageContentRef === void 0 ? void 0 : pageContentRef.current);
-    }, [pageContentRef, setPageContentRef]);
-    return (jsxRuntime.jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
-};
-
-var Text$8 = antd.Typography.Text;
-var PageHeaderWithActions = function (_a) {
-    var children = _a.children, title = _a.title;
-    var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsxRuntime.jsx(PageSubTitle, { title: title }), children] })));
-};
-var PageSubTitle = function (_a) {
-    var title = _a.title;
-    var secondaryColor = React.useContext(BrandContext).secondaryColor;
     var darkMode = React.useContext(BunnyContext).darkMode;
-    return (jsxRuntime.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 jsxRuntime.jsx(antd.Tag, __assign({ color: getColor(state) }, { children: lodash.capitalize(lodash.startCase(state)) }));
-};
-var getColor = function (state) {
-    switch (state) {
-        case common.FrontendTransaction.TransactionState.not_due:
-            return "yellow";
-        case common.FrontendTransaction.TransactionState.voided:
-            return "black";
-        case common.FrontendTransaction.TransactionState.ready:
-            return "orange";
-        case common.FrontendTransaction.TransactionState.preparing:
-            return "purple";
-        case common.FrontendTransaction.TransactionState.unapplied:
-        case common.FrontendTransaction.TransactionState.partially_applied:
-        case common.FrontendTransaction.TransactionState.applied:
-            return "blue";
-        case common.FrontendTransaction.TransactionState.due:
-        case common.FrontendTransaction.TransactionState.unpaid:
-            return "orange";
-        case common.FrontendTransaction.TransactionState.failed:
-            return "red";
-        case common.FrontendTransaction.TransactionState.paid:
-            return "green";
-        default:
-            return "blue";
-    }
+    return (jsxRuntime.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__default["default"].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"); }, common.SLATE_600);
-var templateObject_1$3;
-
-var Text$7 = antd.Typography.Text;
-var TransactionDate = function (_a) {
-    var date = _a.date;
-    return jsxRuntime.jsx(Text$7, __assign({ className: "text-sm" }, { children: common.Misc.formatDate(date) }));
+var Text$6 = antd.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 = common.useIsMobile();
+    var processPublicUrl = React.useContext(PaymentMethodContext).processPublicUrl;
+    return (jsxRuntime.jsxs(Card, __assign({ className: "shadow-md m-0" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.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) && (jsxRuntime.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)) })), jsxRuntime.jsx(Text$6, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.description })] })), jsxRuntime.jsx(antd.Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(antd.Divider, {}), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(CardAttribute, { title: "EXPIRATION", value: dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).format("MM/YY") }), isMobile && (jsxRuntime.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 (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.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 = common.useIsMobile();
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6 ".concat(isMobile ? "justify-center mt-4" : "") }, { children: [jsxRuntime.jsx(antd.Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove payment method" })) })), jsxRuntime.jsx(antd.Divider, { style: { height: "24px" }, type: "vertical" }), jsxRuntime.jsx(antd.Button, __assign({ onClick: onClickUpdate, type: "primary" }, { children: "Update" }))] })));
 };
-var TransactionRowTitle = function (_a) {
-    var transaction = _a.transaction;
-    if (!isInvoice(transaction) && !isQuote(transaction)) {
-        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    }
-    return (jsxRuntime.jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
+var EmptyCard = function (_a) {
+    var onClick = _a.onClick;
+    var brandColor = React.useContext(BrandContext).brandColor;
+    return (jsxRuntime.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: [jsxRuntime.jsx(LargeCardIcon, {}), jsxRuntime.jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsxRuntime.jsx(antd.Button, __assign({ type: "link" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsxRuntime.jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
 };
-
-// TODO: delete
-var ArrowDownToLine = function (_a) {
-    var className = _a.className, _b = _a.color, color = _b === void 0 ? common.SLATE_600 : _b;
-    return (jsxRuntime.jsxs("svg", __assign({ className: className, fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M8 11.3333V2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M4 7.33301L8 11.333L12 7.33301", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.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 = React.createContext({});
-
-var TransactionDownload = function (_a) {
-    var transaction = _a.transaction, token = _a.token, subdomain = _a.subdomain;
-    var darkMode = React.useContext(BunnyContext).darkMode;
-    var downloadTransactionLink = React.useContext(TransactionsListContext).downloadTransactionLink;
-    var downloadFile = common.useDownloadFile();
+var ActualPaymentMethod = function () {
+    var _a = React.useContext(BunnyContext), token = _a.token, subdomain = _a.subdomain, graphQLClient = _a.graphQLClient;
+    var accountId = React.useContext(PaymentContext).accountId;
+    // Hooks
+    var queryClient = reactQuery.useQueryClient();
+    var paymentPlugins = common.usePaymentPlugins({ subdomain: subdomain, token: token }).paymentPlugins;
+    var showErrorNotification = common.NotificationUtils.useErrorNotification();
+    var showSuccessNotification = common.NotificationUtils.useSuccessNotification();
+    var handleAllErrorFormats = common.NotificationUtils.useAllErrorFormats(function () {
+        console.log("Navigation in PaymentMethod.tsx useAllErrorFormats not implemented");
+    });
     var isMobile = common.useIsMobile();
-    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 (jsxRuntime.jsx("div", __assign({ onClick: function (e) {
-            e.stopPropagation();
-            downloadFile(downloadLink, token);
-        } }, { children: jsxRuntime.jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "show-on-hover"), color: darkMode ? common.WHITE : common.SLATE_600 }) })));
-};
-
-var Text$6 = antd.Typography.Text;
-var TransactionsEmptyState = function () {
-    var noTransactionsMessage = React.useContext(TransactionsListContext).noTransactionsMessage;
-    return (jsxRuntime.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 = React.useState(false), showModal = _b[0], setShowModal = _b[1];
+    var _c = React.useState(false), isSaving = _c[0], setIsSaving = _c[1];
+    // Queries
+    reactQuery.useQuery({
+        queryKey: common.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) {
+            common.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(common.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: common.QueryKeyFactory.default.accountPaymentMethodKey,
+        });
+        setShowModal(false);
+        showSuccessNotification("Your payment method has been saved");
+    };
+    if (data === undefined)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [data ? (jsxRuntime.jsx(CreditCard, { onClickRemove: onClickRemove, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data })) : (jsxRuntime.jsx(EmptyCard, { onClick: function () { return setShowModal(true); } })), jsxRuntime.jsx(antd.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: jsxRuntime.jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method" }) }, { children: jsxRuntime.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__default["default"](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 (jsxRuntime.jsx(PaymentMethodContext.Provider, __assign({ value: { footer: footer, processPublicUrl: processPublicUrl } }, { children: jsxRuntime.jsx(ActualPaymentMethod, {}) })));
+}
 
-var Text$5 = antd.Typography.Text;
-var TransactionsListDesktop = function (_a) {
-    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
-    var columns = React.useContext(TransactionsListContext).columns;
-    var _b = React.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 jsxRuntime.jsx(TransactionsEmptyState, {});
-    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
-        var _a;
-        var isClickable = onTransactionClick !== undefined;
-        return (jsxRuntime.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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt }) })), jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(Text$5, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })), showState && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$5, { children: common.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*/, common.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 = antd.Typography.Text;
-var TransactionsListMobile = function (_a) {
-    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
-    var columns = React.useContext(TransactionsListContext).columns;
-    var _b = React.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 jsxRuntime.jsx(TransactionsEmptyState, {});
-    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
-        var isClickable = transaction.kind === "INVOICE";
-        return (jsxRuntime.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: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$4, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsxRuntime.jsx(Text$4, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$4, { children: common.Misc.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.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 = reactQuery.useQueryClient();
+    var token = React.useContext(BunnyContext).token;
+    var form = antd.Form.useForm()[0];
+    // Mutations
+    var _b = reactQuery.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 (jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Street" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "City" }) })), jsxRuntime.jsx(FormBillingState, { form: form }), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsxRuntime.jsx(antd.Select, { options: common.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());
+                    } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Zip" }) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
+};
+var FormBillingState = function (_a) {
+    _a.form;
+    var billingCountry = antd.Form.useWatch("billingCountry");
+    var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
+    return (jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "State" }) })));
 };
 
-// Create a client
-var queryClient = new reactQuery.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 ? [
-        common.TransactionKind.INVOICE,
-        common.TransactionKind.PAYMENT,
-        common.TransactionKind.REFUND,
-        common.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 = common.useIsMobile();
+    var _b = React.useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token;
+    var paymentRequired = getQuoteAmountDue(quote) > 0;
+    var checkoutMutation = reactQuery.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 (jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient }, { children: jsxRuntime.jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsxRuntime.jsx(TransactionsWrapper, {}) })) })));
+    if (taxationRequiredAccountFields)
+        return (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { isSaving: isSaving, onFail: onFail, onPaymentSuccess: handleCheckout, quote: quote, setIsSaving: setIsSaving })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "shadow-padding-x" : "") }, { children: [jsxRuntime.jsx(antd.Button, __assign({ disabled: isSaving, onClick: function () {
+                            setIsSaving(true);
+                            handleCheckout({});
+                        }, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsxRuntime.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 = common.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*/, common.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 = recoil.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 = common.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 = React.useContext(BunnyContext).subdomain;
+    var _d = React.useState(false), isSaving = _d[0], setIsSaving = _d[1];
+    var hasTaxPlugin = useHasTaxPlugin({ subdomain: subdomain || "", token: token });
+    var queryClient = reactQuery.useQueryClient();
+    var quotePreviewData = recoil.useRecoilValue(planPickerQuoteDataState);
+    // Queries
+    var _e = reactQuery.useQuery({
+        queryKey: ["getTaxationRequiredAccountFields", token],
+        queryFn: function () { return common.getTaxationRequiredAccountFields({ token: token }); },
+        enabled: Boolean(quote),
+        staleTime: 0,
+    }), taxationRequiredAccountFields = _e.data, isLoadingTaxationRequiredAccountFields = _e.isLoading;
+    var _f = reactQuery.useQuery({
+        queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
+        queryFn: function () {
+            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && common.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;
+    reactQuery.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 (jsxRuntime.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: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsxRuntime.jsx(CloseOutlined$1, { className: "text-base shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.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)) && (jsxRuntime.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)) && (jsxRuntime.jsx(antd.Divider, { className: "h-full", type: "vertical" })), invoice ? (jsxRuntime.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 ? (jsxRuntime.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 })) : (jsxRuntime.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*/, common.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*/, common.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*/, common.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 (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: accountId && (jsxRuntime.jsx(PaymentContext.Provider, __assign({ value: { accountId: accountId, displayPayButtonNameAnyways: true } }, { children: jsxRuntime.jsx(PaymentForm, { isSaving: paying, setIsSaving: setIsPaying, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSaveSuccess }) }))) })) : (jsxRuntime.jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
+}
+function InitialSignupForm(_a) {
+    var onSubmit = _a.onSubmit, submitting = _a.submitting;
+    var _b = React.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 (jsxRuntime.jsxs(antd.Form, __assign({ className: "flex w-1/2 flex-col justify-between h-full", onFinish: function () { return onSubmit(formData); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [{ required: true, message: "Please input your first name!" }], initialValue: formData.firstName }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name", value: formData.firstName, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { firstName: e.target.value }));
+                            } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [{ required: true, message: "Please input your last name!" }], initialValue: formData.lastName }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name", value: formData.lastName, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { lastName: e.target.value }));
+                            } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [
+                            { required: true, message: "Please input your email!" },
+                            { type: "email", message: "Please enter a valid email!" },
+                        ], initialValue: formData.email }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email", value: formData.email, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { email: e.target.value }));
+                            } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [
+                            { required: true, message: "Please input your account name!" },
+                        ], initialValue: formData.accountName }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Account name", value: formData.accountName, onChange: function (e) {
+                                handleInputChange(e);
+                                setFormData(__assign(__assign({}, formData), { accountName: e.target.value }));
+                            } }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", htmlType: "submit", loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
+}
+
+var Title = antd.Typography.Title, Text$5 = antd.Typography.Text;
+function PaymentSuccessDisplay(_a) {
+    var className = _a.className, amountPaid = _a.amountPaid, style = _a.style, returnUrl = _a.returnUrl;
+    var window = React.useContext(BunnyContext).window;
+    var companyName = common.useCurrentUserData().companyName;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", common.Misc.formatCurrency(amountPaid, "USD"), " successful"] })), returnUrl && (jsxRuntime.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 = antd.Typography.Text;
+function PriceListDisplay(_a) {
+    var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
+    if (!priceListData)
+        return null;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsx(Text$4, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$4, __assign({ className: "font-bold text-xl" }, { children: [common.Misc.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsxs(Text$4, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.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 = React.useContext(TransactionsListContext), kindsToShow = _a.kindsToShow, filterFromContext = _a.filter;
-    var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
-    // Local state
-    var _c = React.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 (jsxRuntime.jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
+};
+
+var Footer = function (_a) {
+    var className = _a.className;
+    var _b = common.useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
+    var window = React.useContext(BunnyContext).window;
+    var isMobile = useIsMobile(window);
+    var quotePreviewData = recoil.useRecoilValue(planPickerQuoteDataState);
+    var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
+    if (selectedPriceList && isMobile)
+        return null;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(className, " ").concat(isMobile ? "flex-col gap-2 grow" : "") }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
+};
+var BunnyMarketingLink = function () {
+    var _a = React.useState(false), isHovered = _a[0], setIsHovered = _a[1];
+    var window = React.useContext(BunnyContext).window;
+    var isMobile = useIsMobile(window);
+    return (jsxRuntime.jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsxRuntime.jsx("div", __assign({ style: { paddingTop: "5px" } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
+};
+var StyedLink = styled__default["default"].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"])), common.SLATE_400, common.SLATE_500);
+var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), common.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*/, common.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 = common.NotificationUtils.useErrorNotification();
+function Signup(_a) {
+    var priceListCode = _a.priceListCode, returnUrl = _a.returnUrl;
+    // Hooks
+    var _b = React.useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token, window = _b.window;
+    reactQuery.useQuery({
+        queryKey: common.QueryKeyFactory.default.currentUserKey,
+        queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
+    });
+    var isMobile = useIsMobile(window);
+    var topNavImageUrl = React.useContext(BrandContext).topNavImageUrl;
+    var entityId = common.useCurrentUserData().entityId;
+    var _c = React.useState(undefined), quote = _c[0], setQuote = _c[1];
+    var _d = React.useState(undefined), accountId = _d[0], setAccountId = _d[1];
+    var _e = React.useState(undefined), quoteId = _e[0], setQuoteId = _e[1];
+    var _f = React.useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
+    var _g = React.useState(undefined), formData = _g[0], setFormData = _g[1];
+    var _h = React.useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
+    var _j = React.useState(false), paying = _j[0], setIsPaying = _j[1];
+    var _k = React.useState(false), purchaseSucceeded = _k[0], setPurchaseSucceeded = _k[1];
     // Queries
-    var data = reactQuery.useQuery({
-        queryKey: ["transactions", token, filter],
-        queryFn: function () { return getTransactions(filter, token, subdomain, kindsToShow); },
-        placeholderData: reactQuery.keepPreviousData,
+    var priceListData = reactQuery.useQuery({
+        queryKey: ["priceList", priceListCode],
+        queryFn: function () { return getPriceList({ token: token, subdomain: subdomain, code: priceListCode }); },
     }).data;
-    return (jsxRuntime.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 = React.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 = React.useContext(TransactionsListContext).columns;
-    var darkMode = React.useContext(BunnyContext).darkMode;
-    // Local state
-    var _c = React.useState(null), selectedTransaction = _c[0], setSelectedTransaction = _c[1];
-    var _d = React.useState(false), drawerOpen = _d[0], setDrawerOpen = _d[1];
-    // Hooks
-    var isMobile = common.useIsMobile();
-    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 (jsxRuntime.jsx(Card, __assign({ className: "p-4 flex flex-col" }, { children: purchaseSucceeded ? (jsxRuntime.jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-center" }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "mx-8" }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full" }) })), jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center my-12" }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })));
+    }
+    else {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Card, __assign({ className: "p-4 flex flex-col w-screen h-screen" }, { children: purchaseSucceeded ? (jsxRuntime.jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col w-1/2 items-center" }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "my-4" }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full", type: "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "flex w-1/2 items-center justify-center my-12" }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })), jsxRuntime.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 (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: title || (showTitle ? "Past transactions" : undefined) }, { children: showSearchBar && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
-                            ? searchBarClassName
-                            : "border border-slate-200", onChange: function (e) {
-                            if (isNaN(Number(e.target.value))) {
-                                return;
-                            }
-                            onSearchValueChanged(e.target.value);
-                        }, prefix: jsxRuntime.jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
-                            minWidth: "300px",
-                        }, value: search }) })) })), jsxRuntime.jsx(PageContent, __assign({ className: "flex w-full shadow-padding-xb ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: jsxRuntime.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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: TransactionsListMobile({
-                            transactions: transactions,
-                            onTransactionClick: handleTransactionClick,
-                        }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: TransactionsListDesktop({
-                            transactions: transactions,
-                            onTransactionClick: handleTransactionClick,
-                        }) })) })) })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsxRuntime.jsx(antd.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" ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxRuntime.jsxs(antd.Card, __assign({ className: "shadow-md" }, { children: [jsxRuntime.jsx(antd.Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Amount:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: common.Misc.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Description:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Kind:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "State:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
 }
 
 var updatingChargeQuantityIdState = recoil.atom({
@@ -5543,6 +5618,7 @@ exports.Checkout = Checkout;
 exports.Invoice = Invoice;
 exports.PaymentMethod = PaymentMethod;
 exports.Quote = Quote;
+exports.Quotes = Quotes;
 exports.Signup = Signup;
 exports.Subscriptions = Subscriptions;
 exports.Transactions = Transactions;