@bunnyapp/components 1.5.0-beta.1 → 1.5.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/dist/cjs/index.js +1098 -1001
  2. package/dist/cjs/src/components/BunnyProvider.d.ts +0 -1
  3. package/dist/cjs/src/components/Checkout/Checkout.d.ts +12 -6
  4. package/dist/cjs/src/components/Invoice/Invoice.d.ts +1 -1
  5. package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +1 -2
  6. package/dist/cjs/src/components/PaymentForm/PaymentFormTypes.d.ts +1 -11
  7. package/dist/cjs/src/components/Quote/Quote.d.ts +1 -1
  8. package/dist/cjs/src/components/QuoteProvider.d.ts +22 -0
  9. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +2 -1
  10. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarInput.d.ts +3 -4
  11. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +5 -5
  12. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanAddonsCard.d.ts +1 -1
  13. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +2 -1
  14. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +2 -1
  15. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/planManagerUtils.d.ts +2 -2
  16. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +3 -2
  17. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +2 -1
  18. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +2 -1
  19. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelector.d.ts +2 -3
  20. package/dist/cjs/src/components/Subscriptions/QuantityDrawerContainer.d.ts +14 -0
  21. package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridRow.d.ts +4 -2
  22. package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuantityInput.d.ts +4 -2
  23. package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +3 -1
  24. package/dist/cjs/src/components/Subscriptions/subscriptionsList/ChangeQuantitiesButton.d.ts +2 -3
  25. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +2 -1
  26. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardHeader.d.ts +2 -3
  27. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts +2 -3
  28. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +2 -3
  29. package/dist/cjs/src/components/Transactions/Transactions.d.ts +2 -2
  30. package/dist/cjs/src/components/Transactions/transactionsList/TransactionsListDesktop.d.ts +1 -1
  31. package/dist/cjs/src/components/Transactions/transactionsList/TransactionsListMobile.d.ts +1 -1
  32. package/dist/cjs/src/components/Transactions/transactionsList/utils.d.ts +1 -1
  33. package/dist/cjs/src/{components/Invoice → contexts}/InvoiceQuoteContext.d.ts +2 -2
  34. package/dist/cjs/src/{components/Subscriptions → contexts}/SubscriptionsContext.d.ts +0 -4
  35. package/dist/{esm/src/components/Transactions → cjs/src/contexts}/TransactionsListContext.d.ts +2 -2
  36. package/dist/cjs/src/graphql/mutations/quoteChargeUpdate.d.ts +2 -1
  37. package/dist/cjs/src/graphql/queries/getAddonPlans.d.ts +7 -0
  38. package/dist/cjs/src/graphql/queries/getFormattedQuote.d.ts +2 -1
  39. package/dist/cjs/src/hooks/quotes/useQuoteCreate.d.ts +1 -4
  40. package/dist/cjs/src/hooks/quotes/useQuoteQuantities.d.ts +14 -0
  41. package/dist/cjs/src/hooks/useCurrentUserData.d.ts +11 -8
  42. package/dist/cjs/src/hooks/usePaymentMethod.d.ts +2 -1
  43. package/dist/cjs/src/hooks/usePriceListChangeOptions.d.ts +6 -0
  44. package/dist/cjs/src/utils/addonPlanUtils.d.ts +3 -1
  45. package/dist/cjs/src/utils/chargeUtils.d.ts +2 -0
  46. package/dist/cjs/src/utils/featureAddonUtils.d.ts +5 -2
  47. package/dist/esm/index.js +1100 -1003
  48. package/dist/esm/src/components/BunnyProvider.d.ts +0 -1
  49. package/dist/esm/src/components/Checkout/Checkout.d.ts +12 -6
  50. package/dist/esm/src/components/Invoice/Invoice.d.ts +1 -1
  51. package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +1 -2
  52. package/dist/esm/src/components/PaymentForm/PaymentFormTypes.d.ts +1 -11
  53. package/dist/esm/src/components/Quote/Quote.d.ts +1 -1
  54. package/dist/esm/src/components/QuoteProvider.d.ts +22 -0
  55. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +2 -1
  56. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarInput.d.ts +3 -4
  57. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +5 -5
  58. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanAddonsCard.d.ts +1 -1
  59. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +2 -1
  60. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +2 -1
  61. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/planManagerUtils.d.ts +2 -2
  62. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +3 -2
  63. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +2 -1
  64. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +2 -1
  65. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelector.d.ts +2 -3
  66. package/dist/esm/src/components/Subscriptions/QuantityDrawerContainer.d.ts +14 -0
  67. package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridRow.d.ts +4 -2
  68. package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuantityInput.d.ts +4 -2
  69. package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +3 -1
  70. package/dist/esm/src/components/Subscriptions/subscriptionsList/ChangeQuantitiesButton.d.ts +2 -3
  71. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +2 -1
  72. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardHeader.d.ts +2 -3
  73. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts +2 -3
  74. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +2 -3
  75. package/dist/esm/src/components/Transactions/Transactions.d.ts +2 -2
  76. package/dist/esm/src/components/Transactions/transactionsList/TransactionsListDesktop.d.ts +1 -1
  77. package/dist/esm/src/components/Transactions/transactionsList/TransactionsListMobile.d.ts +1 -1
  78. package/dist/esm/src/components/Transactions/transactionsList/utils.d.ts +1 -1
  79. package/dist/esm/src/{components/Invoice → contexts}/InvoiceQuoteContext.d.ts +2 -2
  80. package/dist/esm/src/{components/Subscriptions → contexts}/SubscriptionsContext.d.ts +0 -4
  81. package/dist/{cjs/src/components/Transactions → esm/src/contexts}/TransactionsListContext.d.ts +2 -2
  82. package/dist/esm/src/graphql/mutations/quoteChargeUpdate.d.ts +2 -1
  83. package/dist/esm/src/graphql/queries/getAddonPlans.d.ts +7 -0
  84. package/dist/esm/src/graphql/queries/getFormattedQuote.d.ts +2 -1
  85. package/dist/esm/src/hooks/quotes/useQuoteCreate.d.ts +1 -4
  86. package/dist/esm/src/hooks/quotes/useQuoteQuantities.d.ts +14 -0
  87. package/dist/esm/src/hooks/useCurrentUserData.d.ts +11 -8
  88. package/dist/esm/src/hooks/usePaymentMethod.d.ts +2 -1
  89. package/dist/esm/src/hooks/usePriceListChangeOptions.d.ts +6 -0
  90. package/dist/esm/src/utils/addonPlanUtils.d.ts +3 -1
  91. package/dist/esm/src/utils/chargeUtils.d.ts +2 -0
  92. package/dist/esm/src/utils/featureAddonUtils.d.ts +5 -2
  93. package/dist/index.d.ts +1 -2
  94. package/package.json +2 -2
  95. package/dist/cjs/src/components/PlanManagerQuoteProvider.d.ts +0 -19
  96. package/dist/cjs/src/components/QuotePreviewProvider.d.ts +0 -15
  97. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelectorContext.d.ts +0 -9
  98. package/dist/cjs/src/components/Subscriptions/QuotePreviewData.d.ts +0 -6
  99. package/dist/esm/src/components/PlanManagerQuoteProvider.d.ts +0 -19
  100. package/dist/esm/src/components/QuotePreviewProvider.d.ts +0 -15
  101. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelectorContext.d.ts +0 -9
  102. package/dist/esm/src/components/Subscriptions/QuotePreviewData.d.ts +0 -6
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-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";
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-transparent {\n background-color: transparent;\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-12 {\n padding-left: 3rem;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pr-4 {\n padding-right: 1rem;\n}\n.bunny-pt-1 {\n padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.hover\\:bunny-text-orange-400:hover {\n --tw-text-opacity: 1;\n color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n margin: 0 !important;\n}\n.bunny-components .ant-upload {\n border-radius: 0.5rem !important;\n}\n.bunny-components .ant-checkbox-inner {\n border-color: #cccccc;\n}\n.bunny-components .ant-row {\n margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n font-size: 0.875rem !important;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n border: none !important;\n}\n.bunny-components .ant-form-item {\n margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n text-transform: none !important;\n font-size: 0.75rem;\n padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n width: 100%;\n color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n font-size: 11px;\n min-height: 11px;\n line-height: 11px;\n padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n font-size: smaller;\n}\n.bunny-components .ant-tree {\n font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-page-header {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n}\n.bunny-components .ant-tag {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 14px;\n font-weight: 500;\n white-space: nowrap;\n padding-inline-start: 0.625rem;\n padding-inline-end: 0.625rem;\n margin: 0;\n}\n.bunny-components .ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n color: #6b7280 !important;\n background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.bunny-components .ant-picker {\n width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n background: #f8fafc;\n}\n.bunny-components .vista-link {\n color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n text-decoration: underline;\n cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n padding: 0;\n text-align: center;\n font-size: 0.875rem !important;\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n display: flex !important;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n background: #eef0f2 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n border: none;\n}\n.bunny-components .ant-btn {\n box-shadow: none;\n text-shadow: none;\n outline: none !important;\n line-height: 1;\n font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n color: #94a3b8;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n background-color: rgba(113, 125, 148, 0.1) !important;\n border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n display: flex !important;\n align-items: center;\n}\n.bunny-components .ant-select-item {\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n display: flex;\n align-items: center;\n white-space: nowrap !important;\n overflow: visible !important;\n text-overflow: default !important;\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n display: none;\n}\n.bunny-components .ant-layout-header {\n height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n width: inherit;\n position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n gap: 4px !important;\n}\n.bunny-components .group {\n display: flex;\n flex-direction: row;\n flex-flow: row wrap;\n box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n top: 96px !important;\n animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n color: #ffffff;\n background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n border-color: #ff5833 !important;\n background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n border-bottom: 2px solid transparent !important;\n padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n display: none !important;\n}\n.bunny-components .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n border-radius: 8px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n font-size: 14px !important;\n overflow-wrap: break-word;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff5833 !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
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.4.0';
157
+ var PACKAGE_VERSION = '1.5.0-beta.1';
158
158
  var createRequestHeaders = function (token) {
159
159
  var headers = common.createClientDevHeaders({ token: token });
160
160
  // Add the components version header
@@ -549,6 +549,46 @@ var checkout = function (_a) {
549
549
  });
550
550
  };
551
551
 
552
+ var CURRENT_USER_DATA_QUERY = "{\n company {\n name\n }\n currentUser {\n account {\n billingCountry\n currencyId\n }\n authObjectName\n payload {\n returnUrl\n }\n privacyUrl\n termsUrl\n entityId\n }\n }";
553
+ var getCurrentUserData = function (_a) {
554
+ var token = _a.token, apiHost = _a.apiHost;
555
+ return __awaiter(void 0, void 0, void 0, function () {
556
+ var response;
557
+ var _b, _c, _d, _e, _f, _g, _h, _j;
558
+ return __generator(this, function (_k) {
559
+ switch (_k.label) {
560
+ case 0: return [4 /*yield*/, common.gqlRequest({
561
+ query: CURRENT_USER_DATA_QUERY,
562
+ token: token,
563
+ apiHost: apiHost,
564
+ })];
565
+ case 1:
566
+ response = _k.sent();
567
+ return [2 /*return*/, {
568
+ authObjectName: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.authObjectName,
569
+ account: (_c = response === null || response === void 0 ? void 0 : response.currentUser) === null || _c === void 0 ? void 0 : _c.account,
570
+ companyName: (_d = response === null || response === void 0 ? void 0 : response.company) === null || _d === void 0 ? void 0 : _d.name,
571
+ returnUrl: (_f = (_e = response === null || response === void 0 ? void 0 : response.currentUser) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.returnUrl,
572
+ privacyUrl: (_g = response === null || response === void 0 ? void 0 : response.currentUser) === null || _g === void 0 ? void 0 : _g.privacyUrl,
573
+ termsUrl: (_h = response === null || response === void 0 ? void 0 : response.currentUser) === null || _h === void 0 ? void 0 : _h.termsUrl,
574
+ entityId: (_j = response === null || response === void 0 ? void 0 : response.currentUser) === null || _j === void 0 ? void 0 : _j.entityId,
575
+ }];
576
+ }
577
+ });
578
+ });
579
+ };
580
+
581
+ var useCurrentUserData = function (token) {
582
+ var apiHost = react.useContext(BunnyContext).apiHost;
583
+ var _a = reactQuery.useQuery({
584
+ queryKey: common.QueryKeyFactory.default.currentUserKey(token),
585
+ queryFn: function () { return getCurrentUserData({ token: token, apiHost: apiHost }); },
586
+ enabled: Boolean(token),
587
+ }), currentUserData = _a.data, isCurrentUserDataLoading = _a.isLoading;
588
+ var currentUser = currentUserData || {};
589
+ return { currentUser: currentUser, isCurrentUserDataLoading: isCurrentUserDataLoading };
590
+ };
591
+
552
592
  var paymentMethodsQuery = function () { return "query PaymentMethods($accountId: ID) {\n paymentMethods (accountId: $accountId) {\n nodes {\n id\n pluginId\n accountId\n expirationDate\n plugin {\n guid\n id\n }\n state\n metadata {\n issuer\n identifier\n kind\n description\n icon\n type\n }\n isDefault\n }\n }\n}"; };
553
593
  var getPaymentMethods = function (_a) {
554
594
  var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
@@ -572,15 +612,16 @@ var getPaymentMethods = function (_a) {
572
612
  });
573
613
  };
574
614
  var usePaymentMethod = function (_a) {
575
- var accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost;
576
- var _b = reactQuery.useQuery({
577
- queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
615
+ var accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
616
+ var _c = reactQuery.useQuery({
617
+ queryKey: common.QueryKeyFactory.default.accountPaymentMethodsKey({
578
618
  accountId: accountId,
579
619
  token: token,
580
620
  }),
581
621
  queryFn: function () { return getPaymentMethods({ apiHost: apiHost, token: token, accountId: accountId }); },
582
- staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
583
- }), data = _b.data, isLoading = _b.isLoading;
622
+ staleTime: 5 * 60 * 1000,
623
+ enabled: enabled,
624
+ }), data = _c.data, isLoading = _c.isLoading;
584
625
  return {
585
626
  paymentMethods: data,
586
627
  defaultPaymentMethod: data === null || data === void 0 ? void 0 : data.find(function (paymentMethod) { return paymentMethod.isDefault; }),
@@ -931,7 +972,7 @@ function usePay(_a) {
931
972
  }
932
973
 
933
974
  var handleAllErrorFormats = common.useAllErrorFormats();
934
- var showErrorNotification$3 = common.useErrorNotification();
975
+ var showErrorNotification$5 = common.useErrorNotification();
935
976
  var ActualCheckoutFooter = function (_a) {
936
977
  var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
937
978
  var isMobile = common.useIsMobile();
@@ -1020,7 +1061,7 @@ var ActualCheckoutFooter = function (_a) {
1020
1061
  _f.sent();
1021
1062
  return [3 /*break*/, 6];
1022
1063
  case 5:
1023
- showErrorNotification$3("Payment holds are not supported by ".concat((_e = (_d = plugin.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name));
1064
+ showErrorNotification$5("Payment holds are not supported by ".concat((_e = (_d = plugin.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name));
1024
1065
  return [3 /*break*/, 6];
1025
1066
  case 6: return [2 /*return*/];
1026
1067
  }
@@ -18515,7 +18556,7 @@ var useAutoSetDefaultPaymentMethod = function (_a) {
18515
18556
  }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod;
18516
18557
  // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
18517
18558
  function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
18518
- var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
18559
+ var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodsKey({
18519
18560
  accountId: accountId,
18520
18561
  token: token,
18521
18562
  }));
@@ -18524,7 +18565,7 @@ var useAutoSetDefaultPaymentMethod = function (_a) {
18524
18565
  var paymentMethod = _a[_i];
18525
18566
  paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
18526
18567
  }
18527
- queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
18568
+ queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodsKey({
18528
18569
  accountId: accountId,
18529
18570
  token: token,
18530
18571
  }), cachedPaymentMethods);
@@ -19011,9 +19052,8 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRem
19011
19052
  })
19012
19053
  .then(function () {
19013
19054
  showSuccessNotification('Payment method was removed', 'Success');
19014
- // TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
19015
19055
  queryClient.invalidateQueries({
19016
- queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
19056
+ queryKey: common.QueryKeyFactory.default.accountPaymentMethodsKey({
19017
19057
  token: token,
19018
19058
  accountId: accountId,
19019
19059
  }),
@@ -19064,9 +19104,8 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
19064
19104
  .then(function () {
19065
19105
  showSuccessNotification("Payment method ".concat(data.metadata.identifier, " was set as default"), 'Success');
19066
19106
  onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
19067
- // TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
19068
19107
  queryClient.invalidateQueries({
19069
- queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
19108
+ queryKey: common.QueryKeyFactory.default.accountPaymentMethodsKey({
19070
19109
  token: token,
19071
19110
  accountId: accountId,
19072
19111
  }),
@@ -19093,22 +19132,21 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
19093
19132
  return { setDefaultPaymentMethod: setDefaultPaymentMethod, loading: loading };
19094
19133
  }
19095
19134
 
19096
- var showErrorNotification$2 = common.useErrorNotification();
19135
+ var showErrorNotification$4 = common.useErrorNotification();
19097
19136
  var PaymentForm = function (_a) {
19098
- var _b;
19099
- var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, paymentHoldOptions = _a.paymentHoldOptions;
19137
+ var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, paymentHoldOptions = _a.paymentHoldOptions;
19100
19138
  // Local state
19101
- var _c = react.useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
19139
+ var _b = react.useState(false), showPaymentMethodForm = _b[0], setShowPaymentMethodForm = _b[1];
19102
19140
  // Simple hooks
19103
19141
  var queryClient = reactQuery.useQueryClient();
19104
19142
  var apiHost = react.useContext(BunnyContext).apiHost;
19105
19143
  var tokenFromContexts = useToken();
19106
19144
  var token = overrideToken || tokenFromContexts;
19107
- var _d = usePaymentMethod({
19145
+ var _c = usePaymentMethod({
19108
19146
  accountId: accountId,
19109
19147
  token: token,
19110
19148
  apiHost: apiHost,
19111
- }), storedPaymentMethods = _d.paymentMethods, defaultPaymentMethod = _d.defaultPaymentMethod, isPaymentMethodLoading = _d.isLoading;
19149
+ }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod, isPaymentMethodLoading = _c.isLoading;
19112
19150
  // Complex hooks
19113
19151
  var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, token: token, accountId: accountId }).paymentPlugins;
19114
19152
  var selectedPaymentMethodPlugin = react.useMemo(function () {
@@ -19118,13 +19156,14 @@ var PaymentForm = function (_a) {
19118
19156
  // Derived state
19119
19157
  var defaultPaymentMethodPlugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
19120
19158
  var paying = Boolean(quote || invoice);
19121
- var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) ||
19122
- (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
19123
- currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
19159
+ var _d = usePaymentFormCurrencyId({
19160
+ quote: quote,
19161
+ invoice: invoice,
19162
+ }), currencyId = _d.currencyId, isCurrencyIdLoading = _d.isCurrencyIdLoading;
19124
19163
  var paymentRequired = quote ? getQuoteAmountDue(quote) > 0 : true;
19125
19164
  // Custom hooks
19126
19165
  var _e = useSetDefaultPaymentMethod(paymentPlugins || [], apiHost, token, accountId, function (message) {
19127
- showErrorNotification$2(message, 'Error setting default payment method');
19166
+ showErrorNotification$4(message, 'Error setting default payment method');
19128
19167
  }, function () {
19129
19168
  onSetDefaultPaymentMethod === null || onSetDefaultPaymentMethod === void 0 ? void 0 : onSetDefaultPaymentMethod();
19130
19169
  }), handleSetDefault = _e.setDefaultPaymentMethod, setDefaultPaymentMethodLoading = _e.loading;
@@ -19161,7 +19200,7 @@ var PaymentForm = function (_a) {
19161
19200
  onError: onFail,
19162
19201
  }), checkoutNoPayment = _g.mutate, isCheckingOutNoPayment = _g.isPending;
19163
19202
  var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], apiHost, token, accountId, onRemovePaymentMethod, function (message) {
19164
- showErrorNotification$2(message, 'Error removing payment method');
19203
+ showErrorNotification$4(message, 'Error removing payment method');
19165
19204
  });
19166
19205
  var handlePaymentSuccess = function () {
19167
19206
  // Hide payment method selector and form
@@ -19170,7 +19209,7 @@ var PaymentForm = function (_a) {
19170
19209
  };
19171
19210
  var handleSavePaymentMethod = function (response) {
19172
19211
  queryClient.invalidateQueries({
19173
- queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
19212
+ queryKey: common.QueryKeyFactory.default.accountPaymentMethodsKey({
19174
19213
  accountId: accountId,
19175
19214
  token: token,
19176
19215
  }),
@@ -19180,7 +19219,7 @@ var PaymentForm = function (_a) {
19180
19219
  };
19181
19220
  function handleClickAddPaymentMethod() {
19182
19221
  if ((paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) === 0) {
19183
- showErrorNotification$2('No payment plugins available', 'Error adding payment method');
19222
+ showErrorNotification$4('No payment plugins available', 'Error adding payment method');
19184
19223
  }
19185
19224
  else {
19186
19225
  setShowPaymentMethodForm(true);
@@ -19192,9 +19231,14 @@ var PaymentForm = function (_a) {
19192
19231
  setShowPaymentMethodForm(true);
19193
19232
  }
19194
19233
  }, [storedPaymentMethods]);
19195
- if (isPaymentMethodLoading) {
19234
+ if (isPaymentMethodLoading || isCurrencyIdLoading) {
19196
19235
  return jsxRuntime.jsx(antd.Skeleton, { active: true, className: "bunny-p-4" });
19197
19236
  }
19237
+ // Return early because it is a bug if PaymentForm is rendered without a currency ID.
19238
+ // For example, sepa / iDeal may not show for dutch customer if no currencyId
19239
+ if (!currencyId) {
19240
+ return jsxRuntime.jsx("div", { children: "PaymentForm error: No currency ID found from Quote or Invoice or props." });
19241
+ }
19198
19242
  return (jsxRuntime.jsx(PaymentContext.Provider, __assign({ value: {
19199
19243
  onClickCancel: function () { return setShowPaymentMethodForm(false); },
19200
19244
  accountId: accountId,
@@ -19216,6 +19260,15 @@ function StripeWrapper(_a) {
19216
19260
  var _b = useStripePlugin(plugin, apiHost, currencyId || 'usd', token, accountId), stripe = _b.stripe, options = _b.options;
19217
19261
  return (jsxRuntime.jsx(reactStripeJs.Elements, __assign({ options: options, stripe: stripe }, { children: children })));
19218
19262
  }
19263
+ function usePaymentFormCurrencyId(_a) {
19264
+ var quote = _a.quote, invoice = _a.invoice;
19265
+ var token = useToken();
19266
+ var _b = useCurrentUserData(token), currentUser = _b.currentUser, isCurrentUserDataLoading = _b.isCurrentUserDataLoading;
19267
+ var account = currentUser === null || currentUser === void 0 ? void 0 : currentUser.account;
19268
+ var accountCurrencyId = account === null || account === void 0 ? void 0 : account.currencyId;
19269
+ var currencyId = react.useMemo(function () { var _a; return (_a = (accountCurrencyId || (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId))) === null || _a === void 0 ? void 0 : _a.toLowerCase(); }, [accountCurrencyId, quote === null || quote === void 0 ? void 0 : quote.currencyId, invoice === null || invoice === void 0 ? void 0 : invoice.currencyId]);
19270
+ return { currencyId: currencyId, isCurrencyIdLoading: isCurrentUserDataLoading };
19271
+ }
19219
19272
 
19220
19273
  function Invoice(_a) {
19221
19274
  var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, _d = _a.hidePaymentForm, hidePaymentForm = _d === void 0 ? false : _d, onInvoiceLoaded = _a.onInvoiceLoaded;
@@ -19280,7 +19333,7 @@ function ActualInvoice(_a) {
19280
19333
 
19281
19334
  var MUTATION$8 = function () { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n quote {\n documentTemplateId\n documents { id filename size date url }\n firstInvoice {\n id\n state\n }\n payableId\n id\n payToAccept\n currentPaymentHold {\n createdAt\n expiresAt\n id\n updatedAt\n paymentMethod {\n accountId\n createdAt\n expirationDate\n failureCode\n id\n isDefault\n lastSuccess\n paymentType\n pluginId\n state\n updatedAt\n metadata {\n description\n expiration\n icon\n identifier\n issuer\n kind\n }\n }\n }\n }\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"; };
19282
19335
  var getFormattedQuote = function (_a) {
19283
- var token = _a.token, apiHost = _a.apiHost;
19336
+ var token = _a.token, apiHost = _a.apiHost, id = _a.id;
19284
19337
  return __awaiter(void 0, void 0, void 0, function () {
19285
19338
  var response;
19286
19339
  return __generator(this, function (_b) {
@@ -19289,6 +19342,7 @@ var getFormattedQuote = function (_a) {
19289
19342
  query: MUTATION$8(),
19290
19343
  token: token,
19291
19344
  apiHost: apiHost,
19345
+ vars: { id: id },
19292
19346
  })];
19293
19347
  case 1:
19294
19348
  response = _b.sent();
@@ -19388,7 +19442,6 @@ var quoteAccept = function (_a) {
19388
19442
  });
19389
19443
  });
19390
19444
  };
19391
- // export default quoteAccept;
19392
19445
  var useSendAcceptQuote = function (_a) {
19393
19446
  var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
19394
19447
  // Hooks
@@ -19606,7 +19659,7 @@ var PaymentHoldModal = function (_a) {
19606
19659
  showSuccessNotification$2("Approved payment hold for ".concat(common.formatCurrency(quote.amount, quote.currency)));
19607
19660
  queryClient.invalidateQueries({
19608
19661
  queryKey: common.QueryKeyFactory.default.createQuoteKey({
19609
- id: quote.id,
19662
+ id: quote.quote.id,
19610
19663
  token: token,
19611
19664
  }),
19612
19665
  });
@@ -19628,7 +19681,6 @@ function Quote(_a) {
19628
19681
  onQuoteLoaded: onQuoteLoaded,
19629
19682
  } }, { children: jsxRuntime.jsx(ActualQuote, {}) })));
19630
19683
  }
19631
- // TODO: dissolve this hook
19632
19684
  var useQuotePaymentHold = function (formattedQuote) {
19633
19685
  var _a, _b;
19634
19686
  var _c = react.useState(false), paymentHoldModalVisible = _c[0], setPaymentHoldModalVisible = _c[1];
@@ -19655,7 +19707,7 @@ function ActualQuote() {
19655
19707
  queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
19656
19708
  return __generator(this, function (_a) {
19657
19709
  switch (_a.label) {
19658
- case 0: return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost })];
19710
+ case 0: return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost, id: id })];
19659
19711
  case 1: return [2 /*return*/, _a.sent()];
19660
19712
  }
19661
19713
  });
@@ -19699,7 +19751,6 @@ function ActualQuote() {
19699
19751
  return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
19700
19752
  }) }))) : 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 })] }));
19701
19753
  }
19702
- // TODO: clean up the logic here. Its quite confusing
19703
19754
  function QuoteButtons(_a) {
19704
19755
  var isAccepted = _a.isAccepted, formattedQuote = _a.formattedQuote, isMobile = _a.isMobile, hideDownloadButton = _a.hideDownloadButton, id = _a.id, isAccepting = _a.isAccepting, handleClickAccept = _a.handleClickAccept, setPaymentHoldModalVisible = _a.setPaymentHoldModalVisible, shouldDoPaymentHold = _a.shouldDoPaymentHold, paymentHoldCompleted = _a.paymentHoldCompleted, paymentHold = _a.paymentHold;
19705
19756
  var apiHost = react.useContext(BunnyContext).apiHost;
@@ -19979,14 +20030,14 @@ function Transactions(_a) {
19979
20030
  var token = useToken();
19980
20031
  // Local state
19981
20032
  var _o = react.useState(''), search = _o[0], setSearch = _o[1];
19982
- var filterValue = filter || (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : '');
20033
+ var filterValue = filter || (search.length > 0 ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : '');
19983
20034
  // Queries
19984
20035
  var data = reactQuery.useQuery({
19985
20036
  queryKey: ['transactions', token, filterValue],
19986
20037
  queryFn: function () { return getTransactions(filterValue, apiHost, token); },
19987
20038
  placeholderData: reactQuery.keepPreviousData,
19988
20039
  }).data;
19989
- return (jsxRuntime.jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsxRuntime.jsx(TransactionsDisplay, { transactions: data || [], onSearchValueChanged: setSearch, search: search }) })));
20040
+ return (jsxRuntime.jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsxRuntime.jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }) })));
19990
20041
  }
