@bunnyapp/components 1.0.14 → 1.0.15

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, 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, DEFAULT_CONFIG, 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-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-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);
 
 /******************************************************************************
@@ -1775,6 +1775,48 @@ var quoteMetaTitle = function (_a) {
     return vendorName + " " + documentName;
 };
 
+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 PaymentContext = createContext$1({});
 
 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}";
@@ -1846,289 +1888,110 @@ 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 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;
-    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 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$1({
+                            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;
+    var _b = useContext$1(BunnyContext), token = _b.token, apiHost = _b.apiHost;
+    var pay = function () { return __awaiter(_this, void 0, void 0, function () {
+        var amountDue, currencyId, 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, 3, , 4]);
+                    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 2:
+                    response = _a.sent();
+                    onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error_1);
+                    return [3 /*break*/, 4];
+                case 4: 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;
     // 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 pay = function () { return __awaiter(_this, void 0, void 0, function () {
+        var response, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 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 1:
+                    response = _a.sent();
+                    onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_1 = _a.sent();
+                    onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
         });
-    };
+    }); };
     return { pay: pay };
 }
 
@@ -2137,30 +2000,29 @@ 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,
     }).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,
     }).pay;
     var handlePaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a;
@@ -2170,22 +2032,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 +2057,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: {}};
@@ -2245,7 +2094,7 @@ var CreditCard = function (_a) {
     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$f, { 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 +2106,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$f, { 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$f, __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;
@@ -2303,6 +2152,67 @@ var SavePaymentMethodFooter = function (_a) {
     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);
+};
+// 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;
     var onKeyPress = function (event) {
@@ -2468,6 +2378,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;
@@ -2586,12 +2581,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) {
@@ -2617,17 +2607,17 @@ var CardIcon = function () {
 var Text$d = Typography.Text;
 var PaymentMethodSelector = function (_a) {
     var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
-    return (jsx("div", __assign({ className: "flex flex-col gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentOption: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
+    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$d, { children: name })] })), isAch ? (jsx(BankOutlined$1, { className: "text-slate-400" })) : isCard ? (jsx(CardIcon, {})) : (jsx(CardIcon, {}))] })));
 };
 var PaymentOptionContainer = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"], ["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var $brandColor = _a.$brandColor, $selected = _a.$selected;
@@ -2689,7 +2679,7 @@ var PaymentForm = function (_a) {
             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); });
+        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);
         }
@@ -2708,18 +2698,10 @@ var PaymentForm = function (_a) {
         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;
+    var handlePaymentSuccess = function () {
         // 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,
-        });
+        onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
     };
     var handleSavePaymentMethod = function () {
         queryClient.invalidateQueries({
@@ -2732,156 +2714,17 @@ var PaymentForm = function (_a) {
             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 }) })));
+            storedPaymentMethod: storedPaymentMethod,
+        } }, { 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-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 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%" }));
+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 +2745,12 @@ 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, token = _b.token, onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
     // Local state
-    var isMobile = useIsMobile();
+    var isMobile = useIsMobile(BreakpointNumbers.lg);
     // Hooks
     var showSuccessNotification = useSuccessNotification();
     var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
@@ -2921,19 +2766,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 +2785,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  }"; };
@@ -3473,7 +3314,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,9 +3337,9 @@ function Transactions(_a) {
         filterTransactions: filterTransactions,
         sortTransactions: sortTransactions,
     };
-    var _k = useContext$1(BunnyContext), token = _k.token, apiHost = _k.apiHost;
+    var _l = useContext$1(BunnyContext), token = _l.token, apiHost = _l.apiHost;
     // Local state
-    var _l = useState(""), search = _l[0], setSearch = _l[1];
+    var _m = useState(""), search = _m[0], setSearch = _m[1];
     var filterValue = filter ||
         (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
     // Queries
@@ -3867,86 +3710,40 @@ 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 isMobile = useIsMobile();
     var _b = useContext$1(BunnyContext), apiHost = _b.apiHost, token = _b.token, graphQLClient = _b.graphQLClient;
+    var isMobile = useIsMobile();
     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,24 +3820,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 }))] }))] })) })));
+                            }, onPaymentSuccess: onSuccess, graphQLClient: graphQLClient }))] }))] })) })));
 };
 
 var DEFAULT_HEADERS = {
@@ -4323,17 +4107,16 @@ function Signup(_a) {
             });
         });
     }
-    function handlePaymentSaveSuccess(paymentSuccess) {
+    function handlePaymentSaveSuccess() {
         return __awaiter(this, void 0, void 0, function () {
-            var response, plugin;
+            var 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;
+                        plugin = { id: "" };
                         if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
                             throw new Error("Plugin ID is required");
                         }