@bunnyapp/components 1.4.0 → 1.5.0-beta.2

package/dist/cjs/index.js

@@ -56,7 +56,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ":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  --bunny-blue-500: #3b82f6;\n  --bunny-blue-200: #bfdbfe;\n  --bunny-green-600: #059669;\n  --bunny-green-200: #a7f3d0;\n  --bunny-red-500: #ef4444;\n  --bunny-red-200: #fecaca;\n  --bunny-orange-500: #f97316;\n  --bunny-orange-200: #fed7aa;\n  --bunny-yellow-500: #f59e0b;\n  --bunny-yellow-200: #fde68a;\n  --bunny-purple-500: #8b5cf6;\n  --bunny-purple-200: #ddd6fe;\n  --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n  box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n  box-sizing: border-box;\n}\n.hidden {\n  display: none;\n}\n.bunny-show-on-hover {\n  opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n  opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\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.bunny-icon-path {\n  transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.bunny-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  .bunny-shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .bunny-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.bunny-shadow,\n.bunny-shadow-md {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n  position: fixed;\n}\n.bunny-absolute {\n  position: absolute;\n}\n.bunny-relative {\n  position: relative;\n}\n.bunny-sticky {\n  position: sticky;\n}\n.bunny-bottom-0 {\n  bottom: 0px;\n}\n.bunny-bottom-4 {\n  bottom: 1rem;\n}\n.bunny-left-0 {\n  left: 0px;\n}\n.bunny-right-0 {\n  right: 0px;\n}\n.bunny-top-0 {\n  top: 0px;\n}\n.bunny-col-span-1 {\n  grid-column: span 1 / span 1;\n}\n.bunny-col-span-full {\n  grid-column: 1 / -1;\n}\n.bunny-m-0 {\n  margin: 0px;\n}\n.bunny-mx-0 {\n  margin-left: 0px;\n  margin-right: 0px;\n}\n.bunny-mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.bunny-my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n  margin-top: 6rem;\n  margin-bottom: 6rem;\n}\n.bunny-my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n  margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n  margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n  margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n  margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n  margin-top: 6rem;\n}\n.bunny-mt-4 {\n  margin-top: 1rem;\n}\n.bunny-flex {\n  display: flex;\n}\n.bunny-grid {\n  display: grid;\n}\n.bunny-contents {\n  display: contents;\n}\n.bunny-h-1\\/2 {\n  height: 50%;\n}\n.bunny-h-5 {\n  height: 1.25rem;\n}\n.bunny-h-8 {\n  height: 2rem;\n}\n.bunny-h-full {\n  height: 100%;\n}\n.bunny-h-screen {\n  height: 100vh;\n}\n.bunny-max-h-\\[calc\\(100vh-10rem\\)\\] {\n  max-height: calc(100vh - 10rem);\n}\n.bunny-min-h-0 {\n  min-height: 0px;\n}\n.bunny-w-1\\/2 {\n  width: 50%;\n}\n.bunny-w-3\\/5 {\n  width: 60%;\n}\n.bunny-w-full {\n  width: 100%;\n}\n.bunny-w-screen {\n  width: 100vw;\n}\n.bunny-flex-1 {\n  flex: 1 1 0%;\n}\n.bunny-shrink {\n  flex-shrink: 1;\n}\n.bunny-shrink-0 {\n  flex-shrink: 0;\n}\n.bunny-grow {\n  flex-grow: 1;\n}\n.bunny-cursor-pointer {\n  cursor: pointer;\n}\n.bunny-grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n  flex-direction: row;\n}\n.bunny-flex-col {\n  flex-direction: column;\n}\n.bunny-flex-wrap {\n  flex-wrap: wrap;\n}\n.bunny-items-start {\n  align-items: flex-start;\n}\n.bunny-items-end {\n  align-items: flex-end;\n}\n.bunny-items-center {\n  align-items: center;\n}\n.bunny-justify-end {\n  justify-content: flex-end;\n}\n.bunny-justify-center {\n  justify-content: center;\n}\n.bunny-justify-between {\n  justify-content: space-between;\n}\n.bunny-gap-0 {\n  gap: 0px;\n}\n.bunny-gap-1 {\n  gap: 0.25rem;\n}\n.bunny-gap-2 {\n  gap: 0.5rem;\n}\n.bunny-gap-3 {\n  gap: 0.75rem;\n}\n.bunny-gap-4 {\n  gap: 1rem;\n}\n.bunny-gap-6 {\n  gap: 1.5rem;\n}\n.bunny-gap-8 {\n  gap: 2rem;\n}\n.bunny-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.bunny-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.bunny-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.bunny-overflow-auto {\n  overflow: auto;\n}\n.bunny-overflow-hidden {\n  overflow: hidden;\n}\n.bunny-overflow-visible {\n  overflow: visible;\n}\n.bunny-overflow-y-auto {\n  overflow-y: auto;\n}\n.bunny-whitespace-nowrap {\n  white-space: nowrap;\n}\n.bunny-rounded {\n  border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n  border-radius: 9999px;\n}\n.bunny-rounded-lg {\n  border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n  border-radius: 0.375rem;\n}\n.bunny-border {\n  border-width: 1px;\n}\n.bunny-border-2 {\n  border-width: 2px;\n}\n.bunny-border-solid {\n  border-style: solid;\n}\n.bunny-border-none {\n  border-style: none;\n}\n.bunny-border-slate-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n  padding: 0px;\n}\n.bunny-p-1 {\n  padding: 0.25rem;\n}\n.bunny-p-4 {\n  padding: 1rem;\n}\n.bunny-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.bunny-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.bunny-px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.bunny-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.bunny-py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n  padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n  padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n  padding-bottom: 1.5rem;\n}\n.bunny-pl-0 {\n  padding-left: 0px;\n}\n.bunny-pl-12 {\n  padding-left: 3rem;\n}\n.bunny-pl-4 {\n  padding-left: 1rem;\n}\n.bunny-pr-4 {\n  padding-right: 1rem;\n}\n.bunny-pt-1 {\n  padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n  padding-top: 3rem;\n}\n.bunny-pt-2 {\n  padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n  padding-top: 1rem;\n}\n.bunny-pt-5 {\n  padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n  padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n  padding-top: 25vh;\n}\n.bunny-text-left {\n  text-align: left;\n}\n.bunny-text-center {\n  text-align: center;\n}\n.bunny-text-right {\n  text-align: right;\n}\n.bunny-text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.bunny-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.bunny-text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.bunny-text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.bunny-text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.bunny-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.bunny-font-bold {\n  font-weight: 700;\n}\n.bunny-font-medium {\n  font-weight: 500;\n}\n.bunny-font-normal {\n  font-weight: 400;\n}\n.bunny-text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n  --tw-text-opacity: 1;\n  color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n  --tw-text-opacity: 1;\n  color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n  text-decoration-line: underline;\n}\n.bunny-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.bunny-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.bunny-transition-\\[margin\\] {\n  transition-property: margin;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.bunny-duration-300 {\n  transition-duration: 300ms;\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.sticky {\n  position: sticky;\n}\n.-top-0\\.5 {\n  top: -0.125rem;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 1rem;\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.col-span-full {\n  grid-column: 1 / -1;\n}\n.m-0 {\n  margin: 0px;\n}\n.mx-0 {\n  margin-left: 0px;\n  margin-right: 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-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.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-12 {\n  width: 3rem;\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.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.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.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.pl-0 {\n  padding-left: 0px;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-12 {\n  padding-top: 3rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.pt-5 {\n  padding-top: 1.25rem;\n}\n.pt-6 {\n  padding-top: 1.5rem;\n}\n.pt-8 {\n  padding-top: 2rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.capitalize {\n  text-transform: capitalize;\n}\n.text-emerald-600 {\n  --tw-text-opacity: 1;\n  color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n  --tw-text-opacity: 1;\n  color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n  --tw-text-opacity: 1;\n  color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-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-\\[margin\\] {\n  transition-property: margin;\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.duration-300 {\n  transition-duration: 300ms;\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.hover\\:bg-slate-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / 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.hover\\:bunny-text-orange-400:hover {\n  --tw-text-opacity: 1;\n  color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n  margin: 0 !important;\n}\n.bunny-components .ant-upload {\n  border-radius: 0.5rem !important;\n}\n.bunny-components .ant-checkbox-inner {\n  border-color: #cccccc;\n}\n.bunny-components .ant-row {\n  margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n  color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n  font-size: 0.875rem !important;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n  color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n  width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n  border: none !important;\n}\n.bunny-components .ant-form-item {\n  margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n  text-transform: none !important;\n  font-size: 0.75rem;\n  padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n  width: 100%;\n  color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n  font-size: 11px;\n  min-height: 11px;\n  line-height: 11px;\n  padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n  font-size: smaller;\n}\n.bunny-components .ant-tree {\n  font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-page-header {\n  padding-left: 0;\n  padding-right: 0;\n  padding-top: 0;\n}\n.bunny-components .ant-tag {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  padding-inline-start: 0.625rem;\n  padding-inline-end: 0.625rem;\n  margin: 0;\n}\n.bunny-components .ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n  color: #6b7280 !important;\n  background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.bunny-components .ant-picker {\n  width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n  height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n  border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n  border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n  transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n  background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n  background: #f8fafc;\n}\n.bunny-components .vista-link {\n  color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n  text-decoration: underline;\n  cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n  width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n  padding: 0;\n  text-align: center;\n  font-size: 0.875rem !important;\n  width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n  margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n  display: flex !important;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n  background: #eef0f2 !important;\n  color: rgba(0, 0, 0, 0.25) !important;\n  border: none;\n}\n.bunny-components .ant-btn {\n  box-shadow: none;\n  text-shadow: none;\n  outline: none !important;\n  line-height: 1;\n  font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n  color: #94a3b8;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n  color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n  border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n  background-color: rgba(113, 125, 148, 0.1) !important;\n  border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n  background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n  display: flex !important;\n  align-items: center;\n}\n.bunny-components .ant-select-item {\n  font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n  display: flex;\n  align-items: center;\n  white-space: nowrap !important;\n  overflow: visible !important;\n  text-overflow: default !important;\n  font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n  pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n  background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n  color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n  padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n  background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n  background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n  background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n  background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n  background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n  background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n  display: none;\n}\n.bunny-components .ant-layout-header {\n  height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n  width: inherit;\n  position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: flex-start !important;\n  gap: 4px !important;\n}\n.bunny-components .group {\n  display: flex;\n  flex-direction: row;\n  flex-flow: row wrap;\n  box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n  animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n  top: 96px !important;\n  animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n  border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n  font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n  border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n  color: #ffffff;\n  background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n  border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n  border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n  width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n  border-color: #ff5833 !important;\n  background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n  box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n  display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n  color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n  display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n  border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n  border-bottom: 2px solid transparent !important;\n  padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n  display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n  display: none !important;\n}\n.bunny-components .ant-menu-item {\n  display: flex !important;\n  align-items: center !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  border-radius: 8px !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  font-size: 14px !important;\n  overflow-wrap: break-word;\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: #ff5833 !important;\n  font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-weight: 500 !important;\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.bunny-invoice-container {\n  padding: 0;\n  box-sizing: border-box !important;\n  line-height: 1.15;\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 = ":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  --bunny-blue-500: #3b82f6;\n  --bunny-blue-200: #bfdbfe;\n  --bunny-green-600: #059669;\n  --bunny-green-200: #a7f3d0;\n  --bunny-red-500: #ef4444;\n  --bunny-red-200: #fecaca;\n  --bunny-orange-500: #f97316;\n  --bunny-orange-200: #fed7aa;\n  --bunny-yellow-500: #f59e0b;\n  --bunny-yellow-200: #fde68a;\n  --bunny-purple-500: #8b5cf6;\n  --bunny-purple-200: #ddd6fe;\n  --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n  box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n  box-sizing: border-box;\n}\n.hidden {\n  display: none;\n}\n.bunny-show-on-hover {\n  opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n  opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\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.bunny-icon-path {\n  transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.bunny-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  .bunny-shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .bunny-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.bunny-shadow,\n.bunny-shadow-md {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n  position: fixed;\n}\n.bunny-absolute {\n  position: absolute;\n}\n.bunny-relative {\n  position: relative;\n}\n.bunny-sticky {\n  position: sticky;\n}\n.bunny-bottom-0 {\n  bottom: 0px;\n}\n.bunny-bottom-4 {\n  bottom: 1rem;\n}\n.bunny-left-0 {\n  left: 0px;\n}\n.bunny-right-0 {\n  right: 0px;\n}\n.bunny-top-0 {\n  top: 0px;\n}\n.bunny-col-span-1 {\n  grid-column: span 1 / span 1;\n}\n.bunny-col-span-full {\n  grid-column: 1 / -1;\n}\n.bunny-m-0 {\n  margin: 0px;\n}\n.bunny-mx-0 {\n  margin-left: 0px;\n  margin-right: 0px;\n}\n.bunny-mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.bunny-mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.bunny-my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n  margin-top: 6rem;\n  margin-bottom: 6rem;\n}\n.bunny-my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n  margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n  margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n  margin-bottom: 2rem;\n}\n.bunny-ml-auto {\n  margin-left: auto;\n}\n.bunny-mt-2 {\n  margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n  margin-top: 6rem;\n}\n.bunny-mt-4 {\n  margin-top: 1rem;\n}\n.bunny-flex {\n  display: flex;\n}\n.bunny-grid {\n  display: grid;\n}\n.bunny-contents {\n  display: contents;\n}\n.bunny-h-0\\.5 {\n  height: 0.125rem;\n}\n.bunny-h-1\\/2 {\n  height: 50%;\n}\n.bunny-h-5 {\n  height: 1.25rem;\n}\n.bunny-h-8 {\n  height: 2rem;\n}\n.bunny-h-full {\n  height: 100%;\n}\n.bunny-h-screen {\n  height: 100vh;\n}\n.bunny-max-h-\\[calc\\(100vh-10rem\\)\\] {\n  max-height: calc(100vh - 10rem);\n}\n.bunny-min-h-0 {\n  min-height: 0px;\n}\n.bunny-w-0\\.5 {\n  width: 0.125rem;\n}\n.bunny-w-1\\/2 {\n  width: 50%;\n}\n.bunny-w-3\\/5 {\n  width: 60%;\n}\n.bunny-w-full {\n  width: 100%;\n}\n.bunny-w-screen {\n  width: 100vw;\n}\n.bunny-flex-1 {\n  flex: 1 1 0%;\n}\n.bunny-shrink {\n  flex-shrink: 1;\n}\n.bunny-shrink-0 {\n  flex-shrink: 0;\n}\n.bunny-grow {\n  flex-grow: 1;\n}\n.bunny-cursor-pointer {\n  cursor: pointer;\n}\n.bunny-grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n  flex-direction: row;\n}\n.bunny-flex-col {\n  flex-direction: column;\n}\n.bunny-flex-wrap {\n  flex-wrap: wrap;\n}\n.bunny-items-start {\n  align-items: flex-start;\n}\n.bunny-items-end {\n  align-items: flex-end;\n}\n.bunny-items-center {\n  align-items: center;\n}\n.bunny-justify-end {\n  justify-content: flex-end;\n}\n.bunny-justify-center {\n  justify-content: center;\n}\n.bunny-justify-between {\n  justify-content: space-between;\n}\n.bunny-gap-0 {\n  gap: 0px;\n}\n.bunny-gap-1 {\n  gap: 0.25rem;\n}\n.bunny-gap-2 {\n  gap: 0.5rem;\n}\n.bunny-gap-3 {\n  gap: 0.75rem;\n}\n.bunny-gap-4 {\n  gap: 1rem;\n}\n.bunny-gap-6 {\n  gap: 1.5rem;\n}\n.bunny-gap-8 {\n  gap: 2rem;\n}\n.bunny-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.bunny-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.bunny-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.bunny-overflow-auto {\n  overflow: auto;\n}\n.bunny-overflow-hidden {\n  overflow: hidden;\n}\n.bunny-overflow-visible {\n  overflow: visible;\n}\n.bunny-overflow-y-auto {\n  overflow-y: auto;\n}\n.bunny-whitespace-nowrap {\n  white-space: nowrap;\n}\n.bunny-rounded {\n  border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n  border-radius: 9999px;\n}\n.bunny-rounded-lg {\n  border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n  border-radius: 0.375rem;\n}\n.bunny-border {\n  border-width: 1px;\n}\n.bunny-border-2 {\n  border-width: 2px;\n}\n.bunny-border-solid {\n  border-style: solid;\n}\n.bunny-border-none {\n  border-style: none;\n}\n.bunny-border-slate-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-gray-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-transparent {\n  background-color: transparent;\n}\n.bunny-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n  padding: 0px;\n}\n.bunny-p-1 {\n  padding: 0.25rem;\n}\n.bunny-p-4 {\n  padding: 1rem;\n}\n.bunny-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.bunny-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.bunny-px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.bunny-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.bunny-py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n  padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n  padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n  padding-bottom: 1.5rem;\n}\n.bunny-pl-0 {\n  padding-left: 0px;\n}\n.bunny-pl-12 {\n  padding-left: 3rem;\n}\n.bunny-pl-4 {\n  padding-left: 1rem;\n}\n.bunny-pr-4 {\n  padding-right: 1rem;\n}\n.bunny-pt-1 {\n  padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n  padding-top: 3rem;\n}\n.bunny-pt-2 {\n  padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n  padding-top: 1rem;\n}\n.bunny-pt-5 {\n  padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n  padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n  padding-top: 25vh;\n}\n.bunny-text-left {\n  text-align: left;\n}\n.bunny-text-center {\n  text-align: center;\n}\n.bunny-text-right {\n  text-align: right;\n}\n.bunny-text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.bunny-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.bunny-text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.bunny-text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.bunny-text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.bunny-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.bunny-font-bold {\n  font-weight: 700;\n}\n.bunny-font-medium {\n  font-weight: 500;\n}\n.bunny-font-normal {\n  font-weight: 400;\n}\n.bunny-text-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n  --tw-text-opacity: 1;\n  color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n  --tw-text-opacity: 1;\n  color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n  text-decoration-line: underline;\n}\n.bunny-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.bunny-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.bunny-transition-\\[margin\\] {\n  transition-property: margin;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.bunny-duration-300 {\n  transition-duration: 300ms;\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.sticky {\n  position: sticky;\n}\n.-top-0\\.5 {\n  top: -0.125rem;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 1rem;\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.col-span-full {\n  grid-column: 1 / -1;\n}\n.m-0 {\n  margin: 0px;\n}\n.mx-0 {\n  margin-left: 0px;\n  margin-right: 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-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.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-12 {\n  width: 3rem;\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.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.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.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.pl-0 {\n  padding-left: 0px;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-12 {\n  padding-top: 3rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.pt-5 {\n  padding-top: 1.25rem;\n}\n.pt-6 {\n  padding-top: 1.5rem;\n}\n.pt-8 {\n  padding-top: 2rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.capitalize {\n  text-transform: capitalize;\n}\n.text-emerald-600 {\n  --tw-text-opacity: 1;\n  color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n  --tw-text-opacity: 1;\n  color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n  --tw-text-opacity: 1;\n  color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-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, backdrop-filter;\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.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.duration-300 {\n  transition-duration: 300ms;\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.hover\\:bg-slate-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / 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.hover\\:bunny-text-orange-400:hover {\n  --tw-text-opacity: 1;\n  color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n  margin: 0 !important;\n}\n.bunny-components .ant-upload {\n  border-radius: 0.5rem !important;\n}\n.bunny-components .ant-checkbox-inner {\n  border-color: #cccccc;\n}\n.bunny-components .ant-row {\n  margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n  color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n  font-size: 0.875rem !important;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n  color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n  width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n  border: none !important;\n}\n.bunny-components .ant-form-item {\n  margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n  text-transform: none !important;\n  font-size: 0.75rem;\n  padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n  width: 100%;\n  color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n  font-size: 11px;\n  min-height: 11px;\n  line-height: 11px;\n  padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n  font-size: smaller;\n}\n.bunny-components .ant-tree {\n  font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-page-header {\n  padding-left: 0;\n  padding-right: 0;\n  padding-top: 0;\n}\n.bunny-components .ant-tag {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  padding-inline-start: 0.625rem;\n  padding-inline-end: 0.625rem;\n  margin: 0;\n}\n.bunny-components .ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n  color: #6b7280 !important;\n  background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.bunny-components .ant-picker {\n  width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n  height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n  border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n  border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n  transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n  background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n  background: #f8fafc;\n}\n.bunny-components .vista-link {\n  color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n  text-decoration: underline;\n  cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n  width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n  padding: 0;\n  text-align: center;\n  font-size: 0.875rem !important;\n  width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n  margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n  display: flex !important;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n  background: #eef0f2 !important;\n  color: rgba(0, 0, 0, 0.25) !important;\n  border: none;\n}\n.bunny-components .ant-btn {\n  box-shadow: none;\n  text-shadow: none;\n  outline: none !important;\n  line-height: 1;\n  font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n  color: #94a3b8;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n  color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n  border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n  background-color: rgba(113, 125, 148, 0.1) !important;\n  border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n  background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n  display: flex !important;\n  align-items: center;\n}\n.bunny-components .ant-select-item {\n  font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n  display: flex;\n  align-items: center;\n  white-space: nowrap !important;\n  overflow: visible !important;\n  text-overflow: default !important;\n  font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n  pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n  background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n  color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n  padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n  background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n  background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n  background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n  background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n  background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n  background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n  display: none;\n}\n.bunny-components .ant-layout-header {\n  height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n  width: inherit;\n  position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: flex-start !important;\n  gap: 4px !important;\n}\n.bunny-components .group {\n  display: flex;\n  flex-direction: row;\n  flex-flow: row wrap;\n  box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n  animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n  top: 96px !important;\n  animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n  border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n  font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n  border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n  color: #ffffff;\n  background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n  border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n  border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n  width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n  border-color: #ff5833 !important;\n  background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n  box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n  display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n  color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n  display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n  border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n  border-bottom: 2px solid transparent !important;\n  padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n  display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n  display: none !important;\n}\n.bunny-components .ant-menu-item {\n  display: flex !important;\n  align-items: center !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  border-radius: 8px !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  font-size: 14px !important;\n  overflow-wrap: break-word;\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: #ff5833 !important;\n  font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-weight: 500 !important;\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.bunny-invoice-container {\n  padding: 0;\n  box-sizing: border-box !important;\n  line-height: 1.15;\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);
 
 /******************************************************************************
@@ -154,7 +154,7 @@ var BrandContext = react.createContext({
 });
 
 // This will be replaced at build time by rollup-plugin-replace
-var PACKAGE_VERSION = '1.4.0-beta.2';
+var PACKAGE_VERSION = '1.5.0-beta.1';
 var createRequestHeaders = function (token) {
     var headers = common.createClientDevHeaders({ token: token });
     // Add the components version header
@@ -549,6 +549,46 @@ var checkout = function (_a) {
     });
 };
 
+var CURRENT_USER_DATA_QUERY = "{\n    company {\n      name\n    }\n    currentUser {\n      account {\n        billingCountry\n        currencyId\n      }\n      authObjectName\n      payload {\n        returnUrl\n      }\n      privacyUrl\n      termsUrl\n      entityId\n    }\n  }";
+var getCurrentUserData = function (_a) {
+    var token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        var _b, _c, _d, _e, _f, _g, _h, _j;
+        return __generator(this, function (_k) {
+            switch (_k.label) {
+                case 0: return [4 /*yield*/, common.gqlRequest({
+                        query: CURRENT_USER_DATA_QUERY,
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _k.sent();
+                    return [2 /*return*/, {
+                            authObjectName: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.authObjectName,
+                            account: (_c = response === null || response === void 0 ? void 0 : response.currentUser) === null || _c === void 0 ? void 0 : _c.account,
+                            companyName: (_d = response === null || response === void 0 ? void 0 : response.company) === null || _d === void 0 ? void 0 : _d.name,
+                            returnUrl: (_f = (_e = response === null || response === void 0 ? void 0 : response.currentUser) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.returnUrl,
+                            privacyUrl: (_g = response === null || response === void 0 ? void 0 : response.currentUser) === null || _g === void 0 ? void 0 : _g.privacyUrl,
+                            termsUrl: (_h = response === null || response === void 0 ? void 0 : response.currentUser) === null || _h === void 0 ? void 0 : _h.termsUrl,
+                            entityId: (_j = response === null || response === void 0 ? void 0 : response.currentUser) === null || _j === void 0 ? void 0 : _j.entityId,
+                        }];
+            }
+        });
+    });
+};
+
+var useCurrentUserData = function (token) {
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var _a = reactQuery.useQuery({
+        queryKey: common.QueryKeyFactory.default.currentUserKey(token),
+        queryFn: function () { return getCurrentUserData({ token: token, apiHost: apiHost }); },
+        enabled: Boolean(token),
+    }), currentUserData = _a.data, isCurrentUserDataLoading = _a.isLoading;
+    var currentUser = currentUserData || {};
+    return { currentUser: currentUser, isCurrentUserDataLoading: isCurrentUserDataLoading };
+};
+
 var paymentMethodsQuery = function () { return "query PaymentMethods($accountId: ID) {\n  paymentMethods (accountId: $accountId) {\n    nodes {\n      id\n      pluginId\n      accountId\n      expirationDate\n      plugin {\n        guid\n        id\n      }\n      state\n      metadata {\n        issuer\n        identifier\n        kind\n        description\n        icon\n        type\n      }\n      isDefault\n    }\n  }\n}"; };
 var getPaymentMethods = function (_a) {
     var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
@@ -572,15 +612,16 @@ var getPaymentMethods = function (_a) {
     });
 };
 var usePaymentMethod = function (_a) {
-    var accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost;
-    var _b = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
+    var accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
+    var _c = reactQuery.useQuery({
+        queryKey: common.QueryKeyFactory.default.accountPaymentMethodsKey({
             accountId: accountId,
             token: token,
         }),
         queryFn: function () { return getPaymentMethods({ apiHost: apiHost, token: token, accountId: accountId }); },
-        staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
-    }), data = _b.data, isLoading = _b.isLoading;
+        staleTime: 5 * 60 * 1000,
+        enabled: enabled,
+    }), data = _c.data, isLoading = _c.isLoading;
     return {
         paymentMethods: data,
         defaultPaymentMethod: data === null || data === void 0 ? void 0 : data.find(function (paymentMethod) { return paymentMethod.isDefault; }),
@@ -931,7 +972,7 @@ function usePay(_a) {
 }
 
 var handleAllErrorFormats = common.useAllErrorFormats();
-var showErrorNotification$3 = common.useErrorNotification();
+var showErrorNotification$5 = common.useErrorNotification();
 var ActualCheckoutFooter = function (_a) {
     var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
     var isMobile = common.useIsMobile();
@@ -1020,7 +1061,7 @@ var ActualCheckoutFooter = function (_a) {
                     _f.sent();
                     return [3 /*break*/, 6];
                 case 5:
-                    showErrorNotification$3("Payment holds are not supported by ".concat((_e = (_d = plugin.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name));
+                    showErrorNotification$5("Payment holds are not supported by ".concat((_e = (_d = plugin.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name));
                     return [3 /*break*/, 6];
                 case 6: return [2 /*return*/];
             }
@@ -18405,7 +18446,7 @@ var Bancontact = function (_a) {
     return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.2243 35.1715C18.2243 34.882 18.156 34.6314 18.0199 34.4199C17.8835 34.2083 17.7043 34.0468 17.4819 33.9355C17.7043 33.8242 17.8766 33.6597 17.9991 33.4426C18.1214 33.2255 18.1825 32.9806 18.1825 32.7078V32.5575C18.1825 32.2233 18.1186 31.9451 17.9908 31.7223C17.8628 31.4996 17.6833 31.3213 17.4526 31.1878C17.2219 31.0541 16.9451 30.9582 16.6227 30.8995C16.3 30.8411 15.9414 30.812 15.5465 30.812C15.4131 30.812 15.274 30.8147 15.1296 30.8203C14.9848 30.8258 14.8445 30.8328 14.7083 30.8411C14.572 30.8494 14.4468 30.8593 14.3329 30.8704C14.2188 30.8817 14.1256 30.8928 14.0534 30.9037C13.8921 30.9318 13.7781 30.9817 13.7114 31.0541C13.6448 31.1266 13.6113 31.2575 13.6113 31.4467V36.5245C13.6113 36.7139 13.646 36.8447 13.7156 36.917C13.7851 36.9895 13.9032 37.0394 14.0702 37.0673C14.1535 37.084 14.2536 37.0979 14.3704 37.1091C14.4871 37.1202 14.6136 37.1299 14.7499 37.1383C14.8862 37.1466 15.0265 37.1535 15.1711 37.1593C15.3158 37.1646 15.4575 37.1676 15.5966 37.1676C15.9581 37.1676 16.2986 37.1397 16.6185 37.084C16.9381 37.0285 17.2161 36.9295 17.4526 36.7874C17.689 36.6456 17.8766 36.4534 18.0157 36.2113C18.1546 35.969 18.2243 35.6642 18.2243 35.2967V35.1715ZM16.8063 32.7746C16.8063 32.8637 16.7924 32.9487 16.7645 33.0293C16.7366 33.11 16.6909 33.1795 16.627 33.2383C16.5629 33.2966 16.4768 33.3439 16.3684 33.38C16.2599 33.4162 16.1222 33.4343 15.9554 33.4343H15.0213V31.9895C15.049 31.9895 15.0921 31.9883 15.1505 31.9853C15.2089 31.9825 15.27 31.9812 15.3339 31.9812H15.6551C16.0833 31.9812 16.3822 32.0354 16.5518 32.144C16.7214 32.2526 16.8063 32.421 16.8063 32.6492V32.7746ZM16.5935 35.8062C16.7576 35.6782 16.8397 35.4971 16.8397 35.2634V35.1714C16.8397 34.971 16.7756 34.797 16.6478 34.6494C16.5198 34.502 16.289 34.4282 15.9554 34.4282H15.0213V35.9898H15.1671C15.231 35.9898 15.2977 35.9916 15.3673 35.9942C15.4368 35.9969 15.5035 35.9985 15.5676 35.9985H15.7051C16.1333 35.9985 16.4295 35.9343 16.5935 35.8062ZM22.7955 33.9438C22.7955 33.6377 22.7496 33.3772 22.6578 33.1629C22.5662 32.9487 22.4368 32.7732 22.27 32.6367C22.1032 32.5004 21.8988 32.4003 21.6568 32.3362C21.415 32.2722 21.1439 32.2401 20.8436 32.2401C20.5654 32.2401 20.2943 32.2597 20.0303 32.2987C19.766 32.3375 19.556 32.3766 19.4005 32.4154C19.2948 32.4435 19.242 32.5046 19.242 32.5991V33.2756C19.242 33.3314 19.2559 33.3705 19.2837 33.3925C19.3115 33.4149 19.3475 33.4261 19.3922 33.4261H19.4337C19.5006 33.4204 19.5839 33.4135 19.684 33.4051C19.7842 33.3968 19.8968 33.3901 20.022 33.3842C20.1471 33.3788 20.2777 33.3746 20.414 33.3717C20.5501 33.3689 20.6851 33.3675 20.8186 33.3675C21.0131 33.3675 21.1661 33.4038 21.2773 33.4761C21.3885 33.5486 21.4441 33.7045 21.4441 33.9438V34.2445H20.9937C20.2763 34.2445 19.7549 34.3572 19.4296 34.5827C19.1043 34.8081 18.9416 35.1659 18.9416 35.6558V35.7313C18.9416 36.0039 18.982 36.2321 19.0625 36.4158C19.1431 36.5996 19.2503 36.7472 19.3837 36.8587C19.5172 36.9699 19.6686 37.0493 19.8384 37.0964C20.008 37.1438 20.1846 37.1676 20.3681 37.1676C20.6184 37.1676 20.8339 37.1341 21.0145 37.0673C21.1952 37.0005 21.3662 36.9086 21.5276 36.7917V36.9253C21.5276 36.9699 21.5442 37.0089 21.5776 37.0422C21.6111 37.0756 21.6499 37.0923 21.6944 37.0923H22.6287C22.6731 37.0923 22.712 37.0756 22.7455 37.0422C22.7789 37.0089 22.7955 36.9699 22.7955 36.9253V33.9438ZM21.1481 36.0942C21.2619 36.0581 21.3691 36.015 21.4692 35.9648V35.0462H20.9937C20.8491 35.0462 20.7296 35.0587 20.635 35.0837C20.5404 35.1088 20.4653 35.1465 20.4098 35.1966C20.3542 35.2465 20.3152 35.3107 20.2931 35.3886C20.2707 35.4666 20.2596 35.5556 20.2596 35.6558V35.7312C20.2596 35.9092 20.3026 36.0233 20.3889 36.0734C20.4751 36.1235 20.6071 36.1485 20.7852 36.1485C20.913 36.1485 21.0339 36.1306 21.1481 36.0942ZM27.9007 36.917V34.1358C27.9007 33.8744 27.8799 33.6278 27.8381 33.3968C27.7964 33.166 27.7214 32.9653 27.6129 32.7954C27.5045 32.6256 27.3543 32.4905 27.1624 32.3904C26.9707 32.2902 26.7245 32.2401 26.4242 32.2401C26.1572 32.2401 25.9208 32.2723 25.7152 32.3369C25.5094 32.4014 25.2925 32.515 25.0646 32.6776V32.4752C25.0646 32.4305 25.0478 32.3911 25.0145 32.3575C24.9811 32.3238 24.9421 32.3068 24.8976 32.3068H23.9634C23.9187 32.3068 23.8799 32.3235 23.8467 32.357C23.8133 32.3904 23.7966 32.4295 23.7966 32.4739V36.917C23.7966 36.9615 23.8145 37.0019 23.8508 37.038C23.8869 37.0743 23.9272 37.0923 23.9717 37.0923H24.9811C25.0256 37.0923 25.0646 37.0743 25.0978 37.0382C25.1313 37.0021 25.1479 36.9619 25.1479 36.9173V33.6341C25.2925 33.5564 25.4287 33.4925 25.5567 33.4426C25.6845 33.3925 25.8096 33.3675 25.932 33.3675C26.0599 33.3675 26.1642 33.38 26.2449 33.4051C26.3254 33.4301 26.388 33.4731 26.4325 33.5345C26.477 33.5954 26.5076 33.6759 26.5243 33.7757C26.5409 33.8758 26.5494 33.9981 26.5494 34.1425V36.9173C26.5494 36.9619 26.566 37.0021 26.5994 37.0382C26.6327 37.0743 26.6715 37.0923 26.7162 37.0923H27.7255C27.7699 37.0923 27.8102 37.0743 27.8464 37.038C27.8826 37.0019 27.9007 36.9615 27.9007 36.917ZM32.0047 36.1071V36.8502C32.0047 36.9114 31.9907 36.9546 31.963 36.9796C31.9351 37.0047 31.8906 37.0255 31.8294 37.0422C31.7127 37.0701 31.5611 37.0978 31.3749 37.1259C31.1885 37.1535 30.9703 37.1676 30.72 37.1676C30.1305 37.1676 29.6592 36.9867 29.3062 36.6246C28.953 36.2628 28.7765 35.7394 28.7765 35.0546V34.3531C28.7765 33.6682 28.953 33.1448 29.3062 32.7831C29.6592 32.421 30.1305 32.2401 30.72 32.2401C30.9703 32.2401 31.1885 32.254 31.3749 32.2817C31.5611 32.3098 31.7127 32.3375 31.8294 32.3653C31.8906 32.3819 31.9351 32.4029 31.963 32.4279C31.9907 32.453 32.0047 32.4962 32.0047 32.5574V33.3007C32.0047 33.3453 31.9893 33.38 31.9588 33.4051C31.9281 33.4301 31.8906 33.4426 31.8462 33.4426H31.8294C31.6737 33.4261 31.5251 33.4121 31.3832 33.401C31.2413 33.3901 31.0508 33.3842 30.8118 33.3842C30.7172 33.3842 30.6283 33.3996 30.5448 33.4301C30.4613 33.4608 30.3891 33.5137 30.328 33.5888C30.2666 33.6641 30.2181 33.7641 30.1819 33.8895C30.1457 34.0147 30.1277 34.1692 30.1277 34.3531V35.0546C30.1277 35.2382 30.1457 35.3927 30.1819 35.5181C30.2181 35.6433 30.2666 35.7436 30.328 35.8187C30.3891 35.8939 30.4613 35.9468 30.5448 35.9774C30.6283 36.008 30.7172 36.0233 30.8118 36.0233C31.0508 36.0233 31.2413 36.0178 31.3832 36.0067C31.5251 35.9956 31.6737 35.9815 31.8294 35.9649H31.8462C31.8906 35.9649 31.9281 35.9774 31.9588 36.0025C31.9893 36.0276 32.0047 36.0623 32.0047 36.1071ZM36.6346 34.4115C36.6346 34.0773 36.5885 33.7768 36.4966 33.5095C36.4046 33.2423 36.2709 33.0155 36.0954 32.8289C35.9199 32.6424 35.7025 32.4976 35.4436 32.3946C35.1844 32.2918 34.8848 32.2401 34.5449 32.2401C34.2051 32.2401 33.9056 32.2918 33.6465 32.3946C33.3873 32.4976 33.1685 32.6424 32.9903 32.8289C32.8119 33.0155 32.6768 33.2423 32.585 33.5095C32.4928 33.7768 32.4469 34.0773 32.4469 34.4115V34.9961C32.4469 35.3301 32.4928 35.6309 32.585 35.8981C32.6768 36.1653 32.8119 36.3922 32.9903 36.5788C33.1685 36.7654 33.3873 36.91 33.6465 37.013C33.9056 37.1159 34.2051 37.1676 34.5449 37.1676C34.8848 37.1676 35.1844 37.1159 35.4436 37.013C35.7025 36.91 35.9199 36.7654 36.0954 36.5788C36.2709 36.3922 36.4046 36.1653 36.4966 35.8981C36.5885 35.6309 36.6346 35.3301 36.6346 34.9961V34.4115ZM34.5449 36.0233C35.037 36.0233 35.2832 35.6809 35.2832 34.9961V34.4115C35.2832 33.7322 35.037 33.3925 34.5449 33.3925C34.3016 33.3925 34.1164 33.4774 33.9893 33.6472C33.8619 33.8172 33.7984 34.0719 33.7984 34.4115V34.9961C33.7984 35.3357 33.8619 35.5918 33.9893 35.7644C34.1164 35.9371 34.3016 36.0233 34.5449 36.0233ZM41.5976 36.917V34.1358C41.5976 33.8744 41.5765 33.6278 41.5351 33.3968C41.4933 33.166 41.4181 32.9653 41.3095 32.7954C41.2011 32.6256 41.0511 32.4905 40.8593 32.3904C40.6674 32.2902 40.4213 32.2401 40.1211 32.2401C39.8542 32.2401 39.6177 32.2723 39.4119 32.3369C39.2062 32.4014 38.9893 32.515 38.7613 32.6776V32.4752C38.7613 32.4305 38.7447 32.3911 38.7111 32.3575C38.678 32.3238 38.6389 32.3068 38.5945 32.3068H37.6602C37.6157 32.3068 37.5769 32.3235 37.5434 32.357C37.5102 32.3904 37.4934 32.4295 37.4934 32.4739V36.917C37.4934 36.9615 37.5114 37.0019 37.5476 37.038C37.5838 37.0743 37.624 37.0923 37.6687 37.0923H38.678C38.7224 37.0923 38.7613 37.0743 38.7948 37.0382C38.828 37.0021 38.8448 36.9619 38.8448 36.9173V33.6341C38.9893 33.5564 39.1256 33.4925 39.2534 33.4426C39.3815 33.3925 39.5065 33.3675 39.629 33.3675C39.7568 33.3675 39.8611 33.38 39.9416 33.4051C40.0222 33.4301 40.0849 33.4731 40.1294 33.5345C40.1739 33.5954 40.2044 33.6759 40.2212 33.7757C40.2378 33.8758 40.2462 33.9981 40.2462 34.1425V36.9173C40.2462 36.9619 40.2628 37.0021 40.2962 37.0382C40.3296 37.0743 40.3684 37.0923 40.413 37.0923H41.4223C41.4668 37.0923 41.5072 37.0743 41.5434 37.038C41.5794 37.0019 41.5976 36.9615 41.5976 36.917ZM45.2348 36.2893V36.9357C45.2348 37.0295 45.182 37.0848 45.0763 37.1011C44.9483 37.1233 44.8371 37.1398 44.7427 37.1509C44.6481 37.162 44.5395 37.1675 44.4174 37.1675C44.1905 37.1675 43.9901 37.1493 43.816 37.1133C43.6419 37.077 43.4966 37.0061 43.3805 36.9003C43.2646 36.7945 43.1761 36.6483 43.1153 36.4617C43.0547 36.2753 43.0242 36.0347 43.0242 35.7394V33.3175L42.357 33.2088C42.3123 33.1977 42.2721 33.1769 42.2359 33.1462C42.1997 33.1157 42.1817 33.0781 42.1817 33.0335V32.4822C42.1817 32.4378 42.1997 32.3974 42.2359 32.3611C42.2721 32.325 42.3123 32.3068 42.357 32.3068H43.0242V31.622C43.0242 31.5774 43.0409 31.5414 43.0739 31.5134C43.1068 31.4857 43.1458 31.4663 43.1902 31.455L44.2016 31.2798H44.2263C44.2705 31.2798 44.3065 31.2921 44.3343 31.3171C44.3618 31.3423 44.3757 31.3771 44.3757 31.4215V32.3068H45.0597C45.104 32.3068 45.143 32.3237 45.1764 32.3573C45.2099 32.3909 45.2265 32.4305 45.2265 32.4752V33.1573C45.2265 33.2024 45.2099 33.2416 45.1764 33.2752C45.143 33.3089 45.104 33.3257 45.0597 33.3257H44.3757V35.7561C44.3757 35.9231 44.3895 36.0304 44.4174 36.0776C44.4451 36.1249 44.5229 36.1485 44.6507 36.1485H45.0597C45.1764 36.1485 45.2348 36.1955 45.2348 36.2893ZM49.6891 33.9438C49.6891 33.6377 49.6433 33.3772 49.5514 33.1629C49.4597 32.9487 49.3305 32.7732 49.1637 32.6367C48.9969 32.5004 48.7925 32.4003 48.5505 32.3362C48.3087 32.2722 48.0376 32.2401 47.7373 32.2401C47.4589 32.2401 47.188 32.2597 46.924 32.2987C46.6597 32.3375 46.4497 32.3766 46.2942 32.4154C46.1882 32.4435 46.1357 32.5046 46.1357 32.5991V33.2756C46.1357 33.3314 46.1494 33.3705 46.1773 33.3925C46.2052 33.4149 46.2412 33.4261 46.2857 33.4261H46.3274C46.3943 33.4204 46.4776 33.4135 46.5777 33.4051C46.6779 33.3968 46.7905 33.3901 46.9155 33.3842C47.0408 33.3788 47.1714 33.3746 47.3077 33.3717C47.4438 33.3689 47.5788 33.3675 47.7121 33.3675C47.9068 33.3675 48.0598 33.4038 48.171 33.4761C48.2822 33.5486 48.3378 33.7045 48.3378 33.9438V34.2445H47.8874C47.1698 34.2445 46.6486 34.3572 46.3233 34.5827C45.998 34.8081 45.8353 35.1659 45.8353 35.6558V35.7313C45.8353 36.0039 45.8755 36.2321 45.9562 36.4158C46.0366 36.5996 46.144 36.7472 46.2774 36.8587C46.4109 36.9699 46.5623 37.0493 46.7321 37.0964C46.9017 37.1438 47.0782 37.1676 47.2618 37.1676C47.5121 37.1676 47.7274 37.1341 47.9082 37.0673C48.0889 37.0005 48.2597 36.9086 48.4213 36.7917V36.9253C48.4213 36.9699 48.4379 37.0089 48.4713 37.0422C48.5046 37.0756 48.5436 37.0923 48.5881 37.0923H49.5224C49.5668 37.0923 49.6057 37.0756 49.6392 37.0422C49.6724 37.0089 49.6891 36.9699 49.6891 36.9253V33.9438ZM48.0418 36.0942C48.1556 36.0581 48.2628 36.015 48.3629 35.9648V35.0462H47.8874C47.7428 35.0462 47.6233 35.0587 47.5287 35.0837C47.4341 35.1088 47.359 35.1465 47.3035 35.1966C47.2477 35.2465 47.2088 35.3107 47.1868 35.3886C47.1644 35.4666 47.1533 35.5556 47.1533 35.6558V35.7312C47.1533 35.9092 47.1963 36.0233 47.2826 36.0734C47.3688 36.1235 47.5008 36.1485 47.6789 36.1485C47.8067 36.1485 47.9274 36.1306 48.0418 36.0942ZM53.7933 36.8502V36.1071C53.7933 36.0623 53.7779 36.0276 53.7474 36.0025C53.7167 35.9774 53.6793 35.9649 53.6348 35.9649H53.6181C53.4624 35.9815 53.3136 35.9956 53.1718 36.0067C53.0301 36.0178 52.8395 36.0233 52.6005 36.0233C52.5057 36.0233 52.4167 36.008 52.3336 35.9774C52.2501 35.9468 52.1777 35.8939 52.1165 35.8187C52.0554 35.7436 52.0067 35.6433 51.9707 35.5181C51.9343 35.3927 51.9165 35.2382 51.9165 35.0546V34.3531C51.9165 34.1692 51.9343 34.0147 51.9707 33.8895C52.0067 33.7641 52.0554 33.6641 52.1165 33.5888C52.1777 33.5137 52.2501 33.4608 52.3336 33.4301C52.4167 33.3996 52.5057 33.3842 52.6005 33.3842C52.8395 33.3842 53.0301 33.3901 53.1718 33.401C53.3136 33.4121 53.4624 33.4261 53.6181 33.4426H53.6348C53.6793 33.4426 53.7167 33.4301 53.7474 33.4051C53.7779 33.38 53.7933 33.3453 53.7933 33.3007V32.5574C53.7933 32.4962 53.7794 32.453 53.7515 32.4279C53.7235 32.4029 53.6793 32.3819 53.6181 32.3653C53.5014 32.3375 53.3497 32.3098 53.1635 32.2817C52.9771 32.254 52.759 32.2401 52.5087 32.2401C51.9189 32.2401 51.4479 32.421 51.0947 32.7831C50.7415 33.1448 50.565 33.6682 50.565 34.3531V35.0546C50.565 35.7394 50.7415 36.2628 51.0947 36.6246C51.4479 36.9867 51.9189 37.1676 52.5087 37.1676C52.759 37.1676 52.9771 37.1535 53.1635 37.1259C53.3497 37.0978 53.5014 37.0701 53.6181 37.0422C53.6793 37.0255 53.7235 37.0047 53.7515 36.9796C53.7794 36.9546 53.7933 36.9114 53.7933 36.8502ZM57.3884 36.2893V36.9357C57.3884 37.0295 57.3354 37.0848 57.2299 37.1011C57.1019 37.1233 56.9907 37.1398 56.8963 37.1509C56.8016 37.162 56.6931 37.1675 56.571 37.1675C56.3441 37.1675 56.1437 37.1493 55.9696 37.1133C55.7954 37.077 55.6502 37.0061 55.5343 36.9003C55.4183 36.7945 55.3298 36.6483 55.269 36.4617C55.2083 36.2753 55.1778 36.0347 55.1778 35.7394V33.3175L54.5106 33.2088C54.4659 33.1977 54.4257 33.1769 54.3895 33.1462C54.3533 33.1157 54.3353 33.0781 54.3353 33.0335V32.4822C54.3353 32.4378 54.3533 32.3974 54.3895 32.3611C54.4257 32.325 54.4659 32.3068 54.5106 32.3068H55.1778V31.622C55.1778 31.5774 55.1945 31.5414 55.2276 31.5134C55.2605 31.4857 55.2993 31.4663 55.3436 31.455L56.355 31.2798H56.38C56.4241 31.2798 56.4602 31.2921 56.4875 31.3171C56.5154 31.3423 56.5293 31.3771 56.5293 31.4215V32.3068H57.2133C57.2577 32.3068 57.2966 32.3237 57.3301 32.3573C57.3633 32.3909 57.3801 32.4305 57.3801 32.4752V33.1573C57.3801 33.2024 57.3633 33.2416 57.3301 33.2752C57.2966 33.3089 57.2577 33.3257 57.2133 33.3257H56.5293V35.7561C56.5293 35.9231 56.5431 36.0304 56.571 36.0776C56.5987 36.1249 56.6765 36.1485 56.8045 36.1485H57.2133C57.3301 36.1485 57.3884 36.1955 57.3884 36.2893Z", fill: "#005697" }), jsxRuntime.jsx("path", { d: "M52.6187 14.7398H39.0664L37.6881 16.2935L33.2155 21.3349V21.3351L31.8372 22.8886H18.464L19.821 21.3153L20.4633 20.5706L21.8202 18.9973H15.6582C14.5325 18.9973 13.6113 19.943 13.6113 21.0987V25.5326C13.6113 26.6885 14.5325 27.6342 15.6582 27.6342H39.2492C40.3749 27.6342 41.9127 26.9318 42.6665 26.0733L46.235 22.0097L52.6187 14.7398Z", fill: "#005697" }), jsxRuntime.jsx("path", { d: "M55.3418 10C56.4676 10 57.3887 10.9457 57.3887 12.1015V16.5353C57.3887 17.691 56.4676 18.6368 55.3418 18.6368H49.1999L50.5697 17.0753H50.5699L51.2491 16.3012L52.6189 14.7398H39.0667L31.8375 22.8945H18.3813L28.0314 11.9701L28.3966 11.5566C29.153 10.7005 30.6929 10 31.8186 10H55.3418V10Z", fill: "#FBD500" })] })));
 };
 
-var Text$q = antd.Typography.Text;
+var Text$r = antd.Typography.Text;
 var MiniCreditCard = function (_a) {
     var className = _a.className, buttons = _a.buttons, _b = _a.hideDropdownMenu, hideDropdownMenu = _b === void 0 ? false : _b, _c = _a.hideDefaultTag, hideDefaultTag = _c === void 0 ? false : _c, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData, onClickSetDefault = _a.onClickSetDefault, id = _a.id;
     var darkMode = react.useContext(BunnyContext).darkMode;
@@ -18416,7 +18457,7 @@ var MiniCreditCard = function (_a) {
         return darkMode ? 'var(--row-background-alternate)' : 'bg-slate-50';
     }, [darkMode]);
     var isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Issuer, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$q, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] }))) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Issuer, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$r, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] }))) })));
 };
 var Identifier = function (_a) {
     var _b, _c, _d;
@@ -18425,9 +18466,9 @@ var Identifier = function (_a) {
         return null;
     }
     if (((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.type) === 'cashapp') {
-        return jsxRuntime.jsx(Text$q, { children: "Cashapp" });
+        return jsxRuntime.jsx(Text$r, { children: "Cashapp" });
     }
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$q, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$q, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$r, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$r, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
 };
 var Issuer = function (_a) {
     var _b;
@@ -18436,7 +18477,7 @@ var Issuer = function (_a) {
     var issuer = (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer;
     if (issuer.length == 0 || list.includes(issuer.toLowerCase()))
         return null;
-    return jsxRuntime.jsx(Text$q, { children: lodashExports.capitalize(issuer) });
+    return jsxRuntime.jsx(Text$r, { children: lodashExports.capitalize(issuer) });
 };
 var DropdownMenu = function (_a) {
     var setDefault = _a.setDefault, remove = _a.remove, isDefault = _a.isDefault, id = _a.id;
@@ -18515,7 +18556,7 @@ var useAutoSetDefaultPaymentMethod = function (_a) {
     }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod;
     // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
     function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
-        var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
+        var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodsKey({
             accountId: accountId,
             token: token,
         }));
@@ -18524,7 +18565,7 @@ var useAutoSetDefaultPaymentMethod = function (_a) {
                 var paymentMethod = _a[_i];
                 paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
             }
-            queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
+            queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodsKey({
                 accountId: accountId,
                 token: token,
             }), cachedPaymentMethods);
@@ -18733,7 +18774,7 @@ function useSave$1(_a) {
     return { save: save, isSaving: isSaving };
 }
 
-var Text$p = antd.Typography.Text;
+var Text$q = antd.Typography.Text;
 var TEST_CARD = '4242424242424242';
 var DemoPayForm = function (_a) {
     var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -18795,7 +18836,7 @@ var DemoPayForm = function (_a) {
     var onCardCvcChange = function (cvc) {
         setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$p, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$q, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
 };
 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;
@@ -18962,7 +19003,7 @@ var CardIcon = function (_a) {
     return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.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: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
-var Text$o = antd.Typography.Text;
+var Text$p = antd.Typography.Text;
 var PaymentMethodSelector = function (_a) {
     var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
     return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsxRuntime.jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
@@ -18975,7 +19016,7 @@ var PaymentOption = function (_a) {
     var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
     return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ".concat(darkMode
             ? "var(--row-background-dark) border-gray-500"
-            : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$o, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] })));
+            : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$p, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] })));
 };
 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;