19991
20042
  function TransactionsDisplay(_a) {
19992
20043
  var _b, _c;
@@ -20061,7 +20112,7 @@ function TransactionsDisplay(_a) {
20061
20112
  return;
20062
20113
  }
20063
20114
  onSearchValueChanged(e.target.value);
20064
- }, prefix: !search && jsxRuntime.jsx(icons.SearchOutlined, {}), placeholder: "Search by id #", style: {
20115
+ }, prefix: jsxRuntime.jsx(icons.SearchOutlined, {}), placeholder: "Search by id #", style: {
20065
20116
  minWidth: '300px',
20066
20117
  }, value: search }) })))] }))) : null, jsxRuntime.jsx("div", __assign({ className: "bunny-grid bunny-w-full bunny-rounded-md bunny-overflow-auto ".concat(shadow), style: {
20067
20118
  gridTemplateColumns: gridTemplateColumns(),
@@ -20382,7 +20433,7 @@ var getCoupons = function (_a) {
20382
20433
  });
20383
20434
  };
20384
20435
 
20385
- var showErrorNotification$1 = common.useErrorNotification();
20436
+ var showErrorNotification$3 = common.useErrorNotification();
20386
20437
  var useUpdateCoupons = function (_a) {
20387
20438
  var apiHost = _a.apiHost, token = _a.token, quoteChangeId = _a.quoteChangeId, onCouponAdded = _a.onCouponAdded, onCouponRemoved = _a.onCouponRemoved;
20388
20439
  var coupons = reactQuery.useQuery({
@@ -20409,7 +20460,7 @@ var useUpdateCoupons = function (_a) {
20409
20460
  },
20410
20461
  onError: function (error) {
20411
20462
  var _a, _b;
20412
- showErrorNotification$1((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
20463
+ showErrorNotification$3((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
20413
20464
  },
20414
20465
  }), addCoupon = _b.mutate, isAddingCoupon = _b.isPending;
20415
20466
  var _c = reactQuery.useMutation({
@@ -20429,7 +20480,7 @@ var useUpdateCoupons = function (_a) {
20429
20480
  },
20430
20481
  onError: function (error) {
20431
20482
  var _a, _b;
20432
- showErrorNotification$1((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error removing coupon');
20483
+ showErrorNotification$3((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error removing coupon');
20433
20484
  },
20434
20485
  }), removeCoupon = _c.mutate, isRemovingCoupon = _c.isPending;
20435
20486
  return {
@@ -20441,45 +20492,6 @@ var useUpdateCoupons = function (_a) {
20441
20492
  };
20442
20493
  };
20443
20494
 
20444
- var CURRENT_USER_DATA_QUERY = "{\n company {\n name\n }\n currentUser {\n account {\n billingCountry\n currencyId\n }\n authObjectName\n payload {\n returnUrl\n }\n privacyUrl\n termsUrl\n entityId\n }\n }";
20445
- var getCurrentUserData = function (_a) {
20446
- var token = _a.token, apiHost = _a.apiHost;
20447
- return __awaiter(void 0, void 0, void 0, function () {
20448
- var response;
20449
- var _b, _c, _d, _e, _f, _g, _h, _j;
20450
- return __generator(this, function (_k) {
20451
- switch (_k.label) {
20452
- case 0: return [4 /*yield*/, common.gqlRequest({
20453
- query: CURRENT_USER_DATA_QUERY,
20454
- token: token,
20455
- apiHost: apiHost,
20456
- })];
20457
- case 1:
20458
- response = _k.sent();
20459
- return [2 /*return*/, {
20460
- authObjectName: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.authObjectName,
20461
- account: (_c = response === null || response === void 0 ? void 0 : response.currentUser) === null || _c === void 0 ? void 0 : _c.account,
20462
- companyName: (_d = response === null || response === void 0 ? void 0 : response.company) === null || _d === void 0 ? void 0 : _d.name,
20463
- returnUrl: (_f = (_e = response === null || response === void 0 ? void 0 : response.currentUser) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.returnUrl,
20464
- privacyUrl: (_g = response === null || response === void 0 ? void 0 : response.currentUser) === null || _g === void 0 ? void 0 : _g.privacyUrl,
20465
- termsUrl: (_h = response === null || response === void 0 ? void 0 : response.currentUser) === null || _h === void 0 ? void 0 : _h.termsUrl,
20466
- entityId: (_j = response === null || response === void 0 ? void 0 : response.currentUser) === null || _j === void 0 ? void 0 : _j.entityId,
20467
- }];
20468
- }
20469
- });
20470
- });
20471
- };
20472
-
20473
- var useCurrentUserData = function (token) {
20474
- var apiHost = react.useContext(BunnyContext).apiHost;
20475
- var currentUserData = reactQuery.useQuery({
20476
- queryKey: common.QueryKeyFactory.default.currentUserKey(token),
20477
- queryFn: function () { return getCurrentUserData({ token: token, apiHost: apiHost }); },
20478
- enabled: Boolean(token),
20479
- }).data;
20480
- return currentUserData || {};
20481
- };
20482
-
20483
20495
  var BunnyFooterIcon = function (_a) {
20484
20496
  var color = _a.color;
20485
20497
  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" }) })) })] })));
@@ -20489,7 +20501,8 @@ var Text$h = antd.Typography.Text;
20489
20501
  var Footer = function (_a) {
20490
20502
  var className = _a.className;
20491
20503
  var token = useToken();
20492
- var _b = useCurrentUserData(token), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
20504
+ var currentUser = useCurrentUserData(token).currentUser;
20505
+ var privacyUrl = currentUser.privacyUrl, termsUrl = currentUser.termsUrl;
20493
20506
  var isMobile = common.useIsMobile();
20494
20507
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ".concat(isMobile ? 'bunny-flex-col bunny-gap-2' : '', " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
20495
20508
  };
@@ -20502,22 +20515,6 @@ var StyedLink = styled__default["default"].a(templateObject_1$5 || (templateObje
20502
20515
  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);
20503
20516
  var templateObject_1$5, templateObject_2$1;
20504
20517
 
20505
- function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
20506
- var _a;
20507
- var upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
20508
- function upgradingFromFree() {
20509
- var totalPrice = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges.reduce(function (acc, charge) { return acc + Number((charge === null || charge === void 0 ? void 0 : charge.discountedPrice) || 0); }, 0);
20510
- return totalPrice === 0;
20511
- }
20512
- if (quote.kind === common.QuoteChangeKind.SUBSCRIBE) {
20513
- return activeCouponsExist;
20514
- }
20515
- else if (quote.kind === common.QuoteChangeKind.ADJUSTMENT) {
20516
- return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
20517
- }
20518
- return false;
20519
- }
20520
-
20521
20518
  function CouponEditor(_a) {
20522
20519
  var className = _a.className, onAddCoupon = _a.onAddCoupon, isAddingCoupon = _a.isAddingCoupon, couponCode = _a.couponCode, setCouponCode = _a.setCouponCode;
20523
20520
  function handleAddCoupon() {
@@ -20531,17 +20528,14 @@ function CouponEditor(_a) {
20531
20528
  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" }))] })) })));
20532
20529
  }
20533
20530
 
20534
- var SubscriptionsContext = react.createContext({});
20535
-
20536
20531
  var Text$g = antd.Typography.Text;
20537
20532
  function CheckoutSummary(_a) {
20538
20533
  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;
20539
- var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
20540
20534
  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) {
20541
20535
  return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
20542
20536
  var _a;
20543
20537
  var multiplier = charge.kind === 'COUPON' ? -1 : 1;
20544
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-grid-cols-3 bunny-gap-4 bunny-items-center" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1" }, { children: charge.name })), jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-center" }, { children: ((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode) ? (jsxRuntime.jsx("div", __assign({ onClick: function () {
20538
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-grid-cols-3 bunny-gap-4 bunny-items-center" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1" }, { children: charge.name })), jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-center" }, { children: ((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode) ? (jsxRuntime.jsx("button", __assign({ onClick: function () {
20545
20539
  var _a, _b;
20546
20540
  if (isRemovingCoupon) {
20547
20541
  return;
@@ -20550,10 +20544,9 @@ function CheckoutSummary(_a) {
20550
20544
  throw new Error('Coupon code not found');
20551
20545
  }
20552
20546
  onRemoveCoupon((_b = charge.coupon) === null || _b === void 0 ? void 0 : _b.couponCode);
20553
- }, className: "bunny-text-orange-500 hover:bunny-text-orange-400 bunny-cursor-pointer" }, { children: "Remove" }))) : (jsxRuntime.jsx("div", { children: charge.quantity })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-right" }, { children: common.formatCurrency(multiplier * (charge.subtotal || 0), charge.currencyId) }))] }), charge.id));
20547
+ }, className: "bunny-text-orange-500 hover:bunny-text-orange-400 bunny-cursor-pointer bunny-bg-transparent bunny-border-none" }, { children: "Remove" }))) : (jsxRuntime.jsx("div", { children: charge.quantity })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-right" }, { children: common.formatCurrency(multiplier * (charge.subtotal || 0), charge.currencyId) }))] }), charge.id));
20554
20548
  });
20555
- }) })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Subtotal" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.subtotal, quote.currencyId) })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Taxes" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Total" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.amountDue, quote.currencyId) })] }))] }), upgradingSubscription &&
20556
- shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsxRuntime.jsx(CouponEditor, { className: "bunny-w-full", quote: quote, onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] })));
20549
+ }) })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Subtotal" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.subtotal, quote.currencyId) })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Taxes" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Total" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.amountDue, quote.currencyId) })] }))] }), activeCouponsExist && (jsxRuntime.jsx(CouponEditor, { className: "bunny-w-full", quote: quote, onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] })));
20557
20550
  }
20558
20551
  var CheckoutSummaryDivider = function () {
20559
20552
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-my-2" }, { children: jsxRuntime.jsx(antd.Divider, { className: "m-0" }) })));
@@ -20592,7 +20585,7 @@ function InitialSignupForm(_a) {
20592
20585
  return (jsxRuntime.jsx(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-h-full bunny-w-full ".concat(className), form: form, layout: "vertical", autoComplete: "off" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: 'First name is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: 'Last name is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name" }) }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ name: "email", rules: [
20593
20586
  { required: true, message: 'Email is required' },
20594
20587
  { type: 'email', message: 'Please enter a valid email' },
20595
- ], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Company name is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: jsxRuntime.jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsxRuntime.jsx(antd.Select, { className: "bunny-w-full", options: common.Lists.COUNTRY_LIST, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
20588
+ ], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Company name is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: jsxRuntime.jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsxRuntime.jsx(antd.Select, { options: common.Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
20596
20589
  var _a, _b;
20597
20590
  return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
20598
20591
  ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
@@ -20613,7 +20606,7 @@ function PriceListDisplay(_a) {
20613
20606
  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] })));
20614
20607
  }
20615
20608
 
20616
- var showErrorNotification = common.useErrorNotification();
20609
+ var showErrorNotification$2 = common.useErrorNotification();
20617
20610
  var showSuccessNotification$1 = common.useSuccessNotification();
20618
20611
  function Signup(_a) {
20619
20612
  var _b, _c, _d;
@@ -20623,6 +20616,14 @@ function Signup(_a) {
20623
20616
  var tokenFromContexts = useToken();
20624
20617
  var isMobile = common.useIsMobile();
20625
20618
  var topNavImageUrl = react.useContext(BrandContext).topNavImageUrl;
20619
+ var defaultValues = react.useMemo(function () { return ({
20620
+ firstName: defaultFirstName,
20621
+ lastName: defaultLastName,
20622
+ email: defaultEmail,
20623
+ accountName: defaultCompanyName,
20624
+ billingCountry: defaultBillingCountry,
20625
+ }); }, [defaultFirstName, defaultLastName, defaultEmail, defaultCompanyName, defaultBillingCountry]);
20626
+ var queryClient = reactQuery.useQueryClient();
20626
20627
  var _f = react.useState(undefined), initialQuote = _f[0], setInitialQuote = _f[1];
20627
20628
  var _g = react.useState(undefined), accountId = _g[0], setAccountId = _g[1];
20628
20629
  var _h = react.useState(undefined), portalSessionToken = _h[0], setPortalSessionToken = _h[1];
@@ -20634,8 +20635,8 @@ function Signup(_a) {
20634
20635
  accountId: accountId,
20635
20636
  token: token,
20636
20637
  apiHost: apiHost,
20638
+ enabled: Boolean(accountId),
20637
20639
  }).defaultPaymentMethod;
20638
- var queryClient = reactQuery.useQueryClient();
20639
20640
  var recalculateTaxes = reactQuery.useMutation({
20640
20641
  mutationFn: function () {
20641
20642
  if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
@@ -20645,7 +20646,7 @@ function Signup(_a) {
20645
20646
  },
20646
20647
  onError: function (error) {
20647
20648
  if (!error[0].message.includes('Ensure that you have a taxation plugin')) {
20648
- showErrorNotification(error.message);
20649
+ showErrorNotification$2(error.message);
20649
20650
  }
20650
20651
  },
20651
20652
  onSuccess: function (quote) {
@@ -20681,10 +20682,10 @@ function Signup(_a) {
20681
20682
  onSuccess: function (data) {
20682
20683
  setAccountId(data.account.id);
20683
20684
  setPortalSessionToken(data.portalSessionToken);
20684
- // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
20685
+ // We must invalidate the accountPaymentMethodsKey query in order to clear payment methods from the provided api token,
20685
20686
  // to instead use paymentMethods from portalSessionToken.
20686
20687
  queryClient.invalidateQueries({
20687
- queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
20688
+ queryKey: common.QueryKeyFactory.default.accountPaymentMethodsKey({
20688
20689
  accountId: accountId,
20689
20690
  token: token,
20690
20691
  }),
@@ -20694,10 +20695,10 @@ function Signup(_a) {
20694
20695
  onError: function (error) {
20695
20696
  var errorMessage = error.response.errors[0].message;
20696
20697
  if (errorMessage.includes("Address couldn't be validated")) {
20697
- showErrorNotification('Please enter a valid billing address');
20698
+ showErrorNotification$2('Please enter a valid billing address');
20698
20699
  }
20699
20700
  else {
20700
- showErrorNotification(errorMessage);
20701
+ showErrorNotification$2(errorMessage);
20701
20702
  }
20702
20703
  },
20703
20704
  }), quoteAccountSignupMutate = _l.mutate, isSigningUp = _l.isPending;
@@ -20794,7 +20795,7 @@ function Signup(_a) {
20794
20795
  }
20795
20796
  function handlePaymentFail(error) {
20796
20797
  var _a;
20797
- showErrorNotification((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.message);
20798
+ showErrorNotification$2((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.message);
20798
20799
  }
20799
20800
  react.useEffect(function () {
20800
20801
  if (initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id) {
@@ -20806,15 +20807,34 @@ function Signup(_a) {
20806
20807
  }
20807
20808
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col' : 'bunny-flex-row', " bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ").concat(shadow, " ").concat(className), style: style }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full', " bunny-justify-center") }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24" }, { children: [jsxRuntime.jsx("div", { children: topNavImageUrl.length > 0 && (jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false })) }), data ? (jsxRuntime.jsx(CheckoutSummary, { quote: data, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, onRemoveCoupon: removeCoupon, isRemovingCoupon: isRemovingCoupon, priceListData: priceListData, isAddingCoupon: isAddingCoupon, couponCode: couponEditorCouponCode, setCouponCode: setCouponEditorCouponCode, activeCouponsExist: activeCouponsExist })) : (jsxRuntime.jsx("div", __assign({ className: "bunny-h-full" }, { children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true })) : (jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData })) }))), jsxRuntime.jsx(Footer, {})] })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full', " bunny-items-center"), style: {
20808
20809
  boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
20809
- } }, { children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true, className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" })) : (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: {
20810
- firstName: defaultFirstName,
20811
- lastName: defaultLastName,
20812
- email: defaultEmail,
20813
- accountName: defaultCompanyName,
20814
- billingCountry: defaultBillingCountry,
20815
- } }) }))) }))] })));
20810
+ } }, { children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true, className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" })) : (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: defaultValues }) }))) }))] })));
20816
20811
  }
20817
20812
 
