@bunnyapp/components 1.0.11 → 1.0.12

package/dist/esm/index.js

@@ -1,19 +1,19 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useContext, useEffect, useState, useMemo, useRef } from 'react';
+import React__default, { createContext, useContext, useEffect, useState, useMemo, useCallback, useRef } from 'react';
 import { Markup } from 'interweave';
-import { ConfigProvider, Button, Typography, Checkbox, Input, Divider, Modal, Form, Tag, Drawer, Card as Card$1, Popconfirm, Select, Image, Dropdown } from 'antd';
+import { ConfigProvider, Button, Typography, Tag, Divider, Popconfirm, Input, Checkbox, Collapse, Modal, Form, Drawer, Card as Card$1, Select, Image, Dropdown } from 'antd';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, QueryKeyFactory, useErrorNotification, invokePlugin, formatCurrency, GRAY_500, GRAY_200, CHARCOAL_GRAY, StringUtils, getPlugins, useSuccessNotification, useAllErrorFormats, getFormattedInvoice, PAYABLE_INVOICE_STATES, DOCUMENT_NAME as DOCUMENT_NAME$1, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
-import { QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient, keepPreviousData } from '@tanstack/react-query';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, QueryKeyFactory, getPlugins, invokePlugin, useErrorNotification, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, useAllErrorFormats, getFormattedInvoice, PAYABLE_INVOICE_STATES, DOCUMENT_NAME as DOCUMENT_NAME$1, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, StringUtils, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
+import { QueryClient, QueryClientProvider, useQuery, useQueryClient, useMutation, keepPreviousData } from '@tanstack/react-query';
 import theme from 'antd/lib/theme';
 import { RecoilRoot } from 'recoil';
 import { GraphQLClient } from 'graphql-request';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
-import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
-import { loadStripe } from '@stripe/stripe-js/pure';
 import { capitalize, startCase, cloneDeep, omit } from 'lodash';
 import { BarChart, ResponsiveContainer, XAxis, Tooltip, Bar, Rectangle } from 'recharts';
+import { useElements, useStripe, Elements, PaymentElement } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js/pure';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -42,7 +42,7 @@ function styleInject(css, ref) {
   }
 }
 
