@bunnyapp/components 1.0.76-beta.15 → 1.0.76-beta.17

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 (88) hide show
  1. package/dist/cjs/index.js +1048 -702
  2. package/dist/cjs/src/components/BillingDetails/BillingDetails.d.ts +5 -7
  3. package/dist/cjs/src/components/PlanManagerQuoteProvider.d.ts +19 -0
  4. package/dist/cjs/src/components/QuotePreviewProvider.d.ts +0 -2
  5. package/dist/cjs/src/components/Subscriptions/AddonIndentation.d.ts +8 -0
  6. package/dist/cjs/src/components/Subscriptions/AddonSubscriptionCards.d.ts +7 -0
  7. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +3 -3
  8. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +2 -3
  9. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutButton.d.ts +2 -1
  10. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +1 -2
  11. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +5 -1
  12. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanAddonsCard.d.ts +11 -0
  13. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +4 -3
  14. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +3 -3
  15. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +1 -2
  16. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +2 -3
  17. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +3 -2
  18. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +2 -2
  19. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +2 -1
  20. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardTitle.d.ts +1 -1
  21. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +1 -2
  22. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/{PriceListSelector.d.ts → priceListSelector/PriceListSelector.d.ts} +1 -2
  23. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelectorContext.d.ts +9 -0
  24. package/dist/cjs/src/components/Subscriptions/QuotePreviewData.d.ts +6 -0
  25. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +3 -3
  26. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts +1 -1
  27. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +2 -1
  28. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +1 -1
  29. package/dist/cjs/src/graphql/QuoteRequests.d.ts +4 -0
  30. package/dist/cjs/src/graphql/mutations/quoteAddonCreate.d.ts +7 -0
  31. package/dist/cjs/src/graphql/mutations/quoteChangeCreate.d.ts +8 -0
  32. package/dist/cjs/src/graphql/mutations/quoteChangeDelete.d.ts +6 -0
  33. package/dist/cjs/src/graphql/mutations/quoteChargeDelete.d.ts +2 -1
  34. package/dist/cjs/src/graphql/mutations/quoteCompose.d.ts +0 -1
  35. package/dist/cjs/src/graphql/mutations/quoteCreate.d.ts +8 -0
  36. package/dist/cjs/src/graphql/mutations/quoteCreateWithDeal.d.ts +10 -0
  37. package/dist/cjs/src/graphql/queries/getQuote.d.ts +3 -1
  38. package/dist/cjs/src/hooks/quotes/useQuoteCreate.d.ts +12 -0
  39. package/dist/cjs/src/hooks/quotes/useQuoteUpdateFeatureAddon.d.ts +2 -3
  40. package/dist/cjs/src/hooks/useToggleAddonQuoteChange.d.ts +7 -0
  41. package/dist/cjs/src/utils/addonPlanUtils.d.ts +4 -0
  42. package/dist/esm/index.js +1048 -702
  43. package/dist/esm/src/components/BillingDetails/BillingDetails.d.ts +5 -7
  44. package/dist/esm/src/components/PlanManagerQuoteProvider.d.ts +19 -0
  45. package/dist/esm/src/components/QuotePreviewProvider.d.ts +0 -2
  46. package/dist/esm/src/components/Subscriptions/AddonIndentation.d.ts +8 -0
  47. package/dist/esm/src/components/Subscriptions/AddonSubscriptionCards.d.ts +7 -0
  48. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +3 -3
  49. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +2 -3
  50. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutButton.d.ts +2 -1
  51. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +1 -2
  52. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +5 -1
  53. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanAddonsCard.d.ts +11 -0
  54. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +4 -3
  55. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +3 -3
  56. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +1 -2
  57. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +2 -3
  58. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +3 -2
  59. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +2 -2
  60. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +2 -1
  61. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardTitle.d.ts +1 -1
  62. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +1 -2
  63. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/{PriceListSelector.d.ts → priceListSelector/PriceListSelector.d.ts} +1 -2
  64. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelectorContext.d.ts +9 -0
  65. package/dist/esm/src/components/Subscriptions/QuotePreviewData.d.ts +6 -0
  66. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +3 -3
  67. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts +1 -1
  68. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +2 -1
  69. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +1 -1
  70. package/dist/esm/src/graphql/QuoteRequests.d.ts +4 -0
  71. package/dist/esm/src/graphql/mutations/quoteAddonCreate.d.ts +7 -0
  72. package/dist/esm/src/graphql/mutations/quoteChangeCreate.d.ts +8 -0
  73. package/dist/esm/src/graphql/mutations/quoteChangeDelete.d.ts +6 -0
  74. package/dist/esm/src/graphql/mutations/quoteChargeDelete.d.ts +2 -1
  75. package/dist/esm/src/graphql/mutations/quoteCompose.d.ts +0 -1
  76. package/dist/esm/src/graphql/mutations/quoteCreate.d.ts +8 -0
  77. package/dist/esm/src/graphql/mutations/quoteCreateWithDeal.d.ts +10 -0
  78. package/dist/esm/src/graphql/queries/getQuote.d.ts +3 -1
  79. package/dist/esm/src/hooks/quotes/useQuoteCreate.d.ts +12 -0
  80. package/dist/esm/src/hooks/quotes/useQuoteUpdateFeatureAddon.d.ts +2 -3
  81. package/dist/esm/src/hooks/useToggleAddonQuoteChange.d.ts +7 -0
  82. package/dist/esm/src/utils/addonPlanUtils.d.ts +4 -0
  83. package/dist/index.d.ts +5 -7
  84. package/package.json +2 -2
  85. package/dist/cjs/src/components/UpgradeFromTrial.d.ts +0 -6
  86. package/dist/esm/src/components/UpgradeFromTrial.d.ts +0 -6
  87. /package/dist/cjs/src/components/icons/{iDeal.d.ts → IDeal.d.ts} +0 -0
  88. /package/dist/esm/src/components/icons/{iDeal.d.ts → IDeal.d.ts} +0 -0
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-max-h-\\[calc\\(100vh-10rem\\)\\] {\n max-height: calc(100vh - 10rem);\n}\n.bunny-min-h-0 {\n min-height: 0px;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-3\\/5 {\n width: 60%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-w-screen {\n width: 100vw;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-flex-wrap {\n flex-wrap: wrap;\n}\n.bunny-items-start {\n align-items: flex-start;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-overflow-y-auto {\n overflow-y: auto;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-12 {\n padding-left: 3rem;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pr-4 {\n padding-right: 1rem;\n}\n.bunny-pt-1 {\n padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.hover\\:bunny-text-orange-400:hover {\n --tw-text-opacity: 1;\n color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n margin: 0 !important;\n}\n.bunny-components .ant-upload {\n border-radius: 0.5rem !important;\n}\n.bunny-components .ant-checkbox-inner {\n border-color: #cccccc;\n}\n.bunny-components .ant-row {\n margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n font-size: 0.875rem !important;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n border: none !important;\n}\n.bunny-components .ant-form-item {\n margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n text-transform: none !important;\n font-size: 0.75rem;\n padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n width: 100%;\n color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n font-size: 11px;\n min-height: 11px;\n line-height: 11px;\n padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n font-size: smaller;\n}\n.bunny-components .ant-tree {\n font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-page-header {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n}\n.bunny-components .ant-tag {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 14px;\n font-weight: 500;\n white-space: nowrap;\n padding-inline-start: 0.625rem;\n padding-inline-end: 0.625rem;\n margin: 0;\n}\n.bunny-components .ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n color: #6b7280 !important;\n background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.bunny-components .ant-picker {\n width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n background: #f8fafc;\n}\n.bunny-components .vista-link {\n color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n text-decoration: underline;\n cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n padding: 0;\n text-align: center;\n font-size: 0.875rem !important;\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n display: flex !important;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n background: #eef0f2 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n border: none;\n}\n.bunny-components .ant-btn {\n box-shadow: none;\n text-shadow: none;\n outline: none !important;\n line-height: 1;\n font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n color: #94a3b8;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n background-color: rgba(113, 125, 148, 0.1) !important;\n border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n display: flex !important;\n align-items: center;\n}\n.bunny-components .ant-select-item {\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n display: flex;\n align-items: center;\n white-space: nowrap !important;\n overflow: visible !important;\n text-overflow: default !important;\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n display: none;\n}\n.bunny-components .ant-layout-header {\n height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n width: inherit;\n position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n gap: 4px !important;\n}\n.bunny-components .group {\n display: flex;\n flex-direction: row;\n flex-flow: row wrap;\n box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n top: 96px !important;\n animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n color: #ffffff;\n background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n border-color: #ff5833 !important;\n background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n border-bottom: 2px solid transparent !important;\n padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n display: none !important;\n}\n.bunny-components .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n border-radius: 8px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n font-size: 14px !important;\n overflow-wrap: break-word;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff5833 !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
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-mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n margin-top: 6rem;\n margin-bottom: 6rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-ml-auto {\n margin-left: auto;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n margin-top: 6rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-0\\.5 {\n height: 0.125rem;\n}\n.bunny-h-1\\/2 {\n height: 50%;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-h-screen {\n height: 100vh;\n}\n.bunny-max-h-\\[calc\\(100vh-10rem\\)\\] {\n max-height: calc(100vh - 10rem);\n}\n.bunny-min-h-0 {\n min-height: 0px;\n}\n.bunny-w-0\\.5 {\n width: 0.125rem;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-3\\/5 {\n width: 60%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-w-screen {\n width: 100vw;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-flex-wrap {\n flex-wrap: wrap;\n}\n.bunny-items-start {\n align-items: flex-start;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-overflow-y-auto {\n overflow-y: auto;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-gray-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-12 {\n padding-left: 3rem;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pr-4 {\n padding-right: 1rem;\n}\n.bunny-pt-1 {\n padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -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.76-beta.15';
157
+ var PACKAGE_VERSION = '1.0.76-beta.17';
158
158
  var createRequestHeaders = function (token) {
159
159
  var headers = common.createClientDevHeaders(token);
160
160
  // Add the components version header
@@ -18403,17 +18403,17 @@ var Sepa = function (_a) {
18403
18403
  return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "#10298E", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { d: "M12.7744 16.084C14.4396 16.084 15.6264 16.1801 16.334 16.3701C18.0609 16.8349 18.9248 18.137 18.9248 20.2764C18.9248 20.4518 18.9113 20.714 18.8857 21.0645H14.918C14.918 20.4123 14.8407 19.9748 14.6885 19.752C14.4524 19.4222 13.801 19.2569 12.7344 19.2568C11.6983 19.2568 11.0109 19.3519 10.6758 19.542C10.3409 19.7327 10.1729 20.1477 10.1729 20.7861C10.1729 21.3638 10.3217 21.7443 10.6191 21.9268C10.8324 22.0562 11.1145 22.1325 11.4658 22.1553L12.2656 22.2119C13.9806 22.3259 15.0521 22.4065 15.4795 22.4521C16.8358 22.5891 17.8195 22.9497 18.4297 23.5352C18.9098 23.992 19.1958 24.5898 19.2871 25.3271C19.3405 25.7681 19.3672 26.267 19.3672 26.8213C19.3672 28.0993 19.2457 29.0356 19.002 29.6289C18.5601 30.7174 17.5669 31.4046 16.0225 31.6934C15.3754 31.8154 14.3858 31.8769 13.0547 31.877C10.8322 31.877 9.28274 31.7449 8.4082 31.4785C7.33499 31.1522 6.6276 30.4905 6.28516 29.4951C6.09445 28.941 6.00001 28.0182 6 26.7266H9.96875C9.96875 26.8706 9.96875 26.9808 9.96875 27.0566C9.96876 27.746 10.1668 28.1893 10.5615 28.3867C10.8351 28.5229 11.1654 28.594 11.5537 28.6025H13.0127C13.7572 28.6025 14.2325 28.5649 14.4375 28.4883C14.8023 28.3446 15.0418 28.1131 15.1562 27.793C15.217 27.596 15.247 27.3411 15.2471 27.0293C15.2471 26.3303 14.992 25.9045 14.4834 25.752C14.2928 25.6917 13.4079 25.6075 11.8291 25.501C10.5609 25.4103 9.67998 25.3228 9.18652 25.2383C7.88722 24.9948 7.02094 24.4944 6.58887 23.7344C6.20918 23.0886 6.01956 22.1116 6.01953 20.8047C6.01953 19.8092 6.12198 19.0105 6.32715 18.4102C6.53252 17.8097 6.86368 17.3538 7.32031 17.042C7.98917 16.5635 8.84498 16.2823 9.88672 16.1982C10.7538 16.1225 11.7164 16.084 12.7744 16.084ZM44.2861 16C45.3761 16 46.2079 16.0894 46.7793 16.2676C48.0865 16.6779 48.9639 17.5176 49.4131 18.7871C49.645 19.4533 49.7607 20.4565 49.7607 21.7959C49.7607 23.4063 49.6323 24.564 49.3779 25.2686C48.8682 26.6618 47.8187 27.4648 46.2344 27.6729C46.048 27.7041 45.2548 27.7316 43.8555 27.7539L43.1475 27.7773H40.6045V31.877H36.3389V16H44.2861ZM64 31.877H59.6787L58.8652 29.1328H53.1621L52.3955 31.877H47.9824L52.7441 16H59.1787L64 31.877ZM54.0801 26.04H58.0186L56.0195 19.1572L54.0801 26.04ZM40.6035 24.0947H43.2627C44.1059 24.0643 44.6191 23.9992 44.8037 23.8975C45.0556 23.7585 45.2244 23.4803 45.3086 23.0635C45.3624 22.7859 45.3896 22.3732 45.3896 21.8252C45.3896 21.1539 45.336 20.6561 45.2285 20.3311C45.0751 19.8759 44.7078 19.5988 44.126 19.498C44.011 19.4828 43.7353 19.4746 43.2988 19.4746H40.6035V24.0947Z", fill: "white" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M30.45 18.2337C32.2095 18.2337 33.7797 19.0456 34.8119 20.3173L35.7314 18.3424C34.2933 16.9808 32.336 16.1413 30.1772 16.1413C26.8159 16.1413 23.9406 18.1748 22.7605 21.0533H20.9674L19.9087 23.3269H22.2154C22.1981 23.5378 22.1869 23.7489 22.1869 23.9643C22.1869 24.2249 22.2004 24.4824 22.2262 24.7369H21.0669L20.0083 27.0113H22.8155C24.0293 29.8169 26.8686 31.7866 30.1772 31.7866C31.8445 31.7866 33.3917 31.2862 34.6727 30.4314V27.644C33.6411 28.8205 32.1322 29.564 30.45 29.564C28.4837 29.564 26.754 28.5484 25.7468 27.0113H31.6253L32.6838 24.7369H24.8819C24.8417 24.4632 24.8202 24.1835 24.8202 23.8986C24.8202 23.706 24.8302 23.5153 24.8486 23.3269H33.3399L34.3985 21.0533H25.583C26.5579 19.3679 28.3721 18.2337 30.45 18.2337", fill: "#FFBE00" })] })));
18404
18404
  };
18405
18405
 
18406
- var IDeal = function (_a) {
18406
+ var Bancontact = function (_a) {
18407
18407
  var className = _a.className;
18408
- return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.0266 9.91185H35.684C47.003 9.91185 51.3527 16.0977 51.3527 23.9167C51.3527 33.2698 45.273 37.9711 35.684 37.9711H19.0266V9.91185ZM20.6082 11.5944V36.3875H35.6838C44.7786 36.3875 49.7215 32.1316 49.7215 23.9662C49.7215 15.5534 44.3832 11.5944 35.6838 11.5944H20.6082ZM25.0568 24.4115C26.722 24.4115 28.072 23.06 28.072 21.3928C28.072 19.7256 26.722 18.3741 25.0568 18.3741C23.3916 18.3741 22.0417 19.7256 22.0417 21.3928C22.0417 23.06 23.3916 24.4115 25.0568 24.4115ZM22.635 25.6982H27.479V34.309H22.635V25.6982Z", fill: "black" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M44.2351 18.6216H45.6191V22.7785H47.6456C47.1019 15.207 41.1211 13.5244 35.684 13.5244H29.9009V18.6216H30.7412C32.3229 18.6216 33.262 19.6608 33.262 21.3929C33.262 23.1249 32.3229 24.1641 30.7906 24.1641H29.9009V34.309H35.684C44.5317 34.309 47.5468 30.2016 47.6951 24.1641H44.2351V18.6216ZM37.5623 22.7785V24.1641H34.1023V18.6216H37.4634V20.0072H35.4863V20.6505H37.3646V22.0362H35.5357V22.7785H37.5623ZM39.8358 18.6216H41.813L43.4935 24.1641H42.0601L41.7635 23.1249H39.9347L39.6381 24.1641H38.1553L39.8358 18.6216ZM40.3456 21.6898H40.3302V21.7393L40.3456 21.6898ZM40.3456 21.6898H41.3188L40.8739 20.1557H40.8245L40.3456 21.6898ZM29.9009 22.7785V20.0072H30.7412C31.2849 20.0072 31.878 20.1557 31.878 21.3929C31.878 22.63 31.3343 22.7785 30.7412 22.7785H29.9009Z", fill: "#D50072" })] })));
18408
+ return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.2243 35.1715C18.2243 34.882 18.156 34.6314 18.0199 34.4199C17.8835 34.2083 17.7043 34.0468 17.4819 33.9355C17.7043 33.8242 17.8766 33.6597 17.9991 33.4426C18.1214 33.2255 18.1825 32.9806 18.1825 32.7078V32.5575C18.1825 32.2233 18.1186 31.9451 17.9908 31.7223C17.8628 31.4996 17.6833 31.3213 17.4526 31.1878C17.2219 31.0541 16.9451 30.9582 16.6227 30.8995C16.3 30.8411 15.9414 30.812 15.5465 30.812C15.4131 30.812 15.274 30.8147 15.1296 30.8203C14.9848 30.8258 14.8445 30.8328 14.7083 30.8411C14.572 30.8494 14.4468 30.8593 14.3329 30.8704C14.2188 30.8817 14.1256 30.8928 14.0534 30.9037C13.8921 30.9318 13.7781 30.9817 13.7114 31.0541C13.6448 31.1266 13.6113 31.2575 13.6113 31.4467V36.5245C13.6113 36.7139 13.646 36.8447 13.7156 36.917C13.7851 36.9895 13.9032 37.0394 14.0702 37.0673C14.1535 37.084 14.2536 37.0979 14.3704 37.1091C14.4871 37.1202 14.6136 37.1299 14.7499 37.1383C14.8862 37.1466 15.0265 37.1535 15.1711 37.1593C15.3158 37.1646 15.4575 37.1676 15.5966 37.1676C15.9581 37.1676 16.2986 37.1397 16.6185 37.084C16.9381 37.0285 17.2161 36.9295 17.4526 36.7874C17.689 36.6456 17.8766 36.4534 18.0157 36.2113C18.1546 35.969 18.2243 35.6642 18.2243 35.2967V35.1715ZM16.8063 32.7746C16.8063 32.8637 16.7924 32.9487 16.7645 33.0293C16.7366 33.11 16.6909 33.1795 16.627 33.2383C16.5629 33.2966 16.4768 33.3439 16.3684 33.38C16.2599 33.4162 16.1222 33.4343 15.9554 33.4343H15.0213V31.9895C15.049 31.9895 15.0921 31.9883 15.1505 31.9853C15.2089 31.9825 15.27 31.9812 15.3339 31.9812H15.6551C16.0833 31.9812 16.3822 32.0354 16.5518 32.144C16.7214 32.2526 16.8063 32.421 16.8063 32.6492V32.7746ZM16.5935 35.8062C16.7576 35.6782 16.8397 35.4971 16.8397 35.2634V35.1714C16.8397 34.971 16.7756 34.797 16.6478 34.6494C16.5198 34.502 16.289 34.4282 15.9554 34.4282H15.0213V35.9898H15.1671C15.231 35.9898 15.2977 35.9916 15.3673 35.9942C15.4368 35.9969 15.5035 35.9985 15.5676 35.9985H15.7051C16.1333 35.9985 16.4295 35.9343 16.5935 35.8062ZM22.7955 33.9438C22.7955 33.6377 22.7496 33.3772 22.6578 33.1629C22.5662 32.9487 22.4368 32.7732 22.27 32.6367C22.1032 32.5004 21.8988 32.4003 21.6568 32.3362C21.415 32.2722 21.1439 32.2401 20.8436 32.2401C20.5654 32.2401 20.2943 32.2597 20.0303 32.2987C19.766 32.3375 19.556 32.3766 19.4005 32.4154C19.2948 32.4435 19.242 32.5046 19.242 32.5991V33.2756C19.242 33.3314 19.2559 33.3705 19.2837 33.3925C19.3115 33.4149 19.3475 33.4261 19.3922 33.4261H19.4337C19.5006 33.4204 19.5839 33.4135 19.684 33.4051C19.7842 33.3968 19.8968 33.3901 20.022 33.3842C20.1471 33.3788 20.2777 33.3746 20.414 33.3717C20.5501 33.3689 20.6851 33.3675 20.8186 33.3675C21.0131 33.3675 21.1661 33.4038 21.2773 33.4761C21.3885 33.5486 21.4441 33.7045 21.4441 33.9438V34.2445H20.9937C20.2763 34.2445 19.7549 34.3572 19.4296 34.5827C19.1043 34.8081 18.9416 35.1659 18.9416 35.6558V35.7313C18.9416 36.0039 18.982 36.2321 19.0625 36.4158C19.1431 36.5996 19.2503 36.7472 19.3837 36.8587C19.5172 36.9699 19.6686 37.0493 19.8384 37.0964C20.008 37.1438 20.1846 37.1676 20.3681 37.1676C20.6184 37.1676 20.8339 37.1341 21.0145 37.0673C21.1952 37.0005 21.3662 36.9086 21.5276 36.7917V36.9253C21.5276 36.9699 21.5442 37.0089 21.5776 37.0422C21.6111 37.0756 21.6499 37.0923 21.6944 37.0923H22.6287C22.6731 37.0923 22.712 37.0756 22.7455 37.0422C22.7789 37.0089 22.7955 36.9699 22.7955 36.9253V33.9438ZM21.1481 36.0942C21.2619 36.0581 21.3691 36.015 21.4692 35.9648V35.0462H20.9937C20.8491 35.0462 20.7296 35.0587 20.635 35.0837C20.5404 35.1088 20.4653 35.1465 20.4098 35.1966C20.3542 35.2465 20.3152 35.3107 20.2931 35.3886C20.2707 35.4666 20.2596 35.5556 20.2596 35.6558V35.7312C20.2596 35.9092 20.3026 36.0233 20.3889 36.0734C20.4751 36.1235 20.6071 36.1485 20.7852 36.1485C20.913 36.1485 21.0339 36.1306 21.1481 36.0942ZM27.9007 36.917V34.1358C27.9007 33.8744 27.8799 33.6278 27.8381 33.3968C27.7964 33.166 27.7214 32.9653 27.6129 32.7954C27.5045 32.6256 27.3543 32.4905 27.1624 32.3904C26.9707 32.2902 26.7245 32.2401 26.4242 32.2401C26.1572 32.2401 25.9208 32.2723 25.7152 32.3369C25.5094 32.4014 25.2925 32.515 25.0646 32.6776V32.4752C25.0646 32.4305 25.0478 32.3911 25.0145 32.3575C24.9811 32.3238 24.9421 32.3068 24.8976 32.3068H23.9634C23.9187 32.3068 23.8799 32.3235 23.8467 32.357C23.8133 32.3904 23.7966 32.4295 23.7966 32.4739V36.917C23.7966 36.9615 23.8145 37.0019 23.8508 37.038C23.8869 37.0743 23.9272 37.0923 23.9717 37.0923H24.9811C25.0256 37.0923 25.0646 37.0743 25.0978 37.0382C25.1313 37.0021 25.1479 36.9619 25.1479 36.9173V33.6341C25.2925 33.5564 25.4287 33.4925 25.5567 33.4426C25.6845 33.3925 25.8096 33.3675 25.932 33.3675C26.0599 33.3675 26.1642 33.38 26.2449 33.4051C26.3254 33.4301 26.388 33.4731 26.4325 33.5345C26.477 33.5954 26.5076 33.6759 26.5243 33.7757C26.5409 33.8758 26.5494 33.9981 26.5494 34.1425V36.9173C26.5494 36.9619 26.566 37.0021 26.5994 37.0382C26.6327 37.0743 26.6715 37.0923 26.7162 37.0923H27.7255C27.7699 37.0923 27.8102 37.0743 27.8464 37.038C27.8826 37.0019 27.9007 36.9615 27.9007 36.917ZM32.0047 36.1071V36.8502C32.0047 36.9114 31.9907 36.9546 31.963 36.9796C31.9351 37.0047 31.8906 37.0255 31.8294 37.0422C31.7127 37.0701 31.5611 37.0978 31.3749 37.1259C31.1885 37.1535 30.9703 37.1676 30.72 37.1676C30.1305 37.1676 29.6592 36.9867 29.3062 36.6246C28.953 36.2628 28.7765 35.7394 28.7765 35.0546V34.3531C28.7765 33.6682 28.953 33.1448 29.3062 32.7831C29.6592 32.421 30.1305 32.2401 30.72 32.2401C30.9703 32.2401 31.1885 32.254 31.3749 32.2817C31.5611 32.3098 31.7127 32.3375 31.8294 32.3653C31.8906 32.3819 31.9351 32.4029 31.963 32.4279C31.9907 32.453 32.0047 32.4962 32.0047 32.5574V33.3007C32.0047 33.3453 31.9893 33.38 31.9588 33.4051C31.9281 33.4301 31.8906 33.4426 31.8462 33.4426H31.8294C31.6737 33.4261 31.5251 33.4121 31.3832 33.401C31.2413 33.3901 31.0508 33.3842 30.8118 33.3842C30.7172 33.3842 30.6283 33.3996 30.5448 33.4301C30.4613 33.4608 30.3891 33.5137 30.328 33.5888C30.2666 33.6641 30.2181 33.7641 30.1819 33.8895C30.1457 34.0147 30.1277 34.1692 30.1277 34.3531V35.0546C30.1277 35.2382 30.1457 35.3927 30.1819 35.5181C30.2181 35.6433 30.2666 35.7436 30.328 35.8187C30.3891 35.8939 30.4613 35.9468 30.5448 35.9774C30.6283 36.008 30.7172 36.0233 30.8118 36.0233C31.0508 36.0233 31.2413 36.0178 31.3832 36.0067C31.5251 35.9956 31.6737 35.9815 31.8294 35.9649H31.8462C31.8906 35.9649 31.9281 35.9774 31.9588 36.0025C31.9893 36.0276 32.0047 36.0623 32.0047 36.1071ZM36.6346 34.4115C36.6346 34.0773 36.5885 33.7768 36.4966 33.5095C36.4046 33.2423 36.2709 33.0155 36.0954 32.8289C35.9199 32.6424 35.7025 32.4976 35.4436 32.3946C35.1844 32.2918 34.8848 32.2401 34.5449 32.2401C34.2051 32.2401 33.9056 32.2918 33.6465 32.3946C33.3873 32.4976 33.1685 32.6424 32.9903 32.8289C32.8119 33.0155 32.6768 33.2423 32.585 33.5095C32.4928 33.7768 32.4469 34.0773 32.4469 34.4115V34.9961C32.4469 35.3301 32.4928 35.6309 32.585 35.8981C32.6768 36.1653 32.8119 36.3922 32.9903 36.5788C33.1685 36.7654 33.3873 36.91 33.6465 37.013C33.9056 37.1159 34.2051 37.1676 34.5449 37.1676C34.8848 37.1676 35.1844 37.1159 35.4436 37.013C35.7025 36.91 35.9199 36.7654 36.0954 36.5788C36.2709 36.3922 36.4046 36.1653 36.4966 35.8981C36.5885 35.6309 36.6346 35.3301 36.6346 34.9961V34.4115ZM34.5449 36.0233C35.037 36.0233 35.2832 35.6809 35.2832 34.9961V34.4115C35.2832 33.7322 35.037 33.3925 34.5449 33.3925C34.3016 33.3925 34.1164 33.4774 33.9893 33.6472C33.8619 33.8172 33.7984 34.0719 33.7984 34.4115V34.9961C33.7984 35.3357 33.8619 35.5918 33.9893 35.7644C34.1164 35.9371 34.3016 36.0233 34.5449 36.0233ZM41.5976 36.917V34.1358C41.5976 33.8744 41.5765 33.6278 41.5351 33.3968C41.4933 33.166 41.4181 32.9653 41.3095 32.7954C41.2011 32.6256 41.0511 32.4905 40.8593 32.3904C40.6674 32.2902 40.4213 32.2401 40.1211 32.2401C39.8542 32.2401 39.6177 32.2723 39.4119 32.3369C39.2062 32.4014 38.9893 32.515 38.7613 32.6776V32.4752C38.7613 32.4305 38.7447 32.3911 38.7111 32.3575C38.678 32.3238 38.6389 32.3068 38.5945 32.3068H37.6602C37.6157 32.3068 37.5769 32.3235 37.5434 32.357C37.5102 32.3904 37.4934 32.4295 37.4934 32.4739V36.917C37.4934 36.9615 37.5114 37.0019 37.5476 37.038C37.5838 37.0743 37.624 37.0923 37.6687 37.0923H38.678C38.7224 37.0923 38.7613 37.0743 38.7948 37.0382C38.828 37.0021 38.8448 36.9619 38.8448 36.9173V33.6341C38.9893 33.5564 39.1256 33.4925 39.2534 33.4426C39.3815 33.3925 39.5065 33.3675 39.629 33.3675C39.7568 33.3675 39.8611 33.38 39.9416 33.4051C40.0222 33.4301 40.0849 33.4731 40.1294 33.5345C40.1739 33.5954 40.2044 33.6759 40.2212 33.7757C40.2378 33.8758 40.2462 33.9981 40.2462 34.1425V36.9173C40.2462 36.9619 40.2628 37.0021 40.2962 37.0382C40.3296 37.0743 40.3684 37.0923 40.413 37.0923H41.4223C41.4668 37.0923 41.5072 37.0743 41.5434 37.038C41.5794 37.0019 41.5976 36.9615 41.5976 36.917ZM45.2348 36.2893V36.9357C45.2348 37.0295 45.182 37.0848 45.0763 37.1011C44.9483 37.1233 44.8371 37.1398 44.7427 37.1509C44.6481 37.162 44.5395 37.1675 44.4174 37.1675C44.1905 37.1675 43.9901 37.1493 43.816 37.1133C43.6419 37.077 43.4966 37.0061 43.3805 36.9003C43.2646 36.7945 43.1761 36.6483 43.1153 36.4617C43.0547 36.2753 43.0242 36.0347 43.0242 35.7394V33.3175L42.357 33.2088C42.3123 33.1977 42.2721 33.1769 42.2359 33.1462C42.1997 33.1157 42.1817 33.0781 42.1817 33.0335V32.4822C42.1817 32.4378 42.1997 32.3974 42.2359 32.3611C42.2721 32.325 42.3123 32.3068 42.357 32.3068H43.0242V31.622C43.0242 31.5774 43.0409 31.5414 43.0739 31.5134C43.1068 31.4857 43.1458 31.4663 43.1902 31.455L44.2016 31.2798H44.2263C44.2705 31.2798 44.3065 31.2921 44.3343 31.3171C44.3618 31.3423 44.3757 31.3771 44.3757 31.4215V32.3068H45.0597C45.104 32.3068 45.143 32.3237 45.1764 32.3573C45.2099 32.3909 45.2265 32.4305 45.2265 32.4752V33.1573C45.2265 33.2024 45.2099 33.2416 45.1764 33.2752C45.143 33.3089 45.104 33.3257 45.0597 33.3257H44.3757V35.7561C44.3757 35.9231 44.3895 36.0304 44.4174 36.0776C44.4451 36.1249 44.5229 36.1485 44.6507 36.1485H45.0597C45.1764 36.1485 45.2348 36.1955 45.2348 36.2893ZM49.6891 33.9438C49.6891 33.6377 49.6433 33.3772 49.5514 33.1629C49.4597 32.9487 49.3305 32.7732 49.1637 32.6367C48.9969 32.5004 48.7925 32.4003 48.5505 32.3362C48.3087 32.2722 48.0376 32.2401 47.7373 32.2401C47.4589 32.2401 47.188 32.2597 46.924 32.2987C46.6597 32.3375 46.4497 32.3766 46.2942 32.4154C46.1882 32.4435 46.1357 32.5046 46.1357 32.5991V33.2756C46.1357 33.3314 46.1494 33.3705 46.1773 33.3925C46.2052 33.4149 46.2412 33.4261 46.2857 33.4261H46.3274C46.3943 33.4204 46.4776 33.4135 46.5777 33.4051C46.6779 33.3968 46.7905 33.3901 46.9155 33.3842C47.0408 33.3788 47.1714 33.3746 47.3077 33.3717C47.4438 33.3689 47.5788 33.3675 47.7121 33.3675C47.9068 33.3675 48.0598 33.4038 48.171 33.4761C48.2822 33.5486 48.3378 33.7045 48.3378 33.9438V34.2445H47.8874C47.1698 34.2445 46.6486 34.3572 46.3233 34.5827C45.998 34.8081 45.8353 35.1659 45.8353 35.6558V35.7313C45.8353 36.0039 45.8755 36.2321 45.9562 36.4158C46.0366 36.5996 46.144 36.7472 46.2774 36.8587C46.4109 36.9699 46.5623 37.0493 46.7321 37.0964C46.9017 37.1438 47.0782 37.1676 47.2618 37.1676C47.5121 37.1676 47.7274 37.1341 47.9082 37.0673C48.0889 37.0005 48.2597 36.9086 48.4213 36.7917V36.9253C48.4213 36.9699 48.4379 37.0089 48.4713 37.0422C48.5046 37.0756 48.5436 37.0923 48.5881 37.0923H49.5224C49.5668 37.0923 49.6057 37.0756 49.6392 37.0422C49.6724 37.0089 49.6891 36.9699 49.6891 36.9253V33.9438ZM48.0418 36.0942C48.1556 36.0581 48.2628 36.015 48.3629 35.9648V35.0462H47.8874C47.7428 35.0462 47.6233 35.0587 47.5287 35.0837C47.4341 35.1088 47.359 35.1465 47.3035 35.1966C47.2477 35.2465 47.2088 35.3107 47.1868 35.3886C47.1644 35.4666 47.1533 35.5556 47.1533 35.6558V35.7312C47.1533 35.9092 47.1963 36.0233 47.2826 36.0734C47.3688 36.1235 47.5008 36.1485 47.6789 36.1485C47.8067 36.1485 47.9274 36.1306 48.0418 36.0942ZM53.7933 36.8502V36.1071C53.7933 36.0623 53.7779 36.0276 53.7474 36.0025C53.7167 35.9774 53.6793 35.9649 53.6348 35.9649H53.6181C53.4624 35.9815 53.3136 35.9956 53.1718 36.0067C53.0301 36.0178 52.8395 36.0233 52.6005 36.0233C52.5057 36.0233 52.4167 36.008 52.3336 35.9774C52.2501 35.9468 52.1777 35.8939 52.1165 35.8187C52.0554 35.7436 52.0067 35.6433 51.9707 35.5181C51.9343 35.3927 51.9165 35.2382 51.9165 35.0546V34.3531C51.9165 34.1692 51.9343 34.0147 51.9707 33.8895C52.0067 33.7641 52.0554 33.6641 52.1165 33.5888C52.1777 33.5137 52.2501 33.4608 52.3336 33.4301C52.4167 33.3996 52.5057 33.3842 52.6005 33.3842C52.8395 33.3842 53.0301 33.3901 53.1718 33.401C53.3136 33.4121 53.4624 33.4261 53.6181 33.4426H53.6348C53.6793 33.4426 53.7167 33.4301 53.7474 33.4051C53.7779 33.38 53.7933 33.3453 53.7933 33.3007V32.5574C53.7933 32.4962 53.7794 32.453 53.7515 32.4279C53.7235 32.4029 53.6793 32.3819 53.6181 32.3653C53.5014 32.3375 53.3497 32.3098 53.1635 32.2817C52.9771 32.254 52.759 32.2401 52.5087 32.2401C51.9189 32.2401 51.4479 32.421 51.0947 32.7831C50.7415 33.1448 50.565 33.6682 50.565 34.3531V35.0546C50.565 35.7394 50.7415 36.2628 51.0947 36.6246C51.4479 36.9867 51.9189 37.1676 52.5087 37.1676C52.759 37.1676 52.9771 37.1535 53.1635 37.1259C53.3497 37.0978 53.5014 37.0701 53.6181 37.0422C53.6793 37.0255 53.7235 37.0047 53.7515 36.9796C53.7794 36.9546 53.7933 36.9114 53.7933 36.8502ZM57.3884 36.2893V36.9357C57.3884 37.0295 57.3354 37.0848 57.2299 37.1011C57.1019 37.1233 56.9907 37.1398 56.8963 37.1509C56.8016 37.162 56.6931 37.1675 56.571 37.1675C56.3441 37.1675 56.1437 37.1493 55.9696 37.1133C55.7954 37.077 55.6502 37.0061 55.5343 36.9003C55.4183 36.7945 55.3298 36.6483 55.269 36.4617C55.2083 36.2753 55.1778 36.0347 55.1778 35.7394V33.3175L54.5106 33.2088C54.4659 33.1977 54.4257 33.1769 54.3895 33.1462C54.3533 33.1157 54.3353 33.0781 54.3353 33.0335V32.4822C54.3353 32.4378 54.3533 32.3974 54.3895 32.3611C54.4257 32.325 54.4659 32.3068 54.5106 32.3068H55.1778V31.622C55.1778 31.5774 55.1945 31.5414 55.2276 31.5134C55.2605 31.4857 55.2993 31.4663 55.3436 31.455L56.355 31.2798H56.38C56.4241 31.2798 56.4602 31.2921 56.4875 31.3171C56.5154 31.3423 56.5293 31.3771 56.5293 31.4215V32.3068H57.2133C57.2577 32.3068 57.2966 32.3237 57.3301 32.3573C57.3633 32.3909 57.3801 32.4305 57.3801 32.4752V33.1573C57.3801 33.2024 57.3633 33.2416 57.3301 33.2752C57.2966 33.3089 57.2577 33.3257 57.2133 33.3257H56.5293V35.7561C56.5293 35.9231 56.5431 36.0304 56.571 36.0776C56.5987 36.1249 56.6765 36.1485 56.8045 36.1485H57.2133C57.3301 36.1485 57.3884 36.1955 57.3884 36.2893Z", fill: "#005697" }), jsxRuntime.jsx("path", { d: "M52.6187 14.7398H39.0664L37.6881 16.2935L33.2155 21.3349V21.3351L31.8372 22.8886H18.464L19.821 21.3153L20.4633 20.5706L21.8202 18.9973H15.6582C14.5325 18.9973 13.6113 19.943 13.6113 21.0987V25.5326C13.6113 26.6885 14.5325 27.6342 15.6582 27.6342H39.2492C40.3749 27.6342 41.9127 26.9318 42.6665 26.0733L46.235 22.0097L52.6187 14.7398Z", fill: "#005697" }), jsxRuntime.jsx("path", { d: "M55.3418 10C56.4676 10 57.3887 10.9457 57.3887 12.1015V16.5353C57.3887 17.691 56.4676 18.6368 55.3418 18.6368H49.1999L50.5697 17.0753H50.5699L51.2491 16.3012L52.6189 14.7398H39.0667L31.8375 22.8945H18.3813L28.0314 11.9701L28.3966 11.5566C29.153 10.7005 30.6929 10 31.8186 10H55.3418V10Z", fill: "#FBD500" })] })));
18409
18409
  };
18410
18410
 
18411
- var Bancontact = function (_a) {
18411
+ var IDeal = function (_a) {
18412
18412
  var className = _a.className;
18413
- return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.2243 35.1715C18.2243 34.882 18.156 34.6314 18.0199 34.4199C17.8835 34.2083 17.7043 34.0468 17.4819 33.9355C17.7043 33.8242 17.8766 33.6597 17.9991 33.4426C18.1214 33.2255 18.1825 32.9806 18.1825 32.7078V32.5575C18.1825 32.2233 18.1186 31.9451 17.9908 31.7223C17.8628 31.4996 17.6833 31.3213 17.4526 31.1878C17.2219 31.0541 16.9451 30.9582 16.6227 30.8995C16.3 30.8411 15.9414 30.812 15.5465 30.812C15.4131 30.812 15.274 30.8147 15.1296 30.8203C14.9848 30.8258 14.8445 30.8328 14.7083 30.8411C14.572 30.8494 14.4468 30.8593 14.3329 30.8704C14.2188 30.8817 14.1256 30.8928 14.0534 30.9037C13.8921 30.9318 13.7781 30.9817 13.7114 31.0541C13.6448 31.1266 13.6113 31.2575 13.6113 31.4467V36.5245C13.6113 36.7139 13.646 36.8447 13.7156 36.917C13.7851 36.9895 13.9032 37.0394 14.0702 37.0673C14.1535 37.084 14.2536 37.0979 14.3704 37.1091C14.4871 37.1202 14.6136 37.1299 14.7499 37.1383C14.8862 37.1466 15.0265 37.1535 15.1711 37.1593C15.3158 37.1646 15.4575 37.1676 15.5966 37.1676C15.9581 37.1676 16.2986 37.1397 16.6185 37.084C16.9381 37.0285 17.2161 36.9295 17.4526 36.7874C17.689 36.6456 17.8766 36.4534 18.0157 36.2113C18.1546 35.969 18.2243 35.6642 18.2243 35.2967V35.1715ZM16.8063 32.7746C16.8063 32.8637 16.7924 32.9487 16.7645 33.0293C16.7366 33.11 16.6909 33.1795 16.627 33.2383C16.5629 33.2966 16.4768 33.3439 16.3684 33.38C16.2599 33.4162 16.1222 33.4343 15.9554 33.4343H15.0213V31.9895C15.049 31.9895 15.0921 31.9883 15.1505 31.9853C15.2089 31.9825 15.27 31.9812 15.3339 31.9812H15.6551C16.0833 31.9812 16.3822 32.0354 16.5518 32.144C16.7214 32.2526 16.8063 32.421 16.8063 32.6492V32.7746ZM16.5935 35.8062C16.7576 35.6782 16.8397 35.4971 16.8397 35.2634V35.1714C16.8397 34.971 16.7756 34.797 16.6478 34.6494C16.5198 34.502 16.289 34.4282 15.9554 34.4282H15.0213V35.9898H15.1671C15.231 35.9898 15.2977 35.9916 15.3673 35.9942C15.4368 35.9969 15.5035 35.9985 15.5676 35.9985H15.7051C16.1333 35.9985 16.4295 35.9343 16.5935 35.8062ZM22.7955 33.9438C22.7955 33.6377 22.7496 33.3772 22.6578 33.1629C22.5662 32.9487 22.4368 32.7732 22.27 32.6367C22.1032 32.5004 21.8988 32.4003 21.6568 32.3362C21.415 32.2722 21.1439 32.2401 20.8436 32.2401C20.5654 32.2401 20.2943 32.2597 20.0303 32.2987C19.766 32.3375 19.556 32.3766 19.4005 32.4154C19.2948 32.4435 19.242 32.5046 19.242 32.5991V33.2756C19.242 33.3314 19.2559 33.3705 19.2837 33.3925C19.3115 33.4149 19.3475 33.4261 19.3922 33.4261H19.4337C19.5006 33.4204 19.5839 33.4135 19.684 33.4051C19.7842 33.3968 19.8968 33.3901 20.022 33.3842C20.1471 33.3788 20.2777 33.3746 20.414 33.3717C20.5501 33.3689 20.6851 33.3675 20.8186 33.3675C21.0131 33.3675 21.1661 33.4038 21.2773 33.4761C21.3885 33.5486 21.4441 33.7045 21.4441 33.9438V34.2445H20.9937C20.2763 34.2445 19.7549 34.3572 19.4296 34.5827C19.1043 34.8081 18.9416 35.1659 18.9416 35.6558V35.7313C18.9416 36.0039 18.982 36.2321 19.0625 36.4158C19.1431 36.5996 19.2503 36.7472 19.3837 36.8587C19.5172 36.9699 19.6686 37.0493 19.8384 37.0964C20.008 37.1438 20.1846 37.1676 20.3681 37.1676C20.6184 37.1676 20.8339 37.1341 21.0145 37.0673C21.1952 37.0005 21.3662 36.9086 21.5276 36.7917V36.9253C21.5276 36.9699 21.5442 37.0089 21.5776 37.0422C21.6111 37.0756 21.6499 37.0923 21.6944 37.0923H22.6287C22.6731 37.0923 22.712 37.0756 22.7455 37.0422C22.7789 37.0089 22.7955 36.9699 22.7955 36.9253V33.9438ZM21.1481 36.0942C21.2619 36.0581 21.3691 36.015 21.4692 35.9648V35.0462H20.9937C20.8491 35.0462 20.7296 35.0587 20.635 35.0837C20.5404 35.1088 20.4653 35.1465 20.4098 35.1966C20.3542 35.2465 20.3152 35.3107 20.2931 35.3886C20.2707 35.4666 20.2596 35.5556 20.2596 35.6558V35.7312C20.2596 35.9092 20.3026 36.0233 20.3889 36.0734C20.4751 36.1235 20.6071 36.1485 20.7852 36.1485C20.913 36.1485 21.0339 36.1306 21.1481 36.0942ZM27.9007 36.917V34.1358C27.9007 33.8744 27.8799 33.6278 27.8381 33.3968C27.7964 33.166 27.7214 32.9653 27.6129 32.7954C27.5045 32.6256 27.3543 32.4905 27.1624 32.3904C26.9707 32.2902 26.7245 32.2401 26.4242 32.2401C26.1572 32.2401 25.9208 32.2723 25.7152 32.3369C25.5094 32.4014 25.2925 32.515 25.0646 32.6776V32.4752C25.0646 32.4305 25.0478 32.3911 25.0145 32.3575C24.9811 32.3238 24.9421 32.3068 24.8976 32.3068H23.9634C23.9187 32.3068 23.8799 32.3235 23.8467 32.357C23.8133 32.3904 23.7966 32.4295 23.7966 32.4739V36.917C23.7966 36.9615 23.8145 37.0019 23.8508 37.038C23.8869 37.0743 23.9272 37.0923 23.9717 37.0923H24.9811C25.0256 37.0923 25.0646 37.0743 25.0978 37.0382C25.1313 37.0021 25.1479 36.9619 25.1479 36.9173V33.6341C25.2925 33.5564 25.4287 33.4925 25.5567 33.4426C25.6845 33.3925 25.8096 33.3675 25.932 33.3675C26.0599 33.3675 26.1642 33.38 26.2449 33.4051C26.3254 33.4301 26.388 33.4731 26.4325 33.5345C26.477 33.5954 26.5076 33.6759 26.5243 33.7757C26.5409 33.8758 26.5494 33.9981 26.5494 34.1425V36.9173C26.5494 36.9619 26.566 37.0021 26.5994 37.0382C26.6327 37.0743 26.6715 37.0923 26.7162 37.0923H27.7255C27.7699 37.0923 27.8102 37.0743 27.8464 37.038C27.8826 37.0019 27.9007 36.9615 27.9007 36.917ZM32.0047 36.1071V36.8502C32.0047 36.9114 31.9907 36.9546 31.963 36.9796C31.9351 37.0047 31.8906 37.0255 31.8294 37.0422C31.7127 37.0701 31.5611 37.0978 31.3749 37.1259C31.1885 37.1535 30.9703 37.1676 30.72 37.1676C30.1305 37.1676 29.6592 36.9867 29.3062 36.6246C28.953 36.2628 28.7765 35.7394 28.7765 35.0546V34.3531C28.7765 33.6682 28.953 33.1448 29.3062 32.7831C29.6592 32.421 30.1305 32.2401 30.72 32.2401C30.9703 32.2401 31.1885 32.254 31.3749 32.2817C31.5611 32.3098 31.7127 32.3375 31.8294 32.3653C31.8906 32.3819 31.9351 32.4029 31.963 32.4279C31.9907 32.453 32.0047 32.4962 32.0047 32.5574V33.3007C32.0047 33.3453 31.9893 33.38 31.9588 33.4051C31.9281 33.4301 31.8906 33.4426 31.8462 33.4426H31.8294C31.6737 33.4261 31.5251 33.4121 31.3832 33.401C31.2413 33.3901 31.0508 33.3842 30.8118 33.3842C30.7172 33.3842 30.6283 33.3996 30.5448 33.4301C30.4613 33.4608 30.3891 33.5137 30.328 33.5888C30.2666 33.6641 30.2181 33.7641 30.1819 33.8895C30.1457 34.0147 30.1277 34.1692 30.1277 34.3531V35.0546C30.1277 35.2382 30.1457 35.3927 30.1819 35.5181C30.2181 35.6433 30.2666 35.7436 30.328 35.8187C30.3891 35.8939 30.4613 35.9468 30.5448 35.9774C30.6283 36.008 30.7172 36.0233 30.8118 36.0233C31.0508 36.0233 31.2413 36.0178 31.3832 36.0067C31.5251 35.9956 31.6737 35.9815 31.8294 35.9649H31.8462C31.8906 35.9649 31.9281 35.9774 31.9588 36.0025C31.9893 36.0276 32.0047 36.0623 32.0047 36.1071ZM36.6346 34.4115C36.6346 34.0773 36.5885 33.7768 36.4966 33.5095C36.4046 33.2423 36.2709 33.0155 36.0954 32.8289C35.9199 32.6424 35.7025 32.4976 35.4436 32.3946C35.1844 32.2918 34.8848 32.2401 34.5449 32.2401C34.2051 32.2401 33.9056 32.2918 33.6465 32.3946C33.3873 32.4976 33.1685 32.6424 32.9903 32.8289C32.8119 33.0155 32.6768 33.2423 32.585 33.5095C32.4928 33.7768 32.4469 34.0773 32.4469 34.4115V34.9961C32.4469 35.3301 32.4928 35.6309 32.585 35.8981C32.6768 36.1653 32.8119 36.3922 32.9903 36.5788C33.1685 36.7654 33.3873 36.91 33.6465 37.013C33.9056 37.1159 34.2051 37.1676 34.5449 37.1676C34.8848 37.1676 35.1844 37.1159 35.4436 37.013C35.7025 36.91 35.9199 36.7654 36.0954 36.5788C36.2709 36.3922 36.4046 36.1653 36.4966 35.8981C36.5885 35.6309 36.6346 35.3301 36.6346 34.9961V34.4115ZM34.5449 36.0233C35.037 36.0233 35.2832 35.6809 35.2832 34.9961V34.4115C35.2832 33.7322 35.037 33.3925 34.5449 33.3925C34.3016 33.3925 34.1164 33.4774 33.9893 33.6472C33.8619 33.8172 33.7984 34.0719 33.7984 34.4115V34.9961C33.7984 35.3357 33.8619 35.5918 33.9893 35.7644C34.1164 35.9371 34.3016 36.0233 34.5449 36.0233ZM41.5976 36.917V34.1358C41.5976 33.8744 41.5765 33.6278 41.5351 33.3968C41.4933 33.166 41.4181 32.9653 41.3095 32.7954C41.2011 32.6256 41.0511 32.4905 40.8593 32.3904C40.6674 32.2902 40.4213 32.2401 40.1211 32.2401C39.8542 32.2401 39.6177 32.2723 39.4119 32.3369C39.2062 32.4014 38.9893 32.515 38.7613 32.6776V32.4752C38.7613 32.4305 38.7447 32.3911 38.7111 32.3575C38.678 32.3238 38.6389 32.3068 38.5945 32.3068H37.6602C37.6157 32.3068 37.5769 32.3235 37.5434 32.357C37.5102 32.3904 37.4934 32.4295 37.4934 32.4739V36.917C37.4934 36.9615 37.5114 37.0019 37.5476 37.038C37.5838 37.0743 37.624 37.0923 37.6687 37.0923H38.678C38.7224 37.0923 38.7613 37.0743 38.7948 37.0382C38.828 37.0021 38.8448 36.9619 38.8448 36.9173V33.6341C38.9893 33.5564 39.1256 33.4925 39.2534 33.4426C39.3815 33.3925 39.5065 33.3675 39.629 33.3675C39.7568 33.3675 39.8611 33.38 39.9416 33.4051C40.0222 33.4301 40.0849 33.4731 40.1294 33.5345C40.1739 33.5954 40.2044 33.6759 40.2212 33.7757C40.2378 33.8758 40.2462 33.9981 40.2462 34.1425V36.9173C40.2462 36.9619 40.2628 37.0021 40.2962 37.0382C40.3296 37.0743 40.3684 37.0923 40.413 37.0923H41.4223C41.4668 37.0923 41.5072 37.0743 41.5434 37.038C41.5794 37.0019 41.5976 36.9615 41.5976 36.917ZM45.2348 36.2893V36.9357C45.2348 37.0295 45.182 37.0848 45.0763 37.1011C44.9483 37.1233 44.8371 37.1398 44.7427 37.1509C44.6481 37.162 44.5395 37.1675 44.4174 37.1675C44.1905 37.1675 43.9901 37.1493 43.816 37.1133C43.6419 37.077 43.4966 37.0061 43.3805 36.9003C43.2646 36.7945 43.1761 36.6483 43.1153 36.4617C43.0547 36.2753 43.0242 36.0347 43.0242 35.7394V33.3175L42.357 33.2088C42.3123 33.1977 42.2721 33.1769 42.2359 33.1462C42.1997 33.1157 42.1817 33.0781 42.1817 33.0335V32.4822C42.1817 32.4378 42.1997 32.3974 42.2359 32.3611C42.2721 32.325 42.3123 32.3068 42.357 32.3068H43.0242V31.622C43.0242 31.5774 43.0409 31.5414 43.0739 31.5134C43.1068 31.4857 43.1458 31.4663 43.1902 31.455L44.2016 31.2798H44.2263C44.2705 31.2798 44.3065 31.2921 44.3343 31.3171C44.3618 31.3423 44.3757 31.3771 44.3757 31.4215V32.3068H45.0597C45.104 32.3068 45.143 32.3237 45.1764 32.3573C45.2099 32.3909 45.2265 32.4305 45.2265 32.4752V33.1573C45.2265 33.2024 45.2099 33.2416 45.1764 33.2752C45.143 33.3089 45.104 33.3257 45.0597 33.3257H44.3757V35.7561C44.3757 35.9231 44.3895 36.0304 44.4174 36.0776C44.4451 36.1249 44.5229 36.1485 44.6507 36.1485H45.0597C45.1764 36.1485 45.2348 36.1955 45.2348 36.2893ZM49.6891 33.9438C49.6891 33.6377 49.6433 33.3772 49.5514 33.1629C49.4597 32.9487 49.3305 32.7732 49.1637 32.6367C48.9969 32.5004 48.7925 32.4003 48.5505 32.3362C48.3087 32.2722 48.0376 32.2401 47.7373 32.2401C47.4589 32.2401 47.188 32.2597 46.924 32.2987C46.6597 32.3375 46.4497 32.3766 46.2942 32.4154C46.1882 32.4435 46.1357 32.5046 46.1357 32.5991V33.2756C46.1357 33.3314 46.1494 33.3705 46.1773 33.3925C46.2052 33.4149 46.2412 33.4261 46.2857 33.4261H46.3274C46.3943 33.4204 46.4776 33.4135 46.5777 33.4051C46.6779 33.3968 46.7905 33.3901 46.9155 33.3842C47.0408 33.3788 47.1714 33.3746 47.3077 33.3717C47.4438 33.3689 47.5788 33.3675 47.7121 33.3675C47.9068 33.3675 48.0598 33.4038 48.171 33.4761C48.2822 33.5486 48.3378 33.7045 48.3378 33.9438V34.2445H47.8874C47.1698 34.2445 46.6486 34.3572 46.3233 34.5827C45.998 34.8081 45.8353 35.1659 45.8353 35.6558V35.7313C45.8353 36.0039 45.8755 36.2321 45.9562 36.4158C46.0366 36.5996 46.144 36.7472 46.2774 36.8587C46.4109 36.9699 46.5623 37.0493 46.7321 37.0964C46.9017 37.1438 47.0782 37.1676 47.2618 37.1676C47.5121 37.1676 47.7274 37.1341 47.9082 37.0673C48.0889 37.0005 48.2597 36.9086 48.4213 36.7917V36.9253C48.4213 36.9699 48.4379 37.0089 48.4713 37.0422C48.5046 37.0756 48.5436 37.0923 48.5881 37.0923H49.5224C49.5668 37.0923 49.6057 37.0756 49.6392 37.0422C49.6724 37.0089 49.6891 36.9699 49.6891 36.9253V33.9438ZM48.0418 36.0942C48.1556 36.0581 48.2628 36.015 48.3629 35.9648V35.0462H47.8874C47.7428 35.0462 47.6233 35.0587 47.5287 35.0837C47.4341 35.1088 47.359 35.1465 47.3035 35.1966C47.2477 35.2465 47.2088 35.3107 47.1868 35.3886C47.1644 35.4666 47.1533 35.5556 47.1533 35.6558V35.7312C47.1533 35.9092 47.1963 36.0233 47.2826 36.0734C47.3688 36.1235 47.5008 36.1485 47.6789 36.1485C47.8067 36.1485 47.9274 36.1306 48.0418 36.0942ZM53.7933 36.8502V36.1071C53.7933 36.0623 53.7779 36.0276 53.7474 36.0025C53.7167 35.9774 53.6793 35.9649 53.6348 35.9649H53.6181C53.4624 35.9815 53.3136 35.9956 53.1718 36.0067C53.0301 36.0178 52.8395 36.0233 52.6005 36.0233C52.5057 36.0233 52.4167 36.008 52.3336 35.9774C52.2501 35.9468 52.1777 35.8939 52.1165 35.8187C52.0554 35.7436 52.0067 35.6433 51.9707 35.5181C51.9343 35.3927 51.9165 35.2382 51.9165 35.0546V34.3531C51.9165 34.1692 51.9343 34.0147 51.9707 33.8895C52.0067 33.7641 52.0554 33.6641 52.1165 33.5888C52.1777 33.5137 52.2501 33.4608 52.3336 33.4301C52.4167 33.3996 52.5057 33.3842 52.6005 33.3842C52.8395 33.3842 53.0301 33.3901 53.1718 33.401C53.3136 33.4121 53.4624 33.4261 53.6181 33.4426H53.6348C53.6793 33.4426 53.7167 33.4301 53.7474 33.4051C53.7779 33.38 53.7933 33.3453 53.7933 33.3007V32.5574C53.7933 32.4962 53.7794 32.453 53.7515 32.4279C53.7235 32.4029 53.6793 32.3819 53.6181 32.3653C53.5014 32.3375 53.3497 32.3098 53.1635 32.2817C52.9771 32.254 52.759 32.2401 52.5087 32.2401C51.9189 32.2401 51.4479 32.421 51.0947 32.7831C50.7415 33.1448 50.565 33.6682 50.565 34.3531V35.0546C50.565 35.7394 50.7415 36.2628 51.0947 36.6246C51.4479 36.9867 51.9189 37.1676 52.5087 37.1676C52.759 37.1676 52.9771 37.1535 53.1635 37.1259C53.3497 37.0978 53.5014 37.0701 53.6181 37.0422C53.6793 37.0255 53.7235 37.0047 53.7515 36.9796C53.7794 36.9546 53.7933 36.9114 53.7933 36.8502ZM57.3884 36.2893V36.9357C57.3884 37.0295 57.3354 37.0848 57.2299 37.1011C57.1019 37.1233 56.9907 37.1398 56.8963 37.1509C56.8016 37.162 56.6931 37.1675 56.571 37.1675C56.3441 37.1675 56.1437 37.1493 55.9696 37.1133C55.7954 37.077 55.6502 37.0061 55.5343 36.9003C55.4183 36.7945 55.3298 36.6483 55.269 36.4617C55.2083 36.2753 55.1778 36.0347 55.1778 35.7394V33.3175L54.5106 33.2088C54.4659 33.1977 54.4257 33.1769 54.3895 33.1462C54.3533 33.1157 54.3353 33.0781 54.3353 33.0335V32.4822C54.3353 32.4378 54.3533 32.3974 54.3895 32.3611C54.4257 32.325 54.4659 32.3068 54.5106 32.3068H55.1778V31.622C55.1778 31.5774 55.1945 31.5414 55.2276 31.5134C55.2605 31.4857 55.2993 31.4663 55.3436 31.455L56.355 31.2798H56.38C56.4241 31.2798 56.4602 31.2921 56.4875 31.3171C56.5154 31.3423 56.5293 31.3771 56.5293 31.4215V32.3068H57.2133C57.2577 32.3068 57.2966 32.3237 57.3301 32.3573C57.3633 32.3909 57.3801 32.4305 57.3801 32.4752V33.1573C57.3801 33.2024 57.3633 33.2416 57.3301 33.2752C57.2966 33.3089 57.2577 33.3257 57.2133 33.3257H56.5293V35.7561C56.5293 35.9231 56.5431 36.0304 56.571 36.0776C56.5987 36.1249 56.6765 36.1485 56.8045 36.1485H57.2133C57.3301 36.1485 57.3884 36.1955 57.3884 36.2893Z", fill: "#005697" }), jsxRuntime.jsx("path", { d: "M52.6187 14.7398H39.0664L37.6881 16.2935L33.2155 21.3349V21.3351L31.8372 22.8886H18.464L19.821 21.3153L20.4633 20.5706L21.8202 18.9973H15.6582C14.5325 18.9973 13.6113 19.943 13.6113 21.0987V25.5326C13.6113 26.6885 14.5325 27.6342 15.6582 27.6342H39.2492C40.3749 27.6342 41.9127 26.9318 42.6665 26.0733L46.235 22.0097L52.6187 14.7398Z", fill: "#005697" }), jsxRuntime.jsx("path", { d: "M55.3418 10C56.4676 10 57.3887 10.9457 57.3887 12.1015V16.5353C57.3887 17.691 56.4676 18.6368 55.3418 18.6368H49.1999L50.5697 17.0753H50.5699L51.2491 16.3012L52.6189 14.7398H39.0667L31.8375 22.8945H18.3813L28.0314 11.9701L28.3966 11.5566C29.153 10.7005 30.6929 10 31.8186 10H55.3418V10Z", fill: "#FBD500" })] })));
18413
+ return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.0266 9.91185H35.684C47.003 9.91185 51.3527 16.0977 51.3527 23.9167C51.3527 33.2698 45.273 37.9711 35.684 37.9711H19.0266V9.91185ZM20.6082 11.5944V36.3875H35.6838C44.7786 36.3875 49.7215 32.1316 49.7215 23.9662C49.7215 15.5534 44.3832 11.5944 35.6838 11.5944H20.6082ZM25.0568 24.4115C26.722 24.4115 28.072 23.06 28.072 21.3928C28.072 19.7256 26.722 18.3741 25.0568 18.3741C23.3916 18.3741 22.0417 19.7256 22.0417 21.3928C22.0417 23.06 23.3916 24.4115 25.0568 24.4115ZM22.635 25.6982H27.479V34.309H22.635V25.6982Z", fill: "black" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M44.2351 18.6216H45.6191V22.7785H47.6456C47.1019 15.207 41.1211 13.5244 35.684 13.5244H29.9009V18.6216H30.7412C32.3229 18.6216 33.262 19.6608 33.262 21.3929C33.262 23.1249 32.3229 24.1641 30.7906 24.1641H29.9009V34.309H35.684C44.5317 34.309 47.5468 30.2016 47.6951 24.1641H44.2351V18.6216ZM37.5623 22.7785V24.1641H34.1023V18.6216H37.4634V20.0072H35.4863V20.6505H37.3646V22.0362H35.5357V22.7785H37.5623ZM39.8358 18.6216H41.813L43.4935 24.1641H42.0601L41.7635 23.1249H39.9347L39.6381 24.1641H38.1553L39.8358 18.6216ZM40.3456 21.6898H40.3302V21.7393L40.3456 21.6898ZM40.3456 21.6898H41.3188L40.8739 20.1557H40.8245L40.3456 21.6898ZM29.9009 22.7785V20.0072H30.7412C31.2849 20.0072 31.878 20.1557 31.878 21.3929C31.878 22.63 31.3343 22.7785 30.7412 22.7785H29.9009Z", fill: "#D50072" })] })));
18414
18414
  };
18415
18415
 
18416
- var Text$q = antd.Typography.Text;
18416
+ var Text$r = antd.Typography.Text;
18417
18417
  var MiniCreditCard = function (_a) {
18418
18418
  var className = _a.className, buttons = _a.buttons, _b = _a.hideDropdownMenu, hideDropdownMenu = _b === void 0 ? false : _b, _c = _a.hideDefaultTag, hideDefaultTag = _c === void 0 ? false : _c, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData, onClickSetDefault = _a.onClickSetDefault, id = _a.id;
18419
18419
  var darkMode = react.useContext(BunnyContext).darkMode;
@@ -18424,7 +18424,7 @@ var MiniCreditCard = function (_a) {
18424
18424
  return darkMode ? 'var(--row-background-alternate)' : 'bg-slate-50';
18425
18425
  }, [darkMode]);
18426
18426
  var isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
18427
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Issuer, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$q, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] }))) })));
18427
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Issuer, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$r, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] }))) })));
18428
18428
  };