20813
+ var SubscriptionsContext = react.createContext({});
20814
+
20815
+ var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n addonSubscriptions {\n id\n plan { id }\n }\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList {\n id\n periodMonths\n name\n plan {\n id\n addon\n addonPlans { id }\n }\n }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n account { id }\n daysLeftInTrial\n trialExpirationAction\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n featureAddon\n id\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
20816
+ var getSubscriptions = function (_a) {
20817
+ var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
20818
+ return __awaiter(void 0, void 0, void 0, function () {
20819
+ var response, combinedSubscriptions;
20820
+ var _b, _c;
20821
+ return __generator(this, function (_d) {
20822
+ switch (_d.label) {
20823
+ case 0: return [4 /*yield*/, gqlRequest({
20824
+ isInPreviewMode: isInPreviewMode,
20825
+ query: SUBSCRIPTIONS_QUERY,
20826
+ token: token,
20827
+ apiHost: apiHost,
20828
+ })];
20829
+ case 1:
20830
+ response = _d.sent();
20831
+ combinedSubscriptions = (_c = (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (subscription) { return (__assign(__assign({}, subscription), { charges: common.sortSubscriptionCharges(subscription.charges) })); });
20832
+ return [2 /*return*/, combinedSubscriptions];
20833
+ }
20834
+ });
20835
+ });
20836
+ };
20837
+
20818
20838
  var quoteSubscriptionUpgrade = function (_a) {
20819
20839
  var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId, apiHost = _a.apiHost, token = _a.token;
20820
20840
  return gqlRequest({
@@ -20854,20 +20874,6 @@ var useQuoteChangeUpdate = function () {
20854
20874
  });
20855
20875
  }); };
20856
20876
  };