@@ -19011,9 +19052,8 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRem
                         })
                             .then(function () {
                             showSuccessNotification('Payment method was removed', 'Success');
-                            // TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
                             queryClient.invalidateQueries({
-                                queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
+                                queryKey: common.QueryKeyFactory.default.accountPaymentMethodsKey({
                                     token: token,
                                     accountId: accountId,
                                 }),
@@ -19064,9 +19104,8 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
                             .then(function () {
                             showSuccessNotification("Payment method ".concat(data.metadata.identifier, " was set as default"), 'Success');
                             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
-                            // TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
                             queryClient.invalidateQueries({
-                                queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
+                                queryKey: common.QueryKeyFactory.default.accountPaymentMethodsKey({
                                     token: token,
                                     accountId: accountId,
                                 }),
@@ -19093,22 +19132,21 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
     return { setDefaultPaymentMethod: setDefaultPaymentMethod, loading: loading };
 }
 
-var showErrorNotification$2 = common.useErrorNotification();
+var showErrorNotification$4 = common.useErrorNotification();
 var PaymentForm = function (_a) {
-    var _b;
-    var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, paymentHoldOptions = _a.paymentHoldOptions;
+    var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, paymentHoldOptions = _a.paymentHoldOptions;
     // Local state
-    var _c = react.useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
+    var _b = react.useState(false), showPaymentMethodForm = _b[0], setShowPaymentMethodForm = _b[1];
     // Simple hooks
     var queryClient = reactQuery.useQueryClient();
     var apiHost = react.useContext(BunnyContext).apiHost;
     var tokenFromContexts = useToken();
     var token = overrideToken || tokenFromContexts;
-    var _d = usePaymentMethod({
+    var _c = usePaymentMethod({
         accountId: accountId,
         token: token,
         apiHost: apiHost,
-    }), storedPaymentMethods = _d.paymentMethods, defaultPaymentMethod = _d.defaultPaymentMethod, isPaymentMethodLoading = _d.isLoading;
+    }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod, isPaymentMethodLoading = _c.isLoading;
     // Complex hooks
     var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, token: token, accountId: accountId }).paymentPlugins;
     var selectedPaymentMethodPlugin = react.useMemo(function () {
@@ -19118,13 +19156,14 @@ var PaymentForm = function (_a) {
     // Derived state
     var defaultPaymentMethodPlugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
     var paying = Boolean(quote || invoice);
-    var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) ||
-        (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
-        currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    var _d = usePaymentFormCurrencyId({
+        quote: quote,
+        invoice: invoice,
+    }), currencyId = _d.currencyId, isCurrencyIdLoading = _d.isCurrencyIdLoading;
     var paymentRequired = quote ? getQuoteAmountDue(quote) > 0 : true;
     // Custom hooks
     var _e = useSetDefaultPaymentMethod(paymentPlugins || [], apiHost, token, accountId, function (message) {
-        showErrorNotification$2(message, 'Error setting default payment method');
+        showErrorNotification$4(message, 'Error setting default payment method');
     }, function () {
         onSetDefaultPaymentMethod === null || onSetDefaultPaymentMethod === void 0 ? void 0 : onSetDefaultPaymentMethod();
     }), handleSetDefault = _e.setDefaultPaymentMethod, setDefaultPaymentMethodLoading = _e.loading;
@@ -19161,7 +19200,7 @@ var PaymentForm = function (_a) {
         onError: onFail,
     }), checkoutNoPayment = _g.mutate, isCheckingOutNoPayment = _g.isPending;
     var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], apiHost, token, accountId, onRemovePaymentMethod, function (message) {
-        showErrorNotification$2(message, 'Error removing payment method');
+        showErrorNotification$4(message, 'Error removing payment method');
     });
     var handlePaymentSuccess = function () {
         // Hide payment method selector and form
@@ -19170,7 +19209,7 @@ var PaymentForm = function (_a) {
     };
     var handleSavePaymentMethod = function (response) {
         queryClient.invalidateQueries({
-            queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
+            queryKey: common.QueryKeyFactory.default.accountPaymentMethodsKey({
                 accountId: accountId,
                 token: token,
             }),
@@ -19180,7 +19219,7 @@ var PaymentForm = function (_a) {
     };
     function handleClickAddPaymentMethod() {
         if ((paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) === 0) {
-            showErrorNotification$2('No payment plugins available', 'Error adding payment method');
+            showErrorNotification$4('No payment plugins available', 'Error adding payment method');
         }
         else {
             setShowPaymentMethodForm(true);
@@ -19192,9 +19231,14 @@ var PaymentForm = function (_a) {
             setShowPaymentMethodForm(true);
         }
     }, [storedPaymentMethods]);
-    if (isPaymentMethodLoading) {
+    if (isPaymentMethodLoading || isCurrencyIdLoading) {
         return jsxRuntime.jsx(antd.Skeleton, { active: true, className: "bunny-p-4" });
     }
+    // Return early because it is a bug if PaymentForm is rendered without a currency ID.
+    // For example, sepa / iDeal may not show for dutch customer if no currencyId
+    if (!currencyId) {
+        return jsxRuntime.jsx("div", { children: "PaymentForm error: No currency ID found from Quote or Invoice or props." });
+    }
     return (jsxRuntime.jsx(PaymentContext.Provider, __assign({ value: {
             onClickCancel: function () { return setShowPaymentMethodForm(false); },
             accountId: accountId,
@@ -19216,9 +19260,18 @@ function StripeWrapper(_a) {
     var _b = useStripePlugin(plugin, apiHost, currencyId || 'usd', token, accountId), stripe = _b.stripe, options = _b.options;
     return (jsxRuntime.jsx(reactStripeJs.Elements, __assign({ options: options, stripe: stripe }, { children: children })));
 }
+function usePaymentFormCurrencyId(_a) {
+    var quote = _a.quote, invoice = _a.invoice;
+    var token = useToken();
+    var _b = useCurrentUserData(token), currentUser = _b.currentUser, isCurrentUserDataLoading = _b.isCurrentUserDataLoading;
+    var account = currentUser === null || currentUser === void 0 ? void 0 : currentUser.account;
+    var accountCurrencyId = account === null || account === void 0 ? void 0 : account.currencyId;
+    var currencyId = react.useMemo(function () { var _a; return (_a = (accountCurrencyId || (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId))) === null || _a === void 0 ? void 0 : _a.toLowerCase(); }, [accountCurrencyId, quote === null || quote === void 0 ? void 0 : quote.currencyId, invoice === null || invoice === void 0 ? void 0 : invoice.currencyId]);
+    return { currencyId: currencyId, isCurrencyIdLoading: isCurrentUserDataLoading };
+}
 
 function Invoice(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onInvoiceLoaded = _a.onInvoiceLoaded;
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, _d = _a.hidePaymentForm, hidePaymentForm = _d === void 0 ? false : _d, onInvoiceLoaded = _a.onInvoiceLoaded;
     return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
             id: id,
             invoiceQuoteViewComponent: invoiceQuoteViewComponent,
@@ -19230,14 +19283,15 @@ function Invoice(_a) {
             className: className,
             hideDownloadButton: hideDownloadButton,
             onInvoiceLoaded: onInvoiceLoaded,
-        } }, { children: jsxRuntime.jsx(ActualInvoice, {}) })));
+        } }, { children: jsxRuntime.jsx(ActualInvoice, { hidePaymentForm: hidePaymentForm }) })));
 }
-function ActualInvoice() {
+function ActualInvoice(_a) {
+    var hidePaymentForm = _a.hidePaymentForm;
     // Context
     var queryClient = reactQuery.useQueryClient();
-    var _a = react.useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess, className = _a.className;
-    var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired;
-    var _c = react.useContext(InvoiceQuoteContext), hideDownloadButton = _c.hideDownloadButton, onInvoiceLoaded = _c.onInvoiceLoaded;
+    var _b = react.useContext(InvoiceQuoteContext), id = _b.id, invoiceQuoteViewComponent = _b.invoiceQuoteViewComponent, backButtonName = _b.backButtonName, onBackButtonClick = _b.onBackButtonClick, onPaymentSuccess = _b.onPaymentSuccess, className = _b.className;
+    var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, onTokenExpired = _c.onTokenExpired;
+    var _d = react.useContext(InvoiceQuoteContext), hideDownloadButton = _d.hideDownloadButton, onInvoiceLoaded = _d.onInvoiceLoaded;
     var token = useToken();
     // Hooks
     var showSuccessNotification = common.useSuccessNotification();
@@ -19274,12 +19328,12 @@ function ActualInvoice() {
     }, [formattedInvoice]);
     if (!formattedInvoice)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
 }
 
 var MUTATION$8 = function () { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      quote {\n        documentTemplateId\n        documents { id filename size date url }\n        firstInvoice {\n          id\n          state\n        }\n        payableId\n        id\n        payToAccept\n        currentPaymentHold {\n          createdAt\n          expiresAt\n          id\n          updatedAt\n          paymentMethod {\n            accountId\n            createdAt\n            expirationDate\n            failureCode\n            id\n            isDefault\n            lastSuccess\n            paymentType\n            pluginId\n            state\n            updatedAt\n            metadata {\n              description\n              expiration\n              icon\n              identifier\n              issuer\n              kind\n            }\n          }\n        }\n      }\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\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 token = _a.token, apiHost = _a.apiHost;
+    var token = _a.token, apiHost = _a.apiHost, id = _a.id;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_b) {
@@ -19288,6 +19342,7 @@ var getFormattedQuote = function (_a) {
                         query: MUTATION$8(),
                         token: token,
                         apiHost: apiHost,
+                        vars: { id: id },
                     })];
                 case 1:
                     response = _b.sent();
@@ -19387,7 +19442,6 @@ var quoteAccept = function (_a) {
         });
     });
 };
-// export default quoteAccept;
 var useSendAcceptQuote = function (_a) {
     var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
     // Hooks
@@ -19605,14 +19659,14 @@ var PaymentHoldModal = function (_a) {
                         showSuccessNotification$2("Approved payment hold for ".concat(common.formatCurrency(quote.amount, quote.currency)));
                         queryClient.invalidateQueries({
                             queryKey: common.QueryKeyFactory.default.createQuoteKey({
-                                id: quote.id,
+                                id: quote.quote.id,
                                 token: token,
                             }),
                         });
                     } }) }))] })));
 };
 
