@bunnyapp/components 1.0.76 → 1.1.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 (104) hide show
  1. package/dist/cjs/index.js +881 -536
  2. package/dist/cjs/src/components/BillingDetails/BillingDetails.d.ts +7 -5
  3. package/dist/cjs/src/components/PaymentForm/CheckoutFooter.d.ts +2 -2
  4. package/dist/cjs/src/components/PaymentForm/DemoPay/demoPayUtils.d.ts +2 -2
  5. package/dist/cjs/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +2 -2
  6. package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +4 -5
  7. package/dist/cjs/src/components/PaymentForm/PaymentMethodDetails.d.ts +1 -1
  8. package/dist/cjs/src/components/PaymentForm/Stripe/hooks/usePay.d.ts +2 -2
  9. package/dist/cjs/src/components/QuotePreviewProvider.d.ts +17 -0
  10. package/dist/cjs/src/components/Quotes/Quotes.d.ts +6 -6
  11. package/dist/cjs/src/components/Quotes/Quotes.stories.d.ts +2 -2
  12. package/dist/cjs/src/components/Signup/PaymentForms.d.ts +9 -1
  13. package/dist/cjs/src/components/Signup/Signup.d.ts +11 -1
  14. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +0 -5
  15. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +2 -2
  16. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListSelector.d.ts +2 -3
  17. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +1 -3
  18. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +62 -2
  19. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/FeatureAddons.d.ts +9 -0
  20. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +3 -3
  21. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +2 -2
  22. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +3 -3
  23. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +7 -0
  24. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +3 -3
  25. package/dist/cjs/src/components/Subscriptions/SubscriptionRequests.d.ts +0 -1
  26. package/dist/cjs/src/components/Subscriptions/SubscriptionsContext.d.ts +0 -3
  27. package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuoteChangeSummarySection.d.ts +2 -2
  28. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +1 -1
  29. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +2 -1
  30. package/dist/cjs/src/components/TaxationForm.d.ts +2 -2
  31. package/dist/cjs/src/components/Transactions/Transactions.d.ts +5 -5
  32. package/dist/cjs/src/components/Transactions/TransactionsListContext.d.ts +8 -8
  33. package/dist/cjs/src/components/Transactions/transactionsList/TransactionDownload.d.ts +2 -2
  34. package/dist/cjs/src/components/Transactions/transactionsList/TransactionTitle.d.ts +3 -3
  35. package/dist/cjs/src/components/Transactions/transactionsList/TransactionsListDesktop.d.ts +4 -4
  36. package/dist/cjs/src/components/Transactions/transactionsList/TransactionsListMobile.d.ts +3 -3
  37. package/dist/cjs/src/components/Transactions/transactionsList/utils.d.ts +3 -3
  38. package/dist/cjs/src/components/icons/Bancontact.d.ts +4 -0
  39. package/dist/cjs/src/components/icons/IDeal.d.ts +4 -0
  40. package/dist/cjs/src/components/icons/Sepa.d.ts +4 -0
  41. package/dist/cjs/src/graphql/QuoteRequests.d.ts +1 -0
  42. package/dist/cjs/src/graphql/mutations/quoteChargeCreate.d.ts +2 -1
  43. package/dist/cjs/src/graphql/mutations/quoteChargeDelete.d.ts +7 -0
  44. package/dist/cjs/src/graphql/mutations/subscriptionTrialConvert.d.ts +7 -0
  45. package/dist/cjs/src/graphql/queries/getFeatureUsage.d.ts +1 -4
  46. package/dist/cjs/src/graphql/queries/getFormattedQuote.d.ts +2 -4
  47. package/dist/cjs/src/graphql/queries/getTransactions.d.ts +2 -2
  48. package/dist/cjs/src/hooks/quotes/useQuoteUpdateFeatureAddon.d.ts +8 -0
  49. package/dist/cjs/src/hooks/usePaymentPlugins.d.ts +2 -2
  50. package/dist/cjs/src/utils/couponUtils.d.ts +2 -0
  51. package/dist/cjs/src/utils/featureAddonUtils.d.ts +3 -0
  52. package/dist/esm/index.js +884 -539
  53. package/dist/esm/src/components/BillingDetails/BillingDetails.d.ts +7 -5
  54. package/dist/esm/src/components/PaymentForm/CheckoutFooter.d.ts +2 -2
  55. package/dist/esm/src/components/PaymentForm/DemoPay/demoPayUtils.d.ts +2 -2
  56. package/dist/esm/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +2 -2
  57. package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +4 -5
  58. package/dist/esm/src/components/PaymentForm/PaymentMethodDetails.d.ts +1 -1
  59. package/dist/esm/src/components/PaymentForm/Stripe/hooks/usePay.d.ts +2 -2
  60. package/dist/esm/src/components/QuotePreviewProvider.d.ts +17 -0
  61. package/dist/esm/src/components/Quotes/Quotes.d.ts +6 -6
  62. package/dist/esm/src/components/Quotes/Quotes.stories.d.ts +2 -2
  63. package/dist/esm/src/components/Signup/PaymentForms.d.ts +9 -1
  64. package/dist/esm/src/components/Signup/Signup.d.ts +11 -1
  65. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +0 -5
  66. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +2 -2
  67. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListSelector.d.ts +2 -3
  68. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +1 -3
  69. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +62 -2
  70. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/FeatureAddons.d.ts +9 -0
  71. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +3 -3
  72. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +2 -2
  73. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +3 -3
  74. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +7 -0
  75. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +3 -3
  76. package/dist/esm/src/components/Subscriptions/SubscriptionRequests.d.ts +0 -1
  77. package/dist/esm/src/components/Subscriptions/SubscriptionsContext.d.ts +0 -3
  78. package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuoteChangeSummarySection.d.ts +2 -2
  79. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +1 -1
  80. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +2 -1
  81. package/dist/esm/src/components/TaxationForm.d.ts +2 -2
  82. package/dist/esm/src/components/Transactions/Transactions.d.ts +5 -5
  83. package/dist/esm/src/components/Transactions/TransactionsListContext.d.ts +8 -8
  84. package/dist/esm/src/components/Transactions/transactionsList/TransactionDownload.d.ts +2 -2
  85. package/dist/esm/src/components/Transactions/transactionsList/TransactionTitle.d.ts +3 -3
  86. package/dist/esm/src/components/Transactions/transactionsList/TransactionsListDesktop.d.ts +4 -4
  87. package/dist/esm/src/components/Transactions/transactionsList/TransactionsListMobile.d.ts +3 -3
  88. package/dist/esm/src/components/Transactions/transactionsList/utils.d.ts +3 -3
  89. package/dist/esm/src/components/icons/Bancontact.d.ts +4 -0
  90. package/dist/esm/src/components/icons/IDeal.d.ts +4 -0
  91. package/dist/esm/src/components/icons/Sepa.d.ts +4 -0
  92. package/dist/esm/src/graphql/QuoteRequests.d.ts +1 -0
  93. package/dist/esm/src/graphql/mutations/quoteChargeCreate.d.ts +2 -1
  94. package/dist/esm/src/graphql/mutations/quoteChargeDelete.d.ts +7 -0
  95. package/dist/esm/src/graphql/mutations/subscriptionTrialConvert.d.ts +7 -0
  96. package/dist/esm/src/graphql/queries/getFeatureUsage.d.ts +1 -4
  97. package/dist/esm/src/graphql/queries/getFormattedQuote.d.ts +2 -4
  98. package/dist/esm/src/graphql/queries/getTransactions.d.ts +2 -2
  99. package/dist/esm/src/hooks/quotes/useQuoteUpdateFeatureAddon.d.ts +8 -0
  100. package/dist/esm/src/hooks/usePaymentPlugins.d.ts +2 -2
  101. package/dist/esm/src/utils/couponUtils.d.ts +2 -0
  102. package/dist/esm/src/utils/featureAddonUtils.d.ts +3 -0
  103. package/dist/index.d.ts +30 -19
  104. package/package.json +3 -3
package/dist/cjs/index.js CHANGED
@@ -56,7 +56,7 @@ function styleInject(css, ref) {
56
56
  }
57
57
  }
58
58
 
59
- var css_248z = ":root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n box-sizing: border-box;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n position: fixed;\n}\n.bunny-absolute {\n position: absolute;\n}\n.bunny-relative {\n position: relative;\n}\n.bunny-sticky {\n position: sticky;\n}\n.bunny-bottom-0 {\n bottom: 0px;\n}\n.bunny-bottom-4 {\n bottom: 1rem;\n}\n.bunny-left-0 {\n left: 0px;\n}\n.bunny-right-0 {\n right: 0px;\n}\n.bunny-top-0 {\n top: 0px;\n}\n.bunny-col-span-1 {\n grid-column: span 1 / span 1;\n}\n.bunny-col-span-full {\n grid-column: 1 / -1;\n}\n.bunny-m-0 {\n margin: 0px;\n}\n.bunny-mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.bunny-mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n margin-top: 6rem;\n margin-bottom: 6rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n margin-top: 6rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-1\\/2 {\n height: 50%;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-h-screen {\n height: 100vh;\n}\n.bunny-min-h-0 {\n min-height: 0px;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-3\\/5 {\n width: 60%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-w-screen {\n width: 100vw;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-items-start {\n align-items: flex-start;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pb-8 {\n padding-bottom: 2rem;\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-pt-1 {\n padding-top: 0.25rem;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.hover\\:bunny-text-orange-400:hover {\n --tw-text-opacity: 1;\n color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n margin: 0 !important;\n}\n.bunny-components .ant-upload {\n border-radius: 0.5rem !important;\n}\n.bunny-components .ant-checkbox-inner {\n border-color: #cccccc;\n}\n.bunny-components .ant-row {\n margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n font-size: 0.875rem !important;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n border: none !important;\n}\n.bunny-components .ant-form-item {\n margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n text-transform: none !important;\n font-size: 0.75rem;\n padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n width: 100%;\n color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n font-size: 11px;\n min-height: 11px;\n line-height: 11px;\n padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n font-size: smaller;\n}\n.bunny-components .ant-tree {\n font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-page-header {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n}\n.bunny-components .ant-tag {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 14px;\n font-weight: 500;\n white-space: nowrap;\n padding-inline-start: 0.625rem;\n padding-inline-end: 0.625rem;\n margin: 0;\n}\n.bunny-components .ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n color: #6b7280 !important;\n background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.bunny-components .ant-picker {\n width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n background: #f8fafc;\n}\n.bunny-components .vista-link {\n color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n text-decoration: underline;\n cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n padding: 0;\n text-align: center;\n font-size: 0.875rem !important;\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n display: flex !important;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n background: #eef0f2 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n border: none;\n}\n.bunny-components .ant-btn {\n box-shadow: none;\n text-shadow: none;\n outline: none !important;\n line-height: 1;\n font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n color: #94a3b8;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n background-color: rgba(113, 125, 148, 0.1) !important;\n border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n display: flex !important;\n align-items: center;\n}\n.bunny-components .ant-select-item {\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n display: flex;\n align-items: center;\n white-space: nowrap !important;\n overflow: visible !important;\n text-overflow: default !important;\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n display: none;\n}\n.bunny-components .ant-layout-header {\n height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n width: inherit;\n position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n gap: 4px !important;\n}\n.bunny-components .group {\n display: flex;\n flex-direction: row;\n flex-flow: row wrap;\n box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n top: 96px !important;\n animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n color: #ffffff;\n background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n border-color: #ff5833 !important;\n background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n border-bottom: 2px solid transparent !important;\n padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n display: none !important;\n}\n.bunny-components .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n border-radius: 8px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n font-size: 14px !important;\n overflow-wrap: break-word;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff5833 !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
59
+ var css_248z = ":root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n box-sizing: border-box;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n position: fixed;\n}\n.bunny-absolute {\n position: absolute;\n}\n.bunny-relative {\n position: relative;\n}\n.bunny-sticky {\n position: sticky;\n}\n.bunny-bottom-0 {\n bottom: 0px;\n}\n.bunny-bottom-4 {\n bottom: 1rem;\n}\n.bunny-left-0 {\n left: 0px;\n}\n.bunny-right-0 {\n right: 0px;\n}\n.bunny-top-0 {\n top: 0px;\n}\n.bunny-col-span-1 {\n grid-column: span 1 / span 1;\n}\n.bunny-col-span-full {\n grid-column: 1 / -1;\n}\n.bunny-m-0 {\n margin: 0px;\n}\n.bunny-mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.bunny-mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n margin-top: 6rem;\n margin-bottom: 6rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n margin-top: 6rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-1\\/2 {\n height: 50%;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-h-screen {\n height: 100vh;\n}\n.bunny-max-h-\\[calc\\(100vh-10rem\\)\\] {\n max-height: calc(100vh - 10rem);\n}\n.bunny-min-h-0 {\n min-height: 0px;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-3\\/5 {\n width: 60%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-w-screen {\n width: 100vw;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-flex-wrap {\n flex-wrap: wrap;\n}\n.bunny-items-start {\n align-items: flex-start;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-overflow-y-auto {\n overflow-y: auto;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-12 {\n padding-left: 3rem;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pr-4 {\n padding-right: 1rem;\n}\n.bunny-pt-1 {\n padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.hover\\:bunny-text-orange-400:hover {\n --tw-text-opacity: 1;\n color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n margin: 0 !important;\n}\n.bunny-components .ant-upload {\n border-radius: 0.5rem !important;\n}\n.bunny-components .ant-checkbox-inner {\n border-color: #cccccc;\n}\n.bunny-components .ant-row {\n margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n font-size: 0.875rem !important;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n border: none !important;\n}\n.bunny-components .ant-form-item {\n margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n text-transform: none !important;\n font-size: 0.75rem;\n padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n width: 100%;\n color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n font-size: 11px;\n min-height: 11px;\n line-height: 11px;\n padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n font-size: smaller;\n}\n.bunny-components .ant-tree {\n font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-page-header {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n}\n.bunny-components .ant-tag {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 14px;\n font-weight: 500;\n white-space: nowrap;\n padding-inline-start: 0.625rem;\n padding-inline-end: 0.625rem;\n margin: 0;\n}\n.bunny-components .ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n color: #6b7280 !important;\n background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.bunny-components .ant-picker {\n width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n background: #f8fafc;\n}\n.bunny-components .vista-link {\n color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n text-decoration: underline;\n cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n padding: 0;\n text-align: center;\n font-size: 0.875rem !important;\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n display: flex !important;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n background: #eef0f2 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n border: none;\n}\n.bunny-components .ant-btn {\n box-shadow: none;\n text-shadow: none;\n outline: none !important;\n line-height: 1;\n font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n color: #94a3b8;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n background-color: rgba(113, 125, 148, 0.1) !important;\n border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n display: flex !important;\n align-items: center;\n}\n.bunny-components .ant-select-item {\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n display: flex;\n align-items: center;\n white-space: nowrap !important;\n overflow: visible !important;\n text-overflow: default !important;\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n display: none;\n}\n.bunny-components .ant-layout-header {\n height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n width: inherit;\n position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n gap: 4px !important;\n}\n.bunny-components .group {\n display: flex;\n flex-direction: row;\n flex-flow: row wrap;\n box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n top: 96px !important;\n animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n color: #ffffff;\n background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n border-color: #ff5833 !important;\n background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n border-bottom: 2px solid transparent !important;\n padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n display: none !important;\n}\n.bunny-components .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n border-radius: 8px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n font-size: 14px !important;\n overflow-wrap: break-word;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff5833 !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
60
60
  styleInject(css_248z);
61
61
 
62
62
  /******************************************************************************
@@ -154,7 +154,7 @@ var BrandContext = react.createContext({
154
154
  });
155
155
 
156
156
  // This will be replaced at build time by rollup-plugin-replace
157
- var PACKAGE_VERSION = '1.0.75';
157
+ var PACKAGE_VERSION = '1.1.0-beta.1';
158
158
  var createRequestHeaders = function (token) {
159
159
  var headers = common.createClientDevHeaders(token);
160
160
  // Add the components version header
@@ -380,7 +380,7 @@ var CustomZoomLayout = function () {
380
380
  // Set default zoom to 100% once the document is loaded
381
381
  react.useEffect(function () {
382
382
  if (currentZoom < 1 && Date.now() - mountTimeRef.current < 3000) {
383
- setZoomLevel(100);
383
+ setZoomLevel(125);
384
384
  }
385
385
  }, [currentZoom, setZoomLevel]);
386
386
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -389,23 +389,28 @@ var DocumentTemplatePreview = function (_a) {
389
389
  var targetUrl = _a.targetUrl;
390
390
  var _b = react.useState(null), pdfUrl = _b[0], setPdfUrl = _b[1];
391
391
  var queryClient = reactQuery.useQueryClient();
392
+ var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, token = _c.token;
392
393
  var queryKey = react.useMemo(function () { return ['documentTemplatePreview', targetUrl]; }, [targetUrl]);
393
394
  // Clear previous data when component mounts or id changes
394
395
  react.useEffect(function () {
395
396
  // Remove any existing data for this query
396
397
  queryClient.removeQueries({ queryKey: queryKey });
397
398
  }, [queryClient, queryKey]);
398
- var _c = reactQuery.useQuery({
399
+ var _d = reactQuery.useQuery({
399
400
  queryKey: queryKey,
400
401
  queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
401
402
  var response, blob;
402
403
  return __generator(this, function (_a) {
403
404
  switch (_a.label) {
404
- case 0: return [4 /*yield*/, fetch(targetUrl)];
405
+ case 0: return [4 /*yield*/, common.request({
406
+ endpoint: targetUrl,
407
+ apiHost: apiHost,
408
+ token: token,
409
+ })];
405
410
  case 1:
406
411
  response = _a.sent();
407
412
  if (!response.ok) {
408
- throw new Error('Failed to fetch PDF');
413
+ throw new Error("Failed to fetch PDF");
409
414
  }
410
415
  return [4 /*yield*/, response.blob()];
411
416
  case 2:
@@ -415,7 +420,7 @@ var DocumentTemplatePreview = function (_a) {
415
420
  });
416
421
  }); },
417
422
  enabled: !!targetUrl,
418
- }), data = _c.data, isLoading = _c.isLoading;
423
+ }), data = _d.data, isLoading = _d.isLoading;
419
424
  react.useEffect(function () {
420
425
  if (data) {
421
426
  var url_1 = URL.createObjectURL(data);
@@ -425,6 +430,7 @@ var DocumentTemplatePreview = function (_a) {
425
430
  URL.revokeObjectURL(url_1);
426
431
  };
427
432
  }
433
+ return undefined;
428
434
  }, [data]);
429
435
  if (isLoading) {
430
436
  return (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center h-96" }, { children: jsxRuntime.jsx(antd.Spin, {}) })));
@@ -496,6 +502,7 @@ function LegacyDocument(_a) {
496
502
  setPdfUrl(url_1);
497
503
  return function () { return URL.revokeObjectURL(url_1); };
498
504
  }
505
+ return undefined;
499
506
  }, [pdfBlob]);
500
507
  if (isLoading || !pdfUrl)
501
508
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -542,7 +549,7 @@ var checkout = function (_a) {
542
549
  });
543
550
  };
544
551
 
545
- var paymentMethodsQuery = function (filter) { return "query paymentMethods {\n paymentMethods ".concat(filter ? "(".concat(filter, ")") : '', " {\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}"); };
552
+ 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}"; };
546
553
  var getPaymentMethods = function (_a) {
547
554
  var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
548
555
  return __awaiter(void 0, void 0, void 0, function () {
@@ -551,9 +558,10 @@ var getPaymentMethods = function (_a) {
551
558
  return __generator(this, function (_c) {
552
559
  switch (_c.label) {
553
560
  case 0: return [4 /*yield*/, gqlRequest({
554
- query: paymentMethodsQuery(accountId ? "filter: \"accountId is ".concat(accountId, "\"") : ''),
561
+ query: paymentMethodsQuery(),
555
562
  token: token,
556
563
  apiHost: apiHost,
564
+ vars: { accountId: accountId },
557
565
  })];
558
566
  case 1:
559
567
  response = _c.sent();
@@ -581,20 +589,11 @@ var usePaymentMethod = function (_a) {
581
589
  };
582
590
 
583
591
  var filterPaymentPlugins = function (plugins) {
584
- return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) { var _a, _b; return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'payment' && ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'valid'; }).filter(function (plugin) { return plugin.name !== 'Manual Payment'; });
585
- };
586
- var filterPaymentPluginsByEntity = function (plugins, selectedEntityId) {
587
- return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
588
- var _a, _b;
589
- return selectedEntityId === undefined ||
590
- selectedEntityId === null ||
591
- ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(selectedEntityId)) ||
592
- ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0;
593
- });
592
+ return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) { var _a, _b; return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'payment' && ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'valid'; });
594
593
  };
595
- var MUTATION$9 = "{\n paymentPlugins {\n enabled\n entities\n guid\n hidden\n id\n name\n status\n type\n webhookEnabled\n components\n }\n}";
594
+ var MUTATION$9 = "query PaymentPlugins($accountId: ID) {\n paymentPlugins (accountId: $accountId) {\n enabled\n entities\n guid\n hidden\n id\n name\n status\n type\n webhookEnabled\n components\n }\n}";
596
595
  var getPaymentPlugins = function (_a) {
597
- var apiHost = _a.apiHost, token = _a.token;
596
+ var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
598
597
  return __awaiter(void 0, void 0, void 0, function () {
599
598
  var response;
600
599
  return __generator(this, function (_b) {
@@ -605,6 +604,7 @@ var getPaymentPlugins = function (_a) {
605
604
  query: MUTATION$9,
606
605
  token: token,
607
606
  apiHost: apiHost,
607
+ vars: { accountId: accountId },
608
608
  })];
609
609
  case 1:
610
610
  response = _b.sent();
@@ -618,18 +618,15 @@ var getPaymentPlugins = function (_a) {
618
618
  });
619
619
  };
620
620
  var usePaymentPlugins = function (_a) {
621
- var apiHost = _a.apiHost, token = _a.token, selectedEntityId = _a.selectedEntityId;
621
+ var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
622
622
  var _b = reactQuery.useQuery({
623
623
  queryKey: ['paymentPlugins', token],
624
- queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token }); },
624
+ queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token, accountId: accountId }); },
625
625
  staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
626
626
  }), paymentPlugins = _b.data, isFetched = _b.isFetched;
