@bunnyapp/components 1.0.14 → 1.0.16

package/dist/esm/index.js

@@ -4,13 +4,13 @@ import React__default, { createContext as createContext$1, useContext as useCont
 import { Markup } from 'interweave';
 import { ConfigProvider, Button as Button$1, Typography, Tag, Divider, Popconfirm, Input, Checkbox, Collapse, Modal, Form, Drawer, Card as Card$1, Select, Image, Dropdown, Skeleton } from 'antd';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, 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 as getAccount$1, DEFAULT_CONFIG, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, StringUtils, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
-import { QueryClient, QueryClientProvider, useQuery, useQueryClient, useMutation, keepPreviousData, onlineManager } from '@tanstack/react-query';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, DEFAULT_CONFIG, useErrorNotification, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useSuccessNotification, BreakpointNumbers, useAllErrorFormats, getFormattedInvoice, PAYABLE_INVOICE_STATES, DOCUMENT_NAME as DOCUMENT_NAME$1, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount as getAccount$1, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, StringUtils, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
+import { QueryClient, QueryClientProvider, useQuery, useQueryClient, keepPreviousData, useMutation, onlineManager } from '@tanstack/react-query';
 import theme from 'antd/lib/theme';
 import { RecoilRoot } from 'recoil';
 import request, { GraphQLClient } from 'graphql-request';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
-import { useElements, useStripe, Elements, PaymentElement } from '@stripe/react-stripe-js';
+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';
@@ -42,7 +42,7 @@ function styleInject(css, ref) {
   }
 }
 
-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-link:disabled {\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-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.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\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";
+var css_248z = ".ant-divider-horizontal {\n  margin: 0;\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-link:disabled {\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\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-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: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-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\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);
 
 /******************************************************************************
@@ -1681,6 +1681,19 @@ function ContextualWrapper(_a) {
                             colorSplit: darkMode ? SLATE_400 : SLATE_200,
                             verticalMarginInline: 0,
                         },
+                        Form: {
+                            itemMarginBottom: 0,
+                            verticalLabelPadding: "4px",
+                        },
+                        Input: {
+                            fontSize: 16,
+                        },
+                        Select: {
+                            fontSize: 16,
+                        },
+                        DatePicker: {
+                            fontSize: 16,
+                        },
                     } }, configProviderProps) }, { children: children })) })) }));
 }
 
@@ -1748,13 +1761,24 @@ var useDownloadFile = function (id, onError) {
 
 var InvoiceQuoteContext = createContext$1({});
 
+var PaymentContext = createContext$1({});
+
+// Use this hook instead of getting the token from BunnyContext directly
+// Because we have overrideToken as an option, this token ensures the correct token is used
+function useToken() {
+    var tokenFromContext = useContext$1(BunnyContext).token;
+    var overrideToken = useContext$1(PaymentContext).overrideToken;
+    return overrideToken || tokenFromContext;
+}
+
 var MarkupContainer = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 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$1(BrandContext).secondaryColor;
-    var _b = useContext$1(BunnyContext), token = _b.token, apiHost = _b.apiHost;
-    var _c = useContext$1(InvoiceQuoteContext), shadow = _c.shadow, hideDownloadButton = _c.hideDownloadButton;
+    var apiHost = useContext$1(BunnyContext).apiHost;
+    var token = useToken();
+    var _b = useContext$1(InvoiceQuoteContext), shadow = _b.shadow, hideDownloadButton = _b.hideDownloadButton;
     var isMobile = useIsMobile();
     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$1, __assign({ className: "text-xs pl-0", onClick: onBackButtonClick, style: {
@@ -1775,17 +1799,57 @@ var quoteMetaTitle = function (_a) {
     return vendorName + " " + documentName;
 };
 
-var PaymentContext = createContext$1({});
+var fetchPDF = function (apiEndpoint, invoiceUuid) { return __awaiter(void 0, void 0, void 0, function () {
+    var response;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!invoiceUuid) {
+                    throw new Error("Invoice ID is required to fetch PDF");
+                }
+                return [4 /*yield*/, fetch("".concat(apiEndpoint, "/api/legacy_invoices/").concat(invoiceUuid))];
+            case 1:
+                response = _a.sent();
+                if (!response.ok)
+                    throw new Error("Failed to fetch PDF");
+                return [2 /*return*/, response.blob()]; // Return the PDF as a blob
+        }
+    });
+}); };
+function InvoicePDF(_a) {
+    var invoiceUuid = _a.invoiceUuid, apiHost = _a.apiHost;
+    var _b = useState(undefined), pdfUrl = _b[0], setPdfUrl = _b[1];
+    var _c = useQuery({
+        queryKey: ["invoicePDF", invoiceUuid],
+        queryFn: function () { return fetchPDF(apiHost || "", invoiceUuid); },
+        enabled: Boolean(invoiceUuid),
+    }), pdfBlob = _c.data, isLoading = _c.isLoading;
+    useEffect(function () {
+        if (pdfBlob) {
+            var url_1 = URL.createObjectURL(pdfBlob);
+            setPdfUrl(url_1);
+            return function () { return URL.revokeObjectURL(url_1); };
+        }
+    }, [pdfBlob]);
+    if (isLoading || !pdfUrl)
+        return jsx(Fragment, {});
+    return (jsx("iframe", { src: pdfUrl, style: {
+            border: "none",
+            gridColumn: "1/-1",
+            minHeight: "1000px",
+            minWidth: "780px",
+        }, title: "Invoice PDF", width: "100%" }));
+}
 
 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, accountId) {
+var usePaymentMethod = function (graphQLClient) {
     var result = useQuery({
         queryKey: QueryKeyFactory.default.accountPaymentMethodKey,
         queryFn: function () {
             return graphQLClient
                 .request(paymentMethodsQuery, {
                 first: 1,
-                filter: "disabled is false".concat(accountId ? " and accountId is ".concat(accountId) : ""),
+                filter: "disabled is false",
             })
                 .then(function (data) {
                 var _a, _b;
@@ -1846,289 +1910,156 @@ var getQuoteAmountDue = function (quote) {
     return quote.amountDue;
 };
 
-// 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 DEFAULT_HEADERS = {
+    "Content-type": "application/json; charset=utf-8",
 };
-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;
+// !!! Duplicated from @bunnyapp/common due to bug in signup. Uses BunnyProvider token instead of apiToken.
+var gqlRequest = function (_a) {
+    var query = _a.query, _b = _a.vars, vars = _b === void 0 ? {} : _b, headers = _a.headers, token = _a.token, isInPreviewMode = _a.isInPreviewMode, apiHost = _a.apiHost;
     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: "store_payment_method",
-                        payload: {
-                            payment_method_id: paymentMethodId,
-                            account_id: accountId,
-                        },
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _b.sent();
-                    if (response.status !== "success")
-                        throw new Error(response.message || "Unknown error");
-                    return [2 /*return*/, response];
+        var graphqlEndpoint, requestHeaders, authorizationHeader, error_1;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _c.trys.push([0, 2, , 3]);
+                    graphqlEndpoint = DEFAULT_CONFIG.graphqlEndpoint;
+                    requestHeaders = headers || DEFAULT_HEADERS;
+                    authorizationHeader = "Bearer ".concat(token);
+                    if (!requestHeaders.Authorization && !isInPreviewMode)
+                        requestHeaders.Authorization = authorizationHeader;
+                    return [4 /*yield*/, request("".concat(apiHost).concat(graphqlEndpoint), query, vars, requestHeaders)];
+                case 1: return [2 /*return*/, _c.sent()];
+                case 2:
+                    error_1 = _c.sent();
+                    throw error_1;
+                case 3: return [2 /*return*/];
             }
         });
     });
 };
-var createSetupIntent = function (plugin, token, apiHost, accountId) {
-    return invokePlugin({
-        plugin: plugin,
-        method: "create_setup_intent",
-        token: token,
-        apiHost: apiHost,
-        payload: {
-            account_id: accountId,
-        },
-    });
-};
-var createPaymentIntent = function (_a) {
-    var payable = _a.payable, savePaymentMethod = _a.savePaymentMethod, memo = _a.memo, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost;
+
+var MUTATION$8 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
+var checkout = function (_a) {
+    var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
-        var payload, response;
+        var mutationVars, response, errors;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    payload = {
-                        payable_id: payable.payableId,
-                        save_payment_method: savePaymentMethod,
-                        memo: memo,
+                    mutationVars = {
+                        quoteId: quoteId,
+                        invoiceId: invoiceId,
+                        paymentMethodId: paymentMethodId,
                     };
-                    return [4 /*yield*/, invokePlugin({
-                            plugin: plugin,
-                            method: "create_payment_intent",
-                            payload: payload,
+                    if (paymentMethodData) {
+                        mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
+                    }
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$8,
                             token: token,
+                            vars: mutationVars,
                             apiHost: apiHost,
                         })];
                 case 1:
                     response = _b.sent();
-                    if (response.status !== "success")
-                        throw new Error(response.message || "Unknown error");
-                    return [2 /*return*/, response.payload];
+                    errors = (response === null || response === void 0 ? void 0 : response.checkout).errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, {
+                            savePaymentMethod: paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.savePaymentMethod,
+                        }];
             }
         });
     });
 };