18429
18429
  var Identifier = function (_a) {
18430
18430
  var _b, _c, _d;
@@ -18433,9 +18433,9 @@ var Identifier = function (_a) {
18433
18433
  return null;
18434
18434
  }
18435
18435
  if (((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.type) === 'cashapp') {
18436
- return jsxRuntime.jsx(Text$q, { children: "Cashapp" });
18436
+ return jsxRuntime.jsx(Text$r, { children: "Cashapp" });
18437
18437
  }
18438
- return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$q, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$q, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
18438
+ return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$r, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$r, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
18439
18439
  };
18440
18440
  var Issuer = function (_a) {
18441
18441
  var _b;
@@ -18444,7 +18444,7 @@ var Issuer = function (_a) {
18444
18444
  var issuer = (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer;
18445
18445
  if (issuer.length == 0 || list.includes(issuer.toLowerCase()))
18446
18446
  return null;
18447
- return jsxRuntime.jsx(Text$q, { children: lodashExports.capitalize(issuer) });
18447
+ return jsxRuntime.jsx(Text$r, { children: lodashExports.capitalize(issuer) });
18448
18448
  };
18449
18449
  var DropdownMenu = function (_a) {
18450
18450
  var setDefault = _a.setDefault, remove = _a.remove, isDefault = _a.isDefault, id = _a.id;
@@ -18741,7 +18741,7 @@ function useSave$1(_a) {
18741
18741
  return { save: save, isSaving: isSaving };
18742
18742
  }
18743
18743
 
18744
- var Text$p = antd.Typography.Text;
18744
+ var Text$q = antd.Typography.Text;
18745
18745
  var TEST_CARD = '4242424242424242';
18746
18746
  var DemoPayForm = function (_a) {
18747
18747
  var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -18803,7 +18803,7 @@ var DemoPayForm = function (_a) {
18803
18803
  var onCardCvcChange = function (cvc) {
18804
18804
  setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
18805
18805
  };
18806
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$p, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
18806
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$q, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
18807
18807
  };
18808
18808
  var StyledInputs = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"], ["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"])), function (_a) {
18809
18809
  var darkMode = _a.darkMode;
@@ -18970,7 +18970,7 @@ var CardIcon = function (_a) {
18970
18970
  return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
18971
18971
  };
18972
18972
 
18973
- var Text$o = antd.Typography.Text;
18973
+ var Text$p = antd.Typography.Text;
18974
18974
  var PaymentMethodSelector = function (_a) {
18975
18975
  var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
18976
18976
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsxRuntime.jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
@@ -18983,7 +18983,7 @@ var PaymentOption = function (_a) {
18983
18983
  var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
18984
18984
  return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ".concat(darkMode
18985
18985
  ? "var(--row-background-dark) border-gray-500"
18986
- : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$o, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] })));
18986
+ : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$p, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] })));
18987
18987
  };