-var Text$n = antd.Typography.Text;
+var Text$o = antd.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, _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;
@@ -19627,7 +19681,6 @@ function Quote(_a) {
             onQuoteLoaded: onQuoteLoaded,
         } }, { children: jsxRuntime.jsx(ActualQuote, {}) })));
 }
-// TODO: dissolve this hook
 var useQuotePaymentHold = function (formattedQuote) {
     var _a, _b;
     var _c = react.useState(false), paymentHoldModalVisible = _c[0], setPaymentHoldModalVisible = _c[1];
@@ -19654,7 +19707,7 @@ function ActualQuote() {
         queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost })];
+                    case 0: return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost, id: id })];
                     case 1: return [2 /*return*/, _a.sent()];
                 }
             });
@@ -19694,11 +19747,10 @@ function ActualQuote() {
     if ((firstInvoice === null || firstInvoice === void 0 ? void 0 : firstInvoice.state) === 'PAID' && paymentHoldCompleted) {
         return jsxRuntime.jsx(Invoice, { id: firstInvoice.id });
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.documentTemplateId) ? "/pdf/quote" : undefined }, { children: ((_d = (_c = formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.quote.documents.map(function (doc, index) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.documentTemplateId) ? "/pdf/quote" : undefined }, { children: ((_d = (_c = formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.quote.documents.map(function (doc, index) {
                                 return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
                             }) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept, isSendAcceptPending: isSendAcceptPending }), jsxRuntime.jsx(PaymentHoldModal, { visible: paymentHoldModalVisible, setVisible: setPaymentHoldModalVisible, quote: formattedQuote }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
-// TODO: clean up the logic here. Its quite confusing
 function QuoteButtons(_a) {
     var isAccepted = _a.isAccepted, formattedQuote = _a.formattedQuote, isMobile = _a.isMobile, hideDownloadButton = _a.hideDownloadButton, id = _a.id, isAccepting = _a.isAccepting, handleClickAccept = _a.handleClickAccept, setPaymentHoldModalVisible = _a.setPaymentHoldModalVisible, shouldDoPaymentHold = _a.shouldDoPaymentHold, paymentHoldCompleted = _a.paymentHoldCompleted, paymentHold = _a.paymentHold;
     var apiHost = react.useContext(BunnyContext).apiHost;
@@ -19709,7 +19761,7 @@ function QuoteButtons(_a) {
     var signingPlugins = useSigningPlugins({ apiHost: apiHost, token: token });
     return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
             color: entityBranding.secondaryColor,
-        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$n, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [paymentHold ? (jsxRuntime.jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired, onClick: function () { return setPaymentHoldModalVisible(true); }, type: "primary" }, { children: "Pay to accept" }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary" }, { children: isExpired
+        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$o, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [paymentHold ? (jsxRuntime.jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired, onClick: function () { return setPaymentHoldModalVisible(true); }, type: "primary" }, { children: "Pay to accept" }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary" }, { children: isExpired
                                 ? 'Quote is expired'
                                 : (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length)
                                     ? 'Start signing'
@@ -19809,10 +19861,10 @@ var getColor = function (state) {
     }
 };
 
-var Text$m = antd.Typography.Text;
+var Text$n = antd.Typography.Text;
 var TransactionDate = function (_a) {
     var date = _a.date;
-    return jsxRuntime.jsx(Text$m, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
+    return jsxRuntime.jsx(Text$n, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
 };
 
 var ArrowDownToLine = function (_a) {
@@ -19849,13 +19901,13 @@ var TransactionGridCell = defaultStyled.div.withConfig({
 }, common.SLATE_600);
 var templateObject_1$6;
 
-var Text$l = antd.Typography.Text;
+var Text$m = antd.Typography.Text;
 var TransactionsEmptyState = function () {
     var noTransactionsMessage = react.useContext(TransactionsListContext).noTransactionsMessage;
-    return (jsxRuntime.jsx(Text$l, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || 'There are no transactions' })));
+    return (jsxRuntime.jsx(Text$m, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || 'There are no transactions' })));
 };
 
-var Text$k = antd.Typography.Text;
+var Text$l = antd.Typography.Text;
 var isInvoice = function (transaction) {
     return transaction.kind === 'INVOICE';
 };
@@ -19864,7 +19916,7 @@ var TransactionRowTitle = function (_a) {
     if (!isInvoice(transaction)) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
-    return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: '11px' } }, { children: transaction.transactionable.number })));
+    return (jsxRuntime.jsx(Text$l, __assign({ className: "bunny-text-slate-400", style: { fontSize: '11px' } }, { children: transaction.transactionable.number })));
 };
 
 function transactionDateToDisplay(transaction, transactionDateType) {
@@ -19882,7 +19934,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
     }
 }
 
-var Text$j = antd.Typography.Text;
+var Text$k = antd.Typography.Text;
 var TransactionsListDesktop = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19911,11 +19963,11 @@ var TransactionsListDesktop = function (_a) {
                         !showState &&
                         !showAmount &&
                         !showDownload &&
-                        !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && jsxRuntime.jsx(TransactionGridCell, { right: false }), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$j, { children: common.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 && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$k, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$k, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$k, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && jsxRuntime.jsx(TransactionGridCell, { right: false }), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$k, { children: common.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$i = antd.Typography.Text;
+var Text$j = antd.Typography.Text;
 var TransactionsListMobile = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19938,11 +19990,11 @@ var TransactionsListMobile = function (_a) {
                     backgroundColor: index % 2 === 0
                         ? "var(--row-background".concat(darkMode ? '-dark' : '', ")")
                         : "var(--row-background-alternate".concat(darkMode ? '-dark' : '', ")"),
-                } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$i, { children: common.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
+                } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$j, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$j, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$j, { children: common.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
         }) }));
 };
 
-var Text$h = antd.Typography.Text;
+var Text$i = antd.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 ? [
@@ -19952,7 +20004,7 @@ function Transactions(_a) {
         common.TransactionKind.WRITE_OFF,
     ] : _j, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage, filterTransactions = _a.filterTransactions, _k = _a.sortTransactions, sortTransactions = _k === void 0 ? function (a, b) {
         return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-    } : _k, _l = _a.transactionDateType, transactionDateType = _l === void 0 ? 'createdAt' : _l;
+    } : _k, _l = _a.transactionDateType, transactionDateType = _l === void 0 ? 'createdAt' : _l, _m = _a.hidePaymentForm, hidePaymentForm = _m === void 0 ? false : _m;
     var contextValues = {
         showSearchBar: showSearchBar,
         showTitle: showTitle,
@@ -19972,24 +20024,25 @@ function Transactions(_a) {
         filterTransactions: filterTransactions,
         sortTransactions: sortTransactions,
         transactionDateType: transactionDateType,
+        hidePaymentForm: hidePaymentForm,
     };
     var apiHost = react.useContext(BunnyContext).apiHost;
     var token = useToken();
     // Local state
-    var _m = react.useState(''), search = _m[0], setSearch = _m[1];
-    var filterValue = filter || (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : '');
+    var _o = react.useState(''), search = _o[0], setSearch = _o[1];
+    var filterValue = filter || (search.length > 0 ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : '');
     // Queries
     var data = reactQuery.useQuery({
         queryKey: ['transactions', token, filterValue],
         queryFn: function () { return getTransactions(filterValue, apiHost, token); },
         placeholderData: reactQuery.keepPreviousData,
     }).data;
-    return (jsxRuntime.jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsxRuntime.jsx(TransactionsDisplay, { transactions: data || [], onSearchValueChanged: setSearch, search: search }) })));
+    return (jsxRuntime.jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsxRuntime.jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }) })));
 }
 function TransactionsDisplay(_a) {
     var _b, _c;
     var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search;
-    var _d = react.useContext(TransactionsListContext), showSearchBar = _d.showSearchBar, showTitle = _d.showTitle, title = _d.title, transactionComponent = _d.transactionComponent, useModal = _d.useModal, suppressTransactionDisplay = _d.suppressTransactionDisplay, className = _d.className, shadow = _d.shadow, searchBarClassName = _d.searchBarClassName, style = _d.style, onTransactionClick = _d.onTransactionClick, onTransactionDisplayClose = _d.onTransactionDisplayClose, kindsToShow = _d.kindsToShow, filterTransactions = _d.filterTransactions, sortTransactions = _d.sortTransactions;
+    var _d = react.useContext(TransactionsListContext), showSearchBar = _d.showSearchBar, showTitle = _d.showTitle, title = _d.title, transactionComponent = _d.transactionComponent, useModal = _d.useModal, suppressTransactionDisplay = _d.suppressTransactionDisplay, className = _d.className, shadow = _d.shadow, searchBarClassName = _d.searchBarClassName, style = _d.style, onTransactionClick = _d.onTransactionClick, onTransactionDisplayClose = _d.onTransactionDisplayClose, kindsToShow = _d.kindsToShow, filterTransactions = _d.filterTransactions, sortTransactions = _d.sortTransactions, hidePaymentForm = _d.hidePaymentForm;
     var columns = react.useContext(TransactionsListContext).columns;
     var darkMode = react.useContext(BunnyContext).darkMode;
     var secondaryColor = react.useContext(BrandContext).secondaryColor;
@@ -20053,18 +20106,18 @@ function TransactionsDisplay(_a) {
         onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
         setDrawerOpen(false);
     }
-    return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? 'bunny-overflow-hidden' : '', " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center', " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$h, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
+    return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? 'bunny-overflow-hidden' : '', " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center', " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$i, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
                             ), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? 'bunny-w-full' : '') }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName ? searchBarClassName : '', onChange: function (e) {
                                         if (isNaN(Number(e.target.value))) {
                                             return;
                                         }
                                         onSearchValueChanged(e.target.value);
-                                    }, prefix: !search && jsxRuntime.jsx(icons.SearchOutlined, {}), placeholder: "Search by id #", style: {
+                                    }, prefix: jsxRuntime.jsx(icons.SearchOutlined, {}), placeholder: "Search by id #", style: {
                                         minWidth: '300px',
                                     }, value: search }) })))] }))) : null, jsxRuntime.jsx("div", __assign({ className: "bunny-grid bunny-w-full bunny-rounded-md bunny-overflow-auto ".concat(shadow), style: {
                             gridTemplateColumns: gridTemplateColumns(),
                             backgroundColor: "var(--row-background".concat(darkMode ? '-dark' : '', ")"),
-                        } }, { children: isMobile ? (jsxRuntime.jsx(TransactionsListMobile, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) : (jsxRuntime.jsx(TransactionsListDesktop, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) }))] })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: drawerTitle(), open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || '' }) }))) : (jsxRuntime.jsx(antd.Drawer, __assign({ title: drawerTitle(), onClose: handleDisplayClose, open: drawerOpen, width: DISPLAY_WIDTH }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === 'INVOICE' ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxRuntime.jsxs(antd.Card, __assign({ className: "bunny-shadow-md" }, { children: [jsxRuntime.jsx(antd.Typography.Title, __assign({ level: 2, className: "bunny-mb-4" }, { children: "Transaction Details" })), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Amount:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: common.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || 'USD') })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Description:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Kind:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "State:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
+                        } }, { children: isMobile ? (jsxRuntime.jsx(TransactionsListMobile, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) : (jsxRuntime.jsx(TransactionsListDesktop, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) }))] })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: drawerTitle(), open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId, hidePaymentForm: hidePaymentForm }) }))) : (jsxRuntime.jsx(antd.Drawer, __assign({ title: drawerTitle(), onClose: handleDisplayClose, open: drawerOpen, width: DISPLAY_WIDTH }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === 'INVOICE' ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId, hidePaymentForm: hidePaymentForm })) : (jsxRuntime.jsxs(antd.Card, __assign({ className: "bunny-shadow-md" }, { children: [jsxRuntime.jsx(antd.Typography.Title, __assign({ level: 2, className: "bunny-mb-4" }, { children: "Transaction Details" })), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Amount:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: common.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || 'USD') })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Description:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Kind:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "State:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
 }
 
 function Quotes(_a) {
@@ -20283,21 +20336,22 @@ var getPriceList = function (_a) {
     });
 };
 
-var QUOTE_QUERY = function (id) { return "\n        query quote {\n            quote ".concat(id ? "(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                startDate\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                kind\n                quoteChanges {\n                    currencyId\n                    id\n                    kind\n                    charges {\n                        subtotal\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                        priceList {\n                          id\n                        }\n                        coupon {\n                          couponCode\n                        }\n                        quantity\n                        kind\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"); };
+var QUOTE_FIELDS = function (removeFormattedQuoteField) { return "\n  fragment QuoteFields on Quote {\n    accountId\n    amount\n    amountDue\n    smallUnitAmountDue\n    currencyId\n    ".concat(removeFormattedQuoteField ? '' : "formattedQuote { html }", "\n    id\n    payableId\n    periodAmount\n    subtotal\n    taxAmount\n    startDate\n    amountsByPeriod {\n      amount\n      startDate\n    }\n    kind\n    quoteChanges {\n      currencyId\n      id\n      kind\n      charges {\n        subtotal\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        priceList {\n          id\n        }\n        coupon {\n          couponCode\n        }\n        quantity\n        kind\n      }\n      priceList {\n        id\n        plan {\n            name\n        }\n        product {\n            name\n        }\n      }\n    }\n  }\n"); };
+var QUOTE_QUERY = function (id, removeFormattedQuoteField) { return "\n".concat(QUOTE_FIELDS(removeFormattedQuoteField), "\n  query quote {\n      quote ").concat(id ? "(id: ".concat(id, ")") : '', " {\n          ...QuoteFields\n      }\n  }"); };
 var getQuote = function (_a) {
-    var id = _a.id, token = _a.token, apiHost = _a.apiHost;
+    var id = _a.id, token = _a.token, apiHost = _a.apiHost, _b = _a.removeFormattedQuoteField, removeFormattedQuoteField = _b === void 0 ? false : _b;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: QUOTE_QUERY(id),
+                        query: QUOTE_QUERY(id, removeFormattedQuoteField),
                         token: token,
                         vars: {},
                         apiHost: apiHost,
                     })];
                 case 1:
-                    response = _b.sent();
+                    response = _c.sent();
                     return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
             }
         });
@@ -20379,7 +20433,7 @@ var getCoupons = function (_a) {
     });
 };
 
-var showErrorNotification$1 = common.useErrorNotification();
+var showErrorNotification$3 = common.useErrorNotification();
 var useUpdateCoupons = function (_a) {
     var apiHost = _a.apiHost, token = _a.token, quoteChangeId = _a.quoteChangeId, onCouponAdded = _a.onCouponAdded, onCouponRemoved = _a.onCouponRemoved;
     var coupons = reactQuery.useQuery({
@@ -20406,7 +20460,7 @@ var useUpdateCoupons = function (_a) {
         },
         onError: function (error) {
             var _a, _b;
-            showErrorNotification$1((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
+            showErrorNotification$3((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
         },
     }), addCoupon = _b.mutate, isAddingCoupon = _b.isPending;
     var _c = reactQuery.useMutation({
@@ -20426,7 +20480,7 @@ var useUpdateCoupons = function (_a) {
         },
         onError: function (error) {
             var _a, _b;
-            showErrorNotification$1((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error removing coupon');
+            showErrorNotification$3((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error removing coupon');
         },
     }), removeCoupon = _c.mutate, isRemovingCoupon = _c.isPending;
     return {
@@ -20438,83 +20492,29 @@ var useUpdateCoupons = function (_a) {
     };
 };
 
-var CURRENT_USER_DATA_QUERY = "{\n    company {\n      name\n    }\n    currentUser {\n      account {\n        billingCountry\n        currencyId\n      }\n      authObjectName\n      payload {\n        returnUrl\n      }\n      privacyUrl\n      termsUrl\n      entityId\n    }\n  }";
-var getCurrentUserData = function (_a) {
-    var token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b, _c, _d, _e, _f, _g, _h, _j;
-        return __generator(this, function (_k) {
-            switch (_k.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
-                        query: CURRENT_USER_DATA_QUERY,
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _k.sent();
-                    return [2 /*return*/, {
-                            authObjectName: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.authObjectName,
-                            account: (_c = response === null || response === void 0 ? void 0 : response.currentUser) === null || _c === void 0 ? void 0 : _c.account,
-                            companyName: (_d = response === null || response === void 0 ? void 0 : response.company) === null || _d === void 0 ? void 0 : _d.name,
-                            returnUrl: (_f = (_e = response === null || response === void 0 ? void 0 : response.currentUser) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.returnUrl,
-                            privacyUrl: (_g = response === null || response === void 0 ? void 0 : response.currentUser) === null || _g === void 0 ? void 0 : _g.privacyUrl,
-                            termsUrl: (_h = response === null || response === void 0 ? void 0 : response.currentUser) === null || _h === void 0 ? void 0 : _h.termsUrl,
-                            entityId: (_j = response === null || response === void 0 ? void 0 : response.currentUser) === null || _j === void 0 ? void 0 : _j.entityId,
-                        }];
-            }
-        });
-    });
-};
-
-var useCurrentUserData = function (token) {
-    var apiHost = react.useContext(BunnyContext).apiHost;
-    var currentUserData = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.currentUserKey(token),
-        queryFn: function () { return getCurrentUserData({ token: token, apiHost: apiHost }); },
-        enabled: Boolean(token),
-    }).data;
-    return currentUserData || {};
-};
-
 var BunnyFooterIcon = function (_a) {
     var color = _a.color;
     return (jsxRuntime.jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
 };
 
-var Text$g = antd.Typography.Text;
+var Text$h = antd.Typography.Text;
 var Footer = function (_a) {
     var className = _a.className;
     var token = useToken();
-    var _b = useCurrentUserData(token), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
+    var currentUser = useCurrentUserData(token).currentUser;
+    var privacyUrl = currentUser.privacyUrl, termsUrl = currentUser.termsUrl;
     var isMobile = common.useIsMobile();
     return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ".concat(isMobile ? 'bunny-flex-col bunny-gap-2' : '', " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
 };
 var BunnyMarketingLink = function () {
     var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
     var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsxRuntime.jsx(Text$g, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsxRuntime.jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsxRuntime.jsx(Text$h, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsxRuntime.jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
 };
 var StyedLink = styled__default["default"].a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  text-decoration: none;\n"], ["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  text-decoration: none;\n"])), common.SLATE_400, common.SLATE_500);
 var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), common.PRIMARY_COLOR);
 var templateObject_1$5, templateObject_2$1;
 
-function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
-    var _a;
-    var upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
-    function upgradingFromFree() {
-        var totalPrice = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges.reduce(function (acc, charge) { return acc + Number((charge === null || charge === void 0 ? void 0 : charge.discountedPrice) || 0); }, 0);
-        return totalPrice === 0;
-    }
-    if (quote.kind === common.QuoteChangeKind.SUBSCRIBE) {
-        return activeCouponsExist;
-    }
-    else if (quote.kind === common.QuoteChangeKind.ADJUSTMENT) {
-        return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
-    }
-    return false;
-}
-
 function CouponEditor(_a) {
     var className = _a.className, onAddCoupon = _a.onAddCoupon, isAddingCoupon = _a.isAddingCoupon, couponCode = _a.couponCode, setCouponCode = _a.setCouponCode;
     function handleAddCoupon() {
@@ -20528,17 +20528,14 @@ function CouponEditor(_a) {
     return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(className) }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2" }, { children: [jsxRuntime.jsx(antd.Input, { value: couponCode, onChange: function (e) { return setCouponCode(e.target.value); }, placeholder: "Coupon code", disabled: isAddingCoupon, size: "small" }), jsxRuntime.jsx(antd.Button, __assign({ loading: isAddingCoupon, type: "primary", onClick: handleAddCoupon, disabled: couponCode.length === 0 }, { children: "Apply" }))] })) })));
 }
 
-var SubscriptionsContext = react.createContext({});
-
-var Text$f = antd.Typography.Text;
+var Text$g = antd.Typography.Text;
 function CheckoutSummary(_a) {
     var quote = _a.quote, className = _a.className, onAddCoupon = _a.onAddCoupon, onRemoveCoupon = _a.onRemoveCoupon, isRemovingCoupon = _a.isRemovingCoupon, priceListData = _a.priceListData, isAddingCoupon = _a.isAddingCoupon, couponCode = _a.couponCode, setCouponCode = _a.setCouponCode, activeCouponsExist = _a.activeCouponsExist;
-    var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
-    return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxRuntime.jsxs(Text$f, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-text-lg bunny-font-medium bunny-mb-4" }, { children: ["Checkout summary - ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.product.name, " ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.name] })), jsxRuntime.jsx("div", __assign({ className: "bunny-space-y-4" }, { children: quote === null || quote === void 0 ? void 0 : quote.quoteChanges.map(function (quoteChange) {
+    return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxRuntime.jsxs(Text$g, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-text-lg bunny-font-medium bunny-mb-4" }, { children: ["Checkout summary - ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.product.name, " ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.name] })), jsxRuntime.jsx("div", __assign({ className: "bunny-space-y-4" }, { children: quote === null || quote === void 0 ? void 0 : quote.quoteChanges.map(function (quoteChange) {
                             return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
                                 var _a;
                                 var multiplier = charge.kind === 'COUPON' ? -1 : 1;
-                                return (jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-grid-cols-3 bunny-gap-4 bunny-items-center" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1" }, { children: charge.name })), jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-center" }, { children: ((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode) ? (jsxRuntime.jsx("div", __assign({ onClick: function () {
+                                return (jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-grid-cols-3 bunny-gap-4 bunny-items-center" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1" }, { children: charge.name })), jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-center" }, { children: ((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode) ? (jsxRuntime.jsx("button", __assign({ onClick: function () {
                                                     var _a, _b;
                                                     if (isRemovingCoupon) {
                                                         return;
@@ -20547,10 +20544,9 @@ function CheckoutSummary(_a) {
                                                         throw new Error('Coupon code not found');
                                                     }
                                                     onRemoveCoupon((_b = charge.coupon) === null || _b === void 0 ? void 0 : _b.couponCode);
-                                                }, className: "bunny-text-orange-500 hover:bunny-text-orange-400 bunny-cursor-pointer" }, { children: "Remove" }))) : (jsxRuntime.jsx("div", { children: charge.quantity })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-right" }, { children: common.formatCurrency(multiplier * (charge.subtotal || 0), charge.currencyId) }))] }), charge.id));
+                                                }, className: "bunny-text-orange-500 hover:bunny-text-orange-400 bunny-cursor-pointer bunny-bg-transparent bunny-border-none" }, { children: "Remove" }))) : (jsxRuntime.jsx("div", { children: charge.quantity })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-right" }, { children: common.formatCurrency(multiplier * (charge.subtotal || 0), charge.currencyId) }))] }), charge.id));
                             });
