@bunnyapp/components 1.0.44 → 1.0.46

package/dist/esm/index.js

@@ -1,17 +1,19 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createContext, useEffect, useState, useContext, useMemo, useCallback, useRef } from 'react';
 import { Markup } from 'interweave';
-import { ConfigProvider, Button, Typography, Tag, Divider, Popconfirm, Input, Checkbox, Collapse, Skeleton, Modal, Form, Drawer, Card as Card$1, Select, Image, Dropdown } from 'antd';
-import { DownloadOutlined, CreditCardOutlined, BankOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled } from '@ant-design/icons';
+import { ConfigProvider, Button, Typography, Tag, Divider, Popconfirm, Input, Checkbox, Collapse, Skeleton, Modal, Form, Drawer, Card as Card$1, Image, Select, Tooltip, Radio, Space, Dropdown } from 'antd';
+import { DownloadOutlined, CreditCardOutlined, BankOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled, ArrowLeftOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, useAllErrorFormats, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useErrorNotification, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, sortSubscriptionCharges, MODAL_MAX_HEIGHT, SLATE_500, DataInterval, SubscriptionState as SubscriptionState$2, TAG_COLORS, ChargeType, SubscriptionChargeKind, PricingModel } from '@bunnyapp/common';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, useAllErrorFormats, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useErrorNotification, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, sortSubscriptionCharges, Lists, getAccount, SLATE_500, PRIMARY_COLOR, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, useInfoNotification, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS, SubscriptionChargeKind } from '@bunnyapp/common';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient, keepPreviousData, useMutation } from '@tanstack/react-query';
 import theme from 'antd/lib/theme/index.js';
 import { RecoilRoot } from 'recoil';
-import { GraphQLClient } from 'graphql-request';
+import request, { GraphQLClient } from 'graphql-request';
 import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js/pure/index.js';
-import { BarChart, ResponsiveContainer, XAxis, Tooltip, Bar, Rectangle } from 'recharts';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { BarChart, ResponsiveContainer, XAxis, Tooltip as Tooltip$1, Bar, Rectangle } from 'recharts';
 import { omit } from 'lodash-es';
 import pkg from 'pluralize';
 
@@ -42,7 +44,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".ant-divider-horizontal {\n  margin: 0;\n}\n.ant-divider-horizontal {\n  margin: 0;\n}\n.ant-tag {\n  border: none;\n  border-radius: 14px;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  white-space: nowrap;\n  margin: 0;\n}\n.ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-link:disabled {\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n  display: flex !important;\n  align-items: center !important;\n}\n.ant-menu-submenu::after {\n  display: none !important;\n}\n:root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n  height: 1px;\n  min-width: 128px;\n  background: #717d94;\n}\n.plan-step-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid #717d94;\n  background: white;\n  width: 24px;\n  height: 24px;\n  color: #717d94;\n}\n.plan-step-number.active {\n  border: none;\n  color: white;\n  background: #ff6e1c;\n}\n.hidden {\n  display: none;\n}\n.cardElement {\n  padding: 8px 11px;\n  border: 1px solid #e5e7eb;\n  background-color: white;\n  font-family: Inter !important;\n}\n.tooltip {\n  visibility: hidden;\n  position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\n}\n.show-on-hover {\n  opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n  opacity: 1;\n}\n.pdf-only {\n  display: none !important;\n}\n.notes p {\n  margin: 0;\n  padding: 0;\n  padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n  color: #717d94 !important;\n  font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n  margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n  height: 34px !important;\n}\n#form-element #finix-form-container .field {\n  margin-top: 0 !important;\n  padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n  font-size: 11px !important;\n  color: #ff4d4f !important;\n}\n.icon-path {\n  transition: fill 0.3s;\n}\n.shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.shadow-padding-xb {\n  padding-right: 1rem;\n  padding-left: 1rem;\n  padding-bottom: 0.5rem;\n}\n.content-container {\n  width: 100%;\n  margin: 0 auto;\n}\n@media (min-width: 1220px) {\n  .content-container {\n    width: 1220px !important;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 768px) {\n  .shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .shadow-padding-xb {\n    padding-right: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 0.5rem;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n.rotate-45,\n.transform {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n}\n.visible {\n  visibility: visible;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.z-50 {\n  z-index: 50;\n}\n.col-span-2 {\n  grid-column: span 2 / span 2;\n}\n.col-span-3 {\n  grid-column: span 3 / span 3;\n}\n.m-0 {\n  margin: 0px;\n}\n.mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n.my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-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 {\n  flex-shrink: 1;\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.rounded-sm {\n  border-radius: 0.125rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-none {\n  border-style: none;\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-transparent {\n  background-color: transparent;\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-6 {\n  padding-top: 1.5rem;\n}\n.pt-8 {\n  padding-top: 2rem;\n}\n.pb-1 {\n  padding-bottom: 0.25rem;\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.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\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.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\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  line-height: 1.15;\n}\nbody {\n  color: #232323;\n  background-color: #f8fafc;\n}\nth {\n  font-weight: normal;\n}\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\n}\n@media only screen and (max-width: 768px) {\n  select,\n  textarea,\n  input[type=\"text\"],\n  input[type=\"password\"],\n  input[type=\"datetime\"],\n  input[type=\"datetime-local\"],\n  input[type=\"date\"],\n  input[type=\"month\"],\n  input[type=\"time\"],\n  input[type=\"week\"],\n  input[type=\"number\"],\n  input[type=\"email\"],\n  input[type=\"url\"],\n  input[type=\"search\"],\n  input[type=\"tel\"],\n  input[type=\"color\"] {\n    font-size: 16px !important;\n  }\n}\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+var css_248z = ".ant-divider-horizontal {\n  margin: 0;\n}\n.ant-divider-horizontal {\n  margin: 0;\n}\n.ant-tag {\n  border: none;\n  border-radius: 14px;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  white-space: nowrap;\n  margin: 0;\n}\n.ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-link:disabled {\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n  display: flex !important;\n  align-items: center !important;\n}\n.ant-menu-submenu::after {\n  display: none !important;\n}\n:root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n  height: 1px;\n  min-width: 128px;\n  background: #717d94;\n}\n.plan-step-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid #717d94;\n  background: white;\n  width: 24px;\n  height: 24px;\n  color: #717d94;\n}\n.plan-step-number.active {\n  border: none;\n  color: white;\n  background: #ff6e1c;\n}\n.hidden {\n  display: none;\n}\n.cardElement {\n  padding: 8px 11px;\n  border: 1px solid #e5e7eb;\n  background-color: white;\n  font-family: Inter !important;\n}\n.tooltip {\n  visibility: hidden;\n  position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\n}\n.show-on-hover {\n  opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n  opacity: 1;\n}\n.pdf-only {\n  display: none !important;\n}\n.notes p {\n  margin: 0;\n  padding: 0;\n  padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n  color: #717d94 !important;\n  font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n  margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n  height: 34px !important;\n}\n#form-element #finix-form-container .field {\n  margin-top: 0 !important;\n  padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n  font-size: 11px !important;\n  color: #ff4d4f !important;\n}\n.icon-path {\n  transition: fill 0.3s;\n}\n.shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.shadow-padding-xb {\n  padding-right: 1rem;\n  padding-left: 1rem;\n  padding-bottom: 0.5rem;\n}\n.content-container {\n  width: 100%;\n  margin: 0 auto;\n}\n@media (min-width: 1220px) {\n  .content-container {\n    width: 1220px !important;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 768px) {\n  .shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .shadow-padding-xb {\n    padding-right: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 0.5rem;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n.rotate-45,\n.transform {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n  width: 100%;\n}\n.\\!container {\n  width: 100% !important;\n}\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n  .\\!container {\n    max-width: 768px !important;\n  }\n}\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n  .\\!container {\n    max-width: 1024px !important;\n  }\n}\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n  .\\!container {\n    max-width: 1280px !important;\n  }\n}\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n  .\\!container {\n    max-width: 1536px !important;\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.sticky {\n  position: sticky;\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.bottom-16 {\n  bottom: 4rem;\n}\n.bottom-8 {\n  bottom: 2rem;\n}\n.bottom-4 {\n  bottom: 1rem;\n}\n.top-32 {\n  top: 8rem;\n}\n.top-16 {\n  top: 4rem;\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.col-span-full {\n  grid-column: 1 / -1;\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.mx-8 {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n.mx-0 {\n  margin-left: 0px;\n  margin-right: 0px;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-full {\n  height: 100%;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-full {\n  width: 100%;\n}\n.w-10 {\n  width: 2.5rem;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\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-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.gap-8 {\n  gap: 2rem;\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-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-sm {\n  border-radius: 0.125rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-t {\n  border-top-width: 1px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-none {\n  border-style: none;\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.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(209 213 219 / 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-transparent {\n  background-color: transparent;\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.bg-blue-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n  padding: 0px;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-16 {\n  padding: 4rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-8 {\n  padding: 2rem;\n}\n.p-48 {\n  padding: 12rem;\n}\n.p-44 {\n  padding: 11rem;\n}\n.px-12 {\n  padding-left: 3rem;\n  padding-right: 3rem;\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.px-16 {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n.px-32 {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n.px-48 {\n  padding-left: 12rem;\n  padding-right: 12rem;\n}\n.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.px-0 {\n  padding-left: 0px;\n  padding-right: 0px;\n}\n.px-10 {\n  padding-left: 2.5rem;\n  padding-right: 2.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.pl-1 {\n  padding-left: 0.25rem;\n}\n.pb-32 {\n  padding-bottom: 8rem;\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-orange-600 {\n  --tw-text-opacity: 1;\n  color: rgb(234 88 12 / 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-slate-600 {\n  --tw-text-opacity: 1;\n  color: rgb(71 85 105 / 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.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n  transition-property: margin;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\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.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\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  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);
 
 /******************************************************************************
@@ -139,7 +141,7 @@ var BrandContext = createContext({
     topNavImageUrl: DEFAULT_TOP_NAV_IMAGE_URL,
 });
 
-var MUTATION$8 = "\n  query entityBranding {\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }\n";
+var MUTATION$9 = "\n  query entityBranding {\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }\n";
 var getBranding = function (_a) {
     var token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -147,7 +149,7 @@ var getBranding = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$8,
+                        query: MUTATION$9,
                         token: token,
                         apiHost: apiHost,
                     })];
@@ -204,7 +206,9 @@ function ContextualWrapper(_a) {
     var entityBranding = useMemo(function () {
         var _a;
         // This is to determine if the secondary color should be white or black
-        var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor) ? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16)) : DEFAULT_BRAND_COLOR;
+        var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor)
+            ? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16))
+            : DEFAULT_BRAND_COLOR;
         var secondaryColor = DEFAULT_SECONDARY_COLOR;
         if (!isMobile && isColorTooDark(branding === null || branding === void 0 ? void 0 : branding.accentColor))
             secondaryColor = "#ffffff";
@@ -239,11 +243,17 @@ function ContextualWrapper(_a) {
                             boxShadowSecondary: "none",
                             fontWeight: "normal",
                             contentFontSizeLG: 14,
-                            colorBgContainerDisabled: darkMode ? "var(--row-background-dark)" : "#eef0f2",
-                            borderColorDisabled: darkMode ? "var(--row-background-dark)" : "#eef0f2",
+                            colorBgContainerDisabled: darkMode
+                                ? "var(--row-background-dark)"
+                                : "#eef0f2",
+                            borderColorDisabled: darkMode
+                                ? "var(--row-background-dark)"
+                                : "#eef0f2",
                         },
                         Drawer: {
-                            colorBgElevated: darkMode ? "var(--row-background-dark)" : SLATE_50,
+                            colorBgElevated: darkMode
+                                ? "var(--row-background-dark)"
+                                : SLATE_50,
                         },
                         Divider: {
                             colorSplit: darkMode ? SLATE_400 : SLATE_200,
@@ -339,7 +349,7 @@ function useToken() {
     return overrideToken || tokenFromContext;
 }
 
-var MarkupContainer = defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
+var MarkupContainer = defaultStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 var InvoiceQuoteView = function (_a) {
     var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError;
     var downloadFile = useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
@@ -357,7 +367,7 @@ var InvoiceQuoteView = function (_a) {
                     minWidth: "750px",
                 } }, { children: [jsx(Markup, { content: html }), children] })))] })));
 };
-var templateObject_1$7;
+var templateObject_1$b;
 
 var fetchPDF = function (apiEndpoint, invoiceUuid, token) { return __awaiter(void 0, void 0, void 0, function () {
     var response;
@@ -487,7 +497,7 @@ var getQuoteAmountDue = function (quote) {
     return quote.amountDue;
 };
 
-var MUTATION$7 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
+var 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 () {
@@ -504,7 +514,7 @@ var checkout = function (_a) {
                         mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
                     }
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$7,
+                            query: MUTATION$8,
                             token: token,
                             vars: mutationVars,
                             apiHost: apiHost,
@@ -723,13 +733,13 @@ var PlusIcon = function (_a) {
     return (jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
-var Text$e = Typography.Text;
+var Text$p = Typography.Text;
 var CreditCard = function (_a) {
     var _b;
     var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d;
     var isMobile = useIsMobile();
     var Wrapper = cardEnabled ? Card : "div";
-    return (jsxs(Wrapper, __assign({ className: "".concat(cardEnabled ? shadow : "", " m-0") }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Text$e, { 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 }))] }))] }))] })));
+    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$p, { 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;
@@ -741,7 +751,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: [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$e, { 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, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove" })) })))] })) : (jsxs("div", __assign({ className: "flex flex-row gap-2 items-center" }, { children: [jsx(CreditCardOutlined, {}), jsx(Text$e, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: "No payment method selected" })), jsx(Button, { 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$p, { 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, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove" })) })))] })) : (jsxs("div", __assign({ className: "flex flex-row gap-2 items-center" }, { children: [jsx(CreditCardOutlined, {}), jsx(Text$p, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: "No payment method selected" })), jsx(Button, { disabled: true, type: "link" })] }))) })));
 };
 var CardImage = function (_a) {
     var _b, _c;
@@ -760,7 +770,7 @@ var CardImage = function (_a) {
 };
 var CardAttribute = function (_a) {
     var title = _a.title, value = _a.value;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsx(Text$e, { children: value })] })));
+    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsx(Text$p, { children: value })] })));
 };
 var CardActions = function (_a) {
     var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
@@ -941,7 +951,7 @@ function useSave$1(_a) {
     return { save: save, isSaving: isSaving };
 }
 
-var Text$d = Typography.Text;
+var Text$o = Typography.Text;
 var TEST_CARD = "4242424242424242";
 var DemoPayForm = function (_a) {
     var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -1002,16 +1012,16 @@ var DemoPayForm = function (_a) {
     var onCardCvcChange = function (cvc) {
         setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
     };
-    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsx(Text$d, __assign({ className: "text-xs" }, { children: "DemoPay is for testing only." })), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
+    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsx(Text$o, __assign({ className: "text-xs" }, { children: "DemoPay is for testing only." })), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
 };
-var StyledInputs = defaultStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"], ["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"])), function (_a) {
+var StyledInputs = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"], ["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"])), function (_a) {
     var darkMode = _a.darkMode;
     return darkMode ? "var(--row-background-dark)" : "white";
 }, function (_a) {
     var darkMode = _a.darkMode;
     return darkMode ? GRAY_500 : GRAY_200;
 });
-var templateObject_1$6;
+var templateObject_1$a;
 
 var createPaymentMethod = function (_a) {
     var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
@@ -1110,7 +1120,7 @@ function useSave(_a) {
     var save = function (_a) {
         var plugin = _a.plugin;
         return __awaiter(_this, void 0, void 0, function () {
-            var submitError, response, clientSecret, intentResponse, paymentMethodId, paymentMethodResponse;
+            var submitError, response, clientSecret, intentResponse, paymentMethodId, paymentMethodResponse, error_1;
             var _b, _c;
             return __generator(this, function (_d) {
                 switch (_d.label) {
@@ -1171,9 +1181,8 @@ function useSave(_a) {
                         });
                         return [3 /*break*/, 7];
                     case 5:
-                        _d.sent();
-                        // console.error(error);
-                        console.log("fancy error right here");
+                        error_1 = _d.sent();
+                        console.error(error_1);
                         return [3 /*break*/, 7];
                     case 6:
                         setIsSaving(false);
@@ -1245,7 +1254,7 @@ var CardIcon = function () {
     return (jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1.5 7.5H16.5", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
-var Text$c = Typography.Text;
+var Text$n = 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, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
@@ -1258,9 +1267,9 @@ var PaymentOption = function (_a) {
     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(paymentPlugin); } }, { children: [jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsx(Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsx(Text$c, { children: name })] })), isAch ? (jsx(BankOutlined, { 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$n, { children: name })] })), isAch ? (jsx(BankOutlined, { className: "text-slate-400" })) : isCard ? (jsx(CardIcon, {})) : (jsx(CardIcon, {}))] })));
 };
-var PaymentOptionContainer = defaultStyled.div(templateObject_1$5 || (templateObject_1$5 = __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 PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"], ["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var $brandColor = _a.$brandColor, $selected = _a.$selected;
     return $selected &&
         "\n    border-color: ".concat($brandColor, ";\n  ");
@@ -1268,7 +1277,7 @@ var PaymentOptionContainer = defaultStyled.div(templateObject_1$5 || (templateOb
     var $brandColor = _a.$brandColor;
     return $brandColor;
 });
-var templateObject_1$5;
+var templateObject_1$9;
 
 function useRemovePaymentMethod(paymentPlugins, apiHost, entityId, token, accountId) {
     var _this = this;
@@ -1453,7 +1462,7 @@ function ActualInvoice() {
     return (jsx(Fragment, { children: 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, token: token }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsx("div", __assign({ className: "w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice, graphQLClient: graphQLClient }) })))] })) }));
 }
 
-var MUTATION$6 = 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  }"; };
+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  }"; };
 var getFormattedQuote = function (_a) {
     var id = _a.id, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -1461,7 +1470,7 @@ var getFormattedQuote = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$6(),
+                        query: MUTATION$7(),
                         token: token,
                         apiHost: apiHost,
                         vars: { id: id },
@@ -1539,10 +1548,16 @@ var useSendAcceptQuote = function (_a) {
                     });
                     client.on("sign", function (data) {
                         queryClient.refetchQueries({
-                            queryKey: QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
+                            queryKey: QueryKeyFactory.default.createQuoteKey({
+                                id: quoteId,
+                                token: token,
+                            }),
                         });
                         queryClient.refetchQueries({
-                            queryKey: QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
+                            queryKey: QueryKeyFactory.default.createQuoteKey({
+                                id: quoteId,
+                                token: token,
+                            }),
                         });
                     });
                     // Open the DropboxSign modal
@@ -1563,10 +1578,16 @@ var useSendAcceptQuote = function (_a) {
             else {
                 setAcceptBoxVisible(false);
                 queryClient.invalidateQueries({
-                    queryKey: QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
+                    queryKey: QueryKeyFactory.default.createQuoteKey({
+                        id: quoteId,
+                        token: token,
+                    }),
                 });
                 queryClient.invalidateQueries({
-                    queryKey: QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
+                    queryKey: QueryKeyFactory.default.createQuoteKey({
+                        id: quoteId,
+                        token: token,
+                    }),
                 });
             }
         }, token);
@@ -1656,11 +1677,11 @@ var PandadocPollingModal = function (_a) {
     return (jsxs(Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxs("div", __assign({ className: "py-4 text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsx("div", __assign({ className: "text-center" }, { children: infoMessage }))] })));
 };
 
-var ModalOverrideBrandStylings = defaultStyled(Modal)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-title {\n    font-family: ", ";\n  }\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"], ["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-title {\n    font-family: ", ";\n  }\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"])), MARK_PRO);
+var ModalOverrideBrandStylings = defaultStyled(Modal)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-title {\n    font-family: ", ";\n  }\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"], ["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-title {\n    font-family: ", ";\n  }\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"])), MARK_PRO);
 var StyledModal$1 = function (props) {
     return jsx(ModalOverrideBrandStylings, __assign({ closable: false }, props));
 };
-var templateObject_1$4;
+var templateObject_1$8;
 
 var useFocusFirstInput = function (_a) {
     var firstInputRef = _a.firstInputRef, isVisible = _a.isVisible;
@@ -1695,8 +1716,8 @@ var AcceptQuoteModal = function (_a) {
         }, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxs(Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical" }, { children: [jsx(Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsx(Input, { autoFocus: true, ref: firstInputRef }) })), jsx(Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsx(Input, {}) })), taxNumberRequired && (jsx(Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsx(Input, {}) })))] })) })));
 };
 
-var Text$b = Typography.Text;
-defaultStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
+var Text$m = Typography.Text;
+defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 function Quote(_a) {
     var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onQuoteLoaded = _a.onQuoteLoaded;
     return (jsx(InvoiceQuoteContext.Provider, __assign({ value: {
@@ -1767,11 +1788,15 @@ function ActualQuote(_a) {
     var isAccepted = formattedQuote.state === "ACCEPTED";
     return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
                             color: entityBranding.secondaryColor,
-                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$b, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile ? "flex w-full justify-end gap-2" : "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + "/api/pdf/quote", token); } }, { children: "Download" }))) : null, !isAccepted ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] })))] })), jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
+                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$m, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile
+                                    ? "flex w-full justify-end gap-2"
+                                    : "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () {
+                                            return downloadFile(apiHost + "/api/pdf/quote", token);
+                                        } }, { children: "Download" }))) : null, !isAccepted ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] })))] })), jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
                                 return (jsx(Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
                             }) }))) : null }))] })), jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