18988
18988
  var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"], ["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"])), function (_a) {
18989
18989
  var $brandColor = _a.$brandColor, $selected = _a.$selected;
@@ -19632,7 +19632,7 @@ var PaymentHoldModal = function (_a) {
19632
19632
  } }) }))] })));
19633
19633
  };
19634
19634
 
19635
- var Text$n = antd.Typography.Text;
19635
+ var Text$o = antd.Typography.Text;
19636
19636
  defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
19637
19637
  function Quote(_a) {
19638
19638
  var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onQuoteLoaded = _a.onQuoteLoaded;
@@ -19723,7 +19723,7 @@ function ActualQuote() {
19723
19723
  if ((firstInvoice === null || firstInvoice === void 0 ? void 0 : firstInvoice.state) === 'PAID' && paymentHoldCompleted) {
19724
19724
  return jsxRuntime.jsx(Invoice, { id: firstInvoice.id });
19725
19725
  }
19726
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.documentTemplateId) ? "/pdf/quote" : undefined }, { children: ((_d = (_c = formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.quote.documents.map(function (doc, index) {
19726
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.documentTemplateId) ? "/pdf/quote" : undefined }, { children: ((_d = (_c = formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.quote.documents.map(function (doc, index) {
19727
19727
  return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
19728
19728
  }) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept, isSendAcceptPending: isSendAcceptPending }), jsxRuntime.jsx(PaymentHoldModal, { visible: paymentHoldModalVisible, setVisible: setPaymentHoldModalVisible, quote: formattedQuote }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
19729
19729
  }
@@ -19738,7 +19738,7 @@ function QuoteButtons(_a) {
19738
19738
  var signingPlugins = useSigningPlugins({ apiHost: apiHost, token: token });
19739
19739
  return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
19740
19740
  color: entityBranding.secondaryColor,
19741
- } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$n, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [paymentHold ? (jsxRuntime.jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired, onClick: function () { return setPaymentHoldModalVisible(true); }, type: "primary" }, { children: "Pay to accept" }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary" }, { children: isExpired
19741
+ } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$o, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [paymentHold ? (jsxRuntime.jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired, onClick: function () { return setPaymentHoldModalVisible(true); }, type: "primary" }, { children: "Pay to accept" }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary" }, { children: isExpired
19742
19742
  ? 'Quote is expired'
19743
19743
  : (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length)
19744
19744
  ? 'Start signing'
@@ -19838,10 +19838,10 @@ var getColor = function (state) {
19838
19838
  }
19839
19839
  };
19840
19840
 
19841
- var Text$m = antd.Typography.Text;
19841
+ var Text$n = antd.Typography.Text;
19842
19842
  var TransactionDate = function (_a) {
19843
19843
  var date = _a.date;
19844
- return jsxRuntime.jsx(Text$m, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
19844
+ return jsxRuntime.jsx(Text$n, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
19845
19845
  };
19846
19846
 
19847
19847
  var ArrowDownToLine = function (_a) {
@@ -19878,13 +19878,13 @@ var TransactionGridCell = defaultStyled.div.withConfig({
19878
19878
  }, common.SLATE_600);
19879
19879
  var templateObject_1$6;
19880
19880
 
19881
- var Text$l = antd.Typography.Text;
19881
+ var Text$m = antd.Typography.Text;
19882
19882
  var TransactionsEmptyState = function () {
19883
19883
  var noTransactionsMessage = react.useContext(TransactionsListContext).noTransactionsMessage;
19884
- return (jsxRuntime.jsx(Text$l, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || 'There are no transactions' })));
19884
+ return (jsxRuntime.jsx(Text$m, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || 'There are no transactions' })));
19885
19885
  };
19886
19886
 
19887
- var Text$k = antd.Typography.Text;
19887
+ var Text$l = antd.Typography.Text;
19888
19888
  var isInvoice = function (transaction) {
19889
19889
  return transaction.kind === 'INVOICE';
19890
19890
  };
@@ -19893,7 +19893,7 @@ var TransactionRowTitle = function (_a) {
19893
19893
  if (!isInvoice(transaction)) {
19894
19894
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
19895
19895
  }
19896
- return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: '11px' } }, { children: transaction.transactionable.number })));
19896
+ return (jsxRuntime.jsx(Text$l, __assign({ className: "bunny-text-slate-400", style: { fontSize: '11px' } }, { children: transaction.transactionable.number })));
19897
19897
  };
19898
19898
 
19899
19899
  function transactionDateToDisplay(transaction, transactionDateType) {
@@ -19911,7 +19911,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
19911
19911
  }
19912
19912
  }
19913
19913
 
19914
- var Text$j = antd.Typography.Text;
19914
+ var Text$k = antd.Typography.Text;
19915
19915
  var TransactionsListDesktop = function (_a) {
19916
19916
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19917
19917
  var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19940,11 +19940,11 @@ var TransactionsListDesktop = function (_a) {
19940
19940
  !showState &&
19941
19941
  !showAmount &&
19942
19942
  !showDownload &&
19943
- !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));
19943
+ !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$k, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$k, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$k, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && jsxRuntime.jsx(TransactionGridCell, { right: false }), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$k, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
19944
19944
  }) }));
19945
19945
  };
19946
19946
 
19947
- var Text$i = antd.Typography.Text;
19947
+ var Text$j = antd.Typography.Text;
19948
19948
  var TransactionsListMobile = function (_a) {
19949
19949
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19950
19950
  var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19967,11 +19967,11 @@ var TransactionsListMobile = function (_a) {
19967
19967
  backgroundColor: index % 2 === 0
19968
19968
  ? "var(--row-background".concat(darkMode ? '-dark' : '', ")")
19969
19969
  : "var(--row-background-alternate".concat(darkMode ? '-dark' : '', ")"),
19970
- } }, { 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));
19970
+ } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$j, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$j, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$j, { children: common.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
19971
19971
  }) }));
19972
19972
  };
19973
19973
 
19974
- var Text$h = antd.Typography.Text;
19974
+ var Text$i = antd.Typography.Text;
19975
19975
  var DISPLAY_WIDTH = 1200;
19976
19976
  function Transactions(_a) {
19977
19977
  var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? 'Past transactions' : _d, _e = _a.columns, columns = _e === void 0 ? ['date', 'title', 'state', 'amount', 'download'] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? 'shadow-md' : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
@@ -20082,7 +20082,7 @@ function TransactionsDisplay(_a) {
20082
20082
  onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
20083
20083
  setDrawerOpen(false);
20084
20084
  }
20085
- return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? 'bunny-overflow-hidden' : '', " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center', " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$h, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
20085
+ return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? 'bunny-overflow-hidden' : '', " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center', " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$i, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
20086
20086
  ), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? 'bunny-w-full' : '') }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName ? searchBarClassName : '', onChange: function (e) {
20087
20087
  if (isNaN(Number(e.target.value))) {
20088
20088
  return;
@@ -20312,21 +20312,22 @@ var getPriceList = function (_a) {
20312
20312
  });
20313
20313
  };
20314
20314
 
