@bunnyapp/components 1.0.73 → 1.0.76-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/dist/cjs/index.js +538 -316
  2. package/dist/cjs/src/components/Invoice/Invoice.stories.d.ts +2 -2
  3. package/dist/cjs/src/components/Invoice/index.d.ts +1 -2
  4. package/dist/cjs/src/components/PaymentForm/CheckoutFooter.d.ts +3 -4
  5. package/dist/cjs/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +2 -2
  6. package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +2 -2
  7. package/dist/cjs/src/components/PaymentForm/Stripe/hooks/usePay.d.ts +2 -2
  8. package/dist/cjs/src/components/QuotePreviewProvider.d.ts +17 -0
  9. package/dist/cjs/src/components/Quotes/Quotes.d.ts +6 -6
  10. package/dist/cjs/src/components/Quotes/Quotes.stories.d.ts +2 -2
  11. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +0 -5
  12. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +2 -2
  13. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListSelector.d.ts +2 -3
  14. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +1 -3
  15. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +62 -2
  16. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/FeatureAddons.d.ts +9 -0
  17. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +3 -3
  18. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +2 -2
  19. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +3 -3
  20. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +7 -0
  21. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +3 -2
  22. package/dist/cjs/src/components/Subscriptions/SubscriptionsContext.d.ts +0 -3
  23. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +2 -2
  24. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardHeader.d.ts +1 -1
  25. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +3 -1
  26. package/dist/cjs/src/components/Transactions/Transactions.d.ts +5 -5
  27. package/dist/cjs/src/components/Transactions/TransactionsListContext.d.ts +8 -8
  28. package/dist/cjs/src/components/Transactions/transactionsList/TransactionDownload.d.ts +2 -2
  29. package/dist/cjs/src/components/Transactions/transactionsList/TransactionTitle.d.ts +3 -3
  30. package/dist/cjs/src/components/Transactions/transactionsList/TransactionsListDesktop.d.ts +4 -4
  31. package/dist/cjs/src/components/Transactions/transactionsList/TransactionsListMobile.d.ts +3 -3
  32. package/dist/cjs/src/components/Transactions/transactionsList/utils.d.ts +3 -3
  33. package/dist/cjs/src/graphql/mutations/quoteChargeCreate.d.ts +2 -1
  34. package/dist/cjs/src/graphql/mutations/quoteChargeDelete.d.ts +7 -0
  35. package/dist/cjs/src/graphql/queries/getTransactions.d.ts +2 -2
  36. package/dist/cjs/src/hooks/quotes/useQuoteUpdateFeatureAddon.d.ts +8 -0
  37. package/dist/cjs/src/utils/featureAddonUtils.d.ts +3 -0
  38. package/dist/esm/index.js +542 -320
  39. package/dist/esm/src/components/Invoice/Invoice.stories.d.ts +2 -2
  40. package/dist/esm/src/components/Invoice/index.d.ts +1 -2
  41. package/dist/esm/src/components/PaymentForm/CheckoutFooter.d.ts +3 -4
  42. package/dist/esm/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +2 -2
  43. package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +2 -2
  44. package/dist/esm/src/components/PaymentForm/Stripe/hooks/usePay.d.ts +2 -2
  45. package/dist/esm/src/components/QuotePreviewProvider.d.ts +17 -0
  46. package/dist/esm/src/components/Quotes/Quotes.d.ts +6 -6
  47. package/dist/esm/src/components/Quotes/Quotes.stories.d.ts +2 -2
  48. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +0 -5
  49. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +2 -2
  50. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListSelector.d.ts +2 -3
  51. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +1 -3
  52. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +62 -2
  53. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/FeatureAddons.d.ts +9 -0
  54. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +3 -3
  55. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +2 -2
  56. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +3 -3
  57. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +7 -0
  58. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +3 -2
  59. package/dist/esm/src/components/Subscriptions/SubscriptionsContext.d.ts +0 -3
  60. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +2 -2
  61. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardHeader.d.ts +1 -1
  62. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +3 -1
  63. package/dist/esm/src/components/Transactions/Transactions.d.ts +5 -5
  64. package/dist/esm/src/components/Transactions/TransactionsListContext.d.ts +8 -8
  65. package/dist/esm/src/components/Transactions/transactionsList/TransactionDownload.d.ts +2 -2
  66. package/dist/esm/src/components/Transactions/transactionsList/TransactionTitle.d.ts +3 -3
  67. package/dist/esm/src/components/Transactions/transactionsList/TransactionsListDesktop.d.ts +4 -4
  68. package/dist/esm/src/components/Transactions/transactionsList/TransactionsListMobile.d.ts +3 -3
  69. package/dist/esm/src/components/Transactions/transactionsList/utils.d.ts +3 -3
  70. package/dist/esm/src/graphql/mutations/quoteChargeCreate.d.ts +2 -1
  71. package/dist/esm/src/graphql/mutations/quoteChargeDelete.d.ts +7 -0
  72. package/dist/esm/src/graphql/queries/getTransactions.d.ts +2 -2
  73. package/dist/esm/src/hooks/quotes/useQuoteUpdateFeatureAddon.d.ts +8 -0
  74. package/dist/esm/src/utils/featureAddonUtils.d.ts +3 -0
  75. package/dist/index.d.ts +10 -11
  76. package/package.json +3 -4
package/dist/cjs/index.js CHANGED
@@ -56,7 +56,7 @@ function styleInject(css, ref) {
56
56
  }
57
57
  }
58
58
 