-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) {
-            var payload = _a.payload;
-            return loadStripe(payload.publishable_key).then(setStripe);
-        })
-            .catch(function (error) {
-            console.error("Caught Error in fetching stripe key: ", error);
-            showErrorNotification(error.message, "Unexpected Error fetching key");
+
+function usePay$1(_a) {
+    var _this = this;
+    var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice, storedPaymentMethod = _a.storedPaymentMethod, plugin = _a.plugin;
+    var apiHost = useContext$1(BunnyContext).apiHost;
+    var customCheckoutFunction = useContext$1(PaymentContext).customCheckoutFunction;
+    var token = useToken();
+    var pay = function () { return __awaiter(_this, void 0, void 0, function () {
+        var amountDue, currencyId, response, response, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    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");
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 6, , 7]);
+                    if (!customCheckoutFunction) return [3 /*break*/, 3];
+                    return [4 /*yield*/, customCheckoutFunction(plugin)];
+                case 2:
+                    response = _a.sent();
+                    onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+                    return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, checkout({
+                        invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
+                        quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
+                        paymentMethodId: storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.id,
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 4:
+                    response = _a.sent();
+                    onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+                    _a.label = 5;
+                case 5: return [3 /*break*/, 7];
+                case 6:
+                    error_1 = _a.sent();
+                    onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error_1);
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
         });
-        // eslint-disable-next-line
-    }, [plugin, token]);
-    return { stripe: stripe, options: options };
-};
+    }); };
+    return { pay: pay };
+}
 
 function usePay(_a) {
     var _this = this;
-    var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice;
+    var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice, storedPaymentMethod = _a.storedPaymentMethod, plugin = _a.plugin;
     // Hooks
-    var elements = useElements();
-    var stripe = useStripe();
-    var _b = useContext$1(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*/];
-                }
-            });
+    var apiHost = useContext$1(BunnyContext).apiHost;
+    var customCheckoutFunction = useContext$1(PaymentContext).customCheckoutFunction;
+    var token = useToken();
+    var pay = function () { return __awaiter(_this, void 0, void 0, function () {
+        var response, response, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 5, , 6]);
+                    if (!customCheckoutFunction) return [3 /*break*/, 2];
+                    return [4 /*yield*/, customCheckoutFunction(plugin)];
+                case 1:
+                    response = _a.sent();
+                    onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, checkout({
+                        invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
+                        quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
+                        paymentMethodId: storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.id,
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 3:
+                    response = _a.sent();
+                    onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+                    _a.label = 4;
+                case 4: return [3 /*break*/, 6];
+                case 5:
+                    error_1 = _a.sent();
+                    onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error_1);
+                    return [3 /*break*/, 6];
+                case 6: return [2 /*return*/];
+            }
         });
-    };
+    }); };
     return { pay: pay };
 }
 
@@ -2137,30 +2068,31 @@ 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 storedPaymentMethod = useContext$1(PaymentContext).storedPaymentMethod;
     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);
-        },
+        onPaymentSuccess: onPaymentSuccess,
         onPaymentError: function (error) {
             setIsPaying(false);
-            showErrorNotification$1(error);
+            showErrorNotification$1(JSON.stringify(error));
         },
         quote: quote,
         invoice: invoice,
+        storedPaymentMethod: storedPaymentMethod,
+        plugin: plugin,
     }).pay;
     var payStripe = usePay({
-        onPaymentSuccess: function (response) {
-            onPaymentSuccess(response);
-        },
+        onPaymentSuccess: onPaymentSuccess,
         onPaymentError: function (error) {
             setIsPaying(false);
-            showErrorNotification$1(error);
+            showErrorNotification$1(JSON.stringify(error));
         },
         quote: quote,
         invoice: invoice,
+        storedPaymentMethod: storedPaymentMethod,
+        plugin: plugin,
     }).pay;
     var handlePaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a;
@@ -2170,22 +2102,17 @@ var ActualCheckoutFooter = function (_a) {
                 case 0:
                     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;
+                    _a = (_c = (_b = 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 1: return [4 /*yield*/, payStripe()];
                 case 2:
                     _d.sent();
                     return [3 /*break*/, 6];
-                case 3: return [4 /*yield*/, payDemoPay({
-                        plugin: plugin,
-                        savePaymentMethod: false,
-                    })];
+                case 3: return [4 /*yield*/, payDemoPay()];
                 case 4:
                     _d.sent();
                     return [3 /*break*/, 6];
@@ -2200,18 +2127,10 @@ var ActualCheckoutFooter = function (_a) {
             }, 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$1(BunnyContext), token = _d.token, apiHost = _d.apiHost;
-    var accountId = useContext$1(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 }) })));
+    return (jsx(ActualCheckoutFooter, { plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, noPadding: noPadding }));
 };
 
 var dayjs_min = {exports: {}};
@@ -2239,13 +2158,13 @@ var PlusIcon = function (_a) {
     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$f = Typography.Text;
+var Text$g = 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 }))] }))] }))] })));
+    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$g, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier })] })), 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 MiniCreditCard = function (_a) {
     var _b;
@@ -2257,7 +2176,7 @@ var MiniCreditCard = function (_a) {
     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 px-3 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$1, __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$1, { disabled: true, type: "link" })] }))) })));
+    return (jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxs(Fragment, { children: [jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxs("div", __assign({ className: "flex items-center gap-4 space-between w-full" }, { children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Text$g, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier }), jsx(Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })) })), !hideRemoveButton && (jsx(Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsx(Button$1, __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$g, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: "No payment method selected" })), jsx(Button$1, { disabled: true, type: "link" })] }))) })));
 };
 var CardImage = function (_a) {
     var _b, _c;
@@ -2276,7 +2195,7 @@ var CardImage = function (_a) {
 };
 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 })] })));
+    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$g, { children: value })] })));
 };
 var CardActions = function (_a) {
     var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
@@ -2292,16 +2211,77 @@ 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 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$1(PaymentContext).onClickCancel;
+    return (jsxs("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: [onClickCancel && (jsx(Button$1, __assign({ className: "w-full", size: isMobile ? "large" : "middle", onClick: function () { return onClickCancel(); } }, { children: "Cancel" }))), jsx(Button$1, __assign({ className: "w-full", disabled: isSaving, onClick: onSave, size: isMobile ? "large" : "middle", type: "primary" }, { children: isSaving ? "Saving" : "Save" }))] })));
+};
+
+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);
 };
-
-var SavePaymentMethodFooter = function (_a) {
-    var isSaving = _a.isSaving, onSave = _a.onSave, noPadding = _a.noPadding;
-    var isMobile = useIsMobile();
-    var onClickCancel = useContext$1(PaymentContext).onClickCancel;
-    return (jsxs("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: [onClickCancel && (jsx(Button$1, __assign({ className: "w-full", size: isMobile ? "large" : "middle", onClick: function () { return onClickCancel(); } }, { children: "Cancel" }))), jsx(Button$1, __assign({ className: "w-full", disabled: isSaving, onClick: onSave, size: isMobile ? "large" : "middle", type: "primary" }, { children: isSaving ? "Saving" : "Save" }))] })));
+// 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];
+        }
+    });
+}); };
 
 var DemoPayCardCvc = function (_a) {
     var autoFocus = _a.autoFocus, onChange = _a.onChange, placeholder = _a.placeholder, value = _a.value;
@@ -2396,7 +2376,7 @@ function useSave$1(_a) {
     return { save: save, isSaving: isSaving };
 }
 
-var Text$e = Typography.Text;
+var Text$f = Typography.Text;
 var TEST_CARD = "4242424242424242";
 var DemoPayForm = function (_a) {
     var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -2457,7 +2437,7 @@ 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$e, __assign({ className: "text-xs" }, { children: "DemoPay is for testing only." })), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
+    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$f, __assign({ className: "text-xs" }, { children: "DemoPay is for testing only." })), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
 };
 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;