20315
- 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 }"); };
20315
+ var QUOTE_FIELDS = function (removeFormattedQuoteField) { return "\n fragment QuoteFields on Quote {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n ".concat(removeFormattedQuoteField ? '' : "formattedQuote { html }", "\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n startDate\n amountsByPeriod {\n amount\n startDate\n }\n 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"); };
20316
+ var QUOTE_QUERY = function (id, removeFormattedQuoteField) { return "\n".concat(QUOTE_FIELDS(removeFormattedQuoteField), "\n query quote {\n quote ").concat(id ? "(id: ".concat(id, ")") : '', " {\n ...QuoteFields\n }\n }"); };
20316
20317
  var getQuote = function (_a) {
20317
- var id = _a.id, token = _a.token, apiHost = _a.apiHost;
20318
+ var id = _a.id, token = _a.token, apiHost = _a.apiHost, _b = _a.removeFormattedQuoteField, removeFormattedQuoteField = _b === void 0 ? false : _b;
20318
20319
  return __awaiter(void 0, void 0, void 0, function () {
20319
20320
  var response;
20320
- return __generator(this, function (_b) {
20321
- switch (_b.label) {
20321
+ return __generator(this, function (_c) {
20322
+ switch (_c.label) {
20322
20323
  case 0: return [4 /*yield*/, gqlRequest({
20323
- query: QUOTE_QUERY(id),
20324
+ query: QUOTE_QUERY(id, removeFormattedQuoteField),
20324
20325
  token: token,
20325
20326
  vars: {},
20326
20327
  apiHost: apiHost,
20327
20328
  })];
20328
20329
  case 1:
20329
- response = _b.sent();
20330
+ response = _c.sent();
20330
20331
  return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
20331
20332
  }
20332
20333
  });
@@ -20472,7 +20473,7 @@ var BunnyFooterIcon = function (_a) {
20472
20473
  return (jsxRuntime.jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
20473
20474
  };
20474
20475
 
20475
- var Text$g = antd.Typography.Text;
20476
+ var Text$h = antd.Typography.Text;
20476
20477
  var Footer = function (_a) {
20477
20478
  var className = _a.className;
20478
20479
  var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
@@ -20482,7 +20483,7 @@ var Footer = function (_a) {
20482
20483
  var BunnyMarketingLink = function () {
20483
20484
  var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
20484
20485
  var isMobile = common.useIsMobile();
20485
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsxRuntime.jsx(Text$g, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsxRuntime.jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
20486
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsxRuntime.jsx(Text$h, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsxRuntime.jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
20486
20487
  };
20487
20488
  var StyedLink = styled__default["default"].a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n"])), common.SLATE_400, common.SLATE_500);
20488
20489
  var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n &:hover {\n color: ", " !important;\n }\n"], ["\n &:hover {\n color: ", " !important;\n }\n"])), common.PRIMARY_COLOR);
@@ -20501,10 +20502,10 @@ function CouponEditor(_a) {
20501
20502
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(className) }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2" }, { children: [jsxRuntime.jsx(antd.Input, { value: couponCode, onChange: function (e) { return setCouponCode(e.target.value); }, placeholder: "Coupon code", disabled: isAddingCoupon, size: "small" }), jsxRuntime.jsx(antd.Button, __assign({ loading: isAddingCoupon, type: "primary", onClick: handleAddCoupon, disabled: couponCode.length === 0 }, { children: "Apply" }))] })) })));
20502
20503
  }
20503
20504
 
20504
- var Text$f = antd.Typography.Text;
20505
+ var Text$g = antd.Typography.Text;
20505
20506
  function CheckoutSummary(_a) {
20506
20507
  var quote = _a.quote, className = _a.className, onAddCoupon = _a.onAddCoupon, onRemoveCoupon = _a.onRemoveCoupon, isRemovingCoupon = _a.isRemovingCoupon, priceListData = _a.priceListData, isAddingCoupon = _a.isAddingCoupon, couponCode = _a.couponCode, setCouponCode = _a.setCouponCode, activeCouponsExist = _a.activeCouponsExist;
20507
- return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxRuntime.jsxs(Text$f, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-text-lg bunny-font-medium bunny-mb-4" }, { children: ["Checkout summary - ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.product.name, " ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.name] })), jsxRuntime.jsx("div", __assign({ className: "bunny-space-y-4" }, { children: quote === null || quote === void 0 ? void 0 : quote.quoteChanges.map(function (quoteChange) {
20508
+ return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxRuntime.jsxs(Text$g, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-text-lg bunny-font-medium bunny-mb-4" }, { children: ["Checkout summary - ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.product.name, " ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.name] })), jsxRuntime.jsx("div", __assign({ className: "bunny-space-y-4" }, { children: quote === null || quote === void 0 ? void 0 : quote.quoteChanges.map(function (quoteChange) {
20508
20509
  return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
20509
20510
  var _a;
20510
20511
  var multiplier = charge.kind === 'COUPON' ? -1 : 1;
@@ -20566,18 +20567,18 @@ function InitialSignupForm(_a) {
20566
20567
  } }) })) })) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full" }, { children: "Proceed to payment" })) })] })) })));
20567
20568
  }
20568
20569
 
20569
- var Title = antd.Typography.Title, Text$e = antd.Typography.Text;
20570
+ var Title = antd.Typography.Title, Text$f = antd.Typography.Text;
20570
20571
  function PaymentSuccessDisplay(_a) {
20571
20572
  var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
20572
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
20573
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$f, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
20573
20574
  }
20574
20575
 
20575
- var Text$d = antd.Typography.Text;
20576
+ var Text$e = antd.Typography.Text;
20576
20577
  function PriceListDisplay(_a) {
20577
20578
  var priceListData = _a.priceListData;
20578
20579
  if (!priceListData)
20579
20580
  return null;
20580
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(Text$d, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxRuntime.jsxs(Text$d, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " / month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$d, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$d, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
20581
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " / month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
20581
20582
  }
20582
20583
 
20583
20584
  var showErrorNotification = common.useErrorNotification();
@@ -20840,8 +20841,25 @@ var useQuoteDelete = function () {
20840
20841
  });
20841
20842
  }); };
20842
20843
  };
20844
+ var useQuoteSubscriptionAddon = function () {
20845
+ var graphQLRequest = useGraphQLRequest();
20846
+ return function (_a, apiHost, token) {
20847
+ var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
20848
+ return __awaiter(void 0, void 0, void 0, function () {
20849
+ var response;
20850
+ return __generator(this, function (_b) {
20851
+ switch (_b.label) {
20852
+ case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteSubscriptionAddon($subscriptionId: ID!, $priceListId: ID) {\n quoteSubscriptionAddon(subscriptionId: $subscriptionId, priceListId: $priceListId) {\n errors\n quote {\n id\n }\n }\n }\n ", apiHost, token, { subscriptionId: subscriptionId, priceListId: priceListId })];
20853
+ case 1:
20854
+ response = _b.sent();
20855
+ return [2 /*return*/, response];
20856
+ }
20857
+ });
20858
+ });
20859
+ };
20860
+ };
20843
20861
 
20844
- 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 }";
20862
+ var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n addonSubscriptions {\n id\n }\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList {\n id\n periodMonths\n name\n plan {\n id\n addon\n addonPlans { id }\n }\n }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n account { id }\n daysLeftInTrial\n 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 }";
20845
20863
  var getSubscriptions = function (_a) {
20846
20864
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
20847
20865
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21167,13 +21185,9 @@ var QuotePreviewContext = react.createContext({});
21167
21185
  function QuotePreviewProvider(_a) {
21168
21186
  var children = _a.children;
21169
21187
  var _b = react.useState(), quotePreviewData = _b[0], setQuotePreviewData = _b[1];
21170
- function handleSetEditingQuote(editingQuoteId) {
21171
- setQuotePreviewData(__assign(__assign({}, quotePreviewData), { editingQuoteId: editingQuoteId }));
21172
- }
21173
21188
  return (jsxRuntime.jsx(QuotePreviewContext.Provider, __assign({ value: {
21174
21189
  quotePreviewData: quotePreviewData,
21175
21190
  setQuotePreviewData: setQuotePreviewData,
21176
- handleSetEditingQuote: handleSetEditingQuote,
21177
21191
  } }, { children: children })));
21178
21192
  }
21179
21193
 
@@ -21191,8 +21205,136 @@ var PageTitle = function (_a) {
21191
21205
  } })), title] })));
21192
21206
  };
21193
21207
 
21208
+ var useQuoteCreate = function (_a) {
21209
+ var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, upgradingSubscription = _a.upgradingSubscription, selectedPriceList = _a.selectedPriceList, token = _a.token;
21210
+ var apiHost = react.useContext(BunnyContext).apiHost;
21211
+ var createSubscriptionQuote = useQuoteSubscriptionUpgrade();
21212
+ var createSubscriptionAddonQuote = useQuoteSubscriptionAddon();
21213
+ // Queries
21214
+ var quote = reactQuery.useQuery({
21215
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
21216
+ objectName: 'editingQuote',
21217
+ id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21218
+ token: token,
21219
+ }),
21220
+ queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21221
+ var quote;
21222
+ return __generator(this, function (_a) {
21223
+ switch (_a.label) {
21224
+ case 0:
21225
+ if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
21226
+ throw new Error('editingQuote is undefined');
21227
+ }
21228
+ return [4 /*yield*/, getQuote({
21229
+ id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21230
+ token: token,
21231
+ apiHost: apiHost,
21232
+ removeFormattedQuoteField: false,
21233
+ })];
21234
+ case 1:
21235
+ quote = _a.sent();
21236
+ return [2 /*return*/, quote];
21237
+ }
21238
+ });
21239
+ }); },
21240
+ enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
21241
+ }).data;
21242
+ var _b = reactQuery.useMutation({
21243
+ mutationFn: function (_a) {
21244
+ var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
21245
+ return createSubscriptionQuote(subscriptionId, priceListId, apiHost, token);
21246
+ },
21247
+ onSuccess: function (subscriptionUpdateData) {
21248
+ var _a;
21249
+ var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
21250
+ setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21251
+ },
21252
+ }), createQuote = _b.mutate, isCreatingQuote = _b.isPending;
21253
+ var _c = reactQuery.useMutation({
21254
+ mutationFn: function (_a) {
21255
+ var subscriptionId = _a.subscriptionId;
21256
+ return createSubscriptionAddonQuote({ subscriptionId: subscriptionId }, apiHost, token);
21257
+ },
21258
+ onSuccess: function (subscriptionAddonUpdateData) {
21259
+ var _a;
21260
+ var quote = (_a = subscriptionAddonUpdateData === null || subscriptionAddonUpdateData === void 0 ? void 0 : subscriptionAddonUpdateData.quoteSubscriptionAddon) === null || _a === void 0 ? void 0 : _a.quote;
21261
+ setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21262
+ },
21263
+ }), createEmptyQuote = _c.mutate, isCreatingEmptyQuote = _c.isPending;
21264
+ react.useEffect(function () {
21265
+ if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
21266
+ console.error('upgradingSubscription is undefined');
21267
+ return;
21268
+ }
21269
+ if (!(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
21270
+ console.error('selectedPriceList is undefined');
21271
+ return;
21272
+ }
21273
+ var buyingAddonsForCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
21274
+ if (buyingAddonsForCurrentSubscription) {
21275
+ createEmptyQuote({
21276
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21277
+ });
21278
+ }
21279
+ else {
21280
+ createQuote({
21281
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21282
+ priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21283
+ });
21284
+ }
21285
+ }, [selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id]);
21286
+ return { quote: quote, isQuotePending: isCreatingQuote || isCreatingEmptyQuote };
21287
+ };
21288
+
21194
21289
  var SubscriptionsContext = react.createContext({});
21195
21290
 
21291
+ var PlanManagerQuoteContext = react.createContext({});
21292
+ function useFeatureAddonsPending() {
21293
+ var _a = react.useState([]), featureAddonsLoading = _a[0], setFeatureAddonsLoading = _a[1];
21294
+ var addFeatureAddonLoading = function (featureAddonId) {
21295
+ setFeatureAddonsLoading(__spreadArray(__spreadArray([], featureAddonsLoading, true), [featureAddonId], false));
21296
+ };
21297
+ var removeFeatureAddonLoading = function (featureAddonId) {
21298
+ setFeatureAddonsLoading(featureAddonsLoading.filter(function (id) { return id !== featureAddonId; }));
21299
+ };
21300
+ return {
21301
+ isFeatureAddonsLoading: featureAddonsLoading.length > 0,
21302
+ addFeatureAddonLoading: addFeatureAddonLoading,
21303
+ removeFeatureAddonLoading: removeFeatureAddonLoading,
21304
+ };
21305
+ }
21306
+ function PlanManagerQuoteProvider(_a) {
21307
+ var children = _a.children, editingQuoteData = _a.editingQuoteData, setEditingQuoteData = _a.setEditingQuoteData;
21308
+ // Contexts
21309
+ var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21310
+ var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21311
+ // Hooks
21312
+ var token = useToken();
21313
+ var _b = react.useState(false), isAddonPlanLoading = _b[0], setIsAddonPlanLoading = _b[1];
21314
+ var _c = useFeatureAddonsPending(), isFeatureAddonsLoading = _c.isFeatureAddonsLoading, addFeatureAddonLoading = _c.addFeatureAddonLoading, removeFeatureAddonLoading = _c.removeFeatureAddonLoading;
21315
+ var _d = useQuoteCreate({
21316
+ editingQuote: editingQuoteData,
21317
+ setEditingQuoteData: function (quoteId, isTrial) {
21318
+ setEditingQuoteData({
21319
+ id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) || '',
21320
+ isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) || false,
21321
+ });
21322
+ },
21323
+ upgradingSubscription: upgradingSubscription,
21324
+ selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList,
21325
+ token: token,
21326
+ }), quote = _d.quote, isQuotePending = _d.isQuotePending;
21327
+ return (jsxRuntime.jsx(PlanManagerQuoteContext.Provider, __assign({ value: {
21328
+ quote: quote,
21329
+ isQuotePending: isQuotePending,
21330
+ isAddonPlanLoading: isAddonPlanLoading,
21331
+ setIsAddonPlanLoading: setIsAddonPlanLoading,
21332
+ isFeatureAddonsLoading: isFeatureAddonsLoading,
21333
+ addFeatureAddonLoading: addFeatureAddonLoading,
21334
+ removeFeatureAddonLoading: removeFeatureAddonLoading,
21335
+ } }, { children: children })));
21336
+ }
21337
+
21196
21338
  var QUOTE_CHARGE_UPDATE = "\n mutation QuoteChargeUpdate (\n $discount: Float,\n $endDate: ISO8601Date,\n $name: String,\n $price: Float,\n $quantity: Int,\n $quoteChargeId: ID!\n $startDate: ISO8601Date\n $subtotal: Float,\n ) {\n quoteChargeUpdate(\n discount: $discount\n endDate: $endDate\n name: $name\n price: $price\n quantity: $quantity\n quoteChargeId: $quoteChargeId\n startDate: $startDate\n subtotal: $subtotal\n ) {\n quoteCharge {\n id\n }\n }\n }\n";
21197
21339
  var quoteChargeUpdate = function (_a) {
21198
21340
  var discount = _a.discount, name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
@@ -21259,6 +21401,21 @@ var QuantityLabel = function (_a) {
21259
21401
  return (jsxRuntime.jsx("span", __assign({ className: "bunny-text-slate-500 bunny-font-medium", style: { fontSize: "11px" } }, { children: pluralizedFeatureName.toUpperCase() })));
21260
21402
  };
21261
21403
 
21404
+ function isAddonPurchased(featureAddon, currentSubscription) {
21405
+ 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; });
21406
+ if (!purchasedFeatureAddons)
21407
+ return false;
21408
+ return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
21409
+ }
21410
+ function priceListHasUnpurchasedFeatureAddons(priceList, currentSubscription) {
21411
+ var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
21412
+ 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; });
21413
+ var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
21414
+ 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; }));
21415
+ });
21416
+ return unpurchasedFeatureAddons.length > 0;
21417
+ }
21418
+
21262
21419
  var periodMonthsConverter = function (period) {
21263
21420
  if (period === 0)
21264
21421
  return common.BillingPeriod.ONCE;
@@ -21329,33 +21486,44 @@ var getActivePlanPriceData = function (priceList, selectedPriceList) {
21329
21486
  };
21330
21487
  };
21331
21488
  var isPriceListDisabled = function (_a) {
21332
- var priceList = _a.priceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription, canPurchaseFeatureAddons = _a.canPurchaseFeatureAddons;
21489
+ var _b;
21490
+ var priceList = _a.priceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
21491
+ var canPurchaseFeatureAddons = priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21333
21492
  // Plan already has a subscription
21334
- var existingSubscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
21493
+ var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
21335
21494
  var _a, _b;
21336
- var isCurrentUpgradingSubscription = subscription.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id);
21337
- var subscriptionAlreadyExists = isCurrentUpgradingSubscription
21338
- ? subscription.priceList.id === priceList.id
21339
- : subscription.plan.id === priceList.plan.id;
21340
- return (subscriptionAlreadyExists &&
21341
- subscription.plan.id === priceList.plan.id &&
21495
+ return subscription.plan.id === priceList.plan.id &&
21342
21496
  ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== common.SubscriptionState.CANCELED &&
21343
- ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== common.SubscriptionState.EXPIRED);
21497
+ ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== common.SubscriptionState.EXPIRED;
21344
21498
  });
21345
- var isUpgradingPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21346
- if (existingSubscription) {
21347
- return true;
21499
+ var hasPlanAddons = ((_b = priceList.plan.addonPlans) === null || _b === void 0 ? void 0 : _b.length) || 0 > 0;
21500
+ // Is this plan the one that the user is upgrading from
21501
+ var isUpgradingPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id;
21502
+ if (hasPlanAddons) {
21503
+ return false;
21348
21504
  }
21349
- if (isUpgradingPriceList && !canPurchaseFeatureAddons) {
21350
- return true;
21505
+ else {
21506
+ if (subscriptionPlan && !isUpgradingPlan) {
21507
+ return true;
21508
+ }
21509
+ if (isUpgradingPlan && !canPurchaseFeatureAddons) {
21510
+ return true;
21511
+ }
21351
21512
  }
21352
21513
  return false;
21353
21514
  };
21354
21515
 
21355
21516
  var CheckoutButton = function (_a) {
21356
- var checkoutButtonDisabled = _a.checkoutButtonDisabled, onClickCheckout = _a.onClickCheckout, loading = _a.loading;
21517
+ var checkoutButtonDisabled = _a.checkoutButtonDisabled, onClickCheckout = _a.onClickCheckout, loading = _a.loading, tooltipText = _a.tooltipText;
21357
21518
  var isMobile = common.useIsMobile();
21358
- return (jsxRuntime.jsx(antd.Button, __assign({ className: isMobile ? "w-full" : "", disabled: checkoutButtonDisabled, onClick: onClickCheckout, size: isMobile ? "large" : "middle", type: "primary", loading: loading }, { children: "Proceed to checkout" })));
21519
+ var TooltipWrapper = function (_a) {
21520
+ var children = _a.children;
21521
+ if (tooltipText) {
21522
+ return jsxRuntime.jsx(antd.Tooltip, __assign({ title: tooltipText }, { children: children }));
21523
+ }
21524
+ return jsxRuntime.jsx("div", { children: children });
21525
+ };
21526
+ return (jsxRuntime.jsx(TooltipWrapper, { children: jsxRuntime.jsx(antd.Button, __assign({ className: isMobile ? 'w-full' : '', disabled: checkoutButtonDisabled, onClick: onClickCheckout, size: isMobile ? 'large' : 'middle', type: "primary", loading: loading }, { children: "Proceed to checkout" })) }));
21359
21527
  };
21360
21528
 
21361
21529
  var CheckoutPrice = function (_a) {
@@ -21372,10 +21540,11 @@ var CheckoutPrice = function (_a) {
21372
21540
 
21373
21541
  var CheckoutBarSummarySection = function (_a) {
21374
21542
  var _b;
21375
- var open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription;
21543
+ var open = _a.open, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription;
21376
21544
  // Context
21377
21545
  var apiHost = react.useContext(BunnyContext).apiHost;
21378
21546
  var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21547
+ var _c = react.useContext(PlanManagerQuoteContext), quote = _c.quote, isQuotePending = _c.isQuotePending, isAddonPlanLoading = _c.isAddonPlanLoading, isFeatureAddonsLoading = _c.isFeatureAddonsLoading;
21379
21548
  // Hooks
21380
21549
  var token = useToken();
21381
21550
  var paymentPlugins = usePaymentPlugins({
@@ -21391,39 +21560,42 @@ var CheckoutBarSummarySection = function (_a) {
21391
21560
  token: token,
21392
21561
  }),
21393
21562
  });
21394
- var isUpgradingCurrentSubscription = selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
21563
+ // When should checkout button be disabled?
21564
+ var isUpgradingSubscription = selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
21395
21565
  var disableCheckoutButton = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
21396
21566
  !selectedPriceList ||
21397
- // quantityLocal !== quotePreviewData.quantity ||
21398
21567
  isFetching ||
21399
- isUpgradingCurrentSubscription ||
21568
+ !isUpgradingSubscription ||
21400
21569
  open);
21401
21570
  var checkoutButtonDisabled = (quote === null || quote === void 0 ? void 0 : quote.amountDue) && (quote === null || quote === void 0 ? void 0 : quote.amountDue) > 0 ? false : disableCheckoutButton;
21402
21571
  var activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21403
21572
  var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === common.ChargeType.USAGE;
21404
- var hasPaymentMethodsOrIsFree = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) || Boolean(quote && getQuoteAmountDue(quote) === 0);
21405
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : '') }, { children: [quote && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'items-center justify-between w-full' : 'flex-col') }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-font-medium bunny-text-right", style: { fontSize: '11px' } }, { children: "TOTAL" })), jsxRuntime.jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] }))), hasPaymentMethodsOrIsFree && (jsxRuntime.jsx(CheckoutButton, { checkoutButtonDisabled: checkoutButtonDisabled, onClickCheckout: onClickCheckout, loading: !quote }))] })));
21573
+ var hasPaymentPlugins = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length);
21574
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : '') }, { children: [quote && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'items-center justify-between w-full' : 'flex-col') }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-font-medium bunny-text-right", style: { fontSize: '11px' } }, { children: "TOTAL" })), jsxRuntime.jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] }))), jsxRuntime.jsx(CheckoutButton, { checkoutButtonDisabled: checkoutButtonDisabled || !hasPaymentPlugins, onClickCheckout: onClickCheckout, loading: !quote || isQuotePending || isAddonPlanLoading || isFeatureAddonsLoading, tooltipText: !hasPaymentPlugins
21575
+ ? 'Cannot checkout. No valid payment plugins found. Please contact your administrator.'
21576
+ : undefined })] })));
21406
21577
  };
21407
21578
 
21408
21579
  var PlanPickerCheckoutBarWrapper = function (_a) {
21409
- var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21580
+ var editingQuote = _a.editingQuote, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21410
21581
  // Context
21411
21582
  var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21412
21583
  var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
21413
21584
  if (!selectedPriceList)
21414
21585
  return null;
21415
- return (jsxRuntime.jsx(PlanPickerCheckoutBar, { editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
21586
+ return (jsxRuntime.jsx(PlanPickerCheckoutBar, { editingQuote: editingQuote, handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
21416
21587
  };
21417
21588
  var PlanPickerCheckoutBar = function (_a) {
21418
- var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21589
+ var editingQuote = _a.editingQuote, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21419
21590
  // Context
21420
- var token = useToken();
21421
21591
  var _b = react.useContext(SubscriptionsContext), upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
21422
- var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, handleSetEditingQuote = _c.handleSetEditingQuote;
21592
+ var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21423
21593
  var apiHost = react.useContext(BunnyContext).apiHost;
21594
+ var quote = react.useContext(PlanManagerQuoteContext).quote;
21424
21595
  // Local state
21425
- var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
21596
+ var _c = react.useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
21426
21597
  // Hooks
21598
+ var token = useToken();
21427
21599
  var showSuccessNotification = common.useSuccessNotification();
21428
21600
  var queryClient = reactQuery.useQueryClient();
21429
21601
  var isMobile = common.useIsMobile();
@@ -21431,33 +21603,6 @@ var PlanPickerCheckoutBar = function (_a) {
21431
21603
  token: token,
21432
21604
  apiHost: apiHost,
21433
21605
  }).defaultPaymentMethod;
21434
- var createSubscriptionUpgradeQuote = useQuoteSubscriptionUpgrade();
21435
- var createSubscriptionUpdateQuote = useCreateSubscriptionQuote();
21436
- // Mutations
21437
- var createQuote = reactQuery.useMutation({
21438
- mutationFn: function (_a) {
21439
- var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
21440
- return createSubscriptionUpgradeQuote(subscriptionId, priceListId, apiHost, token);
21441
- },
21442
- onSuccess: function (subscriptionUpdateData) {
21443
- var _a;
21444
- var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
21445
- setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21446
- handleSetEditingQuote(quote.id);
21447
- },
21448
- });
21449
- var createEmptyQuote = reactQuery.useMutation({
21450
- mutationFn: function (_a) {
21451
- var subscriptionId = _a.subscriptionId;
21452
- return createSubscriptionUpdateQuote([subscriptionId], apiHost, token);
21453
- },
21454
- onSuccess: function (subscriptionUpdateData) {
21455
- var _a;
21456
- var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
21457
- setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21458
- handleSetEditingQuote(quote.id);
21459
- },
21460
- });
21461
21606
  var updateCharge = reactQuery.useMutation({
21462
21607
  mutationFn: quoteChargeUpdate,
21463
21608
  onSuccess: function () {
@@ -21470,64 +21615,6 @@ var PlanPickerCheckoutBar = function (_a) {
21470
21615
  });
21471
21616
  },
21472
21617
  }).mutate;
21473
- // Queries
21474
- var quote = reactQuery.useQuery({
21475
- queryKey: common.QueryKeyFactory.default.createObjectKey({
21476
- objectName: 'editingQuote',
21477
- id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21478
- token: token,
21479
- }),
21480
- queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21481
- var quote;
21482
- return __generator(this, function (_a) {
21483
- switch (_a.label) {
21484
- case 0:
21485
- if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
21486
- throw new Error('editingQuote is undefined');
21487
- }
21488
- return [4 /*yield*/, getQuote({
21489
- id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21490
- token: token,
21491
- apiHost: apiHost,
21492
- })];
21493
- case 1:
21494
- quote = _a.sent();
21495
- return [2 /*return*/, quote];
21496
- }
21497
- });
21498
- }); },
21499
- enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
21500
- }).data;
21501
- react.useEffect(function () {
21502
- if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
21503
- console.error('upgradingSubscription is undefined');
21504
- return;
21505
- }
21506
- var upgradingCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
21507
- if (upgradingCurrentSubscription) {
21508
- createEmptyQuote.mutate({
21509
- subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21510
- });
21511
- }
21512
- else {
21513
- createQuote.mutate({
21514
- subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21515
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21516
- });
21517
- }
21518
- }, [selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id]);
21519
- // Reset query key on unmount
21520
- react.useEffect(function () {
21521
- return function () {
21522
- queryClient.invalidateQueries({
21523
- queryKey: common.QueryKeyFactory.default.calculatedPricesKey({
21524
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21525
- quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
21526
- token: token,
21527
- }),
21528
- });
21529
- };
21530
- }, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
21531
21618
  var handleCheckoutSuccess = function () {
21532
21619
  queryClient.invalidateQueries({
21533
21620
  queryKey: common.QueryKeyFactory.default.createTableKey({
@@ -21542,9 +21629,6 @@ var PlanPickerCheckoutBar = function (_a) {
21542
21629
  showSuccessNotification('Your subscription has been created', 'Checkout successful');
21543
21630
  onCheckoutSuccess();
21544
21631
  };
21545
- var onCheckoutFail = function (error) {
21546
- handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
21547
- };
21548
21632
  function onChangeQuantity(chargeId, quantity) {
21549
21633
  var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
21550
21634
  var quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) {
@@ -21566,6 +21650,18 @@ var PlanPickerCheckoutBar = function (_a) {
21566
21650
  token: token,
21567
21651
  });
21568
21652
  }
21653
+ // Reset query key on unmount
21654
+ react.useEffect(function () {
21655
+ return function () {
21656
+ queryClient.invalidateQueries({
21657
+ queryKey: common.QueryKeyFactory.default.calculatedPricesKey({
21658
+ priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21659
+ quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
21660
+ token: token,
21661
+ }),
21662
+ });
21663
+ };
21664
+ }, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
21569
21665
  return (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? 'bunny-flex-col bunny-gap-4' : 'bunny-flex-row', " my-2 p-4 justify-between bg-white rounded-md ").concat(shadow ? "shadow-".concat(shadow) : '') }, { children: [jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? 'bunny-flex bunny-flex-col' : 'bunny-flex', " bunny-gap-4") }, { children: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.map(function (charge, index) {
21570
21666
  var _a;
21571
21667
  var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
@@ -21579,11 +21675,11 @@ var PlanPickerCheckoutBar = function (_a) {
21579
21675
  return (jsxRuntime.jsx(CheckoutBarInput, { disabled: !chargeQuantity, charge: charge, quantity: chargeQuantity !== null && chargeQuantity !== void 0 ? chargeQuantity : 0, selectedPriceList: selectedPriceList, onQuantityChanged: function (quantity) {
21580
21676
  onChangeQuantity(charge.id, quantity);
21581
21677
  } }, index));
21582
- }) })), 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 })] })));
21678
+ }) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription }), jsxRuntime.jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: function (error) { return handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error); }, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
21583
21679
  };