59
- 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-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-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-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-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";
59
+ 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-h-4 {\n height: 1rem;\n}\n.bunny-h-3 {\n height: 0.75rem;\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-w-4 {\n width: 1rem;\n}\n.bunny-w-3 {\n width: 0.75rem;\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-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-bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / 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-300 {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / 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-text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / 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";
60
60
  styleInject(css_248z);
61
61
 
62
62
  /******************************************************************************
@@ -154,7 +154,7 @@ var BrandContext = react.createContext({
154
154
  });
155
155
 
156
156
  // This will be replaced at build time by rollup-plugin-replace
157
- var PACKAGE_VERSION = '1.0.72';
157
+ var PACKAGE_VERSION = '1.0.76-beta.2';
158
158
  var createRequestHeaders = function (token) {
159
159
  var headers = common.createClientDevHeaders(token);
160
160
  // Add the components version header
@@ -234,15 +234,6 @@ var extraQueryClient = new reactQuery.QueryClient();
234
234
  function BunnyProvider(_a) {
235
235
  var children = _a.children, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, queryClient = _a.queryClient, apiHost = _a.apiHost, token = _a.token, onTokenExpired = _a.onTokenExpired, configProviderProps = _a.configProviderProps;
236
236
  var graphQLClient = createGraphQLClient(apiHost || '', token);
237
- react.useEffect(function () {
238
- var script = document.createElement('script');
239
- script.src = 'https://js.finix.com/v/1/0/6/finix.js';
240
- script.async = false;
241
- document.getElementsByTagName('head')[0].appendChild(script);
242
- return function () {
243
- document.getElementsByTagName('head')[0].removeChild(script);
244
- };
245
- }, []);
246
237
  return (jsxRuntime.jsx(BunnyContext.Provider, __assign({ value: {
247
238
  darkMode: darkMode,
248
239
  graphQLClient: graphQLClient,
@@ -945,7 +936,7 @@ function usePay(_a) {
945
936
  var handleAllErrorFormats = common.useAllErrorFormats();
946
937
  var showErrorNotification$3 = common.useErrorNotification();
947
938
  var ActualCheckoutFooter = function (_a) {
948
- var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, noPadding = _a.noPadding, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
939
+ var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
949
940
  var isMobile = common.useIsMobile();
950
941
  var _b = react.useState(false), isPaying = _b[0], setIsPaying = _b[1];
951
942
  var defaultPaymentMethod = react.useContext(PaymentContext).defaultPaymentMethod;
@@ -1067,20 +1058,20 @@ var ActualCheckoutFooter = function (_a) {
1067
1058
  });
1068
1059
  }); };
1069
1060
  if (paymentHoldOptions === null || paymentHoldOptions === void 0 ? void 0 : paymentHoldOptions.payToAccept) {
1070
- return (jsxRuntime.jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? '' : '') }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isPaying, onClick: function () {
1071
- handleApproveHold();
1072
- }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Approving hold for' : 'Approve hold for', " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : '') })) })));
1061
+ return (jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: isPaying, onClick: function () {
1062
+ handleApproveHold();
1063
+ }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Approving hold for' : 'Approve hold for', " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : '') })));
1073
1064
  }
1074
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-gap-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: isPaying, onClick: function () {
1075
- setIsPaying(true);
1076
- handlePaymentSubmit();
1077
- }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Paying' : 'Pay', " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : '') })) })));
1065
+ return (jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: isPaying, onClick: function () {
1066
+ setIsPaying(true);
1067
+ handlePaymentSubmit();
1068
+ }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Paying' : 'Pay', " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : '') })));
1078
1069
  };
1079
1070
  var CheckoutFooter = function (_a) {
1080
- var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, noPadding = _a.noPadding, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
1071
+ var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
1081
1072
  if (!plugin)
1082
1073
  return null;
1083
- return (jsxRuntime.jsx(ActualCheckoutFooter, { paymentHoldOptions: paymentHoldOptions, plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, noPadding: noPadding }));
1074
+ return (jsxRuntime.jsx(ActualCheckoutFooter, { paymentHoldOptions: paymentHoldOptions, plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess }));
1084
1075
  };
1085
1076
 
1086
1077
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -18936,7 +18927,8 @@ var PaymentMethodDetails = function (_a) {
18936
18927
  case 'DemoPayPayment':
18937
18928
  return (jsxRuntime.jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
18938
18929
  default:
18939
- return jsxRuntime.jsx("p", { children: "Can not find form for plugin" });
18930
+ console.warn('Can not find form for plugin', plugin);
18931
+ return jsxRuntime.jsx(jsxRuntime.Fragment, {});
18940
18932
  }
18941
18933
  };
18942
18934
 
@@ -19100,7 +19092,7 @@ var PaymentForm = function (_a) {
19100
19092
  }, [paymentPlugins, defaultPaymentMethod]);
19101
19093
  // Derived state
19102
19094
  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()); });
19103
- var paying = !!(quote || invoice);
19095
+ var paying = Boolean(quote || invoice);
19104
19096
  var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) ||
19105
19097
  (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
19106
19098
  currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
@@ -19192,7 +19184,7 @@ var PaymentForm = function (_a) {
19192
19184
  label: !showPaymentMethodForm ? (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null,
19193
19185
  children: (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins || [], value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] }))),
19194
19186
  },
19195
- ] }), paying ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultPaymentMethod ? (jsxRuntime.jsx("div", __assign({ className: "bunny-px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethodPlugin, onPaymentHoldSuccess: onPaymentHoldSuccess, paymentHoldOptions: paymentHoldOptions }) }))) : null })) : null] })) : (jsxRuntime.jsx(antd.Button, __assign({ style: { margin: '0 16px' }, loading: isCheckingOutNoPayment, onClick: function () { return checkoutNoPayment(); }, type: "primary" }, { children: isCheckingOutNoPayment ? 'Processing...' : 'Complete Order' }))) }) })) })) })));
19187
+ ] }), paying && defaultPaymentMethod && (jsxRuntime.jsx("div", __assign({ className: "bunny-px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethodPlugin, onPaymentHoldSuccess: onPaymentHoldSuccess, paymentHoldOptions: paymentHoldOptions }) })))] })) : (jsxRuntime.jsx(antd.Button, __assign({ style: { margin: '0 16px' }, loading: isCheckingOutNoPayment, onClick: function () { return checkoutNoPayment(); }, type: "primary" }, { children: isCheckingOutNoPayment ? 'Processing...' : 'Complete Order' }))) }) })) })) })));
19196
19188
  };
19197
19189
  function StripeWrapper(_a) {
19198
19190
  var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
@@ -19787,31 +19779,31 @@ var StateTag = function (_a) {
19787
19779
  if (transactionStateRenderer) {
19788
19780
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactionStateRenderer(state) });
19789
19781
  }
19790
- return (jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) })));
19782
+ return jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) }));
19791
19783
  };
19792
19784
  var getColor = function (state) {
19793
19785
  switch (state) {
19794
- case common.FrontendTransaction.TransactionState.not_due:
19795
- return "yellow";
19796
- case common.FrontendTransaction.TransactionState.voided:
19797
- return "black";
19798
- case common.FrontendTransaction.TransactionState.ready:
19799
- return "orange";
19800
- case common.FrontendTransaction.TransactionState.preparing:
19801
- return "purple";
19802
- case common.FrontendTransaction.TransactionState.unapplied:
19803
- case common.FrontendTransaction.TransactionState.partially_applied:
19804
- case common.FrontendTransaction.TransactionState.applied:
19805
- return "blue";
19806
- case common.FrontendTransaction.TransactionState.due:
19807
- case common.FrontendTransaction.TransactionState.unpaid:
19808
- return "orange";
19809
- case common.FrontendTransaction.TransactionState.failed:
19810
- return "red";
19811
- case common.FrontendTransaction.TransactionState.paid:
19812
- return "green";
19786
+ case common.TransactionState.not_due:
19787
+ return 'yellow';
19788
+ case common.TransactionState.voided:
19789
+ return 'black';
19790
+ case common.TransactionState.ready:
19791
+ return 'orange';
19792
+ case common.TransactionState.preparing:
19793
+ return 'purple';
19794
+ case common.TransactionState.unapplied:
19795
+ case common.TransactionState.partially_applied:
19796
+ case common.TransactionState.applied:
19797
+ return 'blue';
19798
+ case common.TransactionState.due:
19799
+ case common.TransactionState.unpaid:
19800
+ return 'orange';
19801
+ case common.TransactionState.failed:
19802
+ return 'red';
19803
+ case common.TransactionState.paid:
19804
+ return 'green';
19813
19805
  default:
19814
- return "blue";
19806
+ return 'blue';
19815
19807
  }
19816
19808
  };
19817
19809
 
@@ -19832,7 +19824,7 @@ var TransactionDownload = function (_a) {
19832
19824
  var downloadTransactionLink = react.useContext(TransactionsListContext).downloadTransactionLink;
19833
19825
  var downloadFile = useDownloadFile();
19834
19826
  var isMobile = common.useIsMobile();
19835
- var isClickable = transaction.kind === "INVOICE" || downloadTransactionLink !== undefined;
19827
+ var isClickable = transaction.kind === 'INVOICE' || downloadTransactionLink !== undefined;
19836
19828
  var downloadLink = downloadTransactionLink
19837
19829
  ? downloadTransactionLink(transaction.transactionableId)
19838
19830
  : "".concat(apiHost, "/api/pdf/invoice/").concat(transaction.transactionableId);
@@ -19841,7 +19833,7 @@ var TransactionDownload = function (_a) {
19841
19833
  return (jsxRuntime.jsx("div", __assign({ onClick: function (e) {
19842
19834
  e.stopPropagation();
19843
19835
  downloadFile(downloadLink, token);
19844
- } }, { children: jsxRuntime.jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "bunny-show-on-hover"), color: darkMode ? common.WHITE : common.SLATE_600 }) })));
19836
+ } }, { children: jsxRuntime.jsx(ArrowDownToLine, { className: "".concat(isMobile ? '' : 'bunny-show-on-hover'), color: darkMode ? common.WHITE : common.SLATE_600 }) })));
19845
19837
  };
19846
19838
 
19847
19839
  var TransactionGridCell = defaultStyled.div.withConfig({
@@ -19863,29 +19855,25 @@ var TransactionsEmptyState = function () {
19863
19855
 
19864
19856
  var Text$k = antd.Typography.Text;
19865
19857
  var isInvoice = function (transaction) {
19866
- return transaction.kind === "INVOICE";
19867
- };
19868
- var isQuote = function (transaction) {
19869
- return transaction.kind === "QUOTE";
19858
+ return transaction.kind === 'INVOICE';
19870
19859
  };
19871
19860
  var TransactionRowTitle = function (_a) {
19872
19861
  var transaction = _a.transaction;
19873
- if (!isInvoice(transaction) && !isQuote(transaction)) {
19862
+ if (!isInvoice(transaction)) {
19874
19863
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
19875
19864
  }
19876
- return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19865
+ return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: '11px' } }, { children: transaction.transactionable.number })));
19877
19866
  };
19878
19867
 
19879
19868
  function transactionDateToDisplay(transaction, transactionDateType) {
19880
- var _a, _b;
19881
- if (transaction.kind === "PAYMENT") {
19869
+ if (transaction.kind === common.TransactionKind.PAYMENT) {
19882
19870
  return transaction.createdAt;
19883
19871
  }
19884
- else if (transaction.kind !== "REFUND" && transactionDateType === "dueAt") {
19885
- return (_a = transaction.transactionable) === null || _a === void 0 ? void 0 : _a.dueAt;
19872
+ else if (transaction.kind !== common.TransactionKind.REFUND && transactionDateType === 'dueAt') {
19873
+ return transaction.transactionable.dueAt || '';
19886
19874
  }
19887
- else if (transactionDateType === "issuedAt") {
19888
- return (_b = transaction.transactionable) === null || _b === void 0 ? void 0 : _b.issuedAt;
19875
+ else if (transactionDateType === 'issuedAt') {
19876
+ return transaction.transactionable.issuedAt || '';
19889
19877
  }
19890
19878
  else {
19891
19879
  return transaction.createdAt;
@@ -19899,29 +19887,29 @@ var TransactionsListDesktop = function (_a) {
19899
19887
  var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
19900
19888
  var token = useToken();
19901
19889
  // Columns to show
19902
- var showDate = columns.includes("date");
19903
- var showTitle = columns.includes("title");
19904
- var showAccountName = columns.includes("accountName");
19905
- var showDownload = columns.includes("download");
19906
- var showAmount = columns.includes("amount");
19907
- var showState = columns.includes("state");
19890
+ var showDate = columns.includes('date');
19891
+ var showTitle = columns.includes('title');
19892
+ var showAccountName = columns.includes('accountName');
19893
+ var showDownload = columns.includes('download');
19894
+ var showAmount = columns.includes('amount');
19895
+ var showState = columns.includes('state');
19908
19896
  if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
19909
19897
  return jsxRuntime.jsx(TransactionsEmptyState, {});
19910
19898
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
19911
19899
  var _a, _b;
19912
19900
  var isClickable = onTransactionClick !== undefined;
19913
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
19901
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && 'cursor-pointer', " bunny-show-on-hover-container"), onClick: function () {
19914
19902
  onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
19915
19903
  }, style: {
19916
19904
  backgroundColor: index % 2 === 0
19917
- ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
19918
- : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
19905
+ ? "var(--row-background".concat(darkMode ? '-dark' : '', ")")
19906
+ : "var(--row-background-alternate".concat(darkMode ? '-dark' : '', ")"),
19919
19907
  } }, { children: [!showDate &&
19920
19908
  !showTitle &&
19921
19909
  !showState &&
19922
19910
  !showAmount &&
19923
19911
  !showDownload &&
19924
- !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));
19912
+ !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));
19925
19913
  }) }));
19926
19914
  };
19927
19915
 
@@ -19931,25 +19919,24 @@ var TransactionsListMobile = function (_a) {
19931
19919
  var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
19932
19920
  var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
19933
19921
  var token = useToken();
19934
- var showAmount = columns.includes("amount");
19935
- var showDate = columns.includes("date");
19936
- var showTitle = columns.includes("title");
19937
- var showAccountName = columns.includes("accountName");
19938
- var showDownload = columns.includes("download");
19939
- var showState = columns.includes("state");
19922
+ var showAmount = columns.includes('amount');
19923
+ var showDate = columns.includes('date');
19924
+ var showTitle = columns.includes('title');
19925
+ var showAccountName = columns.includes('accountName');
19926
+ var showDownload = columns.includes('download');
19927
+ var showState = columns.includes('state');
19940
19928
  if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
19941
19929
  return jsxRuntime.jsx(TransactionsEmptyState, {});
19942
19930
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
19943
19931
  var _a;
19944
- var isClickable = transaction.kind === "INVOICE";
19945
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
19932
+ var isClickable = transaction.kind === 'INVOICE';
19933
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && 'cursor-pointer', " bunny-show-on-hover-container"), onClick: function () {
19946
19934
  onTransactionClick(transaction);
19947
19935
  }, style: {
19948
19936
  backgroundColor: index % 2 === 0
19949
- ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
19950
- : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
19951
- } }, { 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 ||
19952
- transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
19937
+ ? "var(--row-background".concat(darkMode ? '-dark' : '', ")")
19938
+ : "var(--row-background-alternate".concat(darkMode ? '-dark' : '', ")"),
19939
+ } }, { 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));
19953
19940
  }) }));
19954
19941
  };
19955
19942
 
@@ -20079,9 +20066,9 @@ function TransactionsDisplay(_a) {
20079
20066
  }
20080
20067
 
20081
20068
  function Quotes(_a) {
20082
- var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ["date", "title", "amount", "download", "state"] : _b, filter = _a.filter, filterQuotes = _a.filterQuotes, _c = _a.sort, sort = _c === void 0 ? function (a, b) {
20069
+ var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ['date', 'title', 'amount', 'download', 'state'] : _b, filter = _a.filter, filterQuotes = _a.filterQuotes, _c = _a.sort, sort = _c === void 0 ? function (a, b) {
20083
20070
  return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
20084
- } : _c, _d = _a.noQuotesMessage, noQuotesMessage = _d === void 0 ? "There are no quotes" : _d, onQuoteClick = _a.onQuoteClick, quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _e = _a.shadow, shadow = _e === void 0 ? "shadow-md" : _e, _f = _a.showSearchBar, showSearchBar = _f === void 0 ? true : _f, _g = _a.showTitle, showTitle = _g === void 0 ? true : _g, _h = _a.title, title = _h === void 0 ? "Past quotes" : _h, style = _a.style, _j = _a.suppressQuoteDisplay, suppressQuoteDisplay = _j === void 0 ? false : _j, _k = _a.useModal, useModal = _k === void 0 ? false : _k;
20071
+ } : _c, _d = _a.noQuotesMessage, noQuotesMessage = _d === void 0 ? 'There are no quotes' : _d, onQuoteClick = _a.onQuoteClick, quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _e = _a.shadow, shadow = _e === void 0 ? 'shadow-md' : _e, _f = _a.showSearchBar, showSearchBar = _f === void 0 ? true : _f, _g = _a.showTitle, showTitle = _g === void 0 ? true : _g, _h = _a.title, title = _h === void 0 ? 'Past quotes' : _h, style = _a.style, _j = _a.suppressQuoteDisplay, suppressQuoteDisplay = _j === void 0 ? false : _j, _k = _a.useModal, useModal = _k === void 0 ? false : _k;
20085
20072
  var apiHost = react.useContext(BunnyContext).apiHost;
20086
20073
  var _l = react.useState(null), component = _l[0], setComponent = _l[1];
20087
20074
  var contextValues = {
@@ -20107,27 +20094,27 @@ function Quotes(_a) {
20107
20094
  filterTransactions: filterQuotes,
20108
20095
  sortTransactions: sort,
20109
20096
  downloadTransactionLink: function (id) { return "".concat(apiHost, "/api/pdf/quote/").concat(id); },
20110
- transactionDateType: "createdAt", // Required for the transactions list, but doesn't affect quotes
20097
+ transactionDateType: 'createdAt', // Required for the transactions list, but doesn't affect quotes
20111
20098
  };
20112
20099
  function quoteStateRenderer(state) {
20113
20100
  var getColor = function (state) {
20114
20101
  switch (state) {
20115
- case "ACCEPTED":
20116
- return "green";
20117
- case "IN_APPROVAL":
20118
- return "orange";
20119
- case "APPROVED":
20120
- return "green";
20121
- case "REJECTED":
20122
- return "red";
20123
- case "DRAFT":
20124
- case "SHARED":
20125
- case "VIEWED":
20102
+ case 'ACCEPTED':
20103
+ return 'green';
20104
+ case 'IN_APPROVAL':
20105
+ return 'orange';
20106
+ case 'APPROVED':
20107
+ return 'green';
20108
+ case 'REJECTED':
20109
+ return 'red';
20110
+ case 'DRAFT':
20111
+ case 'SHARED':
20112
+ case 'VIEWED':
20126
20113
  default:
20127
- return "blue";
20114
+ return 'blue';
20128
20115
  }
20129
20116
  };
20130
- return (jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) })));
20117
+ return jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) }));
20131
20118
  }
20132
20119
  function handleQuoteClick(quote) {
20133
20120
  onQuoteClick === null || onQuoteClick === void 0 ? void 0 : onQuoteClick(quote);
@@ -20145,11 +20132,11 @@ function QuotesWrapper() {
20145
20132
  var token = useToken();
20146
20133
  var filterFromContext = react.useContext(TransactionsListContext).filter;
20147
20134
  // Local state
20148
- var _a = react.useState(""), search = _a[0], setSearch = _a[1];
20149
- var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : "");
20135
+ var _a = react.useState(''), search = _a[0], setSearch = _a[1];
20136
+ var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : '');
20150
20137
  // Queries
20151
20138
  var data = reactQuery.useQuery({
20152
- queryKey: ["quotes", token, filter],
20139
+ queryKey: ['quotes', token, filter],
20153
20140
  queryFn: function () { return getQuotes({ token: token, apiHost: apiHost, filter: filter }); },
20154
20141
  placeholderData: reactQuery.keepPreviousData,
20155
20142
  }).data;
@@ -20157,7 +20144,7 @@ function QuotesWrapper() {
20157
20144
  return null;
20158
20145
  // filter out quotes in draft state, they are not viewable
20159
20146
  var quotes = data.nodes.filter(function (quote) {
20160
- return quote.state !== "DRAFT";
20147
+ return quote.state !== 'DRAFT';
20161
20148
  });
20162
20149
  var quotesAsTransactions = quotes.map(function (quote) {
20163
20150
  var _a, _b;
@@ -20165,7 +20152,7 @@ function QuotesWrapper() {
20165
20152
  transactionableId: quote.id,
20166
20153
  state: quote.state,
20167
20154
  amount: quote.amount || quote.amountDue,
20168
- kind: "QUOTE",
20155
+ kind: 'QUOTE',
20169
20156
  currencyId: quote.currencyId,
20170
20157
  transactionable: {
20171
20158
  number: quote.number,
@@ -20294,7 +20281,7 @@ var getPriceList = function (_a) {
20294
20281
  });
20295
20282
  };
20296
20283
 
20297
- 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 amountsByPeriod {\n amount\n startDate\n }\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 }"); };
20284
+ 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 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 }"); };
20298
20285
  var getQuote = function (_a) {
20299
20286
  var id = _a.id, token = _a.token, apiHost = _a.apiHost;
20300
20287
  return __awaiter(void 0, void 0, void 0, function () {
@@ -20799,7 +20786,7 @@ var useQuoteDelete = function () {
20799
20786
  }); };
20800
20787
  };
20801
20788
 
20802
- var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
20789
+ 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 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 }";
20803
20790
  var getSubscriptions = function (_a) {
20804
20791
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
20805
20792
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21074,7 +21061,6 @@ var Checkout = function (_a) {
21074
21061
  priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21075
21062
  token: token,
21076
21063
  });
21077
- console.log('recalculateTaxes - updatedQuote', updatedQuote);
21078
21064
  queryClient.setQueryData(quoteKey, updatedQuote);
21079
21065
  queryClient.setQueryData(calculatedPricesKey, updatedQuote);
21080
21066
  }
@@ -21122,6 +21108,20 @@ var Checkout = function (_a) {
21122
21108
  }, onPaymentSuccess: onSuccess }))] })), jsxRuntime.jsx(Footer, { className: "bunny-pl-12" })] })) })));
21123
21109
  };
21124
21110
 
21111
+ var QuotePreviewContext = react.createContext({});
21112
+ function QuotePreviewProvider(_a) {
21113
+ var children = _a.children;
21114
+ var _b = react.useState(), quotePreviewData = _b[0], setQuotePreviewData = _b[1];
21115
+ function handleSetEditingQuote(editingQuoteId) {
21116
+ setQuotePreviewData(__assign(__assign({}, quotePreviewData), { editingQuoteId: editingQuoteId }));
21117
+ }
21118
+ return (jsxRuntime.jsx(QuotePreviewContext.Provider, __assign({ value: {
21119
+ quotePreviewData: quotePreviewData,
21120
+ setQuotePreviewData: setQuotePreviewData,
21121
+ handleSetEditingQuote: handleSetEditingQuote,
21122
+ } }, { children: children })));
21123
+ }
21124
+
21125
21125
  var PageTitle = function (_a) {
21126
21126
  var onGoBack = _a.onGoBack, title = _a.title;
21127
21127
  var isMobile = common.useIsMobile();
@@ -21232,8 +21232,8 @@ var billingPeriodConverter = function (period) {
21232
21232
  var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
21233
21233
  // Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
21234
21234
  var createPlanDescription = function (priceList) {
21235
- return (priceList.plan.description || "").replace(removeHTMLTagsRegex, function (x, y) {
21236
- return y ? " & " : "";
21235
+ return (priceList.plan.description || '').replace(removeHTMLTagsRegex, function (x, y) {
21236
+ return y ? ' & ' : '';
21237
21237
  });
21238
21238
  };
21239
21239
  var getActivePlanPriceData = function (priceList, selectedPriceList) {
@@ -21274,8 +21274,7 @@ var getActivePlanPriceData = function (priceList, selectedPriceList) {
21274
21274
  };
21275
21275
  };
21276
21276
  var isPriceListDisabled = function (_a) {
21277
- var priceList = _a.priceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
21278
- var disableOnClick = false;
21277
+ var priceList = _a.priceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription, canPurchaseFeatureAddons = _a.canPurchaseFeatureAddons;
21279
21278
  // Plan already has a subscription
21280
21279
  var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
21281
21280
  var _a, _b;
@@ -21283,13 +21282,15 @@ var isPriceListDisabled = function (_a) {
21283
21282
  ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== common.SubscriptionState.CANCELED &&
21284
21283
  ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== common.SubscriptionState.EXPIRED;
21285
21284
  });
21286
- var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21287
21285
  // Is this plan the one that the user is upgrading from
21288
21286
  var isUpgradingPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id;
21289
- if ((subscriptionPlan && !isUpgradingPlan) || isPriceListCurrentSubscription) {
21290
- disableOnClick = true;
21287
+ if (subscriptionPlan && !isUpgradingPlan) {
21288
+ return true;
21291
21289
  }
21292
- return disableOnClick;
21290
+ if (isUpgradingPlan && !canPurchaseFeatureAddons) {
21291
+ return true;
21292
+ }
21293
+ return false;
21293
21294
  };
21294
21295
 
21295
21296
  var CheckoutButton = function (_a) {
@@ -21312,9 +21313,10 @@ var CheckoutPrice = function (_a) {
21312
21313
 
21313
21314
  var CheckoutBarSummarySection = function (_a) {
21314
21315
  var _b;
21315
- var open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription, quotePreviewData = _a.quotePreviewData;
21316
+ var open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription;
21316
21317
  // Context
21317
21318
  var apiHost = react.useContext(BunnyContext).apiHost;
21319
+ var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21318
21320
  // Hooks
21319
21321
  var token = useToken();
21320
21322
  var paymentPlugins = usePaymentPlugins({
@@ -21330,12 +21332,14 @@ var CheckoutBarSummarySection = function (_a) {
21330
21332
  token: token,
21331
21333
  }),
21332
21334
  });
21333
- var checkoutButtonDisabled = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
21335
+ var isUpgradingCurrentSubscription = selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
21336
+ var disableCheckoutButton = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
21334
21337
  !selectedPriceList ||
21335
21338
  // quantityLocal !== quotePreviewData.quantity ||
21336
21339
  isFetching ||
21337
- selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) ||
21340
+ isUpgradingCurrentSubscription ||
21338
21341
  open);
21342
+ var checkoutButtonDisabled = (quote === null || quote === void 0 ? void 0 : quote.amountDue) && (quote === null || quote === void 0 ? void 0 : quote.amountDue) > 0 ? false : disableCheckoutButton;
21339
21343
  var activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21340
21344
  var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === common.ChargeType.USAGE;
21341
21345
  var hasPaymentMethodsOrIsFree = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) || Boolean(quote && getQuoteAmountDue(quote) === 0);
@@ -21345,7 +21349,7 @@ var CheckoutBarSummarySection = function (_a) {
21345
21349
  var PlanPickerCheckoutBarWrapper = function (_a) {
21346
21350
  var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21347
21351
  // Context
21348
- var quotePreviewData = react.useContext(SubscriptionsContext).quotePreviewData;
21352
+ var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21349
21353
  var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
21350
21354
  if (!selectedPriceList)
21351
21355
  return null;
@@ -21355,10 +21359,11 @@ var PlanPickerCheckoutBar = function (_a) {
21355
21359
  var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21356
21360
  // Context
21357
21361
  var token = useToken();
21358
- var _b = react.useContext(SubscriptionsContext), quotePreviewData = _b.quotePreviewData, upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
21362
+ var _b = react.useContext(SubscriptionsContext), upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
21363
+ var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, handleSetEditingQuote = _c.handleSetEditingQuote;
21359
21364
  var apiHost = react.useContext(BunnyContext).apiHost;
21360
21365
  // Local state
21361
- var _c = react.useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
21366
+ var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
21362
21367
  // Hooks
21363
21368
  var showSuccessNotification = common.useSuccessNotification();
21364
21369
  var queryClient = reactQuery.useQueryClient();
@@ -21367,17 +21372,31 @@ var PlanPickerCheckoutBar = function (_a) {
21367
21372
  token: token,
21368
21373
  apiHost: apiHost,
21369
21374
  }).defaultPaymentMethod;
21370
- var createSubscriptionQuote = useQuoteSubscriptionUpgrade();
21375
+ var createSubscriptionUpgradeQuote = useQuoteSubscriptionUpgrade();
21376
+ var createSubscriptionUpdateQuote = useCreateSubscriptionQuote();
21371
21377
  // Mutations
21372
21378
  var createQuote = reactQuery.useMutation({
21373
21379
  mutationFn: function (_a) {
21374
21380
  var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
21375
- return createSubscriptionQuote(subscriptionId, priceListId, apiHost, token);
21381
+ return createSubscriptionUpgradeQuote(subscriptionId, priceListId, apiHost, token);
21376
21382
  },
21377
21383
  onSuccess: function (subscriptionUpdateData) {
21378
21384
  var _a;
21379
21385
  var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
21380
21386
  setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21387
+ handleSetEditingQuote(quote.id);
21388
+ },
21389
+ });
21390
+ var createEmptyQuote = reactQuery.useMutation({
21391
+ mutationFn: function (_a) {
21392
+ var subscriptionId = _a.subscriptionId;
21393
+ return createSubscriptionUpdateQuote([subscriptionId], apiHost, token);
21394
+ },
21395
+ onSuccess: function (subscriptionUpdateData) {
21396
+ var _a;
21397
+ var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
21398
+ setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21399
+ handleSetEditingQuote(quote.id);
21381
21400
  },
21382
21401
  });
21383
21402
  var updateCharge = reactQuery.useMutation({
@@ -21425,10 +21444,18 @@ var PlanPickerCheckoutBar = function (_a) {
21425
21444
  console.error('upgradingSubscription is undefined');
21426
21445
  return;
21427
21446
  }
21428
- createQuote.mutate({
21429
- subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21430
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21431
- });
21447
+ var upgradingCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
21448
+ if (upgradingCurrentSubscription) {
21449
+ createEmptyQuote.mutate({
21450
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21451
+ });
21452
+ }
21453
+ else {
21454
+ createQuote.mutate({
21455
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21456
+ priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21457
+ });
21458
+ }
21432
21459
  }, [selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id]);
21433
21460
  // Reset query key on unmount
21434
21461
  react.useEffect(function () {
@@ -21493,11 +21520,11 @@ var PlanPickerCheckoutBar = function (_a) {
21493
21520
  return (jsxRuntime.jsx(CheckoutBarInput, { disabled: !chargeQuantity, charge: charge, quantity: chargeQuantity !== null && chargeQuantity !== void 0 ? chargeQuantity : 0, selectedPriceList: selectedPriceList, onQuantityChanged: function (quantity) {
21494
21521
  onChangeQuantity(charge.id, quantity);
21495
21522
  } }, index));
21496
- }) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsxRuntime.jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
21523
+ }) })), 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 })] })));
21497
21524
  };
21498
21525
 
21499
21526
  // WARNING: There is a preview button on APP that will need to be changed if this query is changed
21500
- 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 basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
21527
+ 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 }";
21501
21528
  var getPriceListChangeOptions = function (_a) {
21502
21529
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
21503
21530
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21562,6 +21589,21 @@ var calculateNewQuantity = function (priceList, currentQuantity) {
21562
21589
  }
21563
21590
  };
21564
21591
 
21592
+ function isAddonPurchased(featureAddon, currentSubscription) {
21593
+ 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; });
21594
+ if (!purchasedFeatureAddons)
21595
+ return false;
21596
+ return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
21597
+ }
21598
+ function priceListHasUnpurchasedFeatureAddons(priceList, currentSubscription) {
21599
+ var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
21600
+ 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; });
21601
+ var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
21602
+ 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; }));
21603
+ });
21604
+ return unpurchasedFeatureAddons.length > 0;
21605
+ }
21606
+
21565
21607
  var BillingPeriodSelector = function (_a) {
21566
21608
  var availableBillingPeriods = _a.availableBillingPeriods, onChangeBillingPeriod = _a.onChangeBillingPeriod, products = _a.products, selectedBillingPeriod = _a.selectedBillingPeriod, selectedProduct = _a.selectedProduct, onChangeProduct = _a.onChangeProduct;
21567
21609
  var _b = react.useContext(BrandContext), secondaryColor = _b.secondaryColor, brandColor = _b.brandColor;
@@ -21589,12 +21631,75 @@ var StyledRadioGroup = styled__default["default"].div(templateObject_2 || (templ
21589
21631
  });
21590
21632
  var templateObject_1$4, templateObject_2;
21591
21633
 
21592
- var PriceListCardTitle = function (_a) {
21593
- var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
21594
- var isMobile = common.useIsMobile();
21595
- 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
21596
- ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
21597
- : " " }))), 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 }))] })));
21634
+ var NextPriceListButton = function (_a) {
21635
+ var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21636
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-absolute bunny-flex bunny-gap-1", style: { top: '12px', right: '8px' } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21637
+ setPriceListStart(function (prev) {
21638
+ var newValue = prev - 1;
21639
+ if (newValue < 0) {
21640
+ return prev;
21641
+ }
21642
+ return newValue;
21643
+ });
21644
+ }, style: { width: '22px', height: '22px' } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21645
+ return setPriceListStart(function (prev) {
21646
+ var newValue = prev + 1;
21647
+ if (newValue >= availablePriceLists.length) {
21648
+ return prev;
21649
+ }
21650
+ return newValue;
21651
+ });
21652
+ }, style: { width: '22px', height: '22px' } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
21653
+ };
21654
+
21655
+ var getAvailablePlansAndPriceLists = function (_a) {
21656
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, plansToDisplay = _a.plansToDisplay;
21657
+ var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + plansToDisplay);
21658
+ var availablePriceListsArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
21659
+ var _a;
21660
+ 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; });
21661
+ return foundPriceList;
21662
+ });
21663
+ return {
21664
+ availablePriceListsArray: availablePriceListsArray,
21665
+ displayPriceLists: displayPriceLists,
21666
+ };
21667
+ };
21668
+ var everythingInPlusString = function (_a) {
21669
+ var priceList = _a.priceList;
21670
+ return "Everything in ".concat(priceList.plan.name, ", plus");
21671
+ };
21672
+
21673
+ var PriceListCardButton = function (_a) {
21674
+ var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
21675
+ // Context
21676
+ var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21677
+ var showBuyAddonsButton = isPriceListCurrentSubscription &&
21678
+ subscriptionPlan &&
21679
+ priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21680
+ var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
21681
+ var createButtonText = function () {
21682
+ if (isPriceListCurrentSubscription)
21683
+ return 'Current';
21684
+ if (isSelected)
21685
+ return 'Selected';
21686
+ if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
21687
+ return 'Subscribed';
21688
+ if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US)
21689
+ return priceList.plan.contactUsLabel;
21690
+ return 'Select';
21691
+ };
21692
+ 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: {
21693
+ maxWidth: '240px',
21694
+ }, 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: {
21695
+ maxWidth: '240px',
21696
+ }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) }))] })));
21697
+ };
21698
+
21699
+ var Text$c = antd.Typography.Text;
21700
+ var PriceListCardDescription = function (_a) {
21701
+ var description = _a.description;
21702
+ return (jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: jsxRuntime.jsx(interweave.Markup, { content: description }) })));
21598
21703
  };
21599
21704
 
21600
21705
  var getPrice = function (priceList) {
@@ -21626,12 +21731,6 @@ var PriceListCardPrice = function (_a) {
21626
21731
  : 'Free' })));
21627
21732
  };
21628
21733
 
21629
- var Text$c = antd.Typography.Text;
21630
- var PriceListCardDescription = function (_a) {
21631
- var description = _a.description;
21632
- return (jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: jsxRuntime.jsx(interweave.Markup, { content: description }) })));
21633
- };
21634
-
21635
21734
  var BillingPeriodConverter;
21636
21735
  (function (BillingPeriodConverter) {
21637
21736
  BillingPeriodConverter["ONCE"] = "once";
@@ -21654,52 +21753,24 @@ var PriceListCardPriceDescription = function (_a) {
21654
21753
  return null;
21655
21754
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
21656
21755
  fontSize: isMobile ? '13px' : '12px',
21657
- } }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsxRuntime.jsx(interweave.Markup, { content: priceList.plan.pricingDescription })) : ("per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
21658
- ? "".concat(feature.unitName.toLowerCase(), " / ")
21659
- : '').concat(priceList.showPriceAsMonthly
21660
- ? 'month'
21661
- : common.PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)])) })), priceList.periodMonths > 1 && (jsxRuntime.jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
21662
- };
21663
-
21664
- var CheckIcon = function (_a) {
21665
- var backgroundColor = _a.backgroundColor, size = _a.size;
21666
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsxRuntime.jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
21667
- };
21668
-
21669
- var PriceListCardButton = function (_a) {
21670
- var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
21671
- // Context
21672
- var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21673
- var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
21674
- var createButtonText = function () {
21675
- if (isPriceListCurrentSubscription)
21676
- return 'Current';
21677
- if (isSelected)
21678
- return 'Selected';
21679
- if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
21680
- return 'Subscribed';
21681
- if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US)
21682
- return priceList.plan.contactUsLabel;
21683
- return 'Select';
21684
- };
21685
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end" }, { 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: disableOnClick, style: {
21686
- maxWidth: '240px',
21687
- }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
21756
+ } }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsxRuntime.jsx(interweave.Markup, { content: priceList.plan.pricingDescription })) : (PriceDescriptionString({
21757
+ unitName: feature === null || feature === void 0 ? void 0 : feature.unitName,
21758
+ showPriceAsMonthly: priceList.showPriceAsMonthly,
21759
+ periodMonths: priceList.periodMonths,
21760
+ doesPlanHaveFlatFeeCharges: doesPlanHaveFlatFeeCharges,
21761
+ })) })), priceList.periodMonths > 1 && (jsxRuntime.jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
21688
21762
  };
21763
+ function PriceDescriptionString(_a) {
21764
+ var unitName = _a.unitName, showPriceAsMonthly = _a.showPriceAsMonthly, periodMonths = _a.periodMonths, doesPlanHaveFlatFeeCharges = _a.doesPlanHaveFlatFeeCharges;
21765
+ return "per ".concat(unitName && !doesPlanHaveFlatFeeCharges ? "".concat(unitName.toLowerCase(), " / ") : '').concat(showPriceAsMonthly ? 'month' : common.PERIOD_LABELS[periodMonthsConverter(periodMonths)]);
21766
+ }
21689
21767
 
21690
- var PriceListCardMobile = function (_a) {
21691
- 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;
21692
- var brandColor = react.useContext(BrandContext).brandColor;
21693
- 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 () {
21694
- if (!disableOnClick)
21695
- onClick(priceList);
21696
- }, style: {
21697
- minWidth: '220px',
21698
- borderColor: isSelected ? brandColor : common.SLATE_200,
21699
- } }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "bunny-absolute", style: {
21700
- top: '10px',
21701
- right: '10px',
21702
- } }, { 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 })] }))] })));
21768
+ var PriceListCardTitle = function (_a) {
21769
+ var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
21770
+ var isMobile = common.useIsMobile();
21771
+ 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
21772
+ ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
21773
+ : " " }))), 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 }))] })));
21703
21774
  };
21704
21775
 
21705
21776
  var PLAN_GRID_PADDING = 4;
@@ -21726,6 +21797,26 @@ var PriceListCardDesktop = function (_a) {
21726
21797
  } }, { 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 })] })) }));
21727
21798
  };
21728
21799
 
21800
+ var CheckIcon = function (_a) {
21801
+ var backgroundColor = _a.backgroundColor, size = _a.size;
21802
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsxRuntime.jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
21803
+ };
21804
+
21805
+ var PriceListCardMobile = function (_a) {
21806
+ 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;
21807
+ var brandColor = react.useContext(BrandContext).brandColor;
21808
+ 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 () {
21809
+ if (!disableOnClick)
21810
+ onClick(priceList);
21811
+ }, style: {
21812
+ minWidth: '220px',
21813
+ borderColor: isSelected ? brandColor : common.SLATE_200,
21814
+ } }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "bunny-absolute", style: {
21815
+ top: '10px',
21816
+ right: '10px',
21817
+ } }, { 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 })] }))] })));
21818
+ };
21819
+
21729
21820
  var PriceListCard = function (_a) {
21730
21821
  var _b;
21731
21822
  var isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
@@ -21738,10 +21829,12 @@ var PriceListCard = function (_a) {
21738
21829
  var activeCharge = (_b = getActivePlanPriceData(priceList, priceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21739
21830
  // Is the price list the current price list for the upgradingSubscription
21740
21831
  var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21832
+ var canPurchaseFeatureAddons = priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21741
21833
  var disableOnClick = isPriceListDisabled({
21742
21834
  priceList: priceList,
21743
21835
  subscriptions: subscriptions,
21744
21836
  upgradingSubscription: upgradingSubscription,
21837
+ canPurchaseFeatureAddons: canPurchaseFeatureAddons,
21745
21838
  });
21746
21839
  var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
21747
21840
  var _a, _b;
@@ -21756,67 +21849,196 @@ var PriceListCard = function (_a) {
21756
21849
  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 }));
21757
21850
  };
21758
21851
 
21759
- var Text$a = antd.Typography.Text;
21760
- var PriceListCardFeature = function (_a) {
21761
- var index = _a.index, planFeature = _a.planFeature;
21762
- var brandColor = react.useContext(BrandContext).brandColor;
21763
- if (planFeature.feature.kind === "GROUP")
21764
- return jsxRuntime.jsx(Text$a, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
21765
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$a, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
21852
+ 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";
21853
+ var quoteChargeCreate = function (_a) {
21854
+ var
21855
+ // endDate,
21856
+ price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
21857
+ return __awaiter(void 0, void 0, void 0, function () {
21858
+ var response;
21859
+ return __generator(this, function (_b) {
21860
+ switch (_b.label) {
21861
+ case 0: return [4 /*yield*/, gqlRequest({
21862
+ query: QUOTE_CHARGE_CREATE$1,
21863
+ vars: {
21864
+ // endDate,
21865
+ price: price,
21866
+ priceListChargeId: priceListChargeId,
21867
+ quantity: quantity,
21868
+ quoteChangeId: quoteChangeId,
21869
+ startDate: startDate,
21870
+ subscriptionChargeId: subscriptionChargeId,
21871
+ },
21872
+ apiHost: apiHost,
21873
+ token: token,
21874
+ })];
21875
+ case 1:
21876
+ response = _b.sent();
21877
+ if (response.errors) {
21878
+ throw new Error(response.errors[0].message);
21879
+ }
21880
+ return [2 /*return*/, response.quoteChargeCreate.quoteCharge];
21881
+ }
21882
+ });
21883
+ });
21766
21884
  };