@@ -2468,6 +2448,91 @@ var StyledInputs = styled.div(templateObject_1$7 || (templateObject_1$7 = __make
 });
 var templateObject_1$7;
 
+var createPaymentMethod = function (_a) {
+    var paymentMethodId = _a.paymentMethodId, 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: "store_payment_method",
+                        payload: {
+                            payment_method_id: paymentMethodId,
+                            account_id: accountId,
+                        },
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    if (response.status !== "success")
+                        throw new Error(response.message || "Unknown error");
+                    return [2 /*return*/, response];
+            }
+        });
+    });
+};
+var createSetupIntent = function (plugin, token, apiHost, accountId) {
+    return invokePlugin({
+        plugin: plugin,
+        method: "create_setup_intent",
+        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",
+    };
+    useEffect(function () {
+        var _a, _b;
+        if (!plugin)
+            return;
+        if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== "StripePayment")
+            return;
+        fetchStripeKey(plugin, token, apiHost || "", accountId)
+            .then(function (_a) {
+            var payload = _a.payload;
+            return loadStripe(payload.publishable_key).then(setStripe);
+        })
+            .catch(function (error) {
+            console.error("Caught Error in fetching stripe key: ", error);
+            showErrorNotification(error.message, "Unexpected Error fetching key");
+        });
+        // eslint-disable-next-line
+    }, [plugin, token]);
+    return { stripe: stripe, options: options };
+};
+
 function useSave(_a) {
     var _this = this;
     var onSaveSuccess = _a.onSaveSuccess;
@@ -2475,7 +2540,8 @@ function useSave(_a) {
     var _b = useState(false), isSaving = _b[0], setIsSaving = _b[1];
     var elements = useElements();
     var stripe = useStripe();
-    var _c = useContext$1(BunnyContext), token = _c.token, apiHost = _c.apiHost;
+    var apiHost = useContext$1(BunnyContext).apiHost;
+    var token = useToken();
     var accountId = useContext$1(PaymentContext).accountId;
     var save = function (_a) {
         var plugin = _a.plugin;
@@ -2586,12 +2652,7 @@ var PaymentMethodForm = function (_a) {
 // 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$1(BunnyContext), token = _b.token, apiHost = _b.apiHost;
-    var accountId = useContext$1(PaymentContext).accountId;
-    var _c = useStripePlugin(plugin, token, apiHost, accountId), stripe = _c.stripe, options = _c.options;
-    if (!stripe)
-        return null;
-    return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: jsx(PaymentMethodForm, { plugin: plugin, onFail: onFail, onSavePaymentMethod: onSavePaymentMethod }) })));
+    return (jsx(PaymentMethodForm, { plugin: plugin, onFail: onFail, onSavePaymentMethod: onSavePaymentMethod }));
 };
 
 var PaymentMethodDetails = function (_a) {
@@ -2614,20 +2675,20 @@ 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 Text$d = Typography.Text;
+var Text$e = 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)); }) })));
+    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, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
 };
 var PaymentOption = function (_a) {
-    var selected = _a.selected, paymentOption = _a.paymentOption, onClick = _a.onClick, name = _a.name;
+    var selected = _a.selected, paymentPlugin = _a.paymentPlugin, onClick = _a.onClick, name = _a.name;
     var brandColor = useContext$1(BrandContext).brandColor;
     var darkMode = useContext$1(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, {}))] })));