20857
- var useQuoteDelete = function () {
20858
- var graphQLRequest = useGraphQLRequest();
20859
- return function (quoteId, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
20860
- var response;
20861
- return __generator(this, function (_a) {
20862
- switch (_a.label) {
20863
- case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteDelete($id: ID!) {\n quoteDelete(id: $id) {\n errors\n }\n }", apiHost, token, { id: quoteId })];
20864
- case 1:
20865
- response = _a.sent();
20866
- return [2 /*return*/, response];
20867
- }
20868
- });
20869
- }); };
20870
- };
20871
20877
  var quoteSubscriptionAddon = function (_a) {
20872
20878
  var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId, apiHost = _a.apiHost, token = _a.token;
20873
20879
  return gqlRequest({
@@ -20892,372 +20898,29 @@ var quoteSubscriptionActivate = function (_a) {
20892
20898
  });
20893
20899
  };
20894
20900
 
20895
- 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 trialExpirationAction\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n featureAddon\n id\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
20896
- var getSubscriptions = function (_a) {
20897
- var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
20898
- return __awaiter(void 0, void 0, void 0, function () {
20899
- var response, combinedSubscriptions;
20900
- var _b, _c;
20901
- return __generator(this, function (_d) {
20902
- switch (_d.label) {
20903
- case 0: return [4 /*yield*/, gqlRequest({
20904
- isInPreviewMode: isInPreviewMode,
20905
- query: SUBSCRIPTIONS_QUERY,
20906
- token: token,
20907
- apiHost: apiHost,
20908
- })];
20909
- case 1:
20910
- response = _d.sent();
20911
- combinedSubscriptions = (_c = (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (subscription) { return (__assign(__assign({}, subscription), { charges: common.sortSubscriptionCharges(subscription.charges) })); });
20912
- return [2 /*return*/, combinedSubscriptions];
20913
- }
20914
- });
20915
- });
20916
- };
20917
-
20918
- var pageWrapperClassName = function (isMobile) {
20919
- return "flex flex-col grow pt-4 ".concat(isMobile ? 'pb-4 overflow-hidden' : 'pb-8', " ").concat('content-container');
20920
- };
20921
-
20922
- var MUTATION$2 = "{\n currentUser {\n taxationRequiredAccountFields\n }\n}";
20923
- var getTaxationRequiredAccountFields = function (_a) {
20924
- var apiHost = _a.apiHost, token = _a.token;
20925
- return __awaiter(void 0, void 0, void 0, function () {
20926
- var response;
20927
- var _b, _c;
20928
- return __generator(this, function (_d) {
20929
- switch (_d.label) {
20930
- case 0: return [4 /*yield*/, gqlRequest({
20931
- query: MUTATION$2,
20932
- token: token,
20933
- apiHost: apiHost,
20934
- })];
20935
- case 1:
20936
- response = _d.sent();
20937
- return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
20938
- ? response.currentUser.taxationRequiredAccountFields
20939
- : null];
20940
- }
20941
- });
20942
- });
20943
- };
20944
-
20945
- var useHasTaxPlugin = function (_a) {
20946
- var apiHost = _a.apiHost, token = _a.token;
20947
- var plugins = usePlugins({
20948
- apiHost: apiHost,
20949
- token: token,
20950
- }).data;
20951
- return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
20952
- };
20953
-
20954
- var MUTATION$1 = "\nmutation accountUpdate(\n $id: ID!,\n $attributes: AccountAttributes!) {\n accountUpdate(\n id: $id,\n attributes: $attributes\n ) {\n account {\n id\n billingCountry\n billingState\n billingStreet\n billingCity\n billingZip\n name\n }\n errors\n }\n }\n";
20955
- var accountUpdate = function (_a) {
20956
- var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
20957
- return __awaiter(void 0, void 0, void 0, function () {
20958
- var vars, response, errors;
20959
- var _b;
20960
- return __generator(this, function (_c) {
20961
- switch (_c.label) {
20962
- case 0:
20963
- vars = { id: accountId, attributes: attributes };
20964
- return [4 /*yield*/, gqlRequest({
20965
- query: MUTATION$1,
20966
- token: token,
20967
- vars: vars,
20968
- apiHost: apiHost,
20969
- })];
20970
- case 1:
20971
- response = _c.sent();
20972
- errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
20973
- if (errors)
20974
- throw errors;
20975
- return [2 /*return*/, response.accountUpdate];
20976
- }
20977
- });
20978
- });
20979
- };
20980
-
20981
- var COUNTRIES_REQUIRING_STATE = ['US', 'CA'];
20982
- var TaxationForm = function (_a) {
20983
- var account = _a.account, quote = _a.quote;
20984
- // Hooks
20985
- var queryClient = reactQuery.useQueryClient();
20901
+ var useQuoteCreate = function (_a) {
20902
+ var upgradingSubscription = _a.upgradingSubscription, selectedPriceList = _a.selectedPriceList, token = _a.token;
20903
+ // Context
20986
20904
  var apiHost = react.useContext(BunnyContext).apiHost;
20987
- var token = useToken();
20988
- var form = antd.Form.useForm()[0];
20989
- // Mutations
20990
- var _b = reactQuery.useMutation({
20991
- mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
20992
- var account;
20993
- return __generator(this, function (_a) {
20994
- switch (_a.label) {
20995
- case 0: return [4 /*yield*/, accountUpdate({
20996
- accountId: quote.accountId,
20997
- attributes: changedFormData,
20998
- token: token,
20999
- apiHost: apiHost,
21000
- })];
21001
- case 1:
21002
- account = _a.sent();
21003
- return [2 /*return*/, account];
21004
- }
21005
- });
21006
- }); },
21007
- onSuccess: function () {
21008
- queryClient.invalidateQueries({
21009
- queryKey: ['getTaxationRequiredAccountFields', token],
21010
- });
21011
- },
21012
- }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
21013
- return (jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Street" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "City" }) })), jsxRuntime.jsx(FormBillingState, {}), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsxRuntime.jsx(antd.Select, { options: common.Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
21014
- var _a, _b;
21015
- return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
21016
- ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
21017
- } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Zip" }) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
21018
- };
21019
- var FormBillingState = function () {
21020
- var billingCountry = antd.Form.useWatch('billingCountry');
21021
- var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
21022
- return (jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "State" }) })));
21023
- };
21024
-
21025
- var showSuccessNotification = common.useSuccessNotification();
21026
- var QuoteCheckout = function (_a) {
21027
- var _b, _c;
21028
- var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, onRecalculateTaxes = _a.onRecalculateTaxes;
21029
- var apiHost = react.useContext(BunnyContext).apiHost;
21030
- var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21031
- var token = useToken();
21032
- var isMobile = common.useIsMobile();
21033
- var _d = react.useState(false), isSaving = _d[0], setIsSaving = _d[1];
21034
- var paymentRequired = getQuoteAmountDue(quote) > 0;
21035
- var queryClient = reactQuery.useQueryClient();
21036
- var _e = react.useState(''), couponCode = _e[0], setCouponCode = _e[1];
21037
- var _f = useUpdateCoupons({
21038
- apiHost: apiHost,
21039
- token: token,
21040
- quoteChangeId: (_b = quote.quoteChanges[quote.quoteChanges.length - 1]) === null || _b === void 0 ? void 0 : _b.id,
21041
- onCouponAdded: function () {
21042
- queryClient.invalidateQueries({
21043
- queryKey: common.QueryKeyFactory.default.createObjectKey({
21044
- id: quote === null || quote === void 0 ? void 0 : quote.id,
21045
- objectName: 'editingQuote',
21046
- token: token,
21047
- }),
21048
- });
21049
- showSuccessNotification('Coupon applied');
21050
- onRecalculateTaxes();
21051
- setCouponCode('');
21052
- },
21053
- onCouponRemoved: function () {
21054
- queryClient.invalidateQueries({
21055
- queryKey: common.QueryKeyFactory.default.createObjectKey({
21056
- id: quote === null || quote === void 0 ? void 0 : quote.id,
21057
- objectName: 'editingQuote',
21058
- token: token,
21059
- }),
21060
- });
21061
- showSuccessNotification('Coupon removed');
21062
- onRecalculateTaxes();
21063
- },
21064
- }), addCoupon = _f.addCoupon, removeCoupon = _f.removeCoupon, isAddingCoupon = _f.isAddingCoupon, isRemovingCoupon = _f.isRemovingCoupon, activeCouponsExist = _f.activeCouponsExist;
21065
- var couponsOnQuote = (_c = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _c === void 0 ? void 0 : _c.flatMap(function (quoteChange) { var _a; return (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges) === null || _a === void 0 ? void 0 : _a.filter(function (charge) { return charge.kind === 'COUPON'; }); });
21066
- var checkoutMutation = reactQuery.useMutation({
21067
- mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21068
- return __generator(this, function (_a) {
21069
- switch (_a.label) {
21070
- case 0:
21071
- if (!quote)
21072
- throw new Error('Quote is required');
21073
- if (paymentRequired)
21074
- throw new Error('Payment is required');
21075
- return [4 /*yield*/, checkout({ quoteId: quote.id, token: token, apiHost: apiHost })];
21076
- case 1: return [2 /*return*/, _a.sent()];
21077
- }
21078
- });
21079
- }); },
21080
- onSuccess: onSuccess,
21081
- onError: onFail,
21082
- });
21083
- function handleCheckoutNoPayment() {
21084
- return __awaiter(this, void 0, void 0, function () {
21085
- return __generator(this, function (_a) {
21086
- setIsSaving(true);
21087
- checkoutMutation.mutate();
21088
- setIsSaving(false);
21089
- return [2 /*return*/];
21090
- });
21091
- });
21092
- }
21093
- if (taxationRequiredAccountFields)
21094
- return (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
21095
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full" }, { children: [jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: upgradingSubscription &&
21096
- shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsxRuntime.jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", quote: quote, onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsxRuntime.jsx(antd.Button, __assign({ type: "link", loading: isRemovingCoupon, onClick: function () {
21097
- couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(function (couponCharge) {
21098
- var _a;
21099
- var couponCode = (_a = couponCharge === null || couponCharge === void 0 ? void 0 : couponCharge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode;
21100
- if (couponCode) {
21101
- removeCoupon(couponCode);
21102
- }
21103
- });
21104
- } }, { children: "Remove coupon(s)" })))] }))) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
21105
- };
21106
- var PaymentFormWrapper = function (_a) {
21107
- var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
21108
- var isMobile = common.useIsMobile();
21109
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-6 bunny-shrink-0 ".concat(isMobile ? 'bunny-w-full bunny-shadow-padding-xb' : '', " ").concat(className), style: __assign({}, (isMobile
21110
- ? setMaxHeight
21111
- ? { maxHeight: '60vh' }
21112
- : {}
21113
- : {
21114
- width: '350px',
21115
- })) }, { children: children })));
21116
- };
21117
-
21118
- var queryKeyFactory = common.QueryKeyFactory.default;
21119
- var Checkout = function (_a) {
21120
- var _b, _c;
21121
- var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList;
21122
- var apiHost = react.useContext(BunnyContext).apiHost;
21123
- var isMobile = common.useIsMobile();
21124
- var token = useToken();
21125
- var hasTaxPlugin = useHasTaxPlugin({
21126
- apiHost: apiHost,
21127
- token: token,
21128
- });
21129
- var queryClient = reactQuery.useQueryClient();
21130
- // Queries
21131
- var _d = reactQuery.useQuery({
21132
- queryKey: ['getTaxationRequiredAccountFields', token],
21133
- queryFn: function () { return getTaxationRequiredAccountFields({ apiHost: apiHost, token: token }); },
21134
- enabled: Boolean(quote),
21135
- staleTime: 0,
21136
- }), taxationRequiredAccountFields = _d.data, isLoadingTaxationRequiredAccountFields = _d.isLoading;
21137
- var _e = reactQuery.useQuery({
21138
- queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
21139
- queryFn: function () {
21140
- return (quote === null || quote === void 0 ? void 0 : quote.accountId) &&
21141
- common.getAccount({ id: quote.accountId, apiHost: apiHost, token: token, componentsVersion: PACKAGE_VERSION });
21142
- },
21143
- enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
21144
- }), account = _e.data, isLoadingAccount = _e.isLoading;
21145
- function recalculateTaxes() {
21146
- return __awaiter(this, void 0, void 0, function () {
21147
- var updatedQuote, quoteKey, calculatedPricesKey;
21148
- return __generator(this, function (_a) {
21149
- switch (_a.label) {
21150
- case 0:
21151
- if (!quote) return [3 /*break*/, 2];
21152
- return [4 /*yield*/, quoteRecalculateTaxes({
21153
- quoteId: quote.id,
21154
- apiHost: apiHost,
21155
- token: token,
21156
- })];
21157
- case 1:
21158
- updatedQuote = _a.sent();
21159
- if (updatedQuote) {
21160
- quoteKey = queryKeyFactory.createObjectKey({
21161
- id: updatedQuote.id,
21162
- objectName: 'editingQuote',
21163
- token: token,
21164
- });
21165
- calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
21166
- // quantity,
21167
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21168
- token: token,
21169
- });
21170
- queryClient.setQueryData(quoteKey, updatedQuote);
21171
- queryClient.setQueryData(calculatedPricesKey, updatedQuote);
21172
- }
21173
- _a.label = 2;
21174
- case 2: return [2 /*return*/, {}];
21175
- }
21176
- });
21177
- });
21178
- }
21179
- var recalculateTaxesEnabled = Boolean(quote) &&
21180
- open &&
21181
- hasTaxPlugin &&
21182
- !taxationRequiredAccountFields &&
21183
- !isLoadingTaxationRequiredAccountFields;
21184
- reactQuery.useQuery({
21185
- queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
21186
- id: quote === null || quote === void 0 ? void 0 : quote.id,
21187
- token: token,
21188
- }),
21189
- queryFn: recalculateTaxes,
21190
- // Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
21191
- enabled: recalculateTaxesEnabled,
21192
- staleTime: 0,
21193
- });
21194
- if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
21195
- return null;
21196
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50 bunny-overflow-auto", style: {
21197
- zIndex: 1001,
21198
- } }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb') }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full bunny-pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
21199
- onFail(error);
21200
- }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: function () { return __awaiter(void 0, void 0, void 0, function () {
21201
- return __generator(this, function (_a) {
21202
- switch (_a.label) {
21203
- case 0:
21204
- if (!recalculateTaxesEnabled) return [3 /*break*/, 2];
21205
- return [4 /*yield*/, recalculateTaxes()];
21206
- case 1:
21207
- _a.sent();
21208
- _a.label = 2;
21209
- case 2: return [2 /*return*/];
21210
- }
21211
- });
21212
- }); } })) : (jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
21213
- onFail(error);
21214
- }, onPaymentSuccess: onSuccess }))] })), jsxRuntime.jsx(Footer, { className: "bunny-pl-12" })] })) })));
21215
- };
21216
-
21217
- var QuotePreviewContext = react.createContext({});
21218
- function QuotePreviewProvider(_a) {
21219
- var children = _a.children;
21220
- var _b = react.useState(), quotePreviewData = _b[0], setQuotePreviewData = _b[1];
21221
- return (jsxRuntime.jsx(QuotePreviewContext.Provider, __assign({ value: {
21222
- quotePreviewData: quotePreviewData,
21223
- setQuotePreviewData: setQuotePreviewData,
21224
- } }, { children: children })));
21225
- }
21226
-
21227
- var PageTitle = function (_a) {
21228
- var onGoBack = _a.onGoBack, title = _a.title;
21229
- var isMobile = common.useIsMobile();
21230
- var secondaryColor = react.useContext(BrandContext).secondaryColor;
21231
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3 bunny-font-medium", style: {
21232
- fontSize: "28px",
21233
- paddingBottom: isMobile ? "22px" : "56px",
21234
- color: secondaryColor,
21235
- } }, { children: [onGoBack && (jsxRuntime.jsx(icons.ArrowLeftOutlined, { onClick: onGoBack, style: {
21236
- fontSize: "20px",
21237
- cursor: "pointer",
21238
- } })), title] })));
21239
- };
21240
-
21241
- var useQuoteCreate = function (_a) {
21242
- var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, upgradingSubscription = _a.upgradingSubscription, selectedPriceList = _a.selectedPriceList, token = _a.token;
21243
- var apiHost = react.useContext(BunnyContext).apiHost;
21244
- // Queries
21245
- var quote = reactQuery.useQuery({
21246
- queryKey: common.QueryKeyFactory.default.createObjectKey({
21247
- objectName: 'editingQuote',
21248
- id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21249
- token: token,
21250
- }),
21251
- queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21252
- var quote;
20905
+ // Local state
20906
+ var _b = react.useState(), quoteId = _b[0], setQuoteId = _b[1];
20907
+ // Queries
20908
+ var quote = reactQuery.useQuery({
20909
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
20910
+ objectName: 'editingQuote',
20911
+ id: quoteId,
20912
+ token: token,
20913
+ }),
20914
+ queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
20915
+ var quote;
21253
20916
  return __generator(this, function (_a) {
21254
20917
  switch (_a.label) {
21255
20918
  case 0:
21256
- if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
20919
+ if (!quoteId) {
21257
20920
  throw new Error('editingQuote is undefined');
21258
20921
  }
21259
20922
  return [4 /*yield*/, getQuote({
21260
- id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
20923
+ id: quoteId,
21261
20924
  token: token,
21262
20925
  apiHost: apiHost,
21263
20926
  removeFormattedQuoteField: false,
@@ -21268,9 +20931,9 @@ var useQuoteCreate = function (_a) {
21268
20931
  }
21269
20932
  });
21270
20933
  }); },
21271
- enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
20934
+ enabled: Boolean(quoteId),
21272
20935
  }).data;
21273
- var _b = reactQuery.useMutation({
20936
+ var _c = reactQuery.useMutation({
21274
20937
  mutationFn: function (_a) {
21275
20938
  var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
21276
20939
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21285,10 +20948,10 @@ var useQuoteCreate = function (_a) {
21285
20948
  onSuccess: function (subscriptionUpdateData) {
21286
20949
  var _a;
21287
20950
  var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
21288
- setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
20951
+ setQuoteId(quote.id);
21289
20952
  },
21290
- }), createQuote = _b.mutate, isCreatingQuote = _b.isPending;
21291
- var _c = reactQuery.useMutation({
20953
+ }), createQuote = _c.mutate, isCreatingQuote = _c.isPending;
20954
+ var _d = reactQuery.useMutation({
21292
20955
  mutationFn: function (_a) {
21293
20956
  var subscriptionId = _a.subscriptionId;
21294
20957
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21303,15 +20966,15 @@ var useQuoteCreate = function (_a) {
21303
20966
  onSuccess: function (subscriptionAddonUpdateData) {
21304
20967
  var _a;
21305
20968
  var quote = (_a = subscriptionAddonUpdateData === null || subscriptionAddonUpdateData === void 0 ? void 0 : subscriptionAddonUpdateData.quoteSubscriptionAddon) === null || _a === void 0 ? void 0 : _a.quote;
21306
- setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
20969
+ setQuoteId(quote.id);
21307
20970
  },
21308
- }), createEmptyQuote = _c.mutate, isCreatingEmptyQuote = _c.isPending;
20971
+ }), createEmptyQuote = _d.mutate, isCreatingEmptyQuote = _d.isPending;
21309
20972
  var subscriptionActivate = reactQuery.useMutation({
21310
20973
  mutationFn: quoteSubscriptionActivate,
21311
20974
  onSuccess: function (response) {
21312
20975
  var _a;
21313
20976
  var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionActivate) === null || _a === void 0 ? void 0 : _a.quote;
21314
- setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
20977
+ setQuoteId(quote.id);
21315
20978
  },
21316
20979
  }).mutate;
21317
20980
  react.useEffect(function () {
@@ -21347,88 +21010,635 @@ var useQuoteCreate = function (_a) {
21347
21010
  return { quote: quote, isQuotePending: isCreatingQuote || isCreatingEmptyQuote };
21348
21011
  };
21349
21012
 
21350
- var PlanManagerQuoteContext = react.createContext({});
21351
- function useFeatureAddonsPending() {
21352
- var _a = react.useState([]), featureAddonsLoading = _a[0], setFeatureAddonsLoading = _a[1];
21353
- var addFeatureAddonLoading = function (featureAddonId) {
21354
- setFeatureAddonsLoading(__spreadArray(__spreadArray([], featureAddonsLoading, true), [featureAddonId], false));
21355
- };
21356
- var removeFeatureAddonLoading = function (featureAddonId) {
21357
- setFeatureAddonsLoading(featureAddonsLoading.filter(function (id) { return id !== featureAddonId; }));
21358
- };
21359
- return {
21360
- isFeatureAddonsLoading: featureAddonsLoading.length > 0,
21361
- addFeatureAddonLoading: addFeatureAddonLoading,
21362
- removeFeatureAddonLoading: removeFeatureAddonLoading,
21363
- };
21364
- }
21365
- function PlanManagerQuoteProvider(_a) {
21366
- var children = _a.children, editingQuoteData = _a.editingQuoteData, setEditingQuoteData = _a.setEditingQuoteData;
21013
+ var calculateNewQuantity = function (priceListCharge, currentQuantity) {
21014
+ if (currentQuantity === void 0) { currentQuantity = 1; }
21015
+ var quantityMax = (priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMax) || Number.POSITIVE_INFINITY;
21016
+ var quantityMin = (priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMin) || Number.NEGATIVE_INFINITY;
21017
+ var selfServiceQuantity = priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.selfServiceQuantity;
21018
+ if (selfServiceQuantity) {
21019
+ return lodashExports.clamp(currentQuantity, quantityMin, quantityMax);
21020
+ }
21021
+ // If self service quantity is disabled, return the min quantity
21022
+ return quantityMin;
21023
+ };
21024
+
21025
+ var QUOTE_CHARGE_UPDATE = "\n".concat(QUOTE_FIELDS(), "\n mutation QuoteChargeUpdate (\n $discount: Float,\n $endDate: ISO8601Date,\n $name: String,\n $price: Float,\n $quantity: Int,\n $quoteChargeId: ID!\n $startDate: ISO8601Date\n $subtotal: Float,\n ) {\n quoteChargeUpdate(\n discount: $discount\n endDate: $endDate\n name: $name\n price: $price\n quantity: $quantity\n quoteChargeId: $quoteChargeId\n startDate: $startDate\n subtotal: $subtotal\n ) {\n quoteCharge {\n quoteChange {\n id\n quoteId\n quote {\n ...QuoteFields\n }\n }\n id\n }\n }\n }\n");
21026
+ var quoteChargeUpdate = function (_a) {
21027
+ 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;
21028
+ return __awaiter(void 0, void 0, void 0, function () {
21029
+ var response;
21030
+ return __generator(this, function (_b) {
21031
+ switch (_b.label) {
21032
+ case 0: return [4 /*yield*/, gqlRequest({
21033
+ query: QUOTE_CHARGE_UPDATE,
21034
+ vars: {
21035
+ subtotal: subtotal,
21036
+ discount: discount,
21037
+ name: name,
21038
+ price: price,
21039
+ quantity: quantity,
21040
+ quoteChargeId: quoteChargeId,
21041
+ startDate: startDate,
21042
+ },
21043
+ apiHost: apiHost,
21044
+ token: token,
21045
+ })];
21046
+ case 1:
21047
+ response = _b.sent();
21048
+ if (response.errors) {
21049
+ throw new Error(response.errors[0].message);
21050
+ }
21051
+ return [2 /*return*/, response.quoteChargeUpdate.quoteCharge];
21052
+ }
21053
+ });
21054
+ });
21055
+ };
21056
+
21057
+ function canEditChargeQuantity(charge) {
21058
+ if (charge.chargeType === common.ChargeType.USAGE)
21059
+ return false;
21060
+ if (charge.pricingModel === common.PricingModel.FLAT)
21061
+ return false;
21062
+ return true;
21063
+ }
21064
+
21065
+ // Functionality:
21066
+ // 1: keep track of quantities set for features based on feature.id
21067
+ // a. copy those quantities over to charges with same feature when initializing
21068
+ // ie: if set 5 for Users in Starter, then switching to Pro with Users, keep 5
21069
+ // 2. set initial quantities for features using the first feature quantity found
21070
+ // Limitations:
21071
+ // - When switching between price lists that share features (e.g. both have Users),
21072
+ // quantities will be adjusted to meet the new min/max requirements of the new price list.
21073
+ // The original quantity is not preserved when switching back to the previous price list.
21074
+ var showErrorNotification$1 = common.useErrorNotification();
21075
+ var useQuoteQuantities = function (_a) {
21076
+ var selectedPriceList = _a.selectedPriceList, quote = _a.quote;
21077
+ var queryClient = reactQuery.useQueryClient();
21078
+ var token = useToken();
21079
+ var apiHost = react.useContext(BunnyContext).apiHost;
21080
+ var _b = useFeatureQuantities(), getFeatureQuantity = _b.getFeatureQuantity, setFeatureQuantity = _b.setFeatureQuantity;
21081
+ var _c = reactQuery.useMutation({
21082
+ mutationFn: function (_a) {
21083
+ var quoteChargeId = _a.quoteChargeId, quantity = _a.quantity, apiHost = _a.apiHost, token = _a.token;
21084
+ return __awaiter(void 0, void 0, void 0, function () {
21085
+ var quoteCharge;
21086
+ return __generator(this, function (_b) {
21087
+ switch (_b.label) {
21088
+ case 0: return [4 /*yield*/, quoteChargeUpdate({
21089
+ quoteChargeId: quoteChargeId,
21090
+ quantity: quantity,
21091
+ apiHost: apiHost,
21092
+ token: token,
21093
+ })];
21094
+ case 1:
21095
+ quoteCharge = _b.sent();
21096
+ return [2 /*return*/, { quoteCharge: quoteCharge }];
21097
+ }
21098
+ });
21099
+ });
21100
+ },
21101
+ onSuccess: function (_a) {
21102
+ var quoteCharge = _a.quoteCharge;
21103
+ queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
21104
+ objectName: 'editingQuote',
21105
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
21106
+ token: token,
21107
+ }), quoteCharge.quoteChange.quote);
21108
+ },
21109
+ }), updateCharge = _c.mutate, isUpdatingCharge = _c.isPending;
21110
+ var handleUpdateQuantity = react.useCallback(function (quantity, priceListChargeId, quote) {
21111
+ 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); });
21112
+ var quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) {
21113
+ var _a;
21114
+ return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListChargeId;
21115
+ });
21116
+ if (!token) {
21117
+ showErrorNotification$1('Token is undefined in onUpdateQuantity');
21118
+ return;
21119
+ }
21120
+ if (!quoteCharge) {
21121
+ showErrorNotification$1('Quote charge not found');
21122
+ return;
21123
+ }
21124
+ updateCharge({
21125
+ quoteChargeId: quoteCharge.id,
21126
+ quantity: quantity,
21127
+ apiHost: apiHost,
21128
+ token: token,
21129
+ });
21130
+ }, [apiHost, token, updateCharge, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quote === null || quote === void 0 ? void 0 : quote.id]);
21131
+ // Helper function to get quantity from quote for a specific charge
21132
+ var getQuantityFromQuote = function (chargeId) {
21133
+ var _a, _b;
21134
+ if (!quote || !selectedPriceList)
21135
+ return undefined;
21136
+ return (_b = (_a = quote.quoteChanges
21137
+ .find(function (qc) { return qc.priceList.id === selectedPriceList.id; })) === null || _a === void 0 ? void 0 : _a.charges.find(function (c) { return c.priceListCharge.id === chargeId; })) === null || _b === void 0 ? void 0 : _b.quantity;
21138
+ };
21139
+ // Helper function to process a single charge
21140
+ var processCharge = function (charge) {
21141
+ var _a;
21142
+ if (!((_a = charge === null || charge === void 0 ? void 0 : charge.feature) === null || _a === void 0 ? void 0 : _a.id)) {
21143
+ showErrorNotification$1('Charge or feature is undefined', 'Client Error');
21144
+ return;
21145
+ }
21146
+ var storedQuantity = getFeatureQuantity(charge.feature.id);
21147
+ // Determine the quantity to use
21148
+ if (storedQuantity !== undefined) {
21149
+ // Store this quantity for this feature to ensure it's tracked
21150
+ setFeatureQuantity(charge.feature.id, storedQuantity);
21151
+ return storedQuantity;
21152
+ }
21153
+ else {
21154
+ var finalQuantity = calculateNewQuantity(charge, storedQuantity);
21155
+ setFeatureQuantity(charge.feature.id, finalQuantity);
21156
+ return finalQuantity;
21157
+ }
21158
+ };
21159
+ function handleChangeQuantity(priceListChargeId, quantity) {
21160
+ var _a;
21161
+ var charge = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.find(function (charge) { return charge.id === priceListChargeId; });
21162
+ var featureId = (_a = charge === null || charge === void 0 ? void 0 : charge.feature) === null || _a === void 0 ? void 0 : _a.id;
21163
+ if (!featureId) {
21164
+ showErrorNotification$1('featureId not found');
21165
+ return;
21166
+ }
21167
+ if (!quote) {
21168
+ showErrorNotification$1('quote not found');
21169
+ return;
21170
+ }
21171
+ setFeatureQuantity(featureId, quantity);
21172
+ handleUpdateQuantity(quantity, priceListChargeId, quote);
21173
+ }
21174
+ // Initialize quantities when price list changes
21175
+ react.useEffect(function () {
21176
+ if (!selectedPriceList)
21177
+ return;
21178
+ selectedPriceList.charges.forEach(function (charge) {
21179
+ if (canEditChargeQuantity(charge)) {
21180
+ processCharge(charge);
21181
+ }
21182
+ });
21183
+ }, [selectedPriceList]);
21184
+ // Update quantities when quote changes if local and quote quantities don't match
21185
+ react.useEffect(function () {
21186
+ if (!quote || !selectedPriceList)
21187
+ return;
21188
+ selectedPriceList.charges.forEach(function (charge) {
21189
+ if (!canEditChargeQuantity(charge))
21190
+ return;
21191
+ var finalQuantity = processCharge(charge);
21192
+ var quantityOnQuote = getQuantityFromQuote(charge.id);
21193
+ // Update quote if needed
21194
+ if (finalQuantity && quantityOnQuote && finalQuantity !== quantityOnQuote) {
21195
+ handleUpdateQuantity(finalQuantity, charge.id, quote);
21196
+ }
21197
+ });
21198
+ }, [quote === null || quote === void 0 ? void 0 : quote.id]);
21199
+ return {
21200
+ onChangeQuantity: handleChangeQuantity,
21201
+ getFeatureQuantity: getFeatureQuantity,
21202
+ isUpdatingCharges: isUpdatingCharge, // Might be multiple charges updating at once
21203
+ };
21204
+ };
21205
+ var useFeatureQuantities = function () {
21206
+ var _a = react.useState({}), featureQuantities = _a[0], setFeatureQuantities = _a[1];
21207
+ var getFeatureQuantity = function (featureId) {
21208
+ return featureQuantities[featureId];
21209
+ };
21210
+ var setFeatureQuantity = function (featureId, quantity) {
21211
+ setFeatureQuantities(function (prev) {
21212
+ var _a;
21213
+ return (__assign(__assign({}, prev), (_a = {}, _a[featureId] = quantity, _a)));
21214
+ });
21215
+ };
21216
+ return {
21217
+ getFeatureQuantity: getFeatureQuantity,
21218
+ setFeatureQuantity: setFeatureQuantity,
21219
+ };
21220
+ };
21221
+
21222
+ var QuoteContext = react.createContext({});
21223
+ function useFeatureAddonsPending() {
21224
+ var _a = react.useState([]), featureAddonsLoading = _a[0], setFeatureAddonsLoading = _a[1];
21225
+ var addFeatureAddonLoading = function (featureAddonId) {
21226
+ setFeatureAddonsLoading(__spreadArray(__spreadArray([], featureAddonsLoading, true), [featureAddonId], false));
21227
+ };
21228
+ var removeFeatureAddonLoading = function (featureAddonId) {
21229
+ setFeatureAddonsLoading(featureAddonsLoading.filter(function (id) { return id !== featureAddonId; }));
21230
+ };
21231
+ return {
21232
+ isFeatureAddonsLoading: featureAddonsLoading.length > 0,
21233
+ addFeatureAddonLoading: addFeatureAddonLoading,
21234
+ removeFeatureAddonLoading: removeFeatureAddonLoading,
21235
+ };
21236
+ }
21237
+ function QuoteProvider(_a) {
21238
+ var children = _a.children;
21367
21239
  // Contexts
21368
- var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21369
21240
  var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21241
+ // Local state
21242
+ var _b = react.useState(), selectedPriceList = _b[0], setSelectedPriceList = _b[1];
21243
+ var _c = react.useState(false), isAddonPlanLoading = _c[0], setIsAddonPlanLoading = _c[1];
21370
21244
  // Hooks
21371
21245
  var token = useToken();
21372
- var _b = react.useState(false), isAddonPlanLoading = _b[0], setIsAddonPlanLoading = _b[1];
21373
- var _c = useFeatureAddonsPending(), isFeatureAddonsLoading = _c.isFeatureAddonsLoading, addFeatureAddonLoading = _c.addFeatureAddonLoading, removeFeatureAddonLoading = _c.removeFeatureAddonLoading;
21374
- var _d = useQuoteCreate({
21375
- editingQuote: editingQuoteData,
21376
- setEditingQuoteData: function (quoteId, isTrial) {
21377
- setEditingQuoteData({
21378
- id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) || '',
21379
- isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) || false,
21380
- });
21381
- },
21246
+ var _d = useFeatureAddonsPending(), isFeatureAddonsLoading = _d.isFeatureAddonsLoading, addFeatureAddonLoading = _d.addFeatureAddonLoading, removeFeatureAddonLoading = _d.removeFeatureAddonLoading;
21247
+ var _e = useQuoteCreate({
21382
21248
  upgradingSubscription: upgradingSubscription,
21383
- selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList,
21249
+ selectedPriceList: selectedPriceList,
21384
21250
  token: token,
21385
- }), quote = _d.quote, isQuotePending = _d.isQuotePending;
21386
- return (jsxRuntime.jsx(PlanManagerQuoteContext.Provider, __assign({ value: {
21251
+ }), quote = _e.quote, isQuotePending = _e.isQuotePending;
21252
+ var _f = useQuoteQuantities({
21253
+ selectedPriceList: selectedPriceList,
21254
+ quote: quote,
21255
+ }), onChangeQuantity = _f.onChangeQuantity, getFeatureQuantity = _f.getFeatureQuantity, isUpdatingCharges = _f.isUpdatingCharges;
21256
+ // Handlers
21257
+ function handleClearQuote() {
21258
+ setSelectedPriceList(undefined);
21259
+ }
21260
+ function handleChangeSelectedPriceList(priceList) {
21261
+ setSelectedPriceList(priceList);
21262
+ }
21263
+ // Important that we keep track of all changes taking place so we can recalculate taxes after all changes are complete
21264
+ var isUpdatingQuote = isUpdatingCharges || isAddonPlanLoading || isFeatureAddonsLoading;
21265
+ return (jsxRuntime.jsx(QuoteContext.Provider, __assign({ value: {
21387
21266
  quote: quote,
21267
+ selectedPriceList: selectedPriceList,
21388
21268
  isQuotePending: isQuotePending,
21269
+ isUpdatingQuote: isUpdatingQuote,
21270
+ // Plan add-ons pending
21389
21271
  isAddonPlanLoading: isAddonPlanLoading,
21390
21272
  setIsAddonPlanLoading: setIsAddonPlanLoading,
21273
+ // Feature add-ons pending
21391
21274
  isFeatureAddonsLoading: isFeatureAddonsLoading,
21392
21275
  addFeatureAddonLoading: addFeatureAddonLoading,
21393
21276
  removeFeatureAddonLoading: removeFeatureAddonLoading,
21277
+ onClearQuote: handleClearQuote,
21278
+ onChangeSelectedPriceList: handleChangeSelectedPriceList,
21279
+ onChangeQuantity: onChangeQuantity,
21280
+ getFeatureQuantity: getFeatureQuantity,
21394
21281
  } }, { children: children })));
21395
21282
  }
21396
21283
 
21397
- 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";
21398
- var quoteChargeUpdate = function (_a) {
21399
- 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;
21400
- return gqlRequest({
21401
- query: QUOTE_CHARGE_UPDATE,
21402
- vars: {
21403
- subtotal: subtotal,
21404
- discount: discount,
21405
- name: name,
21406
- price: price,
21407
- quantity: quantity,
21408
- quoteChargeId: quoteChargeId,
21409
- startDate: startDate,
21410
- },
21284
+ var PageTitle = function (_a) {
21285
+ var onGoBack = _a.onGoBack, title = _a.title;
21286
+ var isMobile = common.useIsMobile();
21287
+ var secondaryColor = react.useContext(BrandContext).secondaryColor;
21288
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3 bunny-font-medium", style: {
21289
+ fontSize: "28px",
21290
+ paddingBottom: isMobile ? "22px" : "56px",
21291
+ color: secondaryColor,
21292
+ } }, { children: [onGoBack && (jsxRuntime.jsx(icons.ArrowLeftOutlined, { onClick: onGoBack, style: {
21293
+ fontSize: "20px",
21294
+ cursor: "pointer",
21295
+ } })), title] })));
21296
+ };
21297
+
21298
+ function isAddonPurchased(featureAddon, currentSubscription) {
21299
+ 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; });
21300
+ if (!purchasedFeatureAddons)
21301
+ return false;
21302
+ return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
21303
+ }
21304
+ function hasUnpurchasedFeatureAddons(priceList, currentSubscription) {
21305
+ var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
21306
+ 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; });
21307
+ var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
21308
+ 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; }));
21309
+ });
21310
+ return unpurchasedFeatureAddons.length > 0;
21311
+ }
21312
+ function findQuoteChangeForFeatureAddon(quote) {
21313
+ return quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.kind === common.QuoteChangeKind.UPDATE || qc.kind === common.QuoteChangeKind.SUBSCRIBE; });
21314
+ }
21315
+ function featureAddonInQuote(selectedPriceList, priceListCharge, quote) {
21316
+ var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === selectedPriceList.id; });
21317
+ if (!quoteChange)
21318
+ return false;
21319
+ return quoteChange.charges.some(function (c) { var _a; return ((_a = c.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListCharge.id; });
21320
+ }
21321
+ // ID Cucumber will use to find the feature addon switch
21322
+ function featureAddonSwitchTestId(featureAddon) {
21323
+ var name = featureAddon.name.toLowerCase().replace(/ /g, '-');
21324
+ return "feature-addon-switch-".concat(name);
21325
+ }
21326
+
21327
+ var pageWrapperClassName = function (isMobile) {
21328
+ return "flex flex-col grow pt-4 ".concat(isMobile ? 'pb-4 overflow-hidden' : 'pb-8', " ").concat('content-container');
21329
+ };
21330
+
21331
+ var MUTATION$2 = "{\n currentUser {\n taxationRequiredAccountFields\n }\n}";
21332
+ var getTaxationRequiredAccountFields = function (_a) {
21333
+ var apiHost = _a.apiHost, token = _a.token;
21334
+ return __awaiter(void 0, void 0, void 0, function () {
21335
+ var response;
21336
+ var _b, _c;
21337
+ return __generator(this, function (_d) {
21338
+ switch (_d.label) {
21339
+ case 0: return [4 /*yield*/, gqlRequest({
21340
+ query: MUTATION$2,
21341
+ token: token,
21342
+ apiHost: apiHost,
21343
+ })];
21344
+ case 1:
21345
+ response = _d.sent();
21346
+ return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
21347
+ ? response.currentUser.taxationRequiredAccountFields
21348
+ : null];
21349
+ }
21350
+ });
21351
+ });
21352
+ };
21353
+
21354
+ var useHasTaxPlugin = function (_a) {
21355
+ var apiHost = _a.apiHost, token = _a.token;
21356
+ var plugins = usePlugins({
21357
+ apiHost: apiHost,
21358
+ token: token,
21359
+ }).data;
21360
+ return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
21361
+ };
21362
+
21363
+ function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
21364
+ var _a;
21365
+ var upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
21366
+ function upgradingFromFree() {
21367
+ var totalPrice = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges.reduce(function (acc, charge) { return acc + Number((charge === null || charge === void 0 ? void 0 : charge.discountedPrice) || 0); }, 0);
21368
+ return totalPrice === 0;
21369
+ }
21370
+ var quoteKindIsValid = quote.kind === common.QuoteChangeKind.SUBSCRIBE ||
21371
+ quote.kind === common.QuoteChangeKind.ADJUSTMENT ||
21372
+ quote.kind === common.QuoteChangeKind.ACTIVATE;
21373
+ if (quoteKindIsValid) {
21374
+ return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
21375
+ }
21376
+ return false;
21377
+ }
21378
+
21379
+ var MUTATION$1 = "\nmutation accountUpdate(\n $id: ID!,\n $attributes: AccountAttributes!) {\n accountUpdate(\n id: $id,\n attributes: $attributes\n ) {\n account {\n id\n billingCountry\n billingState\n billingStreet\n billingCity\n billingZip\n name\n }\n errors\n }\n }\n";
21380
+ var accountUpdate = function (_a) {
21381
+ var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
21382
+ return __awaiter(void 0, void 0, void 0, function () {
21383
+ var vars, response, errors;
21384
+ var _b;
21385
+ return __generator(this, function (_c) {
21386
+ switch (_c.label) {
21387
+ case 0:
21388
+ vars = { id: accountId, attributes: attributes };
21389
+ return [4 /*yield*/, gqlRequest({
21390
+ query: MUTATION$1,
21391
+ token: token,
21392
+ vars: vars,
21393
+ apiHost: apiHost,
21394
+ })];
21395
+ case 1:
21396
+ response = _c.sent();
21397
+ errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
21398
+ if (errors)
21399
+ throw errors;
21400
+ return [2 /*return*/, response.accountUpdate];
21401
+ }
21402
+ });
21403
+ });
21404
+ };
21405
+
21406
+ var COUNTRIES_REQUIRING_STATE = ['US', 'CA'];
21407
+ var TaxationForm = function (_a) {
21408
+ var account = _a.account, quote = _a.quote;
21409
+ // Hooks
21410
+ var queryClient = reactQuery.useQueryClient();
21411
+ var apiHost = react.useContext(BunnyContext).apiHost;
21412
+ var token = useToken();
21413
+ var form = antd.Form.useForm()[0];
21414
+ // Mutations
21415
+ var _b = reactQuery.useMutation({
21416
+ mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
21417
+ var account;
21418
+ return __generator(this, function (_a) {
21419
+ switch (_a.label) {
21420
+ case 0: return [4 /*yield*/, accountUpdate({
21421
+ accountId: quote.accountId,
21422
+ attributes: changedFormData,
21423
+ token: token,
21424
+ apiHost: apiHost,
21425
+ })];
21426
+ case 1:
21427
+ account = _a.sent();
21428
+ return [2 /*return*/, account];
21429
+ }
21430
+ });
21431
+ }); },
21432
+ onSuccess: function () {
21433
+ queryClient.invalidateQueries({
21434
+ queryKey: ['getTaxationRequiredAccountFields', token],
21435
+ });
21436
+ },
21437
+ }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
21438
+ return (jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Street" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "City" }) })), jsxRuntime.jsx(FormBillingState, {}), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsxRuntime.jsx(antd.Select, { options: common.Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
21439
+ var _a, _b;
21440
+ return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
21441
+ ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
21442
+ } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Zip" }) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
21443
+ };
21444
+ var FormBillingState = function () {
21445
+ var billingCountry = antd.Form.useWatch('billingCountry');
21446
+ var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
21447
+ return (jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "State" }) })));
21448
+ };
21449
+
21450
+ var showSuccessNotification = common.useSuccessNotification();
21451
+ var QuoteCheckout = function (_a) {
21452
+ var _b, _c;
21453
+ var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, onRecalculateTaxes = _a.onRecalculateTaxes;
21454
+ var apiHost = react.useContext(BunnyContext).apiHost;
21455
+ var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21456
+ var token = useToken();
21457
+ var isMobile = common.useIsMobile();
21458
+ var _d = react.useState(false), isSaving = _d[0], setIsSaving = _d[1];
21459
+ var paymentRequired = getQuoteAmountDue(quote) > 0;
21460
+ var queryClient = reactQuery.useQueryClient();
21461
+ var _e = react.useState(''), couponCode = _e[0], setCouponCode = _e[1];
21462
+ var _f = useUpdateCoupons({
21463
+ apiHost: apiHost,
21464
+ token: token,
21465
+ quoteChangeId: (_b = quote.quoteChanges[quote.quoteChanges.length - 1]) === null || _b === void 0 ? void 0 : _b.id,
21466
+ onCouponAdded: function () {
21467
+ queryClient.invalidateQueries({
21468
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
21469
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
21470
+ objectName: 'editingQuote',
21471
+ token: token,
21472
+ }),
21473
+ });
21474
+ showSuccessNotification('Coupon applied');
21475
+ onRecalculateTaxes();
21476
+ setCouponCode('');
21477
+ },
21478
+ onCouponRemoved: function () {
21479
+ queryClient.invalidateQueries({
21480
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
21481
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
21482
+ objectName: 'editingQuote',
21483
+ token: token,
21484
+ }),
21485
+ });
21486
+ showSuccessNotification('Coupon removed');
21487
+ onRecalculateTaxes();
21488
+ },
21489
+ }), addCoupon = _f.addCoupon, removeCoupon = _f.removeCoupon, isAddingCoupon = _f.isAddingCoupon, isRemovingCoupon = _f.isRemovingCoupon, activeCouponsExist = _f.activeCouponsExist;
21490
+ var couponsOnQuote = (_c = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _c === void 0 ? void 0 : _c.flatMap(function (quoteChange) { var _a; return (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges) === null || _a === void 0 ? void 0 : _a.filter(function (charge) { return charge.kind === 'COUPON'; }); });
21491
+ var checkoutMutation = reactQuery.useMutation({
21492
+ mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21493
+ return __generator(this, function (_a) {
21494
+ switch (_a.label) {
21495
+ case 0:
21496
+ if (!quote)
21497
+ throw new Error('Quote is required');
21498
+ if (paymentRequired)
21499
+ throw new Error('Payment is required');
21500
+ return [4 /*yield*/, checkout({ quoteId: quote.id, token: token, apiHost: apiHost })];
21501
+ case 1: return [2 /*return*/, _a.sent()];
21502
+ }
21503
+ });
21504
+ }); },
21505
+ onSuccess: onSuccess,
21506
+ onError: onFail,
21507
+ });
21508
+ function handleCheckoutNoPayment() {
21509
+ return __awaiter(this, void 0, void 0, function () {
21510
+ return __generator(this, function (_a) {
21511
+ setIsSaving(true);
21512
+ checkoutMutation.mutate();
21513
+ setIsSaving(false);
21514
+ return [2 /*return*/];
21515
+ });
21516
+ });
21517
+ }
21518
+ if (taxationRequiredAccountFields)
21519
+ return (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
21520
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full" }, { children: [jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: upgradingSubscription &&
21521
+ shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsxRuntime.jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", quote: quote, onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsxRuntime.jsx(antd.Button, __assign({ type: "link", loading: isRemovingCoupon, onClick: function () {
21522
+ couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(function (couponCharge) {
21523
+ var _a;
21524
+ var couponCode = (_a = couponCharge === null || couponCharge === void 0 ? void 0 : couponCharge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode;
21525
+ if (couponCode) {
21526
+ removeCoupon(couponCode);
21527
+ }
21528
+ });
21529
+ } }, { children: "Remove coupon(s)" })))] }))) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
21530
+ };
21531
+ var PaymentFormWrapper = function (_a) {
21532
+ var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
21533
+ var isMobile = common.useIsMobile();
21534
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-6 bunny-shrink-0 ".concat(isMobile ? 'bunny-w-full bunny-shadow-padding-xb' : '', " ").concat(className), style: __assign({}, (isMobile
21535
+ ? setMaxHeight
21536
+ ? { maxHeight: '60vh' }
21537
+ : {}
21538
+ : {
21539
+ width: '350px',
21540
+ })) }, { children: children })));
21541
+ };
21542
+
21543
+ var queryKeyFactory = common.QueryKeyFactory.default;
21544
+ var Checkout = function (_a) {
21545
+ var _b, _c;
21546
+ var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, isUpdatingQuote = _a.isUpdatingQuote;
21547
+ var apiHost = react.useContext(BunnyContext).apiHost;
21548
+ var isMobile = common.useIsMobile();
21549
+ var token = useToken();
21550
+ var hasTaxPlugin = useHasTaxPlugin({
21411
21551
  apiHost: apiHost,
21412
21552
  token: token,
21413
21553
  });
21554
+ var queryClient = reactQuery.useQueryClient();
21555
+ // Queries
21556
+ var _d = reactQuery.useQuery({
21557
+ queryKey: ['getTaxationRequiredAccountFields', token],
21558
+ queryFn: function () { return getTaxationRequiredAccountFields({ apiHost: apiHost, token: token }); },
21559
+ enabled: Boolean(quote),
21560
+ staleTime: 0,
21561
+ }), taxationRequiredAccountFields = _d.data, isLoadingTaxationRequiredAccountFields = _d.isLoading;
21562
+ var _e = reactQuery.useQuery({
21563
+ queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
21564
+ queryFn: function () {
21565
+ return (quote === null || quote === void 0 ? void 0 : quote.accountId) &&
21566
+ common.getAccount({ id: quote.accountId, apiHost: apiHost, token: token, componentsVersion: PACKAGE_VERSION });
21567
+ },
21568
+ enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
21569
+ }), account = _e.data, isLoadingAccount = _e.isLoading;
21570
+ function recalculateTaxes() {
21571
+ return __awaiter(this, void 0, void 0, function () {
21572
+ var updatedQuote, quoteKey;
21573
+ return __generator(this, function (_a) {
21574
+ switch (_a.label) {
21575
+ case 0:
21576
+ if (!quote) return [3 /*break*/, 2];
21577
+ return [4 /*yield*/, quoteRecalculateTaxes({
21578
+ quoteId: quote.id,
21579
+ apiHost: apiHost,
21580
+ token: token,
21581
+ })];
21582
+ case 1:
21583
+ updatedQuote = _a.sent();
21584
+ if (updatedQuote) {
21585
+ quoteKey = queryKeyFactory.createObjectKey({
21586
+ id: updatedQuote.id,
21587
+ objectName: 'editingQuote',
21588
+ token: token,
21589
+ });
21590
+ queryClient.setQueryData(quoteKey, updatedQuote);
21591
+ }
21592
+ _a.label = 2;
21593
+ case 2: return [2 /*return*/, {}];
21594
+ }
21595
+ });
21596
+ });
21597
+ }
21598
+ var recalculateTaxesEnabled = Boolean(quote) &&
21599
+ open &&
21600
+ hasTaxPlugin &&
21601
+ !taxationRequiredAccountFields &&
21602
+ !isLoadingTaxationRequiredAccountFields &&
21603
+ !isUpdatingQuote;
21604
+ reactQuery.useQuery({
21605
+ queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
21606
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
21607
+ token: token,
21608
+ }),
21609
+ queryFn: recalculateTaxes,
21610
+ // Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
21611
+ enabled: recalculateTaxesEnabled,
21612
+ staleTime: 0,
21613
+ });
21614
+ if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
21615
+ return null;
21616
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50 bunny-overflow-auto", style: {
21617
+ zIndex: 1001,
21618
+ } }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb') }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full bunny-pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
21619
+ onFail(error);
21620
+ }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: function () { return __awaiter(void 0, void 0, void 0, function () {
21621
+ return __generator(this, function (_a) {
21622
+ switch (_a.label) {
21623
+ case 0:
21624
+ if (!recalculateTaxesEnabled) return [3 /*break*/, 2];
21625
+ return [4 /*yield*/, recalculateTaxes()];
21626
+ case 1:
21627
+ _a.sent();
21628
+ _a.label = 2;
21629
+ case 2: return [2 /*return*/];
21630
+ }
21631
+ });
21632
+ }); } })) : (jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
21633
+ onFail(error);
21634
+ }, onPaymentSuccess: onSuccess }))] })), jsxRuntime.jsx(Footer, { className: "bunny-pl-12" })] })) })));
21414
21635
  };