21767
21885
 
21768
- var getAvailablePlansAndPriceLists = function (_a) {
21769
- var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, plansToDisplay = _a.plansToDisplay;
21770
- var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + plansToDisplay);
21771
- var availablePlansArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
21772
- var _a;
21773
- 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; });
21774
- return foundPriceList.plan;
21886
+ 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";
21887
+ var quoteChargeDelete = function (_a) {
21888
+ var quoteChargeId = _a.quoteChargeId, token = _a.token, apiHost = _a.apiHost;
21889
+ return gqlRequest({
21890
+ query: QUOTE_CHARGE_CREATE,
21891
+ vars: {
21892
+ quoteChargeId: quoteChargeId,
21893
+ },
21894
+ apiHost: apiHost,
21895
+ token: token,
21775
21896
  });
21897
+ };
21898
+
21899
+ var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
21900
+ var apiHost = react.useContext(BunnyContext).apiHost;
21901
+ var token = useToken();
21902
+ var queryClient = reactQuery.useQueryClient();
21903
+ var addedQuoteChargeId = react.useRef();
21904
+ var editingQuote = reactQuery.useQuery({
21905
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
21906
+ objectName: 'editingQuote',
21907
+ id: quoteId,
21908
+ }),
21909
+ queryFn: function () { return (quoteId ? getQuote({ id: quoteId, token: token, apiHost: apiHost }) : undefined); },
21910
+ enabled: Boolean(quoteId),
21911
+ }).data;
21912
+ function handleAddFeatureAddon() {
21913
+ quoteChargeCreateMutation();
21914
+ }
21915
+ function handleRemoveFeatureAddon() {
21916
+ if (!addedQuoteChargeId.current)
21917
+ return;
21918
+ quoteChargeDeleteMutation({ quoteChargeId: addedQuoteChargeId.current });
21919
+ }
21920
+ var _a = reactQuery.useMutation({
21921
+ mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21922
+ var quoteCharge;
21923
+ return __generator(this, function (_a) {
21924
+ switch (_a.label) {
21925
+ case 0:
21926
+ if (!token)
21927
+ throw new Error('Token is required');
21928
+ if (!editingQuote)
21929
+ throw new Error('Editing quote is required');
21930
+ return [4 /*yield*/, quoteChargeCreate({
21931
+ quoteChangeId: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.quoteChanges[editingQuote.quoteChanges.length - 1].id,
21932
+ priceListChargeId: featureAddon.id,
21933
+ startDate: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.startDate,
21934
+ apiHost: apiHost,
21935
+ token: token,
21936
+ })];
21937
+ case 1:
21938
+ quoteCharge = _a.sent();
21939
+ return [2 /*return*/, { quoteCharge: quoteCharge }];
21940
+ }
21941
+ });
21942
+ }); },
21943
+ onSuccess: function (_a) {
21944
+ var quoteCharge = _a.quoteCharge;
21945
+ addedQuoteChargeId.current = quoteCharge.id;
21946
+ queryClient.invalidateQueries({
21947
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
21948
+ objectName: 'editingQuote',
21949
+ }),
21950
+ });
21951
+ },
21952
+ }), quoteChargeCreateMutation = _a.mutate, isCreatingFeatureAddon = _a.isPending;
21953
+ var _b = reactQuery.useMutation({
21954
+ mutationFn: function (_a) {
21955
+ var quoteChargeId = _a.quoteChargeId;
21956
+ return quoteChargeDelete({ quoteChargeId: quoteChargeId, token: token, apiHost: apiHost });
21957
+ },
21958
+ onSuccess: function () {
21959
+ addedQuoteChargeId.current = undefined;
21960
+ queryClient.invalidateQueries({
21961
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
21962
+ objectName: 'editingQuote',
21963
+ }),
21964
+ });
21965
+ },
21966
+ }), quoteChargeDeleteMutation = _b.mutate, isDeletingFeatureAddon = _b.isPending;
21967
+ react.useEffect(function () {
21968
+ // If the quoteId changes, then its because we changed pricelists, so we need to reset the addedQuoteChargeId
21969
+ // so that isChecked becomes false
21970
+ addedQuoteChargeId.current = undefined;
21971
+ }, [quoteId]);
21776
21972
  return {
21777
- availablePlansArray: availablePlansArray,
21778
- displayPriceLists: displayPriceLists,
21973
+ handleAddFeatureAddon: handleAddFeatureAddon,
21974
+ handleRemoveFeatureAddon: handleRemoveFeatureAddon,
21975
+ isPending: isCreatingFeatureAddon || isDeletingFeatureAddon,
21976
+ isChecked: isDeletingFeatureAddon
21977
+ ? false
21978
+ : Boolean(addedQuoteChargeId.current || isCreatingFeatureAddon),
21979
+ editingQuoteLoaded: editingQuote !== undefined,
21779
21980
  };