627
627
  var filteredPaymentPlugins = filterPaymentPlugins(paymentPlugins);
628
- var filteredPaymentPluginsByEntity = selectedEntityId
629
- ? filterPaymentPluginsByEntity(filteredPaymentPlugins, selectedEntityId)
630
- : filteredPaymentPlugins;
631
628
  return {
632
- paymentPlugins: filteredPaymentPluginsByEntity,
629
+ paymentPlugins: filteredPaymentPlugins,
633
630
  isFetched: isFetched,
634
631
  };
635
632
  };
@@ -18393,6 +18390,21 @@ var Visa = function (_a) {
18393
18390
  return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.2505 32.5165H17.0099L13.8299 20.3847C13.679 19.8267 13.3585 19.3333 12.8871 19.1008C11.7106 18.5165 10.4142 18.0514 9 17.8169V17.3498H15.8313C16.7742 17.3498 17.4813 18.0514 17.5991 18.8663L19.2491 27.6173L23.4877 17.3498H27.6104L21.2505 32.5165ZM29.9675 32.5165H25.9626L29.2604 17.3498H33.2653L29.9675 32.5165ZM38.4467 21.5514C38.5646 20.7346 39.2717 20.2675 40.0967 20.2675C41.3931 20.1502 42.8052 20.3848 43.9838 20.9671L44.6909 17.7016C43.5123 17.2345 42.216 17 41.0395 17C37.1524 17 34.3239 19.1008 34.3239 22.0165C34.3239 24.2346 36.3274 25.3992 37.7417 26.1008C39.2717 26.8004 39.861 27.2675 39.7431 27.9671C39.7431 29.0165 38.5646 29.4836 37.3881 29.4836C35.9739 29.4836 34.5596 29.1338 33.2653 28.5494L32.5582 31.8169C33.9724 32.3992 35.5025 32.6338 36.9167 32.6338C41.2752 32.749 43.9838 30.6502 43.9838 27.5C43.9838 23.5329 38.4467 23.3004 38.4467 21.5514ZM58 32.5165L54.82 17.3498H51.4044C50.6972 17.3498 49.9901 17.8169 49.7544 18.5165L43.8659 32.5165H47.9887L48.8116 30.3004H53.8772L54.3486 32.5165H58ZM51.9936 21.4342L53.1701 27.1502H49.8723L51.9936 21.4342Z", fill: "#172B85" })] })));
18394
18391
  };
18395
18392
 
18393
+ var Sepa = function (_a) {
18394
+ var className = _a.className;
18395
+ return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "#10298E", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { d: "M12.7744 16.084C14.4396 16.084 15.6264 16.1801 16.334 16.3701C18.0609 16.8349 18.9248 18.137 18.9248 20.2764C18.9248 20.4518 18.9113 20.714 18.8857 21.0645H14.918C14.918 20.4123 14.8407 19.9748 14.6885 19.752C14.4524 19.4222 13.801 19.2569 12.7344 19.2568C11.6983 19.2568 11.0109 19.3519 10.6758 19.542C10.3409 19.7327 10.1729 20.1477 10.1729 20.7861C10.1729 21.3638 10.3217 21.7443 10.6191 21.9268C10.8324 22.0562 11.1145 22.1325 11.4658 22.1553L12.2656 22.2119C13.9806 22.3259 15.0521 22.4065 15.4795 22.4521C16.8358 22.5891 17.8195 22.9497 18.4297 23.5352C18.9098 23.992 19.1958 24.5898 19.2871 25.3271C19.3405 25.7681 19.3672 26.267 19.3672 26.8213C19.3672 28.0993 19.2457 29.0356 19.002 29.6289C18.5601 30.7174 17.5669 31.4046 16.0225 31.6934C15.3754 31.8154 14.3858 31.8769 13.0547 31.877C10.8322 31.877 9.28274 31.7449 8.4082 31.4785C7.33499 31.1522 6.6276 30.4905 6.28516 29.4951C6.09445 28.941 6.00001 28.0182 6 26.7266H9.96875C9.96875 26.8706 9.96875 26.9808 9.96875 27.0566C9.96876 27.746 10.1668 28.1893 10.5615 28.3867C10.8351 28.5229 11.1654 28.594 11.5537 28.6025H13.0127C13.7572 28.6025 14.2325 28.5649 14.4375 28.4883C14.8023 28.3446 15.0418 28.1131 15.1562 27.793C15.217 27.596 15.247 27.3411 15.2471 27.0293C15.2471 26.3303 14.992 25.9045 14.4834 25.752C14.2928 25.6917 13.4079 25.6075 11.8291 25.501C10.5609 25.4103 9.67998 25.3228 9.18652 25.2383C7.88722 24.9948 7.02094 24.4944 6.58887 23.7344C6.20918 23.0886 6.01956 22.1116 6.01953 20.8047C6.01953 19.8092 6.12198 19.0105 6.32715 18.4102C6.53252 17.8097 6.86368 17.3538 7.32031 17.042C7.98917 16.5635 8.84498 16.2823 9.88672 16.1982C10.7538 16.1225 11.7164 16.084 12.7744 16.084ZM44.2861 16C45.3761 16 46.2079 16.0894 46.7793 16.2676C48.0865 16.6779 48.9639 17.5176 49.4131 18.7871C49.645 19.4533 49.7607 20.4565 49.7607 21.7959C49.7607 23.4063 49.6323 24.564 49.3779 25.2686C48.8682 26.6618 47.8187 27.4648 46.2344 27.6729C46.048 27.7041 45.2548 27.7316 43.8555 27.7539L43.1475 27.7773H40.6045V31.877H36.3389V16H44.2861ZM64 31.877H59.6787L58.8652 29.1328H53.1621L52.3955 31.877H47.9824L52.7441 16H59.1787L64 31.877ZM54.0801 26.04H58.0186L56.0195 19.1572L54.0801 26.04ZM40.6035 24.0947H43.2627C44.1059 24.0643 44.6191 23.9992 44.8037 23.8975C45.0556 23.7585 45.2244 23.4803 45.3086 23.0635C45.3624 22.7859 45.3896 22.3732 45.3896 21.8252C45.3896 21.1539 45.336 20.6561 45.2285 20.3311C45.0751 19.8759 44.7078 19.5988 44.126 19.498C44.011 19.4828 43.7353 19.4746 43.2988 19.4746H40.6035V24.0947Z", fill: "white" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M30.45 18.2337C32.2095 18.2337 33.7797 19.0456 34.8119 20.3173L35.7314 18.3424C34.2933 16.9808 32.336 16.1413 30.1772 16.1413C26.8159 16.1413 23.9406 18.1748 22.7605 21.0533H20.9674L19.9087 23.3269H22.2154C22.1981 23.5378 22.1869 23.7489 22.1869 23.9643C22.1869 24.2249 22.2004 24.4824 22.2262 24.7369H21.0669L20.0083 27.0113H22.8155C24.0293 29.8169 26.8686 31.7866 30.1772 31.7866C31.8445 31.7866 33.3917 31.2862 34.6727 30.4314V27.644C33.6411 28.8205 32.1322 29.564 30.45 29.564C28.4837 29.564 26.754 28.5484 25.7468 27.0113H31.6253L32.6838 24.7369H24.8819C24.8417 24.4632 24.8202 24.1835 24.8202 23.8986C24.8202 23.706 24.8302 23.5153 24.8486 23.3269H33.3399L34.3985 21.0533H25.583C26.5579 19.3679 28.3721 18.2337 30.45 18.2337", fill: "#FFBE00" })] })));
18396
+ };
18397
+
18398
+ var IDeal = function (_a) {
18399
+ var className = _a.className;
18400
+ return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.0266 9.91185H35.684C47.003 9.91185 51.3527 16.0977 51.3527 23.9167C51.3527 33.2698 45.273 37.9711 35.684 37.9711H19.0266V9.91185ZM20.6082 11.5944V36.3875H35.6838C44.7786 36.3875 49.7215 32.1316 49.7215 23.9662C49.7215 15.5534 44.3832 11.5944 35.6838 11.5944H20.6082ZM25.0568 24.4115C26.722 24.4115 28.072 23.06 28.072 21.3928C28.072 19.7256 26.722 18.3741 25.0568 18.3741C23.3916 18.3741 22.0417 19.7256 22.0417 21.3928C22.0417 23.06 23.3916 24.4115 25.0568 24.4115ZM22.635 25.6982H27.479V34.309H22.635V25.6982Z", fill: "black" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M44.2351 18.6216H45.6191V22.7785H47.6456C47.1019 15.207 41.1211 13.5244 35.684 13.5244H29.9009V18.6216H30.7412C32.3229 18.6216 33.262 19.6608 33.262 21.3929C33.262 23.1249 32.3229 24.1641 30.7906 24.1641H29.9009V34.309H35.684C44.5317 34.309 47.5468 30.2016 47.6951 24.1641H44.2351V18.6216ZM37.5623 22.7785V24.1641H34.1023V18.6216H37.4634V20.0072H35.4863V20.6505H37.3646V22.0362H35.5357V22.7785H37.5623ZM39.8358 18.6216H41.813L43.4935 24.1641H42.0601L41.7635 23.1249H39.9347L39.6381 24.1641H38.1553L39.8358 18.6216ZM40.3456 21.6898H40.3302V21.7393L40.3456 21.6898ZM40.3456 21.6898H41.3188L40.8739 20.1557H40.8245L40.3456 21.6898ZM29.9009 22.7785V20.0072H30.7412C31.2849 20.0072 31.878 20.1557 31.878 21.3929C31.878 22.63 31.3343 22.7785 30.7412 22.7785H29.9009Z", fill: "#D50072" })] })));
18401
+ };
18402
+
18403
+ var Bancontact = function (_a) {
18404
+ var className = _a.className;
18405
+ return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.2243 35.1715C18.2243 34.882 18.156 34.6314 18.0199 34.4199C17.8835 34.2083 17.7043 34.0468 17.4819 33.9355C17.7043 33.8242 17.8766 33.6597 17.9991 33.4426C18.1214 33.2255 18.1825 32.9806 18.1825 32.7078V32.5575C18.1825 32.2233 18.1186 31.9451 17.9908 31.7223C17.8628 31.4996 17.6833 31.3213 17.4526 31.1878C17.2219 31.0541 16.9451 30.9582 16.6227 30.8995C16.3 30.8411 15.9414 30.812 15.5465 30.812C15.4131 30.812 15.274 30.8147 15.1296 30.8203C14.9848 30.8258 14.8445 30.8328 14.7083 30.8411C14.572 30.8494 14.4468 30.8593 14.3329 30.8704C14.2188 30.8817 14.1256 30.8928 14.0534 30.9037C13.8921 30.9318 13.7781 30.9817 13.7114 31.0541C13.6448 31.1266 13.6113 31.2575 13.6113 31.4467V36.5245C13.6113 36.7139 13.646 36.8447 13.7156 36.917C13.7851 36.9895 13.9032 37.0394 14.0702 37.0673C14.1535 37.084 14.2536 37.0979 14.3704 37.1091C14.4871 37.1202 14.6136 37.1299 14.7499 37.1383C14.8862 37.1466 15.0265 37.1535 15.1711 37.1593C15.3158 37.1646 15.4575 37.1676 15.5966 37.1676C15.9581 37.1676 16.2986 37.1397 16.6185 37.084C16.9381 37.0285 17.2161 36.9295 17.4526 36.7874C17.689 36.6456 17.8766 36.4534 18.0157 36.2113C18.1546 35.969 18.2243 35.6642 18.2243 35.2967V35.1715ZM16.8063 32.7746C16.8063 32.8637 16.7924 32.9487 16.7645 33.0293C16.7366 33.11 16.6909 33.1795 16.627 33.2383C16.5629 33.2966 16.4768 33.3439 16.3684 33.38C16.2599 33.4162 16.1222 33.4343 15.9554 33.4343H15.0213V31.9895C15.049 31.9895 15.0921 31.9883 15.1505 31.9853C15.2089 31.9825 15.27 31.9812 15.3339 31.9812H15.6551C16.0833 31.9812 16.3822 32.0354 16.5518 32.144C16.7214 32.2526 16.8063 32.421 16.8063 32.6492V32.7746ZM16.5935 35.8062C16.7576 35.6782 16.8397 35.4971 16.8397 35.2634V35.1714C16.8397 34.971 16.7756 34.797 16.6478 34.6494C16.5198 34.502 16.289 34.4282 15.9554 34.4282H15.0213V35.9898H15.1671C15.231 35.9898 15.2977 35.9916 15.3673 35.9942C15.4368 35.9969 15.5035 35.9985 15.5676 35.9985H15.7051C16.1333 35.9985 16.4295 35.9343 16.5935 35.8062ZM22.7955 33.9438C22.7955 33.6377 22.7496 33.3772 22.6578 33.1629C22.5662 32.9487 22.4368 32.7732 22.27 32.6367C22.1032 32.5004 21.8988 32.4003 21.6568 32.3362C21.415 32.2722 21.1439 32.2401 20.8436 32.2401C20.5654 32.2401 20.2943 32.2597 20.0303 32.2987C19.766 32.3375 19.556 32.3766 19.4005 32.4154C19.2948 32.4435 19.242 32.5046 19.242 32.5991V33.2756C19.242 33.3314 19.2559 33.3705 19.2837 33.3925C19.3115 33.4149 19.3475 33.4261 19.3922 33.4261H19.4337C19.5006 33.4204 19.5839 33.4135 19.684 33.4051C19.7842 33.3968 19.8968 33.3901 20.022 33.3842C20.1471 33.3788 20.2777 33.3746 20.414 33.3717C20.5501 33.3689 20.6851 33.3675 20.8186 33.3675C21.0131 33.3675 21.1661 33.4038 21.2773 33.4761C21.3885 33.5486 21.4441 33.7045 21.4441 33.9438V34.2445H20.9937C20.2763 34.2445 19.7549 34.3572 19.4296 34.5827C19.1043 34.8081 18.9416 35.1659 18.9416 35.6558V35.7313C18.9416 36.0039 18.982 36.2321 19.0625 36.4158C19.1431 36.5996 19.2503 36.7472 19.3837 36.8587C19.5172 36.9699 19.6686 37.0493 19.8384 37.0964C20.008 37.1438 20.1846 37.1676 20.3681 37.1676C20.6184 37.1676 20.8339 37.1341 21.0145 37.0673C21.1952 37.0005 21.3662 36.9086 21.5276 36.7917V36.9253C21.5276 36.9699 21.5442 37.0089 21.5776 37.0422C21.6111 37.0756 21.6499 37.0923 21.6944 37.0923H22.6287C22.6731 37.0923 22.712 37.0756 22.7455 37.0422C22.7789 37.0089 22.7955 36.9699 22.7955 36.9253V33.9438ZM21.1481 36.0942C21.2619 36.0581 21.3691 36.015 21.4692 35.9648V35.0462H20.9937C20.8491 35.0462 20.7296 35.0587 20.635 35.0837C20.5404 35.1088 20.4653 35.1465 20.4098 35.1966C20.3542 35.2465 20.3152 35.3107 20.2931 35.3886C20.2707 35.4666 20.2596 35.5556 20.2596 35.6558V35.7312C20.2596 35.9092 20.3026 36.0233 20.3889 36.0734C20.4751 36.1235 20.6071 36.1485 20.7852 36.1485C20.913 36.1485 21.0339 36.1306 21.1481 36.0942ZM27.9007 36.917V34.1358C27.9007 33.8744 27.8799 33.6278 27.8381 33.3968C27.7964 33.166 27.7214 32.9653 27.6129 32.7954C27.5045 32.6256 27.3543 32.4905 27.1624 32.3904C26.9707 32.2902 26.7245 32.2401 26.4242 32.2401C26.1572 32.2401 25.9208 32.2723 25.7152 32.3369C25.5094 32.4014 25.2925 32.515 25.0646 32.6776V32.4752C25.0646 32.4305 25.0478 32.3911 25.0145 32.3575C24.9811 32.3238 24.9421 32.3068 24.8976 32.3068H23.9634C23.9187 32.3068 23.8799 32.3235 23.8467 32.357C23.8133 32.3904 23.7966 32.4295 23.7966 32.4739V36.917C23.7966 36.9615 23.8145 37.0019 23.8508 37.038C23.8869 37.0743 23.9272 37.0923 23.9717 37.0923H24.9811C25.0256 37.0923 25.0646 37.0743 25.0978 37.0382C25.1313 37.0021 25.1479 36.9619 25.1479 36.9173V33.6341C25.2925 33.5564 25.4287 33.4925 25.5567 33.4426C25.6845 33.3925 25.8096 33.3675 25.932 33.3675C26.0599 33.3675 26.1642 33.38 26.2449 33.4051C26.3254 33.4301 26.388 33.4731 26.4325 33.5345C26.477 33.5954 26.5076 33.6759 26.5243 33.7757C26.5409 33.8758 26.5494 33.9981 26.5494 34.1425V36.9173C26.5494 36.9619 26.566 37.0021 26.5994 37.0382C26.6327 37.0743 26.6715 37.0923 26.7162 37.0923H27.7255C27.7699 37.0923 27.8102 37.0743 27.8464 37.038C27.8826 37.0019 27.9007 36.9615 27.9007 36.917ZM32.0047 36.1071V36.8502C32.0047 36.9114 31.9907 36.9546 31.963 36.9796C31.9351 37.0047 31.8906 37.0255 31.8294 37.0422C31.7127 37.0701 31.5611 37.0978 31.3749 37.1259C31.1885 37.1535 30.9703 37.1676 30.72 37.1676C30.1305 37.1676 29.6592 36.9867 29.3062 36.6246C28.953 36.2628 28.7765 35.7394 28.7765 35.0546V34.3531C28.7765 33.6682 28.953 33.1448 29.3062 32.7831C29.6592 32.421 30.1305 32.2401 30.72 32.2401C30.9703 32.2401 31.1885 32.254 31.3749 32.2817C31.5611 32.3098 31.7127 32.3375 31.8294 32.3653C31.8906 32.3819 31.9351 32.4029 31.963 32.4279C31.9907 32.453 32.0047 32.4962 32.0047 32.5574V33.3007C32.0047 33.3453 31.9893 33.38 31.9588 33.4051C31.9281 33.4301 31.8906 33.4426 31.8462 33.4426H31.8294C31.6737 33.4261 31.5251 33.4121 31.3832 33.401C31.2413 33.3901 31.0508 33.3842 30.8118 33.3842C30.7172 33.3842 30.6283 33.3996 30.5448 33.4301C30.4613 33.4608 30.3891 33.5137 30.328 33.5888C30.2666 33.6641 30.2181 33.7641 30.1819 33.8895C30.1457 34.0147 30.1277 34.1692 30.1277 34.3531V35.0546C30.1277 35.2382 30.1457 35.3927 30.1819 35.5181C30.2181 35.6433 30.2666 35.7436 30.328 35.8187C30.3891 35.8939 30.4613 35.9468 30.5448 35.9774C30.6283 36.008 30.7172 36.0233 30.8118 36.0233C31.0508 36.0233 31.2413 36.0178 31.3832 36.0067C31.5251 35.9956 31.6737 35.9815 31.8294 35.9649H31.8462C31.8906 35.9649 31.9281 35.9774 31.9588 36.0025C31.9893 36.0276 32.0047 36.0623 32.0047 36.1071ZM36.6346 34.4115C36.6346 34.0773 36.5885 33.7768 36.4966 33.5095C36.4046 33.2423 36.2709 33.0155 36.0954 32.8289C35.9199 32.6424 35.7025 32.4976 35.4436 32.3946C35.1844 32.2918 34.8848 32.2401 34.5449 32.2401C34.2051 32.2401 33.9056 32.2918 33.6465 32.3946C33.3873 32.4976 33.1685 32.6424 32.9903 32.8289C32.8119 33.0155 32.6768 33.2423 32.585 33.5095C32.4928 33.7768 32.4469 34.0773 32.4469 34.4115V34.9961C32.4469 35.3301 32.4928 35.6309 32.585 35.8981C32.6768 36.1653 32.8119 36.3922 32.9903 36.5788C33.1685 36.7654 33.3873 36.91 33.6465 37.013C33.9056 37.1159 34.2051 37.1676 34.5449 37.1676C34.8848 37.1676 35.1844 37.1159 35.4436 37.013C35.7025 36.91 35.9199 36.7654 36.0954 36.5788C36.2709 36.3922 36.4046 36.1653 36.4966 35.8981C36.5885 35.6309 36.6346 35.3301 36.6346 34.9961V34.4115ZM34.5449 36.0233C35.037 36.0233 35.2832 35.6809 35.2832 34.9961V34.4115C35.2832 33.7322 35.037 33.3925 34.5449 33.3925C34.3016 33.3925 34.1164 33.4774 33.9893 33.6472C33.8619 33.8172 33.7984 34.0719 33.7984 34.4115V34.9961C33.7984 35.3357 33.8619 35.5918 33.9893 35.7644C34.1164 35.9371 34.3016 36.0233 34.5449 36.0233ZM41.5976 36.917V34.1358C41.5976 33.8744 41.5765 33.6278 41.5351 33.3968C41.4933 33.166 41.4181 32.9653 41.3095 32.7954C41.2011 32.6256 41.0511 32.4905 40.8593 32.3904C40.6674 32.2902 40.4213 32.2401 40.1211 32.2401C39.8542 32.2401 39.6177 32.2723 39.4119 32.3369C39.2062 32.4014 38.9893 32.515 38.7613 32.6776V32.4752C38.7613 32.4305 38.7447 32.3911 38.7111 32.3575C38.678 32.3238 38.6389 32.3068 38.5945 32.3068H37.6602C37.6157 32.3068 37.5769 32.3235 37.5434 32.357C37.5102 32.3904 37.4934 32.4295 37.4934 32.4739V36.917C37.4934 36.9615 37.5114 37.0019 37.5476 37.038C37.5838 37.0743 37.624 37.0923 37.6687 37.0923H38.678C38.7224 37.0923 38.7613 37.0743 38.7948 37.0382C38.828 37.0021 38.8448 36.9619 38.8448 36.9173V33.6341C38.9893 33.5564 39.1256 33.4925 39.2534 33.4426C39.3815 33.3925 39.5065 33.3675 39.629 33.3675C39.7568 33.3675 39.8611 33.38 39.9416 33.4051C40.0222 33.4301 40.0849 33.4731 40.1294 33.5345C40.1739 33.5954 40.2044 33.6759 40.2212 33.7757C40.2378 33.8758 40.2462 33.9981 40.2462 34.1425V36.9173C40.2462 36.9619 40.2628 37.0021 40.2962 37.0382C40.3296 37.0743 40.3684 37.0923 40.413 37.0923H41.4223C41.4668 37.0923 41.5072 37.0743 41.5434 37.038C41.5794 37.0019 41.5976 36.9615 41.5976 36.917ZM45.2348 36.2893V36.9357C45.2348 37.0295 45.182 37.0848 45.0763 37.1011C44.9483 37.1233 44.8371 37.1398 44.7427 37.1509C44.6481 37.162 44.5395 37.1675 44.4174 37.1675C44.1905 37.1675 43.9901 37.1493 43.816 37.1133C43.6419 37.077 43.4966 37.0061 43.3805 36.9003C43.2646 36.7945 43.1761 36.6483 43.1153 36.4617C43.0547 36.2753 43.0242 36.0347 43.0242 35.7394V33.3175L42.357 33.2088C42.3123 33.1977 42.2721 33.1769 42.2359 33.1462C42.1997 33.1157 42.1817 33.0781 42.1817 33.0335V32.4822C42.1817 32.4378 42.1997 32.3974 42.2359 32.3611C42.2721 32.325 42.3123 32.3068 42.357 32.3068H43.0242V31.622C43.0242 31.5774 43.0409 31.5414 43.0739 31.5134C43.1068 31.4857 43.1458 31.4663 43.1902 31.455L44.2016 31.2798H44.2263C44.2705 31.2798 44.3065 31.2921 44.3343 31.3171C44.3618 31.3423 44.3757 31.3771 44.3757 31.4215V32.3068H45.0597C45.104 32.3068 45.143 32.3237 45.1764 32.3573C45.2099 32.3909 45.2265 32.4305 45.2265 32.4752V33.1573C45.2265 33.2024 45.2099 33.2416 45.1764 33.2752C45.143 33.3089 45.104 33.3257 45.0597 33.3257H44.3757V35.7561C44.3757 35.9231 44.3895 36.0304 44.4174 36.0776C44.4451 36.1249 44.5229 36.1485 44.6507 36.1485H45.0597C45.1764 36.1485 45.2348 36.1955 45.2348 36.2893ZM49.6891 33.9438C49.6891 33.6377 49.6433 33.3772 49.5514 33.1629C49.4597 32.9487 49.3305 32.7732 49.1637 32.6367C48.9969 32.5004 48.7925 32.4003 48.5505 32.3362C48.3087 32.2722 48.0376 32.2401 47.7373 32.2401C47.4589 32.2401 47.188 32.2597 46.924 32.2987C46.6597 32.3375 46.4497 32.3766 46.2942 32.4154C46.1882 32.4435 46.1357 32.5046 46.1357 32.5991V33.2756C46.1357 33.3314 46.1494 33.3705 46.1773 33.3925C46.2052 33.4149 46.2412 33.4261 46.2857 33.4261H46.3274C46.3943 33.4204 46.4776 33.4135 46.5777 33.4051C46.6779 33.3968 46.7905 33.3901 46.9155 33.3842C47.0408 33.3788 47.1714 33.3746 47.3077 33.3717C47.4438 33.3689 47.5788 33.3675 47.7121 33.3675C47.9068 33.3675 48.0598 33.4038 48.171 33.4761C48.2822 33.5486 48.3378 33.7045 48.3378 33.9438V34.2445H47.8874C47.1698 34.2445 46.6486 34.3572 46.3233 34.5827C45.998 34.8081 45.8353 35.1659 45.8353 35.6558V35.7313C45.8353 36.0039 45.8755 36.2321 45.9562 36.4158C46.0366 36.5996 46.144 36.7472 46.2774 36.8587C46.4109 36.9699 46.5623 37.0493 46.7321 37.0964C46.9017 37.1438 47.0782 37.1676 47.2618 37.1676C47.5121 37.1676 47.7274 37.1341 47.9082 37.0673C48.0889 37.0005 48.2597 36.9086 48.4213 36.7917V36.9253C48.4213 36.9699 48.4379 37.0089 48.4713 37.0422C48.5046 37.0756 48.5436 37.0923 48.5881 37.0923H49.5224C49.5668 37.0923 49.6057 37.0756 49.6392 37.0422C49.6724 37.0089 49.6891 36.9699 49.6891 36.9253V33.9438ZM48.0418 36.0942C48.1556 36.0581 48.2628 36.015 48.3629 35.9648V35.0462H47.8874C47.7428 35.0462 47.6233 35.0587 47.5287 35.0837C47.4341 35.1088 47.359 35.1465 47.3035 35.1966C47.2477 35.2465 47.2088 35.3107 47.1868 35.3886C47.1644 35.4666 47.1533 35.5556 47.1533 35.6558V35.7312C47.1533 35.9092 47.1963 36.0233 47.2826 36.0734C47.3688 36.1235 47.5008 36.1485 47.6789 36.1485C47.8067 36.1485 47.9274 36.1306 48.0418 36.0942ZM53.7933 36.8502V36.1071C53.7933 36.0623 53.7779 36.0276 53.7474 36.0025C53.7167 35.9774 53.6793 35.9649 53.6348 35.9649H53.6181C53.4624 35.9815 53.3136 35.9956 53.1718 36.0067C53.0301 36.0178 52.8395 36.0233 52.6005 36.0233C52.5057 36.0233 52.4167 36.008 52.3336 35.9774C52.2501 35.9468 52.1777 35.8939 52.1165 35.8187C52.0554 35.7436 52.0067 35.6433 51.9707 35.5181C51.9343 35.3927 51.9165 35.2382 51.9165 35.0546V34.3531C51.9165 34.1692 51.9343 34.0147 51.9707 33.8895C52.0067 33.7641 52.0554 33.6641 52.1165 33.5888C52.1777 33.5137 52.2501 33.4608 52.3336 33.4301C52.4167 33.3996 52.5057 33.3842 52.6005 33.3842C52.8395 33.3842 53.0301 33.3901 53.1718 33.401C53.3136 33.4121 53.4624 33.4261 53.6181 33.4426H53.6348C53.6793 33.4426 53.7167 33.4301 53.7474 33.4051C53.7779 33.38 53.7933 33.3453 53.7933 33.3007V32.5574C53.7933 32.4962 53.7794 32.453 53.7515 32.4279C53.7235 32.4029 53.6793 32.3819 53.6181 32.3653C53.5014 32.3375 53.3497 32.3098 53.1635 32.2817C52.9771 32.254 52.759 32.2401 52.5087 32.2401C51.9189 32.2401 51.4479 32.421 51.0947 32.7831C50.7415 33.1448 50.565 33.6682 50.565 34.3531V35.0546C50.565 35.7394 50.7415 36.2628 51.0947 36.6246C51.4479 36.9867 51.9189 37.1676 52.5087 37.1676C52.759 37.1676 52.9771 37.1535 53.1635 37.1259C53.3497 37.0978 53.5014 37.0701 53.6181 37.0422C53.6793 37.0255 53.7235 37.0047 53.7515 36.9796C53.7794 36.9546 53.7933 36.9114 53.7933 36.8502ZM57.3884 36.2893V36.9357C57.3884 37.0295 57.3354 37.0848 57.2299 37.1011C57.1019 37.1233 56.9907 37.1398 56.8963 37.1509C56.8016 37.162 56.6931 37.1675 56.571 37.1675C56.3441 37.1675 56.1437 37.1493 55.9696 37.1133C55.7954 37.077 55.6502 37.0061 55.5343 36.9003C55.4183 36.7945 55.3298 36.6483 55.269 36.4617C55.2083 36.2753 55.1778 36.0347 55.1778 35.7394V33.3175L54.5106 33.2088C54.4659 33.1977 54.4257 33.1769 54.3895 33.1462C54.3533 33.1157 54.3353 33.0781 54.3353 33.0335V32.4822C54.3353 32.4378 54.3533 32.3974 54.3895 32.3611C54.4257 32.325 54.4659 32.3068 54.5106 32.3068H55.1778V31.622C55.1778 31.5774 55.1945 31.5414 55.2276 31.5134C55.2605 31.4857 55.2993 31.4663 55.3436 31.455L56.355 31.2798H56.38C56.4241 31.2798 56.4602 31.2921 56.4875 31.3171C56.5154 31.3423 56.5293 31.3771 56.5293 31.4215V32.3068H57.2133C57.2577 32.3068 57.2966 32.3237 57.3301 32.3573C57.3633 32.3909 57.3801 32.4305 57.3801 32.4752V33.1573C57.3801 33.2024 57.3633 33.2416 57.3301 33.2752C57.2966 33.3089 57.2577 33.3257 57.2133 33.3257H56.5293V35.7561C56.5293 35.9231 56.5431 36.0304 56.571 36.0776C56.5987 36.1249 56.6765 36.1485 56.8045 36.1485H57.2133C57.3301 36.1485 57.3884 36.1955 57.3884 36.2893Z", fill: "#005697" }), jsxRuntime.jsx("path", { d: "M52.6187 14.7398H39.0664L37.6881 16.2935L33.2155 21.3349V21.3351L31.8372 22.8886H18.464L19.821 21.3153L20.4633 20.5706L21.8202 18.9973H15.6582C14.5325 18.9973 13.6113 19.943 13.6113 21.0987V25.5326C13.6113 26.6885 14.5325 27.6342 15.6582 27.6342H39.2492C40.3749 27.6342 41.9127 26.9318 42.6665 26.0733L46.235 22.0097L52.6187 14.7398Z", fill: "#005697" }), jsxRuntime.jsx("path", { d: "M55.3418 10C56.4676 10 57.3887 10.9457 57.3887 12.1015V16.5353C57.3887 17.691 56.4676 18.6368 55.3418 18.6368H49.1999L50.5697 17.0753H50.5699L51.2491 16.3012L52.6189 14.7398H39.0667L31.8375 22.8945H18.3813L28.0314 11.9701L28.3966 11.5566C29.153 10.7005 30.6929 10 31.8186 10H55.3418V10Z", fill: "#FBD500" })] })));
18406
+ };
18407
+
18396
18408
  var Text$q = antd.Typography.Text;