-var templateObject_1$3;
+var templateObject_1$7;
 
 var QUOTES_QUERY = function (filter) { return "\n  query quotes {\n    quotes ".concat(filter ? "(".concat(filter, ")") : "", " {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n      nodes {\n        id\n        name\n        account {\n          name\n          id\n        }\n        applicationDate\n        state\n        createdAt\n        expiresAt\n        currencyId\n        amount\n        number\n      }\n    }\n  }"); };
 var getQuotes = function (_a) {
@@ -19069,13 +19094,12 @@ var getColor = function (state) {
     }
 };
 
-var Text$a = Typography.Text;
+var Text$l = Typography.Text;
 var TransactionDate = function (_a) {
     var date = _a.date;
-    return jsx(Text$a, __assign({ className: "text-sm" }, { children: formatDate(date) }));
+    return jsx(Text$l, __assign({ className: "text-sm" }, { children: formatDate(date) }));
 };
 
-// TODO: delete
 var ArrowDownToLine = function (_a) {
     var className = _a.className, _b = _a.color, color = _b === void 0 ? SLATE_600 : _b;
     return (jsxs("svg", __assign({ className: className, fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M8 11.3333V2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M4 7.33301L8 11.333L12 7.33301", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M12.6654 14H3.33203", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
@@ -19103,17 +19127,17 @@ var TransactionGridCell = defaultStyled.div.withConfig({
     shouldForwardProp: function (prop) {
         return !["gridColumn", "padding", "right"].includes(prop);
     },
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"], ["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) {
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"], ["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) {
     return props.right ? "flex-end" : "flex-start";
 }, function (props) {
     return props.right ? "right" : "left";
 }, SLATE_600);
-var templateObject_1$2;
+var templateObject_1$6;
 
-var Text$9 = Typography.Text;
+var Text$k = Typography.Text;
 var TransactionsEmptyState = function () {
     var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
-    return (jsx(Text$9, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
+    return (jsx(Text$k, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
 };
 
 var isInvoice = function (transaction) {
@@ -19146,7 +19170,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
     }
 }
 
-var Text$8 = Typography.Text;
+var Text$j = Typography.Text;
 var TransactionsListDesktop = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var _b = useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19175,11 +19199,11 @@ var TransactionsListDesktop = function (_a) {
                         !showState &&
                         !showAmount &&
                         !showDownload &&
-                        !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$8, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$8, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(Text$8, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsx(TransactionGridCell, { right: false })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$8, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
+                        !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsx(TransactionGridCell, { right: false })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$j, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
         }) }));
 };
 
-var Text$7 = Typography.Text;
+var Text$i = Typography.Text;
 var TransactionsListMobile = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var _b = useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19202,12 +19226,12 @@ var TransactionsListMobile = function (_a) {
                     backgroundColor: index % 2 === 0
                         ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
                         : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-                } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [(showTitle || showState) && (jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$7, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] }))), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showAccountName && jsx(Text$7, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$7, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$7, { children: "\u00B7" }), showAmount && (jsx(Text$7, { children: formatCurrency(transaction.transactionable.amount ||
+                } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [(showTitle || showState) && (jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] }))), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showAccountName && jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$i, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$i, { children: "\u00B7" }), showAmount && (jsx(Text$i, { children: formatCurrency(transaction.transactionable.amount ||
                                                 transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
         }) }));
 };
 
-var Text$6 = Typography.Text;
+var Text$h = Typography.Text;
 var DISPLAY_WIDTH = 1200;
 function Transactions(_a) {
     var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date", "title", "state", "amount", "download"] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? "shadow-md" : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
@@ -19321,7 +19345,7 @@ function TransactionsDisplay(_a) {
         onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
         setDrawerOpen(false);
     }
-    return (jsxs("div", __assign({ style: style }, { children: [jsxs("div", __assign({ className: "flex flex-col w-full shadow-padding-xb gap-2 ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-1" : "flex-row items-center", " justify-between") }, { children: [showTitle ? (jsx(Text$6, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsx("div", {}) // Empty div so justify-between works
+    return (jsxs("div", __assign({ style: style }, { children: [jsxs("div", __assign({ className: "flex flex-col w-full shadow-padding-xb gap-2 ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-1" : "flex-row items-center", " justify-between") }, { children: [showTitle ? (jsx(Text$h, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsx("div", {}) // Empty div so justify-between works
                             ), showSearchBar && (jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "") }, { children: jsx(Input, { className: searchBarClassName
                                         ? searchBarClassName
                                         : "border border-slate-200", onChange: function (e) {
@@ -19467,10 +19491,10 @@ var getBillingDetails = function (_a) {
     });
 };
 
-var Text$5 = Typography.Text;
+var Text$g = Typography.Text;
 var DrawerHeader = function (_a) {
     var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx(Text$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx(Text$g, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
 };
 
 var PaymentMethod = function (_a) {
@@ -19536,515 +19560,1100 @@ var PaymentMethodDisplay = function (_a) {
         }, title: jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method", closeButtonClassName: "ant-drawer-close" }) }, { children: children })));
 };
 
-var pageWrapperClassName = function (isMobile) {
-    return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
-};
-
-var QUOTE_FIELDS = "quote {\n  formattedQuote {\n    html\n  }\n  acceptedByName\n  acceptedByTitle\n  accountId\n  amount\n  amountDue\n  applicationDate\n  applied\n  billingDay\n  contactId\n  createdAt\n  credits\n  currencyId\n  dealId\n  discount\n  discountValue\n  endDate\n  evergreen\n  expiresAt\n  id\n  invoiceUntil\n  isPendingApprovalRequest\n  kind\n  message\n  name\n  netPaymentDays\n  notes\n  ownerId\n  periodAmount\n  poNumber\n  requiresApproval\n  startDate\n  state\n  subtotal\n  taxAmount\n  updatedAt\n  uuid\n  amountsByPeriod {\n    amount\n    id\n    name\n  }\n  endDateOptions {\n    endDate\n    label\n  }\n  invoiceUntilOptions {\n    endDate\n    label\n  }\n  quoteChanges {\n    id\n    priceListId\n    charges {\n      amount\n      amountsByPeriod { amount startDate }\n      billingPeriod\n      billingPeriodAmounts { id amount prorationRate }\n      chargeType\n      couponId\n      createdAt\n      currencyId\n      discount\n      endDate\n      feature { id name code isUnit unitName }\n      id\n      invoiceLineText\n      name\n      price\n      priceDecimals\n      priceTiers { starts price }\n      pricingModel\n      prorationRate\n      quantity\n      quantityMax\n      quantityMin\n      startDate\n      tieredAveragePrice\n      updatedAt\n    }\n  }\n}";
-
-var QUOTE_RECALCULATE_TAXES = "\n  mutation QuoteRecalculateTaxes($id: ID!) {\n    quoteRecalculateTaxes(id: $id) {\n      ".concat(QUOTE_FIELDS, "\n      errors\n    }\n  }\n");
-var quoteRecalculateTaxes = function (_a) {
-    var quoteId = _a.quoteId, token = _a.token, apiHost = _a.apiHost;
+var MUTATION$6 = function () { return "\nmutation AccountSignup (\n  $entityId: ID!,\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!\n) {\n  accountSignup(\n    entityId: $entityId,\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId\n  ) {\n    errors\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
+var accountSignup = function (_a) {
+    var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
     return __awaiter(void 0, void 0, void 0, function () {
         var vars, response, errors;
-        var _b, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
-                    vars = { id: quoteId };
+                    vars = {
+                        entityId: entityId,
+                        accountId: accountId,
+                        quoteId: quoteId,
+                        paymentToken: paymentToken,
+                        pluginId: pluginId,
+                        paymentMethodId: paymentMethodId,
+                        priceListCode: priceListCode,
+                    };
                     return [4 /*yield*/, gqlRequest({
-                            query: QUOTE_RECALCULATE_TAXES,
+                            query: MUTATION$6(),
                             token: token,
                             vars: vars,
                             apiHost: apiHost,
                         })];
                 case 1:
-                    response = _d.sent();
-                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteRecalculateTaxes) === null || _b === void 0 ? void 0 : _b.errors;
+                    response = _c.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.accountSignup) === null || _b === void 0 ? void 0 : _b.errors;
                     if (errors)
                         throw errors;
-                    return [2 /*return*/, (_c = response.quoteRecalculateTaxes) === null || _c === void 0 ? void 0 : _c.quote];
-            }
-        });
-    });
-};
-
-var MUTATION$5 = "{\n  currentUser {\n    taxationRequiredAccountFields\n  }\n}";
-var getTaxationRequiredAccountFields = function (_a) {
-    var token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
-                case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$5,
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _d.sent();
-                    return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
-                            ? response.currentUser
-                                .taxationRequiredAccountFields
-                            : null];
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.accountSignup];
             }
         });
     });
 };
 
-var useHasTaxPlugin = function (_a) {
-    var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
-    var plugins = usePlugins({
-        entityId: entityId,
-        apiHost: apiHost,
-        token: token,
-    }).data;
-    return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
-};
-
-var MUTATION$4 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account {\n          id\n          billingCountry\n          billingState\n          billingStreet\n          billingCity\n          billingZip\n          name\n        }\n        errors\n      }\n  }\n";
-var accountUpdate = function (_a) {
-    var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
+var MUTATION$5 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $entityId: ID!,\n  $priceListCode: String!\n) {\n  quoteAccountSignup(\n    entityId: $entityId,\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact\n  ) {\n    account {\n      id\n    }\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n    tenant {\n      code\n    }\n    portalSessionToken\n    errors\n  }\n}"; };
+var quoteAccountSignup = function (_a) {
+    var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
     return __awaiter(void 0, void 0, void 0, function () {
         var vars, response, errors;
         var _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
-                    vars = { id: accountId, attributes: attributes };
+                    vars = {
+                        entityId: entityId,
+                        priceListCode: priceListCode,
+                        accountName: accountName,
+                        billingContact: billingContact,
+                    };
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$4,
+                            query: MUTATION$5(),
                             token: token,
                             vars: vars,
                             apiHost: apiHost,
                         })];
                 case 1:
                     response = _c.sent();
-                    errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAccountSignup) === null || _b === void 0 ? void 0 : _b.errors;
                     if (errors)
                         throw errors;
-                    return [2 /*return*/, response.accountUpdate];
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quoteAccountSignup];
             }
         });
     });
 };
 
-var COUNTRIES_REQUIRING_STATE = ["US", "CA"];
-var TaxationForm = function (_a) {
-    var account = _a.account, quote = _a.quote;
-    // Hooks
-    var queryClient = useQueryClient();
+var MUTATION$4 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
+var getPriceList = function (_a) {
+    var token = _a.token, code = _a.code, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: MUTATION$4(),
+                        token: token,
+                        vars: { code: code },
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.priceList];
+            }
+        });
+    });
+};
+
+function PaymentForms(_a) {
+    var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, entityId = _a.entityId, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction;
     var apiHost = useContext(BunnyContext).apiHost;
-    var token = useToken();
+    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, graphQLClient: createGraphQLClient(apiHost, overrideToken), customCheckoutFunction: customCheckoutFunction })) : null })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
+}
+function InitialSignupForm(_a) {
+    var onSubmit = _a.onSubmit, submitting = _a.submitting;
     var form = Form.useForm()[0];
-    // Mutations
-    var _b = useMutation({
-        mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
-            var account;
+    function handleSubmit() {
+        form.validateFields({ validateOnly: false }).then(function () {
+            onSubmit(form.getFieldsValue());
+        });
+    }
+    return (jsxs(Form, __assign({ className: "flex flex-col justify-between h-full w-full", form: form, layout: "vertical", autoComplete: "off" }, { children: [jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsx(Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: "Please input your first name!" }] }, { children: jsx(Input, { placeholder: "First name" }) })), jsx(Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: "Please input your last name!" }] }, { children: jsx(Input, { placeholder: "Last name" }) })), jsx(Form.Item, __assign({ name: "email", rules: [
+                            { required: true, message: "Please input your email!" },
+                            { type: "email", message: "Please enter a valid email!" },
+                        ] }, { children: jsx(Input, { placeholder: "Email" }) })), jsx(Form.Item, __assign({ name: "accountName", rules: [
+                            { required: true, message: "Please input your company name!" },
+                        ] }, { children: jsx(Input, { placeholder: "Company name" }) }))] })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
+}
+
+var Title = Typography.Title, Text$f = Typography.Text;
+function PaymentSuccessDisplay(_a) {
+    var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
+    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxs(Text$f, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
+}
+
+var Text$e = Typography.Text;
+function PriceListDisplay(_a) {
+    var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
+    if (!priceListData)
+        return null;
+    return (jsx(Fragment, { children: jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsx(Text$e, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxs(Text$e, __assign({ className: "font-bold text-xl" }, { children: [formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxs(Text$e, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$e, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
+}
+
+var showErrorNotification = useErrorNotification();
+function Signup(_a) {
+    var companyName = _a.companyName, entityId = _a.entityId, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, style = _a.style;
+    // Hooks
+    var _d = useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
+    var tokenFromContexts = useToken();
+    var isMobile = useIsMobile();
+    var topNavImageUrl = useContext(BrandContext).topNavImageUrl;
+    var _e = useState(undefined), quote = _e[0], setQuote = _e[1];
+    var _f = useState(undefined), accountId = _f[0], setAccountId = _f[1];
+    var _g = useState(undefined), portalSessionToken = _g[0], setPortalSessionToken = _g[1];
+    var token = portalSessionToken || tokenFromContexts;
+    var _h = useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
+    var _j = useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
+    var _k = useState(undefined), paymentMethodGraphQLClient = _k[0], setPaymentMethodGraphQLClient = _k[1];
+    var paymentMethod = usePaymentMethod({
+        accountId: accountId,
+        entityId: entityId,
+        graphQLClient: paymentMethodGraphQLClient || graphQLClient,
+        token: token,
+    }).data;
+    var queryClient = useQueryClient();
+    // Queries
+    var priceListData = useQuery({
+        queryKey: ["priceList", priceListCode],
+        queryFn: function () { return getPriceList({ token: token, apiHost: apiHost, code: priceListCode }); },
+    }).data;
+    function handleSubmit(formData) {
+        return __awaiter(this, void 0, void 0, function () {
+            var data, error_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, accountUpdate({
-                            accountId: quote.accountId,
-                            attributes: changedFormData,
-                            token: token,
-                            apiHost: apiHost,
-                        })];
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        setProceedingToPayment(true);
+                        return [4 /*yield*/, quoteAccountSignup({
+                                token: token,
+                                apiHost: apiHost,
+                                entityId: entityId,
+                                priceListCode: priceListCode,
+                                accountName: formData.accountName,
+                                billingContact: {
+                                    firstName: formData.firstName,
+                                    lastName: formData.lastName,
+                                    email: formData.email,
+                                },
+                            })];
                     case 1:
-                        account = _a.sent();
-                        return [2 /*return*/, account];
+                        data = _a.sent();
+                        setAccountId(data.account.id);
+                        setPortalSessionToken(data.portalSessionToken);
+                        setPaymentMethodGraphQLClient(createGraphQLClient(apiHost, data.portalSessionToken));
+                        // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
+                        // to instead use paymentMethods from portalSessionToken.
+                        queryClient.invalidateQueries({
+                            queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
+                                entityId: entityId,
+                                token: token,
+                            }),
+                        });
+                        setProceedingToPayment(false);
+                        setQuote(data.quote);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _a.sent();
+                        setProceedingToPayment(false);
+                        showErrorNotification(error_1.response.message);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
                 }
             });
-        }); },
-        onSuccess: function () {
-            queryClient.invalidateQueries({
-                queryKey: ["getTaxationRequiredAccountFields", token],
+        });
+    }
+    function handlePaymentSuccess() {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                setPurchaseSucceeded(true);
+                return [2 /*return*/];
             });
-        },
-    }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
-    return (jsxs(Form, __assign({ className: "flex flex-col gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsx(Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsx(Input, { placeholder: "Street" }) })), jsx(Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsx(Input, { placeholder: "City" }) })), jsx(FormBillingState, { form: form }), jsx(Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsx(Select, { options: Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
-                        var _a, _b;
-                        return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
-                            ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
-                    } }) })), jsx(Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsx(Input, { placeholder: "Zip" }) })), jsx(Form.Item, { children: jsx(Button, __assign({ className: "w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
-};
-var FormBillingState = function (_a) {
-    _a.form;
-    var billingCountry = Form.useWatch("billingCountry");
-    var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
-    return (jsx(Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsx(Input, { placeholder: "State" }) })));
-};
-
-var QuoteCheckout = function (_a) {
-    var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, entityId = _a.entityId;
-    var _b = useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
-    var token = useToken();
-    var isMobile = useIsMobile();
-    var _c = useState(false), isSaving = _c[0], setIsSaving = _c[1];
-    var paymentRequired = getQuoteAmountDue(quote) > 0;
-    var checkoutMutation = useMutation({
-        mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
+        });
+    }
+    function accountSignupFunction(plugin) {
+        return __awaiter(this, 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 })];
+                        if (!portalSessionToken) {
+                            throw new Error("Portal session token is required");
+                        }
+                        if (!accountId) {
+                            throw new Error("Account ID is required");
+                        }
+                        if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
+                            throw new Error("Plugin ID is required");
+                        }
+                        if (!(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id)) {
+                            throw new Error("Payment method ID is required");
+                        }
+                        return [4 /*yield*/, accountSignup({
+                                token: portalSessionToken,
+                                apiHost: apiHost,
+                                entityId: entityId,
+                                quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
+                                paymentMethodId: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
+                                pluginId: plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(),
+                                priceListCode: priceListCode,
+                                accountId: accountId,
+                            })];
                     case 1: return [2 /*return*/, _a.sent()];
                 }
             });