21780
21981
  };
21781
- var everythingInPlusString = function (_a) {
21782
- var priceList = _a.priceList;
21783
- return "Everything in ".concat(priceList.plan.name, ", plus");
21784
- };
21785
21982
 
21786
- var PriceListGridMobile = function (_a) {
21787
- var _b, _c, _d, _e;
21788
- var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
21789
- var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21790
- var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
21791
- var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
21792
- 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; });
21793
- 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) {
21794
- 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));
21795
- }) })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
21796
- ? everythingInPlusString({ priceList: prevPriceList })
21797
- : "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)); }) }))] }));
21983
+ var shouldColorRow = function (_a) {
21984
+ var isFeatureGroup = _a.isFeatureGroup, rowIndex = _a.rowIndex;
21985
+ return !isFeatureGroup && rowIndex % 2 === 1;
21986
+ };
21987
+ var FeatureGridCell = function (_a) {
21988
+ var children = _a.children, isFeatureGroup = _a.isFeatureGroup, noBorder = _a.noBorder, rowIndex = _a.rowIndex;
21989
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-px-".concat(PLAN_GRID_PADDING, " bunny-py-2"), style: __assign(__assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })), (shouldColorRow({
21990
+ isFeatureGroup: isFeatureGroup,
21991
+ rowIndex: rowIndex,
21992
+ })
21993
+ ? { backgroundColor: common.SLATE_100 }
21994
+ : {})) }, { children: children })));
21798
21995
  };