21415
21636
 
21416
21637
  var CheckoutBarInput = function (_a) {
21417
- var disabled = _a.disabled, charge = _a.charge, quantity = _a.quantity, selectedPriceList = _a.selectedPriceList, onQuantityChanged = _a.onQuantityChanged;
21418
- // State
21419
- var _b = react.useState(false), isTooltipOpen = _b[0], setIsTooltipOpen = _b[1];
21420
- var _c = react.useState(0), quantityLocal = _c[0], setQuantityLocal = _c[1];
21421
- // Hooks
21638
+ var _b;
21639
+ var disabled = _a.disabled, charge = _a.charge, quantity = _a.quantity, onQuantityChanged = _a.onQuantityChanged;
21640
+ var _c = react.useState(false), isTooltipOpen = _c[0], setIsTooltipOpen = _c[1];
21422
21641
  var isMobile = common.useIsMobile();
21423
- var quoteChangeDebounce = react.useCallback(lodashExports.debounce(function (newQuantity) { return __awaiter(void 0, void 0, void 0, function () {
21424
- return __generator(this, function (_a) {
21425
- onQuantityChanged(newQuantity);
21426
- return [2 /*return*/];
21427
- });
21428
- }); }, 1000), []);
21429
- react.useEffect(function () {
21430
- setQuantityLocal(quantity);
21431
- }, [quantity]);
21432
21642
  react.useEffect(function () {
21433
21643
  setTimeout(function () {
21434
21644
  setIsTooltipOpen(true);
@@ -21437,18 +21647,14 @@ var CheckoutBarInput = function (_a) {
21437
21647
  setIsTooltipOpen(false);
21438
21648
  }, 6000);
21439
21649
  }, []);
21440
- if (!(charge === null || charge === void 0 ? void 0 : charge.feature))
21441
- return null;
21442
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isMobile ? "bunny-justify-between" : "") }, { children: [jsxRuntime.jsx(QuantityLabel, { activeCharge: charge }), jsxRuntime.jsx(antd.Tooltip, __assign({ onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
21650
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isMobile ? 'bunny-justify-between' : '') }, { children: [jsxRuntime.jsx(QuantityLabel, { activeCharge: charge }), jsxRuntime.jsx(antd.Tooltip, __assign({ onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
21443
21651
  body: {
21444
- paddingTop: "0.75rem",
21445
- paddingBottom: "0.75rem",
21652
+ paddingTop: '0.75rem',
21653
+ paddingBottom: '0.75rem',
21446
21654
  },
21447
- } }, { children: jsxRuntime.jsx(antd.Input, { className: isMobile ? "text-right" : "", disabled: disabled || !selectedPriceList || !charge.selfServiceQuantity, onChange: function (e) {
21448
- var quantity = Number(e.target.value);
21449
- setQuantityLocal(quantity);
21450
- quoteChangeDebounce(quantity);
21451
- }, min: charge === null || charge === void 0 ? void 0 : charge.quantityMin, max: charge === null || charge === void 0 ? void 0 : charge.quantityMax, style: { minWidth: "120px" }, type: "number", value: quantityLocal, required: true }) }))] })));
21655
+ } }, { children: jsxRuntime.jsx(antd.Input, { id: "".concat((_b = charge.name) === null || _b === void 0 ? void 0 : _b.toLowerCase().replace(/ /g, '-'), "-quantity-input"), className: isMobile ? 'text-right' : '', disabled: disabled, onChange: function (e) {
21656
+ onQuantityChanged(Number(e.target.value));
21657
+ }, min: charge === null || charge === void 0 ? void 0 : charge.quantityMin, max: charge === null || charge === void 0 ? void 0 : charge.quantityMax, style: { minWidth: '120px' }, type: "number", value: quantity, required: true }) }))] })));
21452
21658
  };
21453
21659
  var QuantityLabel = function (_a) {
21454
21660
  var _b;
@@ -21456,25 +21662,10 @@ var QuantityLabel = function (_a) {
21456
21662
  var featureName = (_b = activeCharge.feature) === null || _b === void 0 ? void 0 : _b.name;
21457
21663
  var pluralizedFeatureName = (common.StringUtils.isStringPluralized(featureName) || !featureName
21458
21664
  ? featureName
21459
- : common.StringUtils.pluralizeEntityName(featureName)) || "";
21460
- return (jsxRuntime.jsx("span", __assign({ className: "bunny-text-slate-500 bunny-font-medium", style: { fontSize: "11px" } }, { children: pluralizedFeatureName.toUpperCase() })));
21665
+ : common.StringUtils.pluralizeEntityName(featureName)) || '';
21666
+ return (jsxRuntime.jsx("span", __assign({ className: "bunny-text-slate-500 bunny-font-medium", style: { fontSize: '11px' } }, { children: pluralizedFeatureName.toUpperCase() })));
21461
21667
  };
21462
21668
 
21463
- function isAddonPurchased(featureAddon, currentSubscription) {
21464
- 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; });
21465
- if (!purchasedFeatureAddons)
21466
- return false;
21467
- return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
21468
- }
21469
- function priceListHasUnpurchasedFeatureAddons(priceList, currentSubscription) {
21470
- var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
21471
- 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; });
21472
- var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
21473
- 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; }));
21474
- });
21475
- return unpurchasedFeatureAddons.length > 0;
21476
- }
21477
-
21478
21669
  var periodMonthsConverter = function (period) {
21479
21670
  if (period === 0)
21480
21671
  return common.BillingPeriod.ONCE;
@@ -21517,7 +21708,10 @@ var canShowQuantitiesInput = function (charge, subscription) {
21517
21708
  return shouldProcessCharge;
21518
21709
  };
21519
21710
  var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
21520
- var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
21711
+ if (!editedSubscription || editedSubscription.quantity === undefined) {
21712
+ return { charges: [], quoteChange: undefined };
21713
+ }
21714
+ var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === editedSubscription.subscription.priceList.id; });
21521
21715
  var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
21522
21716
  var charges = [
21523
21717
  {
@@ -21602,6 +21796,38 @@ var getApplicablePriceTier = function (charge, currencyId, priceDecimals) {
21602
21796
  : "".concat(common.formatCurrency(selectedTier.price, currencyId, priceDecimals));
21603
21797
  };
21604
21798
 
21799
+ var ADDON_INDENTATION = 64;
21800
+ function findNonAddonSubscriptions(subscriptions) {
21801
+ return subscriptions.filter(function (subscription) {
21802
+ return (subscription.priceList.plan.addon === false || subscription.priceList.plan.addon === null) &&
21803
+ findParentSubscription(subscription, subscriptions) === undefined;
21804
+ });
21805
+ }
21806
+ function findAddonSubscriptions(parentSubscription, subscriptions) {
21807
+ var _a;
21808
+ var addonSubscriptionsIds = (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.map(function (addonSubscription) { return addonSubscription.id; });
21809
+ return subscriptions.filter(function (subscription) { return addonSubscriptionsIds === null || addonSubscriptionsIds === void 0 ? void 0 : addonSubscriptionsIds.includes(subscription.id); });
21810
+ }
21811
+ function findParentSubscription(subscription, subscriptions) {
21812
+ return subscriptions.find(function (parentSubscription) {
21813
+ var _a;
21814
+ return (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.some(function (addonSubscription) { return addonSubscription.id === subscription.id; });
21815
+ });
21816
+ }
21817
+ function hasUnpurchasedAddonPlans(priceList, currentSubscription) {
21818
+ var addonPlans = priceList.plan.addonPlans;
21819
+ var purchasedAddonPlans = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.addonSubscriptions;
21820
+ var unpurchasedAddonPlans = addonPlans === null || addonPlans === void 0 ? void 0 : addonPlans.filter(function (addonPlan) {
21821
+ return !(purchasedAddonPlans === null || purchasedAddonPlans === void 0 ? void 0 : purchasedAddonPlans.some(function (purchasedAddonPlan) { return purchasedAddonPlan.plan.id === addonPlan.id; }));
21822
+ });
21823
+ return unpurchasedAddonPlans && unpurchasedAddonPlans.length > 0;
21824
+ }
21825
+ // ID Cucumber will use to find the addon plan switch
21826
+ function addonPlanSwitchTestId(addonPlan) {
21827
+ var name = addonPlan.name.toLowerCase().replace(/ /g, '-');
21828
+ return "addon-plan-switch-".concat(name);
21829
+ }
21830
+
21605
21831
  var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
21606
21832
  // Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
21607
21833
  var createPlanDescription = function (priceList) {
@@ -21647,11 +21873,9 @@ var getActivePlanPriceData = function (priceList, selectedPriceList) {
21647
21873
  };
21648
21874
  };
21649
21875
  var isPriceListDisabled = function (_a) {
21650
- var _b;
21651
21876
  var priceList = _a.priceList, upgradingSubscription = _a.upgradingSubscription;
21652
- var canPurchaseFeatureAddons = priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21653
- // TODO: rename hasPlanAddons to canPurchasePlanAddons and check whether we can purchase plan addons
21654
- var hasPlanAddons = (((_b = priceList.plan.addonPlans) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0;
21877
+ var canPurchaseFeatureAddons = hasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21878
+ var canPurchasePlanAddons = hasUnpurchasedAddonPlans(priceList, upgradingSubscription);
21655
21879
  var existingSubscriptionInTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
21656
21880
  var isUpgradingSubscriptionPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21657
21881
  // When should priceList be disabled?
@@ -21661,7 +21885,7 @@ var isPriceListDisabled = function (_a) {
21661
21885
  // AND cannot purchase add-on plans
21662
21886
  // AND selfServiceBuy is false
21663
21887
  if (isUpgradingSubscriptionPriceList) {
21664
- return !existingSubscriptionInTrial && !canPurchaseFeatureAddons && !hasPlanAddons;
21888
+ return !existingSubscriptionInTrial && !canPurchaseFeatureAddons && !canPurchasePlanAddons;
21665
21889
  }
21666
21890
  return false;
21667
21891
  };
@@ -21696,8 +21920,7 @@ var CheckoutBarSummarySection = function (_a) {
21696
21920
  var open = _a.open, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription;
21697
21921
  // Context
21698
21922
  var apiHost = react.useContext(BunnyContext).apiHost;
21699
- var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21700
- var _c = react.useContext(PlanManagerQuoteContext), quote = _c.quote, isQuotePending = _c.isQuotePending, isAddonPlanLoading = _c.isAddonPlanLoading, isFeatureAddonsLoading = _c.isFeatureAddonsLoading;
21923
+ var _c = react.useContext(QuoteContext), quote = _c.quote, isQuotePending = _c.isQuotePending, isUpdatingQuote = _c.isUpdatingQuote;
21701
21924
  var accountId = react.useContext(PaymentContext).accountId;
21702
21925
  // Hooks
21703
21926
  var token = useToken();
@@ -21717,60 +21940,28 @@ var CheckoutBarSummarySection = function (_a) {
21717
21940
  });
21718
21941
  // When should checkout button be disabled?
21719
21942
  var isUpgradingSubscription = selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
21720
- var disableCheckoutButton = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
21721
- !selectedPriceList ||
21722
- isFetching ||
21723
- !isUpgradingSubscription ||
21724
- open);
21943
+ var disableCheckoutButton = Boolean(!selectedPriceList || isFetching || !isUpgradingSubscription || open);
21725
21944
  var checkoutButtonDisabled = (quote === null || quote === void 0 ? void 0 : quote.amountDue) && (quote === null || quote === void 0 ? void 0 : quote.amountDue) > 0 ? false : disableCheckoutButton;
21726
21945
  var activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21727
21946
  var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === common.ChargeType.USAGE;
21728
21947
  var hasPaymentPlugins = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length);
21729
- 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
21948
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : '') }, { children: [quote && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'items-center justify-between w-full' : 'flex-col') }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-font-medium bunny-text-right", style: { fontSize: '11px' } }, { children: "TOTAL" })), jsxRuntime.jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] }))), jsxRuntime.jsx(CheckoutButton, { checkoutButtonDisabled: checkoutButtonDisabled || !hasPaymentPlugins, onClickCheckout: onClickCheckout, loading: isQuotePending || isUpdatingQuote, tooltipText: !hasPaymentPlugins
21730
21949
  ? 'Cannot checkout. No valid payment plugins found. Please contact your administrator.'
21731
21950
  : undefined })] })));
21732
21951
  };
21733
21952
 