-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.rotate-45,\n.transform {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n}\n.shadow,\n.shadow-md {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n}\n.visible {\n  visibility: visible;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.z-50 {\n  z-index: 50;\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.m-0 {\n  margin: 0px;\n}\n.mx-8 {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n.my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\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-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-full {\n  height: 100%;\n}\n.h-screen {\n  height: 100vh;\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-full {\n  width: 100%;\n}\n.w-screen {\n  width: 100vw;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.grow {\n  flex-grow: 1;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.rotate-45 {\n  --tw-rotate: 45deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n  cursor: pointer;\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.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-center {\n  align-items: center;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-nowrap {\n  text-wrap: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-gray-400 {\n  --tw-border-opacity: 1;\n  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n  padding: 0px;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\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-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.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.pl-0 {\n  padding-left: 0px;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\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.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.capitalize {\n  text-transform: capitalize;\n}\n.text-emerald-600 {\n  --tw-text-opacity: 1;\n  color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n  --tw-text-opacity: 1;\n  color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n  --tw-text-opacity: 1;\n  color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n  --tw-text-opacity: 1;\n  color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.font-light {\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.font-medium {\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.font-bold {\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@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex;\n  }\n  .sm\\:hidden {\n    display: none;\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";
+var css_248z = ".ant-collapse-header {\n  cursor: default !important;\n  padding: 0 !important;\n}\n.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-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.rotate-45,\n.transform {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n}\n.visible {\n  visibility: visible;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.z-50 {\n  z-index: 50;\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.m-0 {\n  margin: 0px;\n}\n.mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\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.mb-4 {\n  margin-bottom: 1rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\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-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-full {\n  height: 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-full {\n  width: 100%;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.grow {\n  flex-grow: 1;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.rotate-45 {\n  --tw-rotate: 45deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n  cursor: pointer;\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.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-center {\n  align-items: center;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-0 {\n  gap: 0px;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-nowrap {\n  text-wrap: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-gray-400 {\n  --tw-border-opacity: 1;\n  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n  --tw-border-opacity: 1;\n  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n  padding: 0px;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-8 {\n  padding: 2rem;\n}\n.px-0 {\n  padding-left: 0px;\n  padding-right: 0px;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\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-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.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.pl-0 {\n  padding-left: 0px;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-12 {\n  padding-top: 3rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\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.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.capitalize {\n  text-transform: capitalize;\n}\n.text-emerald-600 {\n  --tw-text-opacity: 1;\n  color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n  --tw-text-opacity: 1;\n  color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n  --tw-text-opacity: 1;\n  color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n  --tw-text-opacity: 1;\n  color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.font-light {\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.font-medium {\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.font-bold {\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@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex;\n  }\n  .sm\\:hidden {\n    display: none;\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);
 
 /******************************************************************************
@@ -1466,11 +1466,11 @@ var BankOutlined = function BankOutlined(props, ref) {
 };
 
 /**![bank](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTg5NCA0NjJjMzAuOSAwIDQzLjgtMzkuNyAxOC43LTU4TDUzMC44IDEyNi4yYTMxLjgxIDMxLjgxIDAgMDAtMzcuNiAwTDExMS4zIDQwNGMtMjUuMSAxOC4yLTEyLjIgNTggMTguOCA1OEgxOTJ2Mzc0aC03MmMtNC40IDAtOCAzLjYtOCA4djUyYzAgNC40IDMuNiA4IDggOGg3ODRjNC40IDAgOC0zLjYgOC04di01MmMwLTQuNC0zLjYtOC04LThoLTcyVjQ2Mmg2MnpNNTEyIDE5Ni43bDI3MS4xIDE5Ny4ySDI0MC45TDUxMiAxOTYuN3pNMjY0IDQ2MmgxMTd2Mzc0SDI2NFY0NjJ6bTE4OSAwaDExN3YzNzRINDUzVjQ2MnptMzA3IDM3NEg2NDJWNDYyaDExOHYzNzR6IiAvPjwvc3ZnPg==) */
-var RefIcon$4 = /*#__PURE__*/React.forwardRef(BankOutlined);
+var RefIcon$5 = /*#__PURE__*/React.forwardRef(BankOutlined);
 if (process.env.NODE_ENV !== 'production') {
-  RefIcon$4.displayName = 'BankOutlined';
+  RefIcon$5.displayName = 'BankOutlined';
 }
-var BankOutlined$1 = RefIcon$4;
+var BankOutlined$1 = RefIcon$5;
 
 // This icon file is generated automatically.
 var CheckCircleFilled$2 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" } }] }, "name": "check-circle", "theme": "filled" };
@@ -1484,11 +1484,11 @@ var CheckCircleFilled = function CheckCircleFilled(props, ref) {
 };
 
 /**![check-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0xOTMuNSAzMDEuN2wtMjEwLjYgMjkyYTMxLjggMzEuOCAwIDAxLTUxLjcgMEwzMTguNSA0ODQuOWMtMy44LTUuMyAwLTEyLjcgNi41LTEyLjdoNDYuOWMxMC4yIDAgMTkuOSA0LjkgMjUuOSAxMy4zbDcxLjIgOTguOCAxNTcuMi0yMThjNi04LjMgMTUuNi0xMy4zIDI1LjktMTMuM0g2OTljNi41IDAgMTAuMyA3LjQgNi41IDEyLjd6IiAvPjwvc3ZnPg==) */
-var RefIcon$3 = /*#__PURE__*/React.forwardRef(CheckCircleFilled);
+var RefIcon$4 = /*#__PURE__*/React.forwardRef(CheckCircleFilled);
 if (process.env.NODE_ENV !== 'production') {
-  RefIcon$3.displayName = 'CheckCircleFilled';
+  RefIcon$4.displayName = 'CheckCircleFilled';
 }
-var CheckCircleFilled$1 = RefIcon$3;
+var CheckCircleFilled$1 = RefIcon$4;
 
 // This icon file is generated automatically.
 var CloseOutlined$2 = { "icon": { "tag": "svg", "attrs": { "fill-rule": "evenodd", "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z" } }] }, "name": "close", "theme": "outlined" };
@@ -1502,11 +1502,29 @@ var CloseOutlined = function CloseOutlined(props, ref) {
 };
 
 /**![close](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdmlld0JveD0iNjQgNjQgODk2IDg5NiIgZm9jdXNhYmxlPSJmYWxzZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNzk5Ljg2IDE2Ni4zMWMuMDIgMCAuMDQuMDIuMDguMDZsNTcuNjkgNTcuN2MuMDQuMDMuMDUuMDUuMDYuMDhhLjEyLjEyIDAgMDEwIC4wNmMwIC4wMy0uMDIuMDUtLjA2LjA5TDU2OS45MyA1MTJsMjg3LjcgMjg3LjdjLjA0LjA0LjA1LjA2LjA2LjA5YS4xMi4xMiAwIDAxMCAuMDdjMCAuMDItLjAyLjA0LS4wNi4wOGwtNTcuNyA1Ny42OWMtLjAzLjA0LS4wNS4wNS0uMDcuMDZhLjEyLjEyIDAgMDEtLjA3IDBjLS4wMyAwLS4wNS0uMDItLjA5LS4wNkw1MTIgNTY5LjkzbC0yODcuNyAyODcuN2MtLjA0LjA0LS4wNi4wNS0uMDkuMDZhLjEyLjEyIDAgMDEtLjA3IDBjLS4wMiAwLS4wNC0uMDItLjA4LS4wNmwtNTcuNjktNTcuN2MtLjA0LS4wMy0uMDUtLjA1LS4wNi0uMDdhLjEyLjEyIDAgMDEwLS4wN2MwLS4wMy4wMi0uMDUuMDYtLjA5TDQ1NC4wNyA1MTJsLTI4Ny43LTI4Ny43Yy0uMDQtLjA0LS4wNS0uMDYtLjA2LS4wOWEuMTIuMTIgMCAwMTAtLjA3YzAtLjAyLjAyLS4wNC4wNi0uMDhsNTcuNy01Ny42OWMuMDMtLjA0LjA1LS4wNS4wNy0uMDZhLjEyLjEyIDAgMDEuMDcgMGMuMDMgMCAuMDUuMDIuMDkuMDZMNTEyIDQ1NC4wN2wyODcuNy0yODcuN2MuMDQtLjA0LjA2LS4wNS4wOS0uMDZhLjEyLjEyIDAgMDEuMDcgMHoiIC8+PC9zdmc+) */
-var RefIcon$2 = /*#__PURE__*/React.forwardRef(CloseOutlined);
+var RefIcon$3 = /*#__PURE__*/React.forwardRef(CloseOutlined);
+if (process.env.NODE_ENV !== 'production') {
+  RefIcon$3.displayName = 'CloseOutlined';
+}
+var CloseOutlined$1 = RefIcon$3;
+
+// This icon file is generated automatically.
+var CreditCardOutlined$2 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-792 72h752v120H136V232zm752 560H136V440h752v352zm-237-64h165c4.4 0 8-3.6 8-8v-72c0-4.4-3.6-8-8-8H651c-4.4 0-8 3.6-8 8v72c0 4.4 3.6 8 8 8z" } }] }, "name": "credit-card", "theme": "outlined" };
+var CreditCardOutlinedSvg = CreditCardOutlined$2;
+
+var CreditCardOutlined = function CreditCardOutlined(props, ref) {
+  return /*#__PURE__*/React.createElement(AntdIcon, _extends({}, props, {
+    ref: ref,
+    icon: CreditCardOutlinedSvg
+  }));
+};
+
+/**![credit-card](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkyOCAxNjBIOTZjLTE3LjcgMC0zMiAxNC4zLTMyIDMydjY0MGMwIDE3LjcgMTQuMyAzMiAzMiAzMmg4MzJjMTcuNyAwIDMyLTE0LjMgMzItMzJWMTkyYzAtMTcuNy0xNC4zLTMyLTMyLTMyem0tNzkyIDcyaDc1MnYxMjBIMTM2VjIzMnptNzUyIDU2MEgxMzZWNDQwaDc1MnYzNTJ6bS0yMzctNjRoMTY1YzQuNCAwIDgtMy42IDgtOHYtNzJjMC00LjQtMy42LTgtOC04SDY1MWMtNC40IDAtOCAzLjYtOCA4djcyYzAgNC40IDMuNiA4IDggOHoiIC8+PC9zdmc+) */
+var RefIcon$2 = /*#__PURE__*/React.forwardRef(CreditCardOutlined);
 if (process.env.NODE_ENV !== 'production') {
-  RefIcon$2.displayName = 'CloseOutlined';
+  RefIcon$2.displayName = 'CreditCardOutlined';
 }
-var CloseOutlined$1 = RefIcon$2;
+var CreditCardOutlined$1 = RefIcon$2;
 
 // This icon file is generated automatically.
 var DownloadOutlined$2 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z" } }] }, "name": "download", "theme": "outlined" };
@@ -1551,7 +1569,7 @@ var BrandContext = createContext({
     topNavImageUrl: DEFAULT_TOP_NAV_IMAGE_URL,
 });
 
-var MUTATION$9 = "{\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }";
+var MUTATION$9 = "\n  query entityBranding {\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }\n";
 var getBranding = function (_a) {
     var token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -1583,7 +1601,7 @@ var BunnyContext = createContext({});
 var extraQueryClient = new QueryClient();
 // Every component shares similar props and functionality, which this wrapper handles.
 function BunnyProvider(_a) {
-    var accountId = _a.accountId, children = _a.children, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, onErrorNavigate = _a.onErrorNavigate, queryClient = _a.queryClient, apiHost = _a.apiHost, token = _a.token, window = _a.window;
+    var accountId = _a.accountId, children = _a.children, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, queryClient = _a.queryClient, apiHost = _a.apiHost, token = _a.token, window = _a.window, onTokenExpired = _a.onTokenExpired;
     var graphQLClient = createGraphQLClient(token, apiHost || "");
     var isMobile = useIsMobile();
     var _c = useState(undefined), branding = _c[0], setBranding = _c[1];
@@ -1620,10 +1638,10 @@ function BunnyProvider(_a) {
             accountId: accountId,
             darkMode: darkMode,
             graphQLClient: graphQLClient,
-            onErrorNavigate: onErrorNavigate,
             apiHost: apiHost,
             token: token,
             window: window,
+            onTokenExpired: onTokenExpired,
         } }, { children: [jsx("div", __assign({ style: { position: "fixed", left: -2000000000 } }, { children: "test" })), jsx(QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsx(RecoilRoot, { children: jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsx(ConfigProvider, __assign({ theme: {
                                 algorithm: darkMode
                                     ? theme.darkAlgorithm
@@ -1740,27 +1758,39 @@ var InvoiceQuoteView = function (_a) {
     var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError;
     var downloadFile = useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
     var secondaryColor = useContext(BrandContext).secondaryColor;
-    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost; _b.window;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
+    var _c = useContext(InvoiceQuoteContext), shadow = _c.shadow, hideDownloadButton = _c.hideDownloadButton;
     var isMobile = useIsMobile();
-    return (jsxs("div", __assign({ className: "flex flex-col w-full grow ".concat(isMobile ? "overflow-hidden" : "") }, { children: [formattedInvoice ? (jsxs("div", __assign({ className: "flex justify-between items-center pb-4 ".concat(isMobile ? "shadow-padding-x" : ""), id: "acceptance" }, { children: [jsx("div", { children: onBackButtonClick ? (jsx(Button, __assign({ className: "text-xs pl-0", onClick: onBackButtonClick, style: {
+    var buttonsVisible = formattedInvoice && (!hideDownloadButton || onBackButtonClick);
+    return (jsxs("div", __assign({ className: "flex flex-col w-full grow ".concat(isMobile ? "overflow-hidden" : "") }, { children: [buttonsVisible ? (jsxs("div", __assign({ className: "flex justify-between items-center pb-4 ".concat(isMobile ? "shadow-padding-x" : ""), id: "acceptance" }, { children: [jsx("div", { children: onBackButtonClick ? (jsx(Button, __assign({ className: "text-xs pl-0", onClick: onBackButtonClick, style: {
                                 color: secondaryColor,
-                            }, type: "link" }, { children: backButtonName || "Back" }))) : null }), jsx(Button, __assign({ icon: jsx(DownloadOutlined$1, {}), onClick: function () {
+                            }, type: "link" }, { children: backButtonName || "Back" }))) : null }), !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined$1, {}), onClick: function () {
                             return downloadFile(apiHost + "/api/pdf/invoice/" + formattedInvoice.id, token);
-                        } }, { children: "Download" }))] }))) : null, isMobile ? (jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 grow w-full shadow-padding-xb overflow-auto" }, { children: [jsx(Markup, { content: html }), children] }))) : (jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 p-2 w-full bg-white shadow-md rounded-md", style: {
+                        } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 grow w-full shadow-padding-xb overflow-auto" }, { children: [jsx(Markup, { content: html }), children] }))) : (jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 p-2 w-full bg-white ".concat(shadow ? shadow : "shadow-md", " rounded-md"), style: {
                     minWidth: "750px",
                 } }, { children: [jsx(Markup, { content: html }), children] })))] })));
 };
 var templateObject_1$8;
 
+var quoteMetaDescription = function (vendorName) {
+    return "View this quote on the ".concat(vendorName, " customer portal. Powered by Bunny");
+};
+var quoteMetaTitle = function (_a) {
+    var documentName = _a.documentName, vendorName = _a.vendorName;
+    return vendorName + " " + documentName;
+};
+
+var PaymentContext = createContext({});
+
 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) {
+var usePaymentMethod = function (graphQLClient, accountId) {
     var result = useQuery({
         queryKey: QueryKeyFactory.default.accountPaymentMethodKey,
         queryFn: function () {
             return graphQLClient
                 .request(paymentMethodsQuery, {
                 first: 1,
-                filter: "disabled is false",
+                filter: "disabled is false".concat(accountId ? " and accountId is ".concat(accountId) : ""),
             })
                 .then(function (data) {
                 var _a, _b;
@@ -1773,40 +1803,151 @@ var usePaymentMethod = function (graphQLClient) {
     return result;
 };
 
-var CardIcon = function () {
-    return (jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1.5 7.5H16.5", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+var usePlugins = function (_a) {
+    var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
+    var response = useQuery({
+        queryKey: QueryKeyFactory.default.pluginsKey,
+        queryFn: function () {
+            var plugins = getPlugins({
+                entityId: entityId,
+                token: token,
+                apiHost: apiHost,
+            });
+            return plugins;
+        },
+        enabled: Boolean(entityId),
+    });
+    return response;
 };
 
-var Text$d = Typography.Text;
-var PaymentOption = function (_a) {
-    var selected = _a.selected, paymentOption = _a.paymentOption, onClick = _a.onClick, name = _a.name;
-    var brandColor = useContext(BrandContext).brandColor;
-    var darkMode = useContext(BunnyContext).darkMode;
-    var isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("ach");
-    var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
-    return (jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "flex justify-between items-center w-full cursor-pointer py-2 px-4 rounded border-solid ".concat(darkMode
-            ? "var(--row-background-dark) border-gray-500"
-            : "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentOption); } }, { children: [jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsx(Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsx(Text$d, { children: name })] })), isAch ? (jsx(BankOutlined$1, { className: "text-slate-400" })) : isCard ? (jsx(CardIcon, {})) : (jsx(CardIcon, {}))] })));
+var filterPaymentPlugins = function (plugins) {
+    return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
+        var _a, _b, _c, _d;
+        return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "payment" &&
+            ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "valid" &&
+            ((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.frontend) === null || _d === void 0 ? void 0 : _d.length);
+    });
+};
+var usePaymentPlugins = function (_a) {
+    var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
+    var _b = usePlugins({
+        entityId: entityId,
+        apiHost: apiHost,
+        token: token,
+    }), plugins = _b.data, isFetched = _b.isFetched;
+    var paymentPlugins = filterPaymentPlugins(Array.isArray(plugins) ? plugins : []);
+    var paymentMethodAllowedPlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.filter(function (plugin) {
+        var _a, _b;
+        return (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b.some(function (component) { var _a; return (_a = component === null || component === void 0 ? void 0 : component.scenarios) === null || _a === void 0 ? void 0 : _a.includes("admin-payment_method"); });
+    });
+    return {
+        paymentPlugins: paymentPlugins,
+        paymentMethodAllowedPlugins: paymentMethodAllowedPlugins,
+        isFetched: isFetched,
+    };
 };
-var PaymentOptionContainer = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"], ["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (_a) {
-    var $brandColor = _a.$brandColor, $selected = _a.$selected;
-    return $selected &&
-        "\n    border-color: ".concat($brandColor, ";\n  ");
-}, function (_a) {
-    var $brandColor = _a.$brandColor;
-    return $brandColor;
-});
-var templateObject_1$7;
 
-var PaymentMethodSelector = function (_a) {
-    var _b, _c;
-    var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, showStoredPaymentMethodOption = _a.showStoredPaymentMethodOption, value = _a.value;
-    var graphQLClient = useContext(BunnyContext).graphQLClient;
-    var storedPaymentMethod = usePaymentMethod(graphQLClient).data;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [showStoredPaymentMethodOption && storedPaymentMethod && (jsx(PaymentOption, { name: (_b = storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.metadata) === null || _b === void 0 ? void 0 : _b.description, onClick: onSelect, selected: (value === null || value === void 0 ? void 0 : value.id) === storedPaymentMethod.id &&
-                    ((_c = value === null || value === void 0 ? void 0 : value.metadata) === null || _c === void 0 ? void 0 : _c.identifier) ===
-                        storedPaymentMethod.metadata.identifier, paymentOption: storedPaymentMethod })), paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentOption: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); })] })));
+// Simulated payment creation and confirmation
+var confirmPayment = function (_a) {
+    var amount = _a.amount, currency = _a.currency;
+    return { token: "DemoPayTestToken", amount: amount, currency: currency };
+};
+var DIGIT_REGEX = /\d/;
+var isDigit = function (char) { return DIGIT_REGEX.test(char); };
+var isDeletion = function (char) { return [8, 46].includes(char); }; // Backspace or Delete
+var isNavigation = function (char) { return [9, 37, 38, 39, 40].includes(char); }; // Tab, Arrows
+var isModifier = function (char) { return [16, 17, 18].includes(char); }; // Shift, Ctrl, Alt
+var isValidKey = function (code) {
+    return isDeletion(code) || isNavigation(code) || isModifier(code);
+};
+var isValidExpiry = function (expiry) {
+    var month = parseInt(expiry.substring(0, 2), 10);
+    var year = parseInt(expiry.substring(2, 4), 10) + 2000;
+    if (isNaN(month) || isNaN(year))
+        return false;
+    if (month < 1 || month > 12)
+        return false;
+    return true;
+};
+var isCardExpired = function (expiry) {
+    var month = parseInt(expiry.substring(0, 2), 10);
+    var year = parseInt(expiry.substring(2, 4), 10) + 2000;
+    var expiryDate = new Date(year, month, 1);
+    return expiryDate < new Date();
+};
+var formatCardExpiry = function (cardExpiry) {
+    if (cardExpiry.length <= 2)
+        return cardExpiry;
+    return cardExpiry.substring(0, 2) + "/" + cardExpiry.substring(2);
+};
+// removes spaces from a credit card number
+var unformatCardNumber = function (cardNumber) {
+    var cardNumberArray = cardNumber.split("");
+    var unformattedCardNumberArray = cardNumberArray.filter(function (character) { return character !== " "; });
+    return unformattedCardNumberArray.join("");
 };
+var storePayment = function (options, plugin, apiHost, accountId) { return __awaiter(void 0, void 0, void 0, function () {
+    var testCreditCardNumber, testCreditCardCvc, testCreditCardExpirationDate, token, response;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                testCreditCardNumber = options.testCreditCardNumber, testCreditCardCvc = options.testCreditCardCvc, testCreditCardExpirationDate = options.testCreditCardExpirationDate, token = options.token;
+                return [4 /*yield*/, invokePlugin({
+                        method: "store_payment_method",
+                        plugin: plugin,
+                        payload: {
+                            test_credit_card_number: testCreditCardNumber,
+                            test_credit_card_cvc: testCreditCardCvc,
+                            test_credit_card_expiration_date: testCreditCardExpirationDate,
+                            account_id: accountId,
+                        },
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+            case 1:
+                response = _a.sent();
+                if ((response === null || response === void 0 ? void 0 : response.status) !== "success")
+                    throw new Error(response === null || response === void 0 ? void 0 : response.message);
+                return [2 /*return*/, response];
+        }
+    });
+}); };
+
+function usePay$1(_a) {
+    var _this = this;
+    var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice;
+    var pay = function (_a) {
+        var plugin = _a.plugin, savePaymentMethod = _a.savePaymentMethod;
+        return __awaiter(_this, void 0, void 0, function () {
+            var amountDue, currencyId, response;
+            return __generator(this, function (_b) {
+                amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
+                currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency);
+                if (!amountDue || !currencyId) {
+                    throw new Error("No amount or currencyId");
+                }
+                try {
+                    response = confirmPayment({
+                        amount: amountDue,
+                        currency: currencyId,
+                    });
+                    onPaymentSuccess({
+                        pluginPaymentResponse: {
+                            plugin: plugin,
+                            token: response.token,
+                            savePaymentMethod: savePaymentMethod,
+                        },
+                    });
+                }
+                catch (error) {
+                    onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error);
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    return { pay: pay };
+}
 
 var createPaymentMethod = function (_a) {
     var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
@@ -1845,7 +1986,7 @@ var createSetupIntent = function (plugin, token, apiHost, accountId) {
     });
 };
 var createPaymentIntent = function (_a) {
-    var payable = _a.payable, savePaymentMethod = _a.savePaymentMethod, memo = _a.memo, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
+    var payable = _a.payable, savePaymentMethod = _a.savePaymentMethod, memo = _a.memo, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var payload, response;
         return __generator(this, function (_b) {
@@ -1855,7 +1996,6 @@ var createPaymentIntent = function (_a) {
                         payable_id: payable.payableId,
                         save_payment_method: savePaymentMethod,
                         memo: memo,
-                        account_id: accountId,
                     };
                     return [4 /*yield*/, invokePlugin({
                             plugin: plugin,
@@ -1873,21 +2013,37 @@ var createPaymentIntent = function (_a) {
         });
     });
 };
-var fetchStripeKey = function (plugin, token, apiHost, accountId) {
-    return invokePlugin({
-        plugin: plugin,
-        method: "retrieve_config",
-        token: token,
-        apiHost: apiHost,
-        payload: {
-            account_id: accountId,
-        },
+var fetchStripeKey = function (plugin, token, apiHost, accountId) { return __awaiter(void 0, void 0, void 0, function () {
+    var response;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, invokePlugin({
+                    plugin: plugin,
+                    method: "retrieve_config",
+                    token: token,
+                    apiHost: apiHost,
+                    payload: {
+                        account_id: accountId,
+                    },
+                })];
+            case 1:
+                response = _a.sent();
+                return [2 /*return*/, response];
+        }
     });
-};
+}); };
 loadStripe.setLoadParameters({ advancedFraudSignals: false });
 var useStripePlugin = function (plugin, token, apiHost, accountId) {
     var _a = useState(null), stripe = _a[0], setStripe = _a[1];
     var showErrorNotification = useErrorNotification();
+    var options = {
+        mode: "setup",
+        // TODO: Fetch currency from the entity/account
+        currency: "usd",
+        setupFutureUsage: "off_session",
+    };
+    if (!plugin)
+        return { stripe: null, options: options };
     useEffect(function () {
         fetchStripeKey(plugin, token, apiHost || "", accountId)
             .then(function (_a) {
@@ -1900,293 +2056,253 @@ var useStripePlugin = function (plugin, token, apiHost, accountId) {
         });
         // eslint-disable-next-line
     }, [plugin, token]);
-    return stripe;
-};
-
-var PaymentContext = createContext({});
-
-var CheckoutFooter = function (_a) {
-    var amountDue = _a.amountDue, currencyId = _a.currencyId, isSaving = _a.isSaving, onPaymentSubmit = _a.onPaymentSubmit, onlySavePaymentMethod = _a.onlySavePaymentMethod, noPadding = _a.noPadding;
-    useContext(BunnyContext).window;
-    var isMobile = useIsMobile();
-    var displayPayButtonNameAnyways = useContext(PaymentContext).displayPayButtonNameAnyways;
-    var buttonName = function () {
-        return onlySavePaymentMethod && !displayPayButtonNameAnyways
-            ? isSaving
-                ? "Saving"
-                : "Save"
-            : isSaving
-                ? "Paying"
-                : "Pay";
-    };
-    return (jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: jsx(Button, __assign({ className: "w-full", disabled: isSaving, onClick: onPaymentSubmit, size: isMobile ? "large" : "middle", type: "primary" }, { children: "".concat(buttonName()).concat(amountDue && currencyId
-                ? " ".concat(formatCurrency(amountDue, currencyId))
-                : "") })) })));
+    return { stripe: stripe, options: options };
 };
 
-var CheckoutForm = function (_a) {
-    var payable = _a.payable, plugin = _a.plugin, isSaving = _a.isSaving, setIsSaving = _a.setIsSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess;
+function usePay(_a) {
+    var _this = this;
+    var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice;
     // Hooks
     var elements = useElements();
     var stripe = useStripe();
-    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, accountId = _b.accountId;
-    if (!payable)
-        throw new Error("A Payable is required to start checkout");
-    // Handlers
-    var onPaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var submitError, paymentIntent, clientSecret, response, paymentIntentId, error_1;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
+    var pay = function (_a) {
+        var plugin = _a.plugin;
+        return __awaiter(_this, void 0, void 0, function () {
+            var payable, submitError, paymentIntent, clientSecret, response, paymentIntentId, error_1;
+            var _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        payable = (quote || invoice);
+                        _c.label = 1;
+                    case 1:
+                        _c.trys.push([1, 5, , 6]);
+                        if (!stripe)
+                            throw new Error("Form is not ready");
+                        if (!elements)
+                            throw new Error("Elements couldn't be retrieved");
+                        return [4 /*yield*/, elements.submit()];
+                    case 2:
+                        submitError = (_c.sent()).error;
+                        if (submitError)
+                            throw new Error(submitError.message);
+                        return [4 /*yield*/, createPaymentIntent({
+                                payable: payable,
+                                savePaymentMethod: true,
+                                plugin: plugin,
+                                token: token,
+                                apiHost: apiHost || "",
+                            })];
+                    case 3:
+                        paymentIntent = _c.sent();
+                        clientSecret = paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.client_secret;
+                        return [4 /*yield*/, stripe.confirmPayment({
+                                elements: elements,
+                                clientSecret: clientSecret,
+                                redirect: "if_required",
+                                confirmParams: {
+                                    return_url: window.location.href,
+                                },
+                            })];
+                    case 4:
+                        response = _c.sent();
+                        // See https://stripe.com/docs/payments/save-during-payment?platform=web#web-submit-payment
+                        if (response.error)
+                            throw new Error(response.error.message);
+                        paymentIntentId = (_b = response.paymentIntent) === null || _b === void 0 ? void 0 : _b.id;
+                        if (!paymentIntentId)
+                            throw new Error("Payment intent couldn't be retrieved");
+                        onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess({
+                            pluginPaymentResponse: {
+                                plugin: plugin,
+                                token: paymentIntentId,
+                                savePaymentMethod: true,
+                            },
+                        });
+                        return [3 /*break*/, 6];
+                    case 5:
+                        error_1 = _c.sent();
+                        onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error_1);
+                        return [3 /*break*/, 6];
+                    case 6: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return { pay: pay };
+}
+
+var showErrorNotification$1 = useErrorNotification();
+var ActualCheckoutFooter = function (_a) {
+    var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, noPadding = _a.noPadding, plugin = _a.plugin;
+    var isMobile = useIsMobile();
+    var _b = useState(false), isPaying = _b[0], setIsPaying = _b[1];
+    var amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
+    var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency);
+    // Payment hooks
+    var payDemoPay = usePay$1({
+        onPaymentSuccess: function (response) {
+            onPaymentSuccess(response);
+        },
+        onPaymentError: function (error) {
+            setIsPaying(false);
+            showErrorNotification$1(error);
+        },
+        quote: quote,
+        invoice: invoice,
+    }).pay;
+    var payStripe = usePay({
+        onPaymentSuccess: function (response) {
+            onPaymentSuccess(response);
+        },
+        onPaymentError: function (error) {
+            setIsPaying(false);
+            showErrorNotification$1(error);
+        },
+        quote: quote,
+        invoice: invoice,
+    }).pay;
+    var handlePaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
-                    _b.trys.push([0, 4, , 5]);
-                    if (!stripe)
-                        throw new Error("Form is not ready");
-                    if (!elements)
-                        throw new Error("Elements couldn't be retrieved");
-                    setIsSaving(true);
-                    return [4 /*yield*/, elements.submit()];
-                case 1:
-                    submitError = (_b.sent()).error;
-                    if (submitError)
-                        throw new Error(submitError.message);
-                    return [4 /*yield*/, createPaymentIntent({
-                            payable: payable,
-                            savePaymentMethod: true,
-                            plugin: plugin,
-                            token: token,
-                            apiHost: apiHost || "",
-                            accountId: accountId,
-                        })];
-                case 2:
-                    paymentIntent = _b.sent();
-                    clientSecret = paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.client_secret;
-                    return [4 /*yield*/, stripe.confirmPayment({
-                            elements: elements,
-                            clientSecret: clientSecret,
-                            redirect: "if_required",
-                            confirmParams: {
-                                return_url: window.location.href,
-                            },
-                        })];
-                case 3:
-                    response = _b.sent();
-                    // See https://stripe.com/docs/payments/save-during-payment?platform=web#web-submit-payment
-                    if (response.error)
-                        throw new Error(response.error.message);
-                    paymentIntentId = (_a = response.paymentIntent) === null || _a === void 0 ? void 0 : _a.id;
-                    if (!paymentIntentId)
-                        throw new Error("Payment intent couldn't be retrieved");
-                    onPaymentSuccess({
-                        pluginPaymentResponse: {
-                            plugin: plugin,
-                            token: paymentIntentId,
-                            savePaymentMethod: true,
-                        },
-                    });
+                    if (!plugin)
+                        return [2 /*return*/];
+                    _a = (_c = (_b = plugin === null || plugin === void 0 ? void 0 : plugin.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name;
+                    switch (_a) {
+                        case "StripePayment": return [3 /*break*/, 1];
+                        case "DemoPayPayment": return [3 /*break*/, 3];
+                    }
                     return [3 /*break*/, 5];
+                case 1: return [4 /*yield*/, payStripe({
+                        plugin: plugin,
+                    })];
+                case 2:
+                    _d.sent();
+                    return [3 /*break*/, 6];
+                case 3: return [4 /*yield*/, payDemoPay({
+                        plugin: plugin,
+                        savePaymentMethod: false,
+                    })];
                 case 4:
-                    error_1 = _b.sent();
-                    onFail(error_1);
-                    return [3 /*break*/, 5];
-                case 5: return [2 /*return*/];
+                    _d.sent();
+                    return [3 /*break*/, 6];
+                case 5: return [3 /*break*/, 6];
+                case 6: return [2 /*return*/];
             }
         });
     }); };
-    var options = {
-        // defaultValues: {
-        //   billingDetails: {
-        //     email: currentUser.email,
-        //     name: currentUser.name,
-        //     phone: currentUser.phone,
-        //   },
-        // },
-        layout: { type: "accordion" },
-    };
-    return (jsxs("form", { children: [jsx(PaymentElement, { options: options }), jsx(CheckoutFooter, { amountDue: payable.amountDue, currencyId: payable.currencyId.toLowerCase(), isSaving: isSaving, onPaymentSubmit: onPaymentSubmit, onlySavePaymentMethod: false })] }));
+    return (jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: jsx(Button, __assign({ className: "w-full", disabled: isPaying, onClick: function () {
+                setIsPaying(true);
+                handlePaymentSubmit();
+            }, size: isMobile ? "large" : "middle", type: "primary" }, { children: "".concat(isPaying ? "Paying" : "Pay", " ").concat(amountDue && currencyId ? formatCurrency(amountDue, currencyId) : "") })) })));
+};
+var CheckoutFooter = function (_a) {
+    var _b, _c;
+    var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, noPadding = _a.noPadding, plugin = _a.plugin;
+    if (!plugin)
+        return null;
+    var _d = useContext(BunnyContext), token = _d.token, apiHost = _d.apiHost;
+    var accountId = useContext(PaymentContext).accountId;
+    // If plugin is not stripe, pass undefined to prevent errors
+    var stripePlugin = ((_c = (_b = plugin === null || plugin === void 0 ? void 0 : plugin.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name) === "StripePayment"
+        ? plugin
+        : undefined;
+    var _e = useStripePlugin(stripePlugin, token, apiHost, accountId), stripe = _e.stripe, options = _e.options;
+    return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: jsx(ActualCheckoutFooter, { plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, noPadding: noPadding }) })));
 };
 
-var PaymentMethodForm$1 = function (_a) {
-    var isSaving = _a.isSaving, setIsSaving = _a.setIsSaving, plugin = _a.plugin, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess;
-    // Hooks
-    var elements = useElements();
-    var stripe = useStripe();
-    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
-    var accountId = useContext(PaymentContext).accountId;
-    // Handlers
-    var onSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var submitError, response, clientSecret, intentResponse, paymentMethodId, paymentMethodResponse, error_1;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    _c.trys.push([0, 5, , 6]);
-                    if (!stripe)
-                        throw new Error("Form is not ready");
-                    if (!elements)
-                        throw new Error("Elements couldn't be retrieved");
-                    setIsSaving(true);
-                    return [4 /*yield*/, elements.submit()];
-                case 1:
-                    submitError = (_c.sent()).error;
-                    if (submitError)
-                        throw new Error(submitError.message);
-                    return [4 /*yield*/, createSetupIntent(plugin, token, apiHost, accountId)];
-                case 2:
-                    response = _c.sent();
-                    if (response.status !== "success")
-                        throw new Error(response === null || response === void 0 ? void 0 : response.message);
-                    clientSecret = (_a = response === null || response === void 0 ? void 0 : response.payload) === null || _a === void 0 ? void 0 : _a.client_secret;
-                    if (!clientSecret)
-                        throw new Error("Error retrieving client secret");
-                    return [4 /*yield*/, stripe.confirmSetup({
-                            elements: elements,
-                            clientSecret: clientSecret,
-                            redirect: "if_required",
-                            confirmParams: {
-                                return_url: window.location.href,
-                            },
-                        })];
-                case 3:
-                    intentResponse = _c.sent();
-                    // See https://stripe.com/docs/payments/save-during-payment?platform=web#web-submit-payment
-                    if (intentResponse.error)
-                        throw new Error(intentResponse.error.message);
-                    paymentMethodId = (_b = intentResponse.setupIntent.payment_method) === null || _b === void 0 ? void 0 : _b.toString();
-                    if (!paymentMethodId)
-                        throw new Error("Payment method couldn't be retrieved");
-                    return [4 /*yield*/, createPaymentMethod({
-                            paymentMethodId: paymentMethodId,
-                            plugin: plugin,
-                            token: token,
-                            apiHost: apiHost,
-                            accountId: accountId,
-                        })];
-                case 4:
-                    paymentMethodResponse = _c.sent();
-                    onPaymentSuccess({
-                        pluginPaymentResponse: {
-                            savePaymentMethod: true,
-                            plugin: plugin,
-                            token: paymentMethodResponse.token,
-                        },
-                        savedPaymentMethodResponse: {
-                            paymentMethodId: paymentMethodResponse.payload[0].id,
-                        },
-                    });
-                    return [3 /*break*/, 6];
-                case 5:
-                    error_1 = _c.sent();
-                    onFail(error_1);
-                    return [3 /*break*/, 6];
-                case 6: return [2 /*return*/];
-            }
-        });
-    }); };
-    return (jsxs("form", { children: [jsx(PaymentElement, { options: { layout: { type: "accordion" } } }), jsx(CheckoutFooter, { isSaving: isSaving, onPaymentSubmit: onSubmit, onlySavePaymentMethod: true })] }));
+var dayjs_min = {exports: {}};
+
+(function (module, exports) {
+!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
+}(dayjs_min));
+
+var dayjs = dayjs_min.exports;
+
+var Card = function (_a) {
+    var children = _a.children, className = _a.className, style = _a.style;
+    var darkMode = useContext(BunnyContext).darkMode;
+    return (jsx("div", __assign({ className: "flex flex-col rounded-md shadow-md ".concat(className), style: __assign(__assign({}, style), { backgroundColor: darkMode
+                ? "var(--row-background-dark)"
+                : "var(--row-background)" }) }, { children: children })));
 };
 
-// This is just a wrapper to fetch the stripe object and pass it to the form
-var StripeForm = function (_a) {
-    var entityId = _a.entityId, payable = _a.payable, plugin = _a.plugin, isSaving = _a.isSaving, setIsSaving = _a.setIsSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess;
-    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
-    var accountId = useContext(PaymentContext).accountId;
-    var stripe = useStripePlugin(plugin, token, apiHost, accountId);
-    var onlySavePaymentMethod = !payable;
-    if (!stripe)
-        return null;
-    // Ideally this choice should be made way up in the chain,
-    // were we enter into either PaymentMethod Management or Payable Checkout
-    // Probably around Pages/PaymentMethodForm.tsx and Checkout.tsx
-    if (onlySavePaymentMethod) {
-        var options = {
-            mode: "setup",
-            // TODO: Fetch currency from the entity/account
-            currency: "usd",
-            setupFutureUsage: "off_session",
-        };
-        return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: jsx(PaymentMethodForm$1, { entityId: entityId, isSaving: isSaving, setIsSaving: setIsSaving, plugin: plugin, onFail: onFail, onPaymentSuccess: onPaymentSuccess }) })));
-    }
-    else {
-        var options = {
-            mode: "payment",
-            amount: payable === null || payable === void 0 ? void 0 : payable.smallUnitAmountDue,
-            currency: payable === null || payable === void 0 ? void 0 : payable.currencyId.toLowerCase(),
-            setupFutureUsage: "off_session",
-        };
-        return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: jsx(CheckoutForm, { entityId: entityId, payable: payable, plugin: plugin, isSaving: isSaving, setIsSaving: setIsSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess }) })));
-    }
+var LargeCardIcon = function () {
+    return (jsx("svg", __assign({ width: "72", height: "56", viewBox: "0 0 72 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M8 0H64C68.375 0 72 3.625 72 8V12H0V8C0 3.625 3.5 0 8 0ZM72 24V48C72 52.5 68.375 56 64 56H8C3.5 56 0 52.5 0 48V24H72ZM14 40C12.875 40 12 41 12 42C12 43.125 12.875 44 14 44H22C23 44 24 43.125 24 42C24 41 23 40 22 40H14ZM28 42C28 43.125 28.875 44 30 44H46C47 44 48 43.125 48 42C48 41 47 40 46 40H30C28.875 40 28 41 28 42Z", fill: "#E2E8F0" }) })));
 };
 
-var getQuoteAmountDue = function (quote) {
-    return quote.amountDue;
+var PlusIcon = function (_a) {
+    var color = _a.color;
+    return (jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
-// Simulated payment creation and confirmation
-var confirmPayment = function (_a) {
-    var amount = _a.amount, currency = _a.currency, cardDetails = _a.cardDetails;
-    return { token: "DemoPayTestToken", amount: amount, currency: currency, cardDetails: cardDetails };
+var Text$f = Typography.Text;
+var CreditCard = function (_a) {
+    var _b;
+    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d;
+    var isMobile = useIsMobile();
+    var Wrapper = cardEnabled ? Card : "div";
+    return (jsxs(Wrapper, __assign({ className: "".concat(cardEnabled ? shadow : "", " m-0") }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Text$f, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.description })] })), jsx(Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxs(Fragment, { children: [jsx(Divider, {}), jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsx(CardAttribute, { title: "EXPIRATION", value: expirationDate(paymentMethodData) }), isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
 };
-var DIGIT_REGEX = /\d/;
-var isDigit = function (char) { return DIGIT_REGEX.test(char); };
-var isDeletion = function (char) { return [8, 46].includes(char); }; // Backspace or Delete
-var isNavigation = function (char) { return [9, 37, 38, 39, 40].includes(char); }; // Tab, Arrows
-var isModifier = function (char) { return [16, 17, 18].includes(char); }; // Shift, Ctrl, Alt
-var isValidKey = function (code) {
-    return isDeletion(code) || isNavigation(code) || isModifier(code);
+var MiniCreditCard = function (_a) {
+    var _b;
+    var _c = _a.hideRemoveButton, hideRemoveButton = _c === void 0 ? false : _c, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData;
+    var darkMode = useContext(BunnyContext).darkMode;
+    var borderColor = useMemo(function () {
+        return darkMode ? "border-slate-700" : "border-slate-200";
+    }, [darkMode]);
+    var backgroundColor = useMemo(function () {
+        return darkMode ? "var(--row-background-alternate)" : "bg-slate-50";
+    }, [darkMode]);
+    return (jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxs(Fragment, { children: [jsxs("div", __assign({ className: "flex flex-row gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Text$f, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.description })] })), jsx(Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), jsx("div", __assign({ className: "flex flex-row gap-1 items-center" }, { children: dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxs(Fragment, { children: [jsx(Text$f, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: "EXP" })), jsx(Text$f, { children: expirationDate(paymentMethodData) })] })) }))] })), !hideRemoveButton && (jsx(Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsx(Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove" })) })))] })) : (jsxs("div", __assign({ className: "flex flex-row gap-2 items-center" }, { children: [jsx(CreditCardOutlined$1, {}), jsx(Text$f, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: "No payment method selected" })), jsx(Button, { disabled: true, type: "link" })] }))) })));
+};
+var CardImage = function (_a) {
+    var _b, _c;
+    var paymentMethodData = _a.paymentMethodData;
+    var apiHost = useContext(BunnyContext).apiHost;
+    var darkMode = useContext(BunnyContext).darkMode;
+    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";
+    };
+    return (jsx(Fragment, { children: getCardImage((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) && (jsx("img", { alt: "Card", width: "24px", src: "".concat(apiHost, "/portal/").concat(getCardImage((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.issuer)), style: {
+                color: darkMode ? "white" : "",
+            } })) }));
 };
-var isValidExpiry = function (expiry) {
-    var month = parseInt(expiry.substring(0, 2), 10);
-    var year = parseInt(expiry.substring(2, 4), 10) + 2000;
-    if (isNaN(month) || isNaN(year))
-        return false;
-    if (month < 1 || month > 12)
-        return false;
-    return true;
+var CardAttribute = function (_a) {
+    var title = _a.title, value = _a.value;
+    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsx(Text$f, { children: value })] })));
 };
-var isCardExpired = function (expiry) {
-    var month = parseInt(expiry.substring(0, 2), 10);
-    var year = parseInt(expiry.substring(2, 4), 10) + 2000;
-    var expiryDate = new Date(year, month, 1);
-    return expiryDate < new Date();
+var CardActions = function (_a) {
+    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
+    var isMobile = useIsMobile();
+    return (jsxs("div", __assign({ className: "flex items-center gap-6 ".concat(isMobile ? "justify-center mt-4" : "") }, { children: [jsx(Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsx(Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove payment method" })) })), jsx(Divider, { style: { height: "24px" }, type: "vertical" }), jsx(Button, __assign({ onClick: onClickUpdate, type: "primary" }, { children: "Update" }))] })));
 };
-var formatCardExpiry = function (cardExpiry) {
-    if (cardExpiry.length <= 2)
-        return cardExpiry;
-    return cardExpiry.substring(0, 2) + "/" + cardExpiry.substring(2);
+var EmptyCard = function (_a) {
+    var onClick = _a.onClick, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, _c = _a.cardEnabled, cardEnabled = _c === void 0 ? true : _c;
+    var brandColor = useContext(BrandContext).brandColor;
+    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center w-full pt-8 px-4 pb-6 cursor-pointer ".concat(cardEnabled ? "bg-white ".concat(shadow, " rounded-md") : ""), onClick: onClick }, { children: [jsx(LargeCardIcon, {}), jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsx(Button, __assign({ type: "link" }, { children: jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
 };
-// removes spaces from a credit card number
-var unformatCardNumber = function (cardNumber) {
-    var cardNumberArray = cardNumber.split("");
-    var unformattedCardNumberArray = cardNumberArray.filter(function (character) { return character !== " "; });
-    return unformattedCardNumberArray.join("");
+var isExpired = function (paymentMethodData) {
+    var expDate = dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate);
+    return expDate.isBefore(dayjs());
+};
+var expirationDate = function (storedPaymentMethod) {
+    return dayjs(storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.expirationDate).format("MM/YY");
+};
+
+var SavePaymentMethodFooter = function (_a) {
+    var isSaving = _a.isSaving, onSave = _a.onSave, noPadding = _a.noPadding;
+    var isMobile = useIsMobile();
+    var onClickCancel = useContext(PaymentContext).onClickCancel;
+    return (jsxs("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: [onClickCancel && (jsx(Button, __assign({ className: "w-full", size: isMobile ? "large" : "middle", onClick: function () { return onClickCancel(); } }, { children: "Cancel" }))), jsx(Button, __assign({ className: "w-full", disabled: isSaving, onClick: onSave, size: isMobile ? "large" : "middle", type: "primary" }, { children: isSaving ? "Saving" : "Save" }))] })));
 };
-var storePayment = function (options, plugin, apiHost, accountId) { return __awaiter(void 0, void 0, void 0, function () {
-    var testCreditCardNumber, testCreditCardCvc, testCreditCardExpirationDate, token, response;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                testCreditCardNumber = options.testCreditCardNumber, testCreditCardCvc = options.testCreditCardCvc, testCreditCardExpirationDate = options.testCreditCardExpirationDate, token = options.token;
-                return [4 /*yield*/, invokePlugin({
-                        method: "store_payment_method",
-                        plugin: plugin,
-                        payload: {
-                            test_credit_card_number: testCreditCardNumber,
-                            test_credit_card_cvc: testCreditCardCvc,
-                            test_credit_card_expiration_date: testCreditCardExpirationDate,
-                            account_id: accountId,
-                        },
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-            case 1:
-                response = _a.sent();
-                if ((response === null || response === void 0 ? void 0 : response.status) !== "success")
-                    throw new Error(response === null || response === void 0 ? void 0 : response.message);
-                return [2 /*return*/, response];
-        }
-    });
-}); };
 
 var DemoPayCardCvc = function (_a) {
     var autoFocus = _a.autoFocus, onChange = _a.onChange, placeholder = _a.placeholder, value = _a.value;
@@ -2231,83 +2347,95 @@ var DemoPayExpiry = function (_a) {
     return (jsx("div", __assign({ className: "grow" }, { children: jsx(Input, { autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: formatCardExpiry(value), maxLength: 5, placeholder: placeholder || "MM/YY" }) })));
 };
 
-var Text$c = Typography.Text;
+function useSave$1(_a) {
+    var _this = this;
+    var onSaveSuccess = _a.onSaveSuccess, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
+    var _b = useState(false), isSaving = _b[0], setIsSaving = _b[1];
+    var save = function (_a) {
+        var cardDetails = _a.cardDetails, plugin = _a.plugin, savePaymentMethod = _a.savePaymentMethod;
+        return __awaiter(_this, void 0, void 0, function () {
+            var response, paymentMethodId, error_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, 3, 4]);
+                        setIsSaving(true);
+                        return [4 /*yield*/, storePayment({
+                                testCreditCardNumber: unformatCardNumber(cardDetails.number),
+                                testCreditCardCvc: cardDetails.cvc.toString(),
+                                testCreditCardExpirationDate: cardDetails.expiry,
+                                token: token,
+                            }, plugin, apiHost, accountId)];
+                    case 1:
+                        response = _b.sent();
+                        paymentMethodId = response.payload[0].id;
+                        if (response.status !== "success")
+                            throw new Error(response === null || response === void 0 ? void 0 : response.message);
+                        onSaveSuccess({
+                            pluginPaymentResponse: {
+                                plugin: plugin,
+                                token: response.token,
+                                savePaymentMethod: savePaymentMethod,
+                            },
+                            savedPaymentMethodResponse: {
+                                paymentMethodId: paymentMethodId,
+                            },
+                        });
+                        return [3 /*break*/, 4];
+                    case 2:
+                        error_1 = _b.sent();
+                        console.error("Payment failed", error_1);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        setIsSaving(false);
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return { save: save, isSaving: isSaving };
+}
+
+var Text$e = Typography.Text;
 var TEST_CARD = "4242424242424242";
 var DemoPayForm = function (_a) {
-    var isSaving = _a.isSaving, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving;
+    var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
     // Context
     var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, darkMode = _b.darkMode;
     var accountId = useContext(PaymentContext).accountId;
-    // Local state
-    var _c = useState(false), savePaymentMethod = _c[0], setSavePaymentMethod = _c[1];
+    // Hooks
+    var _c = useSave$1({
+        onSaveSuccess: onSavePaymentMethod,
+        token: token,
+        apiHost: apiHost,
+        accountId: accountId,
+    }), save = _c.save, isSaving = _c.isSaving;
     var _d = useState({
         number: "4242424242424242",
         expiry: "",
         cvc: "",
     }), cardDetails = _d[0], setCardDetails = _d[1];
-    var amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
-    var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency);
-    var onlySavePaymentMethod = !quote && !invoice;
-    var onPaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var response, paymentMethodId, response, error_1;
+    var onSave = function () { 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, 6, , 7]);
-                    if (!onlySavePaymentMethod) return [3 /*break*/, 2];
-                    validateCardDetails();
-                    setIsSaving(true);
-                    return [4 /*yield*/, storePayment({
-                            testCreditCardNumber: unformatCardNumber(cardDetails.number),
-                            testCreditCardCvc: cardDetails.cvc.toString(),
-                            testCreditCardExpirationDate: cardDetails.expiry,
-                            token: token,
-                        }, plugin, apiHost, accountId)];
-                case 1:
-                    response = _a.sent();
-                    paymentMethodId = response.payload[0].id;
-                    if (response.status !== "success")
-                        throw new Error(response === null || response === void 0 ? void 0 : response.message);
-                    onPaymentSuccess({
-                        pluginPaymentResponse: {
-                            plugin: plugin,
-                            token: response.token,
-                            savePaymentMethod: savePaymentMethod,
-                        },
-                        savedPaymentMethodResponse: {
-                            paymentMethodId: paymentMethodId,
-                        },
-                    });
-                    return [3 /*break*/, 5];
-                case 2:
-                    if (!(amountDue !== undefined && currencyId)) return [3 /*break*/, 4];
+                    _a.trys.push([0, 2, , 3]);
                     validateCardDetails();
-                    setIsSaving(true);
-                    return [4 /*yield*/, confirmPayment({
-                            amount: amountDue,
-                            currency: currencyId,
+                    return [4 /*yield*/, save({
                             cardDetails: cardDetails,
-                        })];
-                case 3:
-                    response = _a.sent();
-                    onPaymentSuccess({
-                        pluginPaymentResponse: {
                             plugin: plugin,
-                            token: response.token,
-                            savePaymentMethod: savePaymentMethod,
-                        },
-                    });
-                    setIsSaving(false);
-                    return [3 /*break*/, 5];
-                case 4:
-                    onFail(new Error("No amount or currencyId"));
-                    _a.label = 5;
-                case 5: return [3 /*break*/, 7];
-                case 6:
+                            savePaymentMethod: false,
+                        })];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
                     error_1 = _a.sent();
                     onFail(error_1);
-                    return [3 /*break*/, 7];
-                case 7: return [2 /*return*/];
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
             }
         });
     }); };
@@ -2330,454 +2458,231 @@ var DemoPayForm = function (_a) {
     var onCardCvcChange = function (cvc) {
         setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
     };
-    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsx(Text$c, __assign({ className: "text-xs" }, { children: "DemoPay is for testing only." })), !onlySavePaymentMethod && (jsx(Checkbox, __assign({ className: "mt-2", onChange: function (e) { return setSavePaymentMethod(e.target.checked); } }, { children: "Save as primary payment method" }))), jsx(CheckoutFooter, { amountDue: amountDue, currencyId: currencyId, isSaving: isSaving, onPaymentSubmit: onPaymentSubmit, onlySavePaymentMethod: onlySavePaymentMethod })] })));
+    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsx(Text$e, __assign({ className: "text-xs" }, { children: "DemoPay is for testing only." })), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
 };
-var StyledInputs = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"], ["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"])), function (_a) {
+var StyledInputs = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"], ["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"])), function (_a) {
     var darkMode = _a.darkMode;
     return darkMode ? "var(--row-background-dark)" : "white";
 }, function (_a) {
     var darkMode = _a.darkMode;
     return darkMode ? GRAY_500 : GRAY_200;
 });
-var templateObject_1$6;
+var templateObject_1$7;
 
-var finixStyles = function (isMobile) { return ({
-    default: {
-        color: CHARCOAL_GRAY,
-        border: "1px solid ".concat(INPUT_BORDER_COLOR),
-        padding: "4px 11px",
-        backgroundColor: "white",
-        fontSize: isMobile ? "16px" : "14px",
-        borderRadius: "4px",
-    },
-    success: {
-        color: CHARCOAL_GRAY, // specific styling if the field is valid
-    },
-    error: {
-        color: "#ff4d4f", // specific styling if the field has errors
-    },
-}); };
+function useSave(_a) {
+    var _this = this;
+    var onSaveSuccess = _a.onSaveSuccess;
+    // Hooks
+    var _b = useState(false), isSaving = _b[0], setIsSaving = _b[1];
+    var elements = useElements();
+    var stripe = useStripe();
+    var _c = useContext(BunnyContext), token = _c.token, apiHost = _c.apiHost;
+    var accountId = useContext(PaymentContext).accountId;
+    var save = function (_a) {
+        var plugin = _a.plugin;
+        return __awaiter(_this, void 0, void 0, function () {
+            var submitError, response, clientSecret, intentResponse, paymentMethodId, paymentMethodResponse, error_1;
+            var _b, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        _d.trys.push([0, 5, 6, 7]);
+                        if (!stripe)
+                            throw new Error("Form is not ready");
+                        if (!elements)
+                            throw new Error("Elements couldn't be retrieved");
+                        setIsSaving(true);
+                        return [4 /*yield*/, elements.submit()];
+                    case 1:
+                        submitError = (_d.sent()).error;
+                        if (submitError)
+                            throw new Error(submitError.message);
+                        return [4 /*yield*/, createSetupIntent(plugin, token, apiHost, accountId)];
+                    case 2:
+                        response = _d.sent();
+                        if (response.status !== "success")
+                            throw new Error(response === null || response === void 0 ? void 0 : response.message);
+                        clientSecret = (_b = response === null || response === void 0 ? void 0 : response.payload) === null || _b === void 0 ? void 0 : _b.client_secret;
+                        if (!clientSecret)
+                            throw new Error("Error retrieving client secret");
+                        return [4 /*yield*/, stripe.confirmSetup({
+                                elements: elements,
+                                clientSecret: clientSecret,
+                                redirect: "if_required",
+                                confirmParams: {
+                                    return_url: window.location.href,
+                                },
+                            })];
+                    case 3:
+                        intentResponse = _d.sent();
+                        // See https://stripe.com/docs/payments/save-during-payment?platform=web#web-submit-payment
+                        if (intentResponse.error)
+                            throw new Error(intentResponse.error.message);
+                        paymentMethodId = (_c = intentResponse.setupIntent.payment_method) === null || _c === void 0 ? void 0 : _c.toString();
+                        if (!paymentMethodId)
+                            throw new Error("Payment method couldn't be retrieved");
+                        return [4 /*yield*/, createPaymentMethod({
+                                paymentMethodId: paymentMethodId,
+                                plugin: plugin,
+                                token: token,
+                                apiHost: apiHost,
+                                accountId: accountId,
+                            })];
+                    case 4:
+                        paymentMethodResponse = _d.sent();
+                        onSaveSuccess({
+                            pluginPaymentResponse: {
+                                savePaymentMethod: true,
+                                plugin: plugin,
+                                token: paymentMethodResponse.token,
+                            },
+                            savedPaymentMethodResponse: {
+                                paymentMethodId: paymentMethodResponse.payload[0].id,
+                            },
+                        });
+                        return [3 /*break*/, 7];
+                    case 5:
+                        error_1 = _d.sent();
+                        console.error(error_1);
+                        return [3 /*break*/, 7];
+                    case 6:
+                        setIsSaving(false);
+                        return [7 /*endfinally*/];
+                    case 7: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return { save: save, isSaving: isSaving };
+}
 
-var retrieveConfig = function (_a) {
-    var plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, invokePlugin({
-                        plugin: plugin,
-                        method: "retrieve_config",
-                        token: token,
-                        apiHost: apiHost,
-                        payload: {
-                            account_id: accountId,
-                        },
-                    })];
+var PaymentMethodForm = function (_a) {
+    var plugin = _a.plugin, onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod;
+    // Hooks
+    var _b = useSave({
+        onSaveSuccess: onSavePaymentMethod,
+    }), save = _b.save, isSaving = _b.isSaving;
+    // Handlers
+    var onSubmit = function () { 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*/, save({ plugin: plugin })];
                 case 1:
-                    response = _b.sent();
-                    if (response.status !== "success")
-                        throw new Error(response.message || "Unknown error");
-                    return [2 /*return*/, response.payload];
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_1 = _a.sent();
+                    onFail(error_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
             }
         });
-    });
+    }); };
+    return (jsxs("form", { children: [jsx(PaymentElement, { options: { layout: { type: "accordion" } } }), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSubmit })] }));
 };
 