21799
21996
 
21800
- var NextPriceListButton = function (_a) {
21801
- var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21802
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-absolute bunny-flex bunny-gap-1", style: { top: '12px', right: '8px' } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21803
- setPriceListStart(function (prev) {
21804
- var newValue = prev - 1;
21805
- if (newValue < 0) {
21806
- return prev;
21807
- }
21808
- return newValue;
21809
- });
21810
- }, style: { width: '22px', height: '22px' } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21811
- return setPriceListStart(function (prev) {
21812
- var newValue = prev + 1;
21813
- if (newValue >= availablePriceLists.length) {
21814
- return prev;
21815
- }
21816
- return newValue;
21817
- });
21818
- }, style: { width: '22px', height: '22px' } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
21997
+ var PlanFeatureAddons = function (_a) {
21998
+ var displayPriceLists = _a.displayPriceLists, plansToDisplay = _a.plansToDisplay;
21999
+ var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: displayPriceLists });
22000
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, noBorder: true, rowIndex: 0 }), __spreadArray([], Array(plansToDisplay), true).map(function (_, planIndex) {
22001
+ var priceList = uniquePlanFeatures[planIndex];
22002
+ var prevPriceList = displayPriceLists[planIndex - 1];
22003
+ if (!priceList)
22004
+ return (jsxRuntime.jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
22005
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: jsxRuntime.jsx(FeatureAddonsList, { priceList: priceList }) }), planIndex));
22006
+ })] }));
21819
22007
  };