18397
18409
  var MiniCreditCard = function (_a) {
18398
18410
  var className = _a.className, buttons = _a.buttons, _b = _a.hideDropdownMenu, hideDropdownMenu = _b === void 0 ? false : _b, _c = _a.hideDefaultTag, hideDefaultTag = _c === void 0 ? false : _c, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData, onClickSetDefault = _a.onClickSetDefault, id = _a.id;
@@ -18420,7 +18432,7 @@ var Identifier = function (_a) {
18420
18432
  var Issuer = function (_a) {
18421
18433
  var _b;
18422
18434
  var paymentMethodData = _a.paymentMethodData;
18423
- var list = ['visa', 'link', 'jcb', 'discover'];
18435
+ var list = ['visa', 'link', 'jcb', 'discover', 'sepa'];
18424
18436
  var issuer = (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer;
18425
18437
  if (issuer.length == 0 || list.includes(issuer.toLowerCase()))
18426
18438
  return null;
@@ -18480,6 +18492,12 @@ var CardImage = function (_a) {
18480
18492
  case 'china_union_pay':
18481
18493
  case 'china_unionpay':
18482
18494
  return jsxRuntime.jsx(ChinaUnionPay, { className: className });
18495
+ case 'sepa':
18496
+ return jsxRuntime.jsx(Sepa, { className: className });
18497
+ case 'ideal':
18498
+ return jsxRuntime.jsx(IDeal, { className: className });
18499
+ case 'bancontact':
18500
+ return jsxRuntime.jsx(Bancontact, { className: className });
18483
18501
  default:
18484
18502
  return jsxRuntime.jsx(CreditCard, { className: className });
18485
18503
  }
@@ -18587,13 +18605,13 @@ var isCardExpired = function (expiry) {
18587
18605
  var formatCardExpiry = function (cardExpiry) {
18588
18606
  if (cardExpiry.length <= 2)
18589
18607
  return cardExpiry;
18590
- return cardExpiry.substring(0, 2) + "/" + cardExpiry.substring(2);
18608
+ return cardExpiry.substring(0, 2) + '/' + cardExpiry.substring(2);
18591
18609
  };
18592
18610
  // removes spaces from a credit card number
18593
18611
  var unformatCardNumber = function (cardNumber) {
18594
- var cardNumberArray = cardNumber.split("");
18595
- var unformattedCardNumberArray = cardNumberArray.filter(function (character) { return character !== " "; });
18596
- return unformattedCardNumberArray.join("");
18612
+ var cardNumberArray = cardNumber.split('');
18613
+ var unformattedCardNumberArray = cardNumberArray.filter(function (character) { return character !== ' '; });
18614
+ return unformattedCardNumberArray.join('');
18597
18615
  };
18598
18616
  var storePayment = function (options, plugin, apiHost, accountId) { return __awaiter(void 0, void 0, void 0, function () {
18599
18617
  var testCreditCardNumber, testCreditCardCvc, testCreditCardExpirationDate, token, response;
@@ -18602,7 +18620,7 @@ var storePayment = function (options, plugin, apiHost, accountId) { return __awa
18602
18620
  case 0:
18603
18621
  testCreditCardNumber = options.testCreditCardNumber, testCreditCardCvc = options.testCreditCardCvc, testCreditCardExpirationDate = options.testCreditCardExpirationDate, token = options.token;
18604
18622
  return [4 /*yield*/, common.invokePlugin({
18605
- method: "store_payment_method",
18623
+ method: 'store_payment_method',
18606
18624
  plugin: plugin,
18607
18625
  payload: {
18608
18626
  test_credit_card_number: testCreditCardNumber,
@@ -18615,7 +18633,7 @@ var storePayment = function (options, plugin, apiHost, accountId) { return __awa
18615
18633
  })];
18616
18634
  case 1:
18617
18635
  response = _a.sent();
18618
- if ((response === null || response === void 0 ? void 0 : response.status) !== "success")
18636
+ if ((response === null || response === void 0 ? void 0 : response.status) !== 'success')
18619
18637
  throw new Error(response === null || response === void 0 ? void 0 : response.message);
18620
18638
  return [2 /*return*/, response];
18621
18639
  }
@@ -18736,7 +18754,7 @@ var DemoPayForm = function (_a) {
18736
18754
  cvc: '',
18737
18755
  }), cardDetails = _d[0], setCardDetails = _d[1];
18738
18756
  var onSave = function () { return __awaiter(void 0, void 0, void 0, function () {
18739
- var error_1, errorResponse;
18757
+ var error_1;
18740
18758
  return __generator(this, function (_a) {
18741
18759
  switch (_a.label) {
18742
18760
  case 0:
@@ -18752,12 +18770,7 @@ var DemoPayForm = function (_a) {
18752
18770
  return [3 /*break*/, 3];
18753
18771
  case 2:
18754
18772
  error_1 = _a.sent();
18755
- errorResponse = {
18756
- response: {
18757
- message: error_1.message,
18758
- },
18759
- };
18760
- onFail(errorResponse);
18773
+ onFail(error_1);
18761
18774
  return [3 /*break*/, 3];
18762
18775
  case 3: return [2 /*return*/];
18763
18776
  }
@@ -18883,11 +18896,13 @@ function useSave(_a) {
18883
18896
 
18884
18897
  var PaymentMethodForm = function (_a) {
18885
18898
  var plugin = _a.plugin, onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod;
18899
+ var _b = react.useState(false), isIdealWarningOpen = _b[0], setIsIdealWarningOpen = _b[1];
18900
+ var idealWarningHasShown = react.useRef(false);
18886
18901
  // Hooks
18887
- var _b = useSave({
18902
+ var _c = useSave({
18888
18903
  onSaveSuccess: onSavePaymentMethod,
18889
18904
  onSaveError: onFail,
18890
- }), save = _b.save, isSaving = _b.isSaving;
18905
+ }), save = _c.save, isSaving = _c.isSaving;
18891
18906
  // Handlers
18892
18907
  var onSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
18893
18908
  var error_1;
@@ -18907,10 +18922,20 @@ var PaymentMethodForm = function (_a) {
18907
18922
  }
18908
18923
  });
18909
18924
  }); };
18925
+ var onChange = function (event) {
18926
+ if (event.value.type === 'ideal' && !idealWarningHasShown.current) {
18927
+ idealWarningHasShown.current = true;
18928
+ setIsIdealWarningOpen(true);
18929
+ }
18930
+ };
18910
18931
  return (jsxRuntime.jsxs("form", { children: [jsxRuntime.jsx(reactStripeJs.PaymentElement, { options: {
18911
18932
  layout: { type: 'accordion' },
18912
- } }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSubmit })] }));
18933
+ }, onChange: onChange }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSubmit }), jsxRuntime.jsx(IdealWarningModal, { isOpen: isIdealWarningOpen, onClose: function () { return setIsIdealWarningOpen(false); } })] }));
18913
18934
  };
18935
+ function IdealWarningModal(_a) {
18936
+ var isOpen = _a.isOpen, onClose = _a.onClose;
18937
+ return (jsxRuntime.jsx(antd.Modal, __assign({ open: isOpen, onCancel: onClose, footer: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: onClose }, { children: "Ok" })) }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-p-4" }, { children: "iDEAL will charge a 1 cent fee when storing this payment method. You will be refunded later." })) })));
18938
+ }
18914
18939
 
18915
18940
  // This is just a wrapper to fetch the stripe object and pass it to the form
18916
18941
  var StripeForm = function (_a) {
@@ -18925,7 +18950,7 @@ var PaymentMethodDetails = function (_a) {
18925
18950
  case 'StripePayment':
18926
18951
  return (jsxRuntime.jsx(StripeForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
18927
18952
  case 'DemoPayPayment':
18928
- return (jsxRuntime.jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
18953
+ return (jsxRuntime.jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: function (response) { return onSavePaymentMethod(response); }, plugin: plugin }));
18929
18954
  default:
18930
18955
  console.warn('Can not find form for plugin', plugin);
18931
18956
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -19071,7 +19096,7 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
19071
19096
  var showErrorNotification$2 = common.useErrorNotification();
19072
19097
  var PaymentForm = function (_a) {
19073
19098
  var _b;
19074
- 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, entityId = _a.entityId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, paymentHoldOptions = _a.paymentHoldOptions;
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;
19075
19100
  // Local state
19076
19101
  var _c = react.useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
19077
19102
  // Simple hooks
@@ -19085,7 +19110,7 @@ var PaymentForm = function (_a) {
19085
19110
  apiHost: apiHost,
19086
19111
  }), storedPaymentMethods = _d.paymentMethods, defaultPaymentMethod = _d.defaultPaymentMethod, isPaymentMethodLoading = _d.isLoading;
19087
19112
  // Complex hooks
19088
- var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, selectedEntityId: entityId, token: token }).paymentPlugins;
19113
+ var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, token: token, accountId: accountId }).paymentPlugins;
19089
19114
  var selectedPaymentMethodPlugin = react.useMemo(function () {
19090
19115
  // TODO: consolate PluginData and PaymentPlugin into one type. Needs to be done on API side.
19091
19116
  return 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()); });
@@ -19143,14 +19168,14 @@ var PaymentForm = function (_a) {
19143
19168
  setShowPaymentMethodForm(false);
19144
19169
  onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
19145
19170
  };
19146
- var handleSavePaymentMethod = function () {
19171
+ var handleSavePaymentMethod = function (response) {
19147
19172
  queryClient.invalidateQueries({
19148
19173
  queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
19149
19174
  accountId: accountId,
19150
19175
  token: token,
19151
19176
  }),
19152
19177
  });
19153
- onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
19178
+ onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
19154
19179
  setShowPaymentMethodForm(false);
19155
19180
  };