+            : "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsx(Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsx(Text$e, { 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;
@@ -2664,224 +2725,79 @@ function useRemovePaymentMethod(paymentPlugins, token, apiHost, accountId) {
                 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, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient;
-    // Local state
-    var _b = useState(), selectedPaymentMethod = _b[0], setSelectedPaymentMethod = _b[1];
-    var _c = useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
-    var paying = !!(quote || invoice);
-    // Hooks
-    var _d = useContext$1(BunnyContext), token = _d.token, apiHost = _d.apiHost;
-    var storedPaymentMethod = usePaymentMethod(graphQLClient, accountId).data;
-    var isPaymentMethodFetched = storedPaymentMethod !== undefined;
-    var _e = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: overrideToken || token }), paymentMethodAllowedPlugins = _e.paymentMethodAllowedPlugins, arePluginsFetched = _e.isFetched;
-    var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], overrideToken || token, apiHost, accountId);
-    var queryClient = useQueryClient();
-    // Set default plugin
-    useEffect(function () {
-        if (!arePluginsFetched ||
-            !isPaymentMethodFetched ||
-            selectedPaymentMethod) {
-            return;
-        }
-        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,
-        storedPaymentMethod,
-    ]);
-    var showPaymentMethodSelector = useMemo(function () {
-        var pluginCount = (paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.length) || 0;
-        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,
-            overrideToken: overrideToken,
-        } }, { children: jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxs(Fragment, { children: [jsx("div", __assign({ className: "px-4" }, { children: jsx(MiniCreditCard, { hideRemoveButton: paying, onClickRemove: function () { return onClickRemove(storedPaymentMethod); }, paymentMethodData: storedPaymentMethod }) })), paying && storedPaymentMethod ? (jsx("div", __assign({ className: "px-4" }, { children: 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 px-4" }, { children: jsxs(Button$1, __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";
-var checkout = function (_a) {
-    var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var mutationVars, response, errors;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    mutationVars = {
-                        quoteId: quoteId,
-                        invoiceId: invoiceId,
-                        paymentMethodId: paymentMethodId,
-                    };
-                    if (paymentMethodData) {
-                        mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
-                    }
-                    return [4 /*yield*/, gqlRequest$1({
-                            query: MUTATION$8,
-                            token: token,
-                            vars: mutationVars,
-                            apiHost: apiHost,
-                        })];
-                case 1:
-                    response = _b.sent();
-                    errors = (response === null || response === void 0 ? void 0 : response.checkout).errors;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, {
-                            savePaymentMethod: paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.savePaymentMethod,
-                        }];
-            }
-        });
-    });
-};
-
-var InvoiceCheckout = function (_a) {
-    var onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, entityId = _a.entityId;
-    var _b = useContext$1(BunnyContext), apiHost = _b.apiHost, token = _b.token, graphQLClient = _b.graphQLClient;
-    var checkoutMutation = useMutation({
-        mutationFn: function (_a) {
-            var pluginPaymentMethod = _a.pluginPaymentMethod, savedPaymentMethod = _a.savedPaymentMethod;
-            if (savedPaymentMethod) {
-                var paymentMethodId = savedPaymentMethod.paymentMethodId;
-                return checkout({
-                    invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
-                    paymentMethodId: paymentMethodId,
-                    token: token,
-                    apiHost: apiHost,
-                });
-            }
-            else if (pluginPaymentMethod) {
-                var plugin = pluginPaymentMethod.plugin, savePaymentMethod = pluginPaymentMethod.savePaymentMethod, metadata = pluginPaymentMethod.metadata;
-                var paymentToken = pluginPaymentMethod.token;
-                return checkout({
-                    invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
-                    paymentMethodData: {
-                        metadata: metadata,
-                        pluginGuid: plugin.guid,
-                        savePaymentMethod: savePaymentMethod,
-                        token: paymentToken,
-                    },
-                    token: token,
-                    apiHost: apiHost,
-                });
-            }
-            else
-                throw new Error("No payment method provided");
-        },
-        onSuccess: onSuccess,
-        onError: onFail,
-    });
-    // Handlers
-    var handleCheckout = function (_a) {
-        var pluginPaymentResponse = _a.pluginPaymentResponse, savedPaymentMethodResponse = _a.savedPaymentMethodResponse;
-        return __awaiter(void 0, void 0, void 0, function () {
-            var token_1, plugin, savePaymentMethod, metadata, paymentMethodId;
-            return __generator(this, function (_b) {
-                if (pluginPaymentResponse) {
-                    token_1 = pluginPaymentResponse.token, plugin = pluginPaymentResponse.plugin, savePaymentMethod = pluginPaymentResponse.savePaymentMethod, metadata = pluginPaymentResponse.metadata;
-                    checkoutMutation.mutate({
-                        pluginPaymentMethod: {
-                            savePaymentMethod: savePaymentMethod,
-                            plugin: plugin,
-                            metadata: metadata,
-                            token: token_1,
-                        },
-                    });
-                }
-                else if (savedPaymentMethodResponse) {
-                    paymentMethodId = savedPaymentMethodResponse.paymentMethodId;
-                    checkoutMutation.mutate({
-                        savedPaymentMethod: {
-                            paymentMethodId: paymentMethodId,
-                        },
-                    });
-                }
-                return [2 /*return*/];
-            });
-        });
-    };
-    return (jsx("div", __assign({ className: "w-full pt-12" }, { children: jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: handleCheckout, onFail: onFail, invoice: invoice, graphQLClient: graphQLClient }) })));
-};
-
-var fetchPDF = function (apiEndpoint, invoiceUuid) { return __awaiter(void 0, void 0, void 0, function () {
-    var response;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                if (!invoiceUuid) {
-                    throw new Error("Invoice ID is required to fetch PDF");
-                }
-                return [4 /*yield*/, fetch("".concat(apiEndpoint, "/api/legacy_invoices/").concat(invoiceUuid))];
-            case 1:
-                response = _a.sent();
-                if (!response.ok)
-                    throw new Error("Failed to fetch PDF");
-                return [2 /*return*/, response.blob()]; // Return the PDF as a blob
-        }
-    });
-}); };
-function InvoicePDF(_a) {
-    var invoiceUuid = _a.invoiceUuid, apiHost = _a.apiHost;
-    var _b = useState(undefined), pdfUrl = _b[0], setPdfUrl = _b[1];
-    var _c = useQuery({
-        queryKey: ["invoicePDF", invoiceUuid],
-        queryFn: function () { return fetchPDF(apiHost || "", invoiceUuid); },
-        enabled: Boolean(invoiceUuid),
-    }), pdfBlob = _c.data, isLoading = _c.isLoading;
+    }, [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, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient, customCheckoutFunction = _a.customCheckoutFunction;
+    // Local state
+    var _b = useState(), selectedPaymentMethod = _b[0], setSelectedPaymentMethod = _b[1];
+    var _c = useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
+    var paying = !!(quote || invoice);
+    // Hooks
+    var apiHost = useContext$1(BunnyContext).apiHost;
+    var token = useToken();
+    var storedPaymentMethod = usePaymentMethod(graphQLClient).data;
+    var isPaymentMethodFetched = storedPaymentMethod !== undefined;
+    var _d = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: overrideToken || token }), paymentMethodAllowedPlugins = _d.paymentMethodAllowedPlugins, arePluginsFetched = _d.isFetched;
+    var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], overrideToken || token, apiHost, accountId);
+    var queryClient = useQueryClient();
+    // Set default plugin
     useEffect(function () {
-        if (pdfBlob) {
-            var url_1 = URL.createObjectURL(pdfBlob);
-            setPdfUrl(url_1);
-            return function () { return URL.revokeObjectURL(url_1); };
+        if (!arePluginsFetched ||
+            !isPaymentMethodFetched ||
+            selectedPaymentMethod) {
+            return;
         }
-    }, [pdfBlob]);
-    if (isLoading || !pdfUrl)
-        return jsx(Fragment, {});
-    return (jsx("iframe", { src: pdfUrl, style: {
-            border: "none",
-            gridColumn: "1/-1",
-            minHeight: "1000px",
-            minWidth: "780px",
-        }, title: "Invoice PDF", width: "100%" }));
+        var pluginPaymentMethod = paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
+        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,
+        storedPaymentMethod,
+    ]);
+    var showPaymentMethodSelector = useMemo(function () {
+        var pluginCount = (paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.length) || 0;
+        return pluginCount > 1;
+    }, [paymentMethodAllowedPlugins]);
+    var handlePaymentSuccess = function () {
+        // Hide payment method selector and form
+        setShowPaymentMethodForm(false);
+        onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
+    };
+    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,
+            overrideToken: overrideToken,
+            storedPaymentMethod: storedPaymentMethod,
+            customCheckoutFunction: customCheckoutFunction,
+        } }, { children: jsx(StripeWrapper, __assign({ plugin: selectedPaymentMethod, token: token, apiHost: apiHost, accountId: accountId }, { children: jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxs(Fragment, { children: [jsx("div", __assign({ className: "px-4" }, { children: jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(storedPaymentMethod); }, paymentMethodData: storedPaymentMethod }) })), paying && storedPaymentMethod ? (jsx("div", __assign({ className: "px-4" }, { children: 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-2" }, { children: jsxs(Button$1, __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") })))] }) })) })) })));
+};
+function StripeWrapper(_a) {
+    var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
+    var _b = useStripePlugin(plugin, token, apiHost, accountId), stripe = _b.stripe, options = _b.options;
+    return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: children })));
 }
 
 function Invoice(_a) {
@@ -2902,10 +2818,13 @@ function Invoice(_a) {
 function ActualInvoice() {
     // Context
     var queryClient = useQueryClient();
-    var _a = useContext$1(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$1(BunnyContext), apiHost = _b.apiHost, token = _b.token, onTokenExpired = _b.onTokenExpired;
+    var _a = useContext$1(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, 
+    // onPaymentSuccess,
+    entityId = _a.entityId, className = _a.className;
+    var _b = useContext$1(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
+    var token = useToken();
     // Local state
-    var isMobile = useIsMobile();
+    var isMobile = useIsMobile(BreakpointNumbers.lg);
     // Hooks
     var showSuccessNotification = useSuccessNotification();
     var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
@@ -2921,19 +2840,17 @@ function ActualInvoice() {
     }
     if (!formattedInvoice)
         return jsx(Fragment, {});
-    var onSuccess = function (_a) {
-        var savePaymentMethod = _a.savePaymentMethod;
-        if (savePaymentMethod)
-            queryClient.invalidateQueries({
-                queryKey: QueryKeyFactory.default.accountPaymentMethodKey,
-            });
+    var onSuccess = function () {
+        // queryClient.invalidateQueries({
+        //   queryKey: QueryKeyFactory.default.accountPaymentMethodKey,
+        // });
         queryClient.invalidateQueries({
             queryKey: QueryKeyFactory.default.transactionsKey(),
         });
         queryClient.invalidateQueries({
             queryKey: QueryKeyFactory.default.createFormattedInvoiceKey(token, id),
         });
-        onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(savePaymentMethod);
+        // onPaymentSuccess?.(savePaymentMethod);
         showSuccessNotification("Your invoice has been paid", "Payment successful");
     };
     var onFail = function (error) {
@@ -2942,9 +2859,7 @@ function ActualInvoice() {
     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", " ").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);
-                        }, onSuccess: onSuccess, entityId: entityId }))] }))] }));
+                        }) }), 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 }))), isInvoicePayable && (jsx("div", __assign({ className: "w-full pt-12" }, { children: jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice, graphQLClient: graphQLClient }) })))] }))] }));
 }
 
 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  }"; };