-        }); },
-        onSuccess: onSuccess,
-        onError: onFail,
-    });
-    function handleCheckoutNoPayment() {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                setIsSaving(true);
-                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: 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, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsx("div", __assign({ className: "text-xs text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
+    function handlePaymentFail(error) {
+        showErrorNotification(error.response.message);
+    }
+    var WrapperComponent = function (_a) {
+        var children = _a.children, className = _a.className, style = _a.style;
+        return isCardEnabled ? (jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsx("div", __assign({ className: className, style: style }, { children: children })));
+    };
+    return (jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsx(Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsx(Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsx("div", __assign({ className: "flex ".concat(isMobile
+                        ? "items-center justify-center my-12"
+                        : "w-1/2 items-center justify-center my-12") }, { children: jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
+}
+
+var createRequestHeaders = function (token) {
+    var bearerToken = "Bearer ".concat(token);
+    var headers = {
+        "Content-type": "application/json; charset=utf-8",
+    };
+    headers["Authorization"] = bearerToken;
+    return headers;
 };
-var PaymentFormWrapper = function (_a) {
-    var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
-    var isMobile = useIsMobile();
-    return (jsx("div", __assign({ className: "flex flex-col gap-6 shrink-0 ".concat(isMobile ? "w-full shadow-padding-xb" : "", " ").concat(className), style: __assign({}, (isMobile
-            ? setMaxHeight
-                ? { maxHeight: "60vh" }
-                : {}
-            : {
-                width: "350px",
-            })) }, { children: children })));
+var getGraphQLBaseURL = function (apiHost) {
+    return "".concat(apiHost, "/graphql");
 };
-
-var queryKeyFactory = QueryKeyFactory.default;
-var Checkout = function (_a) {
-    var _b, _c;
-    var entityId = _a.entityId, onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, token = _a.token, _d = _a.quantity, quantity = _d === void 0 ? 0 : _d;
-    var _e = useContext(BunnyContext), apiHost = _e.apiHost, graphQLClient = _e.graphQLClient;
-    var isMobile = useIsMobile();
-    var hasTaxPlugin = useHasTaxPlugin({
-        entityId: entityId,
-        apiHost: apiHost,
-        token: token,
-    });
-    var queryClient = useQueryClient();
-    // Queries
-    var _f = useQuery({
-        queryKey: ["getTaxationRequiredAccountFields", token],
-        queryFn: function () { return getTaxationRequiredAccountFields({ token: token, apiHost: apiHost }); },
-        enabled: Boolean(quote),
-        staleTime: 0,
-    }), taxationRequiredAccountFields = _f.data, isLoadingTaxationRequiredAccountFields = _f.isLoading;
-    var _g = useQuery({
-        queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
-        queryFn: function () { return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, token: token, apiHost: apiHost }); },
-        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
-    }), account = _g.data, isLoadingAccount = _g.isLoading;
-    useQuery({
-        queryKey: queryKeyFactory.createQuoteTaxCalculateKey({ id: quote === null || quote === void 0 ? void 0 : quote.id, token: token }),
-        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
-            var updatedQuote, quoteKey, calculatedPricesKey;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!quote) return [3 /*break*/, 2];
-                        return [4 /*yield*/, quoteRecalculateTaxes({
-                                quoteId: quote.id,
-                                token: token,
-                                apiHost: apiHost,
-                            })];
-                    case 1:
-                        updatedQuote = _a.sent();
-                        if (updatedQuote) {
-                            quoteKey = queryKeyFactory.createObjectKey({ objectName: "editingQuote", id: updatedQuote.id, token: token });
-                            calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
-                                quantity: quantity,
-                                priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
-                                token: token,
-                            });
-                            queryClient.setQueryData(quoteKey, updatedQuote);
-                            queryClient.setQueryData(calculatedPricesKey, updatedQuote);
-                        }
-                        _a.label = 2;
-                    case 2: return [2 /*return*/, {}];
-                }
-            });
-        }); },
-        // Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
-        enabled: Boolean(quote) &&
-            open &&
-            hasTaxPlugin &&
-            !taxationRequiredAccountFields &&
-            !isLoadingTaxationRequiredAccountFields,
-        staleTime: 0,
-    });
-    if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
-        return null;
-    return (jsx("div", __assign({ className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 bg-slate-50 overflow-auto", style: {
-            zIndex: 1001,
-        } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsx(CloseOutlined, { 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: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
-                                onFail(error);
-                            }, onPaymentSuccess: onSuccess, graphQLClient: graphQLClient }))] }))] })) })));
+var useGraphQLRequest = function () {
+    return function (query, token, apiHost, variables) { return __awaiter(void 0, void 0, void 0, function () {
+        var error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, request(getGraphQLBaseURL(apiHost), query, variables, createRequestHeaders(token))];
+                case 1: return [2 /*return*/, _a.sent()];
+                case 2:
+                    error_1 = _a.sent();
+                    throw error_1;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
 };
 
-var MUTATION$3 = function () { return "\nmutation AccountSignup (\n  $entityId: ID!,\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!\n) {\n  accountSignup(\n    entityId: $entityId,\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId\n  ) {\n    errors\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
-var accountSignup = function (_a) {
-    var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response, errors;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    vars = {
-                        entityId: entityId,
-                        accountId: accountId,
-                        quoteId: quoteId,
-                        paymentToken: paymentToken,
-                        pluginId: pluginId,
-                        paymentMethodId: paymentMethodId,
-                        priceListCode: priceListCode,
-                    };
-                    return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$3(),
-                            token: token,
-                            vars: vars,
-                            apiHost: apiHost,
-                        })];
+var useCreateSubscriptionQuote = function () {
+    var graphQLRequest = useGraphQLRequest();
+    return function (subscriptionIds, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+        var data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation quoteSubscriptionUpdate(\n      $subscriptionIds: [ID!]!,\n    ) {\n      quoteSubscriptionUpdate(\n        subscriptionIds: $subscriptionIds,\n      ) {\n        quote {\n          id\n          quoteChanges {\n            id\n            priceList {\n              id\n            }\n            charges {\n              id\n              priceListCharge {\n                id\n              }\n            }\n          }\n        }\n      }\n    }\n      ", token, apiHost, {
+                        subscriptionIds: subscriptionIds,
+                    })];
                 case 1:
-                    response = _c.sent();
-                    errors = (_b = response === null || response === void 0 ? void 0 : response.accountSignup) === null || _b === void 0 ? void 0 : _b.errors;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.accountSignup];
+                    data = _a.sent();
+                    return [2 /*return*/, data];
             }
         });
-    });
+    }); };
 };
-
-var MUTATION$2 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $entityId: ID!,\n  $priceListCode: String!\n) {\n  quoteAccountSignup(\n    entityId: $entityId,\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact\n  ) {\n    account {\n      id\n    }\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n    tenant {\n      code\n    }\n    portalSessionToken\n    errors\n  }\n}"; };
-var quoteAccountSignup = function (_a) {
-    var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response, errors;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    vars = {
-                        entityId: entityId,
-                        priceListCode: priceListCode,
-                        accountName: accountName,
-                        billingContact: billingContact,
-                    };
-                    return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$2(),
-                            token: token,
-                            vars: vars,
-                            apiHost: apiHost,
-                        })];
+var useQuoteChangeUpdate = function () {
+    var graphQLRequest = useGraphQLRequest();
+    return function (charges, quoteChangeId, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {\n      quoteChangeUpdate(id:$id, charges:$charges) {\n        quoteChange { id quoteId }\n        errors\n      }\n    }", token, apiHost, { charges: charges, id: quoteChangeId })];
                 case 1:
-                    response = _c.sent();
-                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAccountSignup) === null || _b === void 0 ? void 0 : _b.errors;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quoteAccountSignup];
+                    response = _a.sent();
+                    return [2 /*return*/, response];
             }
         });
-    });
+    }); };
+};
+var useQuoteDelete = function () {
+    var graphQLRequest = useGraphQLRequest();
+    return function (quoteId, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteDelete($id: ID!) {\n        quoteDelete(id: $id) {\n          errors\n        }\n      }", token, apiHost, { id: quoteId })];
+                case 1:
+                    response = _a.sent();
+                    return [2 /*return*/, response];
+            }
+        });
+    }); };
 };
 
-var MUTATION$1 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
-var getPriceList = function (_a) {
-    var token = _a.token, code = _a.code, apiHost = _a.apiHost;
+var QUOTE_QUERY = function (id) { return "\n        query quote {\n            quote(id: ".concat(id, ") {\n                accountId\n                amount\n                amountDue\n                smallUnitAmountDue\n                currencyId\n                formattedQuote {\n                  html\n                }\n                id\n                payableId\n                periodAmount\n                subtotal\n                taxAmount\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                quoteChanges {\n                    currencyId\n                    id\n                    charges {\n                        amountsByPeriod {\n                          amount\n                          startDate\n                        }\n                        amount\n                        billingPeriod\n                        currencyId\n                        feature {\n                          unitName\n                        }\n                        id\n                        name\n                        priceListCharge {\n                          id\n                        }\n                        quantity\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"); };
+var getQuote = function (_a) {
+    var id = _a.id, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$1(),
+                        query: QUOTE_QUERY(id),
                         token: token,
-                        vars: { code: code },
+                        vars: {},
                         apiHost: apiHost,
                     })];
                 case 1:
                     response = _b.sent();
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.priceList];
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
             }
         });
     });
 };
 
-function PaymentForms(_a) {
-    var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, entityId = _a.entityId, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction;
-    var apiHost = useContext(BunnyContext).apiHost;
-    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, graphQLClient: createGraphQLClient(apiHost, overrideToken), customCheckoutFunction: customCheckoutFunction })) : null })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
-}
-function InitialSignupForm(_a) {
-    var onSubmit = _a.onSubmit, submitting = _a.submitting;
-    var form = Form.useForm()[0];
-    function handleSubmit() {
-        form.validateFields({ validateOnly: false }).then(function () {
-            onSubmit(form.getFieldsValue());
+var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList { id periodMonths }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
+var getSubscriptions = function (_a) {
+    var apiHost = _a.apiHost, entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response, combinedSubscriptions;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        isInPreviewMode: isInPreviewMode,
+                        query: SUBSCRIPTIONS_QUERY,
+                        token: token,
+                        vars: { entityId: entityId },
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _d.sent();
+                    combinedSubscriptions = (_c = (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (subscription) { return (__assign(__assign({}, subscription), { charges: sortSubscriptionCharges(subscription.charges) })); });
+                    return [2 /*return*/, combinedSubscriptions];
+            }
         });
-    }
-    return (jsxs(Form, __assign({ className: "flex flex-col justify-between h-full w-full", form: form, layout: "vertical", autoComplete: "off" }, { children: [jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsx(Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: "Please input your first name!" }] }, { children: jsx(Input, { placeholder: "First name" }) })), jsx(Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: "Please input your last name!" }] }, { children: jsx(Input, { placeholder: "Last name" }) })), jsx(Form.Item, __assign({ name: "email", rules: [
-                            { required: true, message: "Please input your email!" },
-                            { type: "email", message: "Please enter a valid email!" },
-                        ] }, { children: jsx(Input, { placeholder: "Email" }) })), jsx(Form.Item, __assign({ name: "accountName", rules: [
-                            { required: true, message: "Please input your company name!" },
-                        ] }, { children: jsx(Input, { placeholder: "Company name" }) }))] })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
-}
+    });
+};
 
-var Title = Typography.Title, Text$4 = Typography.Text;
-function PaymentSuccessDisplay(_a) {
-    var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
-    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxs(Text$4, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
-}
+var pageWrapperClassName = function (isMobile) {
+    return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
+};
 
-var Text$3 = Typography.Text;
-function PriceListDisplay(_a) {
-    var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
-    if (!priceListData)
-        return null;
-    return (jsx(Fragment, { children: jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsx(Text$3, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxs(Text$3, __assign({ className: "font-bold text-xl" }, { children: [formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxs(Text$3, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$3, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
-}
+var QUOTE_FIELDS = "quote {\n  formattedQuote {\n    html\n  }\n  acceptedByName\n  acceptedByTitle\n  accountId\n  amount\n  amountDue\n  applicationDate\n  applied\n  billingDay\n  contactId\n  createdAt\n  credits\n  currencyId\n  dealId\n  discount\n  discountValue\n  endDate\n  evergreen\n  expiresAt\n  id\n  invoiceUntil\n  isPendingApprovalRequest\n  kind\n  message\n  name\n  netPaymentDays\n  notes\n  ownerId\n  periodAmount\n  poNumber\n  requiresApproval\n  startDate\n  state\n  subtotal\n  taxAmount\n  updatedAt\n  uuid\n  amountsByPeriod {\n    amount\n    id\n    name\n  }\n  endDateOptions {\n    endDate\n    label\n  }\n  invoiceUntilOptions {\n    endDate\n    label\n  }\n  quoteChanges {\n    id\n    priceListId\n    charges {\n      amount\n      amountsByPeriod { amount startDate }\n      billingPeriod\n      billingPeriodAmounts { id amount prorationRate }\n      chargeType\n      couponId\n      createdAt\n      currencyId\n      discount\n      endDate\n      feature { id name code isUnit unitName }\n      id\n      invoiceLineText\n      name\n      price\n      priceDecimals\n      priceTiers { starts price }\n      pricingModel\n      prorationRate\n      quantity\n      quantityMax\n      quantityMin\n      startDate\n      tieredAveragePrice\n      updatedAt\n    }\n  }\n}";
+var MUTATION$3 = "\nmutation quoteCompose($quoteId: ID, $priceListId: ID, $subscriptionId: ID, $quantity: Int, $accountId: ID) {\n    quoteCompose(quoteId: $quoteId, priceListId: $priceListId, subscriptionId: $subscriptionId, quantity: $quantity, accountId: $accountId) {\n        ".concat(QUOTE_FIELDS, "\n    }\n}\n");
+var quoteCompose = function (_a) {
+    var quoteId = _a.quoteId, priceListId = _a.priceListId, subscriptionId = _a.subscriptionId, quantity = _a.quantity, accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, _b, errors, quote;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    vars = { quoteId: quoteId, priceListId: priceListId, subscriptionId: subscriptionId, quantity: quantity, accountId: accountId };
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$3,
+                            token: token,
+                            vars: vars,
+                            apiHost: apiHost,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    _b = response === null || response === void 0 ? void 0 : response.quoteCompose, errors = _b.errors, quote = _b.quote;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, quote];
+            }
+        });
+    });
+};
 
-var showErrorNotification = useErrorNotification();
-function Signup(_a) {
-    var companyName = _a.companyName, entityId = _a.entityId, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, style = _a.style;
-    // Hooks
-    var _d = useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
-    var tokenFromContexts = useToken();
-    var isMobile = useIsMobile();
-    var topNavImageUrl = useContext(BrandContext).topNavImageUrl;
-    var _e = useState(undefined), quote = _e[0], setQuote = _e[1];
-    var _f = useState(undefined), accountId = _f[0], setAccountId = _f[1];
-    var _g = useState(undefined), portalSessionToken = _g[0], setPortalSessionToken = _g[1];
-    var token = portalSessionToken || tokenFromContexts;
-    var _h = useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
-    var _j = useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
-    var _k = useState(undefined), paymentMethodGraphQLClient = _k[0], setPaymentMethodGraphQLClient = _k[1];
-    var paymentMethod = usePaymentMethod({
-        accountId: accountId,
+var QUOTE_RECALCULATE_TAXES = "\n  mutation QuoteRecalculateTaxes($id: ID!) {\n    quoteRecalculateTaxes(id: $id) {\n      ".concat(QUOTE_FIELDS, "\n      errors\n    }\n  }\n");
+var quoteRecalculateTaxes = function (_a) {
+    var quoteId = _a.quoteId, token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, errors;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    vars = { id: quoteId };
+                    return [4 /*yield*/, gqlRequest({
+                            query: QUOTE_RECALCULATE_TAXES,
+                            token: token,
+                            vars: vars,
+                            apiHost: apiHost,
+                        })];
+                case 1:
+                    response = _d.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteRecalculateTaxes) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, (_c = response.quoteRecalculateTaxes) === null || _c === void 0 ? void 0 : _c.quote];
+            }
+        });
+    });
+};
+
+var MUTATION$2 = "{\n  currentUser {\n    taxationRequiredAccountFields\n  }\n}";
+var getTaxationRequiredAccountFields = function (_a) {
+    var token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: MUTATION$2,
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _d.sent();
+                    return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
+                            ? response.currentUser
+                                .taxationRequiredAccountFields
+                            : null];
+            }
+        });
+    });
+};
+
+var useHasTaxPlugin = function (_a) {
+    var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
+    var plugins = usePlugins({
         entityId: entityId,
-        graphQLClient: paymentMethodGraphQLClient || graphQLClient,
+        apiHost: apiHost,
         token: token,
     }).data;
+    return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
+};
+
+var MUTATION$1 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account {\n          id\n          billingCountry\n          billingState\n          billingStreet\n          billingCity\n          billingZip\n          name\n        }\n        errors\n      }\n  }\n";
+var accountUpdate = function (_a) {
+    var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, errors;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    vars = { id: accountId, attributes: attributes };
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$1,
+                            token: token,
+                            vars: vars,
+                            apiHost: apiHost,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, response.accountUpdate];
+            }
+        });
+    });
+};
+
+var COUNTRIES_REQUIRING_STATE = ["US", "CA"];
+var TaxationForm = function (_a) {
+    var account = _a.account, quote = _a.quote;
+    // Hooks
     var queryClient = useQueryClient();
-    // Queries
-    var priceListData = useQuery({
-        queryKey: ["priceList", priceListCode],
-        queryFn: function () { return getPriceList({ token: token, apiHost: apiHost, code: priceListCode }); },
-    }).data;
-    function handleSubmit(formData) {
-        return __awaiter(this, void 0, void 0, function () {
-            var data, error_1;
+    var apiHost = useContext(BunnyContext).apiHost;
+    var token = useToken();
+    var form = Form.useForm()[0];
+    // Mutations
+    var _b = useMutation({
+        mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
+            var account;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        setProceedingToPayment(true);
-                        return [4 /*yield*/, quoteAccountSignup({
-                                token: token,
-                                apiHost: apiHost,
-                                entityId: entityId,
-                                priceListCode: priceListCode,
-                                accountName: formData.accountName,
-                                billingContact: {
-                                    firstName: formData.firstName,
-                                    lastName: formData.lastName,
-                                    email: formData.email,
-                                },
-                            })];
+                    case 0: return [4 /*yield*/, accountUpdate({
+                            accountId: quote.accountId,
+                            attributes: changedFormData,
+                            token: token,
+                            apiHost: apiHost,
+                        })];
                     case 1:
-                        data = _a.sent();
-                        setAccountId(data.account.id);
-                        setPortalSessionToken(data.portalSessionToken);
-                        setPaymentMethodGraphQLClient(createGraphQLClient(apiHost, data.portalSessionToken));
-                        // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
-                        // to instead use paymentMethods from portalSessionToken.
-                        queryClient.invalidateQueries({
-                            queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
-                                entityId: entityId,
-                                token: token,
-                            }),
-                        });
-                        setProceedingToPayment(false);
-                        setQuote(data.quote);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_1 = _a.sent();
-                        setProceedingToPayment(false);
-                        showErrorNotification(error_1.response.message);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
+                        account = _a.sent();
+                        return [2 /*return*/, account];
+                }
+            });
+        }); },
+        onSuccess: function () {
+            queryClient.invalidateQueries({
+                queryKey: ["getTaxationRequiredAccountFields", token],
+            });
+        },
+    }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
+    return (jsxs(Form, __assign({ className: "flex flex-col gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsx(Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsx(Input, { placeholder: "Street" }) })), jsx(Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsx(Input, { placeholder: "City" }) })), jsx(FormBillingState, { form: form }), jsx(Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsx(Select, { options: Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
+                        var _a, _b;
+                        return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
+                            ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
+                    } }) })), jsx(Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsx(Input, { placeholder: "Zip" }) })), jsx(Form.Item, { children: jsx(Button, __assign({ className: "w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
+};
+var FormBillingState = function (_a) {
+    _a.form;
+    var billingCountry = Form.useWatch("billingCountry");
+    var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
+    return (jsx(Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsx(Input, { placeholder: "State" }) })));
+};
+
+var QuoteCheckout = function (_a) {
+    var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, entityId = _a.entityId;
+    var _b = useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
+    var token = useToken();
+    var isMobile = useIsMobile();
+    var _c = useState(false), isSaving = _c[0], setIsSaving = _c[1];
+    var paymentRequired = getQuoteAmountDue(quote) > 0;
+    var checkoutMutation = useMutation({
+        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()];
                 }
             });
-        });
-    }
-    function handlePaymentSuccess() {
+        }); },
+        onSuccess: onSuccess,
+        onError: onFail,
+    });
+    function handleCheckoutNoPayment() {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
-                setPurchaseSucceeded(true);
+                setIsSaving(true);
+                checkoutMutation.mutate();
+                setIsSaving(false);
                 return [2 /*return*/];
             });
         });
     }