-var snakeToSpaces = StringUtils.snakeToSpaces;
-var finixOptions$1 = function (isMobile) { return ({
-    showAddress: true,
-    hideFields: [
-        "address_line1",
-        "address_line2",
-        "address_city",
-        "address_region",
-        "address_state",
-        "address_country",
-    ],
-    labels: {
-        number: "Card number",
-        expiration_date: "Expiration date",
-        security_code: "CVC",
-        address_postal_code: "Postal code",
-    },
-    styles: finixStyles(isMobile),
-}); };
-var FINIX_FORM_ID$1 = "form-element";
-var FINIX_ERROR_CODE_MAPPINGS = {
-    INVALID_FIELD: "Invalid field",
-};
-var FINIX_FIELD_NAME_MAPPINGS = {
-    security_code: "CVC",
-    number: "Card number",
-    UNKNOWN: "Expiration date",
-    NOT_SUPPORTED: "Address verification",
-    NO_ADDRESS: "Address",
-};
-// Finix doesn't seem to return meaningful errors on their error object
-// they must be extracted from response.data._embedded.errors
-var formatFinixError = function (response) {
-    var errors = response.data._embedded.errors;
-    var formattedErrors = errors.map(function (error, index) {
-        var code = error.code, field = error.field;
-        var message = FINIX_ERROR_CODE_MAPPINGS[code] || error.message;
-        var formattedField = FINIX_FIELD_NAME_MAPPINGS[field || ""] ||
-            capitalize(snakeToSpaces(field || ""));
-        return "".concat(index + 1, ". ").concat(formattedField, ": ").concat(message);
-    });
-    return formattedErrors.join("\n\n");
-};
-var FinixCardPaymentForm = function (_a) {
-    var finixConfig = _a.formData, invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving;
-    // Context
+// This is just a wrapper to fetch the stripe object and pass it to the form
+var StripeForm = function (_a) {
+    var plugin = _a.plugin, onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod;
     var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
     var accountId = useContext(PaymentContext).accountId;
-    var isMobile = useIsMobile();
-    // Local state
-    var _c = useState(false), savePaymentMethod = _c[0], setSavePaymentMethod = _c[1];
-    var _d = useState(null), finixForm = _d[0], setFinixForm = _d[1];
-    var _e = useState(null), finixAuth = _e[0], setFinixAuth = _e[1];
-    var onlySavePaymentMethod = !quote && !invoice;
-    var amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
-    var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency);
-    // Handlers
-    var onPaymentSubmit = function () {
-        setIsSaving(true);
-        try {
-            var fraud_session_id_1 = finixAuth.getSessionKey();
-            // This is a callback, lets be careful with the scope of the errors and vars
-            var finixFormCallback = function (error, response) { return __awaiter(void 0, void 0, void 0, function () {
-                var tokenData, finixToken, message, response_1, e_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            _a.trys.push([0, 3, , 4]);
-                            tokenData = response.data || {};
-                            finixToken = tokenData.id;
-                            if (error) {
-                                message = formatFinixError(response);
-                                throw new Error(message);
-                            }
-                            if (!finixToken)
-                                throw new Error("payment token couldn't be retrieved");
-                            if (!onlySavePaymentMethod) return [3 /*break*/, 2];
-                            if (!accountId)
-                                throw new Error("Account ID is required");
-                            return [4 /*yield*/, invokePlugin({
-                                    plugin: plugin,
-                                    method: "store_payment_method",
-                                    payload: {
-                                        finix_token: finixToken,
-                                        fraud_session_id: fraud_session_id_1,
-                                        account_id: accountId,
-                                    },
-                                    token: token,
-                                    apiHost: apiHost,
-                                })];
-                        case 1:
-                            response_1 = _a.sent();
-                            if (response_1.status === "failed")
-                                throw new Error(response_1.message);
-                            return [2 /*return*/, onPaymentSuccess({})];
-                        case 2:
-                            onPaymentSuccess({
-                                pluginPaymentResponse: {
-                                    token: finixToken,
-                                    savePaymentMethod: savePaymentMethod,
-                                    plugin: plugin,
-                                    metadata: {
-                                        fraud_session_id: fraud_session_id_1,
-                                    },
-                                },
-                            });
-                            return [3 /*break*/, 4];
-                        case 3:
-                            e_1 = _a.sent();
-                            // Catch any errors during AFTER submission, during Callback
-                            onFail(e_1);
-                            return [3 /*break*/, 4];
-                        case 4: return [2 /*return*/];
-                    }
-                });
-            }); };
-            finixForm.submit(finixConfig.environment, finixConfig.application_id, finixFormCallback);
-        }
-        catch (e) {
-            // Catch any errors during configuration and submission
-            onFail(e);
-        }
-    };
-    useEffect(function () {
-        if (!finixForm) {
-            var form = window.Finix.CardTokenForm(FINIX_FORM_ID$1, finixOptions$1(isMobile));
-            setFinixForm(form);
-        }
-    }, [finixForm, isMobile]);
-    useEffect(function () {
-        if (!finixAuth) {
-            // It is recommended to retrieve the session key ONCE per checkout/payment
-            var FinixAuth = window.Finix.Auth(finixConfig.environment, finixConfig.merchant_id);
-            setFinixAuth(FinixAuth);
-        }
-    }, [finixAuth, finixConfig.environment, finixConfig.merchant_id]);
-    return (jsxs(Fragment, { children: [jsx("div", { id: FINIX_FORM_ID$1 }), !onlySavePaymentMethod && (jsx(Checkbox, __assign({ className: "mt-2", onChange: function (e) { return setSavePaymentMethod(e.target.checked); } }, { children: "Save as primary payment method" }))), jsx(CheckoutFooter, { amountDue: amountDue, currencyId: currencyId, isSaving: isSaving, onPaymentSubmit: onPaymentSubmit, onlySavePaymentMethod: onlySavePaymentMethod })] }));
-};
-// This is just a wrapper to fetch the finix config, config its form and pass it to the paymentForm
-var FinixForm = function (_a) {
-    var invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving, entityId = _a.entityId;
-    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, accountId = _b.accountId;
-    var finixConfig = useQuery({
-        queryKey: QueryKeyFactory.default.finixKey,
-        queryFn: function () {
-            return retrieveConfig({
-                plugin: plugin,
-                token: token,
-                apiHost: apiHost,
-                accountId: accountId,
-            });
-        },
-        staleTime: 0,
-    }).data;
-    if (!finixConfig || !finixConfig.application_id)
-        return null;
-    return (jsx(FinixCardPaymentForm, { entityId: entityId, formData: finixConfig, invoice: invoice, isSaving: isSaving, setIsSaving: setIsSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: plugin, quote: quote }));
-};
-
-var StoredPaymentMethodForm = function (_a) {
-    var isSaving = _a.isSaving, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, paymentMethod = _a.paymentMethod, quote = _a.quote, setIsSaving = _a.setIsSaving;
-    var amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
-    var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency);
-    var onPaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            setIsSaving(true);
-            onPaymentSuccess({
-                savedPaymentMethodResponse: { paymentMethodId: paymentMethod.id },
-            });
-            return [2 /*return*/];
-        });
-    }); };
-    return (jsx(CheckoutFooter, { amountDue: amountDue, currencyId: currencyId, isSaving: isSaving, onPaymentSubmit: onPaymentSubmit, noPadding: true }));
-};
-
-var finixOptions = function (isMobile) { return ({
-    showAddress: true,
-    hideFields: [
-        "address_line1",
-        "address_line2",
-        "address_city",
-        "address_region",
-        "address_state",
-        "address_country",
-    ],
-    labels: {
-        account_number: "Account number",
-        bank_code: "Routing number",
-        account_type: "Account type",
-        address_postal_code: "Postal code",
-    },
-    styles: finixStyles(isMobile),
-}); };
-var FINIX_FORM_ID = "form-element";
-var FinixAchPayment = function (_a) {
-    var invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving, entityId = _a.entityId;
-    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, accountId = _b.accountId;
-    var finixConfig = useQuery({
-        queryKey: QueryKeyFactory.default.finixAchKey,
-        queryFn: function () {
-            return retrieveConfig({
-                plugin: plugin,
-                token: token,
-                apiHost: apiHost,
-                accountId: accountId,
-            });
-        },
-        staleTime: 0,
-    }).data;
-    if (!finixConfig || !finixConfig.application_id)
+    var _c = useStripePlugin(plugin, token, apiHost, accountId), stripe = _c.stripe, options = _c.options;
+    if (!stripe)
         return null;
-    return (jsx(FinixAchPaymentForm, { entityId: entityId, isSaving: isSaving, formData: finixConfig, invoice: invoice, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: plugin, quote: quote, setIsSaving: setIsSaving }));
-};
-var FinixAchPaymentForm = function (_a) {
-    var finixConfig = _a.formData, invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving;
-    // Context
-    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, accountId = _b.accountId, window = _b.window;
-    var isMobile = useIsMobile();
-    // Local state
-    var _c = useState(), finixForm = _c[0], setFinixForm = _c[1];
-    var _d = useState(false), savePaymentMethod = _d[0], setSavePaymentMethod = _d[1];
-    // Derived state
-    var onlySavePaymentMethod = !quote && !invoice;
-    var amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
-    var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency);
-    var onPaymentSubmit = function () {
-        setIsSaving(true);
-        try {
-            var finixAchCallback_1 = function (error, response, fraud_session_id) { return __awaiter(void 0, void 0, void 0, function () {
-                var tokenData, finixToken, message, response_1, e_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            _a.trys.push([0, 3, , 4]);
-                            tokenData = response.data || {};
-                            finixToken = tokenData.id;
-                            if (error) {
-                                message = formatFinixError(response);
-                                throw new Error(message);
-                            }
-                            if (!finixToken) {
-                                throw new Error("payment token couldn't be retrieved");
-                            }
-                            if (!onlySavePaymentMethod) return [3 /*break*/, 2];
-                            return [4 /*yield*/, invokePlugin({
-                                    plugin: plugin,
-                                    method: "store_payment_method",
-                                    payload: {
-                                        finix_token: finixToken,
-                                        fraud_session_id: fraud_session_id,
-                                        account_id: accountId,
-                                    },
-                                    token: token,
-                                    apiHost: apiHost,
-                                })];
-                        case 1:
-                            response_1 = _a.sent();
-                            if (response_1.status === "failed") {
-                                throw new Error(response_1.message);
-                            }
-                            return [2 /*return*/, onPaymentSuccess({})];
-                        case 2:
-                            onPaymentSuccess({
-                                pluginPaymentResponse: {
-                                    token: finixToken,
-                                    savePaymentMethod: savePaymentMethod,
-                                    plugin: plugin,
-                                    metadata: {
-                                        fraud_session_id: fraud_session_id,
-                                    },
-                                },
-                            });
-                            return [3 /*break*/, 4];
-                        case 3:
-                            e_1 = _a.sent();
-                            // Catch any errors during AFTER submission, during Callback
-                            onFail(e_1);
-                            return [3 /*break*/, 4];
-                        case 4: return [2 /*return*/];
-                    }
-                });
-            }); };
-            window.Finix.Auth(finixConfig.environment, finixConfig.merchant_id, function (fraud_session_id) {
-                finixForm === null || finixForm === void 0 ? void 0 : finixForm.submit(finixConfig.environment, finixConfig.application_id, function (error, response) {
-                    return finixAchCallback_1(error, response, fraud_session_id);
-                });
-            });
-        }
-        catch (e) {
-            // Catch any errors during configuration and submission
-            onFail(e);
-        }
-    };
-    useEffect(function () {
-        if (!finixForm) {
-            var newFinixForm = window.Finix.BankTokenForm(FINIX_FORM_ID, finixOptions(isMobile));
-            setFinixForm(newFinixForm);
-        }
-    }, [finixForm, isMobile]);
-    return (jsxs(Fragment, { children: [jsx("div", { id: FINIX_FORM_ID }), !onlySavePaymentMethod && (jsx(Checkbox, __assign({ className: "mt-2", onChange: function (e) { return setSavePaymentMethod(e.target.checked); } }, { children: "Save as primary payment method" }))), jsx(CheckoutFooter, { amountDue: amountDue, currencyId: currencyId, onPaymentSubmit: onPaymentSubmit, isSaving: isSaving, onlySavePaymentMethod: onlySavePaymentMethod })] }));
+    return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: jsx(PaymentMethodForm, { plugin: plugin, onFail: onFail, onSavePaymentMethod: onSavePaymentMethod }) })));
 };
 