@@ -3111,7 +3026,8 @@ var useIsExpired = function (expiresAt) {
 
 var PandadocPollingModal = function (_a) {
     var isVisible = _a.isVisible, setVisible = _a.setVisible, id = _a.id;
-    var _b = useContext$1(BunnyContext), token = _b.token, apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired;
+    var _b = useContext$1(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired;
+    var token = useToken();
     var graphQLMutation = useGraphQLmutation(function () {
         console.log("graphQLMutation navigateOnTokenExpired not yet implemented");
     }, apiHost || "", function () {
@@ -3197,7 +3113,7 @@ var DOCUMENT_NAME;
     DOCUMENT_NAME["QUOTE"] = "quote";
 })(DOCUMENT_NAME || (DOCUMENT_NAME = {}));
 
-var Text$c = Typography.Text;
+var Text$d = 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) {
@@ -3218,7 +3134,8 @@ function ActualQuote(_a) {
     var _b, _c;
     var entityId = _a.entityId;
     // Context
-    var _d = useContext$1(BunnyContext), token = _d.token, apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired;
+    var _d = useContext$1(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired;
+    var token = useToken();
     var entityBranding = useContext$1(BrandContext);
     var _e = useContext$1(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton;
     // Queries
@@ -3266,7 +3183,7 @@ function ActualQuote(_a) {
                             documentName: documentName,
                         }) }), 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
+                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$d, { 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$1, __assign({ icon: jsx(DownloadOutlined$1, {}), onClick: function () {
                                             return downloadFile(apiHost + "/api/pdf/quote", token);
@@ -3361,10 +3278,10 @@ var getColor = function (state) {
     }
 };
 
-var Text$b = Typography.Text;
+var Text$c = Typography.Text;
 var TransactionDate = function (_a) {
     var date = _a.date;
-    return jsx(Text$b, __assign({ className: "text-sm" }, { children: formatDate(date) }));
+    return jsx(Text$c, __assign({ className: "text-sm" }, { children: formatDate(date) }));
 };
 
 // TODO: delete
@@ -3398,10 +3315,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$a = Typography.Text;
+var Text$b = Typography.Text;
 var TransactionsEmptyState = function () {
     var noTransactionsMessage = useContext$1(TransactionsListContext).noTransactionsMessage;
-    return (jsx(Text$a, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
+    return (jsx(Text$b, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
 };
 
 var isInvoice = function (transaction) {
@@ -3418,11 +3335,12 @@ var TransactionRowTitle = function (_a) {
     return (jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
 };
 
-var Text$9 = Typography.Text;
+var Text$a = Typography.Text;
 var TransactionsListDesktop = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var columns = useContext$1(TransactionsListContext).columns;
-    var _b = useContext$1(BunnyContext), token = _b.token, apiHost = _b.apiHost, darkMode = _b.darkMode;
+    var _b = useContext$1(BunnyContext), apiHost = _b.apiHost, darkMode = _b.darkMode;
+    var token = useToken();
     var showAmount = columns.includes("amount");
     var showDateAndTitle = columns.includes("date-and-title");
     var showDownload = columns.includes("download");
@@ -3438,15 +3356,16 @@ var TransactionsListDesktop = function (_a) {
                 backgroundColor: index % 2 === 0
                     ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
                     : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-            } }, { 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));
+            } }, { children: [!showDateAndTitle && !showState && !showAmount && !showDownload && (jsx(TransactionGridCell, { children: jsx(Text$a, { 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$a, { 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$a, { 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$8 = Typography.Text;
+var Text$9 = Typography.Text;
 var TransactionsListMobile = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var columns = useContext$1(TransactionsListContext).columns;
-    var _b = useContext$1(BunnyContext), token = _b.token, apiHost = _b.apiHost, darkMode = _b.darkMode;
+    var _b = useContext$1(BunnyContext), apiHost = _b.apiHost, darkMode = _b.darkMode;
+    var token = useToken();
     var showAmount = columns.includes("amount");
     var showDateAndTitle = columns.includes("date-and-title");
     var showDownload = columns.includes("download");
@@ -3461,11 +3380,11 @@ 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$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));
+            } }, { 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$9, { 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$9, { children: "\u00B7" }), showAmount && (jsx(Text$9, { 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 Text$8 = 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.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date-and-title", "state", "amount", "download"] : _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 ? [
@@ -3473,7 +3392,9 @@ function Transactions(_a) {
         TransactionKind.PAYMENT,
         TransactionKind.REFUND,
         TransactionKind.WRITE_OFF,
-    ] : _j, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage, entityId = _a.entityId, filterTransactions = _a.filterTransactions, sortTransactions = _a.sortTransactions;
+    ] : _j, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage, entityId = _a.entityId, filterTransactions = _a.filterTransactions, _k = _a.sortTransactions, sortTransactions = _k === void 0 ? function (a, b) {
+        return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+    } : _k;
     var contextValues = {
         showSearchBar: showSearchBar,
         showTitle: showTitle,
@@ -3494,7 +3415,8 @@ function Transactions(_a) {
         filterTransactions: filterTransactions,
         sortTransactions: sortTransactions,
     };
-    var _k = useContext$1(BunnyContext), token = _k.token, apiHost = _k.apiHost;
+    var apiHost = useContext$1(BunnyContext).apiHost;
+    var token = useToken();
     // Local state
     var _l = useState(""), search = _l[0], setSearch = _l[1];
     var filterValue = filter ||
@@ -3571,7 +3493,7 @@ function TransactionsDisplay(_a) {
         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
+    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$8, __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) {
@@ -3590,7 +3512,7 @@ function TransactionsDisplay(_a) {
                             }) })) : (jsx(Fragment, { children: TransactionsListDesktop({
                                 transactions: updatedTransactions,
                                 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 })] })] }))) })))] })));
+                            }) })) }))] })), useModal ? (jsx(Modal, __assign({ title: drawerTitle(), 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) {
@@ -3656,10 +3578,11 @@ function Quotes(_a) {
     return (jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(QuotesWrapper, {}) })));
 }
 function QuotesWrapper() {
-    var _a = useContext$1(BunnyContext), token = _a.token, apiHost = _a.apiHost;
+    var apiHost = useContext$1(BunnyContext).apiHost;
+    var token = useToken();
     var filterFromContext = useContext$1(TransactionsListContext).filter;
     // Local state
-    var _b = useState(""), search = _b[0], setSearch = _b[1];
+    var _a = useState(""), search = _a[0], setSearch = _a[1];
     var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : "");
     // Queries
     var data = useQuery({
@@ -3687,14 +3610,16 @@ function QuotesWrapper() {
     return (jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
 }
 
+var Text$7 = Typography.Text;
 var DrawerHeader = function (_a) {
     var description = _a.description, onClose = _a.onClose, title = _a.title;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx("div", __assign({ className: "text-xl" }, { children: title })), jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsx(CloseOutlined$1, {}) }))] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx(Text$7, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { 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 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$1(BunnyContext), token = _d.token, apiHost = _d.apiHost, graphQLClient = _d.graphQLClient, onTokenExpired = _d.onTokenExpired;
+    var _d = useContext$1(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient, onTokenExpired = _d.onTokenExpired;
+    var token = useToken();
     // Hooks
     var queryClient = useQueryClient();
     var paymentPlugins = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }).paymentPlugins;
@@ -3826,10 +3751,11 @@ var TaxationForm = function (_a) {
     var account = _a.account, quote = _a.quote;
     // Hooks
     var queryClient = useQueryClient();
-    var _b = useContext$1(BunnyContext), token = _b.token, apiHost = _b.apiHost;
+    var apiHost = useContext$1(BunnyContext).apiHost;
+    var token = useToken();
     var form = Form.useForm()[0];
     // Mutations
-    var _c = useMutation({
+    var _b = useMutation({
         mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
             var account;
             return __generator(this, function (_a) {
@@ -3851,7 +3777,7 @@ var TaxationForm = function (_a) {
                 queryKey: ["getTaxationRequiredAccountFields", token],
             });
         },
-    }), updateAccount = _c.mutate, isUpdatingAccount = _c.isPending;
+    }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
     return (jsxs(Form, __assign({ className: "flex flex-col gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsx(Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsx(Input, { placeholder: "Street" }) })), jsx(Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsx(Input, { placeholder: "City" }) })), jsx(FormBillingState, { form: form }), jsx(Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsx(Select, { options: Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
                         var _a, _b;
                         return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
@@ -3867,86 +3793,41 @@ var FormBillingState = function (_a) {
 
 var QuoteCheckout = function (_a) {
     var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, entityId = _a.entityId;
-    // Context
+    var _b = useContext$1(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
+    var token = useToken();
     var isMobile = useIsMobile();
-    var _b = useContext$1(BunnyContext), apiHost = _b.apiHost, token = _b.token, graphQLClient = _b.graphQLClient;
     var _c = useState(false), isSaving = _c[0], setIsSaving = _c[1];
     var paymentRequired = getQuoteAmountDue(quote) > 0;
     var checkoutMutation = useMutation({
-        mutationFn: function (_a) {
-            var pluginPaymentMethod = _a.pluginPaymentMethod, savedPaymentMethod = _a.storedPaymentMethod;
-            if (!quote)
-                throw new Error("Quote is required");
-            if (!paymentRequired)
-                return checkout({ quoteId: quote.id, token: token, apiHost: apiHost });
-            if (savedPaymentMethod) {
-                var paymentMethodId = savedPaymentMethod.paymentMethodId;
-                return checkout({
-                    quoteId: quote.id,
-                    paymentMethodId: paymentMethodId,
-                    token: token,
-                    apiHost: apiHost,
-                });
-            }
-            if (pluginPaymentMethod) {
-                var plugin = pluginPaymentMethod.plugin, savePaymentMethod = pluginPaymentMethod.savePaymentMethod, metadata = pluginPaymentMethod.metadata;
-                var paymentToken = pluginPaymentMethod.token;
-                return checkout({
-                    quoteId: quote.id,
-                    paymentMethodData: {
-                        metadata: metadata,
-                        pluginGuid: plugin.guid,
-                        savePaymentMethod: savePaymentMethod,
-                        token: paymentToken,
-                    },
-                    token: token,
-                    apiHost: apiHost,
-                });
-            }
-            throw new Error("Pay payment method provided");
-        },
+        mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!quote)
+                            throw new Error("Quote is required");
+                        if (paymentRequired)
+                            throw new Error("Payment is required");
+                        return [4 /*yield*/, checkout({ quoteId: quote.id, token: token, apiHost: apiHost })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        }); },
         onSuccess: onSuccess,
         onError: onFail,
     });
-    // Handlers
-    var handleCheckout = function (_a) {
-        var pluginPaymentResponse = _a.pluginPaymentResponse, savedPaymentMethodResponse = _a.savedPaymentMethodResponse;
-        return __awaiter(void 0, void 0, void 0, function () {
-            var token_1, plugin, savePaymentMethod, metadata, paymentMethodId;
-            return __generator(this, function (_b) {
+    function handleCheckoutNoPayment() {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
                 setIsSaving(true);
-                if (pluginPaymentResponse) {
-                    token_1 = pluginPaymentResponse.token, plugin = pluginPaymentResponse.plugin, savePaymentMethod = pluginPaymentResponse.savePaymentMethod, metadata = pluginPaymentResponse.metadata;
-                    checkoutMutation.mutate({
-                        pluginPaymentMethod: {
-                            savePaymentMethod: savePaymentMethod,
-                            plugin: plugin,
-                            metadata: metadata,
-                            token: token_1,
-                        },
-                    });
-                }
-                else if (savedPaymentMethodResponse) {
-                    paymentMethodId = savedPaymentMethodResponse.paymentMethodId;
-                    checkoutMutation.mutate({
-                        storedPaymentMethod: {
-                            paymentMethodId: paymentMethodId,
-                        },
-                    });
-                }
-                else {
-                    checkoutMutation.mutate({});
-                }
+                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, onFail: onFail, onPaymentSuccess: handleCheckout, quote: quote, graphQLClient: graphQLClient })) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "shadow-padding-x" : "") }, { children: [jsx(Button$1, __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" }))] })) }))) }));
+    return (jsx(Fragment, { children: paymentRequired ? (jsx(PaymentForm, { entityId: entityId, onFail: onFail, onPaymentSuccess: onSuccess, quote: quote, graphQLClient: graphQLClient })) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "shadow-padding-x" : "") }, { children: [jsx(Button$1, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsx("div", __assign({ className: "text-xs text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
 };
 var PaymentFormWrapper = function (_a) {
     var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
@@ -4023,55 +3904,11 @@ 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, onFail: function (error) {
-                                onFail(error);
-                            }, onSuccess: function (_a) {
-                                var savePaymentMethod = _a.savePaymentMethod;
-                                onSuccess({ savePaymentMethod: savePaymentMethod });
-                            }, entityId: entityId })) : quote ? (jsx(QuoteCheckout, { account: account, entityId: entityId, 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("div", __assign({ className: "w-full pt-12" }, { children: jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice, graphQLClient: graphQLClient }) }))) : quote ? (jsx(QuoteCheckout, { account: account, entityId: entityId, onFail: function (error) {
                                 onFail(error);
-                            }, onSuccess: function (_a) {
-                                var savePaymentMethod = _a.savePaymentMethod;
-                                onSuccess({ savePaymentMethod: savePaymentMethod });
-                            }, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
+                            }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
                                 onFail(error);
-                            }, onPaymentSuccess: function (_a) {
-                                var pluginPaymentResponse = _a.pluginPaymentResponse;
-                                onSuccess({
-                                    savePaymentMethod: pluginPaymentResponse === null || pluginPaymentResponse === void 0 ? void 0 : pluginPaymentResponse.savePaymentMethod,
-                                });
-                            }, graphQLClient: graphQLClient }))] }))] })) })));
-};
-
-var DEFAULT_HEADERS = {
-    "Content-type": "application/json; charset=utf-8",
-};
-// !!! Duplicated from @bunnyapp/common due to bug in signup. Uses BunnyProvider token instead of apiToken.
-var gqlRequest = function (_a) {
-    var query = _a.query, _b = _a.vars, vars = _b === void 0 ? {} : _b, headers = _a.headers, token = _a.token, isInPreviewMode = _a.isInPreviewMode, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var graphqlEndpoint, requestHeaders, authorizationHeader, error_1;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    console.log("token in gqlRequest", token);
-                    _c.label = 1;
-                case 1:
-                    _c.trys.push([1, 3, , 4]);
-                    graphqlEndpoint = DEFAULT_CONFIG.graphqlEndpoint;
-                    requestHeaders = headers || DEFAULT_HEADERS;
-                    authorizationHeader = "Bearer ".concat(token);
-                    if (!requestHeaders.Authorization && !isInPreviewMode)
-                        requestHeaders.Authorization = authorizationHeader;
-                    return [4 /*yield*/, request("".concat(apiHost).concat(graphqlEndpoint), query, vars, requestHeaders)];
-                case 2: return [2 /*return*/, _c.sent()];
-                case 3:
-                    error_1 = _c.sent();
-                    throw error_1;
-                case 4: return [2 /*return*/];
-            }
-        });
-    });
+                            }, onPaymentSuccess: onSuccess, graphQLClient: graphQLClient }))] }))] })) })));
 };
 
 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}"; };