-    function accountSignupFunction(plugin) {
-        return __awaiter(this, void 0, void 0, function () {
+    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: 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, __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;
+    var isMobile = useIsMobile();
+    return (jsx("div", __assign({ className: "flex flex-col gap-6 shrink-0 ".concat(isMobile ? "w-full shadow-padding-xb" : "", " ").concat(className), style: __assign({}, (isMobile
+            ? setMaxHeight
+                ? { maxHeight: "60vh" }
+                : {}
+            : {
+                width: "350px",
+            })) }, { children: children })));
+};
+
+var queryKeyFactory = QueryKeyFactory.default;
+var Checkout = function (_a) {
+    var _b, _c;
+    var entityId = _a.entityId, onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, token = _a.token, _d = _a.quantity, quantity = _d === void 0 ? 0 : _d;
+    var _e = useContext(BunnyContext), apiHost = _e.apiHost, graphQLClient = _e.graphQLClient;
+    var isMobile = useIsMobile();
+    var hasTaxPlugin = useHasTaxPlugin({
+        entityId: entityId,
+        apiHost: apiHost,
+        token: token,
+    });
+    var queryClient = useQueryClient();
+    // Queries
+    var _f = useQuery({
+        queryKey: ["getTaxationRequiredAccountFields", token],
+        queryFn: function () { return getTaxationRequiredAccountFields({ token: token, apiHost: apiHost }); },
+        enabled: Boolean(quote),
+        staleTime: 0,
+    }), taxationRequiredAccountFields = _f.data, isLoadingTaxationRequiredAccountFields = _f.isLoading;
+    var _g = useQuery({
+        queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
+        queryFn: function () {
+            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, token: token, apiHost: apiHost });
+        },
+        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
+            ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
+    }), account = _g.data, isLoadingAccount = _g.isLoading;
+    useQuery({
+        queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
+            id: quote === null || quote === void 0 ? void 0 : quote.id,
+            token: token,
+        }),
+        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
+            var updatedQuote, quoteKey, calculatedPricesKey;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!portalSessionToken) {
-                            throw new Error("Portal session token is required");
-                        }
-                        if (!accountId) {
-                            throw new Error("Account ID is required");
-                        }
-                        if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
-                            throw new Error("Plugin ID is required");
-                        }
-                        if (!(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id)) {
-                            throw new Error("Payment method ID is required");
-                        }
-                        return [4 /*yield*/, accountSignup({
-                                token: portalSessionToken,
+                        if (!quote) return [3 /*break*/, 2];
+                        return [4 /*yield*/, quoteRecalculateTaxes({
+                                quoteId: quote.id,
+                                token: token,
                                 apiHost: apiHost,
-                                entityId: entityId,
-                                quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
-                                paymentMethodId: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
-                                pluginId: plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(),
-                                priceListCode: priceListCode,
-                                accountId: accountId,
                             })];
-                    case 1: return [2 /*return*/, _a.sent()];
+                    case 1:
+                        updatedQuote = _a.sent();
+                        if (updatedQuote) {
+                            quoteKey = queryKeyFactory.createObjectKey({
+                                objectName: "editingQuote",
+                                id: updatedQuote.id,
+                                token: token,
+                            });
+                            calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
+                                quantity: quantity,
+                                priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
+                                token: token,
+                            });
+                            queryClient.setQueryData(quoteKey, updatedQuote);
+                            queryClient.setQueryData(calculatedPricesKey, updatedQuote);
+                        }
+                        _a.label = 2;
+                    case 2: return [2 /*return*/, {}];
                 }
             });
+        }); },
+        // Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
+        enabled: Boolean(quote) &&
+            open &&
+            hasTaxPlugin &&
+            !taxationRequiredAccountFields &&
+            !isLoadingTaxationRequiredAccountFields,
+        staleTime: 0,
+    });
+    if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
+        return null;
+    return (jsx("div", __assign({ className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 bg-slate-50 overflow-auto", style: {
+            zIndex: 1001,
+        } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsx(CloseOutlined, { 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: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
+                                onFail(error);
+                            }, onPaymentSuccess: onSuccess, graphQLClient: graphQLClient }))] }))] })) })));
+};
+
+var useCurrentUserData = function () {
+    var queryClient = useQueryClient();
+    var token = useToken();
+    var currentUser = queryClient.getQueryData(QueryKeyFactory.default.currentUserKey(token));
+    if (!currentUser)
+        return {};
+    return currentUser;
+};
+
+var BunnyFooterIcon = function (_a) {
+    var color = _a.color;
+    return (jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsx("path", { className: "icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsx("path", { className: "icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsx("path", { className: "icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsx("path", { className: "icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsx("path", { className: "icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsx("path", { className: "icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsx("defs", { children: jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
+};
+
+var SubscriptionsContext = createContext({});
+
+var Footer = function (_a) {
+    var className = _a.className;
+    // Context
+    var quotePreviewData = useContext(SubscriptionsContext).quotePreviewData;
+    var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
+    var isMobile = useIsMobile();
+    var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
+    if (selectedPriceList && isMobile)
+        return null;
+    return (jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(isMobile ? "flex-col gap-2 grow" : "", " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsx(BunnyMarketingLink, {})] })));
+};
+var BunnyMarketingLink = function () {
+    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
+    var isMobile = useIsMobile();
+    return (jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxs("div", __assign({ className: "flex items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsx("div", __assign({ style: { paddingTop: "5px" } }, { children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) }))] })) })) })));
+};
+var StyedLink = styled.a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  font-family: Inter;\n  text-decoration: none;\n  font-size: 14px;\n"], ["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  font-family: Inter;\n  text-decoration: none;\n  font-size: 14px;\n"])), SLATE_400, SLATE_500);
+var StyledBunnyLink = styled(StyedLink)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), PRIMARY_COLOR);
+var templateObject_1$5, templateObject_2$1;
+
+var PageTitle = function (_a) {
+    var onGoBack = _a.onGoBack, title = _a.title;
+    var isMobile = useIsMobile();
+    var secondaryColor = useContext(BrandContext).secondaryColor;
+    return (jsxs("div", __assign({ className: "flex items-center gap-3 font-medium", style: {
+            fontSize: "28px",
+            paddingBottom: isMobile ? "22px" : "56px",
+            color: secondaryColor,
+        } }, { children: [onGoBack && (jsx(ArrowLeftOutlined, { onClick: onGoBack, style: {
+                    fontSize: "20px",
+                    cursor: "pointer",
+                } })), title] })));
+};
+
+var calculateNewQuantity = function (priceList, currentQuantity) {
+    if (currentQuantity === void 0) { currentQuantity = 1; }
+    var priceListRecurringCharge = priceList === null || priceList === void 0 ? void 0 : priceList.charges.find(function (priceListCharge) {
+        return priceListCharge.chargeType === "RECURRING" ||
+            priceListCharge.chargeType === "USAGE";
+    });
+    var quantityMax = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMax) || Number.POSITIVE_INFINITY;
+    var quantityMin = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMin) || Number.NEGATIVE_INFINITY;
+    var selfServiceQuantity = priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.selfServiceQuantity;
+    // If self service quantity is disabled, return the min quantity
+    if (!selfServiceQuantity && quantityMin) {
+        return quantityMin;
+    }
+    // If the current quantity is greater than the max quantity, return the max quantity
+    else if (currentQuantity > quantityMax) {
+        return quantityMax;
+    }
+    // If the current quantity is less than the min quantity, return the min quantity
+    else if (currentQuantity < quantityMin) {
+        return quantityMin;
+    }
+    // If the current quantity is between the min and max quantity, return the current quantity
+    else if (currentQuantity <= quantityMax && currentQuantity >= quantityMin) {
+        return currentQuantity;
+    }
+    // If all else fails, return 1
+    else {
+        return 1;
+    }
+};
+
+var CheckoutBarInput = function (_a) {
+    var charge = _a.charge, quantity = _a.quantity, selectedPriceList = _a.selectedPriceList, setQuantity = _a.setQuantity;
+    var _b = useState(false), isTooltipOpen = _b[0], setIsTooltipOpen = _b[1];
+    // Context
+    var _c = useContext(SubscriptionsContext), setQuotePreviewData = _c.setQuotePreviewData, quotePreviewData = _c.quotePreviewData;
+    // Hooks
+    var isMobile = useIsMobile();
+    // Handlers
+    var onChangeQuantity = function (quantity) {
+        if (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) {
+            setQuotePreviewData({
+                priceList: quotePreviewData.priceList,
+                quantity: calculateNewQuantity(quotePreviewData.priceList, quantity),
+            });
+        }
+        else {
+            console.error("No price list found in quote preview data");
+        }
+    };
+    var onBlurUsers = function (e) {
+        var amount = Number(e.target.value);
+        if (!amount) {
+            onChangeQuantity(1);
+        }
+    };
+    // Quantity debounce
+    // eslint-disable-next-line
+    var quoteChangeDebounce = useCallback(lodashExports.debounce(function (newQuantity) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            onChangeQuantity(newQuantity);
+            return [2 /*return*/];
         });
+    }); }, 1000), []);
+    useEffect(function () {
+        setTimeout(function () {
+            setIsTooltipOpen(true);
+        }, 1000);
+        setTimeout(function () {
+            setIsTooltipOpen(false);
+        }, 6000);
+    }, []);
+    if (!(charge === null || charge === void 0 ? void 0 : charge.feature))
+        return null;
+    return (jsxs("div", __assign({ className: "flex items-center gap-2 ".concat(isMobile ? "justify-between" : "") }, { children: [jsx(QuantityLabel, { activeCharge: charge }), jsx(Tooltip, __assign({ onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
+                    body: {
+                        paddingTop: "0.75rem",
+                        paddingBottom: "0.75rem",
+                    },
+                } }, { children: jsx(Input, { className: isMobile ? "text-right" : "", disabled: !selectedPriceList || !charge.selfServiceQuantity, onBlur: onBlurUsers, onChange: function (e) {
+                        var quantity = Number(e.target.value);
+                        setQuantity(quantity);
+                        quoteChangeDebounce(quantity);
+                    }, min: charge === null || charge === void 0 ? void 0 : charge.quantityMin, max: charge === null || charge === void 0 ? void 0 : charge.quantityMax, style: { minWidth: "120px" }, type: "number", value: quantity, required: true }) }))] })));
+};
+var QuantityLabel = function (_a) {
+    var _b;
+    var activeCharge = _a.activeCharge;
+    var featureName = (_b = activeCharge.feature) === null || _b === void 0 ? void 0 : _b.name;
+    var pluralizedFeatureName = (StringUtils.isStringPluralized(featureName) || !featureName
+        ? featureName
+        : StringUtils.pluralizeEntityName(featureName)) || "";
+    return (jsx("span", __assign({ className: "text-slate-500 font-medium", style: { fontSize: "11px" } }, { children: pluralizedFeatureName.toUpperCase() })));
+};
+
+var periodMonthsConverter = function (period) {
+    if (period === 0)
+        return BillingPeriod.ONCE;
+    else if (period === 1)
+        return BillingPeriod.MONTHLY;
+    else if (period === 3)
+        return BillingPeriod.QUARTERLY;
+    else if (period === 6)
+        return BillingPeriod.SEMI_ANNUALLY;
+    else
+        return BillingPeriod.ANNUALLY;
+};
+var billingPeriodConverter = function (period) {
+    if (period === BillingPeriod.ONCE)
+        return 0;
+    else if (period === BillingPeriod.MONTHLY)
+        return 1;
+    else if (period === BillingPeriod.QUARTERLY)
+        return 3;
+    else if (period === BillingPeriod.SEMI_ANNUALLY)
+        return 6;
+    else
+        return 12;
+};
+
+var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
+// Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
+var createPlanDescription = function (plan) {
+    return (plan.description || "").replace(removeHTMLTagsRegex, function (x, y) {
+        return y ? " & " : "";
+    });
+};
+var getActivePlanPriceData = function (plan, selectedPriceList) {
+    if (!plan) {
+        return;
     }
-    function handlePaymentFail(error) {
-        showErrorNotification(error.response.message);
+    // If a period option is selected, return the charge that matches the selected period option
+    var activeBillingPLCharge;
+    // Default to first price list charge
+    var lowestPLCharge;
+    // Find the lowest price list charge with a billing period that matches the selected period option
+    for (var i = 0; i < plan.priceLists.length; i++) {
+        var priceList = plan.priceLists[i];
+        if (priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
+            activeBillingPLCharge = priceList.charges[0];
+            break;
+        }
+        for (var j = 0; j < priceList.charges.length; j++) {
+            var charge = priceList.charges[j];
+            if (charge.chargeType === ChargeType.USAGE)
+                continue;
+            if (activeBillingPLCharge) {
+                // If we already found a charge with the same billing period check if this charge is lower
+                if (charge.basePrice < activeBillingPLCharge.basePrice &&
+                    charge.billingPeriod === (activeBillingPLCharge === null || activeBillingPLCharge === void 0 ? void 0 : activeBillingPLCharge.billingPeriod)) {
+                    activeBillingPLCharge = charge;
+                }
+            }
+            // If a period option is selected, only return the charge if it matches the selected period option
+            else if (selectedPriceList &&
+                charge.billingPeriod ===
+                    periodMonthsConverter(selectedPriceList.periodMonths)) {
+                activeBillingPLCharge = charge;
+            }
+            // Otherwise, return the lowest price list charge
+            else if (charge.basePrice < ((lowestPLCharge === null || lowestPLCharge === void 0 ? void 0 : lowestPLCharge.basePrice) || -1)) {
+                lowestPLCharge = charge;
+            }
+        }
     }
-    var WrapperComponent = function (_a) {
-        var children = _a.children, className = _a.className, style = _a.style;
-        return isCardEnabled ? (jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsx("div", __assign({ className: className, style: style }, { children: children })));
+    return {
+        activeCharge: activeBillingPLCharge || lowestPLCharge,
+    };
+};
+var isPriceListDisabled = function (_a) {
+    var priceList = _a.priceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
+    var disableOnClick = false;
+    // Plan already has a subscription
+    var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
+        var _a, _b;
+        return subscription.plan.id === priceList.plan.id &&
+            ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== SubscriptionState$2.CANCELED &&
+            ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== SubscriptionState$2.EXPIRED;
+    });
+    var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
+    // Is this plan the one that the user is upgrading from
+    var isUpgradingPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id;
+    if ((subscriptionPlan && !isUpgradingPlan) ||
+        isPriceListCurrentSubscription) {
+        disableOnClick = true;
+    }
+    return disableOnClick;
+};
+
+var CheckoutButton = function (_a) {
+    var checkoutButtonDisabled = _a.checkoutButtonDisabled, onClickCheckout = _a.onClickCheckout, loading = _a.loading;
+    var isMobile = useIsMobile();
+    return (jsx(Button, __assign({ className: isMobile ? "w-full" : "", disabled: checkoutButtonDisabled, onClick: onClickCheckout, size: isMobile ? "large" : "middle", type: "primary", loading: loading }, { children: "Proceed to checkout" })));
+};
+
+var CheckoutPrice = function (_a) {
+    var isUsage = _a.isUsage, quote = _a.quote, selectedPriceList = _a.selectedPriceList;
+    var isMobile = useIsMobile();
+    if (!isUsage && (!selectedPriceList || (quote === null || quote === void 0 ? void 0 : quote.periodAmount) === undefined))
+        return null;
+    return (jsx("div", __assign({ className: "font-medium ".concat(isMobile ? "text-2xl" : "") }, { children: isUsage
+            ? "Usage based pricing"
+            : selectedPriceList && (quote === null || quote === void 0 ? void 0 : quote.periodAmount) !== undefined
+                ? "".concat(formatCurrency(quote.periodAmount, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.currencyId, 0), " / ").concat(PERIOD_LABELS[periodMonthsConverter(selectedPriceList.periodMonths)])
+                : "" })));
+};
+
+var CheckoutBarSummarySection = function (_a) {
+    var _b, _c;
+    var open = _a.open, quantityLocal = _a.quantityLocal, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, entityId = _a.entityId, upgradingSubscription = _a.upgradingSubscription, quotePreviewData = _a.quotePreviewData;
+    // Context
+    var apiHost = useContext(BunnyContext).apiHost;
+    // Hooks
+    var token = useToken();
+    var paymentMethodAllowedPlugins = usePaymentPlugins({
+        entityId: entityId,
+        apiHost: apiHost,
+        token: token,
+    }).paymentMethodAllowedPlugins;
+    var queryClient = useQueryClient();
+    var isMobile = useIsMobile();
+    // Derived state
+    var isFetching = queryClient.isFetching({
+        queryKey: QueryKeyFactory.default.planChangeOptionsKey({
+            subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+            token: token,
+        }),
+    });
+    var checkoutButtonDisabled = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
+        !selectedPriceList ||
+        quantityLocal !== quotePreviewData.quantity ||
+        isFetching ||
+        selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) ||
+        open);
+    var planChangeOptions = queryClient.getQueryData(QueryKeyFactory.default.planChangeOptionsKey({
+        subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+        token: token,
+    }));
+    var selectedPlan = (_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.find(function (plan) { return plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id); });
+    var activeCharge = (_c = getActivePlanPriceData(selectedPlan, selectedPriceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
+    var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === ChargeType.USAGE;
+    var hasPaymentMethodsOrIsFree = Boolean(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.length) ||
+        Boolean(quote && getQuoteAmountDue(quote) === 0);
+    return (jsxs("div", __assign({ className: "flex items-center gap-4 ".concat(isMobile ? "flex-col" : "") }, { children: [quote && (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "items-center justify-between w-full" : "flex-col") }, { children: [jsx("div", __assign({ className: "text-slate-500 font-medium text-right", style: { fontSize: "11px" } }, { children: "TOTAL" })), jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] }))), hasPaymentMethodsOrIsFree && (jsx(CheckoutButton, { checkoutButtonDisabled: checkoutButtonDisabled, onClickCheckout: onClickCheckout, loading: !quote }))] })));
+};
+
+var PlanPickerCheckoutBarWrapper = function (_a) {
+    var handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
+    // Context
+    var quotePreviewData = useContext(SubscriptionsContext).quotePreviewData;
+    var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
+    if (!selectedPriceList)
+        return null;
+    return (jsx(PlanPickerCheckoutBar, { handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
+};
+var PlanPickerCheckoutBar = function (_a) {
+    var _b;
+    var selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
+    // Context
+    var token = useToken();
+    var _c = useContext(SubscriptionsContext), entityId = _c.entityId, quotePreviewData = _c.quotePreviewData, upgradingSubscription = _c.upgradingSubscription, shadow = _c.shadow;
+    var _d = useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
+    // Local state
+    var _e = useState(0), quantityLocal = _e[0], setQuantity = _e[1];
+    var _f = useState(0), prevQuantity = _f[0], setPrevQuantity = _f[1];
+    var _g = useState(false), payModalVisible = _g[0], setPayModalVisible = _g[1];
+    // Hooks
+    var showSuccessNotification = useSuccessNotification();
+    var queryClient = useQueryClient();
+    var isMobile = useIsMobile();
+    var storedPaymentMethod = usePaymentMethod({
+        graphQLClient: graphQLClient,
+        token: token,
+    }).data;
+    // Quote ID ref
+    var quoteIdRef = useRef();
+    // Queries
+    var _h = useQuery({
+        queryKey: QueryKeyFactory.default.calculatedPricesKey({
+            quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
+            priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
+            token: token,
+        }),
+        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
+            var quote;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, quoteCompose({
+                            priceListId: (_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.id,
+                            quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
+                            quoteId: quoteIdRef.current,
+                            subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+                            token: token,
+                            apiHost: apiHost,
+                        })];
+                    case 1:
+                        quote = _b.sent();
+                        quoteIdRef.current = quote === null || quote === void 0 ? void 0 : quote.id;
+                        return [2 /*return*/, quote];
+                }
+            });
+        }); },
+        // 'enabled' is commented out for HACKY FIX
+        // enabled: Boolean(
+        //   quotePreviewData?.priceList?.id &&
+        //     selectedPriceList &&
+        //     selectedPriceList.id !== upgradingSubscription?.priceList.id
+        // ),
+        enabled: false,
+        placeholderData: keepPreviousData,
+    }), quote = _h.data, refetch = _h.refetch;
+    // TODO: eventually solve this hacky fix
+    // THIS IS NOT OKAY (we couldn't find any other solution on short notice)
+    // HACKY FIX START
+    // Essentially this useEffect is doing the work useQuery is supposed to do, but isn't doing properly.
+    useEffect(function () {
+        var _a;
+        if (((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.id) &&
+            selectedPriceList &&
+            selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id)) {
+            refetch();
+        }
+    }, [
+        (_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id,
+        quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
+        refetch,
+        selectedPriceList,
+        selectedPriceList.id,
+        upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id,
+    ]);
+    // HACKY FIX END
+    var handleCheckoutSuccess = function () {
+        queryClient.invalidateQueries({
+            queryKey: QueryKeyFactory.default.createTableKey({
+                filterString: "entityId=".concat(entityId),
+                pluralType: "subscriptions",
+                token: token,
+            }),
+        });
+        queryClient.invalidateQueries({
+            queryKey: QueryKeyFactory.default.transactionsKey({ token: token }),
+        });
+        setPayModalVisible(false);
+        showSuccessNotification("Your subscription has been created", "Checkout successful");
+        onCheckoutSuccess();
     };
-    return (jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsx(Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsx(Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsx("div", __assign({ className: "flex ".concat(isMobile
-                        ? "items-center justify-center my-12"
-                        : "w-1/2 items-center justify-center my-12") }, { children: jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
-}
+    var onCheckoutFail = function (error) {
+        handlePortalErrors(error);
+    };
+    // Set quantity from quote preview data
+    useEffect(function () {
+        if ((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) &&
+            prevQuantity !== quotePreviewData.quantity) {
+            setQuantity(quotePreviewData.quantity);
+            setPrevQuantity(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity);
+        }
+    }, [
+        prevQuantity,
+        quantityLocal,
+        quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
+        setPrevQuantity,
+        setQuantity,
+    ]);
+    // Reset query key on unmount
+    useEffect(function () {
+        return function () {
+            queryClient.invalidateQueries({
+                queryKey: QueryKeyFactory.default.calculatedPricesKey({
+                    priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
+                    quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
+                    token: token,
+                }),
+            });
+        };
+    }, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
+    return (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-4" : "flex-row", " my-2 p-4 justify-between bg-white rounded-md ").concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsx("div", __assign({ className: "".concat(isMobile ? "flex flex-col" : "flex", " gap-4") }, { children: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.map(function (charge, index) {
+                    return (jsx(CheckoutBarInput, { charge: charge, quantity: quantityLocal || 0, selectedPriceList: selectedPriceList, setQuantity: setQuantity }, index));
+                }) })), jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quantityLocal: quantityLocal, quote: quote, selectedPriceList: selectedPriceList, entityId: entityId, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsx(Checkout, { entityId: entityId, isMobile: isMobile, onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quantity: quantityLocal, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: storedPaymentMethod, token: token })] })));
+};
 
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
 var PLAN_CHANGE_OPTIONS_QUERY = "\n  query planChangeOptions($subscriptionId: ID) {\n    planChangeOptions(subscriptionId: $subscriptionId) {\n      products {\n        everythingInPlus\n        id\n        name\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      plans {\n        code\n        contactUsLabel\n        contactUsUrl\n        description\n        id\n        name\n        position\n        pricingDescription\n        pricingStyle\n        planFeatures {\n          featureId\n          value\n          feature {\n            name\n          }\n        }\n        priceLists {\n          basePrice\n          id\n          currencyId\n          periodMonths\n          plan {\n            id\n            position\n          }\n          product {\n            id\n          }\n          charges {\n            basePrice\n            billingPeriod\n            chargeType\n            id\n            name\n            priceDecimals\n            pricingModel\n            quantityMax\n            quantityMin\n            selfServiceQuantity\n            feature {\n              name\n              unitName\n            }\n          }\n        }\n        productId\n      }\n    }\n  }";