21734
- var PlanPickerCheckoutBarWrapper = function (_a) {
21735
- var editingQuote = _a.editingQuote, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21736
- // Context
21737
- var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21738
- var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
21739
- if (!selectedPriceList)
21740
- return null;
21741
- return (jsxRuntime.jsx(PlanPickerCheckoutBar, { editingQuote: editingQuote, handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
21742
- };
21743
21953
  var PlanPickerCheckoutBar = function (_a) {
21744
- var editingQuote = _a.editingQuote, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21954
+ var selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21745
21955
  // Context
21746
21956
  var _b = react.useContext(SubscriptionsContext), upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
21747
- var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21748
- var apiHost = react.useContext(BunnyContext).apiHost;
21749
- var quote = react.useContext(PlanManagerQuoteContext).quote;
21957
+ var _c = react.useContext(QuoteContext), quote = _c.quote, onChangeQuantity = _c.onChangeQuantity, getFeatureQuantity = _c.getFeatureQuantity, isFeatureAddonsLoading = _c.isFeatureAddonsLoading, isUpdatingQuote = _c.isUpdatingQuote;
21750
21958
  // Local state
21751
- var _c = react.useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
21959
+ var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
21752
21960
  // Hooks
21753
21961
  var token = useToken();
21754
21962
  var showSuccessNotification = common.useSuccessNotification();
21755
21963
  var queryClient = reactQuery.useQueryClient();
21756
21964
  var isMobile = common.useIsMobile();
21757
- var defaultPaymentMethod = usePaymentMethod({
21758
- token: token,
21759
- apiHost: apiHost,
21760
- }).defaultPaymentMethod;
21761
- // Mutations
21762
- var updateCharge = reactQuery.useMutation({
21763
- mutationFn: quoteChargeUpdate,
21764
- onSuccess: function () {
21765
- queryClient.invalidateQueries({
21766
- queryKey: common.QueryKeyFactory.default.createObjectKey({
21767
- objectName: 'editingQuote',
21768
- id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21769
- token: token,
21770
- }),
21771
- });
21772
- },
21773
- }).mutate;
21774
21965
  var handleCheckoutSuccess = function () {
21775
21966
  queryClient.invalidateQueries({
21776
21967
  queryKey: common.QueryKeyFactory.default.createTableKey({
@@ -21785,57 +21976,31 @@ var PlanPickerCheckoutBar = function (_a) {
21785
21976
  showSuccessNotification('Your subscription has been created', 'Checkout successful');
21786
21977
  onCheckoutSuccess();
21787
21978
  };
21788
- function onChangeQuantity(chargeId, quantity) {
21789
- 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); });
21790
- var quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) {
21791
- var _a;
21792
- return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === chargeId;
21793
- });
21794
- if (!token) {
21795
- console.error('token is undefined');
21796
- return;
21797
- }
21798
- if (!quoteCharge) {
21799
- console.error('quoteCharge not found');
21800
- return;
21801
- }
21802
- updateCharge({
21803
- quoteChargeId: quoteCharge.id,
21804
- quantity: quantity,
21805
- apiHost: apiHost,
21806
- token: token,
21807
- });
21808
- }
21809
- // Reset query key on unmount
21810
- react.useEffect(function () {
21811
- return function () {
21812
- queryClient.invalidateQueries({
21813
- queryKey: common.QueryKeyFactory.default.calculatedPricesKey({
21814
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21815
- quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
21816
- token: token,
21817
- }),
21818
- });
21819
- };
21820
- }, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
21821
21979
  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) {
21822
- var _a;
21823
- 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); });
21824
- var chargeQuantity = (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceList) === null || _a === void 0 ? void 0 : _a.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); })) === null || _a === void 0 ? void 0 : _a.quantity;
21825
- if (charge.chargeType === common.ChargeType.USAGE)
21980
+ var _a, _b;
21981
+ if (!canEditChargeQuantity(charge))
21826
21982
  return null;
21827
- if (!quote)
21983
+ if (!((_a = charge.feature) === null || _a === void 0 ? void 0 : _a.id))
21984
+ throw new Error('Charge feature is undefined');
21985
+ var isFeatureAddon = charge.featureAddon;
21986
+ var quantity = getFeatureQuantity((_b = charge.feature) === null || _b === void 0 ? void 0 : _b.id, charge.id);
21987
+ var maybeIsChargeLoading = isFeatureAddon && isFeatureAddonsLoading;
21988
+ var showInput = quantity && selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
21989
+ if (!showInput)
21828
21990
  return null;
21829
- if (!chargeQuantity)
21991
+ // if charge is a feature addon, and a corresponding quote charge is not found in quote, return null
21992
+ if (isFeatureAddon && !featureAddonInQuote(selectedPriceList, charge, quote)) {
21830
21993
  return null;
21831
- return (jsxRuntime.jsx(CheckoutBarInput, { disabled: !chargeQuantity, charge: charge, quantity: chargeQuantity !== null && chargeQuantity !== void 0 ? chargeQuantity : 0, selectedPriceList: selectedPriceList, onQuantityChanged: function (quantity) {
21994
+ }
21995
+ var isDisabled = !quote || maybeIsChargeLoading || !selectedPriceList || !charge.selfServiceQuantity;
21996
+ return (jsxRuntime.jsx(CheckoutBarInput, { disabled: isDisabled, charge: charge, quantity: quantity, onQuantityChanged: function (quantity) {
21832
21997
  onChangeQuantity(charge.id, quantity);
21833
21998
  } }, index));
21834
- }) })), 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 })] })));
21999
+ }) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription }), jsxRuntime.jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: function (error) { return handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error); }, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: isUpdatingQuote })] })));
21835
22000
  };
21836
22001
 
21837
22002
  // WARNING: There is a preview button on APP that will need to be changed if this query is changed
21838
- 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 }";
22003
+ var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n showPriceAsMonthly\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n addon\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n featureAddon\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n priceList {\n id\n }\n feature {\n name\n unitName\n id\n }\n }\n }\n }\n }";
21839
22004
  var getPriceListChangeOptions = function (_a) {
21840
22005
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
21841
22006
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21897,37 +22062,6 @@ var StyledRadioGroup = styled__default["default"].div(templateObject_2 || (templ
21897
22062
  });
21898
22063
  var templateObject_1$4, templateObject_2;
21899
22064
 
21900
- var calculateNewQuantity = function (priceList, currentQuantity) {
21901
- if (currentQuantity === void 0) { currentQuantity = 1; }
21902
- var priceListRecurringCharge = priceList === null || priceList === void 0 ? void 0 : priceList.charges.find(function (priceListCharge) {
21903
- return priceListCharge.chargeType === "RECURRING" ||
21904
- priceListCharge.chargeType === "USAGE";
21905
- });
21906
- var quantityMax = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMax) || Number.POSITIVE_INFINITY;
21907
- var quantityMin = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMin) || Number.NEGATIVE_INFINITY;
21908
- var selfServiceQuantity = priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.selfServiceQuantity;
21909
- // If self service quantity is disabled, return the min quantity
21910
- if (!selfServiceQuantity && quantityMin) {
21911
- return quantityMin;
21912
- }
21913
- // If the current quantity is greater than the max quantity, return the max quantity
21914
- else if (currentQuantity > quantityMax) {
21915
- return quantityMax;
21916
- }
21917
- // If the current quantity is less than the min quantity, return the min quantity
21918
- else if (currentQuantity < quantityMin) {
21919
- return quantityMin;
21920
- }
21921
- // If the current quantity is between the min and max quantity, return the current quantity
21922
- else if (currentQuantity <= quantityMax && currentQuantity >= quantityMin) {
21923
- return currentQuantity;
21924
- }
21925
- // If all else fails, return 1
21926
- else {
21927
- return 1;
21928
- }
21929
- };
21930
-
21931
22065
  var NextPriceListButton = function (_a) {
21932
22066
  var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21933
22067
  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 () {
@@ -22069,31 +22203,6 @@ var PriceListCardTitle = function (_a) {
22069
22203
  : ' ' }))), 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 }))] })));
22070
22204
  };
22071
22205
 
22072
- var PriceListSelectorContext = react.createContext({});
22073
- var showInfoNotification = common.useInfoNotification();
22074
- function PriceListSelectorProvider(_a) {
22075
- var children = _a.children;
22076
- // Context
22077
- var isInPreviewMode = react.useContext(SubscriptionsContext).isInPreviewMode;
22078
- var _b = react.useContext(QuotePreviewContext), quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
22079
- // Handlers
22080
- var onChangePriceList = react.useCallback(function (selectedPriceList) {
22081
- if (isInPreviewMode)
22082
- return showInfoNotification('You are in preview mode');
22083
- return setQuotePreviewData({
22084
- priceList: selectedPriceList,
22085
- quantity: calculateNewQuantity(selectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
22086
- });
22087
- }, [isInPreviewMode, setQuotePreviewData, showInfoNotification]);
22088
- // Reset quote preview data when parent (should be PlanPicker) is unmounted
22089
- react.useEffect(function () {
22090
- return function () {
22091
- setQuotePreviewData({});
22092
- };
22093
- }, [setQuotePreviewData]);
22094
- return (jsxRuntime.jsx(PriceListSelectorContext.Provider, __assign({ value: { onChangePriceList: onChangePriceList } }, { children: children })));
22095
- }
22096
-
22097
22206
  var PLAN_GRID_PADDING = 4;
22098
22207
  var PlanPickerGridCell = function (_a) {
22099
22208
  var children = _a.children, noBorder = _a.noBorder;
@@ -22104,18 +22213,14 @@ var PlanPickerGridCell = function (_a) {
22104
22213
  };
22105
22214
 
22106
22215
  var PriceListCardDesktop = function (_a) {
22107
- 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;
22108
- var onChangePriceList = react.useContext(PriceListSelectorContext).onChangePriceList;
22109
- function handleChangePriceList(priceList) {
22110
- onChangePriceList(priceList);
22111
- }
22216
+ var hideButton = _a.hideButton, description = _a.description, disableSelectCurrentPlan = _a.disableSelectCurrentPlan, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays, noBorder = _a.noBorder, onClickPriceListCard = _a.onClickPriceListCard;
22112
22217
  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 () {
22113
22218
  if (!disableSelectCurrentPlan) {
22114
22219
  if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US) {
22115
22220
  window.open(priceList.plan.contactUsUrl, '_blank');
22116
22221
  }
22117
22222
  else {
22118
- handleChangePriceList(priceList);
22223
+ onClickPriceListCard === null || onClickPriceListCard === void 0 ? void 0 : onClickPriceListCard(priceList);
22119
22224
  }
22120
22225
  }
22121
22226
  }, style: {
@@ -22129,24 +22234,23 @@ var CheckIcon = function (_a) {
22129
22234
  };
22130
22235
 
22131
22236
  var PriceListCardMobile = function (_a) {
22132
- 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;
22237
+ var description = _a.description, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays, disableOnClickPriceListCard = _a.disableOnClickPriceListCard, onClickPriceListCard = _a.onClickPriceListCard;
22133
22238
  var brandColor = react.useContext(BrandContext).brandColor;
22134
- var onChangePriceList = react.useContext(PriceListSelectorContext).onChangePriceList;
22135
22239
  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 () {
22136
- if (!disableOnClick)
22137
- onChangePriceList(priceList);
22240
+ if (!disableOnClickPriceListCard)
22241
+ onClickPriceListCard === null || onClickPriceListCard === void 0 ? void 0 : onClickPriceListCard(priceList);
22138
22242
  }, style: {
22139
22243
  minWidth: '220px',
22140
22244
  borderColor: isSelected ? brandColor : common.SLATE_200,
22141
22245
  } }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "bunny-absolute", style: {
22142
22246
  top: '10px',
22143
22247
  right: '10px',
22144
- } }, { 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 })] }))] })));
22248
+ } }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableSelectCurrentPlan: disableOnClickPriceListCard, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
22145
22249
  };
22146
22250
 
22147
22251
  var PriceListCard = function (_a) {
22148
22252
  var _b;
22149
- var hideButton = _a.hideButton, isSelected = _a.isSelected, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, noBorder = _a.noBorder;
22253
+ var hideButton = _a.hideButton, isSelected = _a.isSelected, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, noBorder = _a.noBorder, onClickPriceListCard = _a.onClickPriceListCard;
22150
22254
  // Context
22151
22255
  var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
22152
22256
  var isMobile = common.useIsMobile();
@@ -22170,7 +22274,9 @@ var PriceListCard = function (_a) {
22170
22274
  return null;
22171
22275
  }
22172
22276
  var feature = activeCharge.feature;
22173
- 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 }));
22277
+ return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan,
22278
+ // TODO: naming mismatch disableOnClickPriceListCard vs disableSelectCurrentPlan, maybe also functionality mismatch? (ignore for now, mobile won't ever show this currently)
22279
+ disableOnClickPriceListCard: disableSelectCurrentPlan, onClickPriceListCard: onClickPriceListCard })) : (jsxRuntime.jsx(PriceListCardDesktop, { hideButton: hideButton, description: description, disableSelectCurrentPlan: disableSelectCurrentPlan, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, noBorder: noBorder, onClickPriceListCard: onClickPriceListCard }));
22174
22280
  };
22175
22281
 
22176
22282
  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");
@@ -22232,7 +22338,7 @@ var quoteChargeDelete = function (_a) {
22232
22338
 
22233
22339
  var useQuoteUpdateFeatureAddon = function (quote, featureAddon) {
22234
22340
  var apiHost = react.useContext(BunnyContext).apiHost;
22235
- var _a = react.useContext(PlanManagerQuoteContext), addFeatureAddonLoading = _a.addFeatureAddonLoading, removeFeatureAddonLoading = _a.removeFeatureAddonLoading;
22341
+ var _a = react.useContext(QuoteContext), addFeatureAddonLoading = _a.addFeatureAddonLoading, removeFeatureAddonLoading = _a.removeFeatureAddonLoading;
22236
22342
  var token = useToken();
22237
22343
  var queryClient = reactQuery.useQueryClient();
22238
22344
  var addedQuoteChargeId = react.useRef();
@@ -22246,7 +22352,7 @@ var useQuoteUpdateFeatureAddon = function (quote, featureAddon) {
22246
22352
  }
22247
22353
  var _b = reactQuery.useMutation({
22248
22354
  mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
22249
- var quoteCharge;
22355
+ var quoteChangeId, quoteCharge;
22250
22356
  return __generator(this, function (_a) {
22251
22357
  switch (_a.label) {
22252
22358
  case 0:
@@ -22254,9 +22360,11 @@ var useQuoteUpdateFeatureAddon = function (quote, featureAddon) {
22254
22360
  throw new Error('Token is required');
22255
22361
  if (!quote)
22256
22362
  throw new Error('Editing quote is required');
22363
+ quoteChangeId = findQuoteChangeForFeatureAddon(quote);
22364
+ if (!quoteChangeId)
22365
+ throw new Error('No available quote change for feature add-on');
22257
22366
  return [4 /*yield*/, quoteChargeCreate({
22258
- // TODO: get the correct quoteChangeId
22259
- quoteChangeId: quote === null || quote === void 0 ? void 0 : quote.quoteChanges[quote.quoteChanges.length - 1].id,
22367
+ quoteChangeId: quoteChangeId.id,
22260
22368
  priceListChargeId: featureAddon.id,
22261
22369
  startDate: quote === null || quote === void 0 ? void 0 : quote.startDate,
22262
22370
  apiHost: apiHost,
@@ -22364,24 +22472,23 @@ function FeatureAddonsList(_a) {
22364
22472
  }) }));
22365
22473
  }
22366
22474
  function FeatureAddonRow(_a) {
22367
- var _b, _c;
22475
+ var _b;
22368
22476
  var featureAddon = _a.featureAddon, priceList = _a.priceList;
22369
- var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
22370
22477
  var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
22371
- var quote = react.useContext(PlanManagerQuoteContext).quote;
22478
+ var _c = react.useContext(QuoteContext), quote = _c.quote, selectedPriceList = _c.selectedPriceList;
22372
22479
  var _d = useQuoteUpdateFeatureAddon(quote, featureAddon), handleAddFeatureAddon = _d.handleAddFeatureAddon, handleRemoveFeatureAddon = _d.handleRemoveFeatureAddon, isPending = _d.isPending, isChecked = _d.isChecked;
22373
22480
  var brandColor = react.useContext(BrandContext).brandColor;
22374
- var isPriceListSelected = ((_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id) === priceList.id;
22481
+ var isPriceListSelected = (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id) === priceList.id;
22375
22482
  var isPurchased = isAddonPurchased(featureAddon, upgradingSubscription);
22376
22483
  var isDisabled = !isPriceListSelected || isPurchased;
22377
22484
  var checked = isChecked || isPurchased;
22378
22485
  var tooltipContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { children: common.formatCurrency(featureAddon.basePrice, priceList.currencyId) }), featureAddon.chargeType === common.ChargeType.RECURRING && (jsxRuntime.jsx("div", { children: PriceDescriptionString({
22379
- unitName: (_c = featureAddon.feature) === null || _c === void 0 ? void 0 : _c.unitName,
22486
+ unitName: (_b = featureAddon.feature) === null || _b === void 0 ? void 0 : _b.unitName,
22380
22487
  showPriceAsMonthly: priceList.showPriceAsMonthly,
22381
22488
  periodMonths: priceList.periodMonths,
22382
22489
  doesPlanHaveFlatFeeCharges: false,
22383
22490
  }) }))] }));
22384
- 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) {
22491
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-flex-wrap bunny-items-center bunny-justify-between bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [checked ? (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" })) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: common.SLATE_200, size: "15px" })), featureAddon.name] })), jsxRuntime.jsx(antd.Tooltip, __assign({ title: tooltipContent }, { children: jsxRuntime.jsx(icons.InfoCircleOutlined, { className: "bunny-text-gray-500", size: 15 }) }))] })), jsxRuntime.jsx(antd.Switch, { id: featureAddonSwitchTestId(featureAddon), size: "small", loading: isPending, disabled: isDisabled || !quote, checked: checked, onChange: function (checked) {
22385
22492
  if (checked) {
22386
22493
  handleAddFeatureAddon();
22387
22494
  }
@@ -22624,6 +22731,7 @@ var FeatureTitle = function (_a) {
22624
22731
  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 })));
22625
22732
  };
22626
22733
 
22734
+ var showErrorNotification = common.useErrorNotification();
22627
22735
  var PlanAddonsCard = function (_a) {
22628
22736
  var selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, addonPlans = _a.addonPlans, selectedProduct = _a.selectedProduct, priceListChangeOptions = _a.priceListChangeOptions, selectedBillingPeriod = _a.selectedBillingPeriod;
22629
22737
  var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
@@ -22644,24 +22752,22 @@ var PlanAddonsCard = function (_a) {
22644
22752
  }
22645
22753
  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) {
22646
22754
  var isPurchased = isAddonPlanPurchased(plan);
22647
- if (selectedBillingPeriod === undefined) {
22648
- return null;
22649
- }
22650
22755
  return (jsxRuntime.jsx(PlanAddonsCardRow, { plan: plan, selectedPriceList: selectedPriceList, setSelectedAddonPriceList: setSelectedAddonPriceList, isPurchased: isPurchased || false, selectedBillingPeriod: selectedBillingPeriod, priceListChangeOptions: priceListChangeOptions }));
22651
22756
  }) }))] })));
22652
22757
  };
22653
22758
  function PlanAddonsCardRow(_a) {
22654
22759
  var _b, _c;
22655
22760
  var plan = _a.plan, selectedPriceList = _a.selectedPriceList, setSelectedAddonPriceList = _a.setSelectedAddonPriceList, isPurchased = _a.isPurchased, selectedBillingPeriod = _a.selectedBillingPeriod, priceListChangeOptions = _a.priceListChangeOptions;
22656
- var _d = react.useContext(PlanManagerQuoteContext), quote = _d.quote, setIsAddonPlanLoading = _d.setIsAddonPlanLoading;
22761
+ var _d = react.useContext(QuoteContext), quote = _d.quote, setIsAddonPlanLoading = _d.setIsAddonPlanLoading;
22657
22762
  var _e = useToggleAddonPlan(quote, plan, billingPeriodConverter(selectedBillingPeriod), selectedPriceList, setIsAddonPlanLoading), isPending = _e.isPending, addedQuoteChange = _e.addedQuoteChange, addAddonQuoteChange = _e.addAddonQuoteChange, deleteQuoteChange = _e.deleteQuoteChange;
22658
22763
  var addonPriceListId = (_b = plan.priceLists.find(function (priceList) { return priceList.periodMonths === billingPeriodConverter(selectedBillingPeriod); })) === null || _b === void 0 ? void 0 : _b.id;
22659
22764
  var addonPriceList = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists.find(function (priceList) { return priceList.id === addonPriceListId; });
22660
22765
  var activeCharge = (_c = getActivePlanPriceData(addonPriceList, addonPriceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
22661
22766
  if (!addonPriceList) {
22767
+ showErrorNotification('Addon price list not found', 'Client Error');
22662
22768
  return null;
22663
22769
  }
22664
- 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) {
22770
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-justify-between bunny-items-center bunny-w-full bunny-p-4 bunny-rounded-md bunny-border bunny-bg-white bunny-shadow bunny-mb-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-orange-600", style: { fontSize: '16px' } }, { children: plan.name })), jsxRuntime.jsx(PriceListCardDescription, { description: plan.description }), jsxRuntime.jsx(PriceListCardPrice, { priceList: addonPriceList, fontSize: "16px" }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.feature, priceList: addonPriceList }), jsxRuntime.jsx(antd.Button, __assign({ type: "link", onClick: function () { return setSelectedAddonPriceList(addonPriceList); } }, { children: jsxRuntime.jsx(icons.InfoCircleOutlined, {}) }))] })), jsxRuntime.jsx(antd.Switch, { id: addonPlanSwitchTestId(plan), loading: isPending, checked: addedQuoteChange || isPurchased, onChange: function (checked) {
22665
22771
  if (checked) {
22666
22772
  addAddonQuoteChange();
22667
22773
  }
@@ -22679,9 +22785,43 @@ function AddonPlanModal(_a) {
22679
22785
  } }, { 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 }))] })) })));
22680
22786
  }
22681
22787
 