@@ -4117,14 +3954,12 @@ var portalSessionCreate = function (_a) {
         var _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
-                case 0:
-                    console.log("token in portalSessionCreate", token);
-                    return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$3,
-                            token: token,
-                            vars: { tenantCode: tenantCode, expiry: expiry, returnUrl: returnUrl },
-                            apiHost: apiHost,
-                        })];
+                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;
@@ -4190,41 +4025,24 @@ var getPriceList = function (_a) {
 };
 
 function PaymentForms(_a) {
-    var quote = _a.quote, handlePaymentSaveSuccess = _a.handlePaymentSaveSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, entityId = _a.entityId, accountId = _a.accountId, overrideToken = _a.overrideToken;
+    var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, entityId = _a.entityId, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction;
     var apiHost = useContext$1(BunnyContext).apiHost;
-    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSaveSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, graphQLClient: createGraphQLClient(overrideToken, apiHost) })) : null })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
+    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, graphQLClient: createGraphQLClient(overrideToken, apiHost), customCheckoutFunction: customCheckoutFunction })) : null })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
 }
 function InitialSignupForm(_a) {
     var onSubmit = _a.onSubmit, submitting = _a.submitting;
-    var _b = useState({
-        firstName: "",
-        lastName: "",
-        email: "",
-        accountName: "",
-    }), formData = _b[0], setFormData = _b[1];
-    var handleInputChange = function (e) {
-        var _a;
-        var _b = e.target, name = _b.name, value = _b.value;
-        setFormData(__assign(__assign({}, formData), (_a = {}, _a[name] = value, _a)));
-    };
-    return (jsxs(Form, __assign({ className: "flex 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) {
-                                handleInputChange(e);
-                                setFormData(__assign(__assign({}, formData), { lastName: e.target.value }));
-                            } }) })), jsx(Form.Item, __assign({ rules: [
+    var form = Form.useForm()[0];
+    function handleSubmit() {
+        form.validateFields({ validateOnly: true }).then(function () {
+            onSubmit(form.getFieldsValue());
+        });
+    }
+    return (jsxs(Form, __assign({ className: "flex flex-col justify-between h-full w-full", onFinish: handleSubmit, form: form }, { children: [jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsx(Form.Item, __assign({ name: "firstName", validateTrigger: "onBlur", rules: [{ required: true, message: "Please input your first name!" }] }, { children: jsx(Input, { placeholder: "First name" }) })), jsx(Form.Item, __assign({ name: "lastName", validateTrigger: "onBlur", rules: [{ required: true, message: "Please input your last name!" }] }, { children: jsx(Input, { placeholder: "Last name" }) })), jsx(Form.Item, __assign({ name: "email", validateTrigger: "onBlur", rules: [
                             { required: true, message: "Please input your email!" },
                             { type: "email", message: "Please enter a valid email!" },
-                        ], initialValue: formData.email }, { children: jsx(Input, { placeholder: "Email", value: formData.email, onChange: function (e) {
-                                handleInputChange(e);
-                                setFormData(__assign(__assign({}, formData), { email: e.target.value }));
-                            } }) })), jsx(Form.Item, __assign({ rules: [
+                        ] }, { children: jsx(Input, { placeholder: "Email" }) })), jsx(Form.Item, __assign({ name: "accountName", validateTrigger: "onBlur", rules: [
                             { required: true, message: "Please input your account name!" },
-                        ], initialValue: formData.accountName }, { children: jsx(Input, { placeholder: "Account name", value: formData.accountName, onChange: function (e) {
-                                handleInputChange(e);
-                                setFormData(__assign(__assign({}, formData), { accountName: e.target.value }));
-                            } }) }))] })), jsx(Form.Item, { children: jsx(Button$1, __assign({ type: "primary", htmlType: "submit", loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
+                        ] }, { children: jsx(Input, { placeholder: "Account name" }) }))] })), jsx(Form.Item, { children: jsx(Button$1, __assign({ type: "primary", htmlType: "submit", loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
 }
 
 var Title = Typography.Title, Text$6 = Typography.Text;
@@ -4238,32 +4056,31 @@ 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$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." }))] }))] })) })) }));
+    console.log("topNavImageUrl", topNavImageUrl);
+    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"] }))] })), priceListData.trialAllowed ? (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." }))] }))) : null] })) })) }));
 }
 
 var showErrorNotification = useErrorNotification();
 function Signup(_a) {
-    var apiToken = _a.apiToken, 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;
+    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 _d = useContext$1(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
+    var token = useToken();
     var isMobile = useIsMobile();
     var topNavImageUrl = useContext$1(BrandContext).topNavImageUrl;
+    console.log("topNavImageUrl in signup", topNavImageUrl);
     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 _g = useState(undefined), portalSessionToken = _g[0], setPortalSessionToken = _g[1];
+    var _h = useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
+    var _j = useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
+    var _k = useState(undefined), paymentMethodGraphQLClient = _k[0], setPaymentMethodGraphQLClient = _k[1];
+    var paymentMethod = usePaymentMethod(paymentMethodGraphQLClient || graphQLClient).data;
     var queryClient = useQueryClient();
     // Queries
     var priceListData = useQuery({
         queryKey: ["priceList", priceListCode],
-        queryFn: function () {
-            return getPriceList({ token: apiToken, apiHost: apiHost, code: priceListCode });
-        },
+        queryFn: function () { return getPriceList({ token: token, apiHost: apiHost, code: priceListCode }); },
     }).data;
     function handleSubmit(formData) {
         return __awaiter(this, void 0, void 0, function () {
@@ -4273,9 +4090,8 @@ function Signup(_a) {
                     case 0:
                         _a.trys.push([0, 3, , 4]);
                         setProceedingToPayment(true);
-                        setFormData(formData);
                         return [4 /*yield*/, quoteAccountSignup({
-                                token: apiToken,
+                                token: token,
                                 apiHost: apiHost,
                                 entityId: entityId,
                                 priceListCode: priceListCode,
@@ -4289,9 +4105,8 @@ function Signup(_a) {
                     case 1:
                         data = _a.sent();
                         setAccountId(data.account.id);
-                        console.log("apiToken", apiToken);
                         return [4 /*yield*/, portalSessionCreate({
-                                token: apiToken,
+                                token: token,
                                 apiHost: apiHost,
                                 tenantCode: data.tenant.code,
                                 expiry: 24,
@@ -4306,12 +4121,8 @@ function Signup(_a) {
                         queryClient.invalidateQueries({
                             queryKey: QueryKeyFactory.default.accountPaymentMethodKey,
                         });
-                        setQuoteId(data.quote.id);
                         setProceedingToPayment(false);
-                        setQuote({
-                            amountDue: data.quote.amountDue,
-                            currencyId: data.quote.currencyId,
-                        });
+                        setQuote(data.quote);
                         return [3 /*break*/, 4];
                     case 3:
                         error_1 = _a.sent();
@@ -4323,40 +4134,39 @@ function Signup(_a) {
             });
         });
     }
-    function handlePaymentSaveSuccess(paymentSuccess) {
+    function handlePaymentSuccess() {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                setPurchaseSucceeded(true);
+                return [2 /*return*/];
+            });
+        });
+    }
+    function accountSignupFunction(plugin) {
         return __awaiter(this, void 0, void 0, function () {
-            var response, plugin;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!formData) {
-                            throw new Error("Form data is required");
-                        }
-                        response = paymentSuccess.pluginPaymentResponse;
-                        plugin = response === null || response === void 0 ? void 0 : response.plugin;
-                        if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
-                            throw new Error("Plugin ID is required");
+                        if (!portalSessionToken) {
+                            throw new Error("Portal session token is required");
                         }
                         if (!accountId) {
                             throw new Error("Account ID is required");
                         }
-                        if (!portalSessionToken) {
-                            throw new Error("Portal session token is required");
+                        if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
+                            throw new Error("Plugin ID is required");
                         }
                         return [4 /*yield*/, accountSignup({
                                 token: portalSessionToken,
                                 apiHost: apiHost,
                                 entityId: entityId,
-                                quoteId: quoteId,
+                                quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
                                 paymentMethodId: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
-                                pluginId: plugin.id.toString(),
+                                pluginId: plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(),
                                 priceListCode: priceListCode,
                                 accountId: accountId,
                             })];
-                    case 1:
-                        _a.sent();
-                        setPurchaseSucceeded(true);
-                        return [2 /*return*/];
+                    case 1: return [2 /*return*/, _a.sent()];
                 }
             });
         });
@@ -4370,7 +4180,7 @@ function Signup(_a) {
     };
     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, overrideToken: portalSessionToken }) })) }))] }))) })));