22008
+ function FeatureAddonsList(_a) {
22009
+ var _b;
22010
+ var priceList = _a.priceList;
22011
+ var featureAddons = (_b = priceList === null || priceList === void 0 ? void 0 : priceList.charges) === null || _b === void 0 ? void 0 : _b.filter(function (charge) { return charge.featureAddon === true; });
22012
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: featureAddons === null || featureAddons === void 0 ? void 0 : featureAddons.map(function (featureAddon, featureAddonIndex) {
22013
+ return (jsxRuntime.jsx(FeatureAddonRow, { featureAddon: featureAddon, priceList: priceList }, featureAddonIndex));
22014
+ }) }));
22015
+ }
22016
+ function FeatureAddonRow(_a) {
22017
+ var _b, _c;
22018
+ var featureAddon = _a.featureAddon, priceList = _a.priceList;
22019
+ var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
22020
+ var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
22021
+ 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;
22022
+ var brandColor = react.useContext(BrandContext).brandColor;
22023
+ var isPriceListSelected = ((_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id) === priceList.id;
22024
+ var isPurchased = isAddonPurchased(featureAddon, upgradingSubscription);
22025
+ var isDisabled = !isPriceListSelected || isPurchased;
22026
+ var checked = isChecked || isPurchased;
22027
+ 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({
22028
+ unitName: (_c = featureAddon.feature) === null || _c === void 0 ? void 0 : _c.unitName,
22029
+ showPriceAsMonthly: priceList.showPriceAsMonthly,
22030
+ periodMonths: priceList.periodMonths,
22031
+ doesPlanHaveFlatFeeCharges: false,
22032
+ }) }))] }));
22033
+ 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, { loading: isPending, disabled: isDisabled || !editingQuoteLoaded, checked: checked, onChange: function (checked) {
22034
+ if (checked) {
22035
+ handleAddFeatureAddon();
22036
+ }
22037
+ else {
22038
+ handleRemoveFeatureAddon();
22039
+ }
22040
+ } })] })));
22041
+ }
21820
22042
 