22788
+ var ADDON_PLANS_QUERY = function () { return "\n query PriceList($id: ID!) {\n priceList (id: $id) {\n addonPlans {\n addon\n basePrice\n code\n contactUsLabel\n contactUsUrl\n description\n id\n isVisible\n name\n position\n pricingDescription\n pricingStyle\n productId\n selfServiceBuy\n selfServiceCancel\n selfServiceRenew\n priceLists {\n id\n periodMonths\n showPriceAsMonthly\n monthlyBasePrice\n basePrice\n currencyId\n plan {\n pricingStyle\n }\n }\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n }\n }\n"; };
22789
+ var getAddonPlans = function (_a) {
22790
+ var token = _a.token, id = _a.id, apiHost = _a.apiHost;
22791
+ return __awaiter(void 0, void 0, void 0, function () {
22792
+ var response;
22793
+ var _b;
22794
+ return __generator(this, function (_c) {
22795
+ switch (_c.label) {
22796
+ case 0: return [4 /*yield*/, gqlRequest({
22797
+ query: ADDON_PLANS_QUERY(),
22798
+ token: token,
22799
+ vars: { id: id },
22800
+ apiHost: apiHost,
22801
+ })];
22802
+ case 1:
22803
+ response = _c.sent();
22804
+ return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.priceList) === null || _b === void 0 ? void 0 : _b.addonPlans];
22805
+ }
22806
+ });
22807
+ });
22808
+ };
22809
+
22682
22810
  var PriceListGridDesktop = function (_a) {
22683
- 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;
22684
- var addonPlans = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.addonPlans;
22811
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, selectedBillingPeriod = _a.selectedBillingPeriod, onClickPriceListCard = _a.onClickPriceListCard;
22812
+ var token = useToken();
22813
+ var apiHost = react.useContext(BunnyContext).apiHost;
22814
+ var addonPlans = reactQuery.useQuery({
22815
+ queryKey: ['addonPlans', selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id],
22816
+ queryFn: function () {
22817
+ if (!(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
22818
+ throw new Error('Selected price list ID is required');
22819
+ }
22820
+ var addonPlans = getAddonPlans({ id: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, token: token, apiHost: apiHost });
22821
+ return addonPlans;
22822
+ },
22823
+ enabled: !!(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id),
22824
+ }).data;
22685
22825
  var displayPriceLists = react.useMemo(function () {
22686
22826
  return getAvailablePlansAndPriceLists({
22687
22827
  availablePriceLists: availablePriceLists,
@@ -22692,6 +22832,9 @@ var PriceListGridDesktop = function (_a) {
22692
22832
  }, [availablePriceLists, priceListChangeOptions, priceListStart]).displayPriceLists;
22693
22833
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22694
22834
  var plansToDisplay = Math.min((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3, availablePriceLists.length);
22835
+ var hasFeatureAddons = displayPriceLists.some(function (priceList) {
22836
+ return priceList.charges.some(function (charge) { return charge.featureAddon; });
22837
+ });
22695
22838
  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: {
22696
22839
  gridTemplateColumns: everythingInPlus
22697
22840
  ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
@@ -22701,8 +22844,8 @@ var PriceListGridDesktop = function (_a) {
22701
22844
  var doesPrevPriceListExist = displayPriceLists[index - 1];
22702
22845
  if (!priceList)
22703
22846
  return jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
22704
- return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22705
- }), (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] })));
22847
+ return (jsxRuntime.jsx(PriceListCard, { onClickPriceListCard: onClickPriceListCard, isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22848
+ }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }), hasFeatureAddons && (jsxRuntime.jsx(PlanFeatureAddons, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay }))] }))] }))] })), selectedPriceList && addonPlans && selectedBillingPeriod ? (jsxRuntime.jsx(PlanAddonsCard, { selectedPriceList: selectedPriceList, subscriptions: subscriptions, addonPlans: addonPlans, selectedProduct: selectedProduct, priceListChangeOptions: priceListChangeOptions, selectedBillingPeriod: selectedBillingPeriod })) : null] })));
22706
22849
  };
22707
22850
 
22708
22851
  var Text$9 = antd.Typography.Text;
@@ -22716,13 +22859,13 @@ var PriceListCardFeature = function (_a) {
22716
22859
 
22717
22860
  var PriceListGridMobile = function (_a) {
22718
22861
  var _b, _c, _d, _e;
22719
- var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
22862
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, onClickPriceListCard = _a.onClickPriceListCard;
22720
22863
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22721
22864
  var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
22722
22865
  var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
22723
22866
  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; });
22724
22867
  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) {
22725
- return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22868
+ return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays, onClickPriceListCard: onClickPriceListCard }, index));
22726
22869
  }) })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
22727
22870
  ? everythingInPlusString({ priceList: prevPriceList })
22728
22871
  : '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)); }) }))] }));
@@ -22730,24 +22873,27 @@ var PriceListGridMobile = function (_a) {
22730
22873
 
22731
22874
  var PriceListGrid = function (_a) {
22732
22875
  var _b, _c;
22733
- 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;
22876
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, upgradingSubscriptionState = _a.upgradingSubscriptionState, selectedBillingPeriod = _a.selectedBillingPeriod, onClickPriceListCard = _a.onClickPriceListCard;
22734
22877
  // Hooks
22735
22878
  var isMobile = common.useIsMobile();
22736
22879
  // Derived state
22737
22880
  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); });
22738
22881
  var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), 'days');
22739
- 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 }));
22882
+ return isMobile ? (jsxRuntime.jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays,
22883
+ // TODO: add selectedBillingPeriod={selectedBillingPeriod} here too (ignore for now, mobile won't ever show this currently)
22884
+ onClickPriceListCard: onClickPriceListCard })) : (jsxRuntime.jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays, selectedBillingPeriod: selectedBillingPeriod, onClickPriceListCard: onClickPriceListCard }));
22740
22885
  };
22741
22886
 
22742
22887
  var createAvailableBillingPeriods = function (priceLists, selectedProduct) {
22743
22888
  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); });
22744
22889
  };
22890
+ var showInfoNotification = common.useInfoNotification();
22745
22891
  var PriceListSelector = function (_a) {
22746
22892
  var _b;
22747
- var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions;
22893
+ var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, priceListChangeOptions = _a.priceListChangeOptions, subscriptions = _a.subscriptions;
22748
22894
  // Context
22749
22895
  var isInPreviewMode = react.useContext(SubscriptionsContext).isInPreviewMode;
22750
- var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22896
+ var _c = react.useContext(QuoteContext), selectedPriceList = _c.selectedPriceList, onChangeSelectedPriceList = _c.onChangeSelectedPriceList, onClearQuote = _c.onClearQuote;
22751
22897
  var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
22752
22898
  // Local state
22753
22899
  var _d = react.useState(), selectedProduct = _d[0], setSelectedProduct = _d[1];
@@ -22764,16 +22910,15 @@ var PriceListSelector = function (_a) {
22764
22910
  }, [priceListChangeOptions, selectedBillingPeriod, selectedProduct]);
22765
22911
  // Handlers
22766
22912
  var onChangeBillingPeriod = react.useCallback(function (billingPeriod) {
22767
- var _a, _b;
22913
+ var _a;
22768
22914
  setSelectedBillingPeriod(billingPeriod);
22769
22915
  setPriceListStart(0);
22770
- if ((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) &&
22771
- billingPeriod !== periodMonthsConverter((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.periodMonths)) {
22772
- var availablePriceLists_1 = ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return periodMonthsConverter(priceList.periodMonths) === billingPeriod; })) || [];
22916
+ if (selectedPriceList &&
22917
+ billingPeriod !== periodMonthsConverter(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.periodMonths)) {
22918
+ var availablePriceLists_1 = ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) { return periodMonthsConverter(priceList.periodMonths) === billingPeriod; })) || [];
22773
22919
  var newSelectedPriceList = availablePriceLists_1.find(function (priceList) {
22774
- var _a;
22775
22920
  return periodMonthsConverter(priceList.periodMonths) === billingPeriod &&
22776
- priceList.plan.id === ((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.plan.id) &&
22921
+ priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id) &&
22777
22922
  !isPriceListDisabled({
22778
22923
  priceList: priceList,
22779
22924
  upgradingSubscription: upgradingSubscription,
@@ -22781,19 +22926,16 @@ var PriceListSelector = function (_a) {
22781
22926
  });
22782
22927
  var isPriceListCurrentSubscription = newSelectedPriceList && (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
22783
22928
  if (newSelectedPriceList && !isPriceListCurrentSubscription) {
22784
- setQuotePreviewData({
22785
- priceList: newSelectedPriceList,
22786
- quantity: calculateNewQuantity(newSelectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
22787
- });
22929
+ onChangeSelectedPriceList(newSelectedPriceList);
22788
22930
  }
22789
22931
  else if (isPriceListCurrentSubscription) {
22790
- setQuotePreviewData({
22791
- priceList: newSelectedPriceList,
22792
- quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
22793
- });
22932
+ onChangeSelectedPriceList(newSelectedPriceList);
22933
+ }
22934
+ else {
22935
+ onClearQuote();
22794
22936
  }
22795
22937
  }
22796
- }, [quotePreviewData, priceListChangeOptions, upgradingSubscription, setQuotePreviewData]);
22938
+ }, [selectedPriceList, priceListChangeOptions, upgradingSubscription]);
22797
22939
  var onChangeProduct = react.useCallback(function (product) {
22798
22940
  var newAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, product);
22799
22941
  if (!(newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods.includes(billingPeriodConverter(selectedBillingPeriod)))) {
@@ -22839,7 +22981,7 @@ var PriceListSelector = function (_a) {
22839
22981
  // Set initial price list and initial quantity in quote preview data
22840
22982
  // Will also set the initial price list and quantity if the billing period is changed
22841
22983
  react.useEffect(function () {
22842
- var _a, _b, _c;
22984
+ var _a;
22843
22985
  var initialAvailablePriceLists = ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) {
22844
22986
  return periodMonthsConverter(priceList.periodMonths) === initialBillingPeriod &&
22845
22987
  priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
@@ -22853,15 +22995,16 @@ var PriceListSelector = function (_a) {
22853
22995
  priceList: initialPriceList,
22854
22996
  upgradingSubscription: upgradingSubscription,
22855
22997
  }) &&
22856
- !(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList)) {
22857
- 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;
22858
- setQuotePreviewData({
22859
- priceList: initialPriceList,
22860
- quantity: calculateNewQuantity(initialPriceList, initialQuantity),
22861
- });
22998
+ !selectedPriceList) {
22999
+ onChangeSelectedPriceList(initialPriceList);
22862
23000
  }
22863
23001
  }, [isInPreviewMode, subscriptions, upgradingSubscription, selectedBillingPeriod]);
22864
- 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 })] }));
23002
+ var onClickPriceListCard = react.useCallback(function (selectedPriceList) {
23003
+ if (isInPreviewMode)
23004
+ return showInfoNotification('You are in preview mode');
23005
+ return onChangeSelectedPriceList(selectedPriceList);
23006
+ }, [isInPreviewMode, showInfoNotification, onChangeSelectedPriceList]);
23007
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsxRuntime.jsx(PriceListGrid, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription, selectedBillingPeriod: selectedBillingPeriod, onClickPriceListCard: onClickPriceListCard })] }));
22865
23008
  };
22866
23009
 
22867
23010
  var PlanPicker = function () {
@@ -22870,7 +23013,6 @@ var PlanPicker = function () {
22870
23013
  var token = useToken();
22871
23014
  var apiHost = react.useContext(BunnyContext).apiHost;
22872
23015
  var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, upgradingSubscription = _b.upgradingSubscription;
22873
- var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
22874
23016
  // Queries
22875
23017
  var _c = reactQuery.useQuery({
22876
23018
  queryKey: common.QueryKeyFactory.default.createTableKey({
@@ -22895,7 +23037,7 @@ var PlanPicker = function () {
22895
23037
  },
22896
23038
  enabled: !areSubscriptionsLoading,
22897
23039
  }), priceListChangeOptions = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
22898
- 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 })) }));
23040
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0 ? (jsxRuntime.jsx(ErrorView, { message: "There are no plans available" })) : (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions })) }));
22899
23041
  };
22900
23042
 
22901
23043
  var Text$8 = antd.Typography.Text;
@@ -22911,36 +23053,22 @@ var PlanManager = function (_a) {
22911
23053
  // Context
22912
23054
  var token = useToken();
22913
23055
  var apiHost = react.useContext(BunnyContext).apiHost;
22914
- var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, upgradingSubscription = _b.upgradingSubscription, setUpgradingSubscription = _b.setUpgradingSubscription, subscriptionUpgradeId = _b.subscriptionUpgradeId, className = _b.className;
22915
- var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
23056
+ var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, className = _b.className;
23057
+ var _c = react.useContext(QuoteContext), onClearQuote = _c.onClearQuote, selectedPriceList = _c.selectedPriceList;
22916
23058
  // Local state
22917
- var _d = react.useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
22918
- var _e = react.useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
22919
- var _f = react.useState(false), isSticky = _f[0], setIsSticky = _f[1];
23059
+ var _d = react.useState(false), isSticky = _d[0], setIsSticky = _d[1];
22920
23060
  var stickyRef = react.useRef(null);
22921
23061
  // Hooks
22922
- var queryClient = reactQuery.useQueryClient();
22923
- var showSuccessNotification = common.useSuccessNotification();
22924
23062
  var showInfoNotification = common.useInfoNotification();
22925
- var defaultPaymentMethod = usePaymentMethod({
22926
- token: token,
22927
- apiHost: apiHost,
22928
- }).defaultPaymentMethod;
22929
23063
  // Queries
22930
- var _g = reactQuery.useQuery({
23064
+ var subscriptionsAreLoading = reactQuery.useQuery({
22931
23065
  queryKey: common.QueryKeyFactory.default.createTableKey({
22932
23066
  pluralType: 'subscriptions',
22933
23067
  token: token,
22934
23068
  }),
22935
23069
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
22936
23070
  enabled: false,
22937
- }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
22938
- react.useEffect(function () {
22939
- if (subscriptionUpgradeId && !upgradingSubscription) {
22940
- var subscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) { return subscription.id === subscriptionUpgradeId; });
22941
- setUpgradingSubscription(subscription);
22942
- }
22943
- }, [setUpgradingSubscription, subscriptionUpgradeId, subscriptions, upgradingSubscription]);
23071
+ }).isLoading;
22944
23072
  react.useEffect(function () {
22945
23073
  var observer = new IntersectionObserver(function (_a) {
22946
23074
  var entry = _a[0];
@@ -22960,35 +23088,14 @@ var PlanManager = function (_a) {
22960
23088
  observer.unobserve(el);
22961
23089
  };
22962
23090
  }, []);
22963
- // Handlers
22964
- var onSuccess = function () {
22965
- setEditingQuoteData(undefined);
22966
- queryClient.invalidateQueries({
22967
- queryKey: common.QueryKeyFactory.default.transactionsKey({ token: token }),
22968
- });
22969
- queryClient.invalidateQueries({
22970
- queryKey: common.QueryKeyFactory.default.createTableKey({
22971
- pluralType: 'subscriptions',
22972
- token: token,
22973
- }),
22974
- });
22975
- showSuccessNotification('Your plan has been updated', 'Payment successful');
22976
- setPayModalVisible(false);
22977
- };
22978
- var onCancel = function () {
22979
- setPayModalVisible(false);
22980
- };
22981
- var onFail = function (error) {
22982
- handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
22983
- };
22984
23091
  if (subscriptionsAreLoading && !isInPreviewMode)
22985
23092
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
22986
- 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 () {
22987
- if (isInPreviewMode)
22988
- return showInfoNotification('You are in preview mode');
22989
- setQuotePreviewData(undefined);
22990
- onChangePlanCancel();
22991
- }, 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(); } }) }))] })) })));
23093
+ return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [jsxRuntime.jsx(PreviewModeAdvisary, { isInPreviewMode: isInPreviewMode }), jsxRuntime.jsx(PageTitle, { onGoBack: function () {
23094
+ if (isInPreviewMode)
23095
+ return showInfoNotification('You are in preview mode');
23096
+ onClearQuote();
23097
+ onChangePlanCancel();
23098
+ }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: selectedPriceList && (jsxRuntime.jsx(PlanPickerCheckoutBar, { selectedPriceList: selectedPriceList, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } })) }))] })));
22992
23099
  };
22993
23100
 
22994
23101
  var useCancelSubscription = function () {
@@ -23007,25 +23114,6 @@ var useCancelSubscription = function () {
23007
23114
  }); };
23008
23115
  };
23009
23116
 
23010
- var ADDON_INDENTATION = 64;
23011
- function findNonAddonSubscriptions(subscriptions) {
23012
- return subscriptions.filter(function (subscription) {
23013
- return (subscription.priceList.plan.addon === false || subscription.priceList.plan.addon === null) &&
23014
- findParentSubscription(subscription, subscriptions) === undefined;
23015
- });
23016
- }
23017
- function findAddonSubscriptions(parentSubscription, subscriptions) {
23018
- var _a;
23019
- var addonSubscriptionsIds = (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.map(function (addonSubscription) { return addonSubscription.id; });
23020
- return subscriptions.filter(function (subscription) { return addonSubscriptionsIds === null || addonSubscriptionsIds === void 0 ? void 0 : addonSubscriptionsIds.includes(subscription.id); });
23021
- }
23022
- function findParentSubscription(subscription, subscriptions) {
23023
- return subscriptions.find(function (parentSubscription) {
23024
- var _a;
23025
- return (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.some(function (addonSubscription) { return addonSubscription.id === subscription.id; });
23026
- });
23027
- }
23028
-
23029
23117
  var AddonIndentation = function (_a) {
23030
23118
  var isLast = _a.isLast, indentation = _a.indentation, verticalMargin = _a.verticalMargin;
23031
23119
  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 } }))] })));
@@ -23163,16 +23251,20 @@ var FeatureBarChart = function (_a) {
23163
23251
  var StyledBarChart = defaultStyled(recharts.BarChart)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n .recharts-surface {\n overflow: visible;\n }\n"], ["\n .recharts-surface {\n overflow: visible;\n }\n"])));
23164
23252
  var templateObject_1$2;
23165
23253
 
23166
- var SubscriptionCardActions = function (_a) {
23167
- var _b;
23168
- var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
23254
+ var usePriceListChangeOptions = function (onChangePlanClick) {
23169
23255
  var apiHost = react.useContext(BunnyContext).apiHost;
23170
23256
  var token = useToken();
23171
- var isPaymentMethodLoading = usePaymentMethod({
23172
- accountId: subscription.accountId,
23173
- token: token,
23174
- apiHost: apiHost,
23175
- }).isLoading;
23257
+ var _a = reactQuery.useQuery({
23258
+ queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
23259
+ queryFn: function () { return getPriceListChangeOptions({ apiHost: apiHost, token: token }); },
23260
+ enabled: Boolean(onChangePlanClick),
23261
+ }), priceListChangeOptions = _a.data, arePriceListChangeOptionsLoading = _a.isLoading;
23262
+ return { priceListChangeOptions: priceListChangeOptions, arePriceListChangeOptionsLoading: arePriceListChangeOptionsLoading };
23263
+ };
23264
+
23265
+ var SubscriptionCardActions = function (_a) {
23266
+ var _b;
23267
+ var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription, isPaymentMethodLoading = _a.isPaymentMethodLoading;
23176
23268
  // Derived state
23177
23269
  var isSelfServiceCancelable = subscription.plan.selfServiceCancel;
23178
23270
  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; });
@@ -23220,18 +23312,38 @@ var getSubscriptionStatusText = function (subscription) {
23220
23312
  };
23221
23313
  var SubscriptionCardHeader = function (_a) {
23222
23314
  var _b, _c, _d, _e;
23223
- var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
23315
+ var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscription = _a.subscription;
23316
+ // Context
23224
23317
  var darkMode = react.useContext(BunnyContext).darkMode;
23225
23318
  var brandColor = react.useContext(BrandContext).brandColor;
23226
23319
  var subscriptionProductNameStyle = react.useContext(SubscriptionsContext).subscriptionProductNameStyle;
23227
- var isMobile = common.useIsMobile();
23228
23320
  // Derived state
23229
23321
  var trialDaysLeft = subscription === null || subscription === void 0 ? void 0 : subscription.daysLeftInTrial;
23230
23322
  var isTrial = isSubscriptionTrial(subscription);
23231
23323
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: {
23232
23324
  backgroundColor: darkMode ? 'var(--row-background-dark)' : '',
23233
- } }, { 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 }))] }))] })));
23325
+ } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_b = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _b === void 0 ? void 0 : _b.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: '11px', fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_c = subscription.product.name) === null || _c === void 0 ? void 0 : _c.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_d = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _d === void 0 ? void 0 : _d.name) && (jsxRuntime.jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_e = subscription.state) === null || _e === void 0 ? void 0 : _e.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft || 'N/A', " days left)") : ''] }))] }))] })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: jsxRuntime.jsx(SubscriptionStatusAndActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }) }))] })));
23234
23326
  };
23327
+ function SubscriptionStatusAndActions(_a) {
23328
+ var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscription = _a.subscription;
23329
+ // Context
23330
+ var apiHost = react.useContext(BunnyContext).apiHost;
23331
+ // Hooks
23332
+ var token = useToken();
23333
+ var isMobile = common.useIsMobile();
23334
+ var _b = usePriceListChangeOptions(onChangePlanClick), priceListChangeOptions = _b.priceListChangeOptions, arePriceListChangeOptionsLoading = _b.arePriceListChangeOptionsLoading;
23335
+ var isPaymentMethodLoading = usePaymentMethod({
23336
+ accountId: subscription.accountId,
23337
+ token: token,
23338
+ apiHost: apiHost,
23339
+ }).isLoading;
23340
+ // Derived state
23341
+ var cardActionsVisible = !isMobile;
23342
+ var showStatusSkeleton = arePriceListChangeOptionsLoading && cardActionsVisible;
23343
+ var showActionsSkeleton = arePriceListChangeOptionsLoading && !priceListChangeOptions;
23344
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showStatusSkeleton ? (jsxRuntime.jsx(antd.Skeleton.Input, { active: true, size: "small", style: { width: 180 } })) : (jsxRuntime.jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) }))), cardActionsVisible &&
23345
+ (showActionsSkeleton ? (jsxRuntime.jsx(antd.Skeleton.Button, { active: true, size: "default", style: { width: 100 } })) : (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription, isPaymentMethodLoading: isPaymentMethodLoading })))] }));
23346
+ }
23235
23347
 
23236
23348
  var SubscriptionChargeTotal = function (_a) {
23237
23349
  var charge = _a.charge, subscription = _a.subscription;
@@ -23371,12 +23483,12 @@ var ADDON_CARD_COLUMNS = [
23371
23483
  ];
23372
23484
  var SubscriptionCardDesktop = function (_a) {
23373
23485
  var _b;
23374
- var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription, isAddon = _a.isAddon;
23486
+ var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscription = _a.subscription, isAddon = _a.isAddon;
23375
23487
  var shadow = react.useContext(SubscriptionsContext).shadow;
23376
23488
  // Derived state
23377
23489
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
23378
23490
  var CARD_COLUMNS = isAddon ? ADDON_CARD_COLUMNS : NON_ADDON_CARD_COLUMNS;
23379
- 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: {
23491
+ return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : '') }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
23380
23492
  gridColumn: '1 / 5',
23381
23493
  width: 'calc(100% + 32px)',
23382
23494
  transform: 'translateX(-16px)',
@@ -23491,7 +23603,7 @@ var SubscriptionCard = function (_a) {
23491
23603
  };
23492
23604
 
23493
23605
  var SubscriptionsList = function (_a) {
23494
- var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscriptions = _a.subscriptions;
23606
+ var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscriptions = _a.subscriptions;
23495
23607
  var isMobile = common.useIsMobile();
23496
23608
  var nonAddonSubscriptions = findNonAddonSubscriptions(subscriptions);
23497
23609
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: nonAddonSubscriptions === null || nonAddonSubscriptions === void 0 ? void 0 : nonAddonSubscriptions.map(function (subscription, subscriptionIndex) {
@@ -23499,26 +23611,46 @@ var SubscriptionsList = function (_a) {
23499
23611
  return null;
23500
23612
  if (isMobile)
23501
23613
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex), jsxRuntime.jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, hideExpired: hideExpired })] }));
23502
- 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 })] }));
23614
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }, subscriptionIndex), jsxRuntime.jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, hideExpired: hideExpired })] }));
23503
23615
  }) }));