21584
21680
 
21585
21681
  // WARNING: There is a preview button on APP that will need to be changed if this query is changed
21586
- 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 }";
21682
+ 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 addonPlans {\n addon\n availableFrom\n availableTo\n basePrice\n code\n contactUsLabel\n contactUsUrl\n createdAt\n description\n id\n internalNotes\n isAvailableNow\n isVisible\n name\n position\n pricingDescription\n pricingStyle\n productId\n productPlanName\n selfServiceBuy\n selfServiceCancel\n selfServiceRenew\n updatedAt\n priceLists {\n id\n periodMonths\n showPriceAsMonthly\n monthlyBasePrice\n basePrice\n currencyId\n plan {\n pricingStyle\n }\n }\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n addon\n addonPlans {\n id\n name\n code\n contactUsLabel\n contactUsUrl\n description\n position\n pricingDescription\n pricingStyle\n addon\n basePrice\n priceLists {\n id\n basePrice\n periodMonths\n isVisible\n }\n }\n compatiblePlans {\n id\n name\n code\n contactUsLabel\n contactUsUrl\n description\n position\n pricingDescription\n pricingStyle\n addon\n }\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 }";
21587
21683
  var getPriceListChangeOptions = function (_a) {
21588
21684
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
21589
21685
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21617,52 +21713,7 @@ var ErrorView = function (_a) {
21617
21713
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full", style: { marginTop: "80px" } }, { children: [jsxRuntime.jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
21618
21714
  };
21619
21715
 
21620
- var calculateNewQuantity = function (priceList, currentQuantity) {
21621
- if (currentQuantity === void 0) { currentQuantity = 1; }
21622
- var priceListRecurringCharge = priceList === null || priceList === void 0 ? void 0 : priceList.charges.find(function (priceListCharge) {
21623
- return priceListCharge.chargeType === "RECURRING" ||
21624
- priceListCharge.chargeType === "USAGE";
21625
- });
21626
- var quantityMax = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMax) || Number.POSITIVE_INFINITY;
21627
- var quantityMin = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMin) || Number.NEGATIVE_INFINITY;
21628
- var selfServiceQuantity = priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.selfServiceQuantity;
21629
- // If self service quantity is disabled, return the min quantity
21630
- if (!selfServiceQuantity && quantityMin) {
21631
- return quantityMin;
21632
- }
21633
- // If the current quantity is greater than the max quantity, return the max quantity
21634
- else if (currentQuantity > quantityMax) {
21635
- return quantityMax;
21636
- }
21637
- // If the current quantity is less than the min quantity, return the min quantity
21638
- else if (currentQuantity < quantityMin) {
21639
- return quantityMin;
21640
- }
21641
- // If the current quantity is between the min and max quantity, return the current quantity
21642
- else if (currentQuantity <= quantityMax && currentQuantity >= quantityMin) {
21643
- return currentQuantity;
21644
- }
21645
- // If all else fails, return 1
21646
- else {
21647
- return 1;
21648
- }
21649
- };
21650
-
21651
- function isAddonPurchased(featureAddon, currentSubscription) {
21652
- 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; });
21653
- if (!purchasedFeatureAddons)
21654
- return false;
21655
- return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
21656
- }
21657
- function priceListHasUnpurchasedFeatureAddons(priceList, currentSubscription) {
21658
- var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
21659
- 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; });
21660
- var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
21661
- 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; }));
21662
- });
21663
- return unpurchasedFeatureAddons.length > 0;
21664
- }
21665
-
21716
+ var Text$d = antd.Typography.Text;
21666
21717
  var BillingPeriodSelector = function (_a) {
21667
21718
  var availableBillingPeriods = _a.availableBillingPeriods, onChangeBillingPeriod = _a.onChangeBillingPeriod, products = _a.products, selectedBillingPeriod = _a.selectedBillingPeriod, selectedProduct = _a.selectedProduct, onChangeProduct = _a.onChangeProduct;
21668
21719
  var _b = react.useContext(BrandContext), secondaryColor = _b.secondaryColor, brandColor = _b.brandColor;
@@ -21673,7 +21724,7 @@ var BillingPeriodSelector = function (_a) {
21673
21724
  color: secondaryColor,
21674
21725
  } }, { children: "Select product" })), jsxRuntime.jsx(ProductRadioStyled, __assign({ brandColor: brandColor }, { children: jsxRuntime.jsx(antd.Radio.Group, __assign({ onChange: function (e) {
21675
21726
  onChangeProduct(products === null || products === void 0 ? void 0 : products.find(function (product) { return product.id === e.target.value; }));
21676
- }, value: selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id, buttonStyle: "solid" }, { children: jsxRuntime.jsx(antd.Space, __assign({ className: "bunny-gap-2" }, { children: products === null || products === void 0 ? void 0 : products.map(function (product) { return (jsxRuntime.jsx(antd.Radio.Button, __assign({ value: product.id }, { children: product.name }), product.id)); }) })) })) }))] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-gap-2" }, { children: [!isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-xs", style: {
21727
+ }, value: selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id, buttonStyle: "solid" }, { children: jsxRuntime.jsx(antd.Space, __assign({ className: "bunny-gap-2" }, { children: products === null || products === void 0 ? void 0 : products.map(function (product) { return (jsxRuntime.jsx(antd.Radio.Button, __assign({ value: product.id }, { children: product.name }), product.id)); }) })) })) }))] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-gap-2" }, { children: [!isMobile && (jsxRuntime.jsx(Text$d, __assign({ className: "bunny-font-medium bunny-text-xs", style: {
21677
21728
  color: secondaryColor,
21678
21729
  } }, { children: "Subscription term" }))), jsxRuntime.jsx(StyledRadioGroup, __assign({ className: "bunny-w-full", "$isMobile": isMobile }, { children: jsxRuntime.jsx(antd.Radio.Group, __assign({ onChange: function (e) {
21679
21730
  onChangeBillingPeriod(e.target.value);
@@ -21690,6 +21741,37 @@ var StyledRadioGroup = styled__default["default"].div(templateObject_2 || (templ
21690
21741
  });
21691
21742
  var templateObject_1$4, templateObject_2;
21692
21743
 
21744
+ var calculateNewQuantity = function (priceList, currentQuantity) {
21745
+ if (currentQuantity === void 0) { currentQuantity = 1; }
21746
+ var priceListRecurringCharge = priceList === null || priceList === void 0 ? void 0 : priceList.charges.find(function (priceListCharge) {
21747
+ return priceListCharge.chargeType === "RECURRING" ||
21748
+ priceListCharge.chargeType === "USAGE";
21749
+ });
21750
+ var quantityMax = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMax) || Number.POSITIVE_INFINITY;
21751
+ var quantityMin = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMin) || Number.NEGATIVE_INFINITY;
21752
+ var selfServiceQuantity = priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.selfServiceQuantity;
21753
+ // If self service quantity is disabled, return the min quantity
21754
+ if (!selfServiceQuantity && quantityMin) {
21755
+ return quantityMin;
21756
+ }
21757
+ // If the current quantity is greater than the max quantity, return the max quantity
21758
+ else if (currentQuantity > quantityMax) {
21759
+ return quantityMax;
21760
+ }
21761
+ // If the current quantity is less than the min quantity, return the min quantity
21762
+ else if (currentQuantity < quantityMin) {
21763
+ return quantityMin;
21764
+ }
21765
+ // If the current quantity is between the min and max quantity, return the current quantity
21766
+ else if (currentQuantity <= quantityMax && currentQuantity >= quantityMin) {
21767
+ return currentQuantity;
21768
+ }
21769
+ // If all else fails, return 1
21770
+ else {
21771
+ return 1;
21772
+ }
21773
+ };
21774
+
21693
21775
  var NextPriceListButton = function (_a) {
21694
21776
  var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21695
21777
  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 () {
@@ -21714,6 +21796,8 @@ var NextPriceListButton = function (_a) {
21714
21796
  var getAvailablePlansAndPriceLists = function (_a) {
21715
21797
  var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, plansToDisplay = _a.plansToDisplay;
21716
21798
  var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + plansToDisplay);
21799
+ // displayPriceLists don't have enough data in them, so we're finding the same price list within
21800
+ // priceListChangeOptions which has more data in it.
21717
21801
  var availablePriceListsArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
21718
21802
  var _a;
21719
21803
  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; });
@@ -21730,12 +21814,8 @@ var everythingInPlusString = function (_a) {
21730
21814
  };
21731
21815
 
21732
21816
  var PriceListCardButton = function (_a) {
21733
- var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
21734
- // Context
21817
+ var disableSelectCurrentPlan = _a.disableSelectCurrentPlan, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
21735
21818
  var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21736
- var showBuyAddonsButton = isPriceListCurrentSubscription &&
21737
- subscriptionPlan &&
21738
- priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21739
21819
  var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
21740
21820
  var createButtonText = function () {
21741
21821
  if (isPriceListCurrentSubscription)
@@ -21748,11 +21828,9 @@ var PriceListCardButton = function (_a) {
21748
21828
  return priceList.plan.contactUsLabel;
21749
21829
  return 'Select';
21750
21830
  };
21751
- 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: {
21752
- maxWidth: '240px',
21753
- }, 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: {
21754
- maxWidth: '240px',
21755
- }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) }))] })));
21831
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end bunny-gap-3" }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: disableSelectCurrentPlan, style: {
21832
+ maxWidth: '240px',
21833
+ }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
21756
21834
  };
21757
21835
 
21758
21836
  var Text$c = antd.Typography.Text;
@@ -21781,9 +21859,9 @@ var calculatePriceDecimals = function (priceList) {
21781
21859
  return 0;
21782
21860
  };
21783
21861
  var PriceListCardPrice = function (_a) {
21784
- var priceList = _a.priceList;
21862
+ var priceList = _a.priceList, _b = _a.fontSize, fontSize = _b === void 0 ? '32px' : _b;
21785
21863
  var priceDecimals = calculatePriceDecimals(priceList);
21786
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: '32px' } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
21864
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: fontSize } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
21787
21865
  ? common.formatCurrency(getPrice(priceList), priceList.currencyId, priceDecimals)
21788
21866
  : priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US
21789
21867
  ? ''
@@ -21827,11 +21905,36 @@ function PriceDescriptionString(_a) {
21827
21905
  var PriceListCardTitle = function (_a) {
21828
21906
  var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
21829
21907
  var isMobile = common.useIsMobile();
21830
- 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
21831
- ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
21832
- : " " }))), 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 }))] })));
21908
+ 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
21909
+ ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? '' : 's')
21910
+ : ' ' }))), 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 }))] })));
21833
21911
  };
21834
21912
 
21913
+ var PriceListSelectorContext = react.createContext({});
21914
+ var showInfoNotification = common.useInfoNotification();
21915
+ function PriceListSelectorProvider(_a) {
21916
+ var children = _a.children;
21917
+ // Context
21918
+ var isInPreviewMode = react.useContext(SubscriptionsContext).isInPreviewMode;
21919
+ var _b = react.useContext(QuotePreviewContext), quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
21920
+ // Handlers
21921
+ var onChangePriceList = react.useCallback(function (selectedPriceList) {
21922
+ if (isInPreviewMode)
21923
+ return showInfoNotification('You are in preview mode');
21924
+ return setQuotePreviewData({
21925
+ priceList: selectedPriceList,
21926
+ quantity: calculateNewQuantity(selectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
21927
+ });
21928
+ }, [isInPreviewMode, setQuotePreviewData, showInfoNotification]);
21929
+ // Reset quote preview data when parent (should be PlanPicker) is unmounted
21930
+ react.useEffect(function () {
21931
+ return function () {
21932
+ setQuotePreviewData({});
21933
+ };
21934
+ }, [setQuotePreviewData]);
21935
+ return (jsxRuntime.jsx(PriceListSelectorContext.Provider, __assign({ value: { onChangePriceList: onChangePriceList } }, { children: children })));
21936
+ }
21937
+
21835
21938
  var PLAN_GRID_PADDING = 4;
21836
21939
  var PlanPickerGridCell = function (_a) {
21837
21940
  var children = _a.children, noBorder = _a.noBorder;
@@ -21842,18 +21945,23 @@ var PlanPickerGridCell = function (_a) {
21842
21945
  };
21843
21946
 
21844
21947
  var PriceListCardDesktop = function (_a) {
21845
- 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;
21846
- return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 ".concat(disableOnClick ? '' : 'cursor-pointer'), onClick: function () {
21847
- if (!disableOnClick) {
21948
+ var hideButton = _a.hideButton, description = _a.description, disableSelectCurrentPlan = _a.disableSelectCurrentPlan, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays, noBorder = _a.noBorder;
21949
+ var onChangePriceList = react.useContext(PriceListSelectorContext).onChangePriceList;
21950
+ function handleChangePriceList(priceList) {
21951
+ onChangePriceList(priceList);
21952
+ }
21953
+ return (jsxRuntime.jsx(PlanPickerGridCell, __assign({ noBorder: noBorder }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 ".concat(disableSelectCurrentPlan ? '' : 'cursor-pointer'), onClick: function () {
21954
+ if (!disableSelectCurrentPlan) {
21848
21955
  if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US) {
21849
21956
  window.open(priceList.plan.contactUsUrl, '_blank');
21850
21957
  }
21851
- else
21852
- onClick(priceList);
21958
+ else {
21959
+ handleChangePriceList(priceList);
21960
+ }
21853
21961
  }
21854
21962
  }, style: {
21855
21963
  height: '100%',
21856
- } }, { 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 })] })) }));
21964
+ } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), !hideButton && (jsxRuntime.jsx(PriceListCardButton, { disableSelectCurrentPlan: disableSelectCurrentPlan, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan }))] })) })));
21857
21965
  };
21858
21966
 
21859
21967
  var CheckIcon = function (_a) {
@@ -21862,23 +21970,24 @@ var CheckIcon = function (_a) {
21862
21970
  };
21863
21971
 
21864
21972
  var PriceListCardMobile = function (_a) {
21865
- 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;
21973
+ var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
21866
21974
  var brandColor = react.useContext(BrandContext).brandColor;
21975
+ var onChangePriceList = react.useContext(PriceListSelectorContext).onChangePriceList;
21867
21976
  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 () {
21868
21977
  if (!disableOnClick)
21869
- onClick(priceList);
21978
+ onChangePriceList(priceList);
21870
21979
  }, style: {
21871
21980
  minWidth: '220px',
21872
21981
  borderColor: isSelected ? brandColor : common.SLATE_200,
21873
21982
  } }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "bunny-absolute", style: {
21874
21983
  top: '10px',
21875
21984
  right: '10px',
21876
- } }, { 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 })] }))] })));
21985
+ } }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableSelectCurrentPlan: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
21877
21986
  };
21878
21987
 
21879
21988
  var PriceListCard = function (_a) {
21880
21989
  var _b;
21881
- var isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
21990
+ var hideButton = _a.hideButton, isSelected = _a.isSelected, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, noBorder = _a.noBorder;
21882
21991
  // Context
21883
21992
  var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21884
21993
  var isMobile = common.useIsMobile();
@@ -21888,12 +21997,10 @@ var PriceListCard = function (_a) {
21888
21997
  var activeCharge = (_b = getActivePlanPriceData(priceList, priceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21889
21998
  // Is the price list the current price list for the upgradingSubscription
21890
21999
  var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21891
- var canPurchaseFeatureAddons = priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21892
- var disableOnClick = isPriceListDisabled({
22000
+ var disableSelectCurrentPlan = isPriceListDisabled({
21893
22001
  priceList: priceList,
21894
22002
  subscriptions: subscriptions,
21895
22003
  upgradingSubscription: upgradingSubscription,
21896
- canPurchaseFeatureAddons: canPurchaseFeatureAddons,
21897
22004
  });
21898
22005
  var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
21899
22006
  var _a, _b;
@@ -21905,22 +22012,19 @@ var PriceListCard = function (_a) {
21905
22012
  return null;
21906
22013
  }
21907
22014
  var feature = activeCharge.feature;
21908
- 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 }));
22015
+ return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, disableOnClick: disableSelectCurrentPlan, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsxRuntime.jsx(PriceListCardDesktop, { hideButton: hideButton, description: description, disableSelectCurrentPlan: disableSelectCurrentPlan, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, noBorder: noBorder }));
21909
22016
  };
21910
22017
 
21911
- 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";
22018
+ var QUOTE_CHARGE_CREATE = "\n".concat(QUOTE_FIELDS(), "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n quoteChargeCreate(\n endDate: $endDate\n price: $price\n priceListChargeId: $priceListChargeId\n quantity: $quantity\n quoteChangeId: $quoteChangeId\n startDate: $startDate\n subscriptionChargeId: $subscriptionChargeId\n ) {\n quoteCharge {\n quoteChange {\n id\n quoteId\n quote {\n ...QuoteFields\n }\n }\n id\n }\n }\n}\n\n");
21912
22019
  var quoteChargeCreate = function (_a) {
21913
- var
21914
- // endDate,
21915
- price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
22020
+ var price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
21916
22021
  return __awaiter(void 0, void 0, void 0, function () {
21917
22022
  var response;
21918
22023
  return __generator(this, function (_b) {
21919
22024
  switch (_b.label) {
21920
22025
  case 0: return [4 /*yield*/, gqlRequest({
21921
- query: QUOTE_CHARGE_CREATE$1,
22026
+ query: QUOTE_CHARGE_CREATE,
21922
22027
  vars: {
21923
- // endDate,
21924
22028
  price: price,
21925
22029
  priceListChargeId: priceListChargeId,
21926
22030
  quantity: quantity,
@@ -21942,32 +22046,38 @@ var quoteChargeCreate = function (_a) {
21942
22046
  });
21943
22047
  };
21944
22048
 
21945
- 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";
22049
+ var QUOTE_CHARGE_DELETE = "\n".concat(QUOTE_FIELDS(), "\nmutation QuoteChargeDelete ($quoteChargeId: ID!) {\n quoteChargeDelete(\n quoteChargeId: $quoteChargeId\n ) {\n errors\n quoteCharge {\n quoteChange {\n id\n quoteId\n quote {\n ...QuoteFields\n }\n }\n }\n }\n}\n\n");
21946
22050
  var quoteChargeDelete = function (_a) {
21947
22051
  var quoteChargeId = _a.quoteChargeId, token = _a.token, apiHost = _a.apiHost;
21948
- return gqlRequest({
21949
- query: QUOTE_CHARGE_CREATE,
21950
- vars: {
21951
- quoteChargeId: quoteChargeId,
21952
- },
21953
- apiHost: apiHost,
21954
- token: token,
22052
+ return __awaiter(void 0, void 0, void 0, function () {
22053
+ var response;
22054
+ return __generator(this, function (_b) {
22055
+ switch (_b.label) {
22056
+ case 0: return [4 /*yield*/, gqlRequest({
22057
+ query: QUOTE_CHARGE_DELETE,
22058
+ vars: {
22059
+ quoteChargeId: quoteChargeId,
22060
+ },
22061
+ apiHost: apiHost,
22062
+ token: token,
22063
+ })];
22064
+ case 1:
22065
+ response = _b.sent();
22066
+ if (response.errors) {
22067
+ throw new Error(response.errors[0].message);
22068
+ }
22069
+ return [2 /*return*/, response.quoteChargeDelete.quoteCharge];
22070
+ }
22071
+ });
21955
22072
  });
21956
22073
  };
21957
22074
 
21958
- var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
22075
+ var useQuoteUpdateFeatureAddon = function (quote, featureAddon) {
21959
22076
  var apiHost = react.useContext(BunnyContext).apiHost;
22077
+ var _a = react.useContext(PlanManagerQuoteContext), addFeatureAddonLoading = _a.addFeatureAddonLoading, removeFeatureAddonLoading = _a.removeFeatureAddonLoading;
21960
22078
  var token = useToken();
21961
22079
  var queryClient = reactQuery.useQueryClient();
21962
22080
  var addedQuoteChargeId = react.useRef();
21963
- var editingQuote = reactQuery.useQuery({
21964
- queryKey: common.QueryKeyFactory.default.createObjectKey({
21965
- objectName: 'editingQuote',
21966
- id: quoteId,
21967
- }),
21968
- queryFn: function () { return (quoteId ? getQuote({ id: quoteId, token: token, apiHost: apiHost }) : undefined); },
21969
- enabled: Boolean(quoteId),
21970
- }).data;
21971
22081
  function handleAddFeatureAddon() {
21972
22082
  quoteChargeCreateMutation();
21973
22083
  }
@@ -21976,7 +22086,7 @@ var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
21976
22086
  return;
21977
22087
  quoteChargeDeleteMutation({ quoteChargeId: addedQuoteChargeId.current });
21978
22088
  }
21979
- var _a = reactQuery.useMutation({
22089
+ var _b = reactQuery.useMutation({
21980
22090
  mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21981
22091
  var quoteCharge;
21982
22092
  return __generator(this, function (_a) {
@@ -21984,12 +22094,13 @@ var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
21984
22094
  case 0:
21985
22095
  if (!token)
21986
22096
  throw new Error('Token is required');
21987
- if (!editingQuote)
22097
+ if (!quote)
21988
22098
  throw new Error('Editing quote is required');
21989
22099
  return [4 /*yield*/, quoteChargeCreate({
21990
- quoteChangeId: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.quoteChanges[editingQuote.quoteChanges.length - 1].id,
22100
+ // TODO: get the correct quoteChangeId
22101
+ quoteChangeId: quote === null || quote === void 0 ? void 0 : quote.quoteChanges[quote.quoteChanges.length - 1].id,
21991
22102
  priceListChargeId: featureAddon.id,
21992
- startDate: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.startDate,
22103
+ startDate: quote === null || quote === void 0 ? void 0 : quote.startDate,
21993
22104
  apiHost: apiHost,
21994
22105
  token: token,
21995
22106
  })];
@@ -22002,40 +22113,62 @@ var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
22002
22113
  onSuccess: function (_a) {
22003
22114
  var quoteCharge = _a.quoteCharge;
22004
22115
  addedQuoteChargeId.current = quoteCharge.id;
22005
- queryClient.invalidateQueries({
22006
- queryKey: common.QueryKeyFactory.default.createObjectKey({
22007
- objectName: 'editingQuote',
22008
- }),
22009
- });
22116
+ queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
22117
+ objectName: 'editingQuote',
22118
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
22119
+ token: token,
22120
+ }), quoteCharge.quoteChange.quote);
22010
22121
  },
22011
- }), quoteChargeCreateMutation = _a.mutate, isCreatingFeatureAddon = _a.isPending;
22012
- var _b = reactQuery.useMutation({
22122
+ }), quoteChargeCreateMutation = _b.mutate, isCreatingFeatureAddon = _b.isPending;
22123
+ var _c = reactQuery.useMutation({
22013
22124
  mutationFn: function (_a) {
22014
22125
  var quoteChargeId = _a.quoteChargeId;
22015
- return quoteChargeDelete({ quoteChargeId: quoteChargeId, token: token, apiHost: apiHost });
22126
+ return __awaiter(void 0, void 0, void 0, function () {
22127
+ var response;
22128
+ return __generator(this, function (_b) {
22129
+ switch (_b.label) {
22130
+ case 0: return [4 /*yield*/, quoteChargeDelete({ quoteChargeId: quoteChargeId, token: token, apiHost: apiHost })];
22131
+ case 1:
22132
+ response = _b.sent();
22133
+ return [2 /*return*/, { quoteCharge: response }];
22134
+ }
22135
+ });
22136
+ });
22016
22137
  },
22017
- onSuccess: function () {
22138
+ onSuccess: function (_a) {
22139
+ var quoteCharge = _a.quoteCharge;
22018
22140
  addedQuoteChargeId.current = undefined;
22019
- queryClient.invalidateQueries({
22020
- queryKey: common.QueryKeyFactory.default.createObjectKey({
22021
- objectName: 'editingQuote',
22022
- }),
22023
- });
22141
+ queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
22142
+ objectName: 'editingQuote',
22143
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
22144
+ token: token,
22145
+ }), quoteCharge.quoteChange.quote);
22024
22146
  },
22025
- }), quoteChargeDeleteMutation = _b.mutate, isDeletingFeatureAddon = _b.isPending;
22147
+ }), quoteChargeDeleteMutation = _c.mutate, isDeletingFeatureAddon = _c.isPending;
22148
+ var isPending = isCreatingFeatureAddon || isDeletingFeatureAddon;
22026
22149
  react.useEffect(function () {
22027
22150
  // If the quoteId changes, then its because we changed pricelists, so we need to reset the addedQuoteChargeId
22028
22151
  // so that isChecked becomes false
22029
22152
  addedQuoteChargeId.current = undefined;
22030
- }, [quoteId]);
22153
+ }, [quote === null || quote === void 0 ? void 0 : quote.id]);
22154
+ react.useEffect(function () {
22155
+ if (isPending) {
22156
+ addFeatureAddonLoading(featureAddon.id);
22157
+ }
22158
+ else {
22159
+ removeFeatureAddonLoading(featureAddon.id);
22160
+ }
22161
+ return function () {
22162
+ removeFeatureAddonLoading(featureAddon.id);
22163
+ };
22164
+ }, [isPending]);
22031
22165
  return {
22032
22166
  handleAddFeatureAddon: handleAddFeatureAddon,
22033
22167
  handleRemoveFeatureAddon: handleRemoveFeatureAddon,
22034
- isPending: isCreatingFeatureAddon || isDeletingFeatureAddon,
22168
+ isPending: isPending,
22035
22169
  isChecked: isDeletingFeatureAddon
22036
22170
  ? false
22037
22171
  : Boolean(addedQuoteChargeId.current || isCreatingFeatureAddon),
22038
- editingQuoteLoaded: editingQuote !== undefined,
22039
22172
  };
22040
22173
  };
22041
22174
 
@@ -22077,7 +22210,8 @@ function FeatureAddonRow(_a) {
22077
22210
  var featureAddon = _a.featureAddon, priceList = _a.priceList;
22078
22211
  var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
22079
22212
  var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
22080
- 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;
22213
+ var quote = react.useContext(PlanManagerQuoteContext).quote;
22214
+ var _d = useQuoteUpdateFeatureAddon(quote, featureAddon), handleAddFeatureAddon = _d.handleAddFeatureAddon, handleRemoveFeatureAddon = _d.handleRemoveFeatureAddon, isPending = _d.isPending, isChecked = _d.isChecked;
22081
22215
  var brandColor = react.useContext(BrandContext).brandColor;
22082
22216
  var isPriceListSelected = ((_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id) === priceList.id;
22083
22217
  var isPurchased = isAddonPurchased(featureAddon, upgradingSubscription);
@@ -22089,7 +22223,7 @@ function FeatureAddonRow(_a) {
22089
22223
  periodMonths: priceList.periodMonths,
22090
22224
  doesPlanHaveFlatFeeCharges: false,
22091
22225
  }) }))] }));