-                        }) })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Subtotal" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.subtotal, quote.currencyId) })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Taxes" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Total" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.amountDue, quote.currencyId) })] }))] }), upgradingSubscription &&
-                shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsxRuntime.jsx(CouponEditor, { className: "bunny-w-full", quote: quote, onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] })));
+                        }) })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Subtotal" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.subtotal, quote.currencyId) })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Taxes" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Total" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.amountDue, quote.currencyId) })] }))] }), activeCouponsExist && (jsxRuntime.jsx(CouponEditor, { className: "bunny-w-full", quote: quote, onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] })));
 }
 var CheckoutSummaryDivider = function () {
     return (jsxRuntime.jsx("div", __assign({ className: "bunny-my-2" }, { children: jsxRuntime.jsx(antd.Divider, { className: "m-0" }) })));
@@ -20589,28 +20585,28 @@ function InitialSignupForm(_a) {
     return (jsxRuntime.jsx(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-h-full bunny-w-full ".concat(className), form: form, layout: "vertical", autoComplete: "off" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: 'First name is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: 'Last name is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name" }) }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ name: "email", rules: [
                                 { required: true, message: 'Email is required' },
                                 { type: 'email', message: 'Please enter a valid email' },
-                            ], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Company name is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: jsxRuntime.jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsxRuntime.jsx(antd.Select, { className: "bunny-w-full", options: common.Lists.COUNTRY_LIST, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
+                            ], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Company name is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: jsxRuntime.jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsxRuntime.jsx(antd.Select, { options: common.Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
                                     var _a, _b;
                                     return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
                                         ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
                                 } }) })) })) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full" }, { children: "Proceed to payment" })) })] })) })));
 }
 
-var Title = antd.Typography.Title, Text$e = antd.Typography.Text;
+var Title = antd.Typography.Title, Text$f = antd.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 (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$f, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
 }
 
-var Text$d = antd.Typography.Text;
+var Text$e = antd.Typography.Text;
 function PriceListDisplay(_a) {
     var priceListData = _a.priceListData;
     if (!priceListData)
         return null;
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(Text$d, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxRuntime.jsxs(Text$d, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " / month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$d, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$d, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " / month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
 }
 
-var showErrorNotification = common.useErrorNotification();
+var showErrorNotification$2 = common.useErrorNotification();
 var showSuccessNotification$1 = common.useSuccessNotification();
 function Signup(_a) {
     var _b, _c, _d;
@@ -20620,6 +20616,14 @@ function Signup(_a) {
     var tokenFromContexts = useToken();
     var isMobile = common.useIsMobile();
     var topNavImageUrl = react.useContext(BrandContext).topNavImageUrl;
+    var defaultValues = react.useMemo(function () { return ({
+        firstName: defaultFirstName,
+        lastName: defaultLastName,
+        email: defaultEmail,
+        accountName: defaultCompanyName,
+        billingCountry: defaultBillingCountry,
+    }); }, [defaultFirstName, defaultLastName, defaultEmail, defaultCompanyName, defaultBillingCountry]);
+    var queryClient = reactQuery.useQueryClient();
     var _f = react.useState(undefined), initialQuote = _f[0], setInitialQuote = _f[1];
     var _g = react.useState(undefined), accountId = _g[0], setAccountId = _g[1];
     var _h = react.useState(undefined), portalSessionToken = _h[0], setPortalSessionToken = _h[1];
@@ -20631,8 +20635,8 @@ function Signup(_a) {
         accountId: accountId,
         token: token,
         apiHost: apiHost,
+        enabled: Boolean(accountId),
     }).defaultPaymentMethod;
-    var queryClient = reactQuery.useQueryClient();
     var recalculateTaxes = reactQuery.useMutation({
         mutationFn: function () {
             if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
@@ -20642,7 +20646,7 @@ function Signup(_a) {
         },
         onError: function (error) {
             if (!error[0].message.includes('Ensure that you have a taxation plugin')) {
-                showErrorNotification(error.message);
+                showErrorNotification$2(error.message);
             }
         },
         onSuccess: function (quote) {
@@ -20678,10 +20682,10 @@ function Signup(_a) {
         onSuccess: function (data) {
             setAccountId(data.account.id);
             setPortalSessionToken(data.portalSessionToken);
-            // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
+            // We must invalidate the accountPaymentMethodsKey query in order to clear payment methods from the provided api token,
             // to instead use paymentMethods from portalSessionToken.
             queryClient.invalidateQueries({
-                queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
+                queryKey: common.QueryKeyFactory.default.accountPaymentMethodsKey({
                     accountId: accountId,
                     token: token,
                 }),
@@ -20691,10 +20695,10 @@ function Signup(_a) {
         onError: function (error) {
             var errorMessage = error.response.errors[0].message;
             if (errorMessage.includes("Address couldn't be validated")) {
-                showErrorNotification('Please enter a valid billing address');
+                showErrorNotification$2('Please enter a valid billing address');
             }
             else {
-                showErrorNotification(errorMessage);
+                showErrorNotification$2(errorMessage);
             }
         },
     }), quoteAccountSignupMutate = _l.mutate, isSigningUp = _l.isPending;
@@ -20791,7 +20795,7 @@ function Signup(_a) {
     }
     function handlePaymentFail(error) {
         var _a;
-        showErrorNotification((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.message);
+        showErrorNotification$2((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.message);
     }
     react.useEffect(function () {
         if (initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id) {
@@ -20803,28 +20807,42 @@ function Signup(_a) {
     }
     return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col' : 'bunny-flex-row', " bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ").concat(shadow, " ").concat(className), style: style }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full', " bunny-justify-center") }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24" }, { children: [jsxRuntime.jsx("div", { children: topNavImageUrl.length > 0 && (jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false })) }), data ? (jsxRuntime.jsx(CheckoutSummary, { quote: data, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, onRemoveCoupon: removeCoupon, isRemovingCoupon: isRemovingCoupon, priceListData: priceListData, isAddingCoupon: isAddingCoupon, couponCode: couponEditorCouponCode, setCouponCode: setCouponEditorCouponCode, activeCouponsExist: activeCouponsExist })) : (jsxRuntime.jsx("div", __assign({ className: "bunny-h-full" }, { children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true })) : (jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData })) }))), jsxRuntime.jsx(Footer, {})] })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full', " bunny-items-center"), style: {
                     boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
-                } }, { children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true, className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" })) : (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: {
-                            firstName: defaultFirstName,
-                            lastName: defaultLastName,
-                            email: defaultEmail,
-                            accountName: defaultCompanyName,
-                            billingCountry: defaultBillingCountry,
-                        } }) }))) }))] })));
+                } }, { children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true, className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" })) : (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: defaultValues }) }))) }))] })));
 }
 
-var useQuoteSubscriptionUpgrade = function () {
-    var graphQLRequest = useGraphQLRequest();
-    return function (subscriptionId, priceListId, apiHost, token) { 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 QuoteSubscriptionUpgrade($subscriptionId: ID!, $priceListId: ID!) {\n          quoteSubscriptionUpgrade(\n            subscriptionId: $subscriptionId\n            priceListId: $priceListId\n          ) {\n            quote {\n              id\n            }\n          }\n        }\n      ", apiHost, token, { subscriptionId: subscriptionId, priceListId: priceListId })];
+var SubscriptionsContext = react.createContext({});
+
+var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        addonSubscriptions {\n          id\n          plan { id }\n        }\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList {\n          id\n          periodMonths\n          name\n          plan {\n            id\n            addon\n            addonPlans { id }\n          }\n        }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        account { id }\n        daysLeftInTrial\n        trialExpirationAction\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\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, 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,
+                        apiHost: apiHost,
+                    })];
                 case 1:
-                    data = _a.sent();
-                    return [2 /*return*/, data];
+                    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: common.sortSubscriptionCharges(subscription.charges) })); });
+                    return [2 /*return*/, combinedSubscriptions];
             }
         });
-    }); };
+    });
+};
+
+var quoteSubscriptionUpgrade = function (_a) {
+    var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId, apiHost = _a.apiHost, token = _a.token;
+    return gqlRequest({
+        query: "mutation QuoteSubscriptionUpgrade($subscriptionId: ID!, $priceListId: ID!) {\n      quoteSubscriptionUpgrade(\n        subscriptionId: $subscriptionId\n        priceListId: $priceListId\n      ) {\n        quote {\n          id\n        }\n      }\n    }",
+        vars: { subscriptionId: subscriptionId, priceListId: priceListId },
+        apiHost: apiHost,
+        token: token,
+    });
 };
 var useCreateSubscriptionQuote = function () {
     var graphQLRequest = useGraphQLRequest();
@@ -20856,96 +20874,510 @@ var useQuoteChangeUpdate = function () {
         });
     }); };
 };
-var useQuoteDelete = function () {
-    var graphQLRequest = useGraphQLRequest();
-    return function (quoteId, 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*/, graphQLRequest("mutation QuoteDelete($id: ID!) {\n        quoteDelete(id: $id) {\n          errors\n        }\n      }", apiHost, token, { id: quoteId })];
-                case 1:
-                    response = _a.sent();
-                    return [2 /*return*/, response];
-            }
-        });
-    }); };
-};
-var useQuoteSubscriptionActivate = function () {
-    var graphQLRequest = useGraphQLRequest();
-    return function (subscriptionId, 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*/, graphQLRequest("mutation QuoteSubscriptionActivate($subscriptionId: ID!) {\n        quoteSubscriptionActivate(subscriptionId: $subscriptionId) {\n          quote {\n            id\n          }\n        }\n      }", apiHost, token, { subscriptionId: subscriptionId })];
-                case 1:
-                    response = _a.sent();
-                    return [2 /*return*/, response];
-            }
-        });
-    }); };
-};
-
-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        daysLeftInTrial\n        trialExpirationAction\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\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, 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,
-                        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: common.sortSubscriptionCharges(subscription.charges) })); });
-                    return [2 /*return*/, combinedSubscriptions];
-            }
-        });
-    });
-};
-
-var pageWrapperClassName = function (isMobile) {
-    return "flex flex-col grow pt-4 ".concat(isMobile ? 'pb-4 overflow-hidden' : 'pb-8', " ").concat('content-container');
-};
-
-var MUTATION$2 = "{\n  currentUser {\n    taxationRequiredAccountFields\n  }\n}";
-var getTaxationRequiredAccountFields = function (_a) {
-    var apiHost = _a.apiHost, token = _a.token;
-    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 quoteSubscriptionAddon = function (_a) {
+    var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId, apiHost = _a.apiHost, token = _a.token;
+    return gqlRequest({
+        query: "mutation QuoteSubscriptionAddon($subscriptionId: ID!, $priceListId: ID) {\n      quoteSubscriptionAddon(subscriptionId: $subscriptionId, priceListId: $priceListId) {\n        errors\n        quote {\n          id\n        }\n      }\n    }",
+        vars: {
+            subscriptionId: subscriptionId,
+            priceListId: priceListId,
+        },
+        apiHost: apiHost,
+        token: token,
     });
 };
-
-var useHasTaxPlugin = function (_a) {
-    var apiHost = _a.apiHost, token = _a.token;
-    var plugins = usePlugins({
+var quoteSubscriptionActivate = function (_a) {
+    var subscriptionId = _a.subscriptionId, apiHost = _a.apiHost, token = _a.token;
+    return gqlRequest({
+        query: "mutation QuoteSubscriptionActivate($subscriptionId: ID!) {\n      quoteSubscriptionActivate(subscriptionId: $subscriptionId) {\n        quote {\n          id\n        }\n      }\n    }",
+        vars: {
+            subscriptionId: subscriptionId,
+        },
         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 useQuoteCreate = function (_a) {
+    var upgradingSubscription = _a.upgradingSubscription, selectedPriceList = _a.selectedPriceList, token = _a.token;
+    // Context
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    // Local state
+    var _b = react.useState(), quoteId = _b[0], setQuoteId = _b[1];
+    // Queries
+    var quote = reactQuery.useQuery({
+        queryKey: common.QueryKeyFactory.default.createObjectKey({
+            objectName: 'editingQuote',
+            id: quoteId,
+            token: token,
+        }),
+        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
+            var quote;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!quoteId) {
+                            throw new Error('editingQuote is undefined');
+                        }
+                        return [4 /*yield*/, getQuote({
+                                id: quoteId,
+                                token: token,
+                                apiHost: apiHost,
+                                removeFormattedQuoteField: false,
+                            })];
+                    case 1:
+                        quote = _a.sent();
+                        return [2 /*return*/, quote];
+                }
+            });
+        }); },
+        enabled: Boolean(quoteId),
+    }).data;
+    var _c = reactQuery.useMutation({
+        mutationFn: function (_a) {
+            var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
+            return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, quoteSubscriptionUpgrade({ subscriptionId: subscriptionId, priceListId: priceListId, apiHost: apiHost, token: token })];
+                        case 1: return [2 /*return*/, _b.sent()];
+                    }
+                });
+            });
+        },
+        onSuccess: function (subscriptionUpdateData) {
+            var _a;
+            var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
+            setQuoteId(quote.id);
+        },
+    }), createQuote = _c.mutate, isCreatingQuote = _c.isPending;
+    var _d = reactQuery.useMutation({
+        mutationFn: function (_a) {
+            var subscriptionId = _a.subscriptionId;
+            return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, quoteSubscriptionAddon({ subscriptionId: subscriptionId, apiHost: apiHost, token: token })];
+                        case 1: return [2 /*return*/, _b.sent()];
+                    }
+                });
+            });
+        },
+        onSuccess: function (subscriptionAddonUpdateData) {
+            var _a;
+            var quote = (_a = subscriptionAddonUpdateData === null || subscriptionAddonUpdateData === void 0 ? void 0 : subscriptionAddonUpdateData.quoteSubscriptionAddon) === null || _a === void 0 ? void 0 : _a.quote;
+            setQuoteId(quote.id);
+        },
+    }), createEmptyQuote = _d.mutate, isCreatingEmptyQuote = _d.isPending;
+    var subscriptionActivate = reactQuery.useMutation({
+        mutationFn: quoteSubscriptionActivate,
+        onSuccess: function (response) {
+            var _a;
+            var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionActivate) === null || _a === void 0 ? void 0 : _a.quote;
+            setQuoteId(quote.id);
+        },
+    }).mutate;
+    react.useEffect(function () {
+        var _a;
+        if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
+            return;
+        }
+        if (!(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
+            return;
+        }
+        var buyingAddonsForCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
+        var isActivatingTrialSubscription = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL &&
+            upgradingSubscription.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
+        if (isActivatingTrialSubscription) {
+            subscriptionActivate({
+                subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+                apiHost: apiHost,
+                token: token,
+            });
+        }
+        else if (buyingAddonsForCurrentSubscription) {
+            createEmptyQuote({
+                subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+            });
+        }
+        else {
+            createQuote({
+                subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+                priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
+            });
+        }
+    }, [selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id]);
+    return { quote: quote, isQuotePending: isCreatingQuote || isCreatingEmptyQuote };
+};
+
+var calculateNewQuantity = function (priceListCharge, currentQuantity) {
+    if (currentQuantity === void 0) { currentQuantity = 1; }
+    var quantityMax = (priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMax) || Number.POSITIVE_INFINITY;
+    var quantityMin = (priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMin) || Number.NEGATIVE_INFINITY;
+    var selfServiceQuantity = priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.selfServiceQuantity;
+    if (selfServiceQuantity) {
+        return lodashExports.clamp(currentQuantity, quantityMin, quantityMax);
+    }
+    // If self service quantity is disabled, return the min quantity
+    return quantityMin;
+};
+
+var QUOTE_CHARGE_UPDATE = "\n".concat(QUOTE_FIELDS(), "\n  mutation QuoteChargeUpdate (\n    $discount: Float,\n    $endDate: ISO8601Date,\n    $name: String,\n    $price: Float,\n    $quantity: Int,\n    $quoteChargeId: ID!\n    $startDate: ISO8601Date\n    $subtotal: Float,\n  ) {\n    quoteChargeUpdate(\n      discount: $discount\n      endDate: $endDate\n      name: $name\n      price: $price\n      quantity: $quantity\n      quoteChargeId: $quoteChargeId\n      startDate: $startDate\n      subtotal: $subtotal\n    ) {\n      quoteCharge {\n        quoteChange {\n          id\n          quoteId\n          quote {\n            ...QuoteFields\n          }\n        }\n        id\n      }\n    }\n  }\n");
+var quoteChargeUpdate = function (_a) {
+    var discount = _a.discount, name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
+    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: QUOTE_CHARGE_UPDATE,
+                        vars: {
+                            subtotal: subtotal,
+                            discount: discount,
+                            name: name,
+                            price: price,
+                            quantity: quantity,
+                            quoteChargeId: quoteChargeId,
+                            startDate: startDate,
+                        },
+                        apiHost: apiHost,
+                        token: token,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    if (response.errors) {
+                        throw new Error(response.errors[0].message);
+                    }
+                    return [2 /*return*/, response.quoteChargeUpdate.quoteCharge];
+            }
+        });
+    });
+};
+
+function canEditChargeQuantity(charge) {
+    if (charge.chargeType === common.ChargeType.USAGE)
+        return false;
+    if (charge.pricingModel === common.PricingModel.FLAT)
+        return false;
+    return true;
+}
+
+// Functionality:
+// 1: keep track of quantities set for features based on feature.id
+//    a. copy those quantities over to charges with same feature when initializing
+//        ie: if set 5 for Users in Starter, then switching to Pro with Users, keep 5
+// 2. set initial quantities for features using the first feature quantity found
+// Limitations:
+// - When switching between price lists that share features (e.g. both have Users),
+//   quantities will be adjusted to meet the new min/max requirements of the new price list.
+//   The original quantity is not preserved when switching back to the previous price list.
+var showErrorNotification$1 = common.useErrorNotification();
+var useQuoteQuantities = function (_a) {
+    var selectedPriceList = _a.selectedPriceList, quote = _a.quote;
+    var queryClient = reactQuery.useQueryClient();
+    var token = useToken();
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var _b = useFeatureQuantities(), getFeatureQuantity = _b.getFeatureQuantity, setFeatureQuantity = _b.setFeatureQuantity;
+    var _c = reactQuery.useMutation({
+        mutationFn: function (_a) {
+            var quoteChargeId = _a.quoteChargeId, quantity = _a.quantity, apiHost = _a.apiHost, token = _a.token;
+            return __awaiter(void 0, void 0, void 0, function () {
+                var quoteCharge;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, quoteChargeUpdate({
+                                quoteChargeId: quoteChargeId,
+                                quantity: quantity,
+                                apiHost: apiHost,
+                                token: token,
+                            })];
+                        case 1:
+                            quoteCharge = _b.sent();
+                            return [2 /*return*/, { quoteCharge: quoteCharge }];
+                    }
+                });
+            });
+        },
+        onSuccess: function (_a) {
+            var quoteCharge = _a.quoteCharge;
+            queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
+                objectName: 'editingQuote',
+                id: quote === null || quote === void 0 ? void 0 : quote.id,
+                token: token,
+            }), quoteCharge.quoteChange.quote);
+        },
+    }), updateCharge = _c.mutate, isUpdatingCharge = _c.isPending;
+    var handleUpdateQuantity = react.useCallback(function (quantity, priceListChargeId, quote) {
+        var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
+        var quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) {
+            var _a;
+            return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListChargeId;
+        });
+        if (!token) {
+            showErrorNotification$1('Token is undefined in onUpdateQuantity');
+            return;
+        }
+        if (!quoteCharge) {
+            showErrorNotification$1('Quote charge not found');
+            return;
+        }
+        updateCharge({
+            quoteChargeId: quoteCharge.id,
+            quantity: quantity,
+            apiHost: apiHost,
+            token: token,
+        });
+    }, [apiHost, token, updateCharge, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quote === null || quote === void 0 ? void 0 : quote.id]);
+    // Helper function to get quantity from quote for a specific charge
+    var getQuantityFromQuote = function (chargeId) {
+        var _a, _b;
+        if (!quote || !selectedPriceList)
+            return undefined;
+        return (_b = (_a = quote.quoteChanges
+            .find(function (qc) { return qc.priceList.id === selectedPriceList.id; })) === null || _a === void 0 ? void 0 : _a.charges.find(function (c) { return c.priceListCharge.id === chargeId; })) === null || _b === void 0 ? void 0 : _b.quantity;
+    };
+    // Helper function to process a single charge
+    var processCharge = function (charge) {
+        var _a;
+        if (!((_a = charge === null || charge === void 0 ? void 0 : charge.feature) === null || _a === void 0 ? void 0 : _a.id)) {
+            showErrorNotification$1('Charge or feature is undefined', 'Client Error');
+            return;
+        }
+        var storedQuantity = getFeatureQuantity(charge.feature.id);
+        // Determine the quantity to use
+        if (storedQuantity !== undefined) {
+            // Store this quantity for this feature to ensure it's tracked
+            setFeatureQuantity(charge.feature.id, storedQuantity);
+            return storedQuantity;
+        }
+        else {
+            var finalQuantity = calculateNewQuantity(charge, storedQuantity);
+            setFeatureQuantity(charge.feature.id, finalQuantity);
+            return finalQuantity;
+        }
+    };
+    function handleChangeQuantity(priceListChargeId, quantity) {
+        var _a;
+        var charge = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.find(function (charge) { return charge.id === priceListChargeId; });
+        var featureId = (_a = charge === null || charge === void 0 ? void 0 : charge.feature) === null || _a === void 0 ? void 0 : _a.id;
+        if (!featureId) {
+            showErrorNotification$1('featureId not found');
+            return;
+        }
+        if (!quote) {
+            showErrorNotification$1('quote not found');
+            return;
+        }
+        setFeatureQuantity(featureId, quantity);
+        handleUpdateQuantity(quantity, priceListChargeId, quote);
+    }
+    // Initialize quantities when price list changes
+    react.useEffect(function () {
+        if (!selectedPriceList)
+            return;
+        selectedPriceList.charges.forEach(function (charge) {
+            if (canEditChargeQuantity(charge)) {
+                processCharge(charge);
+            }
+        });
+    }, [selectedPriceList]);
+    // Update quantities when quote changes if local and quote quantities don't match
+    react.useEffect(function () {
+        if (!quote || !selectedPriceList)
+            return;
+        selectedPriceList.charges.forEach(function (charge) {
+            if (!canEditChargeQuantity(charge))
+                return;
+            var finalQuantity = processCharge(charge);
+            var quantityOnQuote = getQuantityFromQuote(charge.id);
+            // Update quote if needed
+            if (finalQuantity && quantityOnQuote && finalQuantity !== quantityOnQuote) {
+                handleUpdateQuantity(finalQuantity, charge.id, quote);
+            }
+        });
+    }, [quote === null || quote === void 0 ? void 0 : quote.id]);
+    return {
+        onChangeQuantity: handleChangeQuantity,
+        getFeatureQuantity: getFeatureQuantity,
+        isUpdatingCharges: isUpdatingCharge, // Might be multiple charges updating at once
+    };
+};
+var useFeatureQuantities = function () {
+    var _a = react.useState({}), featureQuantities = _a[0], setFeatureQuantities = _a[1];
+    var getFeatureQuantity = function (featureId) {
+        return featureQuantities[featureId];
+    };
+    var setFeatureQuantity = function (featureId, quantity) {
+        setFeatureQuantities(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[featureId] = quantity, _a)));
+        });
+    };
+    return {
+        getFeatureQuantity: getFeatureQuantity,
+        setFeatureQuantity: setFeatureQuantity,
+    };
+};
+
+var QuoteContext = react.createContext({});
+function useFeatureAddonsPending() {
+    var _a = react.useState([]), featureAddonsLoading = _a[0], setFeatureAddonsLoading = _a[1];
+    var addFeatureAddonLoading = function (featureAddonId) {
+        setFeatureAddonsLoading(__spreadArray(__spreadArray([], featureAddonsLoading, true), [featureAddonId], false));
+    };
+    var removeFeatureAddonLoading = function (featureAddonId) {
+        setFeatureAddonsLoading(featureAddonsLoading.filter(function (id) { return id !== featureAddonId; }));
+    };
+    return {
+        isFeatureAddonsLoading: featureAddonsLoading.length > 0,
+        addFeatureAddonLoading: addFeatureAddonLoading,
+        removeFeatureAddonLoading: removeFeatureAddonLoading,
+    };
+}
+function QuoteProvider(_a) {
+    var children = _a.children;
+    // Contexts
+    var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
+    // Local state
+    var _b = react.useState(), selectedPriceList = _b[0], setSelectedPriceList = _b[1];
+    var _c = react.useState(false), isAddonPlanLoading = _c[0], setIsAddonPlanLoading = _c[1];
+    // Hooks
+    var token = useToken();
+    var _d = useFeatureAddonsPending(), isFeatureAddonsLoading = _d.isFeatureAddonsLoading, addFeatureAddonLoading = _d.addFeatureAddonLoading, removeFeatureAddonLoading = _d.removeFeatureAddonLoading;
+    var _e = useQuoteCreate({
+        upgradingSubscription: upgradingSubscription,
+        selectedPriceList: selectedPriceList,
+        token: token,
+    }), quote = _e.quote, isQuotePending = _e.isQuotePending;
+    var _f = useQuoteQuantities({
+        selectedPriceList: selectedPriceList,
+        quote: quote,
+    }), onChangeQuantity = _f.onChangeQuantity, getFeatureQuantity = _f.getFeatureQuantity, isUpdatingCharges = _f.isUpdatingCharges;
+    // Handlers
+    function handleClearQuote() {
+        setSelectedPriceList(undefined);
+    }
+    function handleChangeSelectedPriceList(priceList) {
+        setSelectedPriceList(priceList);
+    }
+    // Important that we keep track of all changes taking place so we can recalculate taxes after all changes are complete
+    var isUpdatingQuote = isUpdatingCharges || isAddonPlanLoading || isFeatureAddonsLoading;
+    return (jsxRuntime.jsx(QuoteContext.Provider, __assign({ value: {
+            quote: quote,
+            selectedPriceList: selectedPriceList,
+            isQuotePending: isQuotePending,
+            isUpdatingQuote: isUpdatingQuote,
+            // Plan add-ons pending
+            isAddonPlanLoading: isAddonPlanLoading,
+            setIsAddonPlanLoading: setIsAddonPlanLoading,
+            // Feature add-ons pending
+            isFeatureAddonsLoading: isFeatureAddonsLoading,
+            addFeatureAddonLoading: addFeatureAddonLoading,
+            removeFeatureAddonLoading: removeFeatureAddonLoading,
+            onClearQuote: handleClearQuote,
+            onChangeSelectedPriceList: handleChangeSelectedPriceList,
+            onChangeQuantity: onChangeQuantity,
+            getFeatureQuantity: getFeatureQuantity,
+        } }, { children: children })));
+}
+
+var PageTitle = function (_a) {
+    var onGoBack = _a.onGoBack, title = _a.title;
+    var isMobile = common.useIsMobile();
+    var secondaryColor = react.useContext(BrandContext).secondaryColor;
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3 bunny-font-medium", style: {
+            fontSize: "28px",
+            paddingBottom: isMobile ? "22px" : "56px",
+            color: secondaryColor,
+        } }, { children: [onGoBack && (jsxRuntime.jsx(icons.ArrowLeftOutlined, { onClick: onGoBack, style: {
+                    fontSize: "20px",
+                    cursor: "pointer",
+                } })), title] })));
+};
+
+function isAddonPurchased(featureAddon, currentSubscription) {
+    var purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(function (charge) { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
+    if (!purchasedFeatureAddons)
+        return false;
+    return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
+}
+function hasUnpurchasedFeatureAddons(priceList, currentSubscription) {
+    var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
+    var purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(function (charge) { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
+    var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
+        return !(purchasedFeatureAddons === null || purchasedFeatureAddons === void 0 ? void 0 : purchasedFeatureAddons.some(function (purchasedCharge) { var _a; return ((_a = purchasedCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === charge.id; }));
+    });
+    return unpurchasedFeatureAddons.length > 0;
+}
+function findQuoteChangeForFeatureAddon(quote) {
+    return quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.kind === common.QuoteChangeKind.UPDATE || qc.kind === common.QuoteChangeKind.SUBSCRIBE; });
+}
+function featureAddonInQuote(selectedPriceList, priceListCharge, quote) {
+    var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === selectedPriceList.id; });
+    if (!quoteChange)
+        return false;
+    return quoteChange.charges.some(function (c) { var _a; return ((_a = c.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListCharge.id; });
+}
+// ID Cucumber will use to find the feature addon switch
+function featureAddonSwitchTestId(featureAddon) {
+    var name = featureAddon.name.toLowerCase().replace(/ /g, '-');
+    return "feature-addon-switch-".concat(name);
+}
+
+var pageWrapperClassName = function (isMobile) {
+    return "flex flex-col grow pt-4 ".concat(isMobile ? 'pb-4 overflow-hidden' : 'pb-8', " ").concat('content-container');
+};
+
+var MUTATION$2 = "{\n  currentUser {\n    taxationRequiredAccountFields\n  }\n}";
+var getTaxationRequiredAccountFields = function (_a) {
+    var apiHost = _a.apiHost, token = _a.token;
+    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 apiHost = _a.apiHost, token = _a.token;
+    var plugins = usePlugins({
+        apiHost: apiHost,
+        token: token,
+    }).data;
+    return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
+};
+
+function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
+    var _a;
+    var upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
+    function upgradingFromFree() {
+        var totalPrice = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges.reduce(function (acc, charge) { return acc + Number((charge === null || charge === void 0 ? void 0 : charge.discountedPrice) || 0); }, 0);
+        return totalPrice === 0;
+    }
+    var quoteKindIsValid = quote.kind === common.QuoteChangeKind.SUBSCRIBE ||
+        quote.kind === common.QuoteChangeKind.ADJUSTMENT ||
+        quote.kind === common.QuoteChangeKind.ACTIVATE;
+    if (quoteKindIsValid) {
+        return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
+    }
+    return false;
+}
+
+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;
@@ -21111,7 +21543,7 @@ var PaymentFormWrapper = function (_a) {
 var queryKeyFactory = common.QueryKeyFactory.default;
 var Checkout = function (_a) {
     var _b, _c;
-    var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList;
+    var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, isUpdatingQuote = _a.isUpdatingQuote;
     var apiHost = react.useContext(BunnyContext).apiHost;
     var isMobile = common.useIsMobile();
     var token = useToken();
@@ -21137,7 +21569,7 @@ var Checkout = function (_a) {
     }), account = _e.data, isLoadingAccount = _e.isLoading;
     function recalculateTaxes() {
         return __awaiter(this, void 0, void 0, function () {
-            var updatedQuote, quoteKey, calculatedPricesKey;
+            var updatedQuote, quoteKey;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -21155,13 +21587,7 @@ var Checkout = function (_a) {
                                 objectName: 'editingQuote',
                                 token: token,
                             });
-                            calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
-                                // 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*/, {}];
@@ -21173,7 +21599,8 @@ var Checkout = function (_a) {
         open &&
         hasTaxPlugin &&
         !taxationRequiredAccountFields &&
-        !isLoadingTaxationRequiredAccountFields;
+        !isLoadingTaxationRequiredAccountFields &&
+        !isUpdatingQuote;
     reactQuery.useQuery({
         queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
             id: quote === null || quote === void 0 ? void 0 : quote.id,
@@ -21207,69 +21634,11 @@ var Checkout = function (_a) {
                             }, onPaymentSuccess: onSuccess }))] })), jsxRuntime.jsx(Footer, { className: "bunny-pl-12" })] })) })));
 };
 