-var PaymentMethodForm = function (_a) {
+var PaymentMethodDetails = function (_a) {
     var _b, _c;
-    var entityId = _a.entityId, invoice = _a.invoice, isPlugin = _a.isPlugin, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, paymentMethod = _a.paymentMethod, quote = _a.quote, setIsSaving = _a.setIsSaving;
+    var onFail = _a.onFail, paymentMethod = _a.paymentMethod, onSavePaymentMethod = _a.onSavePaymentMethod;
     if (!paymentMethod)
         return null;
-    if (isPlugin) {
-        paymentMethod = paymentMethod;
-        var payable = (quote || invoice);
-        switch ((_c = (_b = paymentMethod.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name) {
-            case "StripePayment":
-                return (jsx(StripeForm, { entityId: entityId, payable: payable, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, setIsSaving: setIsSaving }));
-            case "FinixPayment":
-                return (jsx(FinixForm, { entityId: entityId, invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
-            case "FinixAchPayment":
-                return (jsx(FinixAchPayment, { entityId: entityId, invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
-            case "DemoPayPayment":
-                return (jsx(DemoPayForm, { entityId: entityId, invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
-            default:
-                return jsx("p", { children: "Can not find form for plugin" });
-        }
+    paymentMethod = paymentMethod;
+    switch ((_c = (_b = paymentMethod.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name) {
+        case "StripePayment":
+            return (jsx(StripeForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: paymentMethod }));
+        case "DemoPayPayment":
+            return (jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: paymentMethod }));
+        default:
+            return jsx("p", { children: "Can not find form for plugin" });
     }
-    else if (quote || invoice)
-        return (jsx(StoredPaymentMethodForm, { entityId: entityId, invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, paymentMethod: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
-    return null;
 };
 
-var usePlugins = function (_a) {
-    var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
-    return useQuery({
-        queryKey: QueryKeyFactory.default.pluginsKey,
-        queryFn: function () {
-            var plugins = getPlugins({
-                entityId: entityId,
-                token: token,
-                apiHost: apiHost,
-            });
-            return plugins;
-        },
-        enabled: Boolean(entityId),
-    });
+var CardIcon = function () {
+    return (jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1.5 7.5H16.5", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
-var filterPaymentPlugins = function (plugins) {
-    return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
-        var _a, _b, _c, _d;
-        return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "payment" &&
-            ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "valid" &&
-            ((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.frontend) === null || _d === void 0 ? void 0 : _d.length);
-    });
+var Text$d = Typography.Text;
+var PaymentMethodSelector = function (_a) {
+    var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
+    return (jsx("div", __assign({ className: "flex flex-col gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentOption: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
 };
-var usePaymentPlugins = function (_a) {
-    var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
-    var _b = usePlugins({
-        entityId: entityId,
-        apiHost: apiHost,
-        token: token,
-    }), plugins = _b.data, isFetched = _b.isFetched;
-    var paymentPlugins = filterPaymentPlugins(Array.isArray(plugins) ? plugins : []);
-    var paymentMethodAllowedPlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.filter(function (plugin) {
-        var _a, _b;
-        return (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b.some(function (component) { var _a; return (_a = component === null || component === void 0 ? void 0 : component.scenarios) === null || _a === void 0 ? void 0 : _a.includes("admin-payment_method"); });
-    });
-    return {
-        paymentPlugins: paymentPlugins,
-        paymentMethodAllowedPlugins: paymentMethodAllowedPlugins,
-        isFetched: isFetched,
-    };
+var PaymentOption = function (_a) {
+    var selected = _a.selected, paymentOption = _a.paymentOption, onClick = _a.onClick, name = _a.name;
+    var brandColor = useContext(BrandContext).brandColor;
+    var darkMode = useContext(BunnyContext).darkMode;
+    var isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("ach");
+    var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
+    return (jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "flex justify-between items-center w-full cursor-pointer py-2 px-4 rounded border-solid ".concat(darkMode
+            ? "var(--row-background-dark) border-gray-500"
+            : "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentOption); } }, { children: [jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsx(Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsx(Text$d, { children: name })] })), isAch ? (jsx(BankOutlined$1, { className: "text-slate-400" })) : isCard ? (jsx(CardIcon, {})) : (jsx(CardIcon, {}))] })));
 };
+var PaymentOptionContainer = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"], ["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (_a) {
+    var $brandColor = _a.$brandColor, $selected = _a.$selected;
+    return $selected &&
+        "\n    border-color: ".concat($brandColor, ";\n  ");
+}, function (_a) {
+    var $brandColor = _a.$brandColor;
+    return $brandColor;
+});
+var templateObject_1$6;
 
-var PaymentFormWrapper = function (_a) {
-    var children = _a.children, setMaxHeight = _a.setMaxHeight;
-    var isMobile = useIsMobile();
-    return (jsx("div", __assign({ className: "flex flex-col gap-6 shrink-0 ".concat(isMobile ? "w-full shadow-padding-xb" : ""), style: __assign({}, (isMobile
-            ? setMaxHeight
-                ? { maxHeight: "60vh" }
-                : {}
-            : {
-                width: "350px",
-            })) }, { children: children })));
-};
-var ActualPaymentForm = function (_a) {
-    var entityId = _a.entityId, invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, setIsSaving = _a.setIsSaving;
+function useRemovePaymentMethod(paymentPlugins, token, apiHost, accountId) {
+    var queryClient = useQueryClient();
+    var showErrorNotification = useErrorNotification();
+    var showSuccessNotification = useSuccessNotification();
+    var removePaymentMethod = useCallback(function (data) {
+        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); });
+        if (data && plugin) {
+            invokePlugin({
+                plugin: plugin,
+                method: "remove_payment_method",
+                payload: {
+                    payment_method_id: data.id,
+                    account_id: accountId,
+                },
+                token: token,
+                apiHost: apiHost,
+            })
+                .then(function () {
+                showSuccessNotification("Payment method was removed", "Success");
+                queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodKey, null);
+            })
+                .catch(function (error) {
+                showErrorNotification(error.message, "Error removing payment method");
+            });
+        }
+    }, [paymentPlugins, token, apiHost, queryClient]);
+    return removePaymentMethod;
+}
+
+var Panel = Collapse.Panel;
+var PaymentForm = function (_a) {
+    var entityId = _a.entityId, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod;
     // Local state
     var _b = useState(), selectedPaymentMethod = _b[0], setSelectedPaymentMethod = _b[1];
-    var _c = useContext(BunnyContext), token = _c.token, apiHost = _c.apiHost, graphQLClient = _c.graphQLClient;
-    var storedPaymentMethod = usePaymentMethod(graphQLClient).data;
-    // Queries
+    var _c = useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
+    var paying = !!(quote || invoice);
+    // Hooks
+    var _d = useContext(BunnyContext), token = _d.token, apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
+    var storedPaymentMethod = usePaymentMethod(graphQLClient, accountId).data;
     var isPaymentMethodFetched = storedPaymentMethod !== undefined;
-    var _d = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }), paymentMethodAllowedPlugins = _d.paymentMethodAllowedPlugins, arePluginsFetched = _d.isFetched;
-    // Derived state
-    // If there is a quote or invoice, we are just saving a payment method and not processing a payment
-    var showStoredPaymentMethodOption = Boolean(quote || invoice);
-    var isPlugin = !(selectedPaymentMethod === null || selectedPaymentMethod === void 0 ? void 0 : selectedPaymentMethod.metadata);
+    var _e = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }), paymentMethodAllowedPlugins = _e.paymentMethodAllowedPlugins, arePluginsFetched = _e.isFetched;
+    var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], token, apiHost, accountId);
+    var queryClient = useQueryClient();
     // Set default plugin
     useEffect(function () {
         if (!arePluginsFetched ||
@@ -2785,34 +2690,53 @@ var ActualPaymentForm = function (_a) {
             selectedPaymentMethod) {
             return;
         }
-        if (storedPaymentMethod && showStoredPaymentMethodOption)
-            setSelectedPaymentMethod(storedPaymentMethod);
-        else if (paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.length)
-            setSelectedPaymentMethod(paymentMethodAllowedPlugins[0]);
+        var pluginPaymentMethod = paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.find(function (plugin) { var _a; return plugin.name === ((_a = storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.metadata) === null || _a === void 0 ? void 0 : _a.issuer); });
+        if (pluginPaymentMethod) {
+            setSelectedPaymentMethod(pluginPaymentMethod);
+        }
+        else if (paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]) {
+            setSelectedPaymentMethod(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
+        }
     }, [
         arePluginsFetched,
         isPaymentMethodFetched,
         paymentMethodAllowedPlugins,
         selectedPaymentMethod,
         setSelectedPaymentMethod,
-        showStoredPaymentMethodOption,
         storedPaymentMethod,
     ]);
     var showPaymentMethodSelector = useMemo(function () {
         var pluginCount = (paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.length) || 0;
-        return showStoredPaymentMethodOption && storedPaymentMethod
-            ? pluginCount + 1 > 1
-            : pluginCount > 1;
-    }, [
-        paymentMethodAllowedPlugins,
-        showStoredPaymentMethodOption,
-        storedPaymentMethod,
-    ]);
-    return (jsxs(PaymentFormWrapper, __assign({ setMaxHeight: isPlugin }, { children: [showPaymentMethodSelector && (jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, showStoredPaymentMethodOption: showStoredPaymentMethodOption, value: selectedPaymentMethod })), selectedPaymentMethod && (jsx("div", __assign({ className: "flex flex-col" }, { children: jsx(PaymentMethodForm, { entityId: entityId, invoice: invoice, isPlugin: isPlugin, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, paymentMethod: selectedPaymentMethod, quote: quote, setIsSaving: setIsSaving }) })))] })));
-};
-var PaymentForm = function (_a) {
-    var entityId = _a.entityId, invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, setIsSaving = _a.setIsSaving;
-    return (jsx(ActualPaymentForm, { entityId: entityId, invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, quote: quote, setIsSaving: setIsSaving }));
+        return pluginCount > 1;
+    }, [paymentMethodAllowedPlugins]);
+    var handlePaymentSuccess = function (_a) {
+        var pluginPaymentResponse = _a.pluginPaymentResponse, savedPaymentMethodResponse = _a.savedPaymentMethodResponse;
+        // Hide payment method selector and form
+        setShowPaymentMethodForm(false);
+        // Set new selected payment method
+        var paymentMethod = paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.find(function (plugin) { var _a; return plugin.id === ((_a = pluginPaymentResponse === null || pluginPaymentResponse === void 0 ? void 0 : pluginPaymentResponse.plugin) === null || _a === void 0 ? void 0 : _a.id); });
+        setSelectedPaymentMethod(paymentMethod);
+        // Handle success keeps going up component tree
+        onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess({
+            pluginPaymentResponse: pluginPaymentResponse,
+            savedPaymentMethodResponse: savedPaymentMethodResponse,
+        });
+    };
+    var handleSavePaymentMethod = function () {
+        queryClient.invalidateQueries({
+            queryKey: QueryKeyFactory.default.accountPaymentMethodKey,
+        });
+        onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
+        setShowPaymentMethodForm(false);
+    };
+    return (jsx(PaymentContext.Provider, __assign({ value: {
+            onClickCancel: function () { return setShowPaymentMethodForm(false); },
+            accountId: accountId,
+        } }, { children: jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxs(Fragment, { children: [jsx("div", __assign({ className: "".concat(!showPaymentMethodForm ? "px-0" : "px-4") }, { children: jsx(MiniCreditCard, { hideRemoveButton: paying, onClickRemove: function () { return onClickRemove(storedPaymentMethod); }, paymentMethodData: storedPaymentMethod }) })), paying && storedPaymentMethod ? (jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethod })) : (
+                    //if not paying and payment method is saved, show Collapse
+                    jsx(Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? "1" : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsx(Panel, __assign({ header: jsx(Fragment, { children: !showPaymentMethodForm ? (jsx("div", __assign({ className: "pt-4" }, { children: jsxs(Button, __assign({ onClick: function () {
+                                            setShowPaymentMethodForm(true);
+                                        }, type: "default", className: "w-full" }, { children: [storedPaymentMethod ? "Update" : "Add", " payment method"] })) }))) : null }), showArrow: false }, { children: jsx("div", { children: selectedPaymentMethod ? (jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [showPaymentMethodSelector && (jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectedPaymentMethod })), jsx("div", __assign({ className: "flex flex-col" }, { children: jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, paymentMethod: selectedPaymentMethod }) }))] }))) : (jsx("div", { children: "No payment method selected" })) }) }), "1") })))] }) })) })));
 };
 
 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";