23504
23616
  };
23505
23617
 
23506
23618
  var SubscriptionsListContainer = function (_a) {
23507
23619
  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;
23508
23620
  // Context
23509
- var apiHost = react.useContext(BunnyContext).apiHost;
23510
23621
  var gap = react.useContext(SubscriptionsContext).gap;
23511
- var token = useToken();
23512
- // Queries
23513
- var _c = reactQuery.useQuery({
23514
- queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
23515
- queryFn: function () { return getPriceListChangeOptions({ apiHost: apiHost, token: token }); },
23516
- enabled: Boolean(onChangePlanClick),
23517
- }), priceListChangeOptions = _c.data, arePriceListChangeOptionsLoading = _c.isLoading;
23518
- if (subscriptionsAreLoading ||
23519
- (Boolean(onChangePlanClick) ? arePriceListChangeOptionsLoading : false))
23622
+ if (subscriptionsAreLoading)
23520
23623
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
23521
- 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") }) })))) }));
23624
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-".concat(gap, " bunny-shrink bunny-overflow-auto") }, { children: jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscriptions: subscriptions }) }))) : (noSubscriptionsComponent || (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) }));
23625
+ };
23626
+
23627
+ var HideExpiredToggle = function (_a) {
23628
+ var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired;
23629
+ var isMobile = common.useIsMobile();
23630
+ var secondaryColor = react.useContext(BrandContext).secondaryColor;
23631
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 bunny-pl-4" }, { children: [!isMobile && jsxRuntime.jsx(antd.Divider, { className: "bunny-h-5", type: "vertical" }), jsxRuntime.jsx(StyledCheckbox, { children: jsxRuntime.jsx(antd.Checkbox, __assign({ checked: hideExpired, onChange: function (e) { return setHideExpired(e.target.checked); }, style: {
23632
+ color: secondaryColor,
23633
+ } }, { children: isMobile ? 'Hide inactive' : 'Hide inactive subscriptions' })) })] })));
23634
+ };
23635
+ var StyledCheckbox = styled__default["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .ant-checkbox-wrapper span {\n padding-inline-end: 0 !important;\n }\n"], ["\n .ant-checkbox-wrapper span {\n padding-inline-end: 0 !important;\n }\n"])));
23636
+ var templateObject_1;
23637
+
23638
+ var ChangeQuantitiesButton = function (_a) {
23639
+ var setQuantityDrawerOpen = _a.setQuantityDrawerOpen;
23640
+ return (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () {
23641
+ setQuantityDrawerOpen(true);
23642
+ }, type: "default" }, { children: "Change quantities" })));
23643
+ };
23644
+
23645
+ var SubscriptionsNavigation = function (_a) {
23646
+ var expiredSwitchVisible = _a.expiredSwitchVisible, hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, setQuantityDrawerOpen = _a.setQuantityDrawerOpen, subscriptions = _a.subscriptions;
23647
+ // Hooks
23648
+ var isMobile = common.useIsMobile();
23649
+ // Derived state
23650
+ var canShowChangeQuantitiesButton = canShowChangeQuantities({
23651
+ subscriptions: subscriptions,
23652
+ });
23653
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-grow bunny-gap-2 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-justify-end') }, { children: canShowChangeQuantitiesButton && (jsxRuntime.jsx(ChangeQuantitiesButton, { setQuantityDrawerOpen: setQuantityDrawerOpen })) }))] }));
23522
23654
  };
23523
23655
 
23524
23656
  var Text$3 = antd.Typography.Text;
@@ -23533,13 +23665,12 @@ var formatDateForApi = function (date) {
23533
23665
  return date.format('YYYY-MM-DD');
23534
23666
  };
23535
23667
  var QuantityInput = function (_a) {
23536
- var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, subscriptions = _a.subscriptions;
23668
+ var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, subscriptions = _a.subscriptions, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
23537
23669
  // Context
23538
23670
  var token = useToken();
23539
23671
  var apiHost = react.useContext(BunnyContext).apiHost;
23540
- var _b = react.useContext(SubscriptionsContext), updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId;
23541
23672
  // Local state
23542
- var _c = react.useState(), editedSubscription = _c[0], setEditedSubscription = _c[1];
23673
+ var _b = react.useState(), editedSubscription = _b[0], setEditedSubscription = _b[1];
23543
23674
  // Hooks
23544
23675
  var queryClient = reactQuery.useQueryClient();
23545
23676
  var createSubscriptionQuote = useCreateSubscriptionQuote();
@@ -23623,7 +23754,8 @@ var QuantityInput = function (_a) {
23623
23754
  return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined && editedSubscription.quantity <= quantity;
23624
23755
  };
23625
23756
  var onChangeQuantity = function (chargeIndex, value, priceListChargeId, subscription, subscriptionIndex) {
23626
- var quantity = isNaN(parseInt(value)) ? 0 : parseInt(value);
23757
+ // Handle empty string - don't convert to 0, keep it as undefined
23758
+ var quantity = value === '' ? undefined : isNaN(parseInt(value)) ? 0 : parseInt(value);
23627
23759
  setEditedSubscription({
23628
23760
  chargeIndex: chargeIndex,
23629
23761
  subscriptionIndex: subscriptionIndex,
@@ -23631,15 +23763,16 @@ var QuantityInput = function (_a) {
23631
23763
  quantity: quantity,
23632
23764
  subscription: subscription,
23633
23765
  });
23634
- if (quantity !== charge.quantity) {
23766
+ if (quantity !== undefined && quantity !== charge.quantity) {
23635
23767
  setUpdatingChargeQuantityId(charge.id);
23636
23768
  }
23637
23769
  else {
23638
23770
  setUpdatingChargeQuantityId(undefined);
23771
+ setEditingQuoteData(undefined);
23639
23772
  }
23640
23773
  };
23641
23774
  var handleSubscriptionUpdate = function (editedSubscription) {
23642
- if (!editedSubscription)
23775
+ if (!editedSubscription || editedSubscription.quantity === undefined)
23643
23776
  return;
23644
23777
  // If we are not editing a quote, we create a new one
23645
23778
  if (!editingQuote) {
@@ -23657,7 +23790,7 @@ var QuantityInput = function (_a) {
23657
23790
  else {
23658
23791
  // If we are editing a quote, we update the quote change
23659
23792
  var _a = createQuoteParams(editingQuote, charge.quantity, editedSubscription), charges = _a.charges, quoteChange = _a.quoteChange;
23660
- if (quoteChange && charges[0].quantity > 0) {
23793
+ if (quoteChange && charges.length > 0 && charges[0].quantity > 0) {
23661
23794
  updateQuote.mutate({
23662
23795
  charges: charges,
23663
23796
  quoteChangeId: quoteChange.id,
@@ -23710,10 +23843,11 @@ var QuantityInput = function (_a) {
23710
23843
  var Text$2 = antd.Typography.Text;
23711
23844
  var QuantityChangeGridRow = function (_a) {
23712
23845
  var _b;
23713
- var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge;
23846
+ var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
23714
23847
  if (!canShowQuantitiesInput(subscriptionCharge, subscription))
23715
23848
  return null;
23716
- 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" })] }));
23849
+ var brandColor = react.useContext(BrandContext).brandColor;
23850
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium bunny-col-span-full", style: { fontSize: '11px', color: brandColor } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsxRuntime.jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsxRuntime.jsx("div", {})] })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
23717
23851
  };
23718
23852
 
23719
23853
  var QuantityChangeGridTitle = function (_a) {
@@ -23743,7 +23877,7 @@ var QuoteChangeSummarySection = function (_a) {
23743
23877
  var QUANTITY_CHANGE_HEADER_TITLE = 'Update unit quantity';
23744
23878
  var QUANTITY_CHANGE_HEADER_DESCRIPTION = 'Adjust quantities below. The change will take effect immediately after checkout has been completed.';
23745
23879
  var QuantityChangeDrawerDesktop = function (_a) {
23746
- var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions;
23880
+ var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
23747
23881
  var _b = react.useState(open), openLocal = _b[0], setOpenLocal = _b[1];
23748
23882
  var isMobile = common.useIsMobile();
23749
23883
  react.useEffect(function () {
@@ -23788,40 +23922,67 @@ var QuantityChangeDrawerDesktop = function (_a) {
23788
23922
  (!isTrial && charge.trial) ||
23789
23923
  ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'USAGE')
23790
23924
  return null;
23791
- return (jsxRuntime.jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions }, chargeIndex));
23925
+ return (jsxRuntime.jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }, chargeIndex));
23792
23926
  }) }), index));
23793
23927
  })] })), jsxRuntime.jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData })] })));
23794
23928
  };
23795
23929
 
23796
- var HideExpiredToggle = function (_a) {
23797
- var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired;
23798
- var isMobile = common.useIsMobile();
23799
- var secondaryColor = react.useContext(BrandContext).secondaryColor;
23800
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 bunny-pl-4" }, { children: [!isMobile && jsxRuntime.jsx(antd.Divider, { className: "bunny-h-5", type: "vertical" }), jsxRuntime.jsx(StyledCheckbox, { children: jsxRuntime.jsx(antd.Checkbox, __assign({ checked: hideExpired, onChange: function (e) { return setHideExpired(e.target.checked); }, style: {
23801
- color: secondaryColor,
23802
- } }, { children: isMobile ? 'Hide inactive' : 'Hide inactive subscriptions' })) })] })));
23803
- };
23804
- var StyledCheckbox = styled__default["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .ant-checkbox-wrapper span {\n padding-inline-end: 0 !important;\n }\n"], ["\n .ant-checkbox-wrapper span {\n padding-inline-end: 0 !important;\n }\n"])));
23805
- var templateObject_1;
23806
-
23807
- var ChangeQuantitiesButton = function (_a) {
23808
- var canShowChangeQuantitiesButton = _a.canShowChangeQuantitiesButton, setQuantityDrawerOpen = _a.setQuantityDrawerOpen;
23809
- if (!canShowChangeQuantitiesButton)
23810
- return null;
23811
- return (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () {
23812
- setQuantityDrawerOpen(true);
23813
- }, type: "default" }, { children: "Change quantities" })));
23814
- };
23815
-
23816
- var SubscriptionsNavigation = function (_a) {
23817
- var expiredSwitchVisible = _a.expiredSwitchVisible, hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, setQuantityDrawerOpen = _a.setQuantityDrawerOpen, subscriptions = _a.subscriptions;
23818
- // Hooks
23819
- var isMobile = common.useIsMobile();
23820
- // Derived state
23821
- var canShowChangeQuantitiesButton = canShowChangeQuantities({
23822
- subscriptions: subscriptions,
23823
- });
23824
- 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 })) }))] }));
23930
+ var QuantityDrawerContainer = function (_a) {
23931
+ var subscriptions = _a.subscriptions, quantityDrawerOpen = _a.quantityDrawerOpen, setQuantityDrawerOpen = _a.setQuantityDrawerOpen, handlePortalErrors = _a.handlePortalErrors, setHideExpiredState = _a.setHideExpiredState;
23932
+ var apiHost = react.useContext(BunnyContext).apiHost;
23933
+ var token = useToken();
23934
+ var queryClient = reactQuery.useQueryClient();
23935
+ var showSuccessNotification = common.useSuccessNotification();
23936
+ // State management
23937
+ var _b = react.useState(), editingQuoteData = _b[0], setEditingQuoteData = _b[1];
23938
+ var _c = react.useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
23939
+ var _d = react.useState(undefined), updatingChargeQuantityId = _d[0], setUpdatingChargeQuantityId = _d[1];
23940
+ // Quote query
23941
+ var quote = reactQuery.useQuery({
23942
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
23943
+ id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
23944
+ objectName: 'editingQuote',
23945
+ token: token,
23946
+ }),
23947
+ queryFn: function () {
23948
+ return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost }) : undefined;
23949
+ },
23950
+ enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
23951
+ }).data;
23952
+ // Handlers
23953
+ var onSuccess = function () {
23954
+ setQuantityDrawerOpen(false);
23955
+ setEditingQuoteData(undefined);
23956
+ queryClient.invalidateQueries({
23957
+ queryKey: common.QueryKeyFactory.default.transactionsKey({ token: token }),
23958
+ });
23959
+ queryClient.invalidateQueries({
23960
+ queryKey: common.QueryKeyFactory.default.createTableKey({
23961
+ pluralType: 'subscriptions',
23962
+ token: token,
23963
+ }),
23964
+ });
23965
+ showSuccessNotification('Your plan has been updated', 'Payment successful');
23966
+ setPayModalVisible(false);
23967
+ setHideExpiredState(true);
23968
+ setUpdatingChargeQuantityId(undefined);
23969
+ };
23970
+ var onCancel = function () {
23971
+ setPayModalVisible(false);
23972
+ };
23973
+ var onFail = function (error) {
23974
+ handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
23975
+ };
23976
+ var handleDrawerClose = function () {
23977
+ if (updatingChargeQuantityId) {
23978
+ setUpdatingChargeQuantityId(undefined);
23979
+ }
23980
+ setQuantityDrawerOpen(false);
23981
+ };
23982
+ var handleOpenCheckout = function () {
23983
+ setPayModalVisible(true);
23984
+ };
23985
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: handleDrawerClose, open: quantityDrawerOpen, openCheckout: handleOpenCheckout, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: false })] }));
23825
23986
  };
23826
23987
 
23827
23988
  var Text$1 = antd.Typography.Text;
@@ -23837,8 +23998,6 @@ var SubscriptionsWrapper = function (_a) {
23837
23998
  };
23838
23999
  var styles = __assign(__assign({}, defaultStyles), userStyles);
23839
24000
  var _f = react.useState(undefined), upgradingSubscription = _f[0], setUpgradingSubscription = _f[1];
23840
- var _g = react.useState(undefined), updatingChargeQuantityId = _g[0], setUpdatingChargeQuantityId = _g[1];
23841
- var _h = react.useState(null), subscriptionUpgradeId = _h[0], setSubscriptionUpgradeId = _h[1];
23842
24001
  return (jsxRuntime.jsx(SubscriptionsContext.Provider, __assign({ value: {
23843
24002
  gap: styles.gap,
23844
24003
  shadow: styles.shadow,
@@ -23849,55 +24008,34 @@ var SubscriptionsWrapper = function (_a) {
23849
24008
  hideExpired: hideExpired,
23850
24009
  upgradingSubscription: upgradingSubscription,
23851
24010
  setUpgradingSubscription: setUpgradingSubscription,
23852
- updatingChargeQuantityId: updatingChargeQuantityId,
23853
- setUpdatingChargeQuantityId: setUpdatingChargeQuantityId,
23854
- subscriptionUpgradeId: subscriptionUpgradeId,
23855
- setSubscriptionUpgradeId: setSubscriptionUpgradeId,
23856
- } }, { children: jsxRuntime.jsx(QuotePreviewProvider, { children: jsxRuntime.jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) }) })));
24011
+ } }, { children: jsxRuntime.jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) })));
23857
24012
  };
23858
24013
  var Subscriptions = function (_a) {
23859
24014
  var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, noSubscriptionsComponent = _a.noSubscriptionsComponent, hideTitle = _a.hideTitle, hideExpiredToggle = _a.hideExpiredToggle;
23860
24015
  // Context
23861
24016
  var token = useToken();
23862
24017
  var apiHost = react.useContext(BunnyContext).apiHost;
23863
- var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _b.setSubscriptionUpgradeId, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired;
24018
+ var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired;
23864
24019
  // Local state
23865
- var _c = react.useState(), editingQuoteData = _c[0], setEditingQuoteData = _c[1];
23866
- var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
23867
- var _e = react.useState(true), hideExpiredState = _e[0], setHideExpiredState = _e[1];
24020
+ var _c = react.useState(true), hideExpiredState = _c[0], setHideExpiredState = _c[1];
24021
+ var _d = react.useState(false), expiredSwitchVisible = _d[0], setExpiredSwitchVisible = _d[1];
24022
+ var _e = react.useState(false), isChangingPlan = _e[0], setIsChangingPlan = _e[1];
23868
24023
  var _f = react.useState(false), quantityDrawerOpen = _f[0], setQuantityDrawerOpen = _f[1];
23869
- var _g = react.useState(false), expiredSwitchVisible = _g[0], setExpiredSwitchVisible = _g[1];
23870
- var _h = react.useState(false), isChangingPlan = _h[0], setIsChangingPlan = _h[1];
24024
+ // Derived state
23871
24025
  var hideExpired = hideExpiredOverride !== null && hideExpiredOverride !== void 0 ? hideExpiredOverride : hideExpiredState;
23872
24026
  // Hooks
23873
24027
  var queryClient = reactQuery.useQueryClient();
23874
24028
  var showSuccessNotification = common.useSuccessNotification();
23875
- var quoteDelete = useQuoteDelete();
23876
24029
  var isMobile = common.useIsMobile();
23877
- var defaultPaymentMethod = usePaymentMethod({
23878
- token: token,
23879
- apiHost: apiHost,
23880
- }).defaultPaymentMethod;
23881
24030
  var cancelSubscription = useCancelSubscription();
23882
24031
  // Queries
23883
- var quote = reactQuery.useQuery({
23884
- queryKey: common.QueryKeyFactory.default.createObjectKey({
23885
- id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
23886
- objectName: 'editingQuote',
23887
- token: token,
23888
- }),
23889
- queryFn: function () {
23890
- return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost }) : undefined;
23891
- },
23892
- enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
23893
- }).data;
23894
- var _j = reactQuery.useQuery({
24032
+ var _g = reactQuery.useQuery({
23895
24033
  queryKey: common.QueryKeyFactory.default.createTableKey({
23896
24034
  pluralType: 'subscriptions',
23897
24035
  token: token,
23898
24036
  }),
23899
24037
  queryFn: function () { return getSubscriptions({ token: token, apiHost: apiHost }); },
23900
- }), subscriptions = _j.data, subscriptionsAreLoading = _j.isLoading;
24038
+ }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
23901
24039
  // Mutations
23902
24040
  var subscriptionCancel = reactQuery.useMutation({
23903
24041
  mutationFn: function (subscription) {
@@ -23916,50 +24054,13 @@ var Subscriptions = function (_a) {
23916
24054
  // Handlers
23917
24055
  var onChangePlanClick = function (subscription) {
23918
24056
  if (subscription) {
23919
- setSubscriptionUpgradeId(subscription.id);
23920
24057
  setUpgradingSubscription(subscription);
23921
24058
  }
23922
- else {
23923
- setSubscriptionUpgradeId(null);
23924
- setUpgradingSubscription(undefined);
23925
- }
23926
24059
  setIsChangingPlan(true);
23927
24060
  };
23928
24061
  var onCancelSubscriptionClick = function (subscription) {
23929
24062
  subscriptionCancel.mutate(subscription);
23930
24063
  };
23931
- var onSuccess = function () {
23932
- setQuantityDrawerOpen(false);
23933
- setEditingQuoteData(undefined);
23934
- queryClient.invalidateQueries({
23935
- queryKey: common.QueryKeyFactory.default.transactionsKey({ token: token }),
23936
- });
23937
- queryClient.invalidateQueries({
23938
- queryKey: common.QueryKeyFactory.default.createTableKey({
23939
- pluralType: 'subscriptions',
23940
- token: token,
23941
- }),
23942
- });
23943
- showSuccessNotification('Your plan has been updated', 'Payment successful');
23944
- setPayModalVisible(false);
23945
- setHideExpiredState(true);
23946
- };
23947
- var onCancel = function () {
23948
- setPayModalVisible(false);
23949
- };
23950
- var onFail = function (error) {
23951
- handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
23952
- };
23953
- var onClose = function () {
23954
- if (editingQuoteData) {
23955
- quoteDelete(editingQuoteData.id, apiHost, token);
23956
- setEditingQuoteData(undefined);
23957
- }
23958
- if (updatingChargeQuantityId) {
23959
- setUpdatingChargeQuantityId(undefined);
23960
- }
23961
- setQuantityDrawerOpen(false);
23962
- };
23963
24064
  var allSubscriptionsExpired = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.every(function (subscription) {
23964
24065
  var _a, _b;
23965
24066
  return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
@@ -23979,11 +24080,11 @@ var Subscriptions = function (_a) {
23979
24080
  setExpiredSwitchVisible(true);
23980
24081
  }, [hasExpiredOrCanceledSubscriptions, subscriptions]);
23981
24082
  if (isChangingPlan || isInPreviewMode) {
23982
- return (jsxRuntime.jsx(PlanManager, { onChangePlanCancel: function () {
23983
- setIsChangingPlan(false);
23984
- }, handlePortalErrors: handlePortalErrors }));
24083
+ return (jsxRuntime.jsx(QuoteProvider, { children: jsxRuntime.jsx(PlanManager, { onChangePlanCancel: function () {
24084
+ setIsChangingPlan(false);
24085
+ }, handlePortalErrors: handlePortalErrors }) }));
23985
24086
  }
23986
- 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 })] })));
24087
+ return (jsxRuntime.jsxs("div", __assign({ className: className }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityDrawerContainer, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setHideExpiredState: setHideExpiredState })] })));
23987
24088
  };
23988
24089
  var PageHeaderWithActions = function (_a) {
23989
24090
  var children = _a.children, title = _a.title;
@@ -24025,7 +24126,6 @@ var billingDetailsUpdate = function (_a) {
24025
24126
  });
24026
24127
  };
24027
24128
 
24028
- // TODO: move this to common
24029
24129
  var billingDetailsQuery = function () {
24030
24130
  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}";
24031
24131
  };
@@ -24230,9 +24330,6 @@ var PaymentFormSection = function (_a) {
24230
24330
  var onTokenExpired = react.useContext(BunnyContext).onTokenExpired;
24231
24331
  var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
24232
24332
  var showSuccessNotification = common.useSuccessNotification();
24233
- var token = useToken();
24234
- var account = useCurrentUserData(token).account;
24235
- var currencyId = account === null || account === void 0 ? void 0 : account.currencyId;
24236
24333
  return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
24237
24334
  handleAllErrorFormats(error);
24238
24335
  }, onSavePaymentMethod: function (response) {
@@ -24242,7 +24339,7 @@ var PaymentFormSection = function (_a) {
24242
24339
  // TODO: onSavePaymentMethod(response: any) should be cleaned up to have a response type (not any)
24243
24340
  // and work with both stripe and demo pay requests
24244
24341
  onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
24245
- }, currencyId: currencyId }) })));
24342
+ } }) })));
24246
24343
  };
24247
24344
 
24248
24345
  exports.BillingDetails = BillingDetails;