-var QuotePreviewContext = react.createContext({});
-function QuotePreviewProvider(_a) {
-    var children = _a.children;
-    var _b = react.useState(), quotePreviewData = _b[0], setQuotePreviewData = _b[1];
-    function handleSetEditingQuote(editingQuoteId) {
-        setQuotePreviewData(__assign(__assign({}, quotePreviewData), { editingQuoteId: editingQuoteId }));
-    }
-    return (jsxRuntime.jsx(QuotePreviewContext.Provider, __assign({ value: {
-            quotePreviewData: quotePreviewData,
-            setQuotePreviewData: setQuotePreviewData,
-            handleSetEditingQuote: handleSetEditingQuote,
-        } }, { children: children })));
-}
-
-var PageTitle = function (_a) {
-    var onGoBack = _a.onGoBack, title = _a.title;
-    var isMobile = common.useIsMobile();
-    var secondaryColor = react.useContext(BrandContext).secondaryColor;
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3 bunny-font-medium", style: {
-            fontSize: "28px",
-            paddingBottom: isMobile ? "22px" : "56px",
-            color: secondaryColor,
-        } }, { children: [onGoBack && (jsxRuntime.jsx(icons.ArrowLeftOutlined, { onClick: onGoBack, style: {
-                    fontSize: "20px",
-                    cursor: "pointer",
-                } })), title] })));
-};
-
-var QUOTE_CHARGE_UPDATE = "\n  mutation QuoteChargeUpdate (\n    $discount: Float,\n    $endDate: ISO8601Date,\n    $name: String,\n    $price: Float,\n    $quantity: Int,\n    $quoteChargeId: ID!\n    $startDate: ISO8601Date\n    $subtotal: Float,\n  ) {\n    quoteChargeUpdate(\n      discount: $discount\n      endDate: $endDate\n      name: $name\n      price: $price\n      quantity: $quantity\n      quoteChargeId: $quoteChargeId\n      startDate: $startDate\n      subtotal: $subtotal\n    ) {\n      quoteCharge {\n        id\n      }\n    }\n  }\n";
-var quoteChargeUpdate = function (_a) {
-    var discount = _a.discount, name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
-    return gqlRequest({
-        query: QUOTE_CHARGE_UPDATE,
-        vars: {
-            subtotal: subtotal,
-            discount: discount,
-            name: name,
-            price: price,
-            quantity: quantity,
-            quoteChargeId: quoteChargeId,
-            startDate: startDate,
-        },
-        apiHost: apiHost,
-        token: token,
-    });
-};
-
 var CheckoutBarInput = function (_a) {
-    var disabled = _a.disabled, charge = _a.charge, quantity = _a.quantity, selectedPriceList = _a.selectedPriceList, onQuantityChanged = _a.onQuantityChanged;
-    // State
-    var _b = react.useState(false), isTooltipOpen = _b[0], setIsTooltipOpen = _b[1];
-    var _c = react.useState(0), quantityLocal = _c[0], setQuantityLocal = _c[1];
-    // Hooks
+    var _b;
+    var disabled = _a.disabled, charge = _a.charge, quantity = _a.quantity, onQuantityChanged = _a.onQuantityChanged;
+    var _c = react.useState(false), isTooltipOpen = _c[0], setIsTooltipOpen = _c[1];
     var isMobile = common.useIsMobile();
-    var quoteChangeDebounce = react.useCallback(lodashExports.debounce(function (newQuantity) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            onQuantityChanged(newQuantity);
-            return [2 /*return*/];
-        });
-    }); }, 1000), []);
-    react.useEffect(function () {
-        setQuantityLocal(quantity);
-    }, [quantity]);
     react.useEffect(function () {
         setTimeout(function () {
             setIsTooltipOpen(true);
@@ -21278,18 +21647,14 @@ var CheckoutBarInput = function (_a) {
             setIsTooltipOpen(false);
         }, 6000);
     }, []);
-    if (!(charge === null || charge === void 0 ? void 0 : charge.feature))
-        return null;
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isMobile ? "bunny-justify-between" : "") }, { children: [jsxRuntime.jsx(QuantityLabel, { activeCharge: charge }), jsxRuntime.jsx(antd.Tooltip, __assign({ onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isMobile ? 'bunny-justify-between' : '') }, { children: [jsxRuntime.jsx(QuantityLabel, { activeCharge: charge }), jsxRuntime.jsx(antd.Tooltip, __assign({ onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
                     body: {
-                        paddingTop: "0.75rem",
-                        paddingBottom: "0.75rem",
+                        paddingTop: '0.75rem',
+                        paddingBottom: '0.75rem',
                     },
-                } }, { children: jsxRuntime.jsx(antd.Input, { className: isMobile ? "text-right" : "", disabled: disabled || !selectedPriceList || !charge.selfServiceQuantity, onChange: function (e) {
-                        var quantity = Number(e.target.value);
-                        setQuantityLocal(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: quantityLocal, required: true }) }))] })));
+                } }, { children: jsxRuntime.jsx(antd.Input, { id: "".concat((_b = charge.name) === null || _b === void 0 ? void 0 : _b.toLowerCase().replace(/ /g, '-'), "-quantity-input"), className: isMobile ? 'text-right' : '', disabled: disabled, onChange: function (e) {
+                        onQuantityChanged(Number(e.target.value));
+                    }, 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;
@@ -21297,8 +21662,8 @@ var QuantityLabel = function (_a) {
     var featureName = (_b = activeCharge.feature) === null || _b === void 0 ? void 0 : _b.name;
     var pluralizedFeatureName = (common.StringUtils.isStringPluralized(featureName) || !featureName
         ? featureName
-        : common.StringUtils.pluralizeEntityName(featureName)) || "";
-    return (jsxRuntime.jsx("span", __assign({ className: "bunny-text-slate-500 bunny-font-medium", style: { fontSize: "11px" } }, { children: pluralizedFeatureName.toUpperCase() })));
+        : common.StringUtils.pluralizeEntityName(featureName)) || '';
+    return (jsxRuntime.jsx("span", __assign({ className: "bunny-text-slate-500 bunny-font-medium", style: { fontSize: '11px' } }, { children: pluralizedFeatureName.toUpperCase() })));
 };
 
 var periodMonthsConverter = function (period) {
@@ -21343,7 +21708,10 @@ var canShowQuantitiesInput = function (charge, subscription) {
     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); });
+    if (!editedSubscription || editedSubscription.quantity === undefined) {
+        return { charges: [], quoteChange: undefined };
+    }
+    var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === 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 = [
         {
@@ -21428,6 +21796,38 @@ var getApplicablePriceTier = function (charge, currencyId, priceDecimals) {
         : "".concat(common.formatCurrency(selectedTier.price, currencyId, priceDecimals));
 };
 
+var ADDON_INDENTATION = 64;
+function findNonAddonSubscriptions(subscriptions) {
+    return subscriptions.filter(function (subscription) {
+        return (subscription.priceList.plan.addon === false || subscription.priceList.plan.addon === null) &&
+            findParentSubscription(subscription, subscriptions) === undefined;
+    });
+}
+function findAddonSubscriptions(parentSubscription, subscriptions) {
+    var _a;
+    var addonSubscriptionsIds = (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.map(function (addonSubscription) { return addonSubscription.id; });
+    return subscriptions.filter(function (subscription) { return addonSubscriptionsIds === null || addonSubscriptionsIds === void 0 ? void 0 : addonSubscriptionsIds.includes(subscription.id); });
+}
+function findParentSubscription(subscription, subscriptions) {
+    return subscriptions.find(function (parentSubscription) {
+        var _a;
+        return (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.some(function (addonSubscription) { return addonSubscription.id === subscription.id; });
+    });
+}
+function hasUnpurchasedAddonPlans(priceList, currentSubscription) {
+    var addonPlans = priceList.plan.addonPlans;
+    var purchasedAddonPlans = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.addonSubscriptions;
+    var unpurchasedAddonPlans = addonPlans === null || addonPlans === void 0 ? void 0 : addonPlans.filter(function (addonPlan) {
+        return !(purchasedAddonPlans === null || purchasedAddonPlans === void 0 ? void 0 : purchasedAddonPlans.some(function (purchasedAddonPlan) { return purchasedAddonPlan.plan.id === addonPlan.id; }));
+    });
+    return unpurchasedAddonPlans && unpurchasedAddonPlans.length > 0;
+}
+// ID Cucumber will use to find the addon plan switch
+function addonPlanSwitchTestId(addonPlan) {
+    var name = addonPlan.name.toLowerCase().replace(/ /g, '-');
+    return "addon-plan-switch-".concat(name);
+}
+
 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 (priceList) {
@@ -21473,7 +21873,9 @@ var getActivePlanPriceData = function (priceList, selectedPriceList) {
     };
 };
 var isPriceListDisabled = function (_a) {
-    var priceList = _a.priceList, upgradingSubscription = _a.upgradingSubscription, canPurchaseFeatureAddons = _a.canPurchaseFeatureAddons;
+    var priceList = _a.priceList, upgradingSubscription = _a.upgradingSubscription;
+    var canPurchaseFeatureAddons = hasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
+    var canPurchasePlanAddons = hasUnpurchasedAddonPlans(priceList, upgradingSubscription);
     var existingSubscriptionInTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
     var isUpgradingSubscriptionPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
     // When should priceList be disabled?
@@ -21483,15 +21885,22 @@ var isPriceListDisabled = function (_a) {
     //     AND cannot purchase add-on plans
     //     AND selfServiceBuy is false
     if (isUpgradingSubscriptionPriceList) {
-        return !existingSubscriptionInTrial && !canPurchaseFeatureAddons;
+        return !existingSubscriptionInTrial && !canPurchaseFeatureAddons && !canPurchasePlanAddons;
     }
     return false;
 };
 
 var CheckoutButton = function (_a) {
-    var checkoutButtonDisabled = _a.checkoutButtonDisabled, onClickCheckout = _a.onClickCheckout, loading = _a.loading;
+    var checkoutButtonDisabled = _a.checkoutButtonDisabled, onClickCheckout = _a.onClickCheckout, loading = _a.loading, tooltipText = _a.tooltipText;
     var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsx(antd.Button, __assign({ className: isMobile ? "w-full" : "", disabled: checkoutButtonDisabled, onClick: onClickCheckout, size: isMobile ? "large" : "middle", type: "primary", loading: loading }, { children: "Proceed to checkout" })));
+    var TooltipWrapper = function (_a) {
+        var children = _a.children;
+        if (tooltipText) {
+            return jsxRuntime.jsx(antd.Tooltip, __assign({ title: tooltipText }, { children: children }));
+        }
+        return jsxRuntime.jsx("div", { children: children });
+    };
+    return (jsxRuntime.jsx(TooltipWrapper, { children: jsxRuntime.jsx(antd.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) {
@@ -21508,10 +21917,10 @@ var CheckoutPrice = function (_a) {
 
 var CheckoutBarSummarySection = function (_a) {
     var _b;
-    var open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription;
+    var open = _a.open, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription;
     // Context
     var apiHost = react.useContext(BunnyContext).apiHost;
-    var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
+    var _c = react.useContext(QuoteContext), quote = _c.quote, isQuotePending = _c.isQuotePending, isUpdatingQuote = _c.isUpdatingQuote;
     var accountId = react.useContext(PaymentContext).accountId;
     // Hooks
     var token = useToken();
@@ -21529,178 +21938,30 @@ var CheckoutBarSummarySection = function (_a) {
             token: token,
         }),
     });
-    var isUpgradingCurrentSubscription = selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
-    var disableCheckoutButton = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
-        !selectedPriceList ||
-        // quantityLocal !== quotePreviewData.quantity ||
-        isFetching ||
-        isUpgradingCurrentSubscription ||
-        open);
+    // When should checkout button be disabled?
+    var isUpgradingSubscription = selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
+    var disableCheckoutButton = Boolean(!selectedPriceList || isFetching || !isUpgradingSubscription || open);
     var checkoutButtonDisabled = (quote === null || quote === void 0 ? void 0 : quote.amountDue) && (quote === null || quote === void 0 ? void 0 : quote.amountDue) > 0 ? false : disableCheckoutButton;
     var activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
     var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === common.ChargeType.USAGE;
-    var hasPaymentMethodsOrIsFree = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) || Boolean(quote && getQuoteAmountDue(quote) === 0);
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : '') }, { children: [quote && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'items-center justify-between w-full' : 'flex-col') }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-font-medium bunny-text-right", style: { fontSize: '11px' } }, { children: "TOTAL" })), jsxRuntime.jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] }))), hasPaymentMethodsOrIsFree && (jsxRuntime.jsx(CheckoutButton, { checkoutButtonDisabled: checkoutButtonDisabled, onClickCheckout: onClickCheckout, loading: !quote }))] })));
+    var hasPaymentPlugins = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length);
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : '') }, { children: [quote && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'items-center justify-between w-full' : 'flex-col') }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-font-medium bunny-text-right", style: { fontSize: '11px' } }, { children: "TOTAL" })), jsxRuntime.jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] }))), jsxRuntime.jsx(CheckoutButton, { checkoutButtonDisabled: checkoutButtonDisabled || !hasPaymentPlugins, onClickCheckout: onClickCheckout, loading: isQuotePending || isUpdatingQuote, tooltipText: !hasPaymentPlugins
+                    ? 'Cannot checkout. No valid payment plugins found. Please contact your administrator.'
+                    : undefined })] })));
 };
 
-var PlanPickerCheckoutBarWrapper = function (_a) {
-    var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
-    // Context
-    var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
-    var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
-    if (!selectedPriceList)
-        return null;
-    return (jsxRuntime.jsx(PlanPickerCheckoutBar, { editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
-};
 var PlanPickerCheckoutBar = function (_a) {
-    var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
+    var selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
     // Context
-    var token = useToken();
     var _b = react.useContext(SubscriptionsContext), upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
-    var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, handleSetEditingQuote = _c.handleSetEditingQuote;
-    var apiHost = react.useContext(BunnyContext).apiHost;
+    var _c = react.useContext(QuoteContext), quote = _c.quote, onChangeQuantity = _c.onChangeQuantity, getFeatureQuantity = _c.getFeatureQuantity, isFeatureAddonsLoading = _c.isFeatureAddonsLoading, isUpdatingQuote = _c.isUpdatingQuote;
     // Local state
     var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
     // Hooks
+    var token = useToken();
     var showSuccessNotification = common.useSuccessNotification();
     var queryClient = reactQuery.useQueryClient();
     var isMobile = common.useIsMobile();
-    var defaultPaymentMethod = usePaymentMethod({
-        token: token,
-        apiHost: apiHost,
-    }).defaultPaymentMethod;
-    var createSubscriptionUpgradeQuote = useQuoteSubscriptionUpgrade();
-    var createSubscriptionUpdateQuote = useCreateSubscriptionQuote();
-    var quoteSubscriptionActivate = useQuoteSubscriptionActivate();
-    // Mutations
-    var createQuote = reactQuery.useMutation({
-        mutationFn: function (_a) {
-            var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
-            return createSubscriptionUpgradeQuote(subscriptionId, priceListId, apiHost, token);
-        },
-        onSuccess: function (response) {
-            var _a;
-            var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
-            setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
-            handleSetEditingQuote(quote.id);
-        },
-    }).mutate;
-    var createEmptyQuote = reactQuery.useMutation({
-        mutationFn: function (_a) {
-            var subscriptionId = _a.subscriptionId;
-            return createSubscriptionUpdateQuote([subscriptionId], apiHost, token);
-        },
-        onSuccess: function (response) {
-            var _a;
-            var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
-            setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
-            handleSetEditingQuote(quote.id);
-        },
-    }).mutate;
-    var updateCharge = reactQuery.useMutation({
-        mutationFn: quoteChargeUpdate,
-        onSuccess: function () {
-            queryClient.invalidateQueries({
-                queryKey: common.QueryKeyFactory.default.createObjectKey({
-                    objectName: 'editingQuote',
-                    id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
-                    token: token,
-                }),
-            });
-        },
-    }).mutate;
-    var subscriptionActivate = reactQuery.useMutation({
-        mutationFn: function (_a) {
-            var subscriptionId = _a.subscriptionId;
-            return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, quoteSubscriptionActivate(subscriptionId, apiHost, token)];
-                        case 1: return [2 /*return*/, _b.sent()];
-                    }
-                });
-            });
-        },
-        onSuccess: function (response) {
-            var _a;
-            var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionActivate) === null || _a === void 0 ? void 0 : _a.quote;
-            setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
-            handleSetEditingQuote(quote.id);
-            queryClient.invalidateQueries({
-                queryKey: common.QueryKeyFactory.default.createObjectKey({
-                    objectName: 'editingQuote',
-                    id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
-                    token: token,
-                }),
-            });
-        },
-    }).mutate;
-    // Queries
-    var quote = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.createObjectKey({
-            objectName: 'editingQuote',
-            id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
-            token: token,
-        }),
-        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
-            var quote;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
-                            throw new Error('editingQuote is undefined');
-                        }
-                        return [4 /*yield*/, getQuote({
-                                id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
-                                token: token,
-                                apiHost: apiHost,
-                            })];
-                    case 1:
-                        quote = _a.sent();
-                        return [2 /*return*/, quote];
-                }
-            });
-        }); },
-        enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
-    }).data;
-    react.useEffect(function () {
-        var _a;
-        if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
-            console.error('upgradingSubscription is undefined');
-            return;
-        }
-        var upgradingCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
-        if (upgradingCurrentSubscription) {
-            if (((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL) {
-                subscriptionActivate({
-                    subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
-                });
-            }
-            else {
-                createEmptyQuote({
-                    subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
-                });
-            }
-        }
-        else {
-            createQuote({
-                subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
-                priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
-            });
-        }
-    }, [selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id]);
-    // Reset query key on unmount
-    react.useEffect(function () {
-        return function () {
-            queryClient.invalidateQueries({
-                queryKey: common.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]);
     var handleCheckoutSuccess = function () {
         queryClient.invalidateQueries({
             queryKey: common.QueryKeyFactory.default.createTableKey({
@@ -21715,48 +21976,31 @@ var PlanPickerCheckoutBar = function (_a) {
         showSuccessNotification('Your subscription has been created', 'Checkout successful');
         onCheckoutSuccess();
     };
-    var onCheckoutFail = function (error) {
-        handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
-    };
-    function onChangeQuantity(chargeId, quantity) {
-        var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
-        var quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) {
-            var _a;
-            return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === chargeId;
-        });
-        if (!token) {
-            console.error('token is undefined');
-            return;
-        }
-        if (!quoteCharge) {
-            console.error('quoteCharge not found');
-            return;
-        }
-        updateCharge({
-            quoteChargeId: quoteCharge.id,
-            quantity: quantity,
-            apiHost: apiHost,
-            token: token,
-        });
-    }
     return (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? 'bunny-flex-col bunny-gap-4' : 'bunny-flex-row', " my-2 p-4 justify-between bg-white rounded-md ").concat(shadow ? "shadow-".concat(shadow) : '') }, { children: [jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? 'bunny-flex bunny-flex-col' : 'bunny-flex', " bunny-gap-4") }, { children: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.map(function (charge, index) {
-                    var _a;
-                    var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
-                    var chargeQuantity = (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceList) === null || _a === void 0 ? void 0 : _a.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); })) === null || _a === void 0 ? void 0 : _a.quantity;
-                    if (charge.chargeType === common.ChargeType.USAGE)
+                    var _a, _b;
+                    if (!canEditChargeQuantity(charge))
                         return null;
-                    if (!quote)
+                    if (!((_a = charge.feature) === null || _a === void 0 ? void 0 : _a.id))
+                        throw new Error('Charge feature is undefined');
+                    var isFeatureAddon = charge.featureAddon;
+                    var quantity = getFeatureQuantity((_b = charge.feature) === null || _b === void 0 ? void 0 : _b.id, charge.id);
+                    var maybeIsChargeLoading = isFeatureAddon && isFeatureAddonsLoading;
+                    var showInput = quantity && selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
+                    if (!showInput)
                         return null;
-                    if (!chargeQuantity)
+                    // if charge is a feature addon, and a corresponding quote charge is not found in quote, return null
+                    if (isFeatureAddon && !featureAddonInQuote(selectedPriceList, charge, quote)) {
                         return null;
-                    return (jsxRuntime.jsx(CheckoutBarInput, { disabled: !chargeQuantity, charge: charge, quantity: chargeQuantity !== null && chargeQuantity !== void 0 ? chargeQuantity : 0, selectedPriceList: selectedPriceList, onQuantityChanged: function (quantity) {
+                    }
+                    var isDisabled = !quote || maybeIsChargeLoading || !selectedPriceList || !charge.selfServiceQuantity;
+                    return (jsxRuntime.jsx(CheckoutBarInput, { disabled: isDisabled, charge: charge, quantity: quantity, onQuantityChanged: function (quantity) {
                             onChangeQuantity(charge.id, quantity);
                         } }, index));
-                }) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription }), jsxRuntime.jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
+                }) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription }), jsxRuntime.jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: function (error) { return handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error); }, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: isUpdatingQuote })] })));
 };
 
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
-var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n  query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n    priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n      products {\n        everythingInPlus\n        id\n        name\n        plansToDisplay\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      priceLists {\n        showPriceAsMonthly\n        basePrice\n        currencyId\n        id\n        monthlyBasePrice\n        periodMonths\n        plan {\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        }\n        product {\n          id\n        }\n        charges {\n          featureAddon\n          basePrice\n          billingPeriod\n          chargeType\n          id\n          name\n          priceDecimals\n          pricingModel\n          quantityMax\n          quantityMin\n          selfServiceQuantity\n          priceList {\n            id\n          }\n          feature {\n            name\n            unitName\n          }\n        }\n      }\n    }\n  }";
+var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n  query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n    priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n      products {\n        everythingInPlus\n        id\n        name\n        plansToDisplay\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      priceLists {\n        showPriceAsMonthly\n        basePrice\n        currencyId\n        id\n        monthlyBasePrice\n        periodMonths\n        plan {\n          code\n          contactUsLabel\n          contactUsUrl\n          description\n          id\n          name\n          position\n          pricingDescription\n          pricingStyle\n          addon\n          planFeatures {\n            featureId\n            value\n            feature {\n              name\n            }\n          }\n        }\n        product {\n          id\n        }\n        charges {\n          featureAddon\n          basePrice\n          billingPeriod\n          chargeType\n          id\n          name\n          priceDecimals\n          pricingModel\n          quantityMax\n          quantityMin\n          selfServiceQuantity\n          priceList {\n            id\n          }\n          feature {\n            name\n            unitName\n            id\n          }\n        }\n      }\n    }\n  }";
 var getPriceListChangeOptions = function (_a) {
     var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -21782,60 +22026,15 @@ var getPriceListChangeOptions = function (_a) {
                     return [2 /*return*/, priceListChangeOptions];
             }
         });