22092
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-flex-wrap bunny-items-center bunny-justify-between bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [checked ? (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" })) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: common.SLATE_200, size: "15px" })), featureAddon.name] })), jsxRuntime.jsx(antd.Tooltip, __assign({ title: tooltipContent }, { children: jsxRuntime.jsx(icons.InfoCircleOutlined, { className: "bunny-text-gray-500", size: 15 }) }))] })), jsxRuntime.jsx(antd.Switch, { size: "small", loading: isPending, disabled: isDisabled || !editingQuoteLoaded, checked: checked, onChange: function (checked) {
22226
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-flex-wrap bunny-items-center bunny-justify-between bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [checked ? (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" })) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: common.SLATE_200, size: "15px" })), featureAddon.name] })), jsxRuntime.jsx(antd.Tooltip, __assign({ title: tooltipContent }, { children: jsxRuntime.jsx(icons.InfoCircleOutlined, { className: "bunny-text-gray-500", size: 15 }) }))] })), jsxRuntime.jsx(antd.Switch, { size: "small", loading: isPending, disabled: isDisabled || !quote, checked: checked, onChange: function (checked) {
22093
22227
  if (checked) {
22094
22228
  handleAddFeatureAddon();
22095
22229
  }
@@ -22119,23 +22253,169 @@ var filterUniqueFeatures = function (_a) {
22119
22253
  return updatedPriceLists;
22120
22254
  };
22121
22255
  var EverythingPlanFeatures = function (_a) {
22122
- var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
22256
+ var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay, _b = _a.hideBorder, hideBorder = _b === void 0 ? false : _b;
22123
22257
  var brandColor = react.useContext(BrandContext).brandColor;
22124
22258
  var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: displayPriceLists });
22125
22259
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: __spreadArray([], Array(plansToDisplay), true).map(function (_, planIndex) {
22126
22260
  var priceList = uniquePlanFeatures[planIndex];
22127
22261
  var prevPriceList = displayPriceLists[planIndex - 1];
22128
22262
  if (!priceList)
22129
- return (jsxRuntime.jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
22263
+ return (jsxRuntime.jsx("div", { style: prevPriceList && !hideBorder ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
22130
22264
  if (!priceList.plan.planFeatures)
22131
22265
  return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(FeatureAddonsList, { priceList: priceList }), ";"] }, planIndex));
22132
- 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) {
22266
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: !hideBorder ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, { children: [priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
22133
22267
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22134
22268
  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));
22135
22269
  }), jsxRuntime.jsx(FeatureAddonsList, { priceList: priceList })] }), planIndex));
22136
22270
  }) }));
22137
22271
  };
22138
22272
 
22273
+ var QUOTE_CHANGE_DELETE = "\n".concat(QUOTE_FIELDS(), "\n mutation QuoteChangeDelete($id: ID!) {\n quoteChangeDelete(id: $id) {\n errors\n quoteChange {\n quote {\n ...QuoteFields\n }\n }\n }\n }\n");
22274
+ var quoteChangeDelete = function (_a) {
22275
+ var id = _a.id, apiHost = _a.apiHost, token = _a.token;
22276
+ return __awaiter(void 0, void 0, void 0, function () {
22277
+ var vars, response, errors;
22278
+ var _b;
22279
+ return __generator(this, function (_c) {
22280
+ switch (_c.label) {
22281
+ case 0:
22282
+ vars = {
22283
+ id: id,
22284
+ };
22285
+ return [4 /*yield*/, gqlRequest({
22286
+ query: QUOTE_CHANGE_DELETE,
22287
+ token: token,
22288
+ vars: vars,
22289
+ apiHost: apiHost,
22290
+ })];
22291
+ case 1:
22292
+ response = _c.sent();
22293
+ errors = (_b = response === null || response === void 0 ? void 0 : response.quoteChangeDelete) === null || _b === void 0 ? void 0 : _b.errors;
22294
+ if (errors)
22295
+ throw errors;
22296
+ return [2 /*return*/, response.quoteChangeDelete];
22297
+ }
22298
+ });
22299
+ });
22300
+ };
22301
+
22302
+ var QUOTE_CHANGE_CREATE = "\n".concat(QUOTE_FIELDS(), "\nmutation QuoteChangeCreate(\n $quoteId: ID!\n $priceListId: ID!\n $parentQuoteChangeId: ID!\n) {\n quoteChangeCreate(\n quoteId: $quoteId\n priceListId: $priceListId\n parentQuoteChangeId: $parentQuoteChangeId\n ) {\n errors\n quoteChange {\n id\n quote {\n ...QuoteFields\n }\n }\n }\n}\n");
22303
+ var quoteChangeCreate = function (_a) {
22304
+ var parentQuoteChangeId = _a.parentQuoteChangeId, priceListId = _a.priceListId, apiHost = _a.apiHost, token = _a.token, quoteId = _a.quoteId;
22305
+ return __awaiter(void 0, void 0, void 0, function () {
22306
+ var vars, response, errors;
22307
+ var _b;
22308
+ return __generator(this, function (_c) {
22309
+ switch (_c.label) {
22310
+ case 0:
22311
+ vars = {
22312
+ parentQuoteChangeId: parentQuoteChangeId,
22313
+ priceListId: priceListId,
22314
+ quoteId: quoteId,
22315
+ };
22316
+ return [4 /*yield*/, gqlRequest({
22317
+ query: QUOTE_CHANGE_CREATE,
22318
+ token: token,
22319
+ vars: vars,
22320
+ apiHost: apiHost,
22321
+ })];
22322
+ case 1:
22323
+ response = _c.sent();
22324
+ errors = (_b = response === null || response === void 0 ? void 0 : response.quoteChangeCreate) === null || _b === void 0 ? void 0 : _b.errors;
22325
+ if (errors)
22326
+ throw errors;
22327
+ return [2 /*return*/, response.quoteChangeCreate];
22328
+ }
22329
+ });
22330
+ });
22331
+ };
22332
+
22333
+ var useToggleAddonPlan = function (quote, plan, billingPeriod, selectedPriceList, setIsAddonPlanLoading) {
22334
+ var token = useToken();
22335
+ var isAdded = react.useRef(false);
22336
+ var queryClient = reactQuery.useQueryClient();
22337
+ var apiHost = react.useContext(BunnyContext).apiHost;
22338
+ var parentQuoteChange = react.useMemo(function () {
22339
+ return quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === selectedPriceList.id; });
22340
+ }, [quote, selectedPriceList]);
22341
+ var _a = reactQuery.useMutation({
22342
+ mutationFn: quoteChangeCreate,
22343
+ onSuccess: function (quoteChangeCreate) {
22344
+ isAdded.current = true;
22345
+ var updatedQuote = quoteChangeCreate.quoteChange.quote;
22346
+ queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
22347
+ objectName: 'editingQuote',
22348
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
22349
+ token: token,
22350
+ }), updatedQuote);
22351
+ },
22352
+ }), addAddonQuoteChange = _a.mutate, isAddingAddonQuoteChange = _a.isPending;
22353
+ var _b = reactQuery.useMutation({
22354
+ mutationFn: quoteChangeDelete,
22355
+ onSuccess: function (quoteChangeDelete) {
22356
+ isAdded.current = false;
22357
+ var updatedQuote = quoteChangeDelete.quoteChange.quote;
22358
+ queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
22359
+ objectName: 'editingQuote',
22360
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
22361
+ token: token,
22362
+ }), updatedQuote);
22363
+ },
22364
+ }), deleteQuoteChange = _b.mutate, isDeletingQuoteChange = _b.isPending;
22365
+ function handleAddAddonQuoteChange() {
22366
+ if (!parentQuoteChange) {
22367
+ throw new Error('Parent quote change not found');
22368
+ }
22369
+ var priceList = plan.priceLists.find(function (pl) { return pl.periodMonths === billingPeriod; });
22370
+ if (!priceList) {
22371
+ throw new Error('Price list not found');
22372
+ }
22373
+ if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
22374
+ throw new Error('Quote ID not found');
22375
+ }
22376
+ addAddonQuoteChange({
22377
+ parentQuoteChangeId: parentQuoteChange.id,
22378
+ priceListId: priceList.id,
22379
+ apiHost: apiHost,
22380
+ token: token,
22381
+ quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
22382
+ });
22383
+ }
22384
+ function handleDeleteQuoteChange() {
22385
+ var priceList = plan.priceLists.find(function (pl) { return pl.periodMonths === billingPeriod; });
22386
+ if (!priceList) {
22387
+ throw new Error('Price list not found');
22388
+ }
22389
+ var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === priceList.id; });
22390
+ if (!quoteChange) {
22391
+ throw new Error('Quote change not found');
22392
+ }
22393
+ deleteQuoteChange({
22394
+ id: quoteChange.id,
22395
+ apiHost: apiHost,
22396
+ token: token,
22397
+ });
22398
+ }
22399
+ react.useEffect(function () {
22400
+ if (isAddingAddonQuoteChange || isDeletingQuoteChange) {
22401
+ setIsAddonPlanLoading(true);
22402
+ }
22403
+ else {
22404
+ setIsAddonPlanLoading(false);
22405
+ }
22406
+ }, [isAddingAddonQuoteChange, isDeletingQuoteChange]);
22407
+ react.useEffect(function () {
22408
+ isAdded.current = false;
22409
+ setIsAddonPlanLoading(false);
22410
+ }, [selectedPriceList]);
22411
+ return {
22412
+ isPending: isAddingAddonQuoteChange || isDeletingQuoteChange || parentQuoteChange === undefined,
22413
+ addedQuoteChange: isAdded.current,
22414
+ deleteQuoteChange: handleDeleteQuoteChange,
22415
+ addAddonQuoteChange: handleAddAddonQuoteChange,
22416
+ };
22417
+ };
22418
+
22139
22419
  var Text$a = antd.Typography.Text;
22140
22420
  var PlanFeatures = function (_a) {
22141
22421
  var _b;
@@ -22186,32 +22466,85 @@ var FeatureTitle = function (_a) {
22186
22466
  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 })));
22187
22467
  };
22188
22468
 
22469
+ var PlanAddonsCard = function (_a) {
22470
+ var selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, addonPlans = _a.addonPlans, selectedProduct = _a.selectedProduct, priceListChangeOptions = _a.priceListChangeOptions, selectedBillingPeriod = _a.selectedBillingPeriod;
22471
+ var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
22472
+ var _b = react.useState(), selectedAddonPriceList = _b[0], setSelectedAddonPriceList = _b[1];
22473
+ function isAddonPlanPurchased(plan) {
22474
+ var isChangingPlans = selectedPriceList.plan.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.plan.id);
22475
+ if (isChangingPlans) {
22476
+ return false;
22477
+ }
22478
+ var currentSubscription = subscriptions.find(function (subscription) { return subscription.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id); });
22479
+ var addonSubscriptionIds = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.addonSubscriptions;
22480
+ var addonSubscriptions = addonSubscriptionIds === null || addonSubscriptionIds === void 0 ? void 0 : addonSubscriptionIds.map(function (addonSubscription) {
22481
+ return subscriptions.find(function (subscription) { return subscription.id === addonSubscription.id; });
22482
+ });
22483
+ // filter out cancelled addons
22484
+ var activeAddonSubscriptions = addonSubscriptions === null || addonSubscriptions === void 0 ? void 0 : addonSubscriptions.filter(function (addonSubscription) { return (addonSubscription === null || addonSubscription === void 0 ? void 0 : addonSubscription.state) !== common.SubscriptionState.CANCELED; });
22485
+ return activeAddonSubscriptions === null || activeAddonSubscriptions === void 0 ? void 0 : activeAddonSubscriptions.some(function (addonSubscription) { return (addonSubscription === null || addonSubscription === void 0 ? void 0 : addonSubscription.plan.id) === plan.id; });
22486
+ }
22487
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-overflow-hidden" }, { children: [jsxRuntime.jsx(AddonPlanModal, { onClose: function () { return setSelectedAddonPriceList(undefined); }, selectedProduct: selectedProduct, priceList: selectedAddonPriceList }), addonPlans.length > 0 && (jsxRuntime.jsx("div", __assign({ className: "bunny-text-black bunny-pt-2 bunny-pb-4 bunny-font-bold" }, { children: "Add-on plans" }))), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: addonPlans.map(function (plan) {
22488
+ var isPurchased = isAddonPlanPurchased(plan);
22489
+ if (selectedBillingPeriod === undefined) {
22490
+ return null;
22491
+ }
22492
+ return (jsxRuntime.jsx(PlanAddonsCardRow, { plan: plan, selectedPriceList: selectedPriceList, setSelectedAddonPriceList: setSelectedAddonPriceList, isPurchased: isPurchased || false, selectedBillingPeriod: selectedBillingPeriod, priceListChangeOptions: priceListChangeOptions }));
22493
+ }) }))] })));
22494
+ };
22495
+ function PlanAddonsCardRow(_a) {
22496
+ var _b, _c;
22497
+ var plan = _a.plan, selectedPriceList = _a.selectedPriceList, setSelectedAddonPriceList = _a.setSelectedAddonPriceList, isPurchased = _a.isPurchased, selectedBillingPeriod = _a.selectedBillingPeriod, priceListChangeOptions = _a.priceListChangeOptions;
22498
+ var _d = react.useContext(PlanManagerQuoteContext), quote = _d.quote, setIsAddonPlanLoading = _d.setIsAddonPlanLoading;
22499
+ var _e = useToggleAddonPlan(quote, plan, billingPeriodConverter(selectedBillingPeriod), selectedPriceList, setIsAddonPlanLoading), isPending = _e.isPending, addedQuoteChange = _e.addedQuoteChange, addAddonQuoteChange = _e.addAddonQuoteChange, deleteQuoteChange = _e.deleteQuoteChange;
22500
+ var addonPriceListId = (_b = plan.priceLists.find(function (priceList) { return priceList.periodMonths === billingPeriodConverter(selectedBillingPeriod); })) === null || _b === void 0 ? void 0 : _b.id;
22501
+ var addonPriceList = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists.find(function (priceList) { return priceList.id === addonPriceListId; });
22502
+ var activeCharge = (_c = getActivePlanPriceData(addonPriceList, addonPriceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
22503
+ if (!addonPriceList) {
22504
+ return null;
22505
+ }
22506
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-justify-between bunny-items-center bunny-w-full bunny-p-4 bunny-rounded-md bunny-border bunny-bg-white bunny-shadow bunny-mb-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-orange-600", style: { fontSize: '16px' } }, { children: plan.name })), jsxRuntime.jsx(PriceListCardDescription, { description: plan.description }), jsxRuntime.jsx(PriceListCardPrice, { priceList: addonPriceList, fontSize: "16px" }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.feature, priceList: addonPriceList }), jsxRuntime.jsx(antd.Button, __assign({ type: "link", onClick: function () { return setSelectedAddonPriceList(addonPriceList); } }, { children: jsxRuntime.jsx(icons.InfoCircleOutlined, {}) }))] })), jsxRuntime.jsx(antd.Switch, { loading: isPending, checked: addedQuoteChange || isPurchased, onChange: function (checked) {
22507
+ if (checked) {
22508
+ addAddonQuoteChange();
22509
+ }
22510
+ else {
22511
+ deleteQuoteChange();
22512
+ }
22513
+ }, disabled: isPurchased })] }), plan.id));
22514
+ }
22515
+ function AddonPlanModal(_a) {
22516
+ var onClose = _a.onClose, selectedProduct = _a.selectedProduct, priceList = _a.priceList;
22517
+ var displayPriceLists = priceList ? [priceList] : [];
22518
+ var plansToDisplay = 1;
22519
+ return (jsxRuntime.jsx(antd.Modal, __assign({ open: !!priceList, onCancel: onClose, footer: null }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
22520
+ gridTemplateColumns: "minmax(auto, 200px) repeat(".concat(plansToDisplay, ", minmax(200px, 1fr))"),
22521
+ } }, { children: [jsxRuntime.jsx(PlanPickerGridCell, { noBorder: true }), priceList && (jsxRuntime.jsx(PriceListCard, { isSelected: true, priceList: priceList, noBorder: true, hideButton: true })), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: 1, selectedProduct: selectedProduct, hideBorder: true })) : (jsxRuntime.jsx(PlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: 1, selectedProduct: selectedProduct }))] })) })));
22522
+ }
22523
+
22189
22524
  var PriceListGridDesktop = function (_a) {
22190
- var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
22191
- var _b = react.useMemo(function () {
22525
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, selectedBillingPeriod = _a.selectedBillingPeriod;
22526
+ var addonPlans = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.addonPlans;
22527
+ var displayPriceLists = react.useMemo(function () {
22192
22528
  return getAvailablePlansAndPriceLists({
22193
22529
  availablePriceLists: availablePriceLists,
22194
22530
  priceListChangeOptions: priceListChangeOptions,
22195
22531
  priceListStart: priceListStart,
22196
22532
  plansToDisplay: (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3,
22197
22533
  });
22198
- }, [availablePriceLists, priceListChangeOptions, priceListStart]); _b.availablePriceListsArray; var displayPriceLists = _b.displayPriceLists;
22534
+ }, [availablePriceLists, priceListChangeOptions, priceListStart]).displayPriceLists;
22199
22535
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22200
22536
  var plansToDisplay = Math.min((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3, availablePriceLists.length);
22201
- var hasFeatureAddons = displayPriceLists.some(function (priceList) {
22202
- return priceList.charges.some(function (charge) { return charge.featureAddon; });
22203
- });
22204
- 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: {
22205
- gridTemplateColumns: everythingInPlus
22206
- ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
22207
- : "minmax(auto, 400px) repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))"),
22208
- } }, { children: [!everythingInPlus && jsxRuntime.jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(plansToDisplay), true).map(function (_, index) {
22209
- var priceList = displayPriceLists[index];
22210
- var doesPrevPriceListExist = displayPriceLists[index - 1];
22211
- if (!priceList)
22212
- return jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
22213
- 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));
22214
- }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }), hasFeatureAddons && (jsxRuntime.jsx(PlanFeatureAddons, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay }))] }))] }))] })));
22537
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-rounded-md bunny-shadow bunny-overflow-hidden bunny-bg-white" }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
22538
+ gridTemplateColumns: everythingInPlus
22539
+ ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
22540
+ : "minmax(auto, 400px) repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))"),
22541
+ } }, { children: [!everythingInPlus && jsxRuntime.jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(plansToDisplay), true).map(function (_, index) {
22542
+ var priceList = displayPriceLists[index];
22543
+ var doesPrevPriceListExist = displayPriceLists[index - 1];
22544
+ if (!priceList)
22545
+ return jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
22546
+ return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22547
+ }), (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 })] }))] }))] })), selectedPriceList && addonPlans ? (jsxRuntime.jsx(PlanAddonsCard, { selectedPriceList: selectedPriceList, subscriptions: subscriptions, addonPlans: addonPlans, selectedProduct: selectedProduct, priceListChangeOptions: priceListChangeOptions, selectedBillingPeriod: selectedBillingPeriod })) : null] })));
22215
22548
  };
22216
22549
 
22217
22550
  var Text$9 = antd.Typography.Text;
@@ -22225,42 +22558,43 @@ var PriceListCardFeature = function (_a) {
22225
22558
 
22226
22559
  var PriceListGridMobile = function (_a) {
22227
22560
  var _b, _c, _d, _e;
22228
- var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
22561
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
22229
22562
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22230
22563
  var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
22231
22564
  var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
22232
22565
  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; });
22233
22566
  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) {
22234
- 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));
22567
+ return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22235
22568
  }) })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
22236
22569
  ? everythingInPlusString({ priceList: prevPriceList })
22237
- : "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)); }) }))] }));
22570
+ : '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)); }) }))] }));
22238
22571
  };
22239
22572
 
22240
22573
  var PriceListGrid = function (_a) {
22241
22574
  var _b, _c;
22242
- var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, upgradingSubscriptionState = _a.upgradingSubscriptionState;
22575
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, upgradingSubscriptionState = _a.upgradingSubscriptionState, selectedBillingPeriod = _a.selectedBillingPeriod;
22243
22576
  // Hooks
22244
22577
  var isMobile = common.useIsMobile();
22245
22578
  // Derived state
22246
22579
  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); });
22247
22580
  var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), 'days');
22248
- 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 }));
22581
+ return isMobile ? (jsxRuntime.jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsxRuntime.jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays, selectedBillingPeriod: selectedBillingPeriod }));
22249
22582
  };
22250
22583
 
22251
22584
  var createAvailableBillingPeriods = function (priceLists, selectedProduct) {
22252
22585
  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); });
22253
22586
  };
22254
22587
  var PriceListSelector = function (_a) {
22255
- var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions;
22588
+ var _b;
22589
+ var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions;
22256
22590
  // Context
22257
22591
  var isInPreviewMode = react.useContext(SubscriptionsContext).isInPreviewMode;
22258
- var _b = react.useContext(QuotePreviewContext), quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
22592
+ var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22259
22593
  var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
22260
22594
  // Local state
22261
- var _c = react.useState(), selectedProduct = _c[0], setSelectedProduct = _c[1];
22262
- var _d = react.useState(), selectedBillingPeriod = _d[0], setSelectedBillingPeriod = _d[1];
22263
- var _e = react.useState(0), priceListStart = _e[0], setPriceListStart = _e[1];
22595
+ var _d = react.useState(), selectedProduct = _d[0], setSelectedProduct = _d[1];
22596
+ var _e = react.useState(), selectedBillingPeriod = _e[0], setSelectedBillingPeriod = _e[1];
22597
+ var _f = react.useState(0), priceListStart = _f[0], setPriceListStart = _f[1];
22264
22598
  // Derived state
22265
22599
  var availableBillingPeriods = react.useMemo(function () { return createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct); }, [priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct]);
22266
22600
  var availablePriceLists = react.useMemo(function () {
@@ -22268,7 +22602,7 @@ var PriceListSelector = function (_a) {
22268
22602
  return (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) {
22269
22603
  return periodMonthsConverter(priceList.periodMonths) === selectedBillingPeriod &&
22270
22604
  priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id);
22271
- })) || []);
22605
+ }).filter(function (priceList) { return priceList.plan.addon !== true; })) || []);
22272
22606
  }, [priceListChangeOptions, selectedBillingPeriod, selectedProduct]);
22273
22607
  // Handlers
22274
22608
  var onChangeBillingPeriod = react.useCallback(function (billingPeriod) {
@@ -22286,7 +22620,6 @@ var PriceListSelector = function (_a) {
22286
22620
  priceList: priceList,
22287
22621
  subscriptions: subscriptions,
22288
22622
  upgradingSubscription: upgradingSubscription,
22289
- canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, upgradingSubscription),
22290
22623
  });
22291
22624
  });
22292
22625
  var isPriceListCurrentSubscription = newSelectedPriceList && (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
@@ -22298,6 +22631,7 @@ var PriceListSelector = function (_a) {
22298
22631
  }
22299
22632
  else if (isPriceListCurrentSubscription) {
22300
22633
  setQuotePreviewData({
22634
+ priceList: newSelectedPriceList,
22301
22635
  quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
22302
22636
  });
22303
22637
  }
@@ -22317,8 +22651,19 @@ var PriceListSelector = function (_a) {
22317
22651
  setSelectedProduct(product);
22318
22652
  }, [priceListChangeOptions, selectedBillingPeriod, onChangeBillingPeriod]);
22319
22653
  // Default settings