21821
22043
  var filterUniqueFeatures = function (_a) {
21822
22044
  // Remove any features that in previous plans if everythingInPlus is true
@@ -21838,41 +22060,27 @@ var filterUniqueFeatures = function (_a) {
21838
22060
  return updatedPriceLists;
21839
22061
  };
21840
22062
  var EverythingPlanFeatures = function (_a) {
21841
- var availablePriceLists = _a.availablePriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
22063
+ var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
21842
22064
  var brandColor = react.useContext(BrandContext).brandColor;
21843
- var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: availablePriceLists });
22065
+ var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: displayPriceLists });
21844
22066
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: __spreadArray([], Array(plansToDisplay), true).map(function (_, planIndex) {
21845
22067
  var priceList = uniquePlanFeatures[planIndex];
21846
- var prevPriceList = availablePriceLists[planIndex - 1];
22068
+ var prevPriceList = displayPriceLists[planIndex - 1];
21847
22069
  if (!priceList)
21848
22070
  return (jsxRuntime.jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
21849
22071
  if (!priceList.plan.planFeatures)
21850
- return jsxRuntime.jsx("div", {}, planIndex);
21851
- return (jsxRuntime.jsx("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) {
21852
- var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21853
- 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));
21854
- }) }), planIndex));
22072
+ return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(FeatureAddonsList, { priceList: priceList }), ";"] }, planIndex));
22073
+ 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) {
22074
+ var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22075
+ 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));
22076
+ }), jsxRuntime.jsx(FeatureAddonsList, { priceList: priceList })] }), planIndex));
21855
22077
  }) }));
21856
22078
  };
21857
22079
 
21858
- var shouldColorRow = function (_a) {
21859
- var isFeatureGroup = _a.isFeatureGroup, rowIndex = _a.rowIndex;
21860
- return !isFeatureGroup && rowIndex % 2 === 1;
21861
- };
21862
- var FeatureGridCell = function (_a) {
21863
- var children = _a.children, isFeatureGroup = _a.isFeatureGroup, noBorder = _a.noBorder, rowIndex = _a.rowIndex;
21864
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-px-".concat(PLAN_GRID_PADDING, " bunny-py-2"), style: __assign(__assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })), (shouldColorRow({
21865
- isFeatureGroup: isFeatureGroup,
21866
- rowIndex: rowIndex,
21867
- })
21868
- ? { backgroundColor: common.SLATE_100 }
21869
- : {})) }, { children: children })));
21870
- };
21871
-
21872
- var Text$9 = antd.Typography.Text;
22080
+ var Text$a = antd.Typography.Text;
21873
22081
  var PlanFeatures = function (_a) {
21874
22082
  var _b;
21875
- var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
22083
+ var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
21876
22084
  var featureGroupCounter = react.useRef(0);
21877
22085
  var visibleFeatureCounter = react.useRef(1);
21878
22086
  var brandColor = react.useContext(BrandContext).brandColor;
@@ -21899,8 +22107,9 @@ var PlanFeatures = function (_a) {
21899
22107
  visibleFeatureCounter.current = visibleFeatureCounter.current + 1;
21900
22108
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [jsxRuntime.jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsxRuntime.jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(plansToDisplay), true).map(function (_, columnIndex) {
21901
22109
  var _a;
21902
- var plan = availablePlansArray[columnIndex];
21903
- var doesHavePrevPlan = availablePlansArray[columnIndex - 1];
22110
+ var priceList = displayPriceLists[columnIndex];
22111
+ var plan = priceList.plan;
22112
+ var doesHavePrevPlan = displayPriceLists[columnIndex - 1];
21904
22113
  columnIndex = columnIndex + 1;
21905
22114
  // Check if the plan has the feature
21906
22115
  var planFeature = (_a = plan === null || plan === void 0 ? void 0 : plan.planFeatures) === null || _a === void 0 ? void 0 : _a.find(function (f) { return f.featureId === (feature === null || feature === void 0 ? void 0 : feature.id); });
@@ -21908,14 +22117,14 @@ var PlanFeatures = function (_a) {
21908
22117
  return (jsxRuntime.jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
21909
22118
  if (isFeatureGroup)
21910
22119
  return jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex);
21911
- return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$9, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
22120
+ return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$a, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
21912
22121
  })] }), rowIndex));
21913
22122
  }) }));
21914
22123
  };
21915
22124
  var FeatureTitle = function (_a) {
21916
22125
  var _b;
21917
22126
  var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
21918
- return (jsxRuntime.jsx(Text$9, __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 })));
22127
+ 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 })));
21919
22128
  };
21920
22129
 
21921
22130
  var PriceListGridDesktop = function (_a) {
@@ -21927,7 +22136,7 @@ var PriceListGridDesktop = function (_a) {
21927
22136
  priceListStart: priceListStart,
21928
22137
  plansToDisplay: (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3,
21929
22138
  });
21930
- }, [availablePriceLists, priceListChangeOptions, priceListStart]), availablePlansArray = _b.availablePlansArray, displayPriceLists = _b.displayPriceLists;
22139
+ }, [availablePriceLists, priceListChangeOptions, priceListStart]); _b.availablePriceListsArray; var displayPriceLists = _b.displayPriceLists;
21931
22140
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21932
22141
  var plansToDisplay = Math.min((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3, availablePriceLists.length);
21933
22142
  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: {
@@ -21938,9 +22147,32 @@ var PriceListGridDesktop = function (_a) {
21938
22147
  var priceList = displayPriceLists[index];
21939
22148
  var doesPrevPriceListExist = displayPriceLists[index - 1];
21940
22149
  if (!priceList)
21941
- return (jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index));
22150
+ return jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
21942
22151
  return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
21943
- }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { availablePriceLists: availablePriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsxRuntime.jsx(PlanFeatures, { availablePlansArray: availablePlansArray, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }))] }))] })));
22152
+ }), (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 }), jsxRuntime.jsx(PlanFeatureAddons, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay })] }))] }))] })));
22153
+ };
22154
+
22155
+ var Text$9 = antd.Typography.Text;
22156
+ var PriceListCardFeature = function (_a) {
22157
+ var index = _a.index, planFeature = _a.planFeature;
22158
+ var brandColor = react.useContext(BrandContext).brandColor;
22159
+ if (planFeature.feature.kind === "GROUP")
22160
+ return jsxRuntime.jsx(Text$9, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
22161
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$9, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
22162
+ };
22163
+
22164
+ var PriceListGridMobile = function (_a) {
22165
+ var _b, _c, _d, _e;
22166
+ var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
22167
+ var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22168
+ var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
22169
+ var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
22170
+ 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; });
22171
+ 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) {
22172
+ 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));
22173
+ }) })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
22174
+ ? everythingInPlusString({ priceList: prevPriceList })
22175
+ : "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)); }) }))] }));
21944
22176
  };
21945
22177
 
21946
22178
  var PriceListGrid = function (_a) {
@@ -21950,7 +22182,7 @@ var PriceListGrid = function (_a) {
21950
22182
  var isMobile = common.useIsMobile();
21951
22183
  // Derived state
21952
22184
  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); });
21953
- var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), "days");
22185
+ var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), 'days');
21954
22186
  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 }));
21955
22187
  };
21956
22188
 
@@ -21958,9 +22190,11 @@ var createAvailableBillingPeriods = function (priceLists, selectedProduct) {
21958
22190
  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); });
21959
22191
  };
21960
22192
  var PriceListSelector = function (_a) {
21961
- var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
22193
+ var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions;
21962
22194
  // Context
21963
- var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
22195
+ var isInPreviewMode = react.useContext(SubscriptionsContext).isInPreviewMode;
22196
+ var _b = react.useContext(QuotePreviewContext), quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
22197
+ var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21964
22198
  // Local state
21965
22199
  var _c = react.useState(), selectedProduct = _c[0], setSelectedProduct = _c[1];
21966
22200
  var _d = react.useState(), selectedBillingPeriod = _d[0], setSelectedBillingPeriod = _d[1];
@@ -21990,6 +22224,7 @@ var PriceListSelector = function (_a) {
21990
22224
  priceList: priceList,
21991
22225
  subscriptions: subscriptions,
21992
22226
  upgradingSubscription: upgradingSubscription,
22227
+ canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, upgradingSubscription),
21993
22228
  });
21994
22229
  });