@@ -2850,9 +2774,8 @@ var checkout = function (_a) {
     });
 };
 
-var InvoiceCheckoutContext = createContext({});
 var InvoiceCheckout = function (_a) {
-    var isSaving = _a.isSaving, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, setIsSaving = _a.setIsSaving, preCheckout = _a.preCheckout, setIsPreCheckoutLoading = _a.setIsPreCheckoutLoading, isPreCheckoutLoading = _a.isPreCheckoutLoading, payImmediatelyGivenInvoice = _a.payImmediatelyGivenInvoice, checkoutButtonName = _a.checkoutButtonName, entityId = _a.entityId;
+    var onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, entityId = _a.entityId;
     var _b = useContext(BunnyContext), apiHost = _b.apiHost, token = _b.token;
     var checkoutMutation = useMutation({
         mutationFn: function (_a) {
@@ -2916,14 +2839,7 @@ var InvoiceCheckout = function (_a) {
             });
         });
     };
-    return (jsx(InvoiceCheckoutContext.Provider, __assign({ value: {
-            preCheckout: preCheckout,
-            payImmediatelyGivenInvoice: payImmediatelyGivenInvoice,
-            checkoutButtonName: checkoutButtonName,
-            invoice: invoice,
-            setIsPreCheckoutLoading: setIsPreCheckoutLoading,
-            isPreCheckoutLoading: isPreCheckoutLoading,
-        } }, { children: jsx(PaymentForm, { entityId: entityId, isSaving: isSaving, onPaymentSuccess: handleCheckout, onFail: onFail, invoice: invoice, setIsSaving: setIsSaving }) })));
+    return (jsx("div", __assign({ className: "w-full pt-12" }, { children: jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: handleCheckout, onFail: onFail, invoice: invoice }) })));
 };
 
 var fetchPDF = function (window, apiEndpoint, invoiceUuid) { return __awaiter(void 0, void 0, void 0, function () {
@@ -2969,31 +2885,39 @@ function InvoicePDF(_a) {
         }, title: "Invoice PDF", width: "100%" }));
 }
 