22654
+ var initialProduct = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products) === null || _b === void 0 ? void 0 : _b[0];
22655
+ var initialBillingPeriod = react.useMemo(function () {
22656
+ var initialAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, initialProduct);
22657
+ if ((upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) &&
22658
+ (initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods.includes(billingPeriodConverter(periodMonthsConverter(upgradingSubscription.priceList.periodMonths))))) {
22659
+ return periodMonthsConverter(upgradingSubscription.priceList.periodMonths);
22660
+ }
22661
+ else {
22662
+ return periodMonthsConverter((initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods[0]) || 1);
22663
+ }
22664
+ }, [upgradingSubscription]);
22665
+ // Set initial billing period and initial product
22320
22666
  react.useEffect(function () {
22321
- var _a, _b, _c, _d;
22322
22667
  if (arePlanChangeOptionsLoading ||
22323
22668
  areSubscriptionsLoading ||
22324
22669
  !priceListChangeOptions ||
@@ -22326,55 +22671,47 @@ var PriceListSelector = function (_a) {
22326
22671
  selectedProduct ||
22327
22672
  selectedPriceList)
22328
22673
  return;
22329
- var initialProduct = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products) === null || _a === void 0 ? void 0 : _a[0];
22330
- var initialAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, initialProduct);
22331
- var initialBillingPeriod;
22332
- if ((upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) &&
22333
- (initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods.includes(billingPeriodConverter(periodMonthsConverter(upgradingSubscription.priceList.periodMonths))))) {
22334
- initialBillingPeriod = periodMonthsConverter(upgradingSubscription.priceList.periodMonths);
22335
- }
22336
- else {
22337
- initialBillingPeriod = periodMonthsConverter((initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods[0]) || 1);
22338
- }
22339
- var initialAvailablePriceLists = ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) {
22340
- return periodMonthsConverter(priceList.periodMonths) === initialBillingPeriod &&
22341
- priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
22342
- })) || [];
22343
- var initialPriceList;
22344
- var initialQuantity = (_d = (_c = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.quantity;
22345
- if (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) {
22346
- initialPriceList = initialAvailablePriceLists.find(function (priceList) { return priceList.id === upgradingSubscription.priceList.id; });
22347
- }
22348
22674
  if (initialBillingPeriod)
22349
22675
  setSelectedBillingPeriod(initialBillingPeriod);
22350
22676
  if (initialProduct)
22351
22677
  setSelectedProduct(initialProduct);
22678
+ }, [
22679
+ setSelectedBillingPeriod,
22680
+ setSelectedProduct,
22681
+ selectedBillingPeriod,
22682
+ arePlanChangeOptionsLoading,
22683
+ areSubscriptionsLoading,
22684
+ priceListChangeOptions,
22685
+ selectedPriceList,
22686
+ selectedProduct,
22687
+ ]);
22688
+ // Set initial price list and initial quantity in quote preview data
22689
+ // Will also set the initial price list and quantity if the billing period is changed
22690
+ react.useEffect(function () {
22691
+ var _a, _b, _c;
22692
+ var initialAvailablePriceLists = ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) {
22693
+ return periodMonthsConverter(priceList.periodMonths) === initialBillingPeriod &&
22694
+ priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
22695
+ })) || [];
22696
+ var initialPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList)
22697
+ ? initialAvailablePriceLists.find(function (priceList) { return priceList.id === upgradingSubscription.priceList.id; })
22698
+ : undefined;
22352
22699
  if (initialPriceList &&
22353
22700
  !isInPreviewMode &&
22354
22701
  !isPriceListDisabled({
22355
22702
  priceList: initialPriceList,
22356
22703
  subscriptions: subscriptions,
22357
22704
  upgradingSubscription: upgradingSubscription,
22358
- canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(initialPriceList, upgradingSubscription),
22359
- })) {
22705
+ }) &&
22706
+ !(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList)) {
22707
+ var initialQuantity = (_c = (_b = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.quantity;
22360
22708
  setQuotePreviewData({
22361
22709
  priceList: initialPriceList,
22362
22710
  quantity: calculateNewQuantity(initialPriceList, initialQuantity),
22363
22711
  });
22364
22712
  }
22365
- }, [
22366
- arePlanChangeOptionsLoading,
22367
- areSubscriptionsLoading,
22368
- isInPreviewMode,
22369
- priceListChangeOptions,
22370
- selectedBillingPeriod,
22371
- selectedPriceList,
22372
- selectedProduct,
22373
- setQuotePreviewData,
22374
- subscriptions,
22375
- upgradingSubscription,
22376
- ]);
22377
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsxRuntime.jsx(PriceListGrid, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription })] }));
22713
+ }, [isInPreviewMode, subscriptions, upgradingSubscription, selectedBillingPeriod]);
22714
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsxRuntime.jsx(PriceListGrid, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription, selectedBillingPeriod: selectedBillingPeriod })] }));
22378
22715
  };
22379
22716
 
22380
22717
  var PlanPicker = function () {
@@ -22383,9 +22720,7 @@ var PlanPicker = function () {
22383
22720
  var token = useToken();
22384
22721
  var apiHost = react.useContext(BunnyContext).apiHost;
22385
22722
  var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, upgradingSubscription = _b.upgradingSubscription;
22386
- var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22387
- // Hooks
22388
- var showInfoNotification = common.useInfoNotification();
22723
+ var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData; _c.setQuotePreviewData;
22389
22724
  // Queries
22390
22725
  var _d = reactQuery.useQuery({
22391
22726
  queryKey: common.QueryKeyFactory.default.createTableKey({
@@ -22410,24 +22745,7 @@ var PlanPicker = function () {
22410
22745
  },
22411
22746
  enabled: !areSubscriptionsLoading,
22412
22747
  }), priceListChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
22413
- // Handlers
22414
- var onChangePriceList = react.useCallback(function (selectedPriceList) {
22415
- if (isInPreviewMode)
22416
- return showInfoNotification('You are in preview mode');
22417
- return setQuotePreviewData({
22418
- priceList: selectedPriceList,
22419
- quantity: calculateNewQuantity(selectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
22420
- });
22421
- }, [isInPreviewMode, setQuotePreviewData, showInfoNotification]);
22422
- // Reset quote preview data when the plan picker is unmounted
22423
- react.useEffect(function () {
22424
- return function () {
22425
- setQuotePreviewData({});
22426
- };
22427
- }, [setQuotePreviewData]);
22428
- if (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0)
22429
- return jsxRuntime.jsx(ErrorView, { message: "There are no plans available" });
22430
- return (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
22748
+ return (jsxRuntime.jsx(PriceListSelectorProvider, { children: ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0 ? (jsxRuntime.jsx(ErrorView, { message: "There are no plans available" })) : (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions })) }));
22431
22749
  };
22432
22750
 
22433
22751
  var Text$8 = antd.Typography.Text;
@@ -22467,17 +22785,6 @@ var PlanManager = function (_a) {
22467
22785
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
22468
22786
  enabled: false,
22469
22787
  }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
22470
- var quote = reactQuery.useQuery({
22471
- queryKey: common.QueryKeyFactory.default.createObjectKey({
22472
- id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
22473
- objectName: 'editingQuote',
22474
- token: token,
22475
- }),
22476
- queryFn: function () {
22477
- return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost }) : undefined;
22478
- },
22479
- enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
22480
- }).data;
22481
22788
  react.useEffect(function () {
22482
22789
  if (subscriptionUpgradeId && !upgradingSubscription) {
22483
22790
  var subscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) { return subscription.id === subscriptionUpgradeId; });
@@ -22503,12 +22810,6 @@ var PlanManager = function (_a) {
22503
22810
  observer.unobserve(el);
22504
22811
  };
22505
22812
  }, []);
22506
- function handleSetEditingQuoteData(quoteId, isTrial) {
22507
- setEditingQuoteData({
22508
- id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) || '',
22509
- isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) || false,
22510
- });
22511
- }
22512
22813
  // Handlers
22513
22814
  var onSuccess = function () {
22514
22815
  setEditingQuoteData(undefined);
@@ -22532,12 +22833,12 @@ var PlanManager = function (_a) {
22532
22833
  };
22533
22834
  if (subscriptionsAreLoading && !isInPreviewMode)
22534
22835
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
22535
- return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [jsxRuntime.jsx(PreviewModeAdvisary, { isInPreviewMode: isInPreviewMode }), jsxRuntime.jsx(PageTitle, { onGoBack: function () {
22536
- if (isInPreviewMode)
22537
- return showInfoNotification('You are in preview mode');
22538
- setQuotePreviewData(undefined);
22539
- onChangePlanCancel();
22540
- }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { editingQuote: editingQuoteData, setEditingQuoteData: handleSetEditingQuoteData, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
22836
+ return (jsxRuntime.jsx("div", __assign({ className: "".concat(className) }, { children: jsxRuntime.jsxs(PlanManagerQuoteProvider, __assign({ editingQuoteData: editingQuoteData, setEditingQuoteData: setEditingQuoteData }, { children: [jsxRuntime.jsx(PreviewModeAdvisary, { isInPreviewMode: isInPreviewMode }), jsxRuntime.jsx(PageTitle, { onGoBack: function () {
22837
+ if (isInPreviewMode)
22838
+ return showInfoNotification('You are in preview mode');
22839
+ setQuotePreviewData(undefined);
22840
+ onChangePlanCancel();
22841
+ }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, token: token, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { editingQuote: editingQuoteData, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })) })));
22541
22842
  };
22542
22843
 
22543
22844
  var useCancelSubscription = function () {
@@ -22556,6 +22857,23 @@ var useCancelSubscription = function () {
22556
22857
  }); };
22557
22858
  };
22558
22859
 
22860
+ var ADDON_INDENTATION = 64;
22861
+ function findNonAddonSubscriptions(subscriptions) {
22862
+ return subscriptions.filter(function (subscription) {
22863
+ return subscription.priceList.plan.addon === false || subscription.priceList.plan.addon === null;
22864
+ });
22865
+ }
22866
+ function findAddonSubscriptions(parentSubscription, subscriptions) {
22867
+ var _a;
22868
+ var addonSubscriptionsIds = (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.map(function (addonSubscription) { return addonSubscription.id; });
22869
+ return subscriptions.filter(function (subscription) { return addonSubscriptionsIds === null || addonSubscriptionsIds === void 0 ? void 0 : addonSubscriptionsIds.includes(subscription.id); });
22870
+ }
22871
+
22872
+ var AddonIndentation = function (_a) {
22873
+ var isLast = _a.isLast, indentation = _a.indentation, verticalMargin = _a.verticalMargin;
22874
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-relative", style: { width: "".concat(indentation, "px") } }, { children: [jsxRuntime.jsx("div", { className: "bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto", style: { marginTop: verticalMargin } }), jsxRuntime.jsx("div", { className: "bunny-bg-gray-300 bunny-h-0.5 bunny-w-1/2 bunny-ml-auto" }), isLast ? (jsxRuntime.jsx("div", { className: "bunny-flex-1" })) : (jsxRuntime.jsx("div", { className: "bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto", style: { marginBottom: verticalMargin } }))] })));
22875
+ };
22876
+
22559
22877
  var SubscriptionState;
22560
22878
  (function (SubscriptionState) {
22561
22879
  SubscriptionState["ACTIVE"] = "ACTIVE";
@@ -22784,296 +23102,46 @@ var getApplicablePriceTier = function (charge, currencyId, priceDecimals) {
22784
23102
  : "".concat(common.formatCurrency(selectedTier.price, currencyId, priceDecimals));
22785
23103
  };
22786
23104
 
22787
- var MUTATION = "\nmutation BillingDetailsUpdate(\n $attributes: BillingDetailsAttributes!) {\n billingDetailsUpdate(\n attributes: $attributes\n ) {\n billingDetails {\n billingCity\n billingContact {\n email\n }\n billingCountry\n billingState\n billingStreet\n billingZip\n name\n taxNumber\n }\n errors\n }\n }\n";
22788
- var billingDetailsUpdate = function (_a) {
22789
- var attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
22790
- return __awaiter(void 0, void 0, void 0, function () {
22791
- var vars, response, errors;
22792
- var _b;
22793
- return __generator(this, function (_c) {
22794
- switch (_c.label) {
22795
- case 0:
22796
- vars = { attributes: attributes };
22797
- return [4 /*yield*/, gqlRequest({
22798
- query: MUTATION,
22799
- token: token,
22800
- vars: vars,
22801
- apiHost: apiHost,
22802
- })];
22803
- case 1:
22804
- response = _c.sent();
22805
- errors = (_b = response === null || response === void 0 ? void 0 : response.billingDetailsUpdate) === null || _b === void 0 ? void 0 : _b.errors;
22806
- if (errors)
22807
- throw errors;
22808
- return [2 /*return*/, response.billingDetailsUpdate];
22809
- }
22810
- });
22811
- });
22812
- };
22813
-
22814
- // TODO: move this to common
22815
- var billingDetailsQuery = function () {
22816
- return "\nquery BillingDetails {\n billingDetails {\n billingCity\n billingContact {\n email\n }\n billingCountry\n billingState\n billingStreet\n billingZip\n name\n taxNumber\n currency {\n id\n }\n }\n}";
22817
- };
22818
- var getBillingDetails = function (_a) {
22819
- var token = _a.token, apiHost = _a.apiHost;
22820
- return __awaiter(void 0, void 0, void 0, function () {
22821
- var response;
22822
- var _b;
22823
- return __generator(this, function (_c) {
22824
- switch (_c.label) {
22825
- case 0: return [4 /*yield*/, gqlRequest({
22826
- query: billingDetailsQuery(),
22827
- token: token,
22828
- apiHost: apiHost,
22829
- })];
22830
- case 1:
22831
- response = _c.sent();
22832
- if (response === null || response === void 0 ? void 0 : response.errors) {
22833
- throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
22834
- }
22835
- return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
22836
- }
22837
- });
22838
- });
22839
- };
22840
-
22841
- var Text$7 = antd.Typography.Text;
22842
- function BillingDetailsSection(_a) {
22843
- var _this = this;
22844
- var hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
22845
- // State
22846
- var _b = react.useState(false), isFormEdited = _b[0], setIsFormEdited = _b[1];
22847
- var _c = react.useState(false), formIsValid = _c[0], setFormIsValid = _c[1];
22848
- var form = antd.Form.useForm()[0];
22849
- var values = antd.Form.useWatch([], form);
22850
- // Context
22851
- var apiHost = react.useContext(BunnyContext).apiHost;
22852
- var token = useToken();
22853
- // Hooks
22854
- var isMobile = common.useIsMobile();
22855
- var queryClient = reactQuery.useQueryClient();
22856
- var showErrorNotification = common.useErrorNotification();
22857
- var showSuccessNotification = common.useSuccessNotification();
22858
- // Queries
22859
- var _d = reactQuery.useQuery({
22860
- queryKey: common.QueryKeyFactory.default.billingDetailsKey({ token: token }),
22861
- queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
22862
- }), billingDetails = _d.data, isLoadingBillingDetails = _d.isLoading;
22863
- var _e = reactQuery.useMutation({
22864
- mutationFn: function (changedFormData) { return __awaiter(_this, void 0, void 0, function () {
22865
- var updatedBillingDetails;
22866
- return __generator(this, function (_a) {
22867
- switch (_a.label) {
22868
- case 0: return [4 /*yield*/, billingDetailsUpdate({
22869
- attributes: {
22870
- name: changedFormData.name,
22871
- billingStreet: changedFormData.billingStreet,
22872
- billingCity: changedFormData.billingCity,
22873
- billingZip: changedFormData.billingZip,
22874
- billingState: changedFormData.billingState,
22875
- billingCountry: changedFormData.billingCountry,
22876
- billingContactEmail: changedFormData.billingContactEmail,
22877
- taxNumber: changedFormData.taxNumber,
22878
- },
22879
- token: token,
22880
- apiHost: apiHost,
22881
- })];
22882
- case 1:
22883
- updatedBillingDetails = _a.sent();
22884
- queryClient.setQueryData(common.QueryKeyFactory.default.billingDetailsKey({ token: token }), function (old) {
22885
- return __assign(__assign({}, old), updatedBillingDetails.billingDetails);
22886
- });
22887
- return [2 /*return*/, updatedBillingDetails];
22888
- }
22889
- });
22890
- }); },
22891
- onSuccess: function () {
22892
- showSuccessNotification('Your account details have been saved');
22893
- queryClient.invalidateQueries({
22894
- queryKey: common.QueryKeyFactory.default.taxationRequiredAccountFieldsKey({
22895
- token: token,
22896
- }),
22897
- });
22898
- },
22899
- }), updateBillingDetails = _e.mutate, isUpdatingBillingDetails = _e.isPending;
22900
- // Set form values when billing details are loaded
22901
- react.useEffect(function () {
22902
- var _a;
22903
- if (billingDetails) {
22904
- form.setFieldsValue({
22905
- billingStreet: billingDetails.billingStreet,
22906
- billingCity: billingDetails.billingCity,
22907
- billingZip: billingDetails.billingZip,
22908
- billingState: billingDetails.billingState,
22909
- billingCountry: billingDetails.billingCountry,
22910
- billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
22911
- taxNumber: billingDetails.taxNumber,
22912
- });
22913
- }
22914
- }, [billingDetails]);
22915
- react.useEffect(function () {
22916
- form
22917
- .validateFields({ validateOnly: true })
22918
- .then(function () { return setFormIsValid(true); })
22919
- .catch(function () { return setFormIsValid(false); });
22920
- var isFormEdited = function () {
22921
- var _a;
22922
- if (!billingDetails)
22923
- return false;
22924
- var currentValues = form.getFieldsValue();
22925
- var accountValues = {
22926
- billingStreet: billingDetails.billingStreet,
22927
- billingCity: billingDetails.billingCity,
22928
- billingZip: billingDetails.billingZip,
22929
- billingState: billingDetails.billingState,
22930
- billingCountry: billingDetails.billingCountry,
22931
- billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
22932
- taxNumber: billingDetails.taxNumber,
22933
- };
22934
- return Object.keys(currentValues).some(function (key) {
22935
- var value = accountValues[key];
22936
- return currentValues[key] !== value;
22937
- });
22938
- };
22939
- setIsFormEdited(isFormEdited());
22940
- }, [form, values, billingDetails]);
22941
- // Validate form fields when isFormEdited changes
22942
- react.useEffect(function () {
22943
- var validateOnly = isFormEdited ? false : true;
22944
- form.validateFields({ validateOnly: validateOnly });
22945
- }, [isFormEdited]);
22946
- var saveBillingDetails = function () { return __awaiter(_this, void 0, void 0, function () {
22947
- var _this = this;
22948
- return __generator(this, function (_a) {
22949
- form.validateFields({ validateOnly: false }).then(function () { return __awaiter(_this, void 0, void 0, function () {
22950
- var error_1;
22951
- return __generator(this, function (_a) {
22952
- switch (_a.label) {
22953
- case 0:
22954
- _a.trys.push([0, 2, 3, 4]);
22955
- return [4 /*yield*/, form.validateFields()];
22956
- case 1:
22957
- _a.sent();
22958
- updateBillingDetails(form.getFieldsValue());
22959
- return [3 /*break*/, 4];
22960
- case 2:
22961
- error_1 = _a.sent();
22962
- if (error_1 instanceof Error) {
22963
- showErrorNotification('Failed to update account', error_1.message);
22964
- }
22965
- else {
22966
- showErrorNotification('Please fill out all required fields');
22967
- }
22968
- return [3 /*break*/, 4];
22969
- case 3:
22970
- setIsFormEdited(false);
22971
- return [7 /*endfinally*/];
22972
- case 4: return [2 /*return*/];
22973
- }
22974
- });
22975
- }); });
22976
- return [2 /*return*/];
22977
- });
22978
- }); };
22979
- var filteredCountryList = react.useMemo(function () {
22980
- return countryListFilter ? common.Lists.COUNTRY_LIST.filter(countryListFilter) : common.Lists.COUNTRY_LIST;
22981
- }, [countryListFilter]);
22982
- return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? 'bunny-w-full' : 'bunny-w-1/2') }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-px-4" }, { children: [jsxRuntime.jsxs(antd.Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-mb-2" }, { children: jsxRuntime.jsx(Text$7, __assign({ className: "bunny-font-medium bunny-text-lg" }, { children: (billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.name) || 'No company name' })) })), jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [{ required: true, message: 'Street address is required' }] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: 'City is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: 'Zipcode is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "State", name: "billingState", rules: [
22983
- {
22984
- required: false,
22985
- },
22986
- ] }, { children: jsxRuntime.jsx(antd.Input, {}) })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Country", name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsxRuntime.jsx(antd.Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
22987
- var _a, _b;
22988
- return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
22989
- ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
22990
- } }) })) }))] })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
22991
- {
22992
- required: true,
22993
- message: 'Email is required',
22994
- type: 'email',
22995
- },
22996
- ] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }] }, { children: jsxRuntime.jsx(antd.Input, {}) }))] }))] })), jsxRuntime.jsx(antd.Button, __assign({ disabled: !isFormEdited || isUpdatingBillingDetails || !formIsValid, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails }, { children: "Save" }))] })) })));
22997
- }
22998
-
22999
- var BillingDetails = function (_a) {
23000
- var className = _a.className, countryListFilter = _a.countryListFilter, _b = _a.hideBillingDetailsForm, hideBillingDetailsForm = _b === void 0 ? false : _b, _c = _a.hidePaymentMethodForm, hidePaymentMethodForm = _c === void 0 ? false : _c, _d = _a.isCardEnabled, isCardEnabled = _d === void 0 ? true : _d, _e = _a.isUpgradeFromTrial, isUpgradeFromTrial = _e === void 0 ? false : _e, _f = _a.shadow, shadow = _f === void 0 ? 'shadow-md' : _f, onSavePaymentMethod = _a.onSavePaymentMethod;
23001
- // Hooks
23002
- var isMobile = common.useIsMobile();
23003
- return (jsxRuntime.jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-py-2 bunny-my-2 ".concat(isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row', " bunny-gap-4") }, { children: [!hideBillingDetailsForm ? (jsxRuntime.jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsxRuntime.jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsxRuntime.jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm, isUpgradeFromTrial: isUpgradeFromTrial, onSavePaymentMethod: onSavePaymentMethod })) : null] })) })));
23004
- };
23005
- var WrapperComponent = function (_a) {
23006
- var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;
23007
- return (jsxRuntime.jsx("div", __assign({ className: "".concat(className) }, { children: isCardEnabled ? jsxRuntime.jsx(Card, __assign({ className: "".concat(shadow) }, { children: children })) : jsxRuntime.jsx("div", { children: children }) })));
23008
- };
23009
- var ResponsiveDivider = function () {
23010
- var isMobile = common.useIsMobile();
23011
- return isMobile ? (jsxRuntime.jsx("div", __assign({ className: "bunny-mx-4" }, { children: jsxRuntime.jsx(antd.Divider, {}) }))) : (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" }) }));
23012
- };
23013
- var PaymentFormSection = function (_a) {
23014
- var hideBillingDetailsForm = _a.hideBillingDetailsForm, isUpgradeFromTrial = _a.isUpgradeFromTrial, onSavePaymentMethod = _a.onSavePaymentMethod;
23015
- var isMobile = common.useIsMobile();
23016
- var onTokenExpired = react.useContext(BunnyContext).onTokenExpired;
23017
- var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
23018
- var showSuccessNotification = common.useSuccessNotification();
23019
- var entityId = useCurrentUserData().entityId;
23020
- return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
23021
- handleAllErrorFormats(error);
23022
- }, onSavePaymentMethod: function () {
23023
- showSuccessNotification(isUpgradeFromTrial
23024
- ? 'Payment method saved! Your trial will automatically convert to a paid subscription.'
23025
- : 'Payment method saved successfully!');
23026
- onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
23027
- } }) })));
23028
- };
23029
-
23030
- var UpgradeFromTrial = function (_a) {
23031
- var onClose = _a.onClose, open = _a.open;
23032
- return (jsxRuntime.jsx(antd.Modal, __assign({ width: '80vw', open: open, onCancel: onClose, footer: null }, { children: jsxRuntime.jsx(BillingDetails, { isUpgradeFromTrial: true, onSavePaymentMethod: onClose }) })));
23033
- };
23034
-
23035
23105
  var SubscriptionCardActions = function (_a) {
23036
23106
  var _b;
23037
23107
  var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
23038
- var apiHost = react.useContext(BunnyContext).apiHost;
23039
- var token = useToken();
23040
- var _c = usePaymentMethod({
23041
- accountId: subscription.accountId,
23042
- token: token,
23043
- apiHost: apiHost,
23044
- }), storedPaymentMethods = _c.paymentMethods, isPaymentMethodLoading = _c.isLoading;
23045
- // Local state
23046
- var _d = react.useState(false), isUpgradeFromTrialModalOpen = _d[0], setIsUpgradeFromTrialModalOpen = _d[1];
23047
23108
  // Derived state
23048
23109
  var isSelfServiceCancelable = subscription.plan.selfServiceCancel;
23049
23110
  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; });
23050
23111
  var arePlansAvailable = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
23051
23112
  var isInTrial = isSubscriptionTrial(subscription);
23052
23113
  var isActiveOrPending = isSubscriptionActiveOrPending(subscription);
23053
- if (isPaymentMethodLoading)
23054
- return null;
23055
- 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" })) }))), isInTrial && !(storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return setIsUpgradeFromTrialModalOpen(true); }, type: "primary" }, { children: "Upgrade from trial" }))), arePlansAvailable && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: isInTrial ? 'default' : 'primary' }, { children: "Change plan" }))), jsxRuntime.jsx(UpgradeFromTrial, { onClose: function () { return setIsUpgradeFromTrialModalOpen(false); }, open: isUpgradeFromTrialModalOpen })] }));
23114
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isSelfServiceCancelable && onCancelSubscriptionClick && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), arePlansAvailable && onChangePlanClick && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: isInTrial ? 'Upgrade' : 'Change plan' })))] }));
23056
23115
  };
23057
23116
 
23058
- var Text$6 = antd.Typography.Text;
23117
+ var Text$7 = antd.Typography.Text;
23059
23118
  var getSubscriptionStatusText = function (subscription) {
23060
- var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
23061
- if (cancellationDate &&
23062
- (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.CANCELED &&
23063
- (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.EXPIRED) {
23119
+ var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate, trialEndDate = subscription.trialEndDate, trialStartDate = subscription.trialStartDate, startDate = subscription.startDate;
23120
+ var stateUpperCased = state === null || state === void 0 ? void 0 : state.toUpperCase();
23121
+ var isActive = stateUpperCased === common.SubscriptionState.ACTIVE;
23122
+ var isPending = stateUpperCased === common.SubscriptionState.PENDING;
23123
+ var isCanceled = stateUpperCased === common.SubscriptionState.CANCELED;
23124
+ var isExpired = stateUpperCased === common.SubscriptionState.EXPIRED;
23125
+ var isTrial = stateUpperCased === common.SubscriptionState.TRIAL;
23126
+ if (cancellationDate && (isActive || isPending || isTrial))
23064
23127
  return (jsxRuntime.jsxs(CustomizedTag, __assign({ color: "red" }, { children: ["Canceled - ends on ", common.formatDate(cancellationDate)] })));
23128
+ if (cancellationDate && isCanceled)
23129
+ return "Canceled on ".concat(common.formatDate(cancellationDate));
23130
+ if (isExpired)
23131
+ return "Ended on ".concat(common.formatDate(endDate || trialEndDate));
23132
+ if (isPending) {
23133
+ if (trialStartDate)
23134
+ return "Trial starts on ".concat(common.formatDate(trialStartDate));
23135
+ if (startDate)
23136
+ return "Activates on ".concat(common.formatDate(startDate));
23065
23137
  }
23066
23138
  if (evergreen) {
23067
23139
  return "Renews on ".concat(common.formatDate(endDate));
23068
23140
  }
23069
- if ((state === null || state === void 0 ? void 0 : state.toUpperCase()) === common.SubscriptionState.CANCELED ||
23070
- (state === null || state === void 0 ? void 0 : state.toUpperCase()) === common.SubscriptionState.EXPIRED) {
23071
- return "Ended on ".concat(common.formatDate(endDate));
23072
- }
23073
- return "Ends on ".concat(common.formatDate(endDate));
23141
+ return "Ends on ".concat(common.formatDate(endDate || trialEndDate));
23074
23142
  };
23075
23143
  var SubscriptionCardHeader = function (_a) {
23076
- var _b, _c, _d, _e, _f;
23144
+ var _b, _c, _d, _e;
23077
23145
  var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
23078
23146
  var darkMode = react.useContext(BunnyContext).darkMode;
23079
23147
  var brandColor = react.useContext(BrandContext).brandColor;
@@ -23081,10 +23149,10 @@ var SubscriptionCardHeader = function (_a) {
23081
23149
  var isMobile = common.useIsMobile();
23082
23150
  // Derived state
23083
23151
  var trialDaysLeft = subscription === null || subscription === void 0 ? void 0 : subscription.daysLeftInTrial;
23084
- var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
23152
+ var isTrial = isSubscriptionTrial(subscription);
23085
23153
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: {
23086
23154
  backgroundColor: darkMode ? 'var(--row-background-dark)' : '',
23087
- } }, { 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$6, __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$6, __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$6, __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 }))] }))] })));
23155
+ } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_b = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _b === void 0 ? void 0 : _b.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: '11px', fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_c = subscription.product.name) === null || _c === void 0 ? void 0 : _c.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_d = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _d === void 0 ? void 0 : _d.name) && (jsxRuntime.jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_e = subscription.state) === null || _e === void 0 ? void 0 : _e.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft || 'N/A', " days left)") : ''] }))] }))] })), jsxRuntime.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 && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
23088
23156
  };