-    });
-};
-
-var ErrorView = function (_a) {
-    var children = _a.children, message = _a.message;
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full", style: { marginTop: "80px" } }, { children: [jsxRuntime.jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
-};
-
-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;
-    }
-};
-
-function isAddonPurchased(featureAddon, currentSubscription) {
-    var purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(function (charge) { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
-    if (!purchasedFeatureAddons)
-        return false;
-    return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
-}
-function priceListHasUnpurchasedFeatureAddons(priceList, currentSubscription) {
-    var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
-    var purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(function (charge) { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
-    var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
-        return !(purchasedFeatureAddons === null || purchasedFeatureAddons === void 0 ? void 0 : purchasedFeatureAddons.some(function (purchasedCharge) { var _a; return ((_a = purchasedCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === charge.id; }));
-    });
-    return unpurchasedFeatureAddons.length > 0;
-}
+    });
+};
+
+var ErrorView = function (_a) {
+    var children = _a.children, message = _a.message;
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full", style: { marginTop: "80px" } }, { children: [jsxRuntime.jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
+};
 
+var Text$d = antd.Typography.Text;
 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 = react.useContext(BrandContext), secondaryColor = _b.secondaryColor, brandColor = _b.brandColor;
@@ -21846,7 +22045,7 @@ var BillingPeriodSelector = function (_a) {
                             color: secondaryColor,
                         } }, { children: "Select product" })), jsxRuntime.jsx(ProductRadioStyled, __assign({ brandColor: brandColor }, { children: jsxRuntime.jsx(antd.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: jsxRuntime.jsx(antd.Space, __assign({ className: "bunny-gap-2" }, { children: products === null || products === void 0 ? void 0 : products.map(function (product) { return (jsxRuntime.jsx(antd.Radio.Button, __assign({ value: product.id }, { children: product.name }), product.id)); }) })) })) }))] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-gap-2" }, { children: [!isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-xs", style: {
+                            }, value: selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id, buttonStyle: "solid" }, { children: jsxRuntime.jsx(antd.Space, __assign({ className: "bunny-gap-2" }, { children: products === null || products === void 0 ? void 0 : products.map(function (product) { return (jsxRuntime.jsx(antd.Radio.Button, __assign({ value: product.id }, { children: product.name }), product.id)); }) })) })) }))] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-gap-2" }, { children: [!isMobile && (jsxRuntime.jsx(Text$d, __assign({ className: "bunny-font-medium bunny-text-xs", style: {
                             color: secondaryColor,
                         } }, { children: "Subscription term" }))), jsxRuntime.jsx(StyledRadioGroup, __assign({ className: "bunny-w-full", "$isMobile": isMobile }, { children: jsxRuntime.jsx(antd.Radio.Group, __assign({ onChange: function (e) {
                                 onChangeBillingPeriod(e.target.value);
@@ -21887,6 +22086,8 @@ var NextPriceListButton = function (_a) {
 var getAvailablePlansAndPriceLists = function (_a) {
     var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, plansToDisplay = _a.plansToDisplay;
     var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + plansToDisplay);
+    // displayPriceLists don't have enough data in them, so we're finding the same price list within
+    // priceListChangeOptions which has more data in it.
     var availablePriceListsArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
         var _a;
         var foundPriceList = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.find(function (priceList) { return priceList.plan.id === displayPriceList.plan.id; });
@@ -21903,12 +22104,8 @@ var everythingInPlusString = function (_a) {
 };
 
 var PriceListCardButton = function (_a) {
-    var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
-    // Context
+    var disableSelectCurrentPlan = _a.disableSelectCurrentPlan, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
     var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
-    var showBuyAddonsButton = isPriceListCurrentSubscription &&
-        subscriptionPlan &&
-        priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
     var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
     var canUpgradeFromTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
     var createButtonText = function () {
@@ -21924,11 +22121,9 @@ var PriceListCardButton = function (_a) {
             return priceList.plan.contactUsLabel;
         return 'Select';
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end bunny-gap-3" }, { children: [showBuyAddonsButton && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: disableOnClick, style: {
-                        maxWidth: '240px',
-                    }, type: isSelected ? 'primary' : 'default' }, { children: "Buy addons" })) }))), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: disableOnClick || showBuyAddonsButton, style: {
-                        maxWidth: '240px',
-                    }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) }))] })));
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end bunny-gap-3" }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: disableSelectCurrentPlan, style: {
+                    maxWidth: '240px',
+                }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
 };
 
 var Text$c = antd.Typography.Text;
@@ -21957,9 +22152,9 @@ var calculatePriceDecimals = function (priceList) {
     return 0;
 };
 var PriceListCardPrice = function (_a) {
-    var priceList = _a.priceList;
+    var priceList = _a.priceList, _b = _a.fontSize, fontSize = _b === void 0 ? '32px' : _b;
     var priceDecimals = calculatePriceDecimals(priceList);
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: '32px' } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: fontSize } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
             ? common.formatCurrency(getPrice(priceList), priceList.currencyId, priceDecimals)
             : priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US
                 ? ''
@@ -22003,9 +22198,9 @@ function PriceDescriptionString(_a) {
 var PriceListCardTitle = function (_a) {
     var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
     var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-4" }, { children: [Boolean(trialRemainingDays) && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-secondary", style: { height: "1rem" } }, { children: isPriceListCurrentSubscription
-                    ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
-                    : " " }))), jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center ".concat(isMobile ? "bunny-text-slate-500" : "bunny-text-orange-600"), style: { fontSize: "20px" } }, { children: priceList.plan.name }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-4" }, { children: [Boolean(trialRemainingDays) && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-secondary", style: { height: '1rem' } }, { children: isPriceListCurrentSubscription
+                    ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? '' : 's')
+                    : ' ' }))), jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center ".concat(isMobile ? 'bunny-text-slate-500' : 'bunny-text-orange-600'), style: { fontSize: '20px' } }, { children: priceList.plan.name }))] })));
 };
 
 var PLAN_GRID_PADDING = 4;
@@ -22018,18 +22213,19 @@ var PlanPickerGridCell = function (_a) {
 };
 
 var PriceListCardDesktop = function (_a) {
-    var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
-    return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 ".concat(disableOnClick ? '' : 'cursor-pointer'), onClick: function () {
-                if (!disableOnClick) {
+    var hideButton = _a.hideButton, description = _a.description, disableSelectCurrentPlan = _a.disableSelectCurrentPlan, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays, noBorder = _a.noBorder, onClickPriceListCard = _a.onClickPriceListCard;
+    return (jsxRuntime.jsx(PlanPickerGridCell, __assign({ noBorder: noBorder }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 ".concat(disableSelectCurrentPlan ? '' : 'cursor-pointer'), onClick: function () {
+                if (!disableSelectCurrentPlan) {
                     if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US) {
                         window.open(priceList.plan.contactUsUrl, '_blank');
                     }
-                    else
-                        onClick(priceList);
+                    else {
+                        onClickPriceListCard === null || onClickPriceListCard === void 0 ? void 0 : onClickPriceListCard(priceList);
+                    }
                 }
             }, style: {
                 height: '100%',
-            } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })) }));
+            } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), !hideButton && (jsxRuntime.jsx(PriceListCardButton, { disableSelectCurrentPlan: disableSelectCurrentPlan, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan }))] })) })));
 };
 
 var CheckIcon = function (_a) {
@@ -22038,23 +22234,23 @@ var CheckIcon = function (_a) {
 };
 
 var PriceListCardMobile = function (_a) {
-    var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
+    var description = _a.description, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays, disableOnClickPriceListCard = _a.disableOnClickPriceListCard, onClickPriceListCard = _a.onClickPriceListCard;
     var brandColor = react.useContext(BrandContext).brandColor;
     return (jsxRuntime.jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-border-2 bunny-border-solid bunny-rounded-lg bunny-p-4", onClick: function () {
-            if (!disableOnClick)
-                onClick(priceList);
+            if (!disableOnClickPriceListCard)
+                onClickPriceListCard === null || onClickPriceListCard === void 0 ? void 0 : onClickPriceListCard(priceList);
         }, style: {
             minWidth: '220px',
             borderColor: isSelected ? brandColor : common.SLATE_200,
         } }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "bunny-absolute", style: {
                     top: '10px',
                     right: '10px',
-                } }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
+                } }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableSelectCurrentPlan: disableOnClickPriceListCard, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
 };
 
 var PriceListCard = function (_a) {
     var _b;
-    var isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
+    var hideButton = _a.hideButton, isSelected = _a.isSelected, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, noBorder = _a.noBorder, onClickPriceListCard = _a.onClickPriceListCard;
     // Context
     var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
     var isMobile = common.useIsMobile();
@@ -22064,11 +22260,9 @@ var PriceListCard = function (_a) {
     var activeCharge = (_b = getActivePlanPriceData(priceList, 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 canPurchaseFeatureAddons = priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
-    var disableOnClick = isPriceListDisabled({
+    var disableSelectCurrentPlan = isPriceListDisabled({
         priceList: priceList,
         upgradingSubscription: upgradingSubscription,
-        canPurchaseFeatureAddons: canPurchaseFeatureAddons,
     });
     var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
         var _a, _b;
@@ -22080,22 +22274,21 @@ var PriceListCard = function (_a) {
         return null;
     }
     var feature = activeCharge.feature;
-    return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsxRuntime.jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
+    return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, 
+        // TODO: naming mismatch disableOnClickPriceListCard vs disableSelectCurrentPlan, maybe also functionality mismatch? (ignore for now, mobile won't ever show this currently)
+        disableOnClickPriceListCard: disableSelectCurrentPlan, onClickPriceListCard: onClickPriceListCard })) : (jsxRuntime.jsx(PriceListCardDesktop, { hideButton: hideButton, description: description, disableSelectCurrentPlan: disableSelectCurrentPlan, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, noBorder: noBorder, onClickPriceListCard: onClickPriceListCard }));
 };
 
-var QUOTE_CHARGE_CREATE$1 = "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n  quoteChargeCreate(\n    endDate: $endDate\n    price: $price\n    priceListChargeId: $priceListChargeId\n    quantity: $quantity\n    quoteChangeId: $quoteChangeId\n    startDate: $startDate\n    subscriptionChargeId: $subscriptionChargeId\n  ) {\n    quoteCharge {\n      quoteChange {\n        id\n        quoteId\n      }\n      id\n    }\n  }\n}\n\n";
+var QUOTE_CHARGE_CREATE = "\n".concat(QUOTE_FIELDS(), "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n  quoteChargeCreate(\n    endDate: $endDate\n    price: $price\n    priceListChargeId: $priceListChargeId\n    quantity: $quantity\n    quoteChangeId: $quoteChangeId\n    startDate: $startDate\n    subscriptionChargeId: $subscriptionChargeId\n  ) {\n    quoteCharge {\n      quoteChange {\n        id\n        quoteId\n        quote {\n          ...QuoteFields\n        }\n      }\n      id\n    }\n  }\n}\n\n");
 var quoteChargeCreate = function (_a) {
-    var 
-    // endDate,
-    price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
+    var price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, 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: QUOTE_CHARGE_CREATE$1,
+                        query: QUOTE_CHARGE_CREATE,
                         vars: {
-                            // endDate,
                             price: price,
                             priceListChargeId: priceListChargeId,
                             quantity: quantity,
@@ -22117,32 +22310,38 @@ var quoteChargeCreate = function (_a) {
     });
 };
 
-var QUOTE_CHARGE_CREATE = "\nmutation QuoteChargeDelete ($quoteChargeId: ID!) {\n  quoteChargeDelete(\n    quoteChargeId: $quoteChargeId\n  ) {\n    errors\n    quoteCharge {\n      quoteChange {\n        id\n        quoteId\n      }\n    }\n  }\n}\n\n";
+var QUOTE_CHARGE_DELETE = "\n".concat(QUOTE_FIELDS(), "\nmutation QuoteChargeDelete ($quoteChargeId: ID!) {\n  quoteChargeDelete(\n    quoteChargeId: $quoteChargeId\n  ) {\n    errors\n    quoteCharge {\n      quoteChange {\n        id\n        quoteId\n        quote {\n          ...QuoteFields\n        }\n      }\n    }\n  }\n}\n\n");
 var quoteChargeDelete = function (_a) {
     var quoteChargeId = _a.quoteChargeId, token = _a.token, apiHost = _a.apiHost;
-    return gqlRequest({
-        query: QUOTE_CHARGE_CREATE,
-        vars: {
-            quoteChargeId: quoteChargeId,
-        },
-        apiHost: apiHost,
-        token: token,
+    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: QUOTE_CHARGE_DELETE,
+                        vars: {
+                            quoteChargeId: quoteChargeId,
+                        },
+                        apiHost: apiHost,
+                        token: token,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    if (response.errors) {
+                        throw new Error(response.errors[0].message);
+                    }
+                    return [2 /*return*/, response.quoteChargeDelete.quoteCharge];
+            }
+        });
     });
 };
 
-var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
+var useQuoteUpdateFeatureAddon = function (quote, featureAddon) {
     var apiHost = react.useContext(BunnyContext).apiHost;
+    var _a = react.useContext(QuoteContext), addFeatureAddonLoading = _a.addFeatureAddonLoading, removeFeatureAddonLoading = _a.removeFeatureAddonLoading;
     var token = useToken();
     var queryClient = reactQuery.useQueryClient();
     var addedQuoteChargeId = react.useRef();
-    var editingQuote = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.createObjectKey({
-            objectName: 'editingQuote',
-            id: quoteId,
-        }),
-        queryFn: function () { return (quoteId ? getQuote({ id: quoteId, token: token, apiHost: apiHost }) : undefined); },
-        enabled: Boolean(quoteId),
-    }).data;
     function handleAddFeatureAddon() {
         quoteChargeCreateMutation();
     }
@@ -22151,20 +22350,23 @@ var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
             return;
         quoteChargeDeleteMutation({ quoteChargeId: addedQuoteChargeId.current });
     }
-    var _a = reactQuery.useMutation({
+    var _b = reactQuery.useMutation({
         mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
-            var quoteCharge;
+            var quoteChangeId, quoteCharge;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (!token)
                             throw new Error('Token is required');
-                        if (!editingQuote)
+                        if (!quote)
                             throw new Error('Editing quote is required');
+                        quoteChangeId = findQuoteChangeForFeatureAddon(quote);
+                        if (!quoteChangeId)
+                            throw new Error('No available quote change for feature add-on');
                         return [4 /*yield*/, quoteChargeCreate({
-                                quoteChangeId: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.quoteChanges[editingQuote.quoteChanges.length - 1].id,
+                                quoteChangeId: quoteChangeId.id,
                                 priceListChargeId: featureAddon.id,
-                                startDate: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.startDate,
+                                startDate: quote === null || quote === void 0 ? void 0 : quote.startDate,
                                 apiHost: apiHost,
                                 token: token,
                             })];
@@ -22177,40 +22379,62 @@ var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
         onSuccess: function (_a) {
             var quoteCharge = _a.quoteCharge;
             addedQuoteChargeId.current = quoteCharge.id;
-            queryClient.invalidateQueries({
-                queryKey: common.QueryKeyFactory.default.createObjectKey({
-                    objectName: 'editingQuote',
-                }),
-            });
+            queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
+                objectName: 'editingQuote',
+                id: quote === null || quote === void 0 ? void 0 : quote.id,
+                token: token,
+            }), quoteCharge.quoteChange.quote);
         },
-    }), quoteChargeCreateMutation = _a.mutate, isCreatingFeatureAddon = _a.isPending;
-    var _b = reactQuery.useMutation({
+    }), quoteChargeCreateMutation = _b.mutate, isCreatingFeatureAddon = _b.isPending;
+    var _c = reactQuery.useMutation({
         mutationFn: function (_a) {
             var quoteChargeId = _a.quoteChargeId;
-            return quoteChargeDelete({ quoteChargeId: quoteChargeId, token: token, apiHost: 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*/, quoteChargeDelete({ quoteChargeId: quoteChargeId, token: token, apiHost: apiHost })];
+                        case 1:
+                            response = _b.sent();
+                            return [2 /*return*/, { quoteCharge: response }];
+                    }
+                });
+            });
         },
-        onSuccess: function () {
+        onSuccess: function (_a) {
+            var quoteCharge = _a.quoteCharge;
             addedQuoteChargeId.current = undefined;
-            queryClient.invalidateQueries({
-                queryKey: common.QueryKeyFactory.default.createObjectKey({
-                    objectName: 'editingQuote',
-                }),
-            });
+            queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
+                objectName: 'editingQuote',
+                id: quote === null || quote === void 0 ? void 0 : quote.id,
+                token: token,
+            }), quoteCharge.quoteChange.quote);
         },
-    }), quoteChargeDeleteMutation = _b.mutate, isDeletingFeatureAddon = _b.isPending;
+    }), quoteChargeDeleteMutation = _c.mutate, isDeletingFeatureAddon = _c.isPending;
+    var isPending = isCreatingFeatureAddon || isDeletingFeatureAddon;
     react.useEffect(function () {
         // If the quoteId changes, then its because we changed pricelists, so we need to reset the addedQuoteChargeId
         // so that isChecked becomes false
         addedQuoteChargeId.current = undefined;
-    }, [quoteId]);
+    }, [quote === null || quote === void 0 ? void 0 : quote.id]);
+    react.useEffect(function () {
+        if (isPending) {
+            addFeatureAddonLoading(featureAddon.id);
+        }
+        else {
+            removeFeatureAddonLoading(featureAddon.id);
+        }
+        return function () {
+            removeFeatureAddonLoading(featureAddon.id);
+        };
+    }, [isPending]);
     return {
         handleAddFeatureAddon: handleAddFeatureAddon,
         handleRemoveFeatureAddon: handleRemoveFeatureAddon,
-        isPending: isCreatingFeatureAddon || isDeletingFeatureAddon,
+        isPending: isPending,
         isChecked: isDeletingFeatureAddon
             ? false
             : Boolean(addedQuoteChargeId.current || isCreatingFeatureAddon),
-        editingQuoteLoaded: editingQuote !== undefined,
     };
 };
 
@@ -22248,23 +22472,23 @@ function FeatureAddonsList(_a) {
         }) }));
 }
 function FeatureAddonRow(_a) {
-    var _b, _c;
+    var _b;
     var featureAddon = _a.featureAddon, priceList = _a.priceList;
-    var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
     var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
-    var _d = useQuoteUpdateFeatureAddon(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.editingQuoteId, featureAddon), handleAddFeatureAddon = _d.handleAddFeatureAddon, handleRemoveFeatureAddon = _d.handleRemoveFeatureAddon, isPending = _d.isPending, isChecked = _d.isChecked, editingQuoteLoaded = _d.editingQuoteLoaded;
+    var _c = react.useContext(QuoteContext), quote = _c.quote, selectedPriceList = _c.selectedPriceList;
+    var _d = useQuoteUpdateFeatureAddon(quote, featureAddon), handleAddFeatureAddon = _d.handleAddFeatureAddon, handleRemoveFeatureAddon = _d.handleRemoveFeatureAddon, isPending = _d.isPending, isChecked = _d.isChecked;
     var brandColor = react.useContext(BrandContext).brandColor;
-    var isPriceListSelected = ((_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id) === priceList.id;
+    var isPriceListSelected = (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id) === priceList.id;
     var isPurchased = isAddonPurchased(featureAddon, upgradingSubscription);
     var isDisabled = !isPriceListSelected || isPurchased;
     var checked = isChecked || isPurchased;
     var tooltipContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { children: common.formatCurrency(featureAddon.basePrice, priceList.currencyId) }), featureAddon.chargeType === common.ChargeType.RECURRING && (jsxRuntime.jsx("div", { children: PriceDescriptionString({
-                    unitName: (_c = featureAddon.feature) === null || _c === void 0 ? void 0 : _c.unitName,
+                    unitName: (_b = featureAddon.feature) === null || _b === void 0 ? void 0 : _b.unitName,
                     showPriceAsMonthly: priceList.showPriceAsMonthly,
                     periodMonths: priceList.periodMonths,
                     doesPlanHaveFlatFeeCharges: false,
                 }) }))] }));
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-flex-wrap bunny-items-center bunny-justify-between bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [checked ? (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" })) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: common.SLATE_200, size: "15px" })), featureAddon.name] })), jsxRuntime.jsx(antd.Tooltip, __assign({ title: tooltipContent }, { children: jsxRuntime.jsx(icons.InfoCircleOutlined, { className: "bunny-text-gray-500", size: 15 }) }))] })), jsxRuntime.jsx(antd.Switch, { size: "small", loading: isPending, disabled: isDisabled || !editingQuoteLoaded, checked: checked, onChange: function (checked) {
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-flex-wrap bunny-items-center bunny-justify-between bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [checked ? (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" })) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: common.SLATE_200, size: "15px" })), featureAddon.name] })), jsxRuntime.jsx(antd.Tooltip, __assign({ title: tooltipContent }, { children: jsxRuntime.jsx(icons.InfoCircleOutlined, { className: "bunny-text-gray-500", size: 15 }) }))] })), jsxRuntime.jsx(antd.Switch, { id: featureAddonSwitchTestId(featureAddon), size: "small", loading: isPending, disabled: isDisabled || !quote, checked: checked, onChange: function (checked) {
                     if (checked) {
                         handleAddFeatureAddon();
                     }
@@ -22294,23 +22518,169 @@ var filterUniqueFeatures = function (_a) {
     return updatedPriceLists;
 };
 var EverythingPlanFeatures = function (_a) {
-    var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
+    var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay, _b = _a.hideBorder, hideBorder = _b === void 0 ? false : _b;
     var brandColor = react.useContext(BrandContext).brandColor;
     var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: displayPriceLists });
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: __spreadArray([], Array(plansToDisplay), true).map(function (_, planIndex) {
             var priceList = uniquePlanFeatures[planIndex];
             var prevPriceList = displayPriceLists[planIndex - 1];
             if (!priceList)
-                return (jsxRuntime.jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
+                return (jsxRuntime.jsx("div", { style: prevPriceList && !hideBorder ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
             if (!priceList.plan.planFeatures)
                 return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(FeatureAddonsList, { priceList: priceList }), ";"] }, planIndex));
-            return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: [priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
+            return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: !hideBorder ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, { children: [priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
                         var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
                         return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [prevPriceList && everythingInPlus && planIndex > 0 && planFeatureIndex === 0 && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium", style: { fontSize: '13px' } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
                     }), jsxRuntime.jsx(FeatureAddonsList, { priceList: priceList })] }), planIndex));
         }) }));
 };
 