21995
22230
  var isPriceListCurrentSubscription = newSelectedPriceList && (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
@@ -22058,6 +22293,7 @@ var PriceListSelector = function (_a) {
22058
22293
  priceList: initialPriceList,
22059
22294
  subscriptions: subscriptions,
22060
22295
  upgradingSubscription: upgradingSubscription,
22296
+ canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(initialPriceList, upgradingSubscription),
22061
22297
  })) {
22062
22298
  setQuotePreviewData({
22063
22299
  priceList: initialPriceList,
@@ -22084,18 +22320,19 @@ var PlanPicker = function () {
22084
22320
  // Context
22085
22321
  var token = useToken();
22086
22322
  var apiHost = react.useContext(BunnyContext).apiHost;
22087
- var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData, upgradingSubscription = _b.upgradingSubscription;
22323
+ var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, upgradingSubscription = _b.upgradingSubscription;
22324
+ var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22088
22325
  // Hooks
22089
22326
  var showInfoNotification = common.useInfoNotification();
22090
22327
  // Queries
22091
- var _c = reactQuery.useQuery({
22328
+ var _d = reactQuery.useQuery({
22092
22329
  queryKey: common.QueryKeyFactory.default.createTableKey({
22093
22330
  pluralType: 'subscriptions',
22094
22331
  token: token,
22095
22332
  }),
22096
22333
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
22097
- }), subscriptions = _c.data, areSubscriptionsLoading = _c.isLoading;
22098
- var _d = reactQuery.useQuery({
22334
+ }), subscriptions = _d.data, areSubscriptionsLoading = _d.isLoading;
22335
+ var _e = reactQuery.useQuery({
22099
22336
  queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({
22100
22337
  subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
22101
22338
  token: token,
@@ -22110,7 +22347,7 @@ var PlanPicker = function () {
22110
22347
  });
22111
22348
  },
22112
22349
  enabled: !areSubscriptionsLoading,
22113
- }), priceListChangeOptions = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
22350
+ }), priceListChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
22114
22351
  // Handlers
22115
22352
  var onChangePriceList = react.useCallback(function (selectedPriceList) {
22116
22353
  if (isInPreviewMode)
@@ -22144,11 +22381,12 @@ var PlanManager = function (_a) {
22144
22381
  // Context
22145
22382
  var token = useToken();
22146
22383
  var apiHost = react.useContext(BunnyContext).apiHost;
22147
- var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, upgradingSubscription = _b.upgradingSubscription, setUpgradingSubscription = _b.setUpgradingSubscription, subscriptionUpgradeId = _b.subscriptionUpgradeId, setQuotePreviewData = _b.setQuotePreviewData, quotePreviewData = _b.quotePreviewData, className = _b.className;
22384
+ var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, upgradingSubscription = _b.upgradingSubscription, setUpgradingSubscription = _b.setUpgradingSubscription, subscriptionUpgradeId = _b.subscriptionUpgradeId, className = _b.className;
22385
+ var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22148
22386
  // Local state
22149
- var _c = react.useState(), editingQuoteData = _c[0], setEditingQuoteData = _c[1];
22150
- var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
22151
- var _e = react.useState(false), isSticky = _e[0], setIsSticky = _e[1];
22387
+ var _d = react.useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
22388
+ var _e = react.useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
22389
+ var _f = react.useState(false), isSticky = _f[0], setIsSticky = _f[1];
22152
22390
  var stickyRef = react.useRef(null);
22153
22391
  // Hooks
22154
22392
  var queryClient = reactQuery.useQueryClient();
@@ -22159,14 +22397,14 @@ var PlanManager = function (_a) {
22159
22397
  apiHost: apiHost,
22160
22398
  }).defaultPaymentMethod;
22161
22399
  // Queries
22162
- var _f = reactQuery.useQuery({
22400
+ var _g = reactQuery.useQuery({
22163
22401
  queryKey: common.QueryKeyFactory.default.createTableKey({
22164
22402
  pluralType: 'subscriptions',
22165
22403
  token: token,
22166
22404
  }),
22167
22405
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
22168
22406
  enabled: false,
22169
- }), subscriptions = _f.data, subscriptionsAreLoading = _f.isLoading;
22407
+ }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
22170
22408
  var quote = reactQuery.useQuery({
22171
22409
  queryKey: common.QueryKeyFactory.default.createObjectKey({
22172
22410
  id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
@@ -22428,11 +22666,12 @@ var isSubscriptionNotActive = function (subscription) {
22428
22666
  return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
22429
22667
  ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.CANCELED;
22430
22668
  };
22431
- var canShowSubscriptionActions = function (subscription) {
22669
+ var isSubscriptionActiveOrPending = function (subscription) {
22432
22670
  var _a, _b;
22433
22671
  return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE ||
22434
22672
  ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
22435
22673
  };
22674
+ var isSubscriptionTrial = function (subscription) { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL; };
22436
22675
  // Helper function to check if charge is a discount
22437
22676
  var isDiscount = function (kind) {
22438
22677
  return kind === common.QuoteChangeKind.DISCOUNT || kind === common.QuoteChangeKind.FREE_PERIOD_DISCOUNT;
@@ -22441,6 +22680,10 @@ var hasPriceTiers = function (charge) {
22441
22680
  var _a;
22442
22681
  return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
22443
22682
  };
22683
+ var hasMultiplePriceTiers = function (charge) {
22684
+ var _a;
22685
+ return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length) > 1;
22686
+ };
22444
22687
  var getApplicablePriceTier = function (charge, currencyId) {
22445
22688
  var _a;
22446
22689
  if (!((_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length))
@@ -22474,18 +22717,21 @@ var getApplicablePriceTier = function (charge, currencyId) {
22474
22717
  var starts = selectedTier.starts;
22475
22718
  var nextTier = charge.priceTiers[tierIndex + 1];
22476
22719
  var ends = nextTier ? nextTier.starts - 1 : '∞';
22477
- return "".concat(starts, "-").concat(ends, ": ").concat(common.formatCurrency(selectedTier.price, currencyId));
22720
+ return hasMultiplePriceTiers(charge)
22721
+ ? "".concat(starts, "-").concat(ends, ": ").concat(common.formatCurrency(selectedTier.price, currencyId))
22722
+ : "".concat(common.formatCurrency(selectedTier.price, currencyId));
22478
22723
  };
22479
22724
 
22480
22725
  var SubscriptionCardActions = function (_a) {
22481
- var _b, _c;
22726
+ var _b;
22482
22727
  var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
22483
22728
  // Derived state
22484
- var canShowCancelButton = subscription.plan.selfServiceCancel;
22729
+ var isSelfServiceCancelable = subscription.plan.selfServiceCancel;
22485
22730
  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; });
22486
- var canShowChangePlanButton = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
22487
- return (canShowChangePlanButton || canShowCancelButton) &&
22488
- canShowSubscriptionActions(subscription) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [canShowCancelButton && (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" })) }))), canShowChangePlanButton && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL ? (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Upgrade" }))) : null;
22731
+ var arePlansAvailable = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
22732
+ var isInTrial = isSubscriptionTrial(subscription);
22733
+ var isActiveOrPending = isSubscriptionActiveOrPending(subscription);
22734
+ 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 && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: isInTrial ? 'Upgrade' : 'Change plan' })))] }));
22489
22735
  };
22490
22736
 
22491
22737
  var Text$7 = antd.Typography.Text;
@@ -22513,11 +22759,11 @@ var SubscriptionCardHeader = function (_a) {
22513
22759
  var subscriptionProductNameStyle = react.useContext(SubscriptionsContext).subscriptionProductNameStyle;
22514
22760
  var isMobile = common.useIsMobile();
22515
22761
  // Derived state
22516
- var trialDaysLeft = dayjs(subscription.trialEndDate).diff(dayjs(), "days");
22762
+ var trialDaysLeft = subscription === null || subscription === void 0 ? void 0 : subscription.daysLeftInTrial;
22517
22763
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
22518
22764
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: {
22519
- backgroundColor: darkMode ? "var(--row-background-dark)" : "",
22520
- } }, { 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, " 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 }))] }))] })));
22765
+ backgroundColor: darkMode ? 'var(--row-background-dark)' : '',
22766
+ } }, { 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 }))] }))] })));
22521
22767
  };
22522
22768
 
22523
22769
  var SubscriptionChargeTotal = function (_a) {
@@ -22778,27 +23024,6 @@ var DrawerHeader = function (_a) {
22778
23024
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$3, __assign({ className: "bunny-text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs" }, { children: description }))] })));
22779
23025
  };
22780
23026
 
22781
- var QUOTE_CHARGE_CREATE = "\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 }\n }\n}\n\n";
22782
- var quoteChargeCreate = function (_a) {
22783
- var
22784
- // endDate,
22785
- price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
22786
- return gqlRequest({
22787
- query: QUOTE_CHARGE_CREATE,
22788
- vars: {
22789
- // endDate,
22790
- price: price,
22791
- priceListChargeId: priceListChargeId,
22792
- quantity: quantity,
22793
- quoteChangeId: quoteChangeId,
22794
- startDate: startDate,
22795
- subscriptionChargeId: subscriptionChargeId,
22796
- },
22797
- apiHost: apiHost,
22798
- token: token,
22799
- });
22800
- };
22801
-
22802
23027
  var formatDateForApi = function (date) {
22803
23028
  if (typeof date === 'string')
22804
23029
  date = dayjs(date);
@@ -23032,7 +23257,7 @@ var QuantityChangeDrawerDesktop = function (_a) {
23032
23257
  }, [open]);
23033
23258
  if (!openLocal)
23034
23259
  return null;
23035
- return (jsxRuntime.jsxs(antd.Drawer, __assign({ closeIcon: null, destroyOnClose: true, onClose: onClose, open: open, styles: isMobile
23260
+ return (jsxRuntime.jsxs(antd.Drawer, __assign({ closeIcon: null, destroyOnHidden: true, onClose: onClose, open: open, styles: isMobile
23036
23261
  ? {
23037
23262
  body: {
23038
23263
  padding: '1rem',
@@ -23110,8 +23335,7 @@ var SubscriptionsWrapper = function (_a) {
23110
23335
  var styles = __assign(__assign({}, defaultStyles), userStyles);
23111
23336
  var _f = react.useState(undefined), upgradingSubscription = _f[0], setUpgradingSubscription = _f[1];
23112
23337
  var _g = react.useState(undefined), updatingChargeQuantityId = _g[0], setUpdatingChargeQuantityId = _g[1];
23113
- var _h = react.useState(undefined), quotePreviewData = _h[0], setQuotePreviewData = _h[1];
23114
- var _j = react.useState(null), subscriptionUpgradeId = _j[0], setSubscriptionUpgradeId = _j[1];
23338
+ var _h = react.useState(null), subscriptionUpgradeId = _h[0], setSubscriptionUpgradeId = _h[1];
23115
23339
  return (jsxRuntime.jsx(SubscriptionsContext.Provider, __assign({ value: {
23116
23340
  gap: styles.gap,
23117
23341
  shadow: styles.shadow,
@@ -23124,11 +23348,9 @@ var SubscriptionsWrapper = function (_a) {
23124
23348
  setUpgradingSubscription: setUpgradingSubscription,
23125
23349
  updatingChargeQuantityId: updatingChargeQuantityId,
23126
23350
  setUpdatingChargeQuantityId: setUpdatingChargeQuantityId,
23127
- quotePreviewData: quotePreviewData,
23128
- setQuotePreviewData: setQuotePreviewData,
23129
23351
  subscriptionUpgradeId: subscriptionUpgradeId,
23130
23352
  setSubscriptionUpgradeId: setSubscriptionUpgradeId,
23131
- } }, { children: jsxRuntime.jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) })));
23353
+ } }, { children: jsxRuntime.jsx(QuotePreviewProvider, { children: jsxRuntime.jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) }) })));
23132
23354
  };
23133
23355
  var Subscriptions = function (_a) {
23134
23356
  var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, noSubscriptionsComponent = _a.noSubscriptionsComponent, hideTitle = _a.hideTitle, hideExpiredToggle = _a.hideExpiredToggle;