23089
23157
 
23090
23158
  var SubscriptionChargeTotal = function (_a) {
@@ -23161,49 +23229,75 @@ var SubscriptionChargeUnitPrice = function (_a) {
23161
23229
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasPriceTiers(charge) ? (jsxRuntime.jsx(TieredDisplayDropdown, { charge: charge, currencyId: currencyId, truncatedText: "".concat(charge.kind === common.QuoteChangeKind.PRICE_UPDATE ? 'new ' : '').concat(getApplicablePriceTier(charge, currencyId, charge.priceDecimals)) })) : isChargeDiscount ? ("-".concat(price)) : (price) }));
23162
23230
  };
23163
23231
 
23164
- var Text$5 = antd.Typography.Text;
23232
+ var Text$6 = antd.Typography.Text;
23165
23233
  var SubscriptionCardColumnHeaders = function (_a) {
23166
23234
  var columns = _a.columns;
23167
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(Text$5, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
23235
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(Text$6, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
23168
23236
  };
23169
23237
 
23170
- var Text$4 = antd.Typography.Text;
23238
+ var Text$5 = antd.Typography.Text;
23171
23239
  var SubscriptionsListCell = function (_a) {
23172
23240
  var children = _a.children, className = _a.className, gridColumn = _a.gridColumn, right = _a.right, style = _a.style;
23173
- return (jsxRuntime.jsx(Text$4, __assign({ className: "bunny-flex bunny-items-center bunny-text-sm bunny-whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
23241
+ return (jsxRuntime.jsx(Text$5, __assign({ className: "bunny-flex bunny-items-center bunny-text-sm bunny-whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
23174
23242
  };
23175
23243
 
23176
- var CARD_COLUMNS = [
23244
+ var NON_ADDON_CARD_COLUMNS = [
23245
+ {
23246
+ title: 'CHARGE',
23247
+ width: 'minmax(min-content, 26%)',
23248
+ },
23249
+ {
23250
+ title: 'PERIOD',
23251
+ width: 'minmax(min-content, 20%)',
23252
+ },
23253
+ {
23254
+ className: 'text-right',
23255
+ title: 'QUANTITY',
23256
+ width: "minmax(min-content, 18%)",
23257
+ },
23258
+ {
23259
+ className: 'text-right',
23260
+ title: 'UNIT PRICE',
23261
+ width: "minmax(min-content, 18%)",
23262
+ },
23263
+ {
23264
+ className: 'text-right',
23265
+ title: 'TOTAL',
23266
+ width: "minmax(min-content, 18%)",
23267
+ },
23268
+ ];
23269
+ var ADDON_CARD_COLUMNS = [
23177
23270
  {
23178
23271
  title: 'CHARGE',
23179
- width: 'minmax(min-content, 26%)',
23272
+ width: 'minmax(min-content, 21.6%)',
23180
23273
  },
23181
23274
  {
23182
23275
  title: 'PERIOD',
23183
- width: 'minmax(min-content, 20%)',
23276
+ width: 'minmax(min-content, 21.1%)',
23184
23277
  },
23185
23278
  {
23186
23279
  className: 'text-right',
23187
23280
  title: 'QUANTITY',
23188
- width: "minmax(min-content, 18%)",
23281
+ width: "minmax(min-content, 19.1%)",
23189
23282
  },
23190
23283
  {
23191
23284
  className: 'text-right',
23192
23285
  title: 'UNIT PRICE',
23193
- width: "minmax(min-content, 18%)",
23286
+ width: "minmax(min-content, 19.1%)",
23194
23287
  },
23195
23288
  {
23196
23289
  className: 'text-right',
23197
23290
  title: 'TOTAL',
23198
- width: "minmax(min-content, 18%)",
23291
+ width: "minmax(min-content, 19.1%)",
23199
23292
  },
23200
23293
  ];
23201
23294
  var SubscriptionCardDesktop = function (_a) {
23202
23295
  var _b;
23203
- var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
23296
+ var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription, isAddon = _a.isAddon;
23204
23297
  var shadow = react.useContext(SubscriptionsContext).shadow;
23205
23298
  // Derived state
23206
23299
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
23300
+ var CARD_COLUMNS = isAddon ? ADDON_CARD_COLUMNS : NON_ADDON_CARD_COLUMNS;
23207
23301
  return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : '') }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
23208
23302
  gridColumn: '1 / 5',
23209
23303
  width: 'calc(100% + 32px)',
@@ -23258,10 +23352,24 @@ var SubscriptionCardDesktopRow = function (_a) {
23258
23352
  : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
23259
23353
  };
23260
23354
 
23261
- var Text$3 = antd.Typography.Text;
23355
+ function AddonSubscriptionsCards(_a) {
23356
+ var onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscriptions = _a.subscriptions, subscription = _a.subscription, hideExpired = _a.hideExpired;
23357
+ var addonSubscriptions = findAddonSubscriptions(subscription, subscriptions);
23358
+ if (addonSubscriptions.length === 0) {
23359
+ return null;
23360
+ }
23361
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: addonSubscriptions.map(function (addonSubscription, addonSubscriptionIndex) {
23362
+ if (hideExpired && isSubscriptionNotActive(addonSubscription))
23363
+ return null;
23364
+ var isLast = addonSubscriptionIndex === addonSubscriptions.length - 1;
23365
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row" }, { children: [jsxRuntime.jsx(AddonIndentation, { isLast: isLast, indentation: ADDON_INDENTATION, verticalMargin: "-1rem" }), jsxRuntime.jsx("div", __assign({ className: "bunny-flex-1" }, { children: jsxRuntime.jsx(SubscriptionCardDesktop, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: addonSubscription, isAddon: true }) }))] })));
23366
+ }) }));
23367
+ }
23368
+
23369
+ var Text$4 = antd.Typography.Text;
23262
23370
  var SubscriptionCardCellMobile = function (_a) {
23263
23371
  var children = _a.children, className = _a.className, style = _a.style;
23264
- return (jsxRuntime.jsx(Text$3, __assign({ className: className, style: style }, { children: children })));
23372
+ return (jsxRuntime.jsx(Text$4, __assign({ className: className, style: style }, { children: children })));
23265
23373
  };
23266
23374
 
23267
23375
  var CHARGE_COLUMNS = [
@@ -23309,18 +23417,16 @@ var SubscriptionCard = function (_a) {
23309
23417
  var SubscriptionsList = function (_a) {
23310
23418
  var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscriptions = _a.subscriptions;
23311
23419
  var isMobile = common.useIsMobile();
23312
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.map(function (subscription, subscriptionIndex) {
23420
+ var nonAddonSubscriptions = findNonAddonSubscriptions(subscriptions);
23421
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: nonAddonSubscriptions === null || nonAddonSubscriptions === void 0 ? void 0 : nonAddonSubscriptions.map(function (subscription, subscriptionIndex) {
23313
23422
  if (hideExpired && isSubscriptionNotActive(subscription))
23314
23423
  return null;
23315
23424
  if (isMobile)
23316
- return jsxRuntime.jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex);
23317
- return (jsxRuntime.jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }, subscriptionIndex));
23425
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex), jsxRuntime.jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, hideExpired: hideExpired })] }));
23426
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }, subscriptionIndex), jsxRuntime.jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, hideExpired: hideExpired })] }));
23318
23427
  }) }));
23319
23428
  };
23320
23429
 
23321
- // Extra props to pass in
23322
- // - previewMode: boolean
23323
- // - productId: string
23324
23430
  var SubscriptionsListContainer = function (_a) {
23325
23431
  var companyName = _a.companyName, _b = _a.hideExpired, hideExpired = _b === void 0 ? false : _b, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, onChangePlanClick = _a.onChangePlanClick, noSubscriptionsComponent = _a.noSubscriptionsComponent, subscriptions = _a.subscriptions, subscriptionsAreLoading = _a.subscriptionsAreLoading;
23326
23432
  // Context
@@ -23339,10 +23445,10 @@ var SubscriptionsListContainer = function (_a) {
23339
23445
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-".concat(gap, " bunny-shrink bunny-overflow-auto") }, { children: jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions }) }))) : (noSubscriptionsComponent || (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) }));
23340
23446
  };
23341
23447
 
23342
- var Text$2 = antd.Typography.Text;
23448
+ var Text$3 = antd.Typography.Text;
23343
23449
  var DrawerHeader = function (_a) {
23344
23450
  var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
23345
- 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$2, __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 }))] })));
23451
+ 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 }))] })));
23346
23452
  };
23347
23453
 
23348
23454
  var formatDateForApi = function (date) {
@@ -23525,13 +23631,13 @@ var QuantityInput = function (_a) {
23525
23631
  }, status: isQuantityLowerThanOriginal(charge.quantity) ? 'error' : '', style: { width: '96px' }, value: value }) }));
23526
23632
  };
23527
23633
 
23528
- var Text$1 = antd.Typography.Text;
23634
+ var Text$2 = antd.Typography.Text;
23529
23635
  var QuantityChangeGridRow = function (_a) {
23530
23636
  var _b;
23531
23637
  var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge;
23532
23638
  if (!canShowQuantitiesInput(subscriptionCharge, subscription))
23533
23639
  return null;
23534
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$1, __assign({ className: "bunny-font-medium bunny-text-orange-600 bunny-col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$1, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsxRuntime.jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions }), jsxRuntime.jsx("div", {})] })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
23640
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-orange-600 bunny-col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsxRuntime.jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions }), jsxRuntime.jsx("div", {})] })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
23535
23641
  };
23536
23642
 
23537
23643
  var QuantityChangeGridTitle = function (_a) {
@@ -23593,11 +23699,11 @@ var QuantityChangeDrawerDesktop = function (_a) {
23593
23699
  wrapper: {
23594
23700
  minWidth: '600px',
23595
23701
  },
23596
- }, title: jsxRuntime.jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-pb-4", style: {
23702
+ }, title: jsxRuntime.jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-pb-2", style: {
23597
23703
  gridTemplateColumns: '2fr 1fr 1fr',
23598
- rowGap: '0.75rem',
23704
+ rowGap: '0.25rem',
23599
23705
  columnGap: '1rem',
23600
- } }, { children: [jsxRuntime.jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-py-2" }), subscriptions.map(function (subscription, index) {
23706
+ } }, { children: [jsxRuntime.jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full" }), subscriptions.map(function (subscription, index) {
23601
23707
  var _a;
23602
23708
  var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
23603
23709
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
@@ -23642,7 +23748,7 @@ var SubscriptionsNavigation = function (_a) {
23642
23748
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-grow bunny-gap-2 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-justify-end') }, { children: canShowChangeQuantitiesButton && (jsxRuntime.jsx(ChangeQuantitiesButton, { canShowChangeQuantitiesButton: canShowChangeQuantitiesButton, setQuantityDrawerOpen: setQuantityDrawerOpen })) }))] }));
23643
23749
  };
23644
23750
 
23645
- var Text = antd.Typography.Text;
23751
+ var Text$1 = antd.Typography.Text;
23646
23752
  var SubscriptionsWrapper = function (_a) {
23647
23753
  var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, _b = _a.isInPreviewMode, isInPreviewMode = _b === void 0 ? false : _b, productId = _a.productId, className = _a.className, _c = _a.styles, userStyles = _c === void 0 ? {} : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, hideExpired = _a.hideExpired, _e = _a.hideExpiredToggle, hideExpiredToggle = _e === void 0 ? false : _e;
23648
23754
  var defaultStyles = {
@@ -23801,7 +23907,7 @@ var Subscriptions = function (_a) {
23801
23907
  setIsChangingPlan(false);
23802
23908
  }, handlePortalErrors: handlePortalErrors }));
23803
23909
  }
23804
- return (jsxRuntime.jsxs("div", __assign({ className: className }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod })] })));
23910
+ return (jsxRuntime.jsxs("div", __assign({ className: className }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod })] })));
23805
23911
  };
23806
23912
  var PageHeaderWithActions = function (_a) {
23807
23913
  var children = _a.children, title = _a.title;
@@ -23816,6 +23922,246 @@ var PageSubTitle = function (_a) {
23816
23922
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: secondaryColor } }, { children: title })));
23817
23923
  };
23818
23924
 
23925
+ var MUTATION = "\nmutation BillingDetailsUpdate(\n $attributes: BillingDetailsAttributes!) {\n billingDetailsUpdate(\n attributes: $attributes\n ) {\n billingDetails {\n billingCity\n billingContact {\n email\n }\n billingCountry\n billingState\n billingStreet\n billingZip\n name\n taxNumber\n }\n errors\n }\n }\n";
23926
+ var billingDetailsUpdate = function (_a) {
23927
+ var attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
23928
+ return __awaiter(void 0, void 0, void 0, function () {
23929
+ var vars, response, errors;
23930
+ var _b;
23931
+ return __generator(this, function (_c) {
23932
+ switch (_c.label) {
23933
+ case 0:
23934
+ vars = { attributes: attributes };
23935
+ return [4 /*yield*/, gqlRequest({
23936
+ query: MUTATION,
23937
+ token: token,
23938
+ vars: vars,
23939
+ apiHost: apiHost,
23940
+ })];
23941
+ case 1:
23942
+ response = _c.sent();
23943
+ errors = (_b = response === null || response === void 0 ? void 0 : response.billingDetailsUpdate) === null || _b === void 0 ? void 0 : _b.errors;
23944
+ if (errors)
23945
+ throw errors;
23946
+ return [2 /*return*/, response.billingDetailsUpdate];
23947
+ }
23948
+ });
23949
+ });
23950
+ };
23951
+
23952
+ // TODO: move this to common
23953
+ var billingDetailsQuery = function () {
23954
+ return "\nquery BillingDetails {\n billingDetails {\n billingCity\n billingContact {\n email\n }\n billingCountry\n billingState\n billingStreet\n billingZip\n name\n taxNumber\n currency {\n id\n }\n }\n}";
23955
+ };
23956
+ var getBillingDetails = function (_a) {
23957
+ var token = _a.token, apiHost = _a.apiHost;
23958
+ return __awaiter(void 0, void 0, void 0, function () {
23959
+ var response;
23960
+ var _b;
23961
+ return __generator(this, function (_c) {
23962
+ switch (_c.label) {
23963
+ case 0: return [4 /*yield*/, gqlRequest({
23964
+ query: billingDetailsQuery(),
23965
+ token: token,
23966
+ apiHost: apiHost,
23967
+ })];
23968
+ case 1:
23969
+ response = _c.sent();
23970
+ if (response === null || response === void 0 ? void 0 : response.errors) {
23971
+ throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
23972
+ }
23973
+ return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
23974
+ }
23975
+ });
23976
+ });
23977
+ };
23978
+
23979
+ var Text = antd.Typography.Text;
23980
+ function BillingDetailsSection(_a) {
23981
+ var _this = this;
23982
+ var hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
23983
+ // State
23984
+ var _b = react.useState(false), isFormEdited = _b[0], setIsFormEdited = _b[1];
23985
+ var _c = react.useState(false), formIsValid = _c[0], setFormIsValid = _c[1];
23986
+ var form = antd.Form.useForm()[0];
23987
+ var values = antd.Form.useWatch([], form);
23988
+ // Context
23989
+ var apiHost = react.useContext(BunnyContext).apiHost;
23990
+ var token = useToken();
23991
+ // Hooks
23992
+ var isMobile = common.useIsMobile();
23993
+ var queryClient = reactQuery.useQueryClient();
23994
+ var showErrorNotification = common.useErrorNotification();
23995
+ var showSuccessNotification = common.useSuccessNotification();
23996
+ // Queries
23997
+ var _d = reactQuery.useQuery({
23998
+ queryKey: common.QueryKeyFactory.default.billingDetailsKey({ token: token }),
23999
+ queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
24000
+ }), billingDetails = _d.data, isLoadingBillingDetails = _d.isLoading;
24001
+ var _e = reactQuery.useMutation({
24002
+ mutationFn: function (changedFormData) { return __awaiter(_this, void 0, void 0, function () {
24003
+ var updatedBillingDetails;
24004
+ return __generator(this, function (_a) {
24005
+ switch (_a.label) {
24006
+ case 0: return [4 /*yield*/, billingDetailsUpdate({
24007
+ attributes: {
24008
+ name: changedFormData.name,
24009
+ billingStreet: changedFormData.billingStreet,
24010
+ billingCity: changedFormData.billingCity,
24011
+ billingZip: changedFormData.billingZip,
24012
+ billingState: changedFormData.billingState,
24013
+ billingCountry: changedFormData.billingCountry,
24014
+ billingContactEmail: changedFormData.billingContactEmail,
24015
+ taxNumber: changedFormData.taxNumber,
24016
+ },
24017
+ token: token,
24018
+ apiHost: apiHost,
24019
+ })];
24020
+ case 1:
24021
+ updatedBillingDetails = _a.sent();
24022
+ queryClient.setQueryData(common.QueryKeyFactory.default.billingDetailsKey({ token: token }), function (old) {
24023
+ return __assign(__assign({}, old), updatedBillingDetails.billingDetails);
24024
+ });
24025
+ return [2 /*return*/, updatedBillingDetails];
24026
+ }
24027
+ });
24028
+ }); },
24029
+ onSuccess: function () {
24030
+ showSuccessNotification('Your account details have been saved');
24031
+ queryClient.invalidateQueries({
24032
+ queryKey: common.QueryKeyFactory.default.taxationRequiredAccountFieldsKey({
24033
+ token: token,
24034
+ }),
24035
+ });
24036
+ },
24037
+ }), updateBillingDetails = _e.mutate, isUpdatingBillingDetails = _e.isPending;
24038
+ // Set form values when billing details are loaded
24039
+ react.useEffect(function () {
24040
+ var _a;
24041
+ if (billingDetails) {
24042
+ form.setFieldsValue({
24043
+ billingStreet: billingDetails.billingStreet,
24044
+ billingCity: billingDetails.billingCity,
24045
+ billingZip: billingDetails.billingZip,
24046
+ billingState: billingDetails.billingState,
24047
+ billingCountry: billingDetails.billingCountry,
24048
+ billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
24049
+ taxNumber: billingDetails.taxNumber,
24050
+ });
24051
+ }
24052
+ }, [billingDetails]);
24053
+ react.useEffect(function () {
24054
+ form
24055
+ .validateFields({ validateOnly: true })
24056
+ .then(function () { return setFormIsValid(true); })
24057
+ .catch(function () { return setFormIsValid(false); });
24058
+ var isFormEdited = function () {
24059
+ var _a;
24060
+ if (!billingDetails)
24061
+ return false;
24062
+ var currentValues = form.getFieldsValue();
24063
+ var accountValues = {
24064
+ billingStreet: billingDetails.billingStreet,
24065
+ billingCity: billingDetails.billingCity,
24066
+ billingZip: billingDetails.billingZip,
24067
+ billingState: billingDetails.billingState,
24068
+ billingCountry: billingDetails.billingCountry,
24069
+ billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
24070
+ taxNumber: billingDetails.taxNumber,
24071
+ };
24072
+ return Object.keys(currentValues).some(function (key) {
24073
+ var value = accountValues[key];
24074
+ return currentValues[key] !== value;
24075
+ });
24076
+ };
24077
+ setIsFormEdited(isFormEdited());
24078
+ }, [form, values, billingDetails]);
24079
+ // Validate form fields when isFormEdited changes
24080
+ react.useEffect(function () {
24081
+ var validateOnly = isFormEdited ? false : true;
24082
+ form.validateFields({ validateOnly: validateOnly });
24083
+ }, [isFormEdited]);
24084
+ var saveBillingDetails = function () { return __awaiter(_this, void 0, void 0, function () {
24085
+ var _this = this;
24086
+ return __generator(this, function (_a) {
24087
+ form.validateFields({ validateOnly: false }).then(function () { return __awaiter(_this, void 0, void 0, function () {
24088
+ var error_1;
24089
+ return __generator(this, function (_a) {
24090
+ switch (_a.label) {
24091
+ case 0:
24092
+ _a.trys.push([0, 2, 3, 4]);
24093
+ return [4 /*yield*/, form.validateFields()];
24094
+ case 1:
24095
+ _a.sent();
24096
+ updateBillingDetails(form.getFieldsValue());
24097
+ return [3 /*break*/, 4];
24098
+ case 2:
24099
+ error_1 = _a.sent();
24100
+ if (error_1 instanceof Error) {
24101
+ showErrorNotification('Failed to update account', error_1.message);
24102
+ }
24103
+ else {
24104
+ showErrorNotification('Please fill out all required fields');
24105
+ }
24106
+ return [3 /*break*/, 4];
24107
+ case 3:
24108
+ setIsFormEdited(false);
24109
+ return [7 /*endfinally*/];
24110
+ case 4: return [2 /*return*/];
24111
+ }
24112
+ });
24113
+ }); });
24114
+ return [2 /*return*/];
24115
+ });
24116
+ }); };
24117
+ var filteredCountryList = react.useMemo(function () {
24118
+ return countryListFilter ? common.Lists.COUNTRY_LIST.filter(countryListFilter) : common.Lists.COUNTRY_LIST;
24119
+ }, [countryListFilter]);
24120
+ return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? 'bunny-w-full' : 'bunny-w-1/2') }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-px-4" }, { children: [jsxRuntime.jsxs(antd.Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-mb-2" }, { children: jsxRuntime.jsx(Text, __assign({ className: "bunny-font-medium bunny-text-lg" }, { children: (billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.name) || 'No company name' })) })), jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [{ required: true, message: 'Street address is required' }] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: 'City is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: 'Zipcode is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "State", name: "billingState", rules: [
24121
+ {
24122
+ required: false,
24123
+ },
24124
+ ] }, { children: jsxRuntime.jsx(antd.Input, {}) })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Country", name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsxRuntime.jsx(antd.Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
24125
+ var _a, _b;
24126
+ return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
24127
+ ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
24128
+ } }) })) }))] })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
24129
+ {
24130
+ required: true,
24131
+ message: 'Email is required',
24132
+ type: 'email',
24133
+ },
24134
+ ] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }] }, { children: jsxRuntime.jsx(antd.Input, {}) }))] }))] })), jsxRuntime.jsx(antd.Button, __assign({ disabled: !isFormEdited || isUpdatingBillingDetails || !formIsValid, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails }, { children: "Save" }))] })) })));
24135
+ }
24136
+
24137
+ var BillingDetails = function (_a) {
24138
+ var _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? 'shadow-md' : _c, className = _a.className, _d = _a.hidePaymentMethodForm, hidePaymentMethodForm = _d === void 0 ? false : _d, _e = _a.hideBillingDetailsForm, hideBillingDetailsForm = _e === void 0 ? false : _e, countryListFilter = _a.countryListFilter;
24139
+ // Hooks
24140
+ var isMobile = common.useIsMobile();
24141
+ return (jsxRuntime.jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-py-2 bunny-my-2 ".concat(isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row', " bunny-gap-4") }, { children: [!hideBillingDetailsForm ? (jsxRuntime.jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsxRuntime.jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsxRuntime.jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm })) : null] })) })));
24142
+ };
24143
+ var WrapperComponent = function (_a) {
24144
+ var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;
24145
+ return (jsxRuntime.jsx("div", __assign({ className: "".concat(className) }, { children: isCardEnabled ? jsxRuntime.jsx(Card, __assign({ className: "".concat(shadow) }, { children: children })) : jsxRuntime.jsx("div", { children: children }) })));
24146
+ };
24147
+ var ResponsiveDivider = function () {
24148
+ var isMobile = common.useIsMobile();
24149
+ return isMobile ? (jsxRuntime.jsx("div", __assign({ className: "bunny-mx-4" }, { children: jsxRuntime.jsx(antd.Divider, {}) }))) : (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" }) }));
24150
+ };
24151
+ var PaymentFormSection = function (_a) {
24152
+ var hideBillingDetailsForm = _a.hideBillingDetailsForm;
24153
+ var isMobile = common.useIsMobile();
24154
+ var onTokenExpired = react.useContext(BunnyContext).onTokenExpired;
24155
+ var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
24156
+ var showSuccessNotification = common.useSuccessNotification();
24157
+ var entityId = useCurrentUserData().entityId;
24158
+ return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
24159
+ handleAllErrorFormats(error);
24160
+ }, onSavePaymentMethod: function () {
24161
+ showSuccessNotification('Your payment method has been saved');
24162
+ } }) })));
24163
+ };
24164
+
23819
24165
  exports.BillingDetails = BillingDetails;
23820
24166
  exports.BunnyProvider = BunnyProvider;
23821
24167
  exports.Footer = Footer;