+var QUOTE_CHANGE_DELETE = "\n".concat(QUOTE_FIELDS(), "\n  mutation QuoteChangeDelete($id: ID!) {\n    quoteChangeDelete(id: $id) {\n      errors\n      quoteChange {\n        quote {\n          ...QuoteFields\n        }\n      }\n    }\n  }\n");
+var quoteChangeDelete = function (_a) {
+    var id = _a.id, apiHost = _a.apiHost, token = _a.token;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, errors;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    vars = {
+                        id: id,
+                    };
+                    return [4 /*yield*/, gqlRequest({
+                            query: QUOTE_CHANGE_DELETE,
+                            token: token,
+                            vars: vars,
+                            apiHost: apiHost,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteChangeDelete) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, response.quoteChangeDelete];
+            }
+        });
+    });
+};
+
+var QUOTE_CHANGE_CREATE = "\n".concat(QUOTE_FIELDS(), "\nmutation QuoteChangeCreate(\n  $quoteId: ID!\n  $priceListId: ID!\n  $parentQuoteChangeId: ID!\n) {\n  quoteChangeCreate(\n    quoteId: $quoteId\n    priceListId: $priceListId\n    parentQuoteChangeId: $parentQuoteChangeId\n  ) {\n    errors\n    quoteChange {\n      id\n      quote {\n        ...QuoteFields\n      }\n    }\n  }\n}\n");
+var quoteChangeCreate = function (_a) {
+    var parentQuoteChangeId = _a.parentQuoteChangeId, priceListId = _a.priceListId, apiHost = _a.apiHost, token = _a.token, quoteId = _a.quoteId;
+    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 = {
+                        parentQuoteChangeId: parentQuoteChangeId,
+                        priceListId: priceListId,
+                        quoteId: quoteId,
+                    };
+                    return [4 /*yield*/, gqlRequest({
+                            query: QUOTE_CHANGE_CREATE,
+                            token: token,
+                            vars: vars,
+                            apiHost: apiHost,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteChangeCreate) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, response.quoteChangeCreate];
+            }
+        });
+    });
+};
+
+var useToggleAddonPlan = function (quote, plan, billingPeriod, selectedPriceList, setIsAddonPlanLoading) {
+    var token = useToken();
+    var isAdded = react.useRef(false);
+    var queryClient = reactQuery.useQueryClient();
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var parentQuoteChange = react.useMemo(function () {
+        return quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === selectedPriceList.id; });
+    }, [quote, selectedPriceList]);
+    var _a = reactQuery.useMutation({
+        mutationFn: quoteChangeCreate,
+        onSuccess: function (quoteChangeCreate) {
+            isAdded.current = true;
+            var updatedQuote = quoteChangeCreate.quoteChange.quote;
+            queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
+                objectName: 'editingQuote',
+                id: quote === null || quote === void 0 ? void 0 : quote.id,
+                token: token,
+            }), updatedQuote);
+        },
+    }), addAddonQuoteChange = _a.mutate, isAddingAddonQuoteChange = _a.isPending;
+    var _b = reactQuery.useMutation({
+        mutationFn: quoteChangeDelete,
+        onSuccess: function (quoteChangeDelete) {
+            isAdded.current = false;
+            var updatedQuote = quoteChangeDelete.quoteChange.quote;
+            queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
+                objectName: 'editingQuote',
+                id: quote === null || quote === void 0 ? void 0 : quote.id,
+                token: token,
+            }), updatedQuote);
+        },
+    }), deleteQuoteChange = _b.mutate, isDeletingQuoteChange = _b.isPending;
+    function handleAddAddonQuoteChange() {
+        if (!parentQuoteChange) {
+            throw new Error('Parent quote change not found');
+        }
+        var priceList = plan.priceLists.find(function (pl) { return pl.periodMonths === billingPeriod; });
+        if (!priceList) {
+            throw new Error('Price list not found');
+        }
+        if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
+            throw new Error('Quote ID not found');
+        }
+        addAddonQuoteChange({
+            parentQuoteChangeId: parentQuoteChange.id,
+            priceListId: priceList.id,
+            apiHost: apiHost,
+            token: token,
+            quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
+        });
+    }
+    function handleDeleteQuoteChange() {
+        var priceList = plan.priceLists.find(function (pl) { return pl.periodMonths === billingPeriod; });
+        if (!priceList) {
+            throw new Error('Price list not found');
+        }
+        var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === priceList.id; });
+        if (!quoteChange) {
+            throw new Error('Quote change not found');
+        }
+        deleteQuoteChange({
+            id: quoteChange.id,
+            apiHost: apiHost,
+            token: token,
+        });
+    }
+    react.useEffect(function () {
+        if (isAddingAddonQuoteChange || isDeletingQuoteChange) {
+            setIsAddonPlanLoading(true);
+        }
+        else {
+            setIsAddonPlanLoading(false);
+        }
+    }, [isAddingAddonQuoteChange, isDeletingQuoteChange]);
+    react.useEffect(function () {
+        isAdded.current = false;
+        setIsAddonPlanLoading(false);
+    }, [selectedPriceList]);
+    return {
+        isPending: isAddingAddonQuoteChange || isDeletingQuoteChange || parentQuoteChange === undefined,
+        addedQuoteChange: isAdded.current,
+        deleteQuoteChange: handleDeleteQuoteChange,
+        addAddonQuoteChange: handleAddAddonQuoteChange,
+    };
+};
+
 var Text$a = antd.Typography.Text;
 var PlanFeatures = function (_a) {
     var _b;
@@ -22361,8 +22731,97 @@ var FeatureTitle = function (_a) {
     return (jsxRuntime.jsx(Text$a, __assign({ className: " ".concat(isFeatureGroup ? 'bunny-text-slate-500 bunny-font-medium bunny-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 showErrorNotification = common.useErrorNotification();
+var PlanAddonsCard = function (_a) {
+    var selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, addonPlans = _a.addonPlans, selectedProduct = _a.selectedProduct, priceListChangeOptions = _a.priceListChangeOptions, selectedBillingPeriod = _a.selectedBillingPeriod;
+    var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
+    var _b = react.useState(), selectedAddonPriceList = _b[0], setSelectedAddonPriceList = _b[1];
+    function isAddonPlanPurchased(plan) {
+        var isChangingPlans = selectedPriceList.plan.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.plan.id);
+        if (isChangingPlans) {
+            return false;
+        }
+        var currentSubscription = subscriptions.find(function (subscription) { return subscription.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id); });
+        var addonSubscriptionIds = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.addonSubscriptions;
+        var addonSubscriptions = addonSubscriptionIds === null || addonSubscriptionIds === void 0 ? void 0 : addonSubscriptionIds.map(function (addonSubscription) {
+            return subscriptions.find(function (subscription) { return subscription.id === addonSubscription.id; });
+        });
+        // filter out cancelled addons
+        var activeAddonSubscriptions = addonSubscriptions === null || addonSubscriptions === void 0 ? void 0 : addonSubscriptions.filter(function (addonSubscription) { return (addonSubscription === null || addonSubscription === void 0 ? void 0 : addonSubscription.state) !== common.SubscriptionState.CANCELED; });
+        return activeAddonSubscriptions === null || activeAddonSubscriptions === void 0 ? void 0 : activeAddonSubscriptions.some(function (addonSubscription) { return (addonSubscription === null || addonSubscription === void 0 ? void 0 : addonSubscription.plan.id) === plan.id; });
+    }
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-overflow-hidden" }, { children: [jsxRuntime.jsx(AddonPlanModal, { onClose: function () { return setSelectedAddonPriceList(undefined); }, selectedProduct: selectedProduct, priceList: selectedAddonPriceList }), addonPlans.length > 0 && (jsxRuntime.jsx("div", __assign({ className: "bunny-text-black bunny-pt-2 bunny-pb-4 bunny-font-bold" }, { children: "Add-on plans" }))), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: addonPlans.map(function (plan) {
+                    var isPurchased = isAddonPlanPurchased(plan);
+                    return (jsxRuntime.jsx(PlanAddonsCardRow, { plan: plan, selectedPriceList: selectedPriceList, setSelectedAddonPriceList: setSelectedAddonPriceList, isPurchased: isPurchased || false, selectedBillingPeriod: selectedBillingPeriod, priceListChangeOptions: priceListChangeOptions }));
+                }) }))] })));
+};
+function PlanAddonsCardRow(_a) {
+    var _b, _c;
+    var plan = _a.plan, selectedPriceList = _a.selectedPriceList, setSelectedAddonPriceList = _a.setSelectedAddonPriceList, isPurchased = _a.isPurchased, selectedBillingPeriod = _a.selectedBillingPeriod, priceListChangeOptions = _a.priceListChangeOptions;
+    var _d = react.useContext(QuoteContext), quote = _d.quote, setIsAddonPlanLoading = _d.setIsAddonPlanLoading;
+    var _e = useToggleAddonPlan(quote, plan, billingPeriodConverter(selectedBillingPeriod), selectedPriceList, setIsAddonPlanLoading), isPending = _e.isPending, addedQuoteChange = _e.addedQuoteChange, addAddonQuoteChange = _e.addAddonQuoteChange, deleteQuoteChange = _e.deleteQuoteChange;
+    var addonPriceListId = (_b = plan.priceLists.find(function (priceList) { return priceList.periodMonths === billingPeriodConverter(selectedBillingPeriod); })) === null || _b === void 0 ? void 0 : _b.id;
+    var addonPriceList = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists.find(function (priceList) { return priceList.id === addonPriceListId; });
+    var activeCharge = (_c = getActivePlanPriceData(addonPriceList, addonPriceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
+    if (!addonPriceList) {
+        showErrorNotification('Addon price list not found', 'Client Error');
+        return null;
+    }
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-justify-between bunny-items-center bunny-w-full bunny-p-4 bunny-rounded-md bunny-border bunny-bg-white bunny-shadow bunny-mb-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-orange-600", style: { fontSize: '16px' } }, { children: plan.name })), jsxRuntime.jsx(PriceListCardDescription, { description: plan.description }), jsxRuntime.jsx(PriceListCardPrice, { priceList: addonPriceList, fontSize: "16px" }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.feature, priceList: addonPriceList }), jsxRuntime.jsx(antd.Button, __assign({ type: "link", onClick: function () { return setSelectedAddonPriceList(addonPriceList); } }, { children: jsxRuntime.jsx(icons.InfoCircleOutlined, {}) }))] })), jsxRuntime.jsx(antd.Switch, { id: addonPlanSwitchTestId(plan), loading: isPending, checked: addedQuoteChange || isPurchased, onChange: function (checked) {
+                    if (checked) {
+                        addAddonQuoteChange();
+                    }
+                    else {
+                        deleteQuoteChange();
+                    }
+                }, disabled: isPurchased })] }), plan.id));
+}
+function AddonPlanModal(_a) {
+    var onClose = _a.onClose, selectedProduct = _a.selectedProduct, priceList = _a.priceList;
+    var displayPriceLists = priceList ? [priceList] : [];
+    var plansToDisplay = 1;
+    return (jsxRuntime.jsx(antd.Modal, __assign({ open: !!priceList, onCancel: onClose, footer: null }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
+                gridTemplateColumns: "minmax(auto, 200px) repeat(".concat(plansToDisplay, ", minmax(200px, 1fr))"),
+            } }, { children: [jsxRuntime.jsx(PlanPickerGridCell, { noBorder: true }), priceList && (jsxRuntime.jsx(PriceListCard, { isSelected: true, priceList: priceList, noBorder: true, hideButton: true })), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: 1, selectedProduct: selectedProduct, hideBorder: true })) : (jsxRuntime.jsx(PlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: 1, selectedProduct: selectedProduct }))] })) })));
+}
+
+var ADDON_PLANS_QUERY = function () { return "\n  query PriceList($id: ID!) {\n    priceList (id: $id) {\n      addonPlans {\n        addon\n        basePrice\n        code\n        contactUsLabel\n        contactUsUrl\n        description\n        id\n        isVisible\n        name\n        position\n        pricingDescription\n        pricingStyle\n        productId\n        selfServiceBuy\n        selfServiceCancel\n        selfServiceRenew\n        priceLists {\n          id\n          periodMonths\n          showPriceAsMonthly\n          monthlyBasePrice\n          basePrice\n          currencyId\n          plan {\n            pricingStyle\n          }\n        }\n        planFeatures {\n          featureId\n          value\n          feature {\n            name\n          }\n        }\n      }\n    }\n  }\n"; };
+var getAddonPlans = function (_a) {
+    var token = _a.token, id = _a.id, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: ADDON_PLANS_QUERY(),
+                        token: token,
+                        vars: { id: id },
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _c.sent();
+                    return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.priceList) === null || _b === void 0 ? void 0 : _b.addonPlans];
+            }
+        });
+    });
+};
+
 var PriceListGridDesktop = function (_a) {
-    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
+    var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, selectedBillingPeriod = _a.selectedBillingPeriod, onClickPriceListCard = _a.onClickPriceListCard;
+    var token = useToken();
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var addonPlans = reactQuery.useQuery({
+        queryKey: ['addonPlans', selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id],
+        queryFn: function () {
+            if (!(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
+                throw new Error('Selected price list ID is required');
+            }
+            var addonPlans = getAddonPlans({ id: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, token: token, apiHost: apiHost });
+            return addonPlans;
+        },
+        enabled: !!(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id),
+    }).data;
     var displayPriceLists = react.useMemo(function () {
         return getAvailablePlansAndPriceLists({
             availablePriceLists: availablePriceLists,
@@ -22376,17 +22835,17 @@ var PriceListGridDesktop = function (_a) {
     var hasFeatureAddons = displayPriceLists.some(function (priceList) {
         return priceList.charges.some(function (charge) { return charge.featureAddon; });
     });
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-rounded-md bunny-shadow bunny-overflow-hidden bunny-bg-white" }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
-                    gridTemplateColumns: everythingInPlus
-                        ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
-                        : "minmax(auto, 400px) repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))"),
-                } }, { children: [!everythingInPlus && jsxRuntime.jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(plansToDisplay), true).map(function (_, index) {
-                        var priceList = displayPriceLists[index];
-                        var doesPrevPriceListExist = displayPriceLists[index - 1];
-                        if (!priceList)
-                            return jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
-                        return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
-                    }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }), hasFeatureAddons && (jsxRuntime.jsx(PlanFeatureAddons, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay }))] }))] }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-rounded-md bunny-shadow bunny-overflow-hidden bunny-bg-white" }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
+                            gridTemplateColumns: everythingInPlus
+                                ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
+                                : "minmax(auto, 400px) repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))"),
+                        } }, { children: [!everythingInPlus && jsxRuntime.jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(plansToDisplay), true).map(function (_, index) {
+                                var priceList = displayPriceLists[index];
+                                var doesPrevPriceListExist = displayPriceLists[index - 1];
+                                if (!priceList)
+                                    return jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
+                                return (jsxRuntime.jsx(PriceListCard, { onClickPriceListCard: onClickPriceListCard, isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
+                            }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }), hasFeatureAddons && (jsxRuntime.jsx(PlanFeatureAddons, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay }))] }))] }))] })), selectedPriceList && addonPlans && selectedBillingPeriod ? (jsxRuntime.jsx(PlanAddonsCard, { selectedPriceList: selectedPriceList, subscriptions: subscriptions, addonPlans: addonPlans, selectedProduct: selectedProduct, priceListChangeOptions: priceListChangeOptions, selectedBillingPeriod: selectedBillingPeriod })) : null] })));
 };
 
 var Text$9 = antd.Typography.Text;
@@ -22400,42 +22859,46 @@ var PriceListCardFeature = function (_a) {
 
 var PriceListGridMobile = function (_a) {
     var _b, _c, _d, _e;
-    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
+    var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, onClickPriceListCard = _a.onClickPriceListCard;
     var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
     var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
     var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
     var prevPriceList = (_c = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _c === void 0 ? void 0 : _c.find(function (priceList) { return priceList.id === prevPriceListId; });
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-xb", style: { flexShrink: 0 } }, { children: availablePriceLists.map(function (priceList, index) {
-                    return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
+                    return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays, onClickPriceListCard: onClickPriceListCard }, index));
                 }) })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
                     ? everythingInPlusString({ priceList: prevPriceList })
-                    : "Features" })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsxRuntime.jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
+                    : 'Features' })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsxRuntime.jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
 };
 
 var PriceListGrid = function (_a) {
     var _b, _c;
-    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, upgradingSubscriptionState = _a.upgradingSubscriptionState;
+    var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, upgradingSubscriptionState = _a.upgradingSubscriptionState, selectedBillingPeriod = _a.selectedBillingPeriod, onClickPriceListCard = _a.onClickPriceListCard;
     // Hooks
     var isMobile = common.useIsMobile();
     // Derived state
     var currentPriceList = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.find(function (priceList) { var _a; return priceList.id === ((_a = upgradingSubscriptionState === null || upgradingSubscriptionState === void 0 ? void 0 : upgradingSubscriptionState.plan) === null || _a === void 0 ? void 0 : _a.id); });
     var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), 'days');
-    return isMobile ? (jsxRuntime.jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsxRuntime.jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }));
+    return isMobile ? (jsxRuntime.jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays, 
+        // TODO: add selectedBillingPeriod={selectedBillingPeriod} here too (ignore for now, mobile won't ever show this currently)
+        onClickPriceListCard: onClickPriceListCard })) : (jsxRuntime.jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays, selectedBillingPeriod: selectedBillingPeriod, onClickPriceListCard: onClickPriceListCard }));
 };
 
 var createAvailableBillingPeriods = function (priceLists, selectedProduct) {
     return priceLists === null || priceLists === void 0 ? void 0 : 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 showInfoNotification = common.useInfoNotification();
 var PriceListSelector = function (_a) {
-    var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions;
+    var _b;
+    var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, priceListChangeOptions = _a.priceListChangeOptions, subscriptions = _a.subscriptions;
     // Context
     var isInPreviewMode = react.useContext(SubscriptionsContext).isInPreviewMode;
-    var _b = react.useContext(QuotePreviewContext), quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
+    var _c = react.useContext(QuoteContext), selectedPriceList = _c.selectedPriceList, onChangeSelectedPriceList = _c.onChangeSelectedPriceList, onClearQuote = _c.onClearQuote;
     var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
     // Local state
-    var _c = react.useState(), selectedProduct = _c[0], setSelectedProduct = _c[1];
-    var _d = react.useState(), selectedBillingPeriod = _d[0], setSelectedBillingPeriod = _d[1];
-    var _e = react.useState(0), priceListStart = _e[0], setPriceListStart = _e[1];
+    var _d = react.useState(), selectedProduct = _d[0], setSelectedProduct = _d[1];
+    var _e = react.useState(), selectedBillingPeriod = _e[0], setSelectedBillingPeriod = _e[1];
+    var _f = react.useState(0), priceListStart = _f[0], setPriceListStart = _f[1];
     // Derived state
     var availableBillingPeriods = react.useMemo(function () { return createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct); }, [priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct]);
     var availablePriceLists = react.useMemo(function () {
@@ -22443,40 +22906,36 @@ var PriceListSelector = function (_a) {
         return (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) {
             return periodMonthsConverter(priceList.periodMonths) === selectedBillingPeriod &&
                 priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id);
-        })) || []);
+        }).filter(function (priceList) { return priceList.plan.addon !== true; })) || []);
     }, [priceListChangeOptions, selectedBillingPeriod, selectedProduct]);
     // Handlers
     var onChangeBillingPeriod = react.useCallback(function (billingPeriod) {
-        var _a, _b;
+        var _a;
         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 = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return periodMonthsConverter(priceList.periodMonths) === billingPeriod; })) || [];
+        if (selectedPriceList &&
+            billingPeriod !== periodMonthsConverter(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.periodMonths)) {
+            var availablePriceLists_1 = ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.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) &&
+                    priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id) &&
                     !isPriceListDisabled({
                         priceList: priceList,
                         upgradingSubscription: upgradingSubscription,
-                        canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, 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),
-                });
+                onChangeSelectedPriceList(newSelectedPriceList);
             }
             else if (isPriceListCurrentSubscription) {
-                setQuotePreviewData({
-                    quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
-                });
+                onChangeSelectedPriceList(newSelectedPriceList);
+            }
+            else {
+                onClearQuote();
             }
         }
-    }, [quotePreviewData, priceListChangeOptions, upgradingSubscription, setQuotePreviewData]);
+    }, [selectedPriceList, priceListChangeOptions, upgradingSubscription]);
     var onChangeProduct = react.useCallback(function (product) {
         var newAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, product);
         if (!(newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods.includes(billingPeriodConverter(selectedBillingPeriod)))) {
@@ -22485,8 +22944,19 @@ var PriceListSelector = function (_a) {
         setSelectedProduct(product);
     }, [priceListChangeOptions, selectedBillingPeriod, onChangeBillingPeriod]);
     // Default settings
+    var initialProduct = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products) === null || _b === void 0 ? void 0 : _b[0];
+    var initialBillingPeriod = react.useMemo(function () {
+        var initialAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, initialProduct);
+        if ((upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) &&
+            (initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods.includes(billingPeriodConverter(periodMonthsConverter(upgradingSubscription.priceList.periodMonths))))) {
+            return periodMonthsConverter(upgradingSubscription.priceList.periodMonths);
+        }
+        else {
+            return periodMonthsConverter((initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods[0]) || 1);
+        }
+    }, [upgradingSubscription]);
+    // Set initial billing period and initial product
     react.useEffect(function () {
-        var _a, _b, _c, _d;
         if (arePlanChangeOptionsLoading ||
             areSubscriptionsLoading ||
             !priceListChangeOptions ||
@@ -22494,53 +22964,47 @@ var PriceListSelector = function (_a) {
             selectedProduct ||
             selectedPriceList)
             return;
-        var initialProduct = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products) === null || _a === void 0 ? void 0 : _a[0];
-        var initialAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, 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 = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.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,
-                upgradingSubscription: upgradingSubscription,
-                canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(initialPriceList, upgradingSubscription),
-            })) {
-            setQuotePreviewData({
-                priceList: initialPriceList,
-                quantity: calculateNewQuantity(initialPriceList, initialQuantity),
-            });
-        }
     }, [
+        setSelectedBillingPeriod,
+        setSelectedProduct,
+        selectedBillingPeriod,
         arePlanChangeOptionsLoading,
         areSubscriptionsLoading,
-        isInPreviewMode,
         priceListChangeOptions,
-        selectedBillingPeriod,
         selectedPriceList,
         selectedProduct,
-        setQuotePreviewData,
-        upgradingSubscription,
     ]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsxRuntime.jsx(PriceListGrid, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription })] }));
+    // Set initial price list and initial quantity in quote preview data
+    // Will also set the initial price list and quantity if the billing period is changed
+    react.useEffect(function () {
+        var _a;
+        var initialAvailablePriceLists = ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) {
+            return periodMonthsConverter(priceList.periodMonths) === initialBillingPeriod &&
+                priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
+        })) || [];
+        var initialPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList)
+            ? initialAvailablePriceLists.find(function (priceList) { return priceList.id === upgradingSubscription.priceList.id; })
+            : undefined;
+        if (initialPriceList &&
+            !isInPreviewMode &&
+            !isPriceListDisabled({
+                priceList: initialPriceList,
+                upgradingSubscription: upgradingSubscription,
+            }) &&
+            !selectedPriceList) {
+            onChangeSelectedPriceList(initialPriceList);
+        }
+    }, [isInPreviewMode, subscriptions, upgradingSubscription, selectedBillingPeriod]);
+    var onClickPriceListCard = react.useCallback(function (selectedPriceList) {
+        if (isInPreviewMode)
+            return showInfoNotification('You are in preview mode');
+        return onChangeSelectedPriceList(selectedPriceList);
+    }, [isInPreviewMode, showInfoNotification, onChangeSelectedPriceList]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsxRuntime.jsx(PriceListGrid, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription, selectedBillingPeriod: selectedBillingPeriod, onClickPriceListCard: onClickPriceListCard })] }));
 };
 
 var PlanPicker = function () {
@@ -22549,18 +23013,15 @@ var PlanPicker = function () {
     var token = useToken();
     var apiHost = react.useContext(BunnyContext).apiHost;
     var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, upgradingSubscription = _b.upgradingSubscription;
-    var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
-    // Hooks
-    var showInfoNotification = common.useInfoNotification();
     // Queries
-    var _d = reactQuery.useQuery({
+    var _c = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createTableKey({
             pluralType: 'subscriptions',
             token: token,
         }),
         queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
-    }), subscriptions = _d.data, areSubscriptionsLoading = _d.isLoading;
-    var _e = reactQuery.useQuery({
+    }), subscriptions = _c.data, areSubscriptionsLoading = _c.isLoading;
+    var _d = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({
             subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
             token: token,
@@ -22575,25 +23036,8 @@ var PlanPicker = function () {
             });
         },
         enabled: !areSubscriptionsLoading,
-    }), priceListChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
-    // Handlers
-    var onChangePriceList = react.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
-    react.useEffect(function () {
-        return function () {
-            setQuotePreviewData({});
-        };
-    }, [setQuotePreviewData]);
-    if (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0)
-        return jsxRuntime.jsx(ErrorView, { message: "There are no plans available" });
-    return (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
+    }), priceListChangeOptions = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0 ? (jsxRuntime.jsx(ErrorView, { message: "There are no plans available" })) : (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions })) }));
 };
 
 var Text$8 = antd.Typography.Text;
@@ -22609,47 +23053,22 @@ var PlanManager = function (_a) {
     // Context
     var token = useToken();
     var apiHost = react.useContext(BunnyContext).apiHost;
-    var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, upgradingSubscription = _b.upgradingSubscription, setUpgradingSubscription = _b.setUpgradingSubscription, subscriptionUpgradeId = _b.subscriptionUpgradeId, className = _b.className;
-    var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
+    var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, className = _b.className;
+    var _c = react.useContext(QuoteContext), onClearQuote = _c.onClearQuote, selectedPriceList = _c.selectedPriceList;
     // Local state
-    var _d = react.useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
-    var _e = react.useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
-    var _f = react.useState(false), isSticky = _f[0], setIsSticky = _f[1];
+    var _d = react.useState(false), isSticky = _d[0], setIsSticky = _d[1];
     var stickyRef = react.useRef(null);
     // Hooks
-    var queryClient = reactQuery.useQueryClient();
-    var showSuccessNotification = common.useSuccessNotification();
     var showInfoNotification = common.useInfoNotification();
-    var defaultPaymentMethod = usePaymentMethod({
-        token: token,
-        apiHost: apiHost,
-    }).defaultPaymentMethod;
     // Queries
-    var _g = reactQuery.useQuery({
+    var subscriptionsAreLoading = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createTableKey({
             pluralType: 'subscriptions',
             token: token,
         }),
         queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
         enabled: false,
-    }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
-    var quote = reactQuery.useQuery({
-        queryKey: common.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;
-    react.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]);
+    }).isLoading;
     react.useEffect(function () {
         var observer = new IntersectionObserver(function (_a) {
             var entry = _a[0];
@@ -22669,41 +23088,14 @@ var PlanManager = function (_a) {
                 observer.unobserve(el);
         };
     }, []);
-    function handleSetEditingQuoteData(quoteId, isTrial) {
-        setEditingQuoteData({
-            id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) || '',
-            isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) || false,
-        });
-    }
-    // Handlers
-    var onSuccess = function () {
-        setEditingQuoteData(undefined);
-        queryClient.invalidateQueries({
-            queryKey: common.QueryKeyFactory.default.transactionsKey({ token: token }),
-        });
-        queryClient.invalidateQueries({
-            queryKey: common.QueryKeyFactory.default.createTableKey({
-                pluralType: 'subscriptions',
-                token: token,
-            }),
-        });
-        showSuccessNotification('Your plan has been updated', 'Payment successful');
-        setPayModalVisible(false);
-    };
-    var onCancel = function () {
-        setPayModalVisible(false);
-    };
-    var onFail = function (error) {
-        handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
-    };
     if (subscriptionsAreLoading && !isInPreviewMode)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [jsxRuntime.jsx(PreviewModeAdvisary, { isInPreviewMode: isInPreviewMode }), jsxRuntime.jsx(PageTitle, { onGoBack: function () {
                     if (isInPreviewMode)
                         return showInfoNotification('You are in preview mode');
-                    setQuotePreviewData(undefined);
+                    onClearQuote();
                     onChangePlanCancel();
-                }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { editingQuote: editingQuoteData, setEditingQuoteData: handleSetEditingQuoteData, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
+                }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: selectedPriceList && (jsxRuntime.jsx(PlanPickerCheckoutBar, { selectedPriceList: selectedPriceList, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } })) }))] })));
 };
 
 var useCancelSubscription = function () {
@@ -22722,6 +23114,11 @@ var useCancelSubscription = function () {
     }); };
 };
 