@@ -20073,40 +20682,786 @@ var getPlanChangeOptions = function (_a) {
                     return [2 /*return*/, planChangeOptions];
             }
         });
-    });
+    });
+};
+
+var portalPreviewQuery = function (id) { return "\nquery portalPreviewQuery {\n  product(id: ".concat(id, ") {\n    everythingInPlus\n    id\n    name\n    features(sort: \"position asc\") {\n      description\n      id\n      isVisible\n      kind\n      name\n      position\n    }\n  }\n  plans(filter:  \"plan.productId is ").concat(id, "\") {\n    nodes {\n\t\t\tcode\n      contactUsLabel\n      contactUsUrl\n      description\n      id\n      name\n      position\n      pricingDescription\n      pricingStyle\n      planFeatures {\n        featureId\n        value\n        feature {\n          name\n        }\n      }\n      priceLists {\n        basePrice\n        id\n        currencyId\n        periodMonths\n        plan {\n          id\n          position\n        }\n        product {\n          id\n        }\n        charges {\n          basePrice\n          billingPeriod\n          chargeType\n          id\n          name\n          priceDecimals\n          pricingModel\n          quantityMax\n          quantityMin\n          selfServiceQuantity\n          feature {\n            name\n            unitName\n          }\n        }\n      }\n    }\n  }\n}"); };
+var getPortalPreviewData = function (id, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
+    var response;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, gqlRequest({
+                    isInPreviewMode: true,
+                    query: portalPreviewQuery(id),
+                    token: token || "",
+                    apiHost: apiHost,
+                })];
+            case 1:
+                response = _a.sent();
+                if (response.product && response.plans) {
+                    response.plans = response.plans.nodes;
+                    response.products = [response.product];
+                    delete response.product;
+                    // Sort plans by position
+                    if (response.plans) {
+                        response.plans.sort(function (a, b) { return a.position - b.position; });
+                    }
+                    return [2 /*return*/, response];
+                }
+                else
+                    throw response;
+        }
+    });
+}); };
+
+var ErrorView = function (_a) {
+    var children = _a.children, message = _a.message;
+    return (jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
+};
+
+var BillingPeriodSelector = function (_a) {
+    var availableBillingPeriods = _a.availableBillingPeriods, onChangeBillingPeriod = _a.onChangeBillingPeriod, products = _a.products, selectedBillingPeriod = _a.selectedBillingPeriod, selectedProduct = _a.selectedProduct, onChangeProduct = _a.onChangeProduct;
+    var _b = useContext(BrandContext), secondaryColor = _b.secondaryColor, brandColor = _b.brandColor;
+    var isMobile = useIsMobile();
+    if (!availableBillingPeriods || (availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.length) < 2)
+        return null;
+    return (jsxs("div", __assign({ className: "flex items-center gap-8 pb-6" }, { children: [(products === null || products === void 0 ? void 0 : products.length) && products.length > 1 && (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsx("div", __assign({ className: "font-medium text-xs", style: {
+                            color: secondaryColor,
+                        } }, { children: "Select product" })), jsx(ProductRadioStyled, __assign({ brandColor: brandColor }, { children: jsx(Radio.Group, __assign({ onChange: function (e) {
+                                onChangeProduct(products === null || products === void 0 ? void 0 : products.find(function (product) { return product.id === e.target.value; }));
+                            }, value: selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id, buttonStyle: "solid" }, { children: jsx(Space, __assign({ className: "gap-2" }, { children: products === null || products === void 0 ? void 0 : products.map(function (product) { return (jsx(Radio.Button, __assign({ value: product.id }, { children: product.name }), product.id)); }) })) })) }))] }))), jsxs("div", __assign({ className: "flex flex-col w-full gap-2" }, { children: [!isMobile && (jsx("div", __assign({ className: "font-medium text-xs", style: {
+                            color: secondaryColor,
+                        } }, { children: "Subscription term" }))), jsx(StyledRadioGroup, __assign({ className: "w-full", "$isMobile": isMobile }, { children: jsx(Radio.Group, __assign({ onChange: function (e) {
+                                onChangeBillingPeriod(e.target.value);
+                            }, value: selectedBillingPeriod, size: "small", buttonStyle: "solid" }, { children: availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.map(function (periodMonth, index) {
+                                return (jsx(Radio.Button, __assign({ value: periodMonthsConverter(periodMonth) }, { children: periodMonthsConverter(periodMonth) }), index));
+                            }) })) }))] }))] })));
+};
+var ProductRadioStyled = styled.div.withConfig({
+    shouldForwardProp: function (prop) { return !["brandColor"].includes(prop); },
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n    border-color: ", " !important;\n    color: ", " !important;\n  }\n"], ["\n  .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n    border-color: ", " !important;\n    color: ", " !important;\n  }\n"])), function (props) {
+    return props.brandColor ? props.brandColor : "black";
+}, function (props) {
+    return props.brandColor ? props.brandColor : "black";
+});
+var StyledRadioGroup = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .ant-radio-group {\n    display: flex !important;\n    align-items: center !important;\n    padding: 4px !important;\n    background-color: ", " !important;\n    border-radius: 6px !important;\n    width: ", " !important;\n    border: none !important;\n  }\n  .ant-radio-button-wrapper {\n    flex-grow: 1 !important;\n    z-index: 0 !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    border-color: transparent !important;\n    border-radius: 4px !important;\n    > span {\n      font-size: 11px !important;\n    }\n  }\n  .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n    background: transparent !important;\n  }\n  .ant-radio-button-wrapper::before {\n    display: none !important;\n  }\n"], ["\n  .ant-radio-group {\n    display: flex !important;\n    align-items: center !important;\n    padding: 4px !important;\n    background-color: ", " !important;\n    border-radius: 6px !important;\n    width: ", " !important;\n    border: none !important;\n  }\n  .ant-radio-button-wrapper {\n    flex-grow: 1 !important;\n    z-index: 0 !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    border-color: transparent !important;\n    border-radius: 4px !important;\n    > span {\n      font-size: 11px !important;\n    }\n  }\n  .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n    background: transparent !important;\n  }\n  .ant-radio-button-wrapper::before {\n    display: none !important;\n  }\n"])), GRAY_200, function (_a) {
+    var $isMobile = _a.$isMobile;
+    return $isMobile ? "100%" : "min-content";
+});
+var templateObject_1$4, templateObject_2;
+
+var NextPriceListButton = function (_a) {
+    var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart;
+    return (jsxs("div", __assign({ className: "absolute flex gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
+                    setPriceListStart(function (prev) {
+                        var newValue = prev - 1;
+                        if (newValue < 0) {
+                            return prev;
+                        }
+                        return newValue;
+                    });
+                }, style: { width: "22px", height: "22px" } }, { children: jsx(FontAwesomeIcon, { icon: faChevronLeft }) }))), priceListStart < availablePriceLists.length - 3 && (jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
+                    return setPriceListStart(function (prev) {
+                        var newValue = prev + 1;
+                        if (newValue >= availablePriceLists.length) {
+                            return prev;
+                        }
+                        return newValue;
+                    });
+                }, style: { width: "22px", height: "22px" } }, { children: jsx(FontAwesomeIcon, { icon: faChevronRight }) })))] })));
+};
+
+var getAvailablePlansAndPriceLists = function (_a) {
+    var availablePriceLists = _a.availablePriceLists, planChangeOptions = _a.planChangeOptions, priceListStart = _a.priceListStart;
+    var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + 3);
+    var availablePlansArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (priceList) {
+        var _a;
+        var plan = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.find(function (plan) { return plan.id === priceList.plan.id; });
+        return plan;
+    });
+    return {
+        availablePlansArray: availablePlansArray,
+        displayPriceLists: displayPriceLists,
+    };
+};
+var everythingInPlusString = function (_a) {
+    var plan = _a.plan;
+    return "Everything in ".concat(plan.name, ", plus");
+};
+
+var PLAN_GRID_PADDING = 4;
+var PlanPickerGridCell = function (_a) {
+    var children = _a.children, noBorder = _a.noBorder;
+    var isMobile = useIsMobile();
+    return (jsxs("div", __assign({ className: "flex flex-col", style: isMobile
+            ? {}
+            : __assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(SLATE_200) })) }, { children: [jsx("div", __assign({ className: "grow" }, { children: children })), !isMobile && jsx(Divider, {})] })));
+};
+
+var PriceListCardTitle = function (_a) {
+    var plan = _a.plan, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
+    var isMobile = useIsMobile();
+    return (jsxs("div", __assign({ className: "flex flex-col items-center gap-4" }, { children: [Boolean(trialRemainingDays) && (jsx("div", __assign({ className: "font-medium text-secondary", style: { height: "1rem" } }, { children: isPriceListCurrentSubscription
+                    ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
+                    : " " }))), jsx("div", __assign({ className: "font-medium text-center ".concat(isMobile ? "text-slate-500" : "text-orange-600"), style: { fontSize: "20px" } }, { children: plan.name }))] })));
+};
+
+var Text$d = Typography.Text;
+var PriceListCardDescription = function (_a) {
+    var description = _a.description;
+    if (!description)
+        return null;
+    return jsx(Text$d, __assign({ className: "text-center" }, { children: description }));
+};
+
+var PriceListCardPrice = function (_a) {
+    var plan = _a.plan, priceList = _a.priceList;
+    return (jsx("div", __assign({ className: "font-medium text-center text-gray-900", style: { fontSize: "32px" } }, { children: !plan.pricingStyle || plan.pricingStyle === PricingStyle.PRICED
+            ? formatCurrency(priceList.basePrice, priceList.currencyId, 0)
+            : plan.pricingStyle === PricingStyle.CONTACT_US
+                ? ""
+                : "Free" })));
+};
+
+var Text$c = Typography.Text;
+var PriceListCardPriceDescription = function (_a) {
+    var feature = _a.feature, plan = _a.plan, priceList = _a.priceList;
+    var isMobile = useIsMobile();
+    var doesPlanHaveFlatFeeCharges = plan.priceLists.some(function (priceList) {
+        return priceList.charges.some(function (charge) {
+            return charge.pricingModel === PricingModel.FLAT && charge.basePrice > 0;
+        });
+    });
+    if (priceList.periodMonths <= 0 || plan.pricingStyle !== PricingStyle.PRICED)
+        return null;
+    return (jsx(Text$c, __assign({ className: "text-center text-gray-900", style: {
+            fontSize: isMobile ? "13px" : "12px",
+        } }, { children: plan.pricingDescription
+            ? plan.pricingDescription
+            : "per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
+                ? "".concat(feature.unitName.toLowerCase(), " / ")
+                : "").concat(PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)]) })));
+};
+
+var PriceListCardButton = function (_a) {
+    var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, plan = _a.plan, subscriptionPlan = _a.subscriptionPlan;
+    // Context
+    var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
+    var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === plan.id &&
+        !isPriceListCurrentSubscription;
+    var createButtonText = function () {
+        if (isPriceListCurrentSubscription)
+            return "Current";
+        if (isSelected)
+            return "Selected";
+        if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
+            return "Subscribed";
+        if (plan.pricingStyle === PricingStyle.CONTACT_US)
+            return plan.contactUsLabel;
+        return "Select";
+    };
+    return (jsx("div", __assign({ className: "flex flex-col grow w-full justify-end" }, { children: jsx(StyledCardButton, __assign({ className: "flex justify-center w-full" }, { children: jsx(Button, __assign({ className: "w-full", disabled: disableOnClick, style: {
+                    maxWidth: "240px",
+                }, type: isSelected ? "primary" : "default" }, { children: createButtonText() })) })) })));
+};
+var StyledCardButton = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  .ant-btn-primary {\n    border-color: transparent !important;\n  }\n  .ant-btn-primary:disabled {\n    background: ", ";\n    color: ", ";\n  }\n"], ["\n  .ant-btn-primary {\n    border-color: transparent !important;\n  }\n  .ant-btn-primary:disabled {\n    background: ", ";\n    color: ", ";\n  }\n"])), SLATE_200, SLATE_600);
+var templateObject_1$3;
+
+var PriceListCardDesktop = function (_a) {
+    var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, plan = _a.plan, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
+    return (jsx(PlanPickerGridCell, { children: jsxs("div", __assign({ className: "flex flex-col items-center justify-between w-full rounded-md gap-4 pt-6 px-4 pb-4 ".concat(disableOnClick ? "" : "cursor-pointer"), onClick: function () {
+                if (!disableOnClick) {
+                    if (plan.pricingStyle === PricingStyle.CONTACT_US) {
+                        window.open(plan.contactUsUrl, "_blank");
+                    }
+                    else
+                        onClick(priceList);
+                }
+            }, style: {
+                height: "100%",
+                maxWidth: "440px",
+            } }, { children: [jsxs("div", __assign({ className: "flex flex-col items-center gap-3" }, { children: [jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, plan: plan, trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] })), jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsx(PriceListCardPrice, { plan: plan, priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, plan: plan, priceList: priceList })] }))] })), jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, plan: plan, subscriptionPlan: subscriptionPlan })] })) }));
+};
+
+var CheckIcon = function (_a) {
+    var backgroundColor = _a.backgroundColor, size = _a.size;
+    return (jsx("div", __assign({ className: "flex items-center justify-center rounded-full shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
+};
+
+var PriceListCardMobile = function (_a) {
+    var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, plan = _a.plan, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
+    var brandColor = useContext(BrandContext).brandColor;
+    return (jsxs("div", __assign({ className: "relative flex flex-col border-2 border-solid rounded-lg p-4", onClick: function () {
+            if (!disableOnClick)
+                onClick(priceList);
+        }, style: {
+            minWidth: "220px",
+            borderColor: isSelected ? brandColor : SLATE_200,
+        } }, { children: [isSelected && (jsx("div", __assign({ className: "absolute", style: {
+                    top: "10px",
+                    right: "10px",
+                } }, { children: jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxs("div", __assign({ className: "flex flex-col items-center grow gap-2" }, { children: [jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, plan: plan, trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] })), jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsx(PriceListCardPrice, { plan: plan, priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, plan: plan, priceList: priceList })] })), jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, plan: plan, subscriptionPlan: subscriptionPlan })] }))] })));
+};
+
+var PriceListCard = function (_a) {
+    var _b;
+    var isSelected = _a.isSelected, onClick = _a.onClick, plan = _a.plan, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
+    // Context
+    var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
+    var isMobile = useIsMobile();
+    if (!plan) {
+        return null;
+    }
+    // Derived state
+    var description = createPlanDescription(plan);
+    // Get the active price list charge for this plan
+    var activeCharge = (_b = getActivePlanPriceData(plan, priceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
+    // Is the price list the current price list for the upgradingSubscription
+    var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
+    var disableOnClick = isPriceListDisabled({
+        priceList: priceList,
+        subscriptions: subscriptions,
+        upgradingSubscription: upgradingSubscription,
+    });
+    var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
+        var _a, _b;
+        return subscription.plan.id === plan.id &&
+            ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== SubscriptionState$2.CANCELED &&
+            ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== SubscriptionState$2.EXPIRED;
+    });
+    if (!activeCharge) {
+        return null;
+    }
+    var feature = activeCharge.feature;
+    return isMobile ? (jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, plan: plan, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, plan: plan, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
+};
+
+var PLANS_TO_DISPLAY = 3;
+
+var Text$b = Typography.Text;
+var filterUniqueFeatures = function (_a) {
+    // Remove any features that in previous plans if everythingInPlus is true
+    var availablePlansArray = _a.availablePlansArray;
+    var uniqueFeatures = new Set();
+    var updatedPlansArray = availablePlansArray.map(function (plan) {
+        var _a;
+        var updatedPlanFeatures = (_a = plan.planFeatures) === null || _a === void 0 ? void 0 : _a.filter(function (feature) {
+            if (uniqueFeatures.has(feature.featureId)) {
+                return false;
+            }
+            else {
+                uniqueFeatures.add(feature.featureId);
+                return true;
+            }
+        });
+        return __assign(__assign({}, plan), { planFeatures: updatedPlanFeatures });
+    });
+    return updatedPlansArray;
+};
+var EverythingPlanFeatures = function (_a) {
+    var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct;
+    var brandColor = useContext(BrandContext).brandColor;
+    var uniquePlanFeatures = filterUniqueFeatures({ availablePlansArray: availablePlansArray });
+    return (jsx(Fragment, { children: __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, planIndex) {
+            var plan = uniquePlanFeatures[planIndex];
+            var prevPlan = availablePlansArray[planIndex - 1];
+            if (!plan)
+                return (jsx("div", { style: prevPlan ? { borderLeft: "1px solid ".concat(SLATE_200) } : {} }, planIndex));
+            if (!plan.planFeatures)
+                return jsx("div", {}, planIndex);
+            return (jsx("div", __assign({ className: "flex flex-col gap-4 p-4", style: { borderLeft: "1px solid ".concat(SLATE_200) } }, { children: plan.planFeatures.map(function (planFeature, planFeatureIndex) {
+                    var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
+                    return (jsxs("div", __assign({ className: "contents" }, { children: [prevPlan &&
+                                everythingInPlus &&
+                                planIndex > 0 &&
+                                planFeatureIndex === 0 && (jsx(Text$b, __assign({ className: "font-medium", style: { fontSize: "13px" } }, { children: everythingInPlusString({ plan: prevPlan }) }))), jsxs("div", __assign({ className: "flex gap-1 text-gray-600", style: { fontSize: "13px" } }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsx(Text$b, { children: planFeature.feature.name })] }))] }), planFeatureIndex));
+                }) }), planIndex));
+        }) }));
+};
+
+var shouldColorRow = function (_a) {
+    var isFeatureGroup = _a.isFeatureGroup, rowIndex = _a.rowIndex;
+    return !isFeatureGroup && rowIndex % 2 === 1;
+};
+var FeatureGridCell = function (_a) {
+    var children = _a.children, isFeatureGroup = _a.isFeatureGroup, noBorder = _a.noBorder, rowIndex = _a.rowIndex;
+    return (jsx("div", __assign({ className: "px-".concat(PLAN_GRID_PADDING, " py-2"), style: __assign(__assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(SLATE_200) })), (shouldColorRow({
+            isFeatureGroup: isFeatureGroup,
+            rowIndex: rowIndex,
+        })
+            ? { backgroundColor: SLATE_100 }
+            : {})) }, { children: children })));
+};
+
+var Text$a = Typography.Text;
+var PlanFeatures = function (_a) {
+    var _b;
+    var availablePlansArray = _a.availablePlansArray, plans = _a.plans, selectedProduct = _a.selectedProduct;
+    var featureGroupCounter = useRef(0);
+    var visibleFeatureCounter = useRef(1);
+    var brandColor = useContext(BrandContext).brandColor;
+    if (!plans)
+        return null;
+    return (jsx(Fragment, { children: (_b = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.features) === null || _b === void 0 ? void 0 : _b.map(function (feature, featureIndex) {
+            if (!selectedProduct.features)
+                return null;
+            var isFeatureGroup = (feature === null || feature === void 0 ? void 0 : feature.kind) === "GROUP";
+            if (!feature.isVisible)
+                return null;
+            // Initialize the feature group counter and the visible feature counter
+            if (featureIndex === 0) {
+                featureGroupCounter.current = 0;
+                visibleFeatureCounter.current = 1;
+            }
+            var rowIndex = visibleFeatureCounter.current;
+            // Increment the feature group counter if the feature is a group
+            if (isFeatureGroup) {
+                if (rowIndex % 2 === 1)
+                    featureGroupCounter.current = featureGroupCounter.current + 1;
+            }
+            // Increment the row index by the feature group counter
+            rowIndex = rowIndex + featureGroupCounter.current;
+            // Increment the visible feature counter
+            visibleFeatureCounter.current = visibleFeatureCounter.current + 1;
+            return (jsxs("div", __assign({ className: "contents" }, { children: [jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, columnIndex) {
+                        var _a;
+                        var plan = availablePlansArray[columnIndex];
+                        var doesHavePrevPlan = availablePlansArray[columnIndex - 1];
+                        columnIndex = columnIndex + 1;
+                        // Check if the plan has the feature
+                        var planFeature = (_a = plan === null || plan === void 0 ? void 0 : plan.planFeatures) === null || _a === void 0 ? void 0 : _a.find(function (f) { return f.featureId === (feature === null || feature === void 0 ? void 0 : feature.id); });
+                        if (!plan)
+                            return (jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
+                        if (isFeatureGroup)
+                            return (jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex));
+                        return (jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsx("div", __assign({ className: "flex justify-center text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsx(Text$a, __assign({ className: "text-gray" }, { children: "-" }))) })) }), columnIndex));
+                    })] }), rowIndex));
+        }) }));
+};
+var FeatureTitle = function (_a) {
+    var _b;
+    var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
+    return (jsx(Text$a, __assign({ className: " ".concat(isFeatureGroup ? "text-slate-500 font-medium pt-4" : ""), style: __assign({}, (isFeatureGroup ? { fontSize: "11px" } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
+};
+
+var PriceListGridDesktop = function (_a) {
+    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, priceListStart = _a.priceListStart, selectedPlan = _a.selectedPlan, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
+    // Context
+    var shadow = useContext(SubscriptionsContext).shadow;
+    var _b = useMemo(function () {
+        return getAvailablePlansAndPriceLists({
+            availablePriceLists: availablePriceLists,
+            planChangeOptions: planChangeOptions,
+            priceListStart: priceListStart,
+        });
+    }, [availablePriceLists, planChangeOptions, priceListStart]), availablePlansArray = _b.availablePlansArray, displayPriceLists = _b.displayPriceLists;
+    var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
+    return (jsx("div", __assign({ className: "" }, { children: jsxs("div", __assign({ className: "relative flex flex-col h-full rounded-md overflow-hidden bg-white ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxs("div", __assign({ className: "grid w-full", style: {
+                        gridTemplateColumns: everythingInPlus
+                            ? "repeat(3, minmax(120px, 1fr))"
+                            : "minmax(auto, 400px) repeat(3, minmax(120px, 1fr))",
+                    } }, { children: [!everythingInPlus && jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, index) {
+                            var _a;
+                            var priceList = displayPriceLists[index];
+                            var doesPrevPriceListExist = displayPriceLists[index - 1];
+                            if (!priceList)
+                                return (jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index));
+                            var plan = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.find(function (plan) { return plan.id === priceList.plan.id; });
+                            return (jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.id), onClick: onChangePriceList, plan: plan, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
+                        }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsx(EverythingPlanFeatures, { availablePlansArray: availablePlansArray, selectedProduct: selectedProduct })) : (jsx(PlanFeatures, { availablePlansArray: availablePlansArray, plans: planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct: selectedProduct }))] }))] })) })));
+};
+
+var Text$9 = Typography.Text;
+var PriceListCardFeature = function (_a) {
+    var feature = _a.feature, index = _a.index;
+    var brandColor = useContext(BrandContext).brandColor;
+    if (feature.kind === "GROUP")
+        return jsx(Text$9, __assign({ className: "font-medium base-text" }, { children: feature.name }));
+    return (jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsx(Text$9, __assign({ className: "text-gray-600" }, { children: feature.name }))] }), index));
+};
+
+var Text$8 = Typography.Text;
+var PriceListGridMobile = function (_a) {
+    var _b, _c, _d;
+    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, selectedPlan = _a.selectedPlan, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
+    var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
+    var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.plan.id === (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.id); });
+    var prevPlanId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.plan.id;
+    var prevPlan = (_c = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _c === void 0 ? void 0 : _c.find(function (plan) { return plan.id === prevPlanId; });
+    return (jsxs(Fragment, { children: [jsx("div", __assign({ className: "flex gap-4 overflow-auto shadow-padding-xb", style: { flexShrink: 0 } }, { children: availablePriceLists.map(function (priceList, index) {
+                    var _a;
+                    var plan = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.find(function (plan) { return plan.id === priceList.plan.id; });
+                    return (jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.id), onClick: onChangePriceList, plan: plan, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
+                }) })), jsx(Text$8, __assign({ className: "text-slate-500 pt-5 pb-4 shadow-padding-x" }, { children: everythingInPlus && prevPlan
+                    ? everythingInPlusString({ plan: prevPlan })
+                    : "Features" })), jsx("div", __assign({ className: "flex flex-col gap-4 overflow-auto shadow-padding-x" }, { children: (_d = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.features) === null || _d === void 0 ? void 0 : _d.map(function (feature, index) { return (jsx(PriceListCardFeature, { feature: feature, index: index }, index)); }) }))] }));
+};
+
+var PriceListGrid = function (_a) {
+    var _b, _c;
+    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, upgradingSubscriptionState = _a.upgradingSubscriptionState;
+    // Hooks
+    var isMobile = useIsMobile();
+    // Derived state
+    var currentPlan = (_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.find(function (plan) { return plan.id === (upgradingSubscriptionState === null || upgradingSubscriptionState === void 0 ? void 0 : upgradingSubscriptionState.plan.id); });
+    var selectedPlan = (_c = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _c === void 0 ? void 0 : _c.find(function (plan) { return plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id); });
+    var trialRemainingDays = dayjs(currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.trialEndDate).diff(dayjs(), "days");
+    return isMobile ? (jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, selectedPlan: selectedPlan, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, priceListStart: priceListStart, selectedPlan: selectedPlan, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }));
+};
+
+var createAvailableBillingPeriods = function (plans, selectedProduct) {
+    return plans === null || plans === void 0 ? void 0 : plans.flatMap(function (plan) {
+        return plan.priceLists
+            .filter(function (priceList) { return priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id); })
+            .map(function (priceList) { return priceList.periodMonths; });
+    }).sort(function (a, b) { return a - b; }).filter(function (currentValue, index, array) { return index === array.indexOf(currentValue); });
+};
+var PriceListSelector = function (_a) {
+    var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
+    // Context
+    var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
+    // Local state
+    var _c = useState(), selectedProduct = _c[0], setSelectedProduct = _c[1];
+    var _d = useState(), selectedBillingPeriod = _d[0], setSelectedBillingPeriod = _d[1];
+    var _e = useState(0), priceListStart = _e[0], setPriceListStart = _e[1];
+    // Derived state
+    var availableBillingPeriods = useMemo(function () {
+        return createAvailableBillingPeriods(planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct);
+    }, [planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct]);
+    var availablePriceLists = useMemo(function () {
+        var _a;
+        return (((_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.flatMap(function (plan) {
+            return plan.priceLists.filter(function (priceList) {
+                return periodMonthsConverter(priceList.periodMonths) ===
+                    selectedBillingPeriod &&
+                    priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id);
+            });
+        })) || []);
+    }, [planChangeOptions, selectedBillingPeriod, selectedProduct]);
+    // Handlers
+    var onChangeBillingPeriod = useCallback(function (billingPeriod) {
+        var _a, _b;
+        setSelectedBillingPeriod(billingPeriod);
+        setPriceListStart(0);
+        if ((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) &&
+            billingPeriod !==
+                periodMonthsConverter((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.periodMonths)) {
+            var availablePriceLists_1 = ((_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.flatMap(function (plan) {
+                return plan.priceLists.filter(function (priceList) {
+                    return periodMonthsConverter(priceList.periodMonths) === billingPeriod;
+                });
+            })) || [];
+            var newSelectedPriceList = availablePriceLists_1.find(function (priceList) {
+                var _a;
+                return periodMonthsConverter(priceList.periodMonths) === billingPeriod &&
+                    priceList.plan.id === ((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.plan.id) &&
+                    !isPriceListDisabled({
+                        priceList: priceList,
+                        subscriptions: subscriptions,
+                        upgradingSubscription: upgradingSubscription,
+                    });
+            });
+            var isPriceListCurrentSubscription = newSelectedPriceList &&
+                (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
+            if (newSelectedPriceList && !isPriceListCurrentSubscription) {
+                setQuotePreviewData({
+                    priceList: newSelectedPriceList,
+                    quantity: calculateNewQuantity(newSelectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
+                });
+            }
+            else if (isPriceListCurrentSubscription) {
+                setQuotePreviewData({
+                    quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
+                });
+            }
+        }
+    }, [
+        quotePreviewData,
+        planChangeOptions,
+        subscriptions,
+        upgradingSubscription,
+        setQuotePreviewData,
+    ]);
+    var onChangeProduct = useCallback(function (product) {
+        var newAvailableBillingPeriods = createAvailableBillingPeriods(planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, product);
+        if (!(newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods.includes(billingPeriodConverter(selectedBillingPeriod)))) {
+            onChangeBillingPeriod(periodMonthsConverter((newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods[0]) !== undefined
+                ? newAvailableBillingPeriods[0]
+                : 1));
+        }
+        setSelectedProduct(product);
+    }, [planChangeOptions, selectedBillingPeriod, onChangeBillingPeriod]);
+    // Default settings
+    useEffect(function () {
+        var _a, _b, _c, _d;
+        if (arePlanChangeOptionsLoading ||
+            areSubscriptionsLoading ||
+            !planChangeOptions ||
+            selectedBillingPeriod ||
+            selectedProduct ||
+            selectedPriceList)
+            return;
+        var initialProduct = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.products) === null || _a === void 0 ? void 0 : _a[0];
+        var initialAvailableBillingPeriods = createAvailableBillingPeriods(planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, initialProduct);
+        var initialBillingPeriod;
+        if ((upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) &&
+            (initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods.includes(billingPeriodConverter(periodMonthsConverter(upgradingSubscription.priceList.periodMonths))))) {
+            initialBillingPeriod = periodMonthsConverter(upgradingSubscription.priceList.periodMonths);
+        }
+        else {
+            initialBillingPeriod = periodMonthsConverter((initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods[0]) || 1);
+        }
+        var initialAvailablePriceLists = ((_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.flatMap(function (plan) {
+            return plan.priceLists.filter(function (priceList) {
+                return periodMonthsConverter(priceList.periodMonths) ===
+                    initialBillingPeriod &&
+                    priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
+            });
+        })) || [];
+        var initialPriceList;
+        var initialQuantity = (_d = (_c = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.quantity;
+        if (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) {
+            initialPriceList = initialAvailablePriceLists.find(function (priceList) { return priceList.id === upgradingSubscription.priceList.id; });
+        }
+        if (initialBillingPeriod)
+            setSelectedBillingPeriod(initialBillingPeriod);
+        if (initialProduct)
+            setSelectedProduct(initialProduct);
+        if (initialPriceList &&
+            !isInPreviewMode &&
+            !isPriceListDisabled({
+                priceList: initialPriceList,
+                subscriptions: subscriptions,
+                upgradingSubscription: upgradingSubscription,
+            })) {
+            setQuotePreviewData({
+                priceList: initialPriceList,
+                quantity: calculateNewQuantity(initialPriceList, initialQuantity),
+            });
+        }
+    }, [
+        arePlanChangeOptionsLoading,
+        areSubscriptionsLoading,
+        isInPreviewMode,
+        planChangeOptions,
+        selectedBillingPeriod,
+        selectedPriceList,
+        selectedProduct,
+        setQuotePreviewData,
+        subscriptions,
+        upgradingSubscription,
+    ]);
+    return (jsxs(Fragment, { children: [jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsx(PriceListGrid, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription })] }));
+};
+
+var PlanPicker = function () {
+    var _a;
+    // Context
+    var token = useToken();
+    var apiHost = useContext(BunnyContext).apiHost;
+    var _b = useContext(SubscriptionsContext), entityId = _b.entityId, isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData, upgradingSubscription = _b.upgradingSubscription;
+    // Hooks
+    var queryClient = useQueryClient();
+    var showInfoNotification = useInfoNotification();
+    // Queries
+    var _c = useQuery({
+        queryKey: QueryKeyFactory.default.createTableKey({
+            filterString: "entityId=".concat(entityId),
+            pluralType: "subscriptions",
+            token: token,
+        }),
+        queryFn: function () {
+            return getSubscriptions({ entityId: entityId, isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost });
+        },
+        enabled: Boolean(entityId),
+    }), subscriptions = _c.data, areSubscriptionsLoading = _c.isLoading;
+    var _d = useQuery({
+        queryKey: QueryKeyFactory.default.planChangeOptionsKey({
+            subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+            token: token,
+        }),
+        queryFn: function () {
+            return getPlanChangeOptions({
+                isInPreviewMode: isInPreviewMode,
+                token: token,
+                upgradingSubscription: upgradingSubscription,
+                apiHost: apiHost,
+            });
+        },
+        enabled: !areSubscriptionsLoading,
+    }), data = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
+    var previewDataQuery = useQuery({
+        queryKey: QueryKeyFactory.default.createTableKey({
+            pluralType: "portalPreview",
+            filterString: productId || "",
+            token: token,
+        }),
+        queryFn: function () { return getPortalPreviewData(productId || "", apiHost, token); },
+        enabled: isInPreviewMode,
+    });
+    var planChangeOptions = useMemo(function () {
+        return isInPreviewMode ? previewDataQuery.data : data;
+    }, [isInPreviewMode, previewDataQuery.data, data]);
+    // Handlers
+    var onChangePriceList = useCallback(function (selectedPriceList) {
+        if (isInPreviewMode)
+            return showInfoNotification("You are in preview mode");
+        return setQuotePreviewData({
+            priceList: selectedPriceList,
+            quantity: calculateNewQuantity(selectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
+        });
+    }, [isInPreviewMode, setQuotePreviewData, showInfoNotification]);
+    // Reset quote preview data when the plan picker is unmounted
+    useEffect(function () {
+        return function () {
+            setQuotePreviewData({});
+        };
+    }, [setQuotePreviewData]);
+    if (queryClient.getQueryData(QueryKeyFactory.default.planChangeOptionsKey({
+        subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+        token: token,
+    })) === undefined) {
+        return jsx(Fragment, {});
+    }
+    else if (((_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+        return jsx(ErrorView, { message: "There are no plans available" });
+    }
+    return (jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
+};
+
+var Text$7 = Typography.Text;
+var PreviewModeAdvisary = function (_a) {
+    var isInPreviewMode = _a.isInPreviewMode;
+    if (!isInPreviewMode)
+        return null;
+    return (jsx("div", __assign({ className: "flex justify-center w-full rounded" }, { children: jsx(Text$7, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
+};
+
+var PlanManager = function (_a) {
+    var onChangePlanCancel = _a.onChangePlanCancel, handlePortalErrors = _a.handlePortalErrors;
+    // Context
+    var token = useToken();
+    var _b = useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
+    var _c = useContext(SubscriptionsContext), entityId = _c.entityId, isInPreviewMode = _c.isInPreviewMode, upgradingSubscription = _c.upgradingSubscription, setUpgradingSubscription = _c.setUpgradingSubscription, subscriptionUpgradeId = _c.subscriptionUpgradeId, setQuotePreviewData = _c.setQuotePreviewData, quotePreviewData = _c.quotePreviewData, className = _c.className;
+    // Local state
+    var _d = useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
+    var _e = useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
+    var _f = useState(false), isSticky = _f[0], setIsSticky = _f[1];
+    var stickyRef = useRef(null);
+    // Hooks
+    var queryClient = useQueryClient();
+    var showSuccessNotification = useSuccessNotification();
+    var showInfoNotification = useInfoNotification();
+    var isMobile = useIsMobile();
+    var storedPaymentMethod = usePaymentMethod({
+        graphQLClient: graphQLClient,
+        token: token,
+    }).data;
+    // Queries
+    var _g = useQuery({
+        queryKey: QueryKeyFactory.default.createTableKey({
+            filterString: "entityId=".concat(entityId),
+            pluralType: "subscriptions",
+            token: token,
+        }),
+        queryFn: function () {
+            return getSubscriptions({ entityId: entityId, isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost });
+        },
+        enabled: Boolean(entityId),
+    }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
+    var quote = useQuery({
+        queryKey: QueryKeyFactory.default.createObjectKey({
+            id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
+            objectName: "editingQuote",
+            token: token,
+        }),
+        queryFn: function () {
+            return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id)
+                ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost })
+                : undefined;
+        },
+        enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
+    }).data;
+    useEffect(function () {
+        if (subscriptionUpgradeId && !upgradingSubscription) {
+            var subscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
+                return subscription.id === subscriptionUpgradeId;
+            });
+            setUpgradingSubscription(subscription);
+        }
+    }, [
+        setUpgradingSubscription,
+        subscriptionUpgradeId,
+        subscriptions,
+        upgradingSubscription,
+    ]);
+    useEffect(function () {
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            setIsSticky(!entry.isIntersecting);
+        }, {
+            root: null,
+            // 300px margin from top so that we don't transition to sticky when scrolling up to PlanPickerCheckoutBar from bottom of page
+            // 20px margin from bottom so PlanPickerCheckoutBar resizes at the right time
+            rootMargin: "300px 0px -20px 0px",
+            threshold: 1.0,
+        });
+        var el = stickyRef.current;
+        if (el)
+            observer.observe(el);
+        return function () {
+            if (el)
+                observer.unobserve(el);
+        };
+    }, []);
+    // Handlers
+    var onSuccess = function () {
+        setEditingQuoteData(undefined);
+        queryClient.invalidateQueries({
+            queryKey: QueryKeyFactory.default.transactionsKey({ token: token }),
+        });
+        queryClient.invalidateQueries({
+            queryKey: QueryKeyFactory.default.createTableKey({
+                filterString: "entityId=".concat(entityId),
+                pluralType: "subscriptions",
+                token: token,
+            }),
+        });
+        showSuccessNotification("Your plan has been updated", "Payment successful");
+        setPayModalVisible(false);
+    };
+    var onCancel = function () {
+        setPayModalVisible(false);
+    };
+    var onFail = function (error) {
+        handlePortalErrors(error);
+    };
+    if (subscriptionsAreLoading && !isInPreviewMode)
+        return jsx(Fragment, {});
+    return (jsxs("div", __assign({ className: "".concat(className, " px-8") }, { children: [jsx(PreviewModeAdvisary, { isInPreviewMode: isInPreviewMode }), jsx(PageTitle, { onGoBack: function () {
+                    if (isInPreviewMode)
+                        return showInfoNotification("You are in preview mode");
+                    setQuotePreviewData(undefined);
+                    onChangePlanCancel();
+                }, title: "Change plan" }), jsx(PlanPicker, {}), jsx(Checkout, { entityId: entityId, onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: storedPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity }), jsx("div", { ref: stickyRef }), jsx("div", __assign({ className: "sticky bottom-4 transition-[margin] duration-300 ".concat(isSticky ? "mx-4" : "mx-0") }, { children: jsx(PlanPickerCheckoutBarWrapper, { handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) })), jsx(Footer, {})] })));
 };
 
-var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList { id periodMonths }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
-var getSubscriptions = function (_a) {
-    var apiHost = _a.apiHost, entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response, combinedSubscriptions;
-        var _b, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
-                case 0: return [4 /*yield*/, gqlRequest({
-                        isInPreviewMode: isInPreviewMode,
-                        query: SUBSCRIPTIONS_QUERY,
-                        token: token,
-                        vars: { entityId: entityId },
-                        apiHost: apiHost,
-                    })];
+var useCancelSubscription = function () {
+    var graphQLRequest = useGraphQLRequest();
+    return function (subscriptionIds, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+        var data;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation SubscriptionCancel($subscriptionIds: [ID!]!) {\n      subscriptionCancel(ids: $subscriptionIds) {\n        subscriptions {\n          accountId\n          state\n        }\n      }\n    }", token, apiHost, { subscriptionIds: subscriptionIds })];
                 case 1:
-                    response = _d.sent();
-                    combinedSubscriptions = (_c = (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (subscription) { return (__assign(__assign({}, subscription), { charges: sortSubscriptionCharges(subscription.charges) })); });
-                    return [2 /*return*/, combinedSubscriptions];
+                    data = _b.sent();
+                    return [2 /*return*/, (_a = data === null || data === void 0 ? void 0 : data.subscriptions) === null || _a === void 0 ? void 0 : _a.nodes];
             }
         });
-    });
-};
-
-var ErrorView = function (_a) {
-    var children = _a.children, message = _a.message;
-    return (jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
+    }); };
 };
 
-var SubscriptionsContext = createContext({});
-
 var SubscriptionState;
 (function (SubscriptionState) {
     SubscriptionState["ACTIVE"] = "ACTIVE";
@@ -20146,7 +21501,7 @@ var getFeatureUsage = function (_a) {
     });
 };
 
-var StyledModal = defaultStyled(Modal)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  z-index: 2000;\n\n  .ant-modal-content {\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-body {\n    height: min-content;\n    max-height: ", ";\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n  .ant-modal-footer {\n    padding: 0 1.5rem 1.5rem;\n  }\n"], ["\n  z-index: 2000;\n\n  .ant-modal-content {\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-body {\n    height: min-content;\n    max-height: ", ";\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n  .ant-modal-footer {\n    padding: 0 1.5rem 1.5rem;\n  }\n"])), MODAL_MAX_HEIGHT);
+var StyledModal = defaultStyled(Modal)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  z-index: 2000;\n\n  .ant-modal-content {\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-body {\n    height: min-content;\n    max-height: ", ";\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n  .ant-modal-footer {\n    padding: 0 1.5rem 1.5rem;\n  }\n"], ["\n  z-index: 2000;\n\n  .ant-modal-content {\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-body {\n    height: min-content;\n    max-height: ", ";\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n  .ant-modal-footer {\n    padding: 0 1.5rem 1.5rem;\n  }\n"])), MODAL_MAX_HEIGHT);
 var HeaderModalWrapper = function (props) {
     var children = props.children, description = props.description, title = props.title;
     var modalProps = useMemo(function () {
@@ -20158,7 +21513,7 @@ var HeaderModalWrapper = function (props) {
                             width: "75%",
                         } }, { children: description })))] }))), children] })));
 };
-var templateObject_1$1;
+var templateObject_1$2;
 
 var isPlural = pkg.isPlural;
 var getDateFormat = function (dataInterval) {
@@ -20230,15 +21585,52 @@ var FeatureBarChart = function (_a) {
                     tickLine: false,
                 }), { height: displayXAxis ? undefined : 1, interval: "equidistantPreserveStart", style: {
                     fill: SLATE_500,
-                } })), jsx(Tooltip, __assign({ cursor: { fill: SLATE_200 } }, (displayXAxis
+                } })), jsx(Tooltip$1, __assign({ cursor: { fill: SLATE_200 } }, (displayXAxis
                 ? {}
                 : {
                     position: { y: -62 },
                 }))), jsx(Bar, { dataKey: featureName, fill: brandColor, activeBar: jsx(Rectangle, { fill: brandColor }) })] })));
 };