-var quoteMetaDescription = function (vendorName) {
-    return "View this quote on the ".concat(vendorName, " customer portal. Powered by Bunny");
-};
-var quoteMetaTitle = function (_a) {
-    var documentName = _a.documentName, vendorName = _a.vendorName;
-    return vendorName + " " + documentName;
-};
-
-function ActualInvoice(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId;
-    useContext(BunnyContext).window;
-    var isMobile = useIsMobile();
-    var _b = useState(false), isSaving = _b[0], setIsSaving = _b[1];
+var InvoiceQuoteContext = createContext({});
+function Invoice(_a) {
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c;
+    return (jsx(HelmetProvider, { children: jsx(InvoiceQuoteContext.Provider, __assign({ value: {
+                id: id,
+                invoiceQuoteViewComponent: invoiceQuoteViewComponent,
+                backButtonName: backButtonName,
+                onBackButtonClick: onBackButtonClick,
+                onInvoiceDownloadError: onInvoiceDownloadError,
+                onPaymentSuccess: onPaymentSuccess,
+                entityId: entityId,
+                shadow: shadow,
+                className: className,
+                hideDownloadButton: hideDownloadButton,
+            } }, { children: jsx(ActualInvoice, {}) })) }));
+}
+function ActualInvoice() {
+    // Context
     var queryClient = useQueryClient();
-    var _c = useContext(BunnyContext), apiHost = _c.apiHost, token = _c.token, onErrorNavigate = _c.onErrorNavigate;
+    var _a = useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, className = _a.className;
+    var _b = useContext(BunnyContext), apiHost = _b.apiHost, token = _b.token, onTokenExpired = _b.onTokenExpired;
+    // Local state
+    var isMobile = useIsMobile();
+    // Hooks
     var showSuccessNotification = useSuccessNotification();
-    var handleAllErrorFormats = useAllErrorFormats(onErrorNavigate ||
-        (function (url) {
-            console.log("navigate to", url, " not implemented");
-        }));
+    var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
     // Queries
-    var _d = useQuery({
+    var _c = useQuery({
         queryKey: QueryKeyFactory.default.createFormattedInvoiceKey(token, id),
         queryFn: function () { return getFormattedInvoice({ id: id, token: token, apiHost: apiHost }); },
-    }), formattedInvoice = _d.data, error = _d.error;
+    }), formattedInvoice = _c.data, error = _c.error;
+    // Derived state
+    var isInvoicePayable = PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || "");
     if (error) {
         return jsxs("div", { children: ["Error loading invoice: ", error.message] });
     }
@@ -3017,19 +2941,12 @@ function ActualInvoice(_a) {
     var onFail = function (error) {
         handleAllErrorFormats(error.message);
     };
-    // Derived state
-    var isInvoicePayable = PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || "");
     return (jsxs(Fragment, { children: [jsxs(Helmet, { children: [jsxs("title", { children: [formattedInvoice.vendorName, " ", DOCUMENT_NAME$1.INVOICE] }), jsx("meta", { name: "description", content: quoteMetaDescription(formattedInvoice.vendorName) }), jsx("meta", { property: "og:type", content: "website" }), jsx("meta", { property: "og:title", content: quoteMetaTitle({
                             vendorName: formattedInvoice.vendorName,
                             documentName: DOCUMENT_NAME$1.INVOICE,
-                        }) }), jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedInvoice.vendorName) })] }), jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb") }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), !isMobile && isInvoicePayable && (jsx(Divider, { className: "h-full", type: "vertical" })), isInvoicePayable && (jsx(InvoiceCheckout, { invoice: formattedInvoice, isSaving: isSaving, onFail: function (error) {
+                        }) }), jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedInvoice.vendorName) })] }), jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), !isMobile && isInvoicePayable && (jsx(Divider, { className: "h-full", type: "vertical" })), isInvoicePayable && (jsx(InvoiceCheckout, { invoice: formattedInvoice, onFail: function (error) {
                             onFail(error);
-                            setIsSaving(false);
-                        }, onSuccess: onSuccess, setIsSaving: setIsSaving, entityId: entityId }))] }))] }));
-}
-function Invoice(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick; _a.onInvoiceDownloadError; var onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId;
-    return (jsx(HelmetProvider, { children: jsx(ActualInvoice, { id: id, invoiceQuoteViewComponent: invoiceQuoteViewComponent, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick, onPaymentSuccess: onPaymentSuccess, entityId: entityId }) }));
+                        }, onSuccess: onSuccess, entityId: entityId }))] }))] }));
 }
 
 var MUTATION$7 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
@@ -3047,6 +2964,9 @@ var getFormattedQuote = function (_a) {
                     })];
                 case 1:
                     response = _b.sent();
+                    if (response === null || response === void 0 ? void 0 : response.formattedQuote.error) {
+                        throw new Error(response === null || response === void 0 ? void 0 : response.formattedQuote.error);
+                    }
                     return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedQuote];
             }
         });
@@ -3067,17 +2987,14 @@ var useSigningPlugins = function (_a) {
 };
 
 var useSendAcceptQuote = function (_a) {
-    var entityId = _a.entityId, onErrorNavigate = _a.onErrorNavigate, quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
+    var entityId = _a.entityId, onTokenExpired = _a.onTokenExpired, quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
     // Hooks
     var graphQLMutation = useGraphQLmutation(function () {
         console.log("navigate in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
     }, apiHost || "", function () {
         console.log("onError in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
     });
-    var handleAllErrorFormats = useAllErrorFormats(onErrorNavigate ||
-        (function (url) {
-            console.log("navigate to", url, " not implemented");
-        }));
+    var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
     var signingPlugins = useSigningPlugins({ entityId: entityId, apiHost: apiHost, token: token });
     var queryClient = useQueryClient();
     // Local state
@@ -3190,27 +3107,19 @@ var useSigningComplete = function (_a) {
     }, [data, eventParam, queryClient, token]);
 };
 
-var dayjs_min = {exports: {}};
-
-(function (module, exports) {
-!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
-}(dayjs_min));
-
-var dayjs = dayjs_min.exports;
-
 var useIsExpired = function (expiresAt) {
     return dayjs(expiresAt).diff(dayjs(dayjs().format("YYYY-MM-DD"))) < 0;
 };
 
 var PandadocPollingModal = function (_a) {
     var isVisible = _a.isVisible, setVisible = _a.setVisible, id = _a.id;
-    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, onErrorNavigate = _b.onErrorNavigate;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired;
     var graphQLMutation = useGraphQLmutation(function () {
         console.log("graphQLMutation navigateOnTokenExpired not yet implemented");
     }, apiHost || "", function () {
         console.log("graphQLMutation onError not yet implemented");
     });
-    var handleAllErrorFormats = useAllErrorFormats(onErrorNavigate);
+    var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
     var _c = useState(0), numberOfPolls = _c[0], setNumberOfPolls = _c[1];
     var _d = useState(""), infoMessage = _d[0], setInfoMessage = _d[1];
     useEffect(function () {
@@ -3290,58 +3199,82 @@ var DOCUMENT_NAME;
     DOCUMENT_NAME["QUOTE"] = "quote";
 })(DOCUMENT_NAME || (DOCUMENT_NAME = {}));
 
+var Text$c = Typography.Text;
 var documentName = DOCUMENT_NAME.QUOTE;
+styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
+function Quote(_a) {
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c;
+    return (jsx(HelmetProvider, { children: jsx(InvoiceQuoteContext.Provider, __assign({ value: {
+                id: id,
+                invoiceQuoteViewComponent: invoiceQuoteViewComponent,
+                onInvoiceDownloadError: onInvoiceDownloadError,
+                onPaymentSuccess: onPaymentSuccess,
+                entityId: entityId,
+                shadow: shadow,
+                className: className,
+                hideDownloadButton: hideDownloadButton,
+            } }, { children: jsx(ActualQuote, { entityId: entityId }) })) }));
+}
 function ActualQuote(_a) {
+    var _this = this;
     var _b, _c;
-    var id = _a.id, entityId = _a.entityId;
-    var _d = useContext(BunnyContext), token = _d.token, apiHost = _d.apiHost, onErrorNavigate = _d.onErrorNavigate;
+    var entityId = _a.entityId;
+    // Context
+    var _d = useContext(BunnyContext), token = _d.token, apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired;
     var entityBranding = useContext(BrandContext);
-    var isMobile = useIsMobile();
+    var _e = useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton;
     // Queries
-    var _e = useQuery({
+    var _f = useQuery({
         queryKey: QueryKeyFactory.default.createQuoteKey(token, id),
-        queryFn: function () { return getFormattedQuote({ token: token, apiHost: apiHost, id: id }); },
+        queryFn: function () { return __awaiter(_this, 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*/, getFormattedQuote({ token: token, apiHost: apiHost, id: id })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                    case 2:
+                        error_1 = _a.sent();
+                        showErrorNotification(error_1.message);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); },
         placeholderData: keepPreviousData,
-    }), data = _e.data, isLoading = _e.isLoading;
+    }), data = _f.data, isLoading = _f.isLoading;
     var formattedQuote = data;
     // Hooks
     var downloadFile = useDownloadFile(id);
     var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
-    var _f = useSendAcceptQuote({
+    var _g = useSendAcceptQuote({
         entityId: entityId,
         token: token,
-        onErrorNavigate: onErrorNavigate ||
-            (function (url) {
-                console.log("navigate to", url, " not implemented");
-            }),
+        onTokenExpired: onTokenExpired,
         apiHost: apiHost,
         quoteId: id,
-    }), acceptBoxVisible = _f.acceptBoxVisible, isAccepting = _f.isAccepting, sendAccept = _f.sendAccept, setAcceptBoxVisible = _f.setAcceptBoxVisible, setIsAccepting = _f.setIsAccepting, startAcceptance = _f.startAcceptance, pandadocPollingModalVisible = _f.pandadocPollingModalVisible, setPandadocPollingModalVisible = _f.setPandadocPollingModalVisible;
+    }), acceptBoxVisible = _g.acceptBoxVisible, isAccepting = _g.isAccepting, sendAccept = _g.sendAccept, setAcceptBoxVisible = _g.setAcceptBoxVisible, setIsAccepting = _g.setIsAccepting, startAcceptance = _g.startAcceptance, pandadocPollingModalVisible = _g.pandadocPollingModalVisible, setPandadocPollingModalVisible = _g.setPandadocPollingModalVisible;
     useSigningComplete({ data: formattedQuote, token: token });
+    var isMobile = useIsMobile();
+    var showErrorNotification = useErrorNotification();
     if (!formattedQuote || isLoading) {
         return jsx(Fragment, {});
     }
+    // Derived state
+    var isAccepted = formattedQuote.state === "ACCEPTED";
     return (jsxs(Fragment, { children: [jsxs(Helmet, { children: [jsxs("title", { children: [formattedQuote.vendorName, " ", documentName] }), jsx("meta", { name: "description", content: quoteMetaDescription(formattedQuote.vendorName) }), jsx("meta", { property: "og:type", content: "website" }), jsx("meta", { property: "og:title", content: quoteMetaTitle({
                             vendorName: formattedQuote.vendorName,
                             documentName: documentName,
-                        }) }), jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedQuote.vendorName) })] }), jsxs("div", __assign({ className: "flex shadow-padding-x ".concat(isMobile ? "flex-col gap-1" : "items-center gap-2", " justify-end pb-4"), id: "acceptance", style: {
-                    color: entityBranding.secondaryColor,
-                } }, { children: [formattedQuote.state === "ACCEPTED" ||
-                        formattedQuote.state === "APPLIED" ? (jsxs("div", { children: [formattedQuote.state === "ACCEPTED" &&
-                                formattedQuote.acceptedAt &&
-                                "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)), formattedQuote.state === "APPLIED" &&
-                                formattedQuote.acceptedAt &&
-                                "Quote is now applied. Accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt))] })) : null, jsxs("div", __assign({ className: isMobile
-                            ? "flex w-full justify-between gap-2"
-                            : "flex items-center justify-end gap-2" }, { children: [!isMobile ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined$1, {}), onClick: function () { return downloadFile(apiHost + "/api/pdf/quote", token); } }, { children: "Download" }))) : null, formattedQuote.state !== "ACCEPTED" &&
-                                formattedQuote.state !== "APPLIED" ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] }))] })), jsx("div", __assign({ className: "flex ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb") }, { children: jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
-                            return (jsx(Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
-                        }) }))) : null })) })), jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
-}
-styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
-function Quote(_a) {
-    var entityId = _a.entityId, id = _a.id;
-    return (jsx(HelmetProvider, { children: jsx(ActualQuote, { entityId: entityId, id: id }) }));
+                        }) }), jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedQuote.vendorName) })] }), jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(className) }, { children: [jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
+                            color: entityBranding.secondaryColor,
+                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$c, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile
+                                    ? "flex w-full justify-end gap-2"
+                                    : "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined$1, {}), onClick: function () {
+                                            return downloadFile(apiHost + "/api/pdf/quote", token);
+                                        } }, { children: "Download" }))) : null, !isAccepted ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] })))] })), jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
+                                return (jsx(Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
+                            }) }))) : null }))] })), jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
 var templateObject_1$4;
 
@@ -3396,21 +3329,14 @@ var getTransactions = function (filter, token, apiHost, kindsToShow) { return __
     });
 }); };
 