+var AddonIndentation = function (_a) {
+    var isLast = _a.isLast, indentation = _a.indentation, verticalMargin = _a.verticalMargin;
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-relative", style: { width: "".concat(indentation, "px") } }, { children: [jsxRuntime.jsx("div", { className: "bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto", style: { marginTop: verticalMargin } }), jsxRuntime.jsx("div", { className: "bunny-bg-gray-300 bunny-h-0.5 bunny-w-1/2 bunny-ml-auto" }), isLast ? (jsxRuntime.jsx("div", { className: "bunny-flex-1" })) : (jsxRuntime.jsx("div", { className: "bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto", style: { marginBottom: verticalMargin } }))] })));
+};
+
 var SubscriptionState;
 (function (SubscriptionState) {
     SubscriptionState["ACTIVE"] = "ACTIVE";
@@ -22854,16 +23251,20 @@ var FeatureBarChart = function (_a) {
 var StyledBarChart = defaultStyled(recharts.BarChart)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  .recharts-surface {\n    overflow: visible;\n  }\n"], ["\n  .recharts-surface {\n    overflow: visible;\n  }\n"])));
 var templateObject_1$2;
 
-var SubscriptionCardActions = function (_a) {
-    var _b;
-    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
+var usePriceListChangeOptions = function (onChangePlanClick) {
     var apiHost = react.useContext(BunnyContext).apiHost;
     var token = useToken();
-    var isPaymentMethodLoading = usePaymentMethod({
-        accountId: subscription.accountId,
-        token: token,
-        apiHost: apiHost,
-    }).isLoading;
+    var _a = reactQuery.useQuery({
+        queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
+        queryFn: function () { return getPriceListChangeOptions({ apiHost: apiHost, token: token }); },
+        enabled: Boolean(onChangePlanClick),
+    }), priceListChangeOptions = _a.data, arePriceListChangeOptionsLoading = _a.isLoading;
+    return { priceListChangeOptions: priceListChangeOptions, arePriceListChangeOptionsLoading: arePriceListChangeOptionsLoading };
+};
+
+var SubscriptionCardActions = function (_a) {
+    var _b;
+    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription, isPaymentMethodLoading = _a.isPaymentMethodLoading;
     // Derived state
     var isSelfServiceCancelable = subscription.plan.selfServiceCancel;
     var productPlans = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return priceList.product.id === subscription.product.id; });
@@ -22872,18 +23273,29 @@ var SubscriptionCardActions = function (_a) {
     var isActiveOrPending = isSubscriptionActiveOrPending(subscription);
     if (isPaymentMethodLoading)
         return null;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isSelfServiceCancelable && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), arePlansAvailable && (isActiveOrPending || isInTrial) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: 'primary' }, { children: isInTrial ? 'Upgrade from trial' : 'Change plan' }))), !arePlansAvailable && isInTrial && jsxRuntime.jsx(antd.Tag, __assign({ color: "warning" }, { children: "Cannot upgrade" }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isSelfServiceCancelable && onCancelSubscriptionClick && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), arePlansAvailable && onChangePlanClick && (isActiveOrPending || isInTrial) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: 'primary' }, { children: isInTrial ? 'Upgrade from trial' : 'Change plan' }))), !arePlansAvailable && isInTrial && jsxRuntime.jsx(antd.Tag, __assign({ color: "warning" }, { children: "Cannot upgrade" }))] }));
 };
 
 var Text$7 = antd.Typography.Text;
 var getSubscriptionStatusText = function (subscription) {
-    var _a;
-    var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate, trialExpirationAction = subscription.trialExpirationAction;
-    var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
-    if (cancellationDate &&
-        (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.CANCELED &&
-        (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.EXPIRED) {
+    var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate, trialEndDate = subscription.trialEndDate, trialStartDate = subscription.trialStartDate, startDate = subscription.startDate, trialExpirationAction = subscription.trialExpirationAction;
+    var stateUpperCased = state === null || state === void 0 ? void 0 : state.toUpperCase();
+    var isActive = stateUpperCased === common.SubscriptionState.ACTIVE;
+    var isPending = stateUpperCased === common.SubscriptionState.PENDING;
+    var isCanceled = stateUpperCased === common.SubscriptionState.CANCELED;
+    var isExpired = stateUpperCased === common.SubscriptionState.EXPIRED;
+    var isTrial = stateUpperCased === common.SubscriptionState.TRIAL;
+    if (cancellationDate && (isActive || isPending || isTrial))
         return (jsxRuntime.jsxs(CustomizedTag, __assign({ color: "red" }, { children: ["Canceled - ends on ", common.formatDate(cancellationDate)] })));
+    if (cancellationDate && isCanceled)
+        return "Canceled on ".concat(common.formatDate(cancellationDate));
+    if (isExpired)
+        return "Ended on ".concat(common.formatDate(endDate || trialEndDate));
+    if (isPending) {
+        if (trialStartDate)
+            return "Trial starts on ".concat(common.formatDate(trialStartDate));
+        if (startDate)
+            return "Activates on ".concat(common.formatDate(startDate));
     }
     if (isTrial) {
         switch (trialExpirationAction) {
@@ -22896,26 +23308,42 @@ var getSubscriptionStatusText = function (subscription) {
     if (evergreen) {
         return "Renews on ".concat(common.formatDate(endDate));
     }
-    if ((state === null || state === void 0 ? void 0 : state.toUpperCase()) === common.SubscriptionState.CANCELED ||
-        (state === null || state === void 0 ? void 0 : state.toUpperCase()) === common.SubscriptionState.EXPIRED) {
-        return "Ended on ".concat(common.formatDate(endDate));
-    }
-    return "Ends on ".concat(common.formatDate(endDate));
+    return "Ends on ".concat(common.formatDate(endDate || trialEndDate));
 };
 var SubscriptionCardHeader = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
+    var _b, _c, _d, _e;
+    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscription = _a.subscription;
+    // Context
     var darkMode = react.useContext(BunnyContext).darkMode;
     var brandColor = react.useContext(BrandContext).brandColor;
     var subscriptionProductNameStyle = react.useContext(SubscriptionsContext).subscriptionProductNameStyle;
-    var isMobile = common.useIsMobile();
     // Derived state
     var trialDaysLeft = subscription === null || subscription === void 0 ? void 0 : subscription.daysLeftInTrial;
-    var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
+    var isTrial = isSubscriptionTrial(subscription);
     return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: {
             backgroundColor: darkMode ? 'var(--row-background-dark)' : '',
-        } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: '11px', fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsxRuntime.jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft || 'N/A', " days left)") : ''] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsxRuntime.jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
+        } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_b = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _b === void 0 ? void 0 : _b.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: '11px', fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_c = subscription.product.name) === null || _c === void 0 ? void 0 : _c.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_d = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _d === void 0 ? void 0 : _d.name) && (jsxRuntime.jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_e = subscription.state) === null || _e === void 0 ? void 0 : _e.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft || 'N/A', " days left)") : ''] }))] }))] })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: jsxRuntime.jsx(SubscriptionStatusAndActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }) }))] })));
 };
+function SubscriptionStatusAndActions(_a) {
+    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscription = _a.subscription;
+    // Context
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    // Hooks
+    var token = useToken();
+    var isMobile = common.useIsMobile();
+    var _b = usePriceListChangeOptions(onChangePlanClick), priceListChangeOptions = _b.priceListChangeOptions, arePriceListChangeOptionsLoading = _b.arePriceListChangeOptionsLoading;
+    var isPaymentMethodLoading = usePaymentMethod({
+        accountId: subscription.accountId,
+        token: token,
+        apiHost: apiHost,
+    }).isLoading;
+    // Derived state
+    var cardActionsVisible = !isMobile;
+    var showStatusSkeleton = arePriceListChangeOptionsLoading && cardActionsVisible;
+    var showActionsSkeleton = arePriceListChangeOptionsLoading && !priceListChangeOptions;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showStatusSkeleton ? (jsxRuntime.jsx(antd.Skeleton.Input, { active: true, size: "small", style: { width: 180 } })) : (jsxRuntime.jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) }))), cardActionsVisible &&
+                (showActionsSkeleton ? (jsxRuntime.jsx(antd.Skeleton.Button, { active: true, size: "default", style: { width: 100 } })) : (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription, isPaymentMethodLoading: isPaymentMethodLoading })))] }));
+}
 
 var SubscriptionChargeTotal = function (_a) {
     var charge = _a.charge, subscription = _a.subscription;
@@ -23003,7 +23431,7 @@ var SubscriptionsListCell = function (_a) {
     return (jsxRuntime.jsx(Text$5, __assign({ className: "bunny-flex bunny-items-center bunny-text-sm bunny-whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
 };
 
-var CARD_COLUMNS = [
+var NON_ADDON_CARD_COLUMNS = [
     {
         title: 'CHARGE',
         width: 'minmax(min-content, 26%)',
@@ -23028,13 +23456,39 @@ var CARD_COLUMNS = [
         width: "minmax(min-content, 18%)",
     },
 ];
+var ADDON_CARD_COLUMNS = [
+    {
+        title: 'CHARGE',
+        width: 'minmax(min-content, 21.6%)',
+    },
+    {
+        title: 'PERIOD',
+        width: 'minmax(min-content, 21.1%)',
+    },
+    {
+        className: 'text-right',
+        title: 'QUANTITY',
+        width: "minmax(min-content, 19.1%)",
+    },
+    {
+        className: 'text-right',
+        title: 'UNIT PRICE',
+        width: "minmax(min-content, 19.1%)",
+    },
+    {
+        className: 'text-right',
+        title: 'TOTAL',
+        width: "minmax(min-content, 19.1%)",
+    },
+];
 var SubscriptionCardDesktop = function (_a) {
     var _b;
-    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
+    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscription = _a.subscription, isAddon = _a.isAddon;
     var shadow = react.useContext(SubscriptionsContext).shadow;
     // Derived state
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
-    return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : '') }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
+    var CARD_COLUMNS = isAddon ? ADDON_CARD_COLUMNS : NON_ADDON_CARD_COLUMNS;
+    return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : '') }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
                     gridColumn: '1 / 5',
                     width: 'calc(100% + 32px)',
                     transform: 'translateX(-16px)',
@@ -23086,6 +23540,20 @@ var SubscriptionCardDesktopRow = function (_a) {
                             : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
 };
 
+function AddonSubscriptionsCards(_a) {
+    var onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscriptions = _a.subscriptions, subscription = _a.subscription, hideExpired = _a.hideExpired;
+    var addonSubscriptions = findAddonSubscriptions(subscription, subscriptions);
+    if (addonSubscriptions.length === 0) {
+        return null;
+    }
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: addonSubscriptions.map(function (addonSubscription, addonSubscriptionIndex) {
+            if (hideExpired && isSubscriptionNotActive(addonSubscription))
+                return null;
+            var isLast = addonSubscriptionIndex === addonSubscriptions.length - 1;
+            return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row" }, { children: [jsxRuntime.jsx(AddonIndentation, { isLast: isLast, indentation: ADDON_INDENTATION, verticalMargin: "-1rem" }), jsxRuntime.jsx("div", __assign({ className: "bunny-flex-1" }, { children: jsxRuntime.jsx(SubscriptionCardDesktop, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: addonSubscription, isAddon: true }) }))] })));
+        }) }));
+}
+
 var Text$4 = antd.Typography.Text;
 var SubscriptionCardCellMobile = function (_a) {
     var children = _a.children, className = _a.className, style = _a.style;
@@ -23135,36 +23603,54 @@ var SubscriptionCard = function (_a) {
 };
 
 var SubscriptionsList = function (_a) {
-    var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscriptions = _a.subscriptions;
+    var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscriptions = _a.subscriptions;
     var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.map(function (subscription, subscriptionIndex) {
+    var nonAddonSubscriptions = findNonAddonSubscriptions(subscriptions);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: nonAddonSubscriptions === null || nonAddonSubscriptions === void 0 ? void 0 : nonAddonSubscriptions.map(function (subscription, subscriptionIndex) {
             if (hideExpired && isSubscriptionNotActive(subscription))
                 return null;
             if (isMobile)
-                return jsxRuntime.jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex);
-            return (jsxRuntime.jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }, subscriptionIndex));
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex), jsxRuntime.jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, hideExpired: hideExpired })] }));
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }, subscriptionIndex), jsxRuntime.jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, hideExpired: hideExpired })] }));
         }) }));
 };
 
-// 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 = react.useContext(BunnyContext).apiHost;
     var gap = react.useContext(SubscriptionsContext).gap;
-    var token = useToken();
-    // Queries
-    var _c = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
-        queryFn: function () { return getPriceListChangeOptions({ apiHost: apiHost, token: token }); },
-        enabled: Boolean(onChangePlanClick),
-    }), priceListChangeOptions = _c.data, arePriceListChangeOptionsLoading = _c.isLoading;
-    if (subscriptionsAreLoading ||
-        (Boolean(onChangePlanClick) ? arePriceListChangeOptionsLoading : false))
+    if (subscriptionsAreLoading)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-".concat(gap, " bunny-shrink bunny-overflow-auto") }, { children: jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions }) }))) : (noSubscriptionsComponent || (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-".concat(gap, " bunny-shrink bunny-overflow-auto") }, { children: jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscriptions: subscriptions }) }))) : (noSubscriptionsComponent || (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) }));
+};
+
+var HideExpiredToggle = function (_a) {
+    var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired;
+    var isMobile = common.useIsMobile();
+    var secondaryColor = react.useContext(BrandContext).secondaryColor;
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 bunny-pl-4" }, { children: [!isMobile && jsxRuntime.jsx(antd.Divider, { className: "bunny-h-5", type: "vertical" }), jsxRuntime.jsx(StyledCheckbox, { children: jsxRuntime.jsx(antd.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__default["default"].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 setQuantityDrawerOpen = _a.setQuantityDrawerOpen;
+    return (jsxRuntime.jsx(antd.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 = common.useIsMobile();
+    // Derived state
+    var canShowChangeQuantitiesButton = canShowChangeQuantities({
+        subscriptions: subscriptions,
+    });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-grow bunny-gap-2 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-justify-end') }, { children: canShowChangeQuantitiesButton && (jsxRuntime.jsx(ChangeQuantitiesButton, { setQuantityDrawerOpen: setQuantityDrawerOpen })) }))] }));
 };
 
 var Text$3 = antd.Typography.Text;
@@ -23179,13 +23665,12 @@ var formatDateForApi = function (date) {
     return date.format('YYYY-MM-DD');
 };
 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;
+    var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, subscriptions = _a.subscriptions, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
     // Context
     var token = useToken();
     var apiHost = react.useContext(BunnyContext).apiHost;
-    var _b = react.useContext(SubscriptionsContext), updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId;
     // Local state
-    var _c = react.useState(), editedSubscription = _c[0], setEditedSubscription = _c[1];
+    var _b = react.useState(), editedSubscription = _b[0], setEditedSubscription = _b[1];
     // Hooks
     var queryClient = reactQuery.useQueryClient();
     var createSubscriptionQuote = useCreateSubscriptionQuote();
@@ -23269,7 +23754,8 @@ var QuantityInput = function (_a) {
         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);
+        // Handle empty string - don't convert to 0, keep it as undefined
+        var quantity = value === '' ? undefined : isNaN(parseInt(value)) ? 0 : parseInt(value);
         setEditedSubscription({
             chargeIndex: chargeIndex,
             subscriptionIndex: subscriptionIndex,
@@ -23277,15 +23763,16 @@ var QuantityInput = function (_a) {
             quantity: quantity,
             subscription: subscription,
         });
-        if (quantity !== charge.quantity) {
+        if (quantity !== undefined && quantity !== charge.quantity) {
             setUpdatingChargeQuantityId(charge.id);
         }
         else {
             setUpdatingChargeQuantityId(undefined);
+            setEditingQuoteData(undefined);
         }
     };
     var handleSubscriptionUpdate = function (editedSubscription) {
-        if (!editedSubscription)
+        if (!editedSubscription || editedSubscription.quantity === undefined)
             return;
         // If we are not editing a quote, we create a new one
         if (!editingQuote) {
@@ -23303,7 +23790,7 @@ var QuantityInput = function (_a) {
         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) {
+            if (quoteChange && charges.length > 0 && charges[0].quantity > 0) {
                 updateQuote.mutate({
                     charges: charges,
                     quoteChangeId: quoteChange.id,
@@ -23356,10 +23843,11 @@ var QuantityInput = function (_a) {
 var Text$2 = antd.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;
+    var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
     if (!canShowQuantitiesInput(subscriptionCharge, subscription))
         return null;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-orange-600 bunny-col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsxRuntime.jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions }), jsxRuntime.jsx("div", {})] })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
+    var brandColor = react.useContext(BrandContext).brandColor;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium  bunny-col-span-full", style: { fontSize: '11px', color: brandColor } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsxRuntime.jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsxRuntime.jsx("div", {})] })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
 };
 
 var QuantityChangeGridTitle = function (_a) {
@@ -23389,7 +23877,7 @@ var QuoteChangeSummarySection = function (_a) {
 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 editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
     var _b = react.useState(open), openLocal = _b[0], setOpenLocal = _b[1];
     var isMobile = common.useIsMobile();
     react.useEffect(function () {
@@ -23421,11 +23909,11 @@ var QuantityChangeDrawerDesktop = function (_a) {
                 wrapper: {
                     minWidth: '600px',
                 },
-            }, title: jsxRuntime.jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-pb-4", style: {
+            }, title: jsxRuntime.jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-pb-2", style: {
                     gridTemplateColumns: '2fr 1fr 1fr',
-                    rowGap: '0.75rem',
+                    rowGap: '0.25rem',
                     columnGap: '1rem',
-                } }, { children: [jsxRuntime.jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-py-2" }), subscriptions.map(function (subscription, index) {
+                } }, { children: [jsxRuntime.jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full" }), subscriptions.map(function (subscription, index) {
                         var _a;
                         var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
                         return (jsxRuntime.jsx("div", __assign({ className: "bunny-contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
@@ -23434,40 +23922,67 @@ var QuantityChangeDrawerDesktop = function (_a) {
                                     (!isTrial && charge.trial) ||
                                     ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'USAGE')
                                     return null;
-                                return (jsxRuntime.jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions }, chargeIndex));
+                                return (jsxRuntime.jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }, chargeIndex));
                             }) }), index));
                     })] })), jsxRuntime.jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData })] })));
 };
 
-var HideExpiredToggle = function (_a) {
-    var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired;
-    var isMobile = common.useIsMobile();
-    var secondaryColor = react.useContext(BrandContext).secondaryColor;
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 bunny-pl-4" }, { children: [!isMobile && jsxRuntime.jsx(antd.Divider, { className: "bunny-h-5", type: "vertical" }), jsxRuntime.jsx(StyledCheckbox, { children: jsxRuntime.jsx(antd.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__default["default"].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 (jsxRuntime.jsx(antd.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 = common.useIsMobile();
-    // Derived state
-    var canShowChangeQuantitiesButton = canShowChangeQuantities({
-        subscriptions: subscriptions,
-    });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-grow bunny-gap-2 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-justify-end') }, { children: canShowChangeQuantitiesButton && (jsxRuntime.jsx(ChangeQuantitiesButton, { canShowChangeQuantitiesButton: canShowChangeQuantitiesButton, setQuantityDrawerOpen: setQuantityDrawerOpen })) }))] }));
+var QuantityDrawerContainer = function (_a) {
+    var subscriptions = _a.subscriptions, quantityDrawerOpen = _a.quantityDrawerOpen, setQuantityDrawerOpen = _a.setQuantityDrawerOpen, handlePortalErrors = _a.handlePortalErrors, setHideExpiredState = _a.setHideExpiredState;
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var token = useToken();
+    var queryClient = reactQuery.useQueryClient();
+    var showSuccessNotification = common.useSuccessNotification();
+    // State management
+    var _b = react.useState(), editingQuoteData = _b[0], setEditingQuoteData = _b[1];
+    var _c = react.useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
+    var _d = react.useState(undefined), updatingChargeQuantityId = _d[0], setUpdatingChargeQuantityId = _d[1];
+    // Quote query
+    var quote = reactQuery.useQuery({
+        queryKey: common.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;
+    // Handlers
+    var onSuccess = function () {
+        setQuantityDrawerOpen(false);
+        setEditingQuoteData(undefined);
+        queryClient.invalidateQueries({
+            queryKey: common.QueryKeyFactory.default.transactionsKey({ token: token }),
+        });
+        queryClient.invalidateQueries({
+            queryKey: common.QueryKeyFactory.default.createTableKey({
+                pluralType: 'subscriptions',
+                token: token,
+            }),
+        });
+        showSuccessNotification('Your plan has been updated', 'Payment successful');
+        setPayModalVisible(false);
+        setHideExpiredState(true);
+        setUpdatingChargeQuantityId(undefined);
+    };
+    var onCancel = function () {
+        setPayModalVisible(false);
+    };
+    var onFail = function (error) {
+        handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
+    };
+    var handleDrawerClose = function () {
+        if (updatingChargeQuantityId) {
+            setUpdatingChargeQuantityId(undefined);
+        }
+        setQuantityDrawerOpen(false);
+    };
+    var handleOpenCheckout = function () {
+        setPayModalVisible(true);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: handleDrawerClose, open: quantityDrawerOpen, openCheckout: handleOpenCheckout, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: false })] }));
 };
 
 var Text$1 = antd.Typography.Text;
@@ -23483,8 +23998,6 @@ var SubscriptionsWrapper = function (_a) {
     };
     var styles = __assign(__assign({}, defaultStyles), userStyles);
     var _f = react.useState(undefined), upgradingSubscription = _f[0], setUpgradingSubscription = _f[1];
-    var _g = react.useState(undefined), updatingChargeQuantityId = _g[0], setUpdatingChargeQuantityId = _g[1];
-    var _h = react.useState(null), subscriptionUpgradeId = _h[0], setSubscriptionUpgradeId = _h[1];
     return (jsxRuntime.jsx(SubscriptionsContext.Provider, __assign({ value: {
             gap: styles.gap,
             shadow: styles.shadow,
@@ -23495,55 +24008,34 @@ var SubscriptionsWrapper = function (_a) {
             hideExpired: hideExpired,
             upgradingSubscription: upgradingSubscription,
             setUpgradingSubscription: setUpgradingSubscription,
-            updatingChargeQuantityId: updatingChargeQuantityId,
-            setUpdatingChargeQuantityId: setUpdatingChargeQuantityId,
-            subscriptionUpgradeId: subscriptionUpgradeId,
-            setSubscriptionUpgradeId: setSubscriptionUpgradeId,
-        } }, { children: jsxRuntime.jsx(QuotePreviewProvider, { children: jsxRuntime.jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) }) })));
+        } }, { children: jsxRuntime.jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) })));
 };
 var Subscriptions = function (_a) {
     var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, noSubscriptionsComponent = _a.noSubscriptionsComponent, hideTitle = _a.hideTitle, hideExpiredToggle = _a.hideExpiredToggle;
     // Context
     var token = useToken();
     var apiHost = react.useContext(BunnyContext).apiHost;
-    var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _b.setSubscriptionUpgradeId, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired;
+    var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired;
     // Local state
-    var _c = react.useState(), editingQuoteData = _c[0], setEditingQuoteData = _c[1];
-    var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
-    var _e = react.useState(true), hideExpiredState = _e[0], setHideExpiredState = _e[1];
+    var _c = react.useState(true), hideExpiredState = _c[0], setHideExpiredState = _c[1];
+    var _d = react.useState(false), expiredSwitchVisible = _d[0], setExpiredSwitchVisible = _d[1];
+    var _e = react.useState(false), isChangingPlan = _e[0], setIsChangingPlan = _e[1];
     var _f = react.useState(false), quantityDrawerOpen = _f[0], setQuantityDrawerOpen = _f[1];
-    var _g = react.useState(false), expiredSwitchVisible = _g[0], setExpiredSwitchVisible = _g[1];
-    var _h = react.useState(false), isChangingPlan = _h[0], setIsChangingPlan = _h[1];
+    // Derived state
     var hideExpired = hideExpiredOverride !== null && hideExpiredOverride !== void 0 ? hideExpiredOverride : hideExpiredState;
     // Hooks
     var queryClient = reactQuery.useQueryClient();
     var showSuccessNotification = common.useSuccessNotification();
-    var quoteDelete = useQuoteDelete();
     var isMobile = common.useIsMobile();
-    var defaultPaymentMethod = usePaymentMethod({
-        token: token,
-        apiHost: apiHost,
-    }).defaultPaymentMethod;
     var cancelSubscription = useCancelSubscription();
     // Queries
-    var quote = reactQuery.useQuery({
-        queryKey: common.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 _j = reactQuery.useQuery({
+    var _g = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createTableKey({
             pluralType: 'subscriptions',
             token: token,
         }),
         queryFn: function () { return getSubscriptions({ token: token, apiHost: apiHost }); },
-    }), subscriptions = _j.data, subscriptionsAreLoading = _j.isLoading;
+    }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
     // Mutations
     var subscriptionCancel = reactQuery.useMutation({
         mutationFn: function (subscription) {
@@ -23562,50 +24054,13 @@ var Subscriptions = function (_a) {
     // Handlers
     var onChangePlanClick = function (subscription) {
         if (subscription) {
-            setSubscriptionUpgradeId(subscription.id);
             setUpgradingSubscription(subscription);
         }
-        else {
-            setSubscriptionUpgradeId(null);
-            setUpgradingSubscription(undefined);
-        }
         setIsChangingPlan(true);
     };
     var onCancelSubscriptionClick = function (subscription) {
         subscriptionCancel.mutate(subscription);
     };
-    var onSuccess = function () {
-        setQuantityDrawerOpen(false);
-        setEditingQuoteData(undefined);
-        queryClient.invalidateQueries({
-            queryKey: common.QueryKeyFactory.default.transactionsKey({ token: token }),
-        });
-        queryClient.invalidateQueries({
-            queryKey: common.QueryKeyFactory.default.createTableKey({
-                pluralType: 'subscriptions',
-                token: token,
-            }),
-        });
-        showSuccessNotification('Your plan has been updated', 'Payment successful');
-        setPayModalVisible(false);
-        setHideExpiredState(true);
-    };
-    var onCancel = function () {
-        setPayModalVisible(false);
-    };
-    var onFail = function (error) {
-        handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
-    };
-    var onClose = function () {
-        if (editingQuoteData) {
-            quoteDelete(editingQuoteData.id, apiHost, token);
-            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()) === common.SubscriptionState.EXPIRED ||
@@ -23625,11 +24080,11 @@ var Subscriptions = function (_a) {
             setExpiredSwitchVisible(true);
     }, [hasExpiredOrCanceledSubscriptions, subscriptions]);
     if (isChangingPlan || isInPreviewMode) {
-        return (jsxRuntime.jsx(PlanManager, { onChangePlanCancel: function () {
-                setIsChangingPlan(false);
-            }, handlePortalErrors: handlePortalErrors }));
+        return (jsxRuntime.jsx(QuoteProvider, { children: jsxRuntime.jsx(PlanManager, { onChangePlanCancel: function () {
+                    setIsChangingPlan(false);
+                }, handlePortalErrors: handlePortalErrors }) }));
     }
-    return (jsxRuntime.jsxs("div", __assign({ className: className }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod })] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: className }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityDrawerContainer, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setHideExpiredState: setHideExpiredState })] })));
 };
 var PageHeaderWithActions = function (_a) {
     var children = _a.children, title = _a.title;
@@ -23671,7 +24126,6 @@ var billingDetailsUpdate = function (_a) {
     });
 };
 
-// TODO: move this to common
 var billingDetailsQuery = function () {
     return "\nquery BillingDetails {\n  billingDetails {\n    billingCity\n    billingContact {\n      email\n    }\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    name\n    taxNumber\n    currency {\n      id\n    }\n  }\n}";
 };
@@ -23876,9 +24330,6 @@ var PaymentFormSection = function (_a) {
     var onTokenExpired = react.useContext(BunnyContext).onTokenExpired;
     var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
     var showSuccessNotification = common.useSuccessNotification();
-    var token = useToken();
-    var account = useCurrentUserData(token).account;
-    var currencyId = account === null || account === void 0 ? void 0 : account.currencyId;
     return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
                 handleAllErrorFormats(error);
             }, onSavePaymentMethod: function (response) {
@@ -23888,7 +24339,7 @@ var PaymentFormSection = function (_a) {
                 // TODO: onSavePaymentMethod(response: any) should be cleaned up to have a response type (not any)
                 // and work with both stripe and demo pay requests
                 onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
-            }, currencyId: currencyId }) })));
+            } }) })));
 };
 
 exports.BillingDetails = BillingDetails;