19156
19181
  function handleClickAddPaymentMethod() {
@@ -19192,15 +19217,6 @@ function StripeWrapper(_a) {
19192
19217
  return (jsxRuntime.jsx(reactStripeJs.Elements, __assign({ options: options, stripe: stripe }, { children: children })));
19193
19218
  }
19194
19219
 
19195
- var useCurrentUserData = function () {
19196
- var queryClient = reactQuery.useQueryClient();
19197
- var token = useToken();
19198
- var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
19199
- if (!currentUser)
19200
- return {};
19201
- return currentUser;
19202
- };
19203
-
19204
19220
  function Invoice(_a) {
19205
19221
  var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onInvoiceLoaded = _a.onInvoiceLoaded;
19206
19222
  return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
@@ -19223,7 +19239,6 @@ function ActualInvoice() {
19223
19239
  var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired;
19224
19240
  var _c = react.useContext(InvoiceQuoteContext), hideDownloadButton = _c.hideDownloadButton, onInvoiceLoaded = _c.onInvoiceLoaded;
19225
19241
  var token = useToken();
19226
- var entityId = useCurrentUserData().entityId;
19227
19242
  // Hooks
19228
19243
  var showSuccessNotification = common.useSuccessNotification();
19229
19244
  var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
@@ -19259,12 +19274,12 @@ function ActualInvoice() {
19259
19274
  }, [formattedInvoice]);
19260
19275
  if (!formattedInvoice)
19261
19276
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
19262
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
19277
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
19263
19278
  }
19264
19279
 
19265
- var MUTATION$8 = function (id) { 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 }"; };
19280
+ 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 }"; };
19266
19281
  var getFormattedQuote = function (_a) {
19267
- var id = _a.id, token = _a.token, apiHost = _a.apiHost;
19282
+ var token = _a.token, apiHost = _a.apiHost;
19268
19283
  return __awaiter(void 0, void 0, void 0, function () {
19269
19284
  var response;
19270
19285
  return __generator(this, function (_b) {
@@ -19273,12 +19288,11 @@ var getFormattedQuote = function (_a) {
19273
19288
  query: MUTATION$8(),
19274
19289
  token: token,
19275
19290
  apiHost: apiHost,
19276
- vars: { id: id },
19277
19291
  })];
19278
19292
  case 1:
19279
19293
  response = _b.sent();
19280
- if (response === null || response === void 0 ? void 0 : response.formattedQuote.error) {
19281
- throw new Error(response === null || response === void 0 ? void 0 : response.formattedQuote.error);
19294
+ if (response.errors && response.errors.length > 0) {
19295
+ throw new Error(response.errors[0].message);
19282
19296
  }
19283
19297
  return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedQuote];
19284
19298
  }
@@ -19573,10 +19587,9 @@ var PaymentHoldModal = function (_a) {
19573
19587
  var visible = _a.visible, setVisible = _a.setVisible, quote = _a.quote;
19574
19588
  var queryClient = reactQuery.useQueryClient();
19575
19589
  var token = useToken();
19576
- var entityId = useCurrentUserData().entityId;
19577
19590
  return (jsxRuntime.jsxs(StyledModal$1, __assign({ centered: true, onCancel: function () {
19578
19591
  setVisible(false);
19579
- }, footer: null, open: visible, width: 600 }, { children: [jsxRuntime.jsx(Title$2, __assign({ className: "mt-4 pb-4 mx-4", level: 5 }, { children: "Pay to accept" })), jsxRuntime.jsx("div", __assign({ className: "mb-4" }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, quote: {
19592
+ }, footer: null, open: visible, width: 600 }, { children: [jsxRuntime.jsx(Title$2, __assign({ className: "mt-4 pb-4 mx-4", level: 5 }, { children: "Pay to accept" })), jsxRuntime.jsx("div", __assign({ className: "mb-4" }, { children: jsxRuntime.jsx(PaymentForm, { quote: {
19580
19593
  amount: quote.amount,
19581
19594
  currencyId: quote.currency,
19582
19595
  id: quote.quote.id,
@@ -19639,18 +19652,10 @@ function ActualQuote() {
19639
19652
  var _f = reactQuery.useQuery({
19640
19653
  queryKey: common.QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
19641
19654
  queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
19642
- var error_1;
19643
19655
  return __generator(this, function (_a) {
19644
19656
  switch (_a.label) {
19645
- case 0:
19646
- _a.trys.push([0, 2, , 3]);
19647
- return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost, id: id })];
19657
+ case 0: return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost })];
19648
19658
  case 1: return [2 /*return*/, _a.sent()];
19649
- case 2:
19650
- error_1 = _a.sent();
19651
- showErrorNotification(error_1.message);
19652
- return [3 /*break*/, 3];
19653
- case 3: return [2 /*return*/];
19654
19659
  }
19655
19660
  });
19656
19661
  }); },
@@ -19665,7 +19670,6 @@ function ActualQuote() {
19665
19670
  }), acceptBoxVisible = _g.acceptBoxVisible, isAccepting = _g.isAccepting, sendAccept = _g.sendAccept, setAcceptBoxVisible = _g.setAcceptBoxVisible, setIsAccepting = _g.setIsAccepting, startAcceptance = _g.startAcceptance, pandadocPollingModalVisible = _g.pandadocPollingModalVisible, setPandadocPollingModalVisible = _g.setPandadocPollingModalVisible, isSendAcceptPending = _g.isSendAcceptPending;
19666
19671
  useSigningComplete({ data: formattedQuote, token: token });
19667
19672
  var isMobile = common.useIsMobile();
19668
- var showErrorNotification = common.useErrorNotification();
19669
19673
  react.useEffect(function () {
19670
19674
  if (formattedQuote) {
19671
19675
  onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote);
@@ -19690,9 +19694,7 @@ function ActualQuote() {
19690
19694
  if ((firstInvoice === null || firstInvoice === void 0 ? void 0 : firstInvoice.state) === 'PAID' && paymentHoldCompleted) {
19691
19695
  return jsxRuntime.jsx(Invoice, { id: firstInvoice.id });
19692
19696
  }
19693
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.documentTemplateId)
19694
- ? "".concat(apiHost, "/api/pdf/quote/").concat(formattedQuote.quote.id)
19695
- : undefined }, { children: ((_d = (_c = formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.quote.documents.map(function (doc, index) {
19697
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.documentTemplateId) ? "/pdf/quote" : undefined }, { children: ((_d = (_c = formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.quote.documents.map(function (doc, index) {
19696
19698
  return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
19697
19699
  }) }))) : 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 })] }));
19698
19700
  }
@@ -19779,31 +19781,31 @@ var StateTag = function (_a) {
19779
19781
  if (transactionStateRenderer) {
19780
19782
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactionStateRenderer(state) });
19781
19783
  }
19782
- return (jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) })));
19784
+ return jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) }));
19783
19785
  };
19784
19786
  var getColor = function (state) {
19785
19787
  switch (state) {
19786
- case common.FrontendTransaction.TransactionState.not_due:
19787
- return "yellow";
19788
- case common.FrontendTransaction.TransactionState.voided:
19789
- return "black";
19790
- case common.FrontendTransaction.TransactionState.ready:
19791
- return "orange";
19792
- case common.FrontendTransaction.TransactionState.preparing:
19793
- return "purple";
19794
- case common.FrontendTransaction.TransactionState.unapplied:
19795
- case common.FrontendTransaction.TransactionState.partially_applied:
19796
- case common.FrontendTransaction.TransactionState.applied:
19797
- return "blue";
19798
- case common.FrontendTransaction.TransactionState.due:
19799
- case common.FrontendTransaction.TransactionState.unpaid:
19800
- return "orange";
19801
- case common.FrontendTransaction.TransactionState.failed:
19802
- return "red";
19803
- case common.FrontendTransaction.TransactionState.paid:
19804
- return "green";
19788
+ case common.TransactionState.not_due:
19789
+ return 'yellow';
19790
+ case common.TransactionState.voided:
19791
+ return 'black';
19792
+ case common.TransactionState.ready:
19793
+ return 'orange';
19794
+ case common.TransactionState.preparing:
19795
+ return 'purple';
19796
+ case common.TransactionState.unapplied:
19797
+ case common.TransactionState.partially_applied:
19798
+ case common.TransactionState.applied:
19799
+ return 'blue';
19800
+ case common.TransactionState.due:
19801
+ case common.TransactionState.unpaid:
19802
+ return 'orange';
19803
+ case common.TransactionState.failed:
19804
+ return 'red';
19805
+ case common.TransactionState.paid:
19806
+ return 'green';
19805
19807
  default:
19806
- return "blue";
19808
+ return 'blue';
19807
19809
  }
19808
19810
  };
19809
19811
 
@@ -19824,7 +19826,7 @@ var TransactionDownload = function (_a) {
19824
19826
  var downloadTransactionLink = react.useContext(TransactionsListContext).downloadTransactionLink;
19825
19827
  var downloadFile = useDownloadFile();
19826
19828
  var isMobile = common.useIsMobile();
19827
- var isClickable = transaction.kind === "INVOICE" || downloadTransactionLink !== undefined;
19829
+ var isClickable = transaction.kind === 'INVOICE' || downloadTransactionLink !== undefined;
19828
19830
  var downloadLink = downloadTransactionLink
19829
19831
  ? downloadTransactionLink(transaction.transactionableId)
19830
19832
  : "".concat(apiHost, "/api/pdf/invoice/").concat(transaction.transactionableId);
@@ -19833,7 +19835,7 @@ var TransactionDownload = function (_a) {
19833
19835
  return (jsxRuntime.jsx("div", __assign({ onClick: function (e) {
19834
19836
  e.stopPropagation();
19835
19837
  downloadFile(downloadLink, token);
19836
- } }, { children: jsxRuntime.jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "bunny-show-on-hover"), color: darkMode ? common.WHITE : common.SLATE_600 }) })));
19838
+ } }, { children: jsxRuntime.jsx(ArrowDownToLine, { className: "".concat(isMobile ? '' : 'bunny-show-on-hover'), color: darkMode ? common.WHITE : common.SLATE_600 }) })));
19837
19839
  };
19838
19840
 
19839
19841
  var TransactionGridCell = defaultStyled.div.withConfig({
@@ -19855,29 +19857,25 @@ var TransactionsEmptyState = function () {
19855
19857
 
19856
19858
  var Text$k = antd.Typography.Text;
19857
19859
  var isInvoice = function (transaction) {
19858
- return transaction.kind === "INVOICE";
19859
- };
19860
- var isQuote = function (transaction) {
19861
- return transaction.kind === "QUOTE";
19860
+ return transaction.kind === 'INVOICE';
19862
19861
  };
19863
19862
  var TransactionRowTitle = function (_a) {
19864
19863
  var transaction = _a.transaction;
19865
- if (!isInvoice(transaction) && !isQuote(transaction)) {
19864
+ if (!isInvoice(transaction)) {
19866
19865
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
19867
19866
  }
19868
- return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19867
+ return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: '11px' } }, { children: transaction.transactionable.number })));
19869
19868
  };
19870
19869
 
19871
19870
  function transactionDateToDisplay(transaction, transactionDateType) {
19872
- var _a, _b;
19873
- if (transaction.kind === "PAYMENT") {
19871
+ if (transaction.kind === common.TransactionKind.PAYMENT) {
19874
19872
  return transaction.createdAt;
19875
19873
  }
19876
- else if (transaction.kind !== "REFUND" && transactionDateType === "dueAt") {
19877
- return (_a = transaction.transactionable) === null || _a === void 0 ? void 0 : _a.dueAt;
19874
+ else if (transaction.kind !== common.TransactionKind.REFUND && transactionDateType === 'dueAt') {
19875
+ return transaction.transactionable.dueAt || '';
19878
19876
  }
19879
- else if (transactionDateType === "issuedAt") {
19880
- return (_b = transaction.transactionable) === null || _b === void 0 ? void 0 : _b.issuedAt;
19877
+ else if (transactionDateType === 'issuedAt') {
19878
+ return transaction.transactionable.issuedAt || '';
19881
19879
  }
19882
19880
  else {
19883
19881
  return transaction.createdAt;
@@ -19891,29 +19889,29 @@ var TransactionsListDesktop = function (_a) {
19891
19889
  var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
19892
19890
  var token = useToken();
19893
19891
  // Columns to show
19894
- var showDate = columns.includes("date");
19895
- var showTitle = columns.includes("title");
19896
- var showAccountName = columns.includes("accountName");
19897
- var showDownload = columns.includes("download");
19898
- var showAmount = columns.includes("amount");
19899
- var showState = columns.includes("state");
19892
+ var showDate = columns.includes('date');
19893
+ var showTitle = columns.includes('title');
19894
+ var showAccountName = columns.includes('accountName');
19895
+ var showDownload = columns.includes('download');
19896
+ var showAmount = columns.includes('amount');
19897
+ var showState = columns.includes('state');
19900
19898
  if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
19901
19899
  return jsxRuntime.jsx(TransactionsEmptyState, {});
19902
19900
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
19903
19901
  var _a, _b;
19904
19902
  var isClickable = onTransactionClick !== undefined;
19905
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
19903
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && 'cursor-pointer', " bunny-show-on-hover-container"), onClick: function () {
19906
19904
  onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
19907
19905
  }, style: {
19908
19906
  backgroundColor: index % 2 === 0
19909
- ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
19910
- : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
19907
+ ? "var(--row-background".concat(darkMode ? '-dark' : '', ")")
19908
+ : "var(--row-background-alternate".concat(darkMode ? '-dark' : '', ")"),
19911
19909
  } }, { children: [!showDate &&
19912
19910
  !showTitle &&
19913
19911
  !showState &&
19914
19912
  !showAmount &&
19915
19913
  !showDownload &&
19916
- !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$j, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
19914
+ !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && jsxRuntime.jsx(TransactionGridCell, { right: false }), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$j, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
19917
19915
  }) }));
19918
19916
  };
19919
19917
 
@@ -19923,25 +19921,24 @@ var TransactionsListMobile = function (_a) {
19923
19921
  var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
19924
19922
  var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
19925
19923
  var token = useToken();
19926
- var showAmount = columns.includes("amount");
19927
- var showDate = columns.includes("date");
19928
- var showTitle = columns.includes("title");
19929
- var showAccountName = columns.includes("accountName");
19930
- var showDownload = columns.includes("download");
19931
- var showState = columns.includes("state");
19924
+ var showAmount = columns.includes('amount');
19925
+ var showDate = columns.includes('date');
19926
+ var showTitle = columns.includes('title');
19927
+ var showAccountName = columns.includes('accountName');
19928
+ var showDownload = columns.includes('download');
19929
+ var showState = columns.includes('state');
19932
19930
  if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
19933
19931
  return jsxRuntime.jsx(TransactionsEmptyState, {});
19934
19932
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
19935
19933
  var _a;
19936
- var isClickable = transaction.kind === "INVOICE";
19937
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
19934
+ var isClickable = transaction.kind === 'INVOICE';
19935
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && 'cursor-pointer', " bunny-show-on-hover-container"), onClick: function () {
19938
19936
  onTransactionClick(transaction);
19939
19937
  }, style: {
19940
19938
  backgroundColor: index % 2 === 0
19941
- ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
19942
- : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
19943
- } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$i, { children: common.formatCurrency(transaction.transactionable.amount ||
19944
- transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
19939
+ ? "var(--row-background".concat(darkMode ? '-dark' : '', ")")
19940
+ : "var(--row-background-alternate".concat(darkMode ? '-dark' : '', ")"),
19941
+ } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$i, { children: common.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
19945
19942
  }) }));
19946
19943
  };
19947
19944
 
@@ -19992,7 +19989,7 @@ function Transactions(_a) {
19992
19989
  function TransactionsDisplay(_a) {
19993
19990
  var _b, _c;
19994
19991
  var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search;
19995
- var _d = react.useContext(TransactionsListContext), showSearchBar = _d.showSearchBar, showTitle = _d.showTitle, title = _d.title, transactionComponent = _d.transactionComponent, useModal = _d.useModal, suppressTransactionDisplay = _d.suppressTransactionDisplay, className = _d.className, shadow = _d.shadow, searchBarClassName = _d.searchBarClassName, style = _d.style, onTransactionClick = _d.onTransactionClick, onTransactionDisplayClose = _d.onTransactionDisplayClose, kindsToShow = _d.kindsToShow, filterTransactions = _d.filterTransactions, sortTransactions = _d.sortTransactions; _d.transactionDateType;
19992
+ var _d = react.useContext(TransactionsListContext), showSearchBar = _d.showSearchBar, showTitle = _d.showTitle, title = _d.title, transactionComponent = _d.transactionComponent, useModal = _d.useModal, suppressTransactionDisplay = _d.suppressTransactionDisplay, className = _d.className, shadow = _d.shadow, searchBarClassName = _d.searchBarClassName, style = _d.style, onTransactionClick = _d.onTransactionClick, onTransactionDisplayClose = _d.onTransactionDisplayClose, kindsToShow = _d.kindsToShow, filterTransactions = _d.filterTransactions, sortTransactions = _d.sortTransactions;
19996
19993
  var columns = react.useContext(TransactionsListContext).columns;
19997
19994
  var darkMode = react.useContext(BunnyContext).darkMode;
19998
19995
  var secondaryColor = react.useContext(BrandContext).secondaryColor;
@@ -20071,9 +20068,9 @@ function TransactionsDisplay(_a) {
20071
20068
  }
20072
20069
 
20073
20070
  function Quotes(_a) {
20074
- var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ["date", "title", "amount", "download", "state"] : _b, filter = _a.filter, filterQuotes = _a.filterQuotes, _c = _a.sort, sort = _c === void 0 ? function (a, b) {
20071
+ var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ['date', 'title', 'amount', 'download', 'state'] : _b, filter = _a.filter, filterQuotes = _a.filterQuotes, _c = _a.sort, sort = _c === void 0 ? function (a, b) {
20075
20072
  return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
20076
- } : _c, _d = _a.noQuotesMessage, noQuotesMessage = _d === void 0 ? "There are no quotes" : _d, onQuoteClick = _a.onQuoteClick, quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _e = _a.shadow, shadow = _e === void 0 ? "shadow-md" : _e, _f = _a.showSearchBar, showSearchBar = _f === void 0 ? true : _f, _g = _a.showTitle, showTitle = _g === void 0 ? true : _g, _h = _a.title, title = _h === void 0 ? "Past quotes" : _h, style = _a.style, _j = _a.suppressQuoteDisplay, suppressQuoteDisplay = _j === void 0 ? false : _j, _k = _a.useModal, useModal = _k === void 0 ? false : _k;
20073
+ } : _c, _d = _a.noQuotesMessage, noQuotesMessage = _d === void 0 ? 'There are no quotes' : _d, onQuoteClick = _a.onQuoteClick, quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _e = _a.shadow, shadow = _e === void 0 ? 'shadow-md' : _e, _f = _a.showSearchBar, showSearchBar = _f === void 0 ? true : _f, _g = _a.showTitle, showTitle = _g === void 0 ? true : _g, _h = _a.title, title = _h === void 0 ? 'Past quotes' : _h, style = _a.style, _j = _a.suppressQuoteDisplay, suppressQuoteDisplay = _j === void 0 ? false : _j, _k = _a.useModal, useModal = _k === void 0 ? false : _k;
20077
20074
  var apiHost = react.useContext(BunnyContext).apiHost;
20078
20075
  var _l = react.useState(null), component = _l[0], setComponent = _l[1];
20079
20076
  var contextValues = {
@@ -20099,27 +20096,27 @@ function Quotes(_a) {
20099
20096
  filterTransactions: filterQuotes,
20100
20097
  sortTransactions: sort,
20101
20098
  downloadTransactionLink: function (id) { return "".concat(apiHost, "/api/pdf/quote/").concat(id); },
20102
- transactionDateType: "createdAt", // Required for the transactions list, but doesn't affect quotes
20099
+ transactionDateType: 'createdAt', // Required for the transactions list, but doesn't affect quotes
20103
20100
  };
20104
20101
  function quoteStateRenderer(state) {
20105
20102
  var getColor = function (state) {
20106
20103
  switch (state) {
20107
- case "ACCEPTED":
20108
- return "green";
20109
- case "IN_APPROVAL":
20110
- return "orange";
20111
- case "APPROVED":
20112
- return "green";
20113
- case "REJECTED":
20114
- return "red";
20115
- case "DRAFT":
20116
- case "SHARED":
20117
- case "VIEWED":
20104
+ case 'ACCEPTED':
20105
+ return 'green';
20106
+ case 'IN_APPROVAL':
20107
+ return 'orange';
20108
+ case 'APPROVED':
20109
+ return 'green';
20110
+ case 'REJECTED':
20111
+ return 'red';
20112
+ case 'DRAFT':
20113
+ case 'SHARED':
20114
+ case 'VIEWED':
20118
20115
  default:
20119
- return "blue";
20116
+ return 'blue';
20120
20117
  }
20121
20118
  };
20122
- return (jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) })));
20119
+ return jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) }));
20123
20120
  }
20124
20121
  function handleQuoteClick(quote) {
20125
20122
  onQuoteClick === null || onQuoteClick === void 0 ? void 0 : onQuoteClick(quote);
@@ -20137,11 +20134,11 @@ function QuotesWrapper() {
20137
20134
  var token = useToken();
20138
20135
  var filterFromContext = react.useContext(TransactionsListContext).filter;
20139
20136
  // Local state
20140
- var _a = react.useState(""), search = _a[0], setSearch = _a[1];
20141
- var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : "");
20137
+ var _a = react.useState(''), search = _a[0], setSearch = _a[1];
20138
+ var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : '');
20142
20139
  // Queries
20143
20140
  var data = reactQuery.useQuery({
20144
- queryKey: ["quotes", token, filter],
20141
+ queryKey: ['quotes', token, filter],
20145
20142
  queryFn: function () { return getQuotes({ token: token, apiHost: apiHost, filter: filter }); },
20146
20143
  placeholderData: reactQuery.keepPreviousData,
20147
20144
  }).data;
@@ -20149,7 +20146,7 @@ function QuotesWrapper() {
20149
20146
  return null;
20150
20147
  // filter out quotes in draft state, they are not viewable
20151
20148
  var quotes = data.nodes.filter(function (quote) {
20152
- return quote.state !== "DRAFT";
20149
+ return quote.state !== 'DRAFT';
20153
20150
  });
20154
20151
  var quotesAsTransactions = quotes.map(function (quote) {
20155
20152
  var _a, _b;
@@ -20157,7 +20154,7 @@ function QuotesWrapper() {
20157
20154
  transactionableId: quote.id,
20158
20155
  state: quote.state,
20159
20156
  amount: quote.amount || quote.amountDue,
20160
- kind: "QUOTE",
20157
+ kind: 'QUOTE',
20161
20158
  currencyId: quote.currencyId,
20162
20159
  transactionable: {
20163
20160
  number: quote.number,
@@ -20286,7 +20283,7 @@ var getPriceList = function (_a) {
20286
20283
  });
20287
20284
  };
20288
20285
 
20289
- var QUOTE_QUERY = function (id) { return "\n query quote {\n quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n amountsByPeriod {\n amount\n startDate\n }\n quoteChanges {\n currencyId\n id\n kind\n charges {\n subtotal\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n coupon {\n couponCode\n }\n quantity\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
20286
+ var QUOTE_QUERY = function (id) { return "\n query quote {\n quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n startDate\n amountsByPeriod {\n amount\n startDate\n }\n kind\n quoteChanges {\n currencyId\n id\n kind\n charges {\n subtotal\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n coupon {\n couponCode\n }\n quantity\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
20290
20287
  var getQuote = function (_a) {
20291
20288
  var id = _a.id, token = _a.token, apiHost = _a.apiHost;
20292
20289
  return __awaiter(void 0, void 0, void 0, function () {
@@ -20441,6 +20438,15 @@ var useUpdateCoupons = function (_a) {
20441
20438
  };
20442
20439
  };
20443
20440
 
20441
+ var useCurrentUserData = function () {
20442
+ var queryClient = reactQuery.useQueryClient();
20443
+ var token = useToken();
20444
+ var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
20445
+ if (!currentUser)
20446
+ return {};
20447
+ return currentUser;
20448
+ };
20449
+
20444
20450
  var BunnyFooterIcon = function (_a) {
20445
20451
  var color = _a.color;
20446
20452
  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" }) })) })] })));
@@ -20462,6 +20468,22 @@ var StyedLink = styled__default["default"].a(templateObject_1$5 || (templateObje
20462
20468
  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);
20463
20469
  var templateObject_1$5, templateObject_2$1;
20464
20470
 
20471
+ function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
20472
+ var _a;
20473
+ var upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
20474
+ function upgradingFromFree() {
20475
+ 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);
20476
+ return totalPrice === 0;
20477
+ }
20478
+ if (quote.kind === common.QuoteChangeKind.SUBSCRIBE) {
20479
+ return activeCouponsExist;
20480
+ }
20481
+ else if (quote.kind === common.QuoteChangeKind.ADJUSTMENT) {
20482
+ return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
20483
+ }
20484
+ return false;
20485
+ }
20486
+
20465
20487
  function CouponEditor(_a) {
20466
20488
  var className = _a.className, onAddCoupon = _a.onAddCoupon, isAddingCoupon = _a.isAddingCoupon, couponCode = _a.couponCode, setCouponCode = _a.setCouponCode;
20467
20489
  function handleAddCoupon() {
@@ -20475,9 +20497,12 @@ function CouponEditor(_a) {
20475
20497
  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" }))] })) })));
20476
20498
  }
20477
20499
 
20500
+ var SubscriptionsContext = react.createContext({});
20501
+
20478
20502
  var Text$f = antd.Typography.Text;
20479
20503
  function CheckoutSummary(_a) {
20480
20504
  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;
20505
+ var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
20481
20506
  return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxRuntime.jsxs(Text$f, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-text-lg bunny-font-medium bunny-mb-4" }, { children: ["Checkout summary - ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.product.name, " ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.name] })), jsxRuntime.jsx("div", __assign({ className: "bunny-space-y-4" }, { children: quote === null || quote === void 0 ? void 0 : quote.quoteChanges.map(function (quoteChange) {
20482
20507
  return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
20483
20508
  var _a;
@@ -20493,7 +20518,8 @@ function CheckoutSummary(_a) {
20493
20518
  onRemoveCoupon((_b = charge.coupon) === null || _b === void 0 ? void 0 : _b.couponCode);
20494
20519
  }, 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));
20495
20520
  });
20496
- }) })), 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 }))] })));
20521
+ }) })), 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 &&
20522
+ shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsxRuntime.jsx(CouponEditor, { className: "bunny-w-full", quote: quote, onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] })));
20497
20523
  }