-var StyledBarChart = defaultStyled(BarChart)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .recharts-surface {\n    overflow: visible;\n  }\n"], ["\n  .recharts-surface {\n    overflow: visible;\n  }\n"])));
-var templateObject_1;
+var StyledBarChart = defaultStyled(BarChart)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  .recharts-surface {\n    overflow: visible;\n  }\n"], ["\n  .recharts-surface {\n    overflow: visible;\n  }\n"])));
+var templateObject_1$1;
 
+var canShowQuantitiesInput = function (charge, subscription) {
+    // Check if the subscription is active, pending, or in trial,
+    // the pricing model is not flat,
+    // and if it's not a trial, also check if the current charge is the last one in the subscription.
+    var _a, _b, _c;
+    var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE;
+    var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
+    var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL;
+    var isFlatPricing = charge.pricingModel === "FLAT";
+    var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
+        !isFlatPricing &&
+        charge.selfServiceQuantity &&
+        !charge.expired;
+    // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
+    return shouldProcessCharge;
+};
+var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
+    var quoteChange = quote.quoteChanges.find(function (quoteChange) {
+        return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id);
+    });
+    var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
+    var charges = [
+        {
+            id: quoteChangeCharge.id,
+            quantity: editedSubscription.quantity - subscriptionQuantity,
+        },
+    ];
+    return { charges: charges, quoteChange: quoteChange };
+};
+var canShowChangeQuantities = function (_a) {
+    var subscriptions = _a.subscriptions;
+    return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
+        return subscription.charges.some(function (charge, chargeIndex) {
+            return canShowQuantitiesInput(charge, subscription);
+        });
+    });
+};
 var isSubscriptionNotActive = function (subscription) {
     var _a, _b;
     return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
@@ -20261,7 +21653,7 @@ var SubscriptionCardActions = function (_a) {
         canShowSubscriptionActions(subscription) ? (jsxs(Fragment, { children: [canShowCancelButton && (jsx(Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsx(Button, __assign({ className: "p-0", type: "link" }, { children: "Cancel subscription" })) }))), canShowChangePlanButton && (jsx(Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL ? (jsx(Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Upgrade" }))) : null;
 };
 
-var Text$2 = Typography.Text;
+var Text$6 = Typography.Text;
 var getSubscriptionStatusText = function (subscription) {
     var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
     if (cancellationDate &&
@@ -20290,7 +21682,7 @@ var SubscriptionCardHeader = function (_a) {
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
     return (jsxs("div", __assign({ className: "flex items-center justify-between", style: {
             backgroundColor: darkMode ? "var(--row-background-dark)" : "",
-        } }, { children: [jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsx("div", __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsx(Text$2, __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxs(Tag, __assign({ className: "ant-tag-".concat(TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()]) }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsx(Text$2, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile &&
+        } }, { children: [jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsx(Text$6, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsx(Text$6, __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxs(Tag, __assign({ className: "ant-tag-".concat(TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()]) }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsx(Text$6, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile &&
                         planChangeOptions &&
                         onChangePlanClick &&
                         onCancelSubscriptionClick && (jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscription: subscription }))] }))] })));
@@ -20318,6 +21710,7 @@ var SubscriptionChargeTotal = function (_a) {
                 : "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
 };
 
+var Text$5 = Typography.Text;
 var SubscriptionChargeUnitPrice = function (_a) {
     var charge = _a.charge, subscription = _a.subscription;
     var darkMode = useContext(BunnyContext).darkMode;
@@ -20340,22 +21733,23 @@ var SubscriptionChargeUnitPrice = function (_a) {
                         }) })) })));
             }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsx("div", __assign({ className: "cursor-pointer underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "Hide tiers" : "Show tiers" })) })));
     else if (charge.chargeType === ChargeType.USAGE || charge.trial)
-        return jsx(Fragment, { children: "-" });
+        return jsx(Text$5, { children: "-" });
     else if (isDiscount)
         return (jsxs(Fragment, { children: ["-", formatCurrency(charge.discountedPrice, subscription.currencyId)] }));
     else
         return (jsx(Fragment, { children: formatCurrency(charge.discountedPrice, subscription.currencyId) }));
 };
 
+var Text$4 = Typography.Text;
 var SubscriptionCardColumnHeaders = function (_a) {
     var columns = _a.columns;
-    return (jsx(Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsx("div", __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
+    return (jsx(Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsx(Text$4, __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
 };
 
-var Text$1 = Typography.Text;
+var Text$3 = Typography.Text;
 var SubscriptionsListCell = function (_a) {
     var children = _a.children, className = _a.className, gridColumn = _a.gridColumn, right = _a.right, style = _a.style;
-    return (jsx(Text$1, __assign({ className: "flex items-center text-sm whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
+    return (jsx(Text$3, __assign({ className: "flex items-center text-sm whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
 };
 
 var CARD_COLUMNS = [
@@ -20429,10 +21823,11 @@ var SubscriptionCardDesktopRow = function (_a) {
     }).data;
     var isRampFirstRow = isRamp && chargeIndex === 0;
     var isTrial = charge.trial;
+    var isDiscount = charge.kind === SubscriptionChargeKind.DISCOUNT;
     var dontShowChargeName = (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId) === charge.priceListChargeId &&
+        !isDiscount &&
         (!isTrial || prevCharge.trial) &&
         (isTrial || !prevCharge.trial);
-    var isDiscount = charge.kind === SubscriptionChargeKind.DISCOUNT;
     return (jsxs("div", __assign({ className: "contents" }, { children: [(isRampFirstRow || !isRamp) && (jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? "1/-1" : "1" }, { children: jsx("div", __assign({ className: "flex items-center gap-2 ".concat(isDiscount ? "pl-4" : "") }, { children: jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : "" }) })) }))), jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsx("div", { children: chargePeriod }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === SubscriptionChargeKind.DISCOUNT
                     ? ""
                     : charge.chargeType === ChargeType.USAGE
@@ -20442,10 +21837,10 @@ var SubscriptionCardDesktopRow = function (_a) {
                             : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
 };
 
-var Text = Typography.Text;
+var Text$2 = Typography.Text;
 var SubscriptionCardCellMobile = function (_a) {
     var children = _a.children, className = _a.className, style = _a.style;
-    return (jsx(Text, __assign({ className: className, style: style }, { children: children })));
+    return (jsx(Text$2, __assign({ className: className, style: style }, { children: children })));
 };
 
 var CHARGE_COLUMNS = [
@@ -20506,21 +21901,367 @@ var SubscriptionsList = function (_a) {
         }) }));
 };
 
-var Subscriptions = function (_a) {
-    var className = _a.className, companyName = _a.companyName, entityId = _a.entityId, _b = _a.hideExpired, hideExpired = _b === void 0 ? false : _b, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, onChangePlanClick = _a.onChangePlanClick, onSubscriptionsLoaded = _a.onSubscriptionsLoaded, _c = _a.styles, styles = _c === void 0 ? {
+// Extra props to pass in
+// - previewMode: boolean
+// - productId: string
+var SubscriptionsListContainer = function (_a) {
+    var companyName = _a.companyName, _b = _a.hideExpired, hideExpired = _b === void 0 ? false : _b, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, onChangePlanClick = _a.onChangePlanClick, noSubscriptionsComponent = _a.noSubscriptionsComponent, subscriptions = _a.subscriptions, subscriptionsAreLoading = _a.subscriptionsAreLoading;
+    // Context
+    var apiHost = useContext(BunnyContext).apiHost;
+    var gap = useContext(SubscriptionsContext).gap;
+    var token = useToken();
+    // Queries
+    var _c = useQuery({
+        queryKey: QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
+        queryFn: function () { return getPlanChangeOptions({ token: token, apiHost: apiHost }); },
+        enabled: Boolean(onChangePlanClick),
+    }), planChangeOptions = _c.data, arePlanChangeOptionsLoading = _c.isLoading;
+    if (subscriptionsAreLoading ||
+        (Boolean(onChangePlanClick) ? arePlanChangeOptionsLoading : false))
+        return jsx(Fragment, {});
+    return (jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink overflow-auto") }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscriptions: subscriptions })) : (noSubscriptionsComponent || (jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) })));
+};
+
+var QuantityInput = function (_a) {
+    var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, subscriptions = _a.subscriptions;
+    // Context
+    var token = useToken();
+    var apiHost = useContext(BunnyContext).apiHost;
+    var _b = useContext(SubscriptionsContext), updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId;
+    // Local state
+    var _c = useState(), editedSubscription = _c[0], setEditedSubscription = _c[1];
+    // Hooks
+    var queryClient = useQueryClient();
+    var createSubscriptionQuote = useCreateSubscriptionQuote();
+    var quoteChangeUpdate = useQuoteChangeUpdate();
+    var isMobile = useIsMobile();
+    var showErrorNotification = useErrorNotification();
+    var quantityDisabled = 
+    // If we are editing a quote, we disable the quantity input
+    // If we don't have a editedSubscription, we disable the quantity input
+    (updatingChargeQuantityId && updatingChargeQuantityId !== charge.id) ||
+        // If the subscription is not self-service, we disable the quantity input
+        !charge.selfServiceQuantity;
+    var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined
+        ? ""
+        : editedSubscription.quantity;
+    // Mutations
+    var createQuote = useMutation({
+        mutationFn: function (subscriptionIds) {
+            return createSubscriptionQuote(subscriptionIds, token, apiHost);
+        },
+        onSuccess: function (subscriptionUpdateData) {
+            var _a;
+            var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
+            var _b = createQuoteParams(quote, charge.quantity, editedSubscription), charges = _b.charges, quoteChange = _b.quoteChange;
+            if (quoteChange && charges[0].quantity > 0) {
+                updateQuote.mutate({
+                    charges: charges,
+                    quoteChangeId: quoteChange.id,
+                });
+            }
+        },
+    });
+    var updateQuote = useMutation({
+        mutationFn: function (_a) {
+            var charges = _a.charges, quoteChangeId = _a.quoteChangeId;
+            return quoteChangeUpdate(charges, quoteChangeId, token, apiHost);
+        },
+        onSuccess: function (response) {
+            var _a, _b, _c, _d, _e, _f;
+            if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
+                var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
+                    SubscriptionState$2.TRIAL;
+                setEditingQuoteData({
+                    id: (_d = (_c = response.quoteChangeUpdate) === null || _c === void 0 ? void 0 : _c.quoteChange) === null || _d === void 0 ? void 0 : _d.quoteId,
+                    isTrial: isTrial,
+                });
+            }
+            queryClient.invalidateQueries({
+                queryKey: QueryKeyFactory.default.createObjectKey({
+                    id: (_f = (_e = response.quoteChangeUpdate) === null || _e === void 0 ? void 0 : _e.quoteChange) === null || _f === void 0 ? void 0 : _f.quoteId,
+                    objectName: "editingQuote",
+                    token: token,
+                }),
+            });
+        },
+    });
+    // Handlers
+    var isQuantityLowerThanOriginal = function (quantity) {
+        return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined &&
+            editedSubscription.quantity <= quantity;
+    };
+    var onChangeQuantity = function (chargeIndex, value, priceListChargeId, subscription, subscriptionIndex) {
+        var quantity = isNaN(parseInt(value)) ? 0 : parseInt(value);
+        setEditedSubscription({
+            chargeIndex: chargeIndex,
+            subscriptionIndex: subscriptionIndex,
+            chargeId: priceListChargeId,
+            quantity: quantity,
+            subscription: subscription,
+        });
+        if (quantity !== charge.quantity) {
+            setUpdatingChargeQuantityId(charge.id);
+        }
+        else {
+            setUpdatingChargeQuantityId(undefined);
+        }
+    };
+    var handleSubscriptionUpdate = function (editedSubscription) {
+        if (!editedSubscription)
+            return;
+        // If we are not editing a quote, we create a new one
+        if (!editingQuote) {
+            var subscriptionIds = [];
+            var charge_1 = subscriptions[editedSubscription.subscriptionIndex].charges[editedSubscription.chargeIndex];
+            if (isQuantityLowerThanOriginal(charge_1.quantity)) {
+                // If the quantity is lower than the original, we remove the quote
+                setEditingQuoteData(undefined);
+                setUpdatingChargeQuantityId(undefined);
+                return;
+            }
+            subscriptionIds.push(editedSubscription.subscription.id);
+            createQuote.mutate(subscriptionIds);
+        }
+        else {
+            // If we are editing a quote, we update the quote change
+            var _a = createQuoteParams(editingQuote, charge.quantity, editedSubscription), charges = _a.charges, quoteChange = _a.quoteChange;
+            if (quoteChange && charges[0].quantity > 0) {
+                updateQuote.mutate({
+                    charges: charges,
+                    quoteChangeId: quoteChange.id,
+                });
+            }
+            else {
+                // Reset the editing quote data and the updating charge quantity ID to their initial states
+                setEditingQuoteData(undefined);
+                setUpdatingChargeQuantityId(undefined);
+            }
+        }
+    };
+    // Initial subscription quantity if is on mobile
+    useEffect(function () {
+        if (isMobile && !editedSubscription && !quantityDisabled) {
+            setEditedSubscription({
+                chargeIndex: chargeIndex,
+                subscriptionIndex: subscriptionIndex,
+                chargeId: charge.priceListChargeId,
+                quantity: charge.quantity,
+                subscription: subscription,
+            });
+        }
+    }, [
+        charge,
+        chargeIndex,
+        editedSubscription,
+        isMobile,
+        quantityDisabled,
+        subscription,
+        subscriptionIndex,
+    ]);
+    // Edit subscription debounce
+    useEffect(function () {
+        var debounce = setTimeout(function () {
+            handleSubscriptionUpdate(editedSubscription);
+        }, 1000);
+        return function () { return clearTimeout(debounce); };
+        // eslint-disable-next-line
+    }, [editedSubscription]);
+    return (jsx(Fragment, { children: jsx(Input, { className: "text-right", disabled: quantityDisabled, onBlur: function () {
+                if (typeof value === "number" && value < charge.quantity) {
+                    showErrorNotification("New value is less than the original quantity. This is not allowed");
+                }
+            }, onChange: function (e) {
+                onChangeQuantity(chargeIndex, e.target.value, charge.priceListChargeId, subscription, subscriptionIndex);
+            }, status: isQuantityLowerThanOriginal(charge.quantity) ? "error" : "", style: { width: "96px" }, value: value }) }));
+};
+
+var Text$1 = Typography.Text;
+var QuantityChangeGridRow = function (_a) {
+    var _b;
+    var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge;
+    if (!canShowQuantitiesInput(subscriptionCharge, subscription))
+        return null;
+    return (jsxs(Fragment, { children: [jsx(Text$1, __assign({ className: "font-medium text-orange-600 col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsx(Text$1, __assign({ className: "font-medium text-base text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsx(Text$1, __assign({ className: "flex items-center justify-end font-medium text-base text-gray-900" }, { children: subscriptionCharge.quantity })), jsxs("div", __assign({ className: "flex flex-col items-end" }, { children: [jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions }), jsx("div", {})] })), jsx(Divider, { className: "col-span-full my-2" })] }));
+};
+
+var QuantityChangeGridTitle = function (_a) {
+    var children = _a.children, right = _a.right;
+    return (jsx("div", __assign({ className: "font-medium text-slate-600 ".concat(right ? "text-right" : "text-left"), style: { fontSize: "11px" } }, { children: children })));
+};
+
+var QuoteChangeSummarySection = function (_a) {
+    var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData;
+    var apiHost = useContext(BunnyContext).apiHost;
+    var isMobile = useIsMobile();
+    var token = useToken();
+    // const apiHost = getApiHost();
+    var showSuccessNotification = useSuccessNotification();
+    var trialUpgradeMutation = useMutation({
+        mutationFn: function (quoteId) { return checkout({ quoteId: quoteId, token: token, apiHost: apiHost }); },
+        onSuccess: function () {
+            setEditingQuoteData(undefined);
+            showSuccessNotification("Subscription updated successfully");
+        },
+    });
+    return (jsxs("div", __assign({ className: "flex flex-col items-end" }, { children: [editingQuote && (jsxs("div", __assign({ className: "flex flex-col mb-8" }, { children: [jsx("div", __assign({ className: "text-slate-500 text-right text-xs mb-2" }, { children: "TOTAL" })), jsx("div", __assign({ className: "text-right ".concat(isMobile ? "text-2xl" : "text-xl") }, { children: formatCurrency(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || "") }))] }))), jsx("div", __assign({ className: "flex items-center justify-end ".concat(isMobile ? "w-full" : "") }, { children: jsx(Button, __assign({ className: "w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
+                        ? function () { return trialUpgradeMutation.mutate(editingQuoteData.id); }
+                        : openCheckout, disabled: !editingQuoteData, size: isMobile ? "large" : "middle", type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? "Activate Trial" : "Proceed to checkout" })) }))] })));
+};
+
+var QUANTITY_CHANGE_HEADER_TITLE = "Update unit quantity";
+var QUANTITY_CHANGE_HEADER_DESCRIPTION = "Adjust quantities below. The change will take effect immediately after checkout has been completed.";
+var QuantityChangeDrawerDesktop = function (_a) {
+    var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions;
+    var _b = useState(open), openLocal = _b[0], setOpenLocal = _b[1];
+    var isMobile = useIsMobile();
+    useEffect(function () {
+        var timeoutId;
+        if (!open) {
+            timeoutId = setTimeout(function () {
+                setOpenLocal(false);
+            }, 300); // Delay to allow for close animation
+        }
+        else {
+            setOpenLocal(true);
+        }
+        return function () { return clearTimeout(timeoutId); };
+    }, [open]);
+    if (!openLocal)
+        return null;
+    return (jsxs(Drawer, __assign({ closeIcon: null, destroyOnClose: true, onClose: onClose, open: open, styles: isMobile
+            ? {
+                body: {
+                    padding: "1rem",
+                    overflow: "hidden",
+                    background: SLATE_50,
+                },
+                wrapper: {
+                    width: "100vw",
+                },
+            }
+            : {
+                wrapper: {
+                    minWidth: "600px",
+                },
+            }, title: jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }) }, { children: [jsxs("div", __assign({ className: "grid pb-4", style: {
+                    gridTemplateColumns: "2fr 1fr 1fr",
+                    rowGap: "0.75rem",
+                    columnGap: "1rem",
+                } }, { children: [jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsx(Divider, { className: "col-span-full py-2" }), subscriptions.map(function (subscription, index) {
+                        var _a;
+                        var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL;
+                        return (jsx("div", __assign({ className: "contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
+                                if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
+                                    return null;
+                                return (jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions }, chargeIndex));
+                            }) }), index));
+                    })] })), jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData })] })));
+};
+
+var HideExpiredToggle = function (_a) {
+    var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired; _a.visible;
+    var isMobile = useIsMobile();
+    var secondaryColor = useContext(BrandContext).secondaryColor;
+    return (jsxs("div", __assign({ className: "flex items-center gap-4 pl-4" }, { children: [!isMobile && jsx(Divider, { className: "h-5", type: "vertical" }), jsx(StyledCheckbox, { children: jsx(Checkbox, __assign({ checked: hideExpired, onChange: function (e) { return setHideExpired(e.target.checked); }, style: {
+                        color: secondaryColor,
+                    } }, { children: isMobile ? "Hide inactive" : "Hide inactive subscriptions" })) })] })));
+};
+var StyledCheckbox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .ant-checkbox-wrapper span {\n    padding-inline-end: 0 !important;\n  }\n"], ["\n  .ant-checkbox-wrapper span {\n    padding-inline-end: 0 !important;\n  }\n"])));
+var templateObject_1;
+
+var ChangeQuantitiesButton = function (_a) {
+    var canShowChangeQuantitiesButton = _a.canShowChangeQuantitiesButton, setQuantityDrawerOpen = _a.setQuantityDrawerOpen;
+    if (!canShowChangeQuantitiesButton)
+        return null;
+    return (jsx(Button, __assign({ onClick: function () {
+            setQuantityDrawerOpen(true);
+        }, type: "default" }, { children: "Change quantities" })));
+};
+
+var SubscriptionsNavigation = function (_a) {
+    var expiredSwitchVisible = _a.expiredSwitchVisible, hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, setQuantityDrawerOpen = _a.setQuantityDrawerOpen, subscriptions = _a.subscriptions;
+    // Hooks
+    var isMobile = useIsMobile();
+    // Derived state
+    var canShowChangeQuantitiesButton = canShowChangeQuantities({
+        subscriptions: subscriptions,
+    });
+    return (jsxs(Fragment, { children: [!isMobile && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, visible: expiredSwitchVisible })), jsx("div", __assign({ className: "flex grow gap-2 ".concat(isMobile ? "flex-col" : "justify-end") }, { children: canShowChangeQuantitiesButton && (jsx(ChangeQuantitiesButton, { canShowChangeQuantitiesButton: canShowChangeQuantitiesButton, setQuantityDrawerOpen: setQuantityDrawerOpen })) }))] }));
+};
+
+var Text = Typography.Text;
+var SubscriptionsWrapper = function (_a) {
+    var handlePortalErrors = _a.handlePortalErrors, entityId = _a.entityId, companyName = _a.companyName, _b = _a.isInPreviewMode, isInPreviewMode = _b === void 0 ? false : _b, productId = _a.productId, className = _a.className, _c = _a.styles, userStyles = _c === void 0 ? {} : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d;
+    var defaultStyles = {
         gap: 4,
         shadow: "sm",
         subscriptionProductNameStyle: {
             fontSize: "11px",
             fontWeight: 500,
         },
-    } : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent;
-    var gap = styles.gap, shadow = styles.shadow;
+    };
+    var styles = __assign(__assign({}, defaultStyles), userStyles);
+    var _e = useState(undefined), upgradingSubscription = _e[0], setUpgradingSubscription = _e[1];
+    var _f = useState(undefined), updatingChargeQuantityId = _f[0], setUpdatingChargeQuantityId = _f[1];
+    var _g = useState(undefined), quotePreviewData = _g[0], setQuotePreviewData = _g[1];
+    var _h = useState(null), subscriptionUpgradeId = _h[0], setSubscriptionUpgradeId = _h[1];
+    return (jsx(SubscriptionsContext.Provider, __assign({ value: {
+            gap: styles.gap,
+            shadow: styles.shadow,
+            className: className,
+            subscriptionProductNameStyle: styles.subscriptionProductNameStyle,
+            productId: productId,
+            entityId: entityId,
+            isInPreviewMode: isInPreviewMode,
+            upgradingSubscription: upgradingSubscription,
+            setUpgradingSubscription: setUpgradingSubscription,
+            updatingChargeQuantityId: updatingChargeQuantityId,
+            setUpdatingChargeQuantityId: setUpdatingChargeQuantityId,
+            quotePreviewData: quotePreviewData,
+            setQuotePreviewData: setQuotePreviewData,
+            subscriptionUpgradeId: subscriptionUpgradeId,
+            setSubscriptionUpgradeId: setSubscriptionUpgradeId,
+        } }, { children: jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle }) })));
+};
+var Subscriptions = function (_a) {
+    var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, noSubscriptionsComponent = _a.noSubscriptionsComponent, hideTitle = _a.hideTitle;
     // Context
-    var apiHost = useContext(BunnyContext).apiHost;
     var token = useToken();
+    var _b = useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
+    var _c = useContext(SubscriptionsContext), entityId = _c.entityId, setUpgradingSubscription = _c.setUpgradingSubscription, updatingChargeQuantityId = _c.updatingChargeQuantityId, setUpdatingChargeQuantityId = _c.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _c.setSubscriptionUpgradeId, className = _c.className, isInPreviewMode = _c.isInPreviewMode;
+    // Local state
+    var _d = useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
+    var _e = useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
+    var _f = useState(true), hideExpired = _f[0], setHideExpired = _f[1];
+    var _g = useState(false), quantityDrawerOpen = _g[0], setQuantityDrawerOpen = _g[1];
+    var _h = useState(false), expiredSwitchVisible = _h[0], setExpiredSwitchVisible = _h[1];
+    var _j = useState(false), isChangingPlan = _j[0], setIsChangingPlan = _j[1];
+    // Hooks
+    var queryClient = useQueryClient();
+    var showSuccessNotification = useSuccessNotification();
+    var quoteDelete = useQuoteDelete();
+    var isMobile = useIsMobile();
+    var storedPaymentMethod = usePaymentMethod({
+        graphQLClient: graphQLClient,
+        token: token,
+    }).data;
+    var cancelSubscription = useCancelSubscription();
     // Queries
-    var _d = useQuery({
+    var quote = useQuery({
+        queryKey: QueryKeyFactory.default.createObjectKey({
+            id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
+            objectName: "editingQuote",
+            token: token,
+        }),
+        queryFn: function () {
+            return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id)
+                ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost })
+                : undefined;
+        },
+        enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
+    }).data;
+    var _k = useQuery({
         queryKey: QueryKeyFactory.default.createTableKey({
             filterString: "entityId=".concat(entityId),
             pluralType: "subscriptions",
@@ -20528,23 +22269,110 @@ var Subscriptions = function (_a) {
         }),
         queryFn: function () { return getSubscriptions({ entityId: entityId, token: token, apiHost: apiHost }); },
         enabled: Boolean(entityId),
-    }), subscriptions = _d.data, subscriptionsAreLoading = _d.isLoading;
-    var _e = useQuery({
-        queryKey: QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
-        queryFn: function () { return getPlanChangeOptions({ token: token, apiHost: apiHost }); },
-        enabled: Boolean(onChangePlanClick),
-    }), planChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
+    }), subscriptions = _k.data, subscriptionsAreLoading = _k.isLoading;
+    // Mutations
+    var subscriptionCancel = useMutation({
+        mutationFn: function (subscription) {
+            return cancelSubscription([subscription.id], token, apiHost);
+        },
+        onSuccess: function () {
+            queryClient.invalidateQueries({
+                queryKey: QueryKeyFactory.default.createTableKey({
+                    filterString: "entityId=".concat(entityId),
+                    pluralType: "subscriptions",
+                    token: token,
+                }),
+            });
+            showSuccessNotification("Subscription canceled");
+        },
+    });
+    // Handlers
+    var onChangePlanClick = function (subscription) {
+        if (subscription) {
+            setSubscriptionUpgradeId(subscription.id);
+            setUpgradingSubscription(subscription);
+        }
+        else {
+            setSubscriptionUpgradeId(null);
+            setUpgradingSubscription(undefined);
+        }
+        console.log("setIsChangingPlan true");
+        setIsChangingPlan(true);
+    };
+    var onCancelSubscriptionClick = function (subscription) {
+        subscriptionCancel.mutate(subscription);
+    };
+    var onSuccess = function () {
+        setQuantityDrawerOpen(false);
+        setEditingQuoteData(undefined);
+        queryClient.invalidateQueries({
+            queryKey: QueryKeyFactory.default.transactionsKey({ token: token }),
+        });
+        queryClient.invalidateQueries({
+            queryKey: QueryKeyFactory.default.createTableKey({
+                filterString: "entityId=".concat(entityId),
+                pluralType: "subscriptions",
+                token: token,
+            }),
+        });
+        showSuccessNotification("Your plan has been updated", "Payment successful");
+        setPayModalVisible(false);
+        setHideExpired(true);
+    };
+    var onCancel = function () {
+        setPayModalVisible(false);
+    };
+    var onFail = function (error) {
+        handlePortalErrors(error);
+    };
+    var onClose = function () {
+        if (editingQuoteData) {
+            quoteDelete(editingQuoteData.id, token, apiHost);
+            setEditingQuoteData(undefined);
+        }
+        if (updatingChargeQuantityId) {
+            setUpdatingChargeQuantityId(undefined);
+        }
+        setQuantityDrawerOpen(false);
+    };
+    var allSubscriptionsExpired = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.every(function (subscription) {
+        var _a, _b;
+        return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
+            ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.CANCELED;
+    });
+    var hasExpiredOrCanceledSubscriptions = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
+        var _a, _b;
+        return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
+            ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.CANCELED;
+    });
     useEffect(function () {
-        if (subscriptions)
-            onSubscriptionsLoaded === null || onSubscriptionsLoaded === void 0 ? void 0 : onSubscriptionsLoaded(subscriptions);
-    }, [subscriptions]);
-    if (subscriptionsAreLoading || (Boolean(onChangePlanClick) ? arePlanChangeOptionsLoading : false))
-        return jsx(Fragment, {});
-    return (jsx(SubscriptionsContext.Provider, __assign({ value: {
-            gap: gap,
-            shadow: shadow,
-            subscriptionProductNameStyle: styles.subscriptionProductNameStyle,
-        } }, { children: jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink shadow-padding-xb overflow-auto ").concat(className) }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscriptions: subscriptions })) : (noSubscriptionsComponent || (jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) })) })));
+        if (allSubscriptionsExpired && subscriptions.length > 0)
+            setHideExpired(false);
+    }, [allSubscriptionsExpired, subscriptions]);
+    useEffect(function () {
+        if (hasExpiredOrCanceledSubscriptions && subscriptions.length > 0)
+            setExpiredSwitchVisible(true);
+    }, [hasExpiredOrCanceledSubscriptions, subscriptions]);
+    useEffect(function () {
+        console.log("isChangingPlan", isChangingPlan);
+    }, [isChangingPlan]);
+    if (isChangingPlan || isInPreviewMode) {
+        return (jsx(PlanManager, { onChangePlanCancel: function () {
+                console.log("setIsChangingPlan false");
+                setIsChangingPlan(false);
+            }, handlePortalErrors: handlePortalErrors }));
+    }
+    return (jsxs("div", __assign({ className: "".concat(className, " px-8") }, { children: [!hideTitle ? jsx(PageTitle, { title: "Subscriptions" }) : null, jsx(PageHeaderWithActions, __assign({ title: jsxs(Text, __assign({ className: "flex items-center justify-between", style: { minWidth: "137px" } }, { children: [hideExpired ? "Active subscriptions" : "All subscriptions", isMobile && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, visible: expiredSwitchVisible }))] })) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsx("div", __assign({ className: "pt-4 pb-2" }, { children: jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsx(Footer, {}), jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsx(Checkout, { entityId: entityId, onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: storedPaymentMethod })] })));
+};
+var PageHeaderWithActions = function (_a) {
+    var children = _a.children, title = _a.title;
+    var isMobile = useIsMobile();
+    return (jsxs("div", __assign({ className: "flex pb-4 ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsx(PageSubTitle, { title: title }), children] })));
+};
+var PageSubTitle = function (_a) {
+    var title = _a.title;
+    var secondaryColor = useContext(BrandContext).secondaryColor;
+    return (jsx("div", __assign({ className: "shrink-0 font-medium", style: { color: secondaryColor } }, { children: title })));
 };
 
 var MUTATION = "\nmutation BillingDetailsUpdate(\n    $attributes: BillingDetailsAttributes!) {\n      billingDetailsUpdate(\n        attributes: $attributes\n      ) {\n        billingDetails {\n          billingCity\n          billingContact {\n            email\n          }\n          billingCountry\n          billingState\n          billingStreet\n          billingZip\n          name\n          taxNumber\n        }\n        errors\n      }\n  }\n";
@@ -20626,7 +22454,10 @@ function BillingDetailsSection(_a) {
         onSuccess: function () {
             showSuccessNotification("Your account details have been saved");
             queryClient.invalidateQueries({
-                queryKey: QueryKeyFactory.default.taxationRequiredAccountFieldsKey({ entityId: entityId, token: token }),
+                queryKey: QueryKeyFactory.default.taxationRequiredAccountFieldsKey({
+                    entityId: entityId,
+                    token: token,
+                }),
             });
         },
     }), updateBillingDetails = _e.mutate, isUpdatingBillingDetails = _e.isPending;
@@ -20707,7 +22538,9 @@ function BillingDetailsSection(_a) {
         });
     }); };
     var filteredCountryList = useMemo(function () {
-        return countryListFilter ? Lists.COUNTRY_LIST.filter(countryListFilter) : Lists.COUNTRY_LIST;
+        return countryListFilter
+            ? Lists.COUNTRY_LIST.filter(countryListFilter)
+            : Lists.COUNTRY_LIST;
     }, [countryListFilter]);
     return (jsxs("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? "w-full" : "w-1/2", " px-4") }, { children: [jsx(Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: jsxs(Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsx(Form.Item, __assign({ label: "Account name", name: "name", rules: [{ required: true, message: "Account name is required" }] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [{ required: true, message: "Street address is required" }] }, { children: jsx(Input, {}) })), jsxs("div", __assign({ className: "flex gap-4" }, { children: [jsx(Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: "City is required" }], className: "flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: "Zipcode is required" }], className: "flex-1" }, { children: jsx(Input, {}) }))] })), jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col pb-2" : "flex-row", " gap-4") }, { children: [jsx(Form.Item, __assign({ label: "State", name: "billingState", className: "flex-1", rules: [
                                         {
@@ -20715,8 +22548,12 @@ function BillingDetailsSection(_a) {
                                         },
                                     ] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Country", name: "billingCountry", className: "flex-1", rules: [{ required: true, message: "Country is required" }] }, { children: jsx(Select, { options: filteredCountryList, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
                                             var _a, _b;
-                                            return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
-                                                ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
+                                            return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "")
+                                                .toLowerCase()
+                                                .includes(input.toLowerCase()) ||
+                                                ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "")
+                                                    .toLowerCase()
+                                                    .includes(input.toLowerCase());
                                         } }) }))] })), jsx(Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
                                 {
                                     required: true,
@@ -20753,4 +22590,4 @@ var PaymentFormSection = function (_a) {
             }, graphQLClient: graphQLClient }) })));
 };
 
-export { BillingDetails, BunnyProvider, Checkout, Invoice, PaymentForm, PaymentMethod, Quote, Quotes, Signup, Subscriptions, Transactions, getQuoteAmountDue, usePaymentMethod };
+export { BillingDetails, BunnyProvider, Invoice, PaymentForm, PaymentMethod, Quote, Quotes, Signup, SubscriptionsWrapper as Subscriptions, Transactions };