-var Text$b = Typography.Text;
-var PageHeaderWithActions = function (_a) {
-    var children = _a.children, title = _a.title;
-    var isMobile = useIsMobile();
-    return (jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsx(PageSubTitle, { title: title }), children] })));
-};
-var PageSubTitle = function (_a) {
-    var title = _a.title;
-    var secondaryColor = useContext(BrandContext).secondaryColor;
-    var darkMode = useContext(BunnyContext).darkMode;
-    return (jsx(Text$b, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
-};
+var TransactionsListContext = createContext({});
 
 var StateTag = function (_a) {
     var state = _a.state;
+    var transactionStateRenderer = useContext(TransactionsListContext).transactionStateRenderer;
+    if (transactionStateRenderer) {
+        return jsx(Fragment, { children: transactionStateRenderer(state) });
+    }
     return jsx(Tag, __assign({ color: getColor(state) }, { children: capitalize(startCase(state)) }));
 };
 var getColor = function (state) {
@@ -3439,12 +3365,10 @@ var getColor = function (state) {
     }
 };
 
-var TransactionsListContext = createContext({});
-
-var Text$a = Typography.Text;
+var Text$b = Typography.Text;
 var TransactionDate = function (_a) {
     var date = _a.date;
-    return jsx(Text$a, __assign({ className: "text-sm" }, { children: formatDate(date) }));
+    return jsx(Text$b, __assign({ className: "text-sm" }, { children: formatDate(date) }));
 };
 
 // TODO: delete
@@ -3478,10 +3402,10 @@ var TransactionGridCell = styled.div.withConfig({
 })(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"], ["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) { return (props.right ? "flex-end" : "flex-start"); }, function (props) { return (props.right ? "right" : "left"); }, SLATE_600);
 var templateObject_1$3;
 
-var Text$9 = Typography.Text;
+var Text$a = Typography.Text;
 var TransactionsEmptyState = function () {
     var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
-    return (jsx(Text$9, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
+    return (jsx(Text$a, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
 };
 
 var isInvoice = function (transaction) {
@@ -3498,7 +3422,7 @@ var TransactionRowTitle = function (_a) {
     return (jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
 };
 
-var Text$8 = Typography.Text;
+var Text$9 = Typography.Text;
 var TransactionsListDesktop = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var columns = useContext(TransactionsListContext).columns;
@@ -3518,11 +3442,11 @@ var TransactionsListDesktop = function (_a) {
                 backgroundColor: index % 2 === 0
                     ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
                     : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-            } }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transaction.createdAt }) })), jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$8, { children: capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$8, { children: formatCurrency(((_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _a === void 0 ? void 0 : _a.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
+            } }, { children: [!showDateAndTitle && !showState && !showAmount && !showDownload && (jsx(TransactionGridCell, { children: jsx(Text$9, { children: "No columns selected" }) })), showDateAndTitle && (jsxs(Fragment, { children: [jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transaction.createdAt }) })), jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$9, { children: capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$9, { children: 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 Text$7 = Typography.Text;
+var Text$8 = Typography.Text;
 var TransactionsListMobile = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var columns = useContext(TransactionsListContext).columns;
@@ -3541,20 +3465,23 @@ var TransactionsListMobile = function (_a) {
                 backgroundColor: index % 2 === 0
                     ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
                     : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-            } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(Text$7, { children: capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsx(Text$7, { children: "\u00B7" }), showAmount && (jsx(Text$7, { children: formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
+            } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(Text$8, { children: capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsx(Text$8, { children: "\u00B7" }), showAmount && (jsx(Text$8, { children: formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
     });
 };
 
+var Text$7 = Typography.Text;
+var DISPLAY_WIDTH = 1200;
 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 ? [
+    var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date-and-title", "state", "amount"] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? "shadow-md" : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
         TransactionKind.INVOICE,
         TransactionKind.PAYMENT,
         TransactionKind.REFUND,
         TransactionKind.WRITE_OFF,
-    ] : _h, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage, entityId = _a.entityId;
+    ] : _j, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage, entityId = _a.entityId;
     var contextValues = {
         showSearchBar: showSearchBar,
         showTitle: showTitle,
+        title: title,
         transactionComponent: transactionComponent,
         columns: columns,
         className: className,
@@ -3569,28 +3496,25 @@ function Transactions(_a) {
         noTransactionsMessage: noTransactionsMessage,
         entityId: entityId,
     };
-    return (jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsWrapper, {}) })));
-}
-function TransactionsWrapper() {
-    var _a = useContext(TransactionsListContext), kindsToShow = _a.kindsToShow, filterFromContext = _a.filter;
-    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
+    var _k = useContext(BunnyContext), token = _k.token, apiHost = _k.apiHost;
     // Local state
-    var _c = useState(""), search = _c[0], setSearch = _c[1];
-    var filter = filterFromContext ||
+    var _l = useState(""), search = _l[0], setSearch = _l[1];
+    var filterValue = filter ||
         (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
     // Queries
     var data = useQuery({
         queryKey: ["transactions", token, filter],
-        queryFn: function () { return getTransactions(filter, token, apiHost, kindsToShow); },
+        queryFn: function () { return getTransactions(filterValue, token, apiHost, kindsToShow); },
         placeholderData: keepPreviousData,
     }).data;
-    return (jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }));
+    return (jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }) })));
 }
 function TransactionsDisplay(_a) {
-    var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search, title = _a.title;
-    var _b = useContext(TransactionsListContext), showSearchBar = _b.showSearchBar, showTitle = _b.showTitle, transactionComponent = _b.transactionComponent, useModal = _b.useModal, suppressTransactionDisplay = _b.suppressTransactionDisplay, className = _b.className, shadow = _b.shadow, searchBarClassName = _b.searchBarClassName, style = _b.style, onTransactionClick = _b.onTransactionClick, entityId = _b.entityId;
+    var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search;
+    var _b = useContext(TransactionsListContext), showSearchBar = _b.showSearchBar, showTitle = _b.showTitle, title = _b.title, transactionComponent = _b.transactionComponent, useModal = _b.useModal, suppressTransactionDisplay = _b.suppressTransactionDisplay, className = _b.className, shadow = _b.shadow, searchBarClassName = _b.searchBarClassName, style = _b.style, onTransactionClick = _b.onTransactionClick, entityId = _b.entityId, onTransactionDisplayClose = _b.onTransactionDisplayClose;
     var columns = useContext(TransactionsListContext).columns;
     var darkMode = useContext(BunnyContext).darkMode;
+    var secondaryColor = useContext(BrandContext).secondaryColor;
     // Local state
     var _c = useState(null), selectedTransaction = _c[0], setSelectedTransaction = _c[1];
     var _d = useState(false), drawerOpen = _d[0], setDrawerOpen = _d[1];
@@ -3640,38 +3564,48 @@ function TransactionsDisplay(_a) {
         var kind = selectedTransaction.kind.toLowerCase();
         return kind.charAt(0).toUpperCase() + kind.slice(1);
     };
-    return (jsxs("div", __assign({ style: style }, { children: [jsx(PageHeaderWithActions, __assign({ title: title || (showTitle ? "Past transactions" : undefined) }, { children: showSearchBar && (jsx("div", { children: jsx(Input, { className: searchBarClassName
-                            ? searchBarClassName
-                            : "border border-slate-200", onChange: function (e) {
-                            if (isNaN(Number(e.target.value))) {
-                                return;
-                            }
-                            onSearchValueChanged(e.target.value);
-                        }, prefix: jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
-                            minWidth: "300px",
-                        }, value: search }) })) })), jsx("div", __assign({ className: "flex w-full shadow-padding-xb ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: jsx("div", __assign({ className: "grid w-full rounded-md overflow-auto ".concat("shadow-".concat(shadow)), style: {
-                        gridTemplateColumns: gridTemplateColumns(),
-                        backgroundColor: "var(--row-background".concat(darkMode ? "-dark" : "", ")"),
-                    } }, { children: isMobile ? (jsx(Fragment, { children: TransactionsListMobile({
-                            transactions: transactions,
-                            onTransactionClick: handleTransactionClick,
-                        }) })) : (jsx(Fragment, { children: TransactionsListDesktop({
-                            transactions: transactions,
-                            onTransactionClick: handleTransactionClick,
-                        }) })) })) })), useModal ? (jsx(Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "", entityId: entityId }) }))) : (jsx(Drawer, __assign({ title: drawerTitle(), onClose: function () { return setDrawerOpen(false); }, open: drawerOpen, width: 900 }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsx(Invoice, { id: selectedTransaction.transactionableId, entityId: entityId })) : (jsxs(Card$1, __assign({ className: "shadow-md" }, { children: [jsx(Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Amount:" }), " ", jsx(Typography.Text, { children: formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Description:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Kind:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "State:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
+    function handleDisplayClose() {
+        onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
+        setDrawerOpen(false);
+    }
+    return (jsxs("div", __assign({ style: style }, { children: [jsxs("div", __assign({ className: "flex flex-col w-full shadow-padding-xb gap-2 ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-1" : "flex-row items-center", " justify-between") }, { children: [showTitle ? (jsx(Text$7, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsx("div", {}) // Empty div so justify-between works
+                            ), showSearchBar && (jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "") }, { children: jsx(Input, { className: searchBarClassName
+                                        ? searchBarClassName
+                                        : "border border-slate-200", onChange: function (e) {
+                                        if (isNaN(Number(e.target.value))) {
+                                            return;
+                                        }
+                                        onSearchValueChanged(e.target.value);
+                                    }, prefix: jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
+                                        minWidth: "300px",
+                                    }, value: search }) })))] }))) : null, jsx("div", __assign({ className: "grid w-full rounded-md overflow-auto ".concat(shadow), style: {
+                            gridTemplateColumns: gridTemplateColumns(),
+                            backgroundColor: "var(--row-background".concat(darkMode ? "-dark" : "", ")"),
+                        } }, { children: isMobile ? (jsx(Fragment, { children: TransactionsListMobile({
+                                transactions: transactions,
+                                onTransactionClick: handleTransactionClick,
+                            }) })) : (jsx(Fragment, { children: TransactionsListDesktop({
+                                transactions: transactions,
+                                onTransactionClick: handleTransactionClick,
+                            }) })) }))] })), useModal ? (jsx(Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null }, { children: jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "", entityId: entityId }) }))) : (jsx(Drawer, __assign({ title: drawerTitle(), onClose: handleDisplayClose, open: drawerOpen, width: DISPLAY_WIDTH }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsx(Invoice, { id: selectedTransaction.transactionableId, entityId: entityId })) : (jsxs(Card$1, __assign({ className: "shadow-md" }, { children: [jsx(Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Amount:" }), " ", jsx(Typography.Text, { children: formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Description:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Kind:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "State:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
 }
 
 function Quotes(_a) {
-    var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ["date-and-title", "amount", "download"] : _b, entityId = _a.entityId, filter = _a.filter, _c = _a.noQuotesMessage, noQuotesMessage = _c === void 0 ? "There are no quotes" : _c; _a.onQuoteClick; var quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _d = _a.shadow, shadow = _d === void 0 ? "md" : _d, _e = _a.showSearchBar, showSearchBar = _e === void 0 ? true : _e, _f = _a.showTitle, showTitle = _f === void 0 ? true : _f, style = _a.style, _g = _a.suppressQuoteDisplay, suppressQuoteDisplay = _g === void 0 ? false : _g, _h = _a.useModal, useModal = _h === void 0 ? false : _h;
+    var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ["date-and-title", "amount", "download"] : _b, entityId = _a.entityId, filter = _a.filter, _c = _a.noQuotesMessage, noQuotesMessage = _c === void 0 ? "There are no quotes" : _c, onQuoteClick = _a.onQuoteClick, quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _d = _a.shadow, shadow = _d === void 0 ? "shadow-md" : _d, _e = _a.showSearchBar, showSearchBar = _e === void 0 ? true : _e, _f = _a.showTitle, showTitle = _f === void 0 ? true : _f, _g = _a.title, title = _g === void 0 ? "Past quotes" : _g, style = _a.style, _h = _a.suppressQuoteDisplay, suppressQuoteDisplay = _h === void 0 ? false : _h, _j = _a.useModal, useModal = _j === void 0 ? false : _j;
     var apiHost = useContext(BunnyContext).apiHost;
-    var _j = useState(null), component = _j[0], setComponent = _j[1];
+    var _k = useState(null), component = _k[0], setComponent = _k[1];
     var contextValues = {
         columns: columns,
         kindsToShow: [],
         onTransactionClick: handleQuoteClick,
+        onTransactionDisplayClose: function () {
+            setComponent(jsx(Fragment, {}));
+        },
         transactionComponent: component,
+        transactionStateRenderer: quoteStateRenderer,
         showSearchBar: showSearchBar,
         showTitle: showTitle,
+        title: title,
         className: className,
         shadow: shadow,
         searchBarClassName: searchBarClassName,
@@ -3683,7 +3617,29 @@ function Quotes(_a) {
         downloadTransactionLink: function (id) { return "".concat(apiHost, "/api/pdf/quote/").concat(id); },
         entityId: entityId,
     };
+    function quoteStateRenderer(state) {
+        // "DRAFT" | "SHARED" | "VIEWED" | "ACCEPTED" | "IN_APPROVAL" | "APPROVED" | "REJECTED";
+        var getColor = function (state) {
+            switch (state) {
+                case "ACCEPTED":
+                    return "green";
+                case "IN_APPROVAL":
+                    return "orange";
+                case "APPROVED":
+                    return "green";
+                case "REJECTED":
+                    return "red";
+                case "DRAFT":
+                case "SHARED":
+                case "VIEWED":
+                default:
+                    return "blue";
+            }
+        };
+        return jsx(Tag, __assign({ color: getColor(state) }, { children: capitalize(startCase(state)) }));
+    }
     function handleQuoteClick(quote) {
+        onQuoteClick === null || onQuoteClick === void 0 ? void 0 : onQuoteClick(quote);
         if (quoteComponent) {
             setComponent(quoteComponent);
         }
@@ -3707,9 +3663,17 @@ function QuotesWrapper() {
     }).data;
     if (data === undefined)
         return null;
-    var quotesAsTransactions = data.nodes.map(function (quote) { return ({
+    // filter out quotes in draft state, they are not viewable
+    var quotes = data.nodes
+        .filter(function (quote) {
+        return quote.state !== "DRAFT";
+    })
+        .sort(function (a, b) {
+        return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+    });
+    var quotesAsTransactions = quotes.map(function (quote) { return ({
         transactionableId: quote.id,
-        state: "unapplied",
+        state: quote.state,
         amount: quote.amount || quote.amountDue,
         kind: "QUOTE",
         currencyId: quote.currencyId,
@@ -3718,7 +3682,7 @@ function QuotesWrapper() {
         },
         createdAt: quote.createdAt,
     }); });
-    return (jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search, title: "Past quotes" }));
+    return (jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
 }
 
 var DrawerHeader = function (_a) {
@@ -3726,96 +3690,19 @@ var DrawerHeader = function (_a) {
     return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx("div", __assign({ className: "text-xl" }, { children: title })), jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsx(CloseOutlined$1, {}) }))] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
 };
 
-var Card = function (_a) {
-    var children = _a.children, className = _a.className, style = _a.style;
-    var darkMode = useContext(BunnyContext).darkMode;
-    return (jsx("div", __assign({ className: "flex flex-col rounded-md shadow-md ".concat(className), style: __assign(__assign({}, style), { backgroundColor: darkMode
-                ? "var(--row-background-dark)"
-                : "var(--row-background)" }) }, { children: children })));
-};
-
-var LargeCardIcon = function () {
-    return (jsx("svg", __assign({ width: "72", height: "56", viewBox: "0 0 72 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M8 0H64C68.375 0 72 3.625 72 8V12H0V8C0 3.625 3.5 0 8 0ZM72 24V48C72 52.5 68.375 56 64 56H8C3.5 56 0 52.5 0 48V24H72ZM14 40C12.875 40 12 41 12 42C12 43.125 12.875 44 14 44H22C23 44 24 43.125 24 42C24 41 23 40 22 40H14ZM28 42C28 43.125 28.875 44 30 44H46C47 44 48 43.125 48 42C48 41 47 40 46 40H30C28.875 40 28 41 28 42Z", fill: "#E2E8F0" }) })));
-};
-
-var PlusIcon = function (_a) {
-    var color = _a.color;
-    return (jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
-};
-
-var Text$6 = Typography.Text;
-var CreditCard = function (_a) {
-    var _b, _c, _d;
-    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData;
-    var isExpired = function (paymentMethodData) {
-        // paymentMethodData.expirationDate
-        var expDate = dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate);
-        return expDate.isBefore(dayjs());
-    };
-    var isMobile = useIsMobile();
-    var apiHost = useContext(BunnyContext).apiHost;
-    return (jsxs(Card, __assign({ className: "shadow-md m-0" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [getCardImage((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) && (jsx("img", { alt: "Card", width: "24px", src: "".concat(apiHost, "/portal/").concat(getCardImage((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.issuer)) })), jsx(Text$6, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.description })] })), jsx(Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxs(Fragment, { children: [jsx(Divider, {}), jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsx(CardAttribute, { title: "EXPIRATION", value: dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).format("MM/YY") }), isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
-};
-var CardAttribute = function (_a) {
-    var title = _a.title, value = _a.value;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsx(Text$6, { children: value })] })));
-};
-var CardActions = function (_a) {
-    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
-    var isMobile = useIsMobile();
-    return (jsxs("div", __assign({ className: "flex items-center gap-6 ".concat(isMobile ? "justify-center mt-4" : "") }, { children: [jsx(Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsx(Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove payment method" })) })), jsx(Divider, { style: { height: "24px" }, type: "vertical" }), jsx(Button, __assign({ onClick: onClickUpdate, type: "primary" }, { children: "Update" }))] })));
-};
-var EmptyCard = function (_a) {
-    var onClick = _a.onClick;
-    var brandColor = useContext(BrandContext).brandColor;
-    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center w-full pt-8 px-4 pb-6 cursor-pointer bg-white shadow-md rounded-md", onClick: onClick }, { children: [jsx(LargeCardIcon, {}), jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsx(Button, __assign({ type: "link" }, { children: jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
-};
-var getCardImage = function (issuer) {
-    if (issuer === "visa")
-        return "Visa_Brandmark_Blue_RGB_2021.png";
-    else if (issuer === "mastercard")
-        return "mc_symbol_opt_73_3x.png";
-};
-
-var PaymentMethodContext = createContext({});
-
-var ActualPaymentMethod = function (_a) {
-    var entityId = _a.entityId;
-    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, graphQLClient = _b.graphQLClient, onErrorNavigate = _b.onErrorNavigate;
-    var accountId = useContext(PaymentContext).accountId;
+var PaymentMethod = function (_a) {
+    var entityId = _a.entityId, className = _a.className, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, _c = _a.cardEnabled, cardEnabled = _c === void 0 ? true : _c;
+    var _d = useContext(BunnyContext), token = _d.token, apiHost = _d.apiHost, graphQLClient = _d.graphQLClient, onTokenExpired = _d.onTokenExpired;
     // Hooks
     var queryClient = useQueryClient();
     var paymentPlugins = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }).paymentPlugins;
-    var showErrorNotification = useErrorNotification();
     var showSuccessNotification = useSuccessNotification();
-    var handleAllErrorFormats = useAllErrorFormats(onErrorNavigate);
+    var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
     var isMobile = useIsMobile();
     var data = usePaymentMethod(graphQLClient).data;
+    var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], token, apiHost);
     // Local state
-    var _c = useState(false), showModal = _c[0], setShowModal = _c[1];
-    var _d = useState(false), isSaving = _d[0], setIsSaving = _d[1];
-    var plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (paymentPlugin) { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
-    var onClickRemove = function () {
-        if (data && plugin) {
-            invokePlugin({
-                plugin: plugin,
-                method: "remove_payment_method",
-                payload: {
-                    payment_method_id: data.id,
-                    account_id: accountId,
-                },
-                token: token,
-                apiHost: apiHost,
-            })
-                .then(function () {
-                showSuccessNotification("Payment method was removed", "Success");
-                queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodKey, null);
-            })
-                .catch(function (error) {
-                showErrorNotification(error.message, "Error removing Payment Method");
-            });
-        }
-    };
+    var _e = useState(false), showModal = _e[0], setShowModal = _e[1];
     var onSuccess = function () {
         queryClient.invalidateQueries({
             queryKey: QueryKeyFactory.default.accountPaymentMethodKey,
@@ -3825,25 +3712,18 @@ var ActualPaymentMethod = function (_a) {
     };
     if (data === undefined)
         return jsx(Fragment, {});
-    return (jsxs(Fragment, { children: [data ? (jsx(CreditCard, { onClickRemove: onClickRemove, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data })) : (jsx(EmptyCard, { onClick: function () { return setShowModal(true); } })), jsx(Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
+    return (jsxs("div", __assign({ className: "".concat(className) }, { children: [data ? (jsx(CreditCard, { onClickRemove: function () { return onClickRemove(data); }, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data, shadow: shadow, cardEnabled: cardEnabled })) : (jsx(EmptyCard, { onClick: function () { return setShowModal(true); }, shadow: shadow, cardEnabled: cardEnabled })), jsx(Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
                     body: isMobile
                         ? {
                             padding: "1rem 0 0",
                         }
                         : {},
-                    wrapper: isMobile ? { width: "100vw" } : { width: "min-content" },
-                }, title: jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method" }) }, { children: jsx(PaymentForm, { entityId: entityId, isSaving: isSaving, onFail: function (error) {
+                }, title: jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method" }) }, { children: jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
                         handleAllErrorFormats(error);
-                        setIsSaving(false);
                     }, onPaymentSuccess: function () {
                         onSuccess();
-                        setIsSaving(false);
-                    }, setIsSaving: setIsSaving }) }))] }));
+                    } }) }))] })));
 };
-function PaymentMethod(_a) {
-    var entityId = _a.entityId, footer = _a.footer;
-    return (jsx(PaymentMethodContext.Provider, __assign({ value: { footer: footer } }, { children: jsx(ActualPaymentMethod, { entityId: entityId }) })));
-}
 
 var pageWrapperClassName = function (isMobile) {
     return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
@@ -3878,6 +3758,30 @@ var quoteRecalculateTaxes = function (_a) {
     });
 };
 