20498
20524
  var CheckoutSummaryDivider = function () {
20499
20525
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-my-2" }, { children: jsxRuntime.jsx(antd.Divider, { className: "m-0" }) })));
@@ -20501,12 +20527,11 @@ var CheckoutSummaryDivider = function () {
20501
20527
 
20502
20528
  var Title$1 = antd.Typography.Title;
20503
20529
  function PaymentForms(_a) {
20504
- var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction;
20505
- var entityId = useCurrentUserData().entityId;
20506
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Payment" })), jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction })] })) : null })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Signup" })), jsxRuntime.jsx(InitialSignupForm, { className: "bunny-px-4", onSubmit: handleSubmit, submitting: proceedingToPayment })] })) }));
20530
+ var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, defaultValues = _a.defaultValues;
20531
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Payment" })), jsxRuntime.jsx("div", __assign({ className: "bunny-overflow-y-auto bunny-max-h-[calc(100vh-10rem)]" }, { children: jsxRuntime.jsx(PaymentForm, { onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction }) }))] })) : null })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Signup" })), jsxRuntime.jsx(InitialSignupForm, { className: "bunny-px-4", onSubmit: handleSubmit, submitting: proceedingToPayment, defaultValues: defaultValues })] })) }));
20507
20532
  }
20508
20533
  function InitialSignupForm(_a) {
20509
- var className = _a.className, onSubmit = _a.onSubmit, submitting = _a.submitting;
20534
+ var className = _a.className, onSubmit = _a.onSubmit, submitting = _a.submitting, defaultValues = _a.defaultValues;
20510
20535
  var form = antd.Form.useForm()[0];
20511
20536
  var isMobile = common.useIsMobile();
20512
20537
  function handleSubmit() {
@@ -20514,6 +20539,22 @@ function InitialSignupForm(_a) {
20514
20539
  onSubmit(form.getFieldsValue());
20515
20540
  });
20516
20541
  }
20542
+ react.useEffect(function () {
20543
+ if (defaultValues) {
20544
+ // Set all non empty default values
20545
+ form.setFieldsValue(Object.fromEntries(Object.entries(__assign(__assign({}, defaultValues), { billingCountry: undefined })).filter(function (_a) {
20546
+ var v = _a[0]; _a[1];
20547
+ return v;
20548
+ })));
20549
+ // Set billing country if it's in the country list
20550
+ if (defaultValues.billingCountry &&
20551
+ common.Lists.COUNTRY_LIST.find(function (c) { return c.value === defaultValues.billingCountry; })) {
20552
+ form.setFieldsValue({
20553
+ billingCountry: defaultValues.billingCountry,
20554
+ });
20555
+ }
20556
+ }
20557
+ }, [defaultValues]);
20517
20558
  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: [
20518
20559
  { required: true, message: 'Email is required' },
20519
20560
  { type: 'email', message: 'Please enter a valid email' },
@@ -20542,7 +20583,7 @@ var showErrorNotification = common.useErrorNotification();
20542
20583
  var showSuccessNotification$1 = common.useSuccessNotification();
20543
20584
  function Signup(_a) {
20544
20585
  var _b, _c, _d;
20545
- var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, couponCode = _a.couponCode, className = _a.className, _e = _a.shadow, shadow = _e === void 0 ? 'shadow-md' : _e, style = _a.style;
20586
+ var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, couponCode = _a.couponCode, className = _a.className, _e = _a.shadow, shadow = _e === void 0 ? 'shadow-md' : _e, style = _a.style, defaultFirstName = _a.defaultFirstName, defaultLastName = _a.defaultLastName, defaultEmail = _a.defaultEmail, defaultCompanyName = _a.defaultCompanyName, defaultBillingCountry = _a.defaultBillingCountry;
20546
20587
  // Hooks
20547
20588
  var apiHost = react.useContext(BunnyContext).apiHost;
20548
20589
  var tokenFromContexts = useToken();
@@ -20642,16 +20683,18 @@ function Signup(_a) {
20642
20683
  enabled: !!(initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id),
20643
20684
  }), data = _o.data, isLoadingQuote = _o.isLoading;
20644
20685
  var quote = data || initialQuote;
20686
+ var quoteChangeId = (_d = (_b = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _b === void 0 ? void 0 : _b[((_c = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _c === void 0 ? void 0 : _c.length) - 1]) === null || _d === void 0 ? void 0 : _d.id;
20645
20687
  var _p = useUpdateCoupons({
20646
20688
  apiHost: apiHost,
20647
20689
  token: token,
20648
- quoteChangeId: (_d = (_b = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _b === void 0 ? void 0 : _b[((_c = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _c === void 0 ? void 0 : _c.length) - 1]) === null || _d === void 0 ? void 0 : _d.id,
20690
+ quoteChangeId: quoteChangeId,
20649
20691
  onCouponAdded: function () {
20650
20692
  queryClient.invalidateQueries({
20651
20693
  queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
20652
20694
  });
20653
20695
  showSuccessNotification$1('Coupon applied');
20654
20696
  recalculateTaxes();
20697
+ setCouponEditorCouponCode('');
20655
20698
  },
20656
20699
  onCouponRemoved: function () {
20657
20700
  queryClient.invalidateQueries({
@@ -20663,11 +20706,11 @@ function Signup(_a) {
20663
20706
  }), addCoupon = _p.addCoupon, removeCoupon = _p.removeCoupon, isAddingCoupon = _p.isAddingCoupon, isRemovingCoupon = _p.isRemovingCoupon, activeCouponsExist = _p.activeCouponsExist;
20664
20707
  // Handle default coupon application
20665
20708
  react.useEffect(function () {
20666
- if (couponCode && (quote === null || quote === void 0 ? void 0 : quote.id) && defaultCouponAppliedRef.current !== couponCode) {
20709
+ if (couponCode && quoteChangeId && defaultCouponAppliedRef.current !== couponCode) {
20667
20710
  addCoupon(couponCode);
20668
20711
  defaultCouponAppliedRef.current = couponCode;
20669
20712
  }
20670
- }, [couponCode, quote === null || quote === void 0 ? void 0 : quote.id]);
20713
+ }, [couponCode, quoteChangeId]);
20671
20714
  function handleSubmit(formData) {
20672
20715
  return __awaiter(this, void 0, void 0, function () {
20673
20716
  return __generator(this, function (_a) {
@@ -20729,7 +20772,13 @@ function Signup(_a) {
20729
20772
  }
20730
20773
  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: {
20731
20774
  boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
20732
- } }, { 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 }) }))) }))] })));
20775
+ } }, { 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: {
20776
+ firstName: defaultFirstName,
20777
+ lastName: defaultLastName,
20778
+ email: defaultEmail,
20779
+ accountName: defaultCompanyName,
20780
+ billingCountry: defaultBillingCountry,
20781
+ } }) }))) }))] })));
20733
20782
  }
20734
20783
 
20735
20784
  var useQuoteSubscriptionUpgrade = function () {
@@ -20790,8 +20839,22 @@ var useQuoteDelete = function () {
20790
20839
  });
20791
20840
  }); };
20792
20841
  };
20842
+ var useQuoteSubscriptionActivate = function () {
20843
+ var graphQLRequest = useGraphQLRequest();
20844
+ return function (subscriptionId, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
20845
+ var response;
20846
+ return __generator(this, function (_a) {
20847
+ switch (_a.label) {
20848
+ case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteSubscriptionActivate($subscriptionId: ID!) {\n quoteSubscriptionActivate(subscriptionId: $subscriptionId) {\n quote {\n id\n }\n }\n }", apiHost, token, { subscriptionId: subscriptionId })];
20849
+ case 1:
20850
+ response = _a.sent();
20851
+ return [2 /*return*/, response];
20852
+ }
20853
+ });
20854
+ }); };
20855
+ };
20793
20856
 
20794
- var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n daysLeftInTrial\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n }\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 }";
20857
+ var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n daysLeftInTrial\n trialExpirationAction\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n featureAddon\n id\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
20795
20858
  var getSubscriptions = function (_a) {
20796
20859
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
20797
20860
  return __awaiter(void 0, void 0, void 0, function () {
@@ -20877,7 +20940,7 @@ var accountUpdate = function (_a) {
20877
20940
  });
20878
20941
  };
20879
20942
 
20880
- var COUNTRIES_REQUIRING_STATE = ["US", "CA"];
20943
+ var COUNTRIES_REQUIRING_STATE = ['US', 'CA'];
20881
20944
  var TaxationForm = function (_a) {
20882
20945
  var account = _a.account, quote = _a.quote;
20883
20946
  // Hooks
@@ -20905,19 +20968,18 @@ var TaxationForm = function (_a) {
20905
20968
  }); },
20906
20969
  onSuccess: function () {
20907
20970
  queryClient.invalidateQueries({
20908
- queryKey: ["getTaxationRequiredAccountFields", token],
20971
+ queryKey: ['getTaxationRequiredAccountFields', token],
20909
20972
  });
20910
20973
  },
20911
20974
  }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
20912
- 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, { form: form }), 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) {
20975
+ 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) {
20913
20976
  var _a, _b;
20914
- return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
20915
- ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
20977
+ return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
20978
+ ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
20916
20979
  } }) })), 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" })) })] })));
20917
20980
  };
20918
- var FormBillingState = function (_a) {
20919
- _a.form;
20920
- var billingCountry = antd.Form.useWatch("billingCountry");
20981
+ var FormBillingState = function () {
20982
+ var billingCountry = antd.Form.useWatch('billingCountry');
20921
20983
  var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
20922
20984
  return (jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "State" }) })));
20923
20985
  };
@@ -20927,11 +20989,11 @@ var QuoteCheckout = function (_a) {
20927
20989
  var _b, _c;
20928
20990
  var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, onRecalculateTaxes = _a.onRecalculateTaxes;
20929
20991
  var apiHost = react.useContext(BunnyContext).apiHost;
20992
+ var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
20930
20993
  var token = useToken();
20931
20994
  var isMobile = common.useIsMobile();
20932
20995
  var _d = react.useState(false), isSaving = _d[0], setIsSaving = _d[1];
20933
20996
  var paymentRequired = getQuoteAmountDue(quote) > 0;
20934
- var entityId = useCurrentUserData().entityId;
20935
20997
  var queryClient = reactQuery.useQueryClient();
20936
20998
  var _e = react.useState(''), couponCode = _e[0], setCouponCode = _e[1];
20937
20999
  var _f = useUpdateCoupons({
@@ -20992,7 +21054,8 @@ var QuoteCheckout = function (_a) {
20992
21054
  }
20993
21055
  if (taxationRequiredAccountFields)
20994
21056
  return (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
20995
- 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, { entityId: entityId, onFail: onFail, onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: activeCouponsExist && (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 () {
21057
+ 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 &&
21058
+ 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 () {
20996
21059
  couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(function (couponCharge) {
20997
21060
  var _a;
20998
21061
  var couponCode = (_a = couponCharge === null || couponCharge === void 0 ? void 0 : couponCharge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode;
@@ -21113,6 +21176,20 @@ var Checkout = function (_a) {
21113
21176
  }, onPaymentSuccess: onSuccess }))] })), jsxRuntime.jsx(Footer, { className: "bunny-pl-12" })] })) })));
21114
21177
  };
21115
21178
 
21179
+ var QuotePreviewContext = react.createContext({});
21180
+ function QuotePreviewProvider(_a) {
21181
+ var children = _a.children;
21182
+ var _b = react.useState(), quotePreviewData = _b[0], setQuotePreviewData = _b[1];
21183
+ function handleSetEditingQuote(editingQuoteId) {
21184
+ setQuotePreviewData(__assign(__assign({}, quotePreviewData), { editingQuoteId: editingQuoteId }));
21185
+ }
21186
+ return (jsxRuntime.jsx(QuotePreviewContext.Provider, __assign({ value: {
21187
+ quotePreviewData: quotePreviewData,
21188
+ setQuotePreviewData: setQuotePreviewData,
21189
+ handleSetEditingQuote: handleSetEditingQuote,
21190
+ } }, { children: children })));
21191
+ }
21192
+
21116
21193
  var PageTitle = function (_a) {
21117
21194
  var onGoBack = _a.onGoBack, title = _a.title;
21118
21195
  var isMobile = common.useIsMobile();
@@ -21127,8 +21204,6 @@ var PageTitle = function (_a) {
21127
21204
  } })), title] })));
21128
21205
  };
21129
21206
 
21130
- var SubscriptionsContext = react.createContext({});
21131
-
21132
21207
  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";
21133
21208
  var quoteChargeUpdate = function (_a) {
21134
21209
  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;
@@ -21220,11 +21295,113 @@ var billingPeriodConverter = function (period) {
21220
21295
  return 12;
21221
21296
  };
21222
21297
 
21298
+ var canShowQuantitiesInput = function (charge, subscription) {
21299
+ // Check if the subscription is active, pending, or in trial,
21300
+ // the pricing model is not flat,
21301
+ // and if it's not a trial, also check if the current charge is the last one in the subscription.
21302
+ var _a, _b, _c;
21303
+ var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE;
21304
+ var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
21305
+ var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL;
21306
+ var isFlatPricing = charge.pricingModel === 'FLAT';
21307
+ var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
21308
+ !isFlatPricing &&
21309
+ charge.selfServiceQuantity &&
21310
+ !charge.expired;
21311
+ // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
21312
+ return shouldProcessCharge;
21313
+ };
21314
+ var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
21315
+ var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
21316
+ var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
21317
+ var charges = [
21318
+ {
21319
+ id: quoteChangeCharge.id,
21320
+ quantity: editedSubscription.quantity - subscriptionQuantity,
21321
+ },
21322
+ ];
21323
+ return { charges: charges, quoteChange: quoteChange };
21324
+ };
21325
+ var canShowChangeQuantities = function (_a) {
21326
+ var subscriptions = _a.subscriptions;
21327
+ return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
21328
+ return subscription.charges.some(function (charge) {
21329
+ return canShowQuantitiesInput(charge, subscription);
21330
+ });
21331
+ });
21332
+ };
21333
+ var canSubscriptionUpgradeFromTrial = function (subscription) {
21334
+ var _a;
21335
+ return (((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL &&
21336
+ subscription.plan.selfServiceBuy) ||
21337
+ false;
21338
+ };
21339
+ var isSubscriptionNotActive = function (subscription) {
21340
+ var _a, _b;
21341
+ return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
21342
+ ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.CANCELED;
21343
+ };
21344
+ var isSubscriptionActiveOrPending = function (subscription) {
21345
+ var _a, _b;
21346
+ return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE ||
21347
+ ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
21348
+ };
21349
+ var isSubscriptionTrial = function (subscription) { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL; };
21350
+ // Helper function to check if charge is a discount
21351
+ var isDiscount = function (kind) {
21352
+ return kind === common.QuoteChangeKind.DISCOUNT || kind === common.QuoteChangeKind.FREE_PERIOD_DISCOUNT;
21353
+ };
21354
+ var hasPriceTiers = function (charge) {
21355
+ var _a;
21356
+ return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
21357
+ };
21358
+ var hasMultiplePriceTiers = function (charge) {
21359
+ var _a;
21360
+ return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length) > 1;
21361
+ };
21362
+ var getApplicablePriceTier = function (charge, currencyId, priceDecimals) {
21363
+ var _a;
21364
+ if (!((_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length))
21365
+ return '';
21366
+ var selectedTier;
21367
+ // For TIERED pricing model: always show the first tier
21368
+ if (charge.pricingModel === common.PricingModel.TIERED) {
21369
+ selectedTier = charge.priceTiers[0];
21370
+ }
21371
+ // For VOLUME and BANDS pricing models: find the tier that contains the current quantity
21372
+ else if (charge.pricingModel === common.PricingModel.VOLUME ||
21373
+ charge.pricingModel === common.PricingModel.BANDS) {
21374
+ // Find the appropriate tier based on quantity
21375
+ selectedTier = charge.priceTiers.find(function (tier, index) {
21376
+ var nextTier = charge.priceTiers[index + 1];
21377
+ var tierStart = tier.starts;
21378
+ var tierEnd = nextTier ? nextTier.starts - 1 : Infinity;
21379
+ return charge.quantity >= tierStart && charge.quantity <= tierEnd;
21380
+ });
21381
+ // Fallback to first tier if no tier found (shouldn't happen with proper data)
21382
+ selectedTier = selectedTier || charge.priceTiers[0];
21383
+ }
21384
+ // Default fallback for any other pricing models
21385
+ else {
21386
+ selectedTier = charge.priceTiers[0];
21387
+ }
21388
+ if (!selectedTier)
21389
+ return '';
21390
+ // Calculate the tier range for display
21391
+ var tierIndex = charge.priceTiers.indexOf(selectedTier);
21392
+ var starts = selectedTier.starts;
21393
+ var nextTier = charge.priceTiers[tierIndex + 1];
21394
+ var ends = nextTier ? nextTier.starts - 1 : '∞';
21395
+ return hasMultiplePriceTiers(charge)
21396
+ ? "".concat(starts, "-").concat(ends, ": ").concat(common.formatCurrency(selectedTier.price, currencyId, priceDecimals))
21397
+ : "".concat(common.formatCurrency(selectedTier.price, currencyId, priceDecimals));
21398
+ };
21399
+
21223
21400
  var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
21224
21401
  // Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
21225
21402
  var createPlanDescription = function (priceList) {
21226
- return (priceList.plan.description || "").replace(removeHTMLTagsRegex, function (x, y) {
21227
- return y ? " & " : "";
21403
+ return (priceList.plan.description || '').replace(removeHTMLTagsRegex, function (_, y) {
21404
+ return y ? ' & ' : '';
21228
21405
  });
21229
21406
  };
21230
21407
  var getActivePlanPriceData = function (priceList, selectedPriceList) {
@@ -21265,22 +21442,19 @@ var getActivePlanPriceData = function (priceList, selectedPriceList) {
21265
21442
  };
21266
21443
  };
21267
21444
  var isPriceListDisabled = function (_a) {
21268
- var priceList = _a.priceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
21269
- var disableOnClick = false;
21270
- // Plan already has a subscription
21271
- var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
21272
- var _a, _b;
21273
- return subscription.plan.id === priceList.plan.id &&
21274
- ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== common.SubscriptionState.CANCELED &&
21275
- ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== common.SubscriptionState.EXPIRED;
21276
- });
21277
- var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21278
- // Is this plan the one that the user is upgrading from
21279
- var isUpgradingPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id;
21280
- if ((subscriptionPlan && !isUpgradingPlan) || isPriceListCurrentSubscription) {
21281
- disableOnClick = true;
21445
+ var priceList = _a.priceList, upgradingSubscription = _a.upgradingSubscription, canPurchaseFeatureAddons = _a.canPurchaseFeatureAddons;
21446
+ var existingSubscriptionInTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
21447
+ var isUpgradingSubscriptionPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21448
+ // When should priceList be disabled?
21449
+ // if upgradingSubscription?.priceList.id === priceList.id
21450
+ // AND the upgradingSubscription is not in trial
21451
+ // AND cannot purchase feature addons
21452
+ // AND cannot purchase add-on plans
21453
+ // AND selfServiceBuy is false
21454
+ if (isUpgradingSubscriptionPriceList) {
21455
+ return !existingSubscriptionInTrial && !canPurchaseFeatureAddons;
21282
21456
  }
21283
- return disableOnClick;
21457
+ return false;
21284
21458
  };
21285
21459
 
21286
21460
  var CheckoutButton = function (_a) {
@@ -21303,14 +21477,17 @@ var CheckoutPrice = function (_a) {
21303
21477
 
21304
21478
  var CheckoutBarSummarySection = function (_a) {
21305
21479
  var _b;
21306
- var open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription, quotePreviewData = _a.quotePreviewData;
21480
+ var open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription;
21307
21481
  // Context
21308
21482
  var apiHost = react.useContext(BunnyContext).apiHost;
21483
+ var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21484
+ var accountId = react.useContext(PaymentContext).accountId;
21309
21485
  // Hooks
21310
21486
  var token = useToken();
21311
21487
  var paymentPlugins = usePaymentPlugins({
21312
21488
  apiHost: apiHost,
21313
21489
  token: token,
21490
+ accountId: accountId,
21314
21491
  }).paymentPlugins;
21315
21492
  var queryClient = reactQuery.useQueryClient();
21316
21493
  var isMobile = common.useIsMobile();
@@ -21321,12 +21498,14 @@ var CheckoutBarSummarySection = function (_a) {
21321
21498
  token: token,
21322
21499
  }),
21323
21500
  });
21324
- var checkoutButtonDisabled = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
21501
+ var isUpgradingCurrentSubscription = selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
21502
+ var disableCheckoutButton = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
21325
21503
  !selectedPriceList ||
21326
21504
  // quantityLocal !== quotePreviewData.quantity ||
21327
21505
  isFetching ||
21328
- selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) ||
21506
+ isUpgradingCurrentSubscription ||
21329
21507
  open);
21508
+ var checkoutButtonDisabled = (quote === null || quote === void 0 ? void 0 : quote.amountDue) && (quote === null || quote === void 0 ? void 0 : quote.amountDue) > 0 ? false : disableCheckoutButton;
21330
21509
  var activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21331
21510
  var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === common.ChargeType.USAGE;
21332
21511
  var hasPaymentMethodsOrIsFree = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) || Boolean(quote && getQuoteAmountDue(quote) === 0);