+                        : "w-1/2 items-center justify-center my-12") }, { children: jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
 }
 
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
@@ -4799,8 +4609,9 @@ var SubscriptionCardActions = function (_a) {
     var _b, _c;
     var planChangeOptions = _a.planChangeOptions, subscription = _a.subscription, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible;
     // Context
-    var _d = useContext$1(BunnyContext), token = _d.token, apiHost = _d.apiHost;
-    var _e = useContext$1(SubscriptionsContext), onChangePlanClick = _e.onChangePlanClick, onClickUpgrade = _e.onClickUpgrade, isTempViewOnly = _e.isTempViewOnly;
+    var apiHost = useContext$1(BunnyContext).apiHost;
+    var token = useToken();
+    var _d = useContext$1(SubscriptionsContext), onChangePlanClick = _d.onChangePlanClick, onClickUpgrade = _d.onClickUpgrade, isTempViewOnly = _d.isTempViewOnly;
     // Hooks
     useSuccessNotification();
     // const cancelSubscription = useCancelSubscription();
@@ -4988,7 +4799,8 @@ var SubscriptionCardDesktop = function (_a) {
 var SubscriptionCardDesktopRow = function (_a) {
     var charge = _a.charge, chargeIndex = _a.chargeIndex, subscription = _a.subscription;
     // Context
-    var _b = useContext$1(BunnyContext), token = _b.token, apiHost = _b.apiHost;
+    var apiHost = useContext$1(BunnyContext).apiHost;
+    var token = useToken();
     // Derived state
     var isRamp = charge.isRamp;
     var prevCharge = subscription.charges[chargeIndex - 1];
@@ -5109,7 +4921,8 @@ var SubscriptionsNavigation = function (_a) {
 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, className = _a.className;
     // Context
-    var _c = useContext$1(BunnyContext), token = _c.token, apiHost = _c.apiHost, onTokenExpired = _c.onTokenExpired;
+    var _c = useContext$1(BunnyContext), apiHost = _c.apiHost, onTokenExpired = _c.onTokenExpired;
+    var token = useToken();
     // Recoil state
     // const [updatingChargeQuantityId, setUpdatingChargeQuantityId] =
     //   useRecoilState(updatingChargeQuantityIdState);
@@ -8387,39 +8200,53 @@ var getAccount = function (_a) {
 };
 
 var BillingDetails = function (_a) {
-    var entityId = _a.entityId, accountId = _a.accountId, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, className = _a.className;
-    var _d = useContext$1(BunnyContext), token = _d.token, apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired, graphQLClient = _d.graphQLClient;
+    var entityId = _a.entityId, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, className = _a.className, accountIdProp = _a.accountId, hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
+    var _d = useContext$1(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired, graphQLClient = _d.graphQLClient;
+    var token = useToken();
     // Hooks
     var isMobile = useIsMobile();
     var queryClient = useQueryClient();
-    var form = Form.useForm()[0];
-    var _e = useState(false), isFormEdited = _e[0], setIsFormEdited = _e[1];
     var showSuccessNotification = useSuccessNotification();
     var showErrorNotification = useErrorNotification();
     var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
+    var paymentMethod = usePaymentMethod(graphQLClient).data;
+    // State
+    var form = Form.useForm()[0];
+    var _e = useState(false), isFormEdited = _e[0], setIsFormEdited = _e[1];
+    var _f = useState(accountIdProp), accountId = _f[0], setAccountId = _f[1];
+    var filteredCountryList = useMemo(function () {
+        return countryListFilter
+            ? Lists.COUNTRY_LIST.filter(countryListFilter)
+            : Lists.COUNTRY_LIST;
+    }, [countryListFilter]);
     // Queries
-    var _f = useQuery({
+    var _g = useQuery({
         queryKey: ["account", accountId],
         queryFn: function () { return getAccount({ token: token, apiHost: apiHost, id: accountId }); },
-    }), account = _f.data, isLoadingAccount = _f.isLoading;
-    var _g = useMutation({
+        enabled: !!accountId,
+    }), account = _g.data, isLoadingAccount = _g.isLoading;
+    var _h = useMutation({
         mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
             var account;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, accountUpdate({
-                            accountId: accountId,
-                            attributes: {
-                                name: changedFormData.name,
-                                billingStreet: changedFormData.billingStreet,
-                                billingCity: changedFormData.billingCity,
-                                billingZip: changedFormData.billingZip,
-                                billingState: changedFormData.billingState,
-                                billingCountry: changedFormData.billingCountry,
-                            },
-                            token: token,
-                            apiHost: apiHost,
-                        })];
+                    case 0:
+                        if (!accountId) {
+                            throw new Error("Account ID is required");
+                        }
+                        return [4 /*yield*/, accountUpdate({
+                                accountId: accountId,
+                                attributes: {
+                                    name: changedFormData.name,
+                                    billingStreet: changedFormData.billingStreet,
+                                    billingCity: changedFormData.billingCity,
+                                    billingZip: changedFormData.billingZip,
+                                    billingState: changedFormData.billingState,
+                                    billingCountry: changedFormData.billingCountry,
+                                },
+                                token: token,
+                                apiHost: apiHost,
+                            })];
                     case 1:
                         account = _a.sent();
                         queryClient.setQueryData(["account", accountId], function (old) {
@@ -8430,11 +8257,17 @@ var BillingDetails = function (_a) {
             });
         }); },
         onSuccess: function () {
+            showSuccessNotification("Your account details have been saved");
             queryClient.invalidateQueries({
                 queryKey: ["getTaxationRequiredAccountFields", token],
             });
         },
-    }), updateAccount = _g.mutate, isUpdatingAccount = _g.isPending;
+    }), updateAccount = _h.mutate, isUpdatingAccount = _h.isPending;
+    useEffect(function () {
+        if (paymentMethod) {
+            setAccountId(paymentMethod.accountId);
+        }
+    }, [paymentMethod]);
     useEffect(function () {
         if (account) {
             form.setFieldsValue({
@@ -8451,33 +8284,35 @@ var BillingDetails = function (_a) {
         showSuccessNotification("Your payment method has been saved");
     }, [queryClient]);
     var savePaymentPreCondition = 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, 3, 4, 5]);
-                    return [4 /*yield*/, form.validateFields()];
-                case 1:
-                    _a.sent();
-                    return [4 /*yield*/, updateAccount(form.getFieldsValue())];
-                case 2:
-                    _a.sent();
-                    return [2 /*return*/, true];
-                case 3:
-                    error_1 = _a.sent();
-                    if (error_1 instanceof Error) {
-                        showErrorNotification("Failed to update account", error_1.message);
-                    }
-                    else {
-                        showErrorNotification("Please fill out all required fields");
+            form.validateFields({ validateOnly: true }).then(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, 4]);
+                            return [4 /*yield*/, form.validateFields()];
+                        case 1:
+                            _a.sent();
+                            updateAccount(form.getFieldsValue());
+                            return [2 /*return*/, true];
+                        case 2:
+                            error_1 = _a.sent();
+                            if (error_1 instanceof Error) {
+                                showErrorNotification("Failed to update account", error_1.message);
+                            }
+                            else {
+                                showErrorNotification("Please fill out all required fields");
+                            }
+                            return [2 /*return*/, false];
+                        case 3:
+                            setIsFormEdited(false);
+                            return [7 /*endfinally*/];
+                        case 4: return [2 /*return*/];
                     }
-                    return [2 /*return*/, false];
-                case 4:
-                    setIsFormEdited(false);
-                    showSuccessNotification("Your account details have been saved");
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
-            }
+                });
+            }); });
+            return [2 /*return*/];
         });
     }); };
     function handleValuesChange(changedValues) {
@@ -8492,13 +8327,13 @@ var BillingDetails = function (_a) {
         };
         setIsFormEdited(isFormEdited());
     }