+var MUTATION$6 = "{\n  currentUser {\n    taxationRequiredAccountFields\n  }\n}";
+var getTaxationRequiredAccountFields = function (_a) {
+    var token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: MUTATION$6,
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _d.sent();
+                    return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
+                            ? response.currentUser
+                                .taxationRequiredAccountFields
+                            : null];
+            }
+        });
+    });
+};
+
 var useHasTaxPlugin = function (_a) {
     var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
     var plugins = usePlugins({
@@ -3888,7 +3792,7 @@ var useHasTaxPlugin = function (_a) {
     return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
 };
 
-var MUTATION$6 = "\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 MUTATION$5 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account {\n          id\n          billingCountry\n          billingState\n          billingStreet\n          billingCity\n          billingZip\n          name\n        }\n        errors\n      }\n  }\n";
 var accountUpdate = function (_a) {
     var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -3899,7 +3803,7 @@ var accountUpdate = function (_a) {
                 case 0:
                     vars = { id: accountId, attributes: attributes };
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$6,
+                            query: MUTATION$5,
                             token: token,
                             vars: vars,
                             apiHost: apiHost,
@@ -3959,11 +3863,16 @@ var FormBillingState = function (_a) {
     return (jsx(Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsx(Input, { placeholder: "State" }) })));
 };
 
+var getQuoteAmountDue = function (quote) {
+    return quote.amountDue;
+};
+
 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, entityId = _a.entityId;
+    var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, entityId = _a.entityId;
     // Context
     var isMobile = useIsMobile();
     var _b = useContext(BunnyContext), apiHost = _b.apiHost, token = _b.token;
+    var _c = useState(false), isSaving = _c[0], setIsSaving = _c[1];
     var paymentRequired = getQuoteAmountDue(quote) > 0;
     var checkoutMutation = useMutation({
         mutationFn: function (_a) {
@@ -4007,6 +3916,7 @@ var QuoteCheckout = function (_a) {
         return __awaiter(void 0, void 0, void 0, function () {
             var token_1, plugin, savePaymentMethod, metadata, paymentMethodId;
             return __generator(this, function (_b) {
+                setIsSaving(true);
                 if (pluginPaymentResponse) {
                     token_1 = pluginPaymentResponse.token, plugin = pluginPaymentResponse.plugin, savePaymentMethod = pluginPaymentResponse.savePaymentMethod, metadata = pluginPaymentResponse.metadata;
                     checkoutMutation.mutate({
@@ -4029,48 +3939,34 @@ var QuoteCheckout = function (_a) {
                 else {
                     checkoutMutation.mutate({});
                 }
+                setIsSaving(false);
                 return [2 /*return*/];
             });
         });
     };
     if (taxationRequiredAccountFields)
         return (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsx(TaxationForm, { account: account, quote: quote }) })));
-    return (jsx(Fragment, { children: paymentRequired ? (jsx(PaymentForm, { entityId: entityId, isSaving: isSaving, onFail: onFail, onPaymentSuccess: handleCheckout, quote: quote, setIsSaving: setIsSaving })) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "shadow-padding-x" : "") }, { children: [jsx(Button, __assign({ disabled: isSaving, onClick: function () {
-                            setIsSaving(true);
+    return (jsx(Fragment, { children: paymentRequired ? (jsx(PaymentForm, { entityId: entityId, onFail: onFail, onPaymentSuccess: handleCheckout, quote: quote })) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "shadow-padding-x" : "") }, { children: [jsx(Button, __assign({ onClick: function () {
                             handleCheckout({});
                         }, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsx("div", __assign({ className: "text-xs text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
 };
-
-var MUTATION$5 = "{\n  currentUser {\n    taxationRequiredAccountFields\n  }\n}";
-var getTaxationRequiredAccountFields = function (_a) {
-    var token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
-                case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$5,
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _d.sent();
-                    return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
-                            ? response.currentUser
-                                .taxationRequiredAccountFields
-                            : null];
-            }
-        });
-    });
+var PaymentFormWrapper = function (_a) {
+    var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
+    var isMobile = useIsMobile();
+    return (jsx("div", __assign({ className: "flex flex-col gap-6 shrink-0 ".concat(isMobile ? "w-full shadow-padding-xb" : "", " ").concat(className), style: __assign({}, (isMobile
+            ? setMaxHeight
+                ? { maxHeight: "60vh" }
+                : {}
+            : {
+                width: "350px",
+            })) }, { children: children })));
 };
 
 var queryKeyFactory = QueryKeyFactory.default;
 var Checkout = function (_a) {
     var _b, _c;
     var entityId = _a.entityId, onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, token = _a.token, _d = _a.quantity, quantity = _d === void 0 ? 0 : _d;
-    var _e = useContext(BunnyContext), apiHost = _e.apiHost; _e.window;
-    var _f = useState(false), isSaving = _f[0], setIsSaving = _f[1];
+    var apiHost = useContext(BunnyContext).apiHost;
     var isMobile = useIsMobile();
     var hasTaxPlugin = useHasTaxPlugin({
         entityId: entityId,
@@ -4079,20 +3975,20 @@ var Checkout = function (_a) {
     });
     var queryClient = useQueryClient();
     // Queries
-    var _g = useQuery({
+    var _e = useQuery({
         queryKey: ["getTaxationRequiredAccountFields", token],
         queryFn: function () { return getTaxationRequiredAccountFields({ token: token, apiHost: apiHost }); },
         enabled: Boolean(quote),
         staleTime: 0,
-    }), taxationRequiredAccountFields = _g.data, isLoadingTaxationRequiredAccountFields = _g.isLoading;
-    var _h = useQuery({
+    }), taxationRequiredAccountFields = _e.data, isLoadingTaxationRequiredAccountFields = _e.isLoading;
+    var _f = useQuery({
         queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
         queryFn: function () {
             return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, token: token, apiHost: apiHost });
         },
         enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
             ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
-    }), account = _h.data, isLoadingAccount = _h.isLoading;
+    }), account = _f.data, isLoadingAccount = _f.isLoading;
     useQuery({
         queryKey: queryKeyFactory.createQuoteTaxCalculateKey(quote === null || quote === void 0 ? void 0 : quote.id),
         queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -4129,30 +4025,24 @@ var Checkout = function (_a) {
         return null;
     return (jsx("div", __assign({ className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 bg-slate-50 overflow-auto", style: {
             zIndex: 1001,
-        } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsx(CloseOutlined$1, { className: "text-base shadow-padding-xb", onClick: onCancel }) })), jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "flex-col" : "shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "" })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsx(Divider, { className: "h-full", type: "vertical" })), invoice ? (jsx(InvoiceCheckout, { invoice: invoice, isSaving: isSaving, onFail: function (error) {
+        } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsx(CloseOutlined$1, { className: "text-base shadow-padding-xb", onClick: onCancel }) })), jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "flex-col" : "shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "" })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsx(Divider, { className: "h-full", type: "vertical" })), invoice ? (jsx(InvoiceCheckout, { invoice: invoice, onFail: function (error) {
                                 onFail(error);
-                                setIsSaving(false);
                             }, onSuccess: function (_a) {
                                 var savePaymentMethod = _a.savePaymentMethod;
                                 onSuccess({ savePaymentMethod: savePaymentMethod });
-                                setIsSaving(false);
-                            }, setIsSaving: setIsSaving, entityId: entityId })) : quote ? (jsx(QuoteCheckout, { account: account, entityId: entityId, isSaving: isSaving, onFail: function (error) {
+                            }, entityId: entityId })) : quote ? (jsx(QuoteCheckout, { account: account, entityId: entityId, 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 })) : (jsx(PaymentForm, { entityId: entityId, isSaving: isSaving, onFail: function (error) {
+                            }, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsx(PaymentForm, { entityId: entityId, 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}"; };
@@ -4190,7 +4080,32 @@ var accountSignup = function (_a) {
     });
 };
 
-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 MUTATION$3 = "\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, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response, errors;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: MUTATION$3,
+                        token: token,
+                        vars: { tenantCode: tenantCode, expiry: expiry, returnUrl: returnUrl },
+                        apiHost: apiHost,
+                    })];
+                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 MUTATION$2 = 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    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    tenant {\n      code\n    }\n    errors\n  }\n}"; };
 var quoteAccountSignup = function (_a) {
     var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -4206,7 +4121,7 @@ var quoteAccountSignup = function (_a) {
                         billingContact: billingContact,
                     };
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$3(),
+                            query: MUTATION$2(),
                             token: token,
                             vars: vars,
                             apiHost: apiHost,
@@ -4222,7 +4137,7 @@ var quoteAccountSignup = function (_a) {
     });
 };
 
-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 MUTATION$1 = 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, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -4230,7 +4145,7 @@ var getPriceList = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$2(),
+                        query: MUTATION$1(),
                         token: token,
                         vars: { code: code },
                         apiHost: apiHost,
@@ -4244,8 +4159,8 @@ var getPriceList = function (_a) {
 };
 
 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, entityId = _a.entityId;
-    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: accountId && (jsx(PaymentContext.Provider, __assign({ value: { accountId: accountId, displayPayButtonNameAnyways: true } }, { children: jsx(PaymentForm, { entityId: entityId, isSaving: paying, setIsSaving: setIsPaying, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSaveSuccess }) }))) })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
+    var quote = _a.quote, handlePaymentSaveSuccess = _a.handlePaymentSaveSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, entityId = _a.entityId, accountId = _a.accountId;
+    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSaveSuccess, accountId: accountId, quote: quote }) })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
 }
 function InitialSignupForm(_a) {
     var onSubmit = _a.onSubmit, submitting = _a.submitting;
@@ -4260,7 +4175,7 @@ function InitialSignupForm(_a) {
         var _b = e.target, name = _b.name, value = _b.value;
         setFormData(__assign(__assign({}, formData), (_a = {}, _a[name] = value, _a)));
     };
-    return (jsxs(Form, __assign({ className: "flex w-1/2 flex-col justify-between h-full", onFinish: function () { return onSubmit(formData); } }, { children: [jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsx(Form.Item, __assign({ rules: [{ required: true, message: "Please input your first name!" }], initialValue: formData.firstName }, { children: jsx(Input, { placeholder: "First name", value: formData.firstName, onChange: function (e) {
+    return (jsxs(Form, __assign({ className: "flex flex-col justify-between h-full w-full", onFinish: function () { return onSubmit(formData); } }, { children: [jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsx(Form.Item, __assign({ rules: [{ required: true, message: "Please input your first name!" }], initialValue: formData.firstName }, { children: jsx(Input, { placeholder: "First name", value: formData.firstName, onChange: function (e) {
                                 handleInputChange(e);
                                 setFormData(__assign(__assign({}, formData), { firstName: e.target.value }));
                             } }) })), jsx(Form.Item, __assign({ rules: [{ required: true, message: "Please input your last name!" }], initialValue: formData.lastName }, { children: jsx(Input, { placeholder: "Last name", value: formData.lastName, onChange: function (e) {
@@ -4280,61 +4195,40 @@ function InitialSignupForm(_a) {
                             } }) }))] })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", htmlType: "submit", loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
 }
 
-var Title = Typography.Title, Text$5 = Typography.Text;
+var Title = Typography.Title, Text$6 = Typography.Text;
 function PaymentSuccessDisplay(_a) {
     var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style;
     var window = useContext(BunnyContext).window;
-    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, "USD"), " successful"] })), returnUrl && (jsxs(Text$5, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
+    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, "USD"), " successful"] })), returnUrl && (jsxs(Text$6, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
 }
 
-var Text$4 = Typography.Text;
+var Text$5 = Typography.Text;
 function PriceListDisplay(_a) {
     var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
     if (!priceListData)
         return null;
-    return (jsx(Fragment, { children: jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsx(Text$4, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxs(Text$4, __assign({ className: "font-bold text-xl" }, { children: [formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxs(Text$4, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$4, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))] })) })) }));
+    return (jsx(Fragment, { children: jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsx(Text$5, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxs(Text$5, __assign({ className: "font-bold text-xl" }, { children: [formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxs(Text$5, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$5, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))] })) })) }));
 }
 
-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, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response, errors;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$1,
-                        token: token,
-                        vars: { tenantCode: tenantCode, expiry: expiry, returnUrl: returnUrl },
-                        apiHost: apiHost,
-                    })];
-                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 = useErrorNotification();
 function Signup(_a) {
-    var companyName = _a.companyName, entityId = _a.entityId, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl;
+    var companyName = _a.companyName, entityId = _a.entityId, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, style = _a.style;
     // Hooks
-    var _b = useContext(BunnyContext), apiHost = _b.apiHost, token = _b.token; _b.window;
+    var _d = useContext(BunnyContext), apiHost = _d.apiHost, token = _d.token, graphQLClient = _d.graphQLClient;
     var isMobile = useIsMobile();
     var topNavImageUrl = useContext(BrandContext).topNavImageUrl;
-    var _c = useState(undefined), quote = _c[0], setQuote = _c[1];
-    var _d = useState(undefined), accountId = _d[0], setAccountId = _d[1];
-    var _e = useState(undefined), quoteId = _e[0], setQuoteId = _e[1];
-    var _f = useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
-    var _g = useState(undefined), formData = _g[0], setFormData = _g[1];
-    var _h = useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
-    var _j = useState(false), paying = _j[0], setIsPaying = _j[1];
-    var _k = useState(false), purchaseSucceeded = _k[0], setPurchaseSucceeded = _k[1];
+    var _e = useState(undefined), quote = _e[0], setQuote = _e[1];
+    var _f = useState(undefined), accountId = _f[0], setAccountId = _f[1];
+    var _g = useState(undefined), quoteId = _g[0], setQuoteId = _g[1];
+    var _h = useState(undefined), portalSessionToken = _h[0], setPortalSessionToken = _h[1];
+    var _j = useState(undefined), formData = _j[0], setFormData = _j[1];
+    var _k = useState(false), proceedingToPayment = _k[0], setProceedingToPayment = _k[1];
+    var _l = useState(false), purchaseSucceeded = _l[0], setPurchaseSucceeded = _l[1];
+    var _m = useState(undefined), paymentMethodGraphQLClient = _m[0], setPaymentMethodGraphQLClient = _m[1];
+    var paymentMethod = usePaymentMethod(paymentMethodGraphQLClient || graphQLClient, accountId).data;
+    var queryClient = useQueryClient();
+    // console.log("signup paymentMethod", paymentMethod);
+    console.log("signup accountId", accountId);
     // Queries
     var priceListData = useQuery({
         queryKey: ["priceList", priceListCode],
@@ -4373,6 +4267,12 @@ function Signup(_a) {
                     case 2:
                         portalSessionToken = _a.sent();
                         setPortalSessionToken(portalSessionToken);
+                        setPaymentMethodGraphQLClient(createGraphQLClient(portalSessionToken, apiHost || ""));
+                        // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
+                        // to instead use paymentMethods from portalSessionToken.
+                        queryClient.invalidateQueries({
+                            queryKey: QueryKeyFactory.default.accountPaymentMethodKey,
+                        });
                         setQuoteId(data.quote.id);
                         setProceedingToPayment(false);
                         setQuote({
@@ -4385,11 +4285,10 @@ function Signup(_a) {
         });
     }
     function handlePaymentSaveSuccess(paymentSuccess) {
-        var _a;
         return __awaiter(this, void 0, void 0, function () {
             var response, plugin;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
                         if (!formData) {
                             throw new Error("Form data is required");
@@ -4410,14 +4309,13 @@ function Signup(_a) {
                                 apiHost: apiHost,
                                 entityId: entityId,
                                 quoteId: quoteId,
-                                paymentMethodId: (_a = paymentSuccess.savedPaymentMethodResponse) === null || _a === void 0 ? void 0 : _a.paymentMethodId.toString(),
+                                paymentMethodId: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
                                 pluginId: plugin.id.toString(),
                                 priceListCode: priceListCode,
                                 accountId: accountId,
                             })];
                     case 1:
-                        _b.sent();
-                        setIsPaying(false);
+                        _a.sent();
                         setPurchaseSucceeded(true);
                         return [2 /*return*/];
                 }
@@ -4426,14 +4324,14 @@ function Signup(_a) {
     }
     function handlePaymentFail(error) {
         showErrorNotification(error.message);
-        setIsPaying(false);
-    }
-    if (isMobile) {
-        return (jsx(Card, __assign({ className: "p-4 flex flex-col" }, { children: purchaseSucceeded ? (jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col items-center" }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "mx-8" }, { children: jsx(Divider, { className: "h-full" }) })), jsx("div", __assign({ className: "flex items-center justify-center my-12" }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })));
-    }
-    else {
-        return (jsx(Fragment, { children: jsx(Card, __assign({ className: "p-4 flex flex-col w-screen h-screen" }, { children: purchaseSucceeded ? (jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col w-1/2 items-center" }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "my-4" }, { children: jsx(Divider, { className: "h-full", type: "vertical" }) })), jsx("div", __assign({ className: "flex w-1/2 items-center justify-center my-12" }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })) }));
     }
+    var WrapperComponent = function (_a) {
+        var children = _a.children, className = _a.className, style = _a.style;
+        return isCardEnabled ? (jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsx("div", __assign({ className: className, style: style }, { children: children })));
+    };
+    return (jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsx(Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsx("div", __assign({ className: "flex ".concat(isMobile
+                        ? "items-center justify-center my-12"
+                        : "w-1/2 items-center justify-center my-12") }, { children: jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId }) })) }))] }))) })));
 }
 
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
@@ -4567,6 +4465,19 @@ var ErrorView = function (_a) {
     return (jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
 };
 
+var Text$4 = Typography.Text;
+var PageHeaderWithActions = function (_a) {
+    var children = _a.children, title = _a.title, className = _a.className;
+    var isMobile = useIsMobile();
+    return (jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(className, " ").concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsx(PageSubTitle, { title: title }), children] })));
+};
+var PageSubTitle = function (_a) {
+    var title = _a.title;
+    var secondaryColor = useContext(BrandContext).secondaryColor;
+    var darkMode = useContext(BunnyContext).darkMode;
+    return (jsx(Text$4, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
+};
+
 var Text$3 = Typography.Text;
 var HideExpiredToggle = function (_a) {
     var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, subscriptions = _a.subscriptions;
@@ -5156,9 +5067,9 @@ var SubscriptionsContext = createContext({});
 // !!! This component is intended to be view only, however it still has lots of code for full functionality.
 // !!! This must be refactored.
 var Subscriptions = function (_a) {
-    var companyName = _a.companyName, entityId = _a.entityId, gap = _a.gap, shadow = _a.shadow, _b = _a.showTitle, showTitle = _b === void 0 ? true : _b;
+    var companyName = _a.companyName, entityId = _a.entityId, gap = _a.gap, shadow = _a.shadow, _b = _a.showTitle, showTitle = _b === void 0 ? true : _b, className = _a.className;
     // Context
-    var _c = useContext(BunnyContext), token = _c.token, apiHost = _c.apiHost, onErrorNavigate = _c.onErrorNavigate;
+    var _c = useContext(BunnyContext), token = _c.token, apiHost = _c.apiHost, onTokenExpired = _c.onTokenExpired;
     // Recoil state
     // const [updatingChargeQuantityId, setUpdatingChargeQuantityId] =
     //   useRecoilState(updatingChargeQuantityIdState);
@@ -5168,10 +5079,7 @@ var Subscriptions = function (_a) {
     var _f = useState(true), hideExpired = _f[0], setHideExpired = _f[1];
     var _g = useState(false); _g[0]; var setQuantityDrawerOpen = _g[1];
     // Hooks
-    var handleAllErrorFormats = useAllErrorFormats(onErrorNavigate ||
-        (function (url) {
-            console.log("navigate to", url, " not implemented");
-        }));
+    var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
     var queryClient = useQueryClient();
     var showSuccessNotification = useSuccessNotification();
     // const quoteDelete = useQuoteDelete();
@@ -5249,7 +5157,7 @@ var Subscriptions = function (_a) {
             shadow: shadow,
             gap: gap,
             showTitle: showTitle,
-        } }, { children: [showTitle && (jsx(PageHeaderWithActions, __assign({ title: jsxs("div", __assign({ className: "flex items-center justify-between", style: { minWidth: "137px" } }, { children: [hideExpired ? "Active subscriptions" : "All subscriptions", isMobile && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, subscriptions: subscriptions }))] })) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) }))), jsx("div", __assign({ className: "flex flex-col gap-".concat(gap === undefined ? 4 : gap, " shadow-padding-xb overflow-auto"), style: {
+        } }, { children: [showTitle && (jsx(PageHeaderWithActions, __assign({ className: className, title: jsxs("div", __assign({ className: "flex items-center justify-between", style: { minWidth: "137px" } }, { children: [hideExpired ? "Active subscriptions" : "All subscriptions", isMobile && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, subscriptions: subscriptions }))] })) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) }))), jsx("div", __assign({ className: "flex flex-col gap-".concat(gap === undefined ? 4 : gap, " shadow-padding-xb overflow-auto ").concat(className), style: {
                     flexShrink: 1,
                 } }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsx(Fragment, { children: jsx(SubscriptionsList, { hideExpired: hideExpired, planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscriptions: subscriptions }) })) : (jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) }))) })), isMobile && (jsx("div", __assign({ className: "pt-4 pb-2" }, { children: jsx(SubscriptionsNavigation, { hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsx(Checkout, { entityId: entityId, onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile })] })));
 };