@@ -21336,7 +21515,7 @@ var CheckoutBarSummarySection = function (_a) {
21336
21515
  var PlanPickerCheckoutBarWrapper = function (_a) {
21337
21516
  var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21338
21517
  // Context
21339
- var quotePreviewData = react.useContext(SubscriptionsContext).quotePreviewData;
21518
+ var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
21340
21519
  var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
21341
21520
  if (!selectedPriceList)
21342
21521
  return null;
@@ -21346,10 +21525,11 @@ var PlanPickerCheckoutBar = function (_a) {
21346
21525
  var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21347
21526
  // Context
21348
21527
  var token = useToken();
21349
- var _b = react.useContext(SubscriptionsContext), quotePreviewData = _b.quotePreviewData, upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
21528
+ var _b = react.useContext(SubscriptionsContext), upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
21529
+ var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, handleSetEditingQuote = _c.handleSetEditingQuote;
21350
21530
  var apiHost = react.useContext(BunnyContext).apiHost;
21351
21531
  // Local state
21352
- var _c = react.useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
21532
+ var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
21353
21533
  // Hooks
21354
21534
  var showSuccessNotification = common.useSuccessNotification();
21355
21535
  var queryClient = reactQuery.useQueryClient();
@@ -21358,19 +21538,34 @@ var PlanPickerCheckoutBar = function (_a) {
21358
21538
  token: token,
21359
21539
  apiHost: apiHost,
21360
21540
  }).defaultPaymentMethod;
21361
- var createSubscriptionQuote = useQuoteSubscriptionUpgrade();
21541
+ var createSubscriptionUpgradeQuote = useQuoteSubscriptionUpgrade();
21542
+ var createSubscriptionUpdateQuote = useCreateSubscriptionQuote();
21543
+ var quoteSubscriptionActivate = useQuoteSubscriptionActivate();
21362
21544
  // Mutations
21363
21545
  var createQuote = reactQuery.useMutation({
21364
21546
  mutationFn: function (_a) {
21365
21547
  var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
21366
- return createSubscriptionQuote(subscriptionId, priceListId, apiHost, token);
21548
+ return createSubscriptionUpgradeQuote(subscriptionId, priceListId, apiHost, token);
21367
21549
  },
21368
- onSuccess: function (subscriptionUpdateData) {
21550
+ onSuccess: function (response) {
21369
21551
  var _a;
21370
- var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
21552
+ var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
21371
21553
  setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21554
+ handleSetEditingQuote(quote.id);
21372
21555
  },
21373
- });
21556
+ }).mutate;
21557
+ var createEmptyQuote = reactQuery.useMutation({
21558
+ mutationFn: function (_a) {
21559
+ var subscriptionId = _a.subscriptionId;
21560
+ return createSubscriptionUpdateQuote([subscriptionId], apiHost, token);
21561
+ },
21562
+ onSuccess: function (response) {
21563
+ var _a;
21564
+ var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
21565
+ setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21566
+ handleSetEditingQuote(quote.id);
21567
+ },
21568
+ }).mutate;
21374
21569
  var updateCharge = reactQuery.useMutation({
21375
21570
  mutationFn: quoteChargeUpdate,
21376
21571
  onSuccess: function () {
@@ -21383,6 +21578,32 @@ var PlanPickerCheckoutBar = function (_a) {
21383
21578
  });
21384
21579
  },
21385
21580
  }).mutate;
21581
+ var subscriptionActivate = reactQuery.useMutation({
21582
+ mutationFn: function (_a) {
21583
+ var subscriptionId = _a.subscriptionId;
21584
+ return __awaiter(void 0, void 0, void 0, function () {
21585
+ return __generator(this, function (_b) {
21586
+ switch (_b.label) {
21587
+ case 0: return [4 /*yield*/, quoteSubscriptionActivate(subscriptionId, apiHost, token)];
21588
+ case 1: return [2 /*return*/, _b.sent()];
21589
+ }
21590
+ });
21591
+ });
21592
+ },
21593
+ onSuccess: function (response) {
21594
+ var _a;
21595
+ var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionActivate) === null || _a === void 0 ? void 0 : _a.quote;
21596
+ setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21597
+ handleSetEditingQuote(quote.id);
21598
+ queryClient.invalidateQueries({
21599
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
21600
+ objectName: 'editingQuote',
21601
+ id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21602
+ token: token,
21603
+ }),
21604
+ });
21605
+ },
21606
+ }).mutate;
21386
21607
  // Queries
21387
21608
  var quote = reactQuery.useQuery({
21388
21609
  queryKey: common.QueryKeyFactory.default.createObjectKey({
@@ -21412,14 +21633,30 @@ var PlanPickerCheckoutBar = function (_a) {
21412
21633
  enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
21413
21634
  }).data;
21414
21635
  react.useEffect(function () {
21636
+ var _a;
21415
21637
  if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
21416
21638
  console.error('upgradingSubscription is undefined');
21417
21639
  return;
21418
21640
  }
21419
- createQuote.mutate({
21420
- subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21421
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21422
- });
21641
+ var upgradingCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
21642
+ if (upgradingCurrentSubscription) {
21643
+ if (((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL) {
21644
+ subscriptionActivate({
21645
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21646
+ });
21647
+ }
21648
+ else {
21649
+ createEmptyQuote({
21650
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21651
+ });
21652
+ }
21653
+ }
21654
+ else {
21655
+ createQuote({
21656
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21657
+ priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21658
+ });
21659
+ }
21423
21660
  }, [selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id]);
21424
21661
  // Reset query key on unmount
21425
21662
  react.useEffect(function () {
@@ -21484,11 +21721,11 @@ var PlanPickerCheckoutBar = function (_a) {
21484
21721
  return (jsxRuntime.jsx(CheckoutBarInput, { disabled: !chargeQuantity, charge: charge, quantity: chargeQuantity !== null && chargeQuantity !== void 0 ? chargeQuantity : 0, selectedPriceList: selectedPriceList, onQuantityChanged: function (quantity) {
21485
21722
  onChangeQuantity(charge.id, quantity);
21486
21723
  } }, index));
21487
- }) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsxRuntime.jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
21724
+ }) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription }), jsxRuntime.jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
21488
21725
  };
21489
21726
 
21490
21727
  // WARNING: There is a preview button on APP that will need to be changed if this query is changed
21491
- var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n showPriceAsMonthly\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
21728
+ var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n showPriceAsMonthly\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n featureAddon\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n priceList {\n id\n }\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
21492
21729
  var getPriceListChangeOptions = function (_a) {
21493
21730
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
21494
21731
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21553,6 +21790,21 @@ var calculateNewQuantity = function (priceList, currentQuantity) {
21553
21790
  }
21554
21791
  };
21555
21792
 
21793
+ function isAddonPurchased(featureAddon, currentSubscription) {
21794
+ 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; });
21795
+ if (!purchasedFeatureAddons)
21796
+ return false;
21797
+ return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
21798
+ }
21799
+ function priceListHasUnpurchasedFeatureAddons(priceList, currentSubscription) {
21800
+ var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
21801
+ 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; });
21802
+ var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
21803
+ 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; }));
21804
+ });
21805
+ return unpurchasedFeatureAddons.length > 0;
21806
+ }
21807
+
21556
21808
  var BillingPeriodSelector = function (_a) {
21557
21809
  var availableBillingPeriods = _a.availableBillingPeriods, onChangeBillingPeriod = _a.onChangeBillingPeriod, products = _a.products, selectedBillingPeriod = _a.selectedBillingPeriod, selectedProduct = _a.selectedProduct, onChangeProduct = _a.onChangeProduct;
21558
21810
  var _b = react.useContext(BrandContext), secondaryColor = _b.secondaryColor, brandColor = _b.brandColor;
@@ -21580,24 +21832,90 @@ var StyledRadioGroup = styled__default["default"].div(templateObject_2 || (templ
21580
21832
  });
21581
21833
  var templateObject_1$4, templateObject_2;
21582
21834
 
21583
- var PriceListCardTitle = function (_a) {
21584
- var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
21585
- var isMobile = common.useIsMobile();
21586
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-4" }, { children: [Boolean(trialRemainingDays) && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-secondary", style: { height: "1rem" } }, { children: isPriceListCurrentSubscription
21587
- ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
21588
- : " " }))), 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 }))] })));
21589
- };
21590
-
21591
- var getPrice = function (priceList) {
21592
- if (priceList.showPriceAsMonthly) {
21593
- return priceList.monthlyBasePrice;
21594
- }
21595
- return priceList.basePrice;
21596
- };
21597
- var calculatePriceDecimals = function (priceList) {
21598
- if (priceList.plan.pricingStyle === common.PricingStyle.PRICED) {
21599
- var decimalPart = getPrice(priceList).toString().split('.')[1];
21600
- if (!decimalPart)
21835
+ var NextPriceListButton = function (_a) {
21836
+ var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21837
+ 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 () {
21838
+ setPriceListStart(function (prev) {
21839
+ var newValue = prev - 1;
21840
+ if (newValue < 0) {
21841
+ return prev;
21842
+ }
21843
+ return newValue;
21844
+ });
21845
+ }, style: { width: '22px', height: '22px' } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21846
+ return setPriceListStart(function (prev) {
21847
+ var newValue = prev + 1;
21848
+ if (newValue >= availablePriceLists.length) {
21849
+ return prev;
21850
+ }
21851
+ return newValue;
21852
+ });
21853
+ }, style: { width: '22px', height: '22px' } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
21854
+ };
21855
+
21856
+ var getAvailablePlansAndPriceLists = function (_a) {
21857
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, plansToDisplay = _a.plansToDisplay;
21858
+ var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + plansToDisplay);
21859
+ var availablePriceListsArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
21860
+ var _a;
21861
+ var foundPriceList = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.find(function (priceList) { return priceList.plan.id === displayPriceList.plan.id; });
21862
+ return foundPriceList;
21863
+ });
21864
+ return {
21865
+ availablePriceListsArray: availablePriceListsArray,
21866
+ displayPriceLists: displayPriceLists,
21867
+ };
21868
+ };
21869
+ var everythingInPlusString = function (_a) {
21870
+ var priceList = _a.priceList;
21871
+ return "Everything in ".concat(priceList.plan.name, ", plus");
21872
+ };
21873
+
21874
+ var PriceListCardButton = function (_a) {
21875
+ var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
21876
+ // Context
21877
+ var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21878
+ var showBuyAddonsButton = isPriceListCurrentSubscription &&
21879
+ subscriptionPlan &&
21880
+ priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21881
+ var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
21882
+ var canUpgradeFromTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
21883
+ var createButtonText = function () {
21884
+ if (isPriceListCurrentSubscription && canUpgradeFromTrial)
21885
+ return 'Upgrade from trial';
21886
+ if (isPriceListCurrentSubscription)
21887
+ return 'Current';
21888
+ if (isSelected)
21889
+ return 'Selected';
21890
+ if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
21891
+ return 'Subscribed';
21892
+ if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US)
21893
+ return priceList.plan.contactUsLabel;
21894
+ return 'Select';
21895
+ };
21896
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end bunny-gap-3" }, { children: [showBuyAddonsButton && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: disableOnClick, style: {
21897
+ maxWidth: '240px',
21898
+ }, type: isSelected ? 'primary' : 'default' }, { children: "Buy addons" })) }))), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: disableOnClick || showBuyAddonsButton, style: {
21899
+ maxWidth: '240px',
21900
+ }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) }))] })));
21901
+ };
21902
+
21903
+ var Text$c = antd.Typography.Text;
21904
+ var PriceListCardDescription = function (_a) {
21905
+ var description = _a.description;
21906
+ return (jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: jsxRuntime.jsx(interweave.Markup, { content: description }) })));
21907
+ };
21908
+
21909
+ var getPrice = function (priceList) {
21910
+ if (priceList.showPriceAsMonthly) {
21911
+ return priceList.monthlyBasePrice;
21912
+ }
21913
+ return priceList.basePrice;
21914
+ };
21915
+ var calculatePriceDecimals = function (priceList) {
21916
+ if (priceList.plan.pricingStyle === common.PricingStyle.PRICED) {
21917
+ var decimalPart = getPrice(priceList).toString().split('.')[1];
21918
+ if (!decimalPart)
21601
21919
  return 0;
21602
21920
  // If decimal part consists only of zeros, return 0
21603
21921
  if (parseInt(decimalPart) === 0) {
@@ -21617,12 +21935,6 @@ var PriceListCardPrice = function (_a) {
21617
21935
  : 'Free' })));
21618
21936
  };
21619
21937
 
21620
- var Text$c = antd.Typography.Text;
21621
- var PriceListCardDescription = function (_a) {
21622
- var description = _a.description;
21623
- return (jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: jsxRuntime.jsx(interweave.Markup, { content: description }) })));
21624
- };
21625
-
21626
21938
  var BillingPeriodConverter;
21627
21939
  (function (BillingPeriodConverter) {
21628
21940
  BillingPeriodConverter["ONCE"] = "once";
@@ -21645,52 +21957,24 @@ var PriceListCardPriceDescription = function (_a) {
21645
21957
  return null;
21646
21958
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
21647
21959
  fontSize: isMobile ? '13px' : '12px',
21648
- } }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsxRuntime.jsx(interweave.Markup, { content: priceList.plan.pricingDescription })) : ("per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
21649
- ? "".concat(feature.unitName.toLowerCase(), " / ")
21650
- : '').concat(priceList.showPriceAsMonthly
21651
- ? 'month'
21652
- : common.PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)])) })), priceList.periodMonths > 1 && (jsxRuntime.jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
21653
- };
21654
-
21655
- var CheckIcon = function (_a) {
21656
- var backgroundColor = _a.backgroundColor, size = _a.size;
21657
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsxRuntime.jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
21658
- };
21659
-
21660
- var PriceListCardButton = function (_a) {
21661
- var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
21662
- // Context
21663
- var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21664
- var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
21665
- var createButtonText = function () {
21666
- if (isPriceListCurrentSubscription)
21667
- return 'Current';
21668
- if (isSelected)
21669
- return 'Selected';
21670
- if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
21671
- return 'Subscribed';
21672
- if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US)
21673
- return priceList.plan.contactUsLabel;
21674
- return 'Select';
21675
- };
21676
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end" }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: disableOnClick, style: {
21677
- maxWidth: '240px',
21678
- }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
21960
+ } }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsxRuntime.jsx(interweave.Markup, { content: priceList.plan.pricingDescription })) : (PriceDescriptionString({
21961
+ unitName: feature === null || feature === void 0 ? void 0 : feature.unitName,
21962
+ showPriceAsMonthly: priceList.showPriceAsMonthly,
21963
+ periodMonths: priceList.periodMonths,
21964
+ doesPlanHaveFlatFeeCharges: doesPlanHaveFlatFeeCharges,
21965
+ })) })), priceList.periodMonths > 1 && (jsxRuntime.jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
21679
21966
  };
21967
+ function PriceDescriptionString(_a) {
21968
+ var unitName = _a.unitName, showPriceAsMonthly = _a.showPriceAsMonthly, periodMonths = _a.periodMonths, doesPlanHaveFlatFeeCharges = _a.doesPlanHaveFlatFeeCharges;
21969
+ return "per ".concat(unitName && !doesPlanHaveFlatFeeCharges ? "".concat(unitName.toLowerCase(), " / ") : '').concat(showPriceAsMonthly ? 'month' : common.PERIOD_LABELS[periodMonthsConverter(periodMonths)]);
21970
+ }
21680
21971
 
21681
- var PriceListCardMobile = function (_a) {
21682
- var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
21683
- var brandColor = react.useContext(BrandContext).brandColor;
21684
- 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 () {
21685
- if (!disableOnClick)
21686
- onClick(priceList);
21687
- }, style: {
21688
- minWidth: '220px',
21689
- borderColor: isSelected ? brandColor : common.SLATE_200,
21690
- } }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "bunny-absolute", style: {
21691
- top: '10px',
21692
- right: '10px',
21693
- } }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
21972
+ var PriceListCardTitle = function (_a) {
21973
+ var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
21974
+ var isMobile = common.useIsMobile();
21975
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-4" }, { children: [Boolean(trialRemainingDays) && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-secondary", style: { height: "1rem" } }, { children: isPriceListCurrentSubscription
21976
+ ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
21977
+ : " " }))), 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 }))] })));
21694
21978
  };
21695
21979
 
21696
21980
  var PLAN_GRID_PADDING = 4;
@@ -21717,6 +22001,26 @@ var PriceListCardDesktop = function (_a) {
21717
22001
  } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })) }));
21718
22002
  };
21719
22003
 
22004
+ var CheckIcon = function (_a) {
22005
+ var backgroundColor = _a.backgroundColor, size = _a.size;
22006
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsxRuntime.jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
22007
+ };
22008
+
22009
+ var PriceListCardMobile = function (_a) {
22010
+ var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
22011
+ var brandColor = react.useContext(BrandContext).brandColor;
22012
+ 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 () {
22013
+ if (!disableOnClick)
22014
+ onClick(priceList);
22015
+ }, style: {
22016
+ minWidth: '220px',
22017
+ borderColor: isSelected ? brandColor : common.SLATE_200,
22018
+ } }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "bunny-absolute", style: {
22019
+ top: '10px',
22020
+ right: '10px',
22021
+ } }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
22022
+ };
22023
+
21720
22024
  var PriceListCard = function (_a) {
21721
22025
  var _b;
21722
22026
  var isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
@@ -21729,10 +22033,11 @@ var PriceListCard = function (_a) {
21729
22033
  var activeCharge = (_b = getActivePlanPriceData(priceList, priceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21730
22034
  // Is the price list the current price list for the upgradingSubscription
21731
22035
  var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
22036
+ var canPurchaseFeatureAddons = priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21732
22037
  var disableOnClick = isPriceListDisabled({
21733
22038
  priceList: priceList,
21734
- subscriptions: subscriptions,
21735
22039
  upgradingSubscription: upgradingSubscription,
22040
+ canPurchaseFeatureAddons: canPurchaseFeatureAddons,
21736
22041
  });
21737
22042
  var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
21738
22043
  var _a, _b;
@@ -21747,67 +22052,196 @@ var PriceListCard = function (_a) {
21747
22052
  return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsxRuntime.jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
21748
22053
  };
21749
22054
 
21750
- var Text$a = antd.Typography.Text;
21751
- var PriceListCardFeature = function (_a) {
21752
- var index = _a.index, planFeature = _a.planFeature;
21753
- var brandColor = react.useContext(BrandContext).brandColor;
21754
- if (planFeature.feature.kind === "GROUP")
21755
- return jsxRuntime.jsx(Text$a, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
21756
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$a, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
22055
+ var QUOTE_CHARGE_CREATE$1 = "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n quoteChargeCreate(\n endDate: $endDate\n price: $price\n priceListChargeId: $priceListChargeId\n quantity: $quantity\n quoteChangeId: $quoteChangeId\n startDate: $startDate\n subscriptionChargeId: $subscriptionChargeId\n ) {\n quoteCharge {\n quoteChange {\n id\n quoteId\n }\n id\n }\n }\n}\n\n";
22056
+ var quoteChargeCreate = function (_a) {
22057
+ var
22058
+ // endDate,
22059
+ price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
22060
+ return __awaiter(void 0, void 0, void 0, function () {
22061
+ var response;
22062
+ return __generator(this, function (_b) {
22063
+ switch (_b.label) {
22064
+ case 0: return [4 /*yield*/, gqlRequest({
22065
+ query: QUOTE_CHARGE_CREATE$1,
22066
+ vars: {
22067
+ // endDate,
22068
+ price: price,
22069
+ priceListChargeId: priceListChargeId,
22070
+ quantity: quantity,
22071
+ quoteChangeId: quoteChangeId,
22072
+ startDate: startDate,
22073
+ subscriptionChargeId: subscriptionChargeId,
22074
+ },
22075
+ apiHost: apiHost,
22076
+ token: token,
22077
+ })];
22078
+ case 1:
22079
+ response = _b.sent();
22080
+ if (response.errors) {
22081
+ throw new Error(response.errors[0].message);
22082
+ }
22083
+ return [2 /*return*/, response.quoteChargeCreate.quoteCharge];
22084
+ }
22085
+ });
22086
+ });
21757
22087
  };
21758
22088
 
21759
- var getAvailablePlansAndPriceLists = function (_a) {
21760
- var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, plansToDisplay = _a.plansToDisplay;
21761
- var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + plansToDisplay);
21762
- var availablePlansArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
21763
- var _a;
21764
- var foundPriceList = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.find(function (priceList) { return priceList.plan.id === displayPriceList.plan.id; });
21765
- return foundPriceList.plan;
22089
+ var QUOTE_CHARGE_CREATE = "\nmutation QuoteChargeDelete ($quoteChargeId: ID!) {\n quoteChargeDelete(\n quoteChargeId: $quoteChargeId\n ) {\n errors\n quoteCharge {\n quoteChange {\n id\n quoteId\n }\n }\n }\n}\n\n";
22090
+ var quoteChargeDelete = function (_a) {
22091
+ var quoteChargeId = _a.quoteChargeId, token = _a.token, apiHost = _a.apiHost;
22092
+ return gqlRequest({
22093
+ query: QUOTE_CHARGE_CREATE,
22094
+ vars: {
22095
+ quoteChargeId: quoteChargeId,
22096
+ },
22097
+ apiHost: apiHost,
22098
+ token: token,
21766
22099
  });
22100
+ };
22101
+
22102
+ var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
22103
+ var apiHost = react.useContext(BunnyContext).apiHost;
22104
+ var token = useToken();
22105
+ var queryClient = reactQuery.useQueryClient();
22106
+ var addedQuoteChargeId = react.useRef();
22107
+ var editingQuote = reactQuery.useQuery({
22108
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
22109
+ objectName: 'editingQuote',
22110
+ id: quoteId,
22111
+ }),
22112
+ queryFn: function () { return (quoteId ? getQuote({ id: quoteId, token: token, apiHost: apiHost }) : undefined); },
22113
+ enabled: Boolean(quoteId),
22114
+ }).data;
22115
+ function handleAddFeatureAddon() {
22116
+ quoteChargeCreateMutation();
22117
+ }
22118
+ function handleRemoveFeatureAddon() {
22119
+ if (!addedQuoteChargeId.current)
22120
+ return;
22121
+ quoteChargeDeleteMutation({ quoteChargeId: addedQuoteChargeId.current });
22122
+ }
22123
+ var _a = reactQuery.useMutation({
22124
+ mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
22125
+ var quoteCharge;
22126
+ return __generator(this, function (_a) {
22127
+ switch (_a.label) {
22128
+ case 0:
22129
+ if (!token)
22130
+ throw new Error('Token is required');
22131
+ if (!editingQuote)
22132
+ throw new Error('Editing quote is required');
22133
+ return [4 /*yield*/, quoteChargeCreate({
22134
+ quoteChangeId: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.quoteChanges[editingQuote.quoteChanges.length - 1].id,
22135
+ priceListChargeId: featureAddon.id,
22136
+ startDate: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.startDate,
22137
+ apiHost: apiHost,
22138
+ token: token,
22139
+ })];
22140
+ case 1:
22141
+ quoteCharge = _a.sent();
22142
+ return [2 /*return*/, { quoteCharge: quoteCharge }];
22143
+ }
22144
+ });
22145
+ }); },
22146
+ onSuccess: function (_a) {
22147
+ var quoteCharge = _a.quoteCharge;
22148
+ addedQuoteChargeId.current = quoteCharge.id;
22149
+ queryClient.invalidateQueries({
22150
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
22151
+ objectName: 'editingQuote',
22152
+ }),
22153
+ });
22154
+ },
22155
+ }), quoteChargeCreateMutation = _a.mutate, isCreatingFeatureAddon = _a.isPending;
22156
+ var _b = reactQuery.useMutation({
22157
+ mutationFn: function (_a) {
22158
+ var quoteChargeId = _a.quoteChargeId;
22159
+ return quoteChargeDelete({ quoteChargeId: quoteChargeId, token: token, apiHost: apiHost });
22160
+ },
22161
+ onSuccess: function () {
22162
+ addedQuoteChargeId.current = undefined;
22163
+ queryClient.invalidateQueries({
22164
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
22165
+ objectName: 'editingQuote',
22166
+ }),
22167
+ });
22168
+ },
22169
+ }), quoteChargeDeleteMutation = _b.mutate, isDeletingFeatureAddon = _b.isPending;
22170
+ react.useEffect(function () {
22171
+ // If the quoteId changes, then its because we changed pricelists, so we need to reset the addedQuoteChargeId
22172
+ // so that isChecked becomes false
22173
+ addedQuoteChargeId.current = undefined;
22174
+ }, [quoteId]);
21767
22175
  return {
21768
- availablePlansArray: availablePlansArray,
21769
- displayPriceLists: displayPriceLists,
22176
+ handleAddFeatureAddon: handleAddFeatureAddon,
22177
+ handleRemoveFeatureAddon: handleRemoveFeatureAddon,
22178
+ isPending: isCreatingFeatureAddon || isDeletingFeatureAddon,
22179
+ isChecked: isDeletingFeatureAddon
22180
+ ? false
22181
+ : Boolean(addedQuoteChargeId.current || isCreatingFeatureAddon),
22182
+ editingQuoteLoaded: editingQuote !== undefined,
21770
22183
  };