-    return (jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxs("div", __assign({ className: "flex p-2 my-2 ".concat(isMobile ? "flex-col space-y-4" : "flex-row", " gap-4") }, { children: [jsxs("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2", " px-4") }, { children: [jsx(ReactQueryDevtools2, {}), jsx(Skeleton, __assign({ loading: isLoadingAccount }, { children: jsxs(Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical", disabled: isUpdatingAccount, onValuesChange: function (changedValues) {
+    return (jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxs("div", __assign({ className: "flex p-2 my-2 ".concat(isMobile ? "flex-col space-y-4" : "flex-row", " gap-4") }, { children: [jsxs("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? "w-full" : "w-1/2", " px-4") }, { children: [jsx(ReactQueryDevtools2, {}), jsx(Skeleton, __assign({ loading: isLoadingAccount }, { children: jsxs(Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical", disabled: isUpdatingAccount, onValuesChange: function (changedValues) {
                                     handleValuesChange(changedValues);
                                 } }, { children: [jsx(Form.Item, __assign({ label: "Account name", name: "name", rules: [
                                             { required: true, message: "Account name is required" },
                                         ] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [
                                             { required: true, message: "Street address is required" },
-                                        ] }, { children: jsx(Input, {}) })), jsxs("div", __assign({ className: "flex gap-4" }, { children: [jsx(Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: "City is required" }], className: "flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: "Zipcode is required" }], className: "flex-1" }, { children: jsx(Input, {}) }))] })), jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col pb-2" : "flex-row", " gap-4") }, { children: [jsx(Form.Item, __assign({ label: "State", name: "billingState", className: "flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Country", name: "billingCountry", className: "flex-1", rules: [{ required: true, message: "Country is required" }] }, { children: jsx(Select, { options: Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
+                                        ] }, { children: jsx(Input, {}) })), jsxs("div", __assign({ className: "flex gap-4" }, { children: [jsx(Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: "City is required" }], className: "flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: "Zipcode is required" }], className: "flex-1" }, { children: jsx(Input, {}) }))] })), jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col pb-2" : "flex-row", " gap-4") }, { children: [jsx(Form.Item, __assign({ label: "State", name: "billingState", className: "flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Country", name: "billingCountry", className: "flex-1", rules: [{ required: true, message: "Country is required" }] }, { children: jsx(Select, { options: filteredCountryList, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
                                                         var _a, _b;
                                                         return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "")
                                                             .toLowerCase()
@@ -8506,13 +8341,13 @@ var BillingDetails = function (_a) {
                                                             ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "")
                                                                 .toLowerCase()
                                                                 .includes(input.toLowerCase());
-                                                    } }) }))] })), jsx(Form.Item, __assign({ label: "Email", name: "email" }, { children: jsx(Input, { disabled: true }) }))] })) })), jsx(Button$1, __assign({ disabled: !isFormEdited || isUpdatingAccount, className: "w-full mt-4", type: "primary", onClick: function () {
+                                                    } }) }))] })), jsx(Form.Item, __assign({ label: "Email", name: "email" }, { children: jsx(Input, { disabled: true, placeholder: "Available soon" }) })), jsx(Form.Item, __assign({ label: "Tax ID", name: "taxId", tooltip: "Tax ID will be printed on quotes and invoices below the account's address" }, { children: jsx(Input, { disabled: true, placeholder: "Available soon" }) }))] })) })), jsx(Button$1, __assign({ disabled: !isFormEdited || isUpdatingAccount, className: "w-full mt-4", type: "primary", onClick: function () {
                                 savePaymentPreCondition();
-                            } }, { children: "Save" }))] })), isMobile ? (jsx("div", __assign({ className: "mx-4" }, { children: jsx(Divider, {}) }))) : (jsx("div", { children: jsx(Divider, { className: "h-full", type: "vertical" }) })), jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2 pt-4", " flex justify-center") }, { children: jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
-                            handleAllErrorFormats(error);
-                        }, onSavePaymentMethod: function () {
-                            onSuccess();
-                        }, graphQLClient: graphQLClient }) }))] })) })));
+                            } }, { children: "Save" }))] })), !hidePaymentMethodForm ? (jsxs(Fragment, { children: [isMobile ? (jsx("div", __assign({ className: "mx-4" }, { children: jsx(Divider, {}) }))) : (jsx("div", { children: jsx(Divider, { className: "h-full", type: "vertical" }) })), jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2 pt-4", " flex justify-center") }, { children: jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
+                                    handleAllErrorFormats(error);
+                                }, onSavePaymentMethod: function () {
+                                    onSuccess();
+                                }, graphQLClient: graphQLClient }) }))] })) : null] })) })));
 };
 var WrapperComponent = function (_a) {
     var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;