21771
22184
  };
21772
- var everythingInPlusString = function (_a) {
21773
- var priceList = _a.priceList;
21774
- return "Everything in ".concat(priceList.plan.name, ", plus");
21775
- };
21776
22185
 
21777
- var PriceListGridMobile = function (_a) {
21778
- var _b, _c, _d, _e;
21779
- var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
21780
- var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21781
- var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
21782
- var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
21783
- 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; });
21784
- 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) {
21785
- return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
21786
- }) })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
21787
- ? everythingInPlusString({ priceList: prevPriceList })
21788
- : "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)); }) }))] }));
22186
+ var shouldColorRow = function (_a) {
22187
+ var isFeatureGroup = _a.isFeatureGroup, rowIndex = _a.rowIndex;
22188
+ return !isFeatureGroup && rowIndex % 2 === 1;
22189
+ };
22190
+ var FeatureGridCell = function (_a) {
22191
+ var children = _a.children, isFeatureGroup = _a.isFeatureGroup, noBorder = _a.noBorder, rowIndex = _a.rowIndex;
22192
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-px-".concat(PLAN_GRID_PADDING, " bunny-py-2"), style: __assign(__assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })), (shouldColorRow({
22193
+ isFeatureGroup: isFeatureGroup,
22194
+ rowIndex: rowIndex,
22195
+ })
22196
+ ? { backgroundColor: common.SLATE_100 }
22197
+ : {})) }, { children: children })));
21789
22198
  };
21790
22199
 
21791
- var NextPriceListButton = function (_a) {
21792
- var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21793
- 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 () {
21794
- setPriceListStart(function (prev) {
21795
- var newValue = prev - 1;
21796
- if (newValue < 0) {
21797
- return prev;
21798
- }
21799
- return newValue;
21800
- });
21801
- }, style: { width: '22px', height: '22px' } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21802
- return setPriceListStart(function (prev) {
21803
- var newValue = prev + 1;
21804
- if (newValue >= availablePriceLists.length) {
21805
- return prev;
21806
- }
21807
- return newValue;
21808
- });
21809
- }, style: { width: '22px', height: '22px' } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
22200
+ var PlanFeatureAddons = function (_a) {
22201
+ var displayPriceLists = _a.displayPriceLists, plansToDisplay = _a.plansToDisplay;
22202
+ var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: displayPriceLists });
22203
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, noBorder: true, rowIndex: 0 }), __spreadArray([], Array(plansToDisplay), true).map(function (_, planIndex) {
22204
+ var priceList = uniquePlanFeatures[planIndex];
22205
+ var prevPriceList = displayPriceLists[planIndex - 1];
22206
+ if (!priceList)
22207
+ return (jsxRuntime.jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
22208
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: jsxRuntime.jsx(FeatureAddonsList, { priceList: priceList }) }), planIndex));
22209
+ })] }));
21810
22210
  };
22211
+ function FeatureAddonsList(_a) {
22212
+ var _b;
22213
+ var priceList = _a.priceList;
22214
+ var featureAddons = (_b = priceList === null || priceList === void 0 ? void 0 : priceList.charges) === null || _b === void 0 ? void 0 : _b.filter(function (charge) { return charge.featureAddon === true; });
22215
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: featureAddons === null || featureAddons === void 0 ? void 0 : featureAddons.map(function (featureAddon, featureAddonIndex) {
22216
+ return (jsxRuntime.jsx(FeatureAddonRow, { featureAddon: featureAddon, priceList: priceList }, featureAddonIndex));
22217
+ }) }));
22218
+ }
22219
+ function FeatureAddonRow(_a) {
22220
+ var _b, _c;
22221
+ var featureAddon = _a.featureAddon, priceList = _a.priceList;
22222
+ var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
22223
+ var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
22224
+ var _d = useQuoteUpdateFeatureAddon(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.editingQuoteId, featureAddon), handleAddFeatureAddon = _d.handleAddFeatureAddon, handleRemoveFeatureAddon = _d.handleRemoveFeatureAddon, isPending = _d.isPending, isChecked = _d.isChecked, editingQuoteLoaded = _d.editingQuoteLoaded;
22225
+ var brandColor = react.useContext(BrandContext).brandColor;
22226
+ var isPriceListSelected = ((_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id) === priceList.id;
22227
+ var isPurchased = isAddonPurchased(featureAddon, upgradingSubscription);
22228
+ var isDisabled = !isPriceListSelected || isPurchased;
22229
+ var checked = isChecked || isPurchased;
22230
+ 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({
22231
+ unitName: (_c = featureAddon.feature) === null || _c === void 0 ? void 0 : _c.unitName,
22232
+ showPriceAsMonthly: priceList.showPriceAsMonthly,
22233
+ periodMonths: priceList.periodMonths,
22234
+ doesPlanHaveFlatFeeCharges: false,
22235
+ }) }))] }));
22236
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-flex-wrap bunny-items-center bunny-justify-between bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center bunny-gap-1" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [checked ? (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" })) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: common.SLATE_200, size: "15px" })), featureAddon.name] })), jsxRuntime.jsx(antd.Tooltip, __assign({ title: tooltipContent }, { children: jsxRuntime.jsx(icons.InfoCircleOutlined, { className: "bunny-text-gray-500", size: 15 }) }))] })), jsxRuntime.jsx(antd.Switch, { size: "small", loading: isPending, disabled: isDisabled || !editingQuoteLoaded, checked: checked, onChange: function (checked) {
22237
+ if (checked) {
22238
+ handleAddFeatureAddon();
22239
+ }
22240
+ else {
22241
+ handleRemoveFeatureAddon();
22242
+ }
22243
+ } })] })));
22244
+ }
21811
22245
 
21812
22246
  var filterUniqueFeatures = function (_a) {
21813
22247
  // Remove any features that in previous plans if everythingInPlus is true
@@ -21829,41 +22263,27 @@ var filterUniqueFeatures = function (_a) {
21829
22263
  return updatedPriceLists;
21830
22264
  };
21831
22265
  var EverythingPlanFeatures = function (_a) {
21832
- var availablePriceLists = _a.availablePriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
22266
+ var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
21833
22267
  var brandColor = react.useContext(BrandContext).brandColor;
21834
- var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: availablePriceLists });
22268
+ var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: displayPriceLists });
21835
22269
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: __spreadArray([], Array(plansToDisplay), true).map(function (_, planIndex) {
21836
22270
  var priceList = uniquePlanFeatures[planIndex];
21837
- var prevPriceList = availablePriceLists[planIndex - 1];
22271
+ var prevPriceList = displayPriceLists[planIndex - 1];
21838
22272
  if (!priceList)
21839
22273
  return (jsxRuntime.jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
21840
22274
  if (!priceList.plan.planFeatures)
21841
- return jsxRuntime.jsx("div", {}, planIndex);
21842
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
21843
- var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21844
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [prevPriceList && everythingInPlus && planIndex > 0 && planFeatureIndex === 0 && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium", style: { fontSize: '13px' } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
21845
- }) }), planIndex));
22275
+ return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(FeatureAddonsList, { priceList: priceList }), ";"] }, planIndex));
22276
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: [priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
22277
+ var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22278
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [prevPriceList && everythingInPlus && planIndex > 0 && planFeatureIndex === 0 && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium", style: { fontSize: '13px' } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
22279
+ }), jsxRuntime.jsx(FeatureAddonsList, { priceList: priceList })] }), planIndex));
21846
22280
  }) }));
21847
22281
  };
21848
22282
 
21849
- var shouldColorRow = function (_a) {
21850
- var isFeatureGroup = _a.isFeatureGroup, rowIndex = _a.rowIndex;
21851
- return !isFeatureGroup && rowIndex % 2 === 1;
21852
- };
21853
- var FeatureGridCell = function (_a) {
21854
- var children = _a.children, isFeatureGroup = _a.isFeatureGroup, noBorder = _a.noBorder, rowIndex = _a.rowIndex;
21855
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-px-".concat(PLAN_GRID_PADDING, " bunny-py-2"), style: __assign(__assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })), (shouldColorRow({
21856
- isFeatureGroup: isFeatureGroup,
21857
- rowIndex: rowIndex,
21858
- })
21859
- ? { backgroundColor: common.SLATE_100 }
21860
- : {})) }, { children: children })));
21861
- };
21862
-
21863
- var Text$9 = antd.Typography.Text;
22283
+ var Text$a = antd.Typography.Text;
21864
22284
  var PlanFeatures = function (_a) {
21865
22285
  var _b;
21866
- var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
22286
+ var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
21867
22287
  var featureGroupCounter = react.useRef(0);
21868
22288
  var visibleFeatureCounter = react.useRef(1);
21869
22289
  var brandColor = react.useContext(BrandContext).brandColor;
@@ -21890,8 +22310,9 @@ var PlanFeatures = function (_a) {
21890
22310
  visibleFeatureCounter.current = visibleFeatureCounter.current + 1;
21891
22311
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [jsxRuntime.jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsxRuntime.jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(plansToDisplay), true).map(function (_, columnIndex) {
21892
22312
  var _a;
21893
- var plan = availablePlansArray[columnIndex];
21894
- var doesHavePrevPlan = availablePlansArray[columnIndex - 1];
22313
+ var priceList = displayPriceLists[columnIndex];
22314
+ var plan = priceList.plan;
22315
+ var doesHavePrevPlan = displayPriceLists[columnIndex - 1];
21895
22316
  columnIndex = columnIndex + 1;
21896
22317
  // Check if the plan has the feature
21897
22318
  var planFeature = (_a = plan === null || plan === void 0 ? void 0 : plan.planFeatures) === null || _a === void 0 ? void 0 : _a.find(function (f) { return f.featureId === (feature === null || feature === void 0 ? void 0 : feature.id); });
@@ -21899,28 +22320,31 @@ var PlanFeatures = function (_a) {
21899
22320
  return (jsxRuntime.jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
21900
22321
  if (isFeatureGroup)
21901
22322
  return jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex);
21902
- return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$9, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
22323
+ return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$a, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
21903
22324
  })] }), rowIndex));
21904
22325
  }) }));
21905
22326
  };
21906
22327
  var FeatureTitle = function (_a) {
21907
22328
  var _b;
21908
22329
  var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
21909
- return (jsxRuntime.jsx(Text$9, __assign({ className: " ".concat(isFeatureGroup ? 'bunny-text-slate-500 bunny-font-medium bunny-pt-4' : ''), style: __assign({}, (isFeatureGroup ? { fontSize: '11px' } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
22330
+ 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 })));
21910
22331
  };
21911
22332
 
21912
22333
  var PriceListGridDesktop = function (_a) {
21913
22334
  var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
21914
- var _b = react.useMemo(function () {
22335
+ var displayPriceLists = react.useMemo(function () {
21915
22336
  return getAvailablePlansAndPriceLists({
21916
22337
  availablePriceLists: availablePriceLists,
21917
22338
  priceListChangeOptions: priceListChangeOptions,
21918
22339
  priceListStart: priceListStart,
21919
22340
  plansToDisplay: (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3,
21920
22341
  });
21921
- }, [availablePriceLists, priceListChangeOptions, priceListStart]), availablePlansArray = _b.availablePlansArray, displayPriceLists = _b.displayPriceLists;
22342
+ }, [availablePriceLists, priceListChangeOptions, priceListStart]).displayPriceLists;
21922
22343
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21923
22344
  var plansToDisplay = Math.min((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3, availablePriceLists.length);
22345
+ var hasFeatureAddons = displayPriceLists.some(function (priceList) {
22346
+ return priceList.charges.some(function (charge) { return charge.featureAddon; });
22347
+ });
21924
22348
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-rounded-md bunny-shadow bunny-overflow-hidden bunny-bg-white" }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
21925
22349
  gridTemplateColumns: everythingInPlus
21926
22350
  ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
@@ -21929,9 +22353,32 @@ var PriceListGridDesktop = function (_a) {
21929
22353
  var priceList = displayPriceLists[index];
21930
22354
  var doesPrevPriceListExist = displayPriceLists[index - 1];
21931
22355
  if (!priceList)
21932
- return (jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index));
22356
+ return jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
21933
22357
  return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
21934
- }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { availablePriceLists: availablePriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsxRuntime.jsx(PlanFeatures, { availablePlansArray: availablePlansArray, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }))] }))] })));
22358
+ }), (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 }))] }))] }))] })));
22359
+ };
22360
+
22361
+ var Text$9 = antd.Typography.Text;
22362
+ var PriceListCardFeature = function (_a) {
22363
+ var index = _a.index, planFeature = _a.planFeature;
22364
+ var brandColor = react.useContext(BrandContext).brandColor;
22365
+ if (planFeature.feature.kind === "GROUP")
22366
+ return jsxRuntime.jsx(Text$9, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
22367
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$9, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
22368
+ };
22369
+
22370
+ var PriceListGridMobile = function (_a) {
22371
+ var _b, _c, _d, _e;
22372
+ var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
22373
+ var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22374
+ var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
22375
+ var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
22376
+ 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; });
22377
+ 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) {
22378
+ return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22379
+ }) })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
22380
+ ? everythingInPlusString({ priceList: prevPriceList })
22381
+ : "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)); }) }))] }));
21935
22382
  };
21936
22383
 
21937
22384
  var PriceListGrid = function (_a) {
@@ -21941,7 +22388,7 @@ var PriceListGrid = function (_a) {
21941
22388
  var isMobile = common.useIsMobile();
21942
22389
  // Derived state
21943
22390
  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); });
21944
- var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), "days");
22391
+ var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), 'days');
21945
22392
  return isMobile ? (jsxRuntime.jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsxRuntime.jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }));
21946
22393
  };
21947
22394
 
@@ -21949,9 +22396,11 @@ var createAvailableBillingPeriods = function (priceLists, selectedProduct) {
21949
22396
  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); });
21950
22397
  };
21951
22398
  var PriceListSelector = function (_a) {
21952
- var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
22399
+ var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions;
21953
22400
  // Context
21954
- var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
22401
+ var isInPreviewMode = react.useContext(SubscriptionsContext).isInPreviewMode;
22402
+ var _b = react.useContext(QuotePreviewContext), quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
22403
+ var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
21955
22404
  // Local state
21956
22405
  var _c = react.useState(), selectedProduct = _c[0], setSelectedProduct = _c[1];
21957
22406
  var _d = react.useState(), selectedBillingPeriod = _d[0], setSelectedBillingPeriod = _d[1];
@@ -21979,8 +22428,8 @@ var PriceListSelector = function (_a) {
21979
22428
  priceList.plan.id === ((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.plan.id) &&
21980
22429
  !isPriceListDisabled({
21981
22430
  priceList: priceList,
21982
- subscriptions: subscriptions,
21983
22431
  upgradingSubscription: upgradingSubscription,
22432
+ canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, upgradingSubscription),
21984
22433
  });
21985
22434
  });
21986
22435
  var isPriceListCurrentSubscription = newSelectedPriceList && (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
@@ -21996,13 +22445,7 @@ var PriceListSelector = function (_a) {
21996
22445
  });
21997
22446
  }
21998
22447
  }
21999
- }, [
22000
- quotePreviewData,
22001
- priceListChangeOptions,
22002
- subscriptions,
22003
- upgradingSubscription,
22004
- setQuotePreviewData,
22005
- ]);
22448
+ }, [quotePreviewData, priceListChangeOptions, upgradingSubscription, setQuotePreviewData]);
22006
22449
  var onChangeProduct = react.useCallback(function (product) {
22007
22450
  var newAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, product);
22008
22451
  if (!(newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods.includes(billingPeriodConverter(selectedBillingPeriod)))) {
@@ -22047,8 +22490,8 @@ var PriceListSelector = function (_a) {
22047
22490
  !isInPreviewMode &&
22048
22491
  !isPriceListDisabled({
22049
22492
  priceList: initialPriceList,
22050
- subscriptions: subscriptions,
22051
22493
  upgradingSubscription: upgradingSubscription,
22494
+ canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(initialPriceList, upgradingSubscription),
22052
22495
  })) {
22053
22496
  setQuotePreviewData({
22054
22497
  priceList: initialPriceList,
@@ -22064,7 +22507,6 @@ var PriceListSelector = function (_a) {
22064
22507
  selectedPriceList,
22065
22508
  selectedProduct,
22066
22509
  setQuotePreviewData,
22067
- subscriptions,
22068
22510
  upgradingSubscription,
22069
22511
  ]);
22070
22512
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsxRuntime.jsx(PriceListGrid, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription })] }));
@@ -22075,18 +22517,19 @@ var PlanPicker = function () {
22075
22517
  // Context
22076
22518
  var token = useToken();
22077
22519
  var apiHost = react.useContext(BunnyContext).apiHost;
22078
- var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData, upgradingSubscription = _b.upgradingSubscription;
22520
+ var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, upgradingSubscription = _b.upgradingSubscription;
22521
+ var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22079
22522
  // Hooks
22080
22523
  var showInfoNotification = common.useInfoNotification();
22081
22524
  // Queries
22082
- var _c = reactQuery.useQuery({
22525
+ var _d = reactQuery.useQuery({
22083
22526
  queryKey: common.QueryKeyFactory.default.createTableKey({
22084
22527
  pluralType: 'subscriptions',
22085
22528
  token: token,
22086
22529
  }),
22087
22530
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
22088
- }), subscriptions = _c.data, areSubscriptionsLoading = _c.isLoading;
22089
- var _d = reactQuery.useQuery({
22531
+ }), subscriptions = _d.data, areSubscriptionsLoading = _d.isLoading;
22532
+ var _e = reactQuery.useQuery({
22090
22533
  queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({
22091
22534
  subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
22092
22535
  token: token,
@@ -22101,7 +22544,7 @@ var PlanPicker = function () {
22101
22544
  });
22102
22545
  },
22103
22546
  enabled: !areSubscriptionsLoading,
22104
- }), priceListChangeOptions = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
22547
+ }), priceListChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
22105
22548
  // Handlers
22106
22549
  var onChangePriceList = react.useCallback(function (selectedPriceList) {
22107
22550
  if (isInPreviewMode)
@@ -22135,11 +22578,12 @@ var PlanManager = function (_a) {
22135
22578
  // Context
22136
22579
  var token = useToken();
22137
22580
  var apiHost = react.useContext(BunnyContext).apiHost;
22138
- var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, upgradingSubscription = _b.upgradingSubscription, setUpgradingSubscription = _b.setUpgradingSubscription, subscriptionUpgradeId = _b.subscriptionUpgradeId, setQuotePreviewData = _b.setQuotePreviewData, quotePreviewData = _b.quotePreviewData, className = _b.className;
22581
+ var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, upgradingSubscription = _b.upgradingSubscription, setUpgradingSubscription = _b.setUpgradingSubscription, subscriptionUpgradeId = _b.subscriptionUpgradeId, className = _b.className;
22582
+ var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22139
22583
  // Local state
22140
- var _c = react.useState(), editingQuoteData = _c[0], setEditingQuoteData = _c[1];
22141
- var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
22142
- var _e = react.useState(false), isSticky = _e[0], setIsSticky = _e[1];
22584
+ var _d = react.useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
22585
+ var _e = react.useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
22586
+ var _f = react.useState(false), isSticky = _f[0], setIsSticky = _f[1];
22143
22587
  var stickyRef = react.useRef(null);
22144
22588
  // Hooks
22145
22589
  var queryClient = reactQuery.useQueryClient();
@@ -22150,14 +22594,14 @@ var PlanManager = function (_a) {
22150
22594
  apiHost: apiHost,
22151
22595
  }).defaultPaymentMethod;
22152
22596
  // Queries
22153
- var _f = reactQuery.useQuery({
22597
+ var _g = reactQuery.useQuery({
22154
22598
  queryKey: common.QueryKeyFactory.default.createTableKey({
22155
22599
  pluralType: 'subscriptions',
22156
22600
  token: token,
22157
22601
  }),
22158
22602
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
22159
22603
  enabled: false,
22160
- }), subscriptions = _f.data, subscriptionsAreLoading = _f.isLoading;
22604
+ }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
22161
22605
  var quote = reactQuery.useQuery({
22162
22606
  queryKey: common.QueryKeyFactory.default.createObjectKey({
22163
22607
  id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
@@ -22259,7 +22703,7 @@ var SubscriptionState$1 = SubscriptionState;
22259
22703
 
22260
22704
  var FEATURE_USAGE_MUTATION = "\nquery GetFeatureUsage($id: ID!) {\n featureUsageHistogram(subscriptionChargeId: $id) {\n subscriptionCharge { \n id\n name\n amount\n currentPeriodPriceByTiers { \n tier { starts price } \n quantity\n amount\n }\n }\n feature { id name }\n periodRange\n dataInterval\n data {\n periodStart\n periodEnd\n intervals {\n intervalStart\n intervalUsage\n }\n intervalsTotal\n }\n }\n}\n";
22261
22705
  var getFeatureUsage = function (_a) {
22262
- var subscriptionChargeId = _a.subscriptionChargeId; _a.startDate; _a.endDate; _a.dataInterval; var token = _a.token, apiHost = _a.apiHost;
22706
+ var subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
22263
22707
  return __awaiter(void 0, void 0, void 0, function () {
22264
22708
  var vars, response;
22265
22709
  var _b;
@@ -22379,122 +22823,45 @@ var FeatureBarChart = function (_a) {
22379
22823
  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"])));
22380
22824
  var templateObject_1$2;
22381
22825
 
22382
- var canShowQuantitiesInput = function (charge, subscription) {
22383
- // Check if the subscription is active, pending, or in trial,
22384
- // the pricing model is not flat,
22385
- // and if it's not a trial, also check if the current charge is the last one in the subscription.
22386
- var _a, _b, _c;
22387
- var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE;
22388
- var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
22389
- var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL;
22390
- var isFlatPricing = charge.pricingModel === 'FLAT';
22391
- var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
22392
- !isFlatPricing &&
22393
- charge.selfServiceQuantity &&
22394
- !charge.expired;
22395
- // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
22396
- return shouldProcessCharge;
22397
- };
22398
- var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
22399
- var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
22400
- var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
22401
- var charges = [
22402
- {
22403
- id: quoteChangeCharge.id,
22404
- quantity: editedSubscription.quantity - subscriptionQuantity,
22405
- },
22406
- ];
22407
- return { charges: charges, quoteChange: quoteChange };
22408
- };
22409
- var canShowChangeQuantities = function (_a) {
22410
- var subscriptions = _a.subscriptions;
22411
- return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
22412
- return subscription.charges.some(function (charge, chargeIndex) {
22413
- return canShowQuantitiesInput(charge, subscription);
22414
- });
22415
- });
22416
- };
22417
- var isSubscriptionNotActive = function (subscription) {
22418
- var _a, _b;
22419
- return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
22420
- ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.CANCELED;
22421
- };
22422
- var isSubscriptionActiveOrPending = function (subscription) {
22423
- var _a, _b;
22424
- return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE ||
22425
- ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
22426
- };
22427
- var isSubscriptionTrial = function (subscription) { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL; };
22428
- // Helper function to check if charge is a discount
22429
- var isDiscount = function (kind) {
22430
- return kind === common.QuoteChangeKind.DISCOUNT || kind === common.QuoteChangeKind.FREE_PERIOD_DISCOUNT;
22431
- };
22432
- var hasPriceTiers = function (charge) {
22433
- var _a;
22434
- return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
22435
- };
22436
- var hasMultiplePriceTiers = function (charge) {
22437
- var _a;
22438
- return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length) > 1;
22439
- };
22440
- var getApplicablePriceTier = function (charge, currencyId) {
22441
- var _a;
22442
- if (!((_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length))
22443
- return '';
22444
- var selectedTier;
22445
- // For TIERED pricing model: always show the first tier
22446
- if (charge.pricingModel === common.PricingModel.TIERED) {
22447
- selectedTier = charge.priceTiers[0];
22448
- }
22449
- // For VOLUME and BANDS pricing models: find the tier that contains the current quantity
22450
- else if (charge.pricingModel === common.PricingModel.VOLUME ||
22451
- charge.pricingModel === common.PricingModel.BANDS) {
22452
- // Find the appropriate tier based on quantity
22453
- selectedTier = charge.priceTiers.find(function (tier, index) {
22454
- var nextTier = charge.priceTiers[index + 1];
22455
- var tierStart = tier.starts;
22456
- var tierEnd = nextTier ? nextTier.starts - 1 : Infinity;
22457
- return charge.quantity >= tierStart && charge.quantity <= tierEnd;
22458
- });
22459
- // Fallback to first tier if no tier found (shouldn't happen with proper data)
22460
- selectedTier = selectedTier || charge.priceTiers[0];
22461
- }
22462
- // Default fallback for any other pricing models
22463
- else {
22464
- selectedTier = charge.priceTiers[0];
22465
- }
22466
- if (!selectedTier)
22467
- return '';
22468
- // Calculate the tier range for display
22469
- var tierIndex = charge.priceTiers.indexOf(selectedTier);
22470
- var starts = selectedTier.starts;
22471
- var nextTier = charge.priceTiers[tierIndex + 1];
22472
- var ends = nextTier ? nextTier.starts - 1 : '∞';
22473
- return hasMultiplePriceTiers(charge)
22474
- ? "".concat(starts, "-").concat(ends, ": ").concat(common.formatCurrency(selectedTier.price, currencyId))
22475
- : "".concat(common.formatCurrency(selectedTier.price, currencyId));
22476
- };
22477
-
22478
22826
  var SubscriptionCardActions = function (_a) {
22479
22827
  var _b;
22480
22828
  var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
22829
+ var apiHost = react.useContext(BunnyContext).apiHost;
22830
+ var token = useToken();
22831
+ var isPaymentMethodLoading = usePaymentMethod({
22832
+ accountId: subscription.accountId,
22833
+ token: token,
22834
+ apiHost: apiHost,
22835
+ }).isLoading;
22481
22836
  // Derived state
22482
22837
  var isSelfServiceCancelable = subscription.plan.selfServiceCancel;
22483
22838
  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; });
22484
22839
  var arePlansAvailable = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
22485
22840
  var isInTrial = isSubscriptionTrial(subscription);
22486
22841
  var isActiveOrPending = isSubscriptionActiveOrPending(subscription);
22487
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isSelfServiceCancelable && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), arePlansAvailable && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: isInTrial ? 'Upgrade' : 'Change plan' })))] }));
22842
+ if (isPaymentMethodLoading)
22843
+ return null;
22844
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isSelfServiceCancelable && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), arePlansAvailable && (isActiveOrPending || isInTrial) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: 'primary' }, { children: isInTrial ? 'Upgrade from trial' : 'Change plan' }))), !arePlansAvailable && isInTrial && jsxRuntime.jsx(antd.Tag, __assign({ color: "warning" }, { children: "Cannot upgrade" }))] }));
22488
22845
  };
22489
22846
 
22490
22847
  var Text$7 = antd.Typography.Text;
22491
22848
  var getSubscriptionStatusText = function (subscription) {
22492
- var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
22849
+ var _a;
22850
+ var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate, trialExpirationAction = subscription.trialExpirationAction;
22851
+ var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
22493
22852
  if (cancellationDate &&
22494
22853
  (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.CANCELED &&
22495
22854
  (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.EXPIRED) {
22496
22855
  return (jsxRuntime.jsxs(CustomizedTag, __assign({ color: "red" }, { children: ["Canceled - ends on ", common.formatDate(cancellationDate)] })));
22497
22856
  }
22857
+ if (isTrial) {
22858
+ switch (trialExpirationAction) {
22859
+ case 'ACTIVATE':
22860
+ return "Activates on ".concat(common.formatDate(endDate));
22861
+ case 'CANCEL':
22862
+ return "Trial ends on ".concat(common.formatDate(endDate));
22863
+ }
22864
+ }
22498
22865
  if (evergreen) {
22499
22866
  return "Renews on ".concat(common.formatDate(endDate));
22500
22867
  }
@@ -22590,7 +22957,7 @@ var SubscriptionChargeUnitPrice = function (_a) {
22590
22957
  ? '-'
22591
22958
  : common.formatCurrency(charge.discountedPrice, currencyId, charge.priceDecimals);
22592
22959
  var isChargeDiscount = isDiscount(charge.kind);
22593
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasPriceTiers(charge) ? (jsxRuntime.jsx(TieredDisplayDropdown, { charge: charge, currencyId: currencyId, truncatedText: "".concat(charge.kind === common.QuoteChangeKind.PRICE_UPDATE ? 'new ' : '').concat(getApplicablePriceTier(charge, currencyId)) })) : isChargeDiscount ? ("-".concat(price)) : (price) }));
22960
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasPriceTiers(charge) ? (jsxRuntime.jsx(TieredDisplayDropdown, { charge: charge, currencyId: currencyId, truncatedText: "".concat(charge.kind === common.QuoteChangeKind.PRICE_UPDATE ? 'new ' : '').concat(getApplicablePriceTier(charge, currencyId, charge.priceDecimals)) })) : isChargeDiscount ? ("-".concat(price)) : (price) }));
22594
22961
  };
22595
22962
 
22596
22963
  var Text$6 = antd.Typography.Text;
@@ -22662,11 +23029,9 @@ var SubscriptionCardDesktopRow = function (_a) {
22662
23029
  var chargePeriod = "".concat(common.formatDate(charge.startDate), " - ").concat(common.formatDate(charge.endDate));
22663
23030
  // Queries
22664
23031
  var data = reactQuery.useQuery({
22665
- queryKey: ['getFeatureUsage', charge.id, charge.startDate, charge.endDate],
23032
+ queryKey: ['getFeatureUsage', charge.id],
22666
23033
  queryFn: function () {
22667
23034
  return getFeatureUsage({
22668
- endDate: charge.endDate,
22669
- startDate: charge.startDate,
22670
23035
  subscriptionChargeId: charge.id,
22671
23036
  token: token,
22672
23037
  apiHost: apiHost,
@@ -22777,27 +23142,6 @@ var DrawerHeader = function (_a) {
22777
23142
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$3, __assign({ className: "bunny-text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs" }, { children: description }))] })));
22778
23143
  };
22779
23144
 
22780
- var QUOTE_CHARGE_CREATE = "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n quoteChargeCreate(\n endDate: $endDate\n price: $price\n priceListChargeId: $priceListChargeId\n quantity: $quantity\n quoteChangeId: $quoteChangeId\n startDate: $startDate\n subscriptionChargeId: $subscriptionChargeId\n ) {\n quoteCharge {\n quoteChange {\n id\n quoteId\n }\n }\n }\n}\n\n";
22781
- var quoteChargeCreate = function (_a) {
22782
- var
22783
- // endDate,
22784
- price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
22785
- return gqlRequest({
22786
- query: QUOTE_CHARGE_CREATE,
22787
- vars: {
22788
- // endDate,
22789
- price: price,
22790
- priceListChargeId: priceListChargeId,
22791
- quantity: quantity,
22792
- quoteChangeId: quoteChangeId,
22793
- startDate: startDate,
22794
- subscriptionChargeId: subscriptionChargeId,
22795
- },
22796
- apiHost: apiHost,
22797
- token: token,
22798
- });
22799
- };
22800
-
22801
23145
  var formatDateForApi = function (date) {
22802
23146
  if (typeof date === 'string')
22803
23147
  date = dayjs(date);
@@ -22828,17 +23172,17 @@ var QuantityInput = function (_a) {
22828
23172
  var createCharge = reactQuery.useMutation({
22829
23173
  mutationFn: quoteChargeCreate,
22830
23174
  onSuccess: function (response) {
22831
- var _a, _b, _c, _d, _e, _f, _g, _h;
23175
+ var _a, _b, _c, _d;
22832
23176
  if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
22833
23177
  var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
22834
23178
  setEditingQuoteData({
22835
- id: (_e = (_d = (_c = response.quoteChargeCreate) === null || _c === void 0 ? void 0 : _c.quoteCharge) === null || _d === void 0 ? void 0 : _d.quoteChange) === null || _e === void 0 ? void 0 : _e.quoteId,
23179
+ id: (_c = response.quoteChange) === null || _c === void 0 ? void 0 : _c.quoteId,
22836
23180
  isTrial: isTrial,
22837
23181
  });
22838
23182
  }
22839
23183
  queryClient.invalidateQueries({
22840
23184
  queryKey: common.QueryKeyFactory.default.createObjectKey({
22841
- id: (_h = (_g = (_f = response.quoteChargeCreate) === null || _f === void 0 ? void 0 : _f.quoteCharge) === null || _g === void 0 ? void 0 : _g.quoteChange) === null || _h === void 0 ? void 0 : _h.quoteId,
23185
+ id: (_d = response.quoteChange) === null || _d === void 0 ? void 0 : _d.quoteId,
22842
23186
  objectName: 'editingQuote',
22843
23187
  token: token,
22844
23188
  }),
@@ -23003,12 +23347,12 @@ var QuoteChangeSummarySection = function (_a) {
23003
23347
  mutationFn: function (quoteId) { return checkout({ quoteId: quoteId, token: token, apiHost: apiHost }); },
23004
23348
  onSuccess: function () {
23005
23349
  setEditingQuoteData(undefined);
23006
- showSuccessNotification("Subscription updated successfully");
23350
+ showSuccessNotification('Subscription updated successfully');
23007
23351
  },
23008
23352
  });
23009
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [editingQuote && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2" }, { children: "TOTAL" })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-right ".concat(isMobile ? "bunny-text-2xl" : "bunny-text-xl") }, { children: common.formatCurrency(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || "") }))] }))), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-end ".concat(isMobile ? "bunny-w-full" : "") }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
23353
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [editingQuote && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2" }, { children: "TOTAL" })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-right ".concat(isMobile ? 'bunny-text-2xl' : 'bunny-text-xl') }, { children: common.formatCurrency(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || '') }))] }))), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-end ".concat(isMobile ? 'bunny-w-full' : '') }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
23010
23354
  ? function () { return trialUpgradeMutation.mutate(editingQuoteData.id); }
23011
- : openCheckout, disabled: !editingQuoteData, size: isMobile ? "large" : "middle", type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? "Activate Trial" : "Proceed to checkout" })) }))] })));
23355
+ : openCheckout, disabled: !editingQuoteData || !editingQuote, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? 'Activate Trial' : 'Proceed to checkout' })) }))] })));
23012
23356
  };
23013
23357
 
23014
23358
  var QUANTITY_CHANGE_HEADER_TITLE = 'Update unit quantity';
@@ -23031,7 +23375,7 @@ var QuantityChangeDrawerDesktop = function (_a) {
23031
23375
  }, [open]);
23032
23376
  if (!openLocal)
23033
23377
  return null;
23034
- return (jsxRuntime.jsxs(antd.Drawer, __assign({ closeIcon: null, destroyOnClose: true, onClose: onClose, open: open, styles: isMobile
23378
+ return (jsxRuntime.jsxs(antd.Drawer, __assign({ closeIcon: null, destroyOnHidden: true, onClose: onClose, open: open, styles: isMobile
23035
23379
  ? {
23036
23380
  body: {
23037
23381
  padding: '1rem',
@@ -23109,8 +23453,7 @@ var SubscriptionsWrapper = function (_a) {
23109
23453
  var styles = __assign(__assign({}, defaultStyles), userStyles);
23110
23454
  var _f = react.useState(undefined), upgradingSubscription = _f[0], setUpgradingSubscription = _f[1];
23111
23455
  var _g = react.useState(undefined), updatingChargeQuantityId = _g[0], setUpdatingChargeQuantityId = _g[1];
23112
- var _h = react.useState(undefined), quotePreviewData = _h[0], setQuotePreviewData = _h[1];
23113
- var _j = react.useState(null), subscriptionUpgradeId = _j[0], setSubscriptionUpgradeId = _j[1];
23456
+ var _h = react.useState(null), subscriptionUpgradeId = _h[0], setSubscriptionUpgradeId = _h[1];
23114
23457
  return (jsxRuntime.jsx(SubscriptionsContext.Provider, __assign({ value: {
23115
23458
  gap: styles.gap,
23116
23459
  shadow: styles.shadow,
@@ -23123,11 +23466,9 @@ var SubscriptionsWrapper = function (_a) {
23123
23466
  setUpgradingSubscription: setUpgradingSubscription,
23124
23467
  updatingChargeQuantityId: updatingChargeQuantityId,
23125
23468
  setUpdatingChargeQuantityId: setUpdatingChargeQuantityId,
23126
- quotePreviewData: quotePreviewData,
23127
- setQuotePreviewData: setQuotePreviewData,
23128
23469
  subscriptionUpgradeId: subscriptionUpgradeId,
23129
23470
  setSubscriptionUpgradeId: setSubscriptionUpgradeId,
23130
- } }, { children: jsxRuntime.jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) })));
23471
+ } }, { children: jsxRuntime.jsx(QuotePreviewProvider, { children: jsxRuntime.jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) }) })));
23131
23472
  };
23132
23473
  var Subscriptions = function (_a) {
23133
23474
  var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, noSubscriptionsComponent = _a.noSubscriptionsComponent, hideTitle = _a.hideTitle, hideExpiredToggle = _a.hideExpiredToggle;
@@ -23485,10 +23826,10 @@ function BillingDetailsSection(_a) {
23485
23826
  }
23486
23827
 
23487
23828
  var BillingDetails = function (_a) {
23488
- var _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? 'shadow-md' : _c, className = _a.className, _d = _a.hidePaymentMethodForm, hidePaymentMethodForm = _d === void 0 ? false : _d, _e = _a.hideBillingDetailsForm, hideBillingDetailsForm = _e === void 0 ? false : _e, countryListFilter = _a.countryListFilter;
23829
+ var className = _a.className, countryListFilter = _a.countryListFilter, _b = _a.hideBillingDetailsForm, hideBillingDetailsForm = _b === void 0 ? false : _b, _c = _a.hidePaymentMethodForm, hidePaymentMethodForm = _c === void 0 ? false : _c, _d = _a.isCardEnabled, isCardEnabled = _d === void 0 ? true : _d, _e = _a.isUpgradeFromTrial, isUpgradeFromTrial = _e === void 0 ? false : _e, _f = _a.shadow, shadow = _f === void 0 ? 'shadow-md' : _f, onSavePaymentMethod = _a.onSavePaymentMethod;
23489
23830
  // Hooks
23490
23831
  var isMobile = common.useIsMobile();
23491
- return (jsxRuntime.jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-py-2 bunny-my-2 ".concat(isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row', " bunny-gap-4") }, { children: [!hideBillingDetailsForm ? (jsxRuntime.jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsxRuntime.jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsxRuntime.jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm })) : null] })) })));
23832
+ return (jsxRuntime.jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-py-2 bunny-my-2 ".concat(isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row', " bunny-gap-4") }, { children: [!hideBillingDetailsForm ? (jsxRuntime.jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsxRuntime.jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsxRuntime.jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm, isUpgradeFromTrial: isUpgradeFromTrial, onSavePaymentMethod: onSavePaymentMethod })) : null] })) })));
23492
23833
  };
23493
23834
  var WrapperComponent = function (_a) {
23494
23835
  var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;
@@ -23499,16 +23840,20 @@ var ResponsiveDivider = function () {
23499
23840
  return isMobile ? (jsxRuntime.jsx("div", __assign({ className: "bunny-mx-4" }, { children: jsxRuntime.jsx(antd.Divider, {}) }))) : (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" }) }));
23500
23841
  };
23501
23842
  var PaymentFormSection = function (_a) {
23502
- var hideBillingDetailsForm = _a.hideBillingDetailsForm;
23843
+ var hideBillingDetailsForm = _a.hideBillingDetailsForm, isUpgradeFromTrial = _a.isUpgradeFromTrial, onSavePaymentMethod = _a.onSavePaymentMethod;
23503
23844
  var isMobile = common.useIsMobile();
23504
23845
  var onTokenExpired = react.useContext(BunnyContext).onTokenExpired;
23505
23846
  var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
23506
23847
  var showSuccessNotification = common.useSuccessNotification();
23507
- var entityId = useCurrentUserData().entityId;
23508
- return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
23848
+ 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) {
23509
23849
  handleAllErrorFormats(error);
23510
- }, onSavePaymentMethod: function () {
23511
- showSuccessNotification('Your payment method has been saved');
23850
+ }, onSavePaymentMethod: function (response) {
23851
+ showSuccessNotification(isUpgradeFromTrial
23852
+ ? 'Payment method saved! Your trial will automatically convert to a paid subscription.'
23853
+ : 'Payment method saved successfully!');
23854
+ // TODO: onSavePaymentMethod(response: any) should be cleaned up to have a response type (not any)
23855
+ // and work with both stripe and demo pay requests
23856
+ onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
23512
23857
  } }) })));
23513
23858
  };
23514
23859