@bunnyapp/components 1.0.60 → 1.0.62

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 (78) hide show
  1. package/dist/cjs/index.js +458 -345
  2. package/dist/cjs/src/components/Checkout/Checkout.d.ts +2 -2
  3. package/dist/cjs/src/components/Checkout/QuoteCheckout.d.ts +2 -2
  4. package/dist/cjs/src/components/Invoice/Invoice.d.ts +2 -2
  5. package/dist/cjs/src/components/Invoice/InvoiceQuoteView.d.ts +2 -2
  6. package/dist/cjs/src/components/LegacyInvoicePDF.d.ts +3 -4
  7. package/dist/cjs/src/components/PaymentForm/CouponEditor.d.ts +8 -0
  8. package/dist/cjs/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +1 -1
  9. package/dist/cjs/src/components/PaymentForm/PaymentMethodSelector.d.ts +1 -1
  10. package/dist/cjs/src/components/Quote/Quote.stories.d.ts +5 -5
  11. package/dist/cjs/src/components/Signup/PriceListDisplay.d.ts +3 -4
  12. package/dist/cjs/src/components/Signup/Signup.d.ts +5 -5
  13. package/dist/cjs/src/components/Signup/Signup.stories.d.ts +2 -3
  14. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanManager.d.ts +4 -0
  15. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +1 -1
  16. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +4 -1
  17. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +1 -1
  18. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +1 -1
  19. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +1 -1
  20. package/dist/cjs/src/components/Subscriptions/Subscriptions.d.ts +2 -1
  21. package/dist/cjs/src/components/Subscriptions/SubscriptionsContext.d.ts +3 -2
  22. package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +2 -2
  23. package/dist/cjs/src/components/icons/CardIcon.d.ts +3 -1
  24. package/dist/cjs/src/graphql/mutations/checkout.d.ts +1 -1
  25. package/dist/cjs/src/graphql/mutations/quoteAddCoupon.d.ts +1 -1
  26. package/dist/cjs/src/graphql/mutations/quoteCompose.d.ts +2 -2
  27. package/dist/cjs/src/graphql/queries/getBillingDetails.d.ts +2 -2
  28. package/dist/cjs/src/graphql/queries/getBranding.d.ts +2 -2
  29. package/dist/cjs/src/graphql/queries/getFeatureUsage.d.ts +1 -1
  30. package/dist/cjs/src/graphql/queries/getFormattedQuote.d.ts +1 -1
  31. package/dist/cjs/src/graphql/queries/getPlanChangeOptions.d.ts +1 -1
  32. package/dist/cjs/src/graphql/queries/getPriceList.d.ts +1 -1
  33. package/dist/cjs/src/graphql/queries/getPriceListChangeOptions.d.ts +1 -1
  34. package/dist/cjs/src/graphql/queries/getQuote.d.ts +1 -1
  35. package/dist/cjs/src/graphql/queries/getTaxationRequiredAccountFields.d.ts +1 -1
  36. package/dist/cjs/src/mocks/handlers.d.ts +1 -1
  37. package/dist/cjs/src/utils/apiUtils.d.ts +8 -0
  38. package/dist/esm/index.js +440 -327
  39. package/dist/esm/src/components/Checkout/Checkout.d.ts +2 -2
  40. package/dist/esm/src/components/Checkout/QuoteCheckout.d.ts +2 -2
  41. package/dist/esm/src/components/Invoice/Invoice.d.ts +2 -2
  42. package/dist/esm/src/components/Invoice/InvoiceQuoteView.d.ts +2 -2
  43. package/dist/esm/src/components/LegacyInvoicePDF.d.ts +3 -4
  44. package/dist/esm/src/components/PaymentForm/CouponEditor.d.ts +8 -0
  45. package/dist/esm/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +1 -1
  46. package/dist/esm/src/components/PaymentForm/PaymentMethodSelector.d.ts +1 -1
  47. package/dist/esm/src/components/Quote/Quote.stories.d.ts +5 -5
  48. package/dist/esm/src/components/Signup/PriceListDisplay.d.ts +3 -4
  49. package/dist/esm/src/components/Signup/Signup.d.ts +5 -5
  50. package/dist/esm/src/components/Signup/Signup.stories.d.ts +2 -3
  51. package/dist/esm/src/components/Subscriptions/PlanManager/PlanManager.d.ts +4 -0
  52. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +1 -1
  53. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +4 -1
  54. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +1 -1
  55. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +1 -1
  56. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +1 -1
  57. package/dist/esm/src/components/Subscriptions/Subscriptions.d.ts +2 -1
  58. package/dist/esm/src/components/Subscriptions/SubscriptionsContext.d.ts +3 -2
  59. package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +2 -2
  60. package/dist/esm/src/components/icons/CardIcon.d.ts +3 -1
  61. package/dist/esm/src/graphql/mutations/checkout.d.ts +1 -1
  62. package/dist/esm/src/graphql/mutations/quoteAddCoupon.d.ts +1 -1
  63. package/dist/esm/src/graphql/mutations/quoteCompose.d.ts +2 -2
  64. package/dist/esm/src/graphql/queries/getBillingDetails.d.ts +2 -2
  65. package/dist/esm/src/graphql/queries/getBranding.d.ts +2 -2
  66. package/dist/esm/src/graphql/queries/getFeatureUsage.d.ts +1 -1
  67. package/dist/esm/src/graphql/queries/getFormattedQuote.d.ts +1 -1
  68. package/dist/esm/src/graphql/queries/getPlanChangeOptions.d.ts +1 -1
  69. package/dist/esm/src/graphql/queries/getPriceList.d.ts +1 -1
  70. package/dist/esm/src/graphql/queries/getPriceListChangeOptions.d.ts +1 -1
  71. package/dist/esm/src/graphql/queries/getQuote.d.ts +1 -1
  72. package/dist/esm/src/graphql/queries/getTaxationRequiredAccountFields.d.ts +1 -1
  73. package/dist/esm/src/mocks/handlers.d.ts +1 -1
  74. package/dist/esm/src/utils/apiUtils.d.ts +8 -0
  75. package/dist/index.d.ts +5 -4
  76. package/package.json +3 -3
  77. package/dist/cjs/src/components/Checkout/CouponComponent.d.ts +0 -7
  78. package/dist/esm/src/components/Checkout/CouponComponent.d.ts +0 -7
package/dist/cjs/index.js CHANGED
@@ -73,7 +73,7 @@ function styleInject(css, ref) {
73
73
  }
74
74
  }
75
75
 
76
- var css_248z = ".ant-popover {\n z-index: 1050;\n}\n.ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n}\n.ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ant-btn-link:disabled {\n color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n background-color: transparent !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 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 color: #232323 !important;\n font-size: 14px !important;\n word-break: break-all !important;\n overflow-wrap: break-word !important;\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: #ff6e1c !important;\n font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500;\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.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-menu-submenu::after {\n display: none !important;\n}\n: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.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-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-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\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-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-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-full {\n width: 100%;\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-2 {\n grid-template-columns: repeat(2, 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-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-2 {\n padding: 0.5rem;\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-4 {\n padding-left: 1rem;\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-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-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.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";
76
+ var css_248z = ".ant-popover {\n z-index: 1050;\n}\n.ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n}\n.ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ant-btn-link:disabled {\n color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n background-color: transparent !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 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 color: #232323 !important;\n font-size: 14px !important;\n word-break: break-all !important;\n overflow-wrap: break-word !important;\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: #ff6e1c !important;\n font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500;\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.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-menu-submenu::after {\n display: none !important;\n}\n: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-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-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-2 {\n grid-template-columns: repeat(2, 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-2 {\n padding: 0.5rem;\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-4 {\n padding-left: 1rem;\n}\n.bunny-pr-4 {\n padding-right: 1rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-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.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";
77
77
  styleInject(css_248z);
78
78
 
79
79
  /******************************************************************************
@@ -170,15 +170,67 @@ var BrandContext = react.createContext({
170
170
  topNavImageUrl: common.DEFAULT_TOP_NAV_IMAGE_URL,
171
171
  });
172
172
 
173
- var MUTATION$9 = "\n query entityBranding {\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }\n";
173
+ // This will be replaced at build time by rollup-plugin-replace
174
+ var PACKAGE_VERSION = '1.0.61';
175
+ var createRequestHeaders = function (token) {
176
+ var _a;
177
+ var bearerToken = token ? "Bearer ".concat(token) : null;
178
+ var headers = (_a = {
179
+ 'Content-type': 'application/json; charset=utf-8'
180
+ },
181
+ _a[common.X_BUNNY_COMPONENTS_VERSION_HEADER_NAME] = PACKAGE_VERSION,
182
+ _a);
183
+ if (bearerToken) {
184
+ headers['Authorization'] = bearerToken;
185
+ }
186
+ return headers;
187
+ };
188
+ var getGraphQLBaseURL = function (apiHost) {
189
+ return "".concat(apiHost, "/graphql");
190
+ };
191
+ var useGraphQLRequest = function () { return function (query, apiHost, token, variables) { return __awaiter(void 0, void 0, void 0, function () {
192
+ var error_1;
193
+ return __generator(this, function (_a) {
194
+ switch (_a.label) {
195
+ case 0:
196
+ _a.trys.push([0, 2, , 3]);
197
+ return [4 /*yield*/, request__default["default"](getGraphQLBaseURL(apiHost), query, variables, createRequestHeaders(token))];
198
+ case 1: return [2 /*return*/, _a.sent()];
199
+ case 2:
200
+ error_1 = _a.sent();
201
+ throw error_1;
202
+ case 3: return [2 /*return*/];
203
+ }
204
+ });
205
+ }); }; };
206
+ var gqlRequest = function (_a) {
207
+ var query = _a.query, apiHost = _a.apiHost, token = _a.token, vars = _a.vars, isInPreviewMode = _a.isInPreviewMode;
208
+ return __awaiter(void 0, void 0, void 0, function () {
209
+ return __generator(this, function (_b) {
210
+ switch (_b.label) {
211
+ case 0: return [4 /*yield*/, common.gqlRequest({
212
+ query: query,
213
+ apiHost: apiHost,
214
+ token: token,
215
+ vars: vars,
216
+ componentsVersion: PACKAGE_VERSION,
217
+ isInPreviewMode: isInPreviewMode,
218
+ })];
219
+ case 1: return [2 /*return*/, _b.sent()];
220
+ }
221
+ });
222
+ });
223
+ };
224
+
225
+ var MUTATION$a = "\n query entityBranding {\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }\n";
174
226
  var getBranding = function (_a) {
175
227
  var token = _a.token, apiHost = _a.apiHost;
176
228
  return __awaiter(void 0, void 0, void 0, function () {
177
229
  var response;
178
230
  return __generator(this, function (_b) {
179
231
  switch (_b.label) {
180
- case 0: return [4 /*yield*/, common.gqlRequest({
181
- query: MUTATION$9,
232
+ case 0: return [4 /*yield*/, gqlRequest({
233
+ query: MUTATION$a,
182
234
  token: token,
183
235
  apiHost: apiHost,
184
236
  })];
@@ -221,7 +273,7 @@ function BunnyProvider(_a) {
221
273
  apiHost: apiHost,
222
274
  token: token,
223
275
  onTokenExpired: onTokenExpired,
224
- } }, { children: jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsxRuntime.jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children: children })) })) })));
276
+ } }, { children: jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsxRuntime.jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-component-wrapper" }, { children: children })) })) })) })));
225
277
  }
226
278
  function ContextualWrapper(_a) {
227
279
  var children = _a.children, darkMode = _a.darkMode, configProviderProps = _a.configProviderProps;
@@ -229,6 +281,7 @@ function ContextualWrapper(_a) {
229
281
  var branding = reactQuery.useQuery({
230
282
  queryKey: common.QueryKeyFactory.default.brandingKey(token),
231
283
  queryFn: function () { return getBranding({ token: token, apiHost: apiHost }); },
284
+ staleTime: 1000 * 60 * 5, // 5 minutes
232
285
  }).data;
233
286
  var isMobile = common.useIsMobile();
234
287
  var entityBranding = react.useMemo(function () {
@@ -365,49 +418,46 @@ var InvoiceQuoteView = function (_a) {
365
418
  var _b = react.useContext(InvoiceQuoteContext), shadow = _b.shadow, hideDownloadButton = _b.hideDownloadButton;
366
419
  var isMobile = common.useIsMobile();
367
420
  var buttonsVisible = formattedInvoice && (!hideDownloadButton || onBackButtonClick);
368
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-grow ".concat(isMobile ? "bunny-overflow-hidden" : "") }, { children: [buttonsVisible ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between bunny-items-center bunny-pb-4 ".concat(isMobile ? "bunny-shadow-padding-x" : ""), id: "acceptance" }, { children: [jsxRuntime.jsx("div", { children: onBackButtonClick ? (jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-pl-0", onClick: onBackButtonClick, style: {
421
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-grow ".concat(isMobile ? 'bunny-overflow-hidden' : '') }, { children: [buttonsVisible ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between bunny-items-center bunny-pb-4 ".concat(isMobile ? 'bunny-shadow-padding-x' : ''), id: "acceptance" }, { children: [jsxRuntime.jsx("div", { children: onBackButtonClick ? (jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-pl-0", onClick: onBackButtonClick, style: {
369
422
  color: secondaryColor,
370
- }, type: "link" }, { children: backButtonName || "Back" }))) : null }), !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
371
- return downloadFile(apiHost + "/api/pdf/invoice/" + formattedInvoice.id, token);
372
- } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : "bunny-shadow-md", " bunny-rounded-md"), style: {
373
- minWidth: "750px",
423
+ }, type: "link" }, { children: backButtonName || 'Back' }))) : null }), !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
424
+ return downloadFile(apiHost + '/api/pdf/invoice/' + formattedInvoice.id, token);
425
+ } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
426
+ minWidth: '750px',
374
427
  } }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] })))] })));
375
428
  };
376
429
  var templateObject_1$b;
377
430
 
378
- var fetchPDF = function (apiEndpoint, invoiceUuid, token) { return __awaiter(void 0, void 0, void 0, function () {
431
+ var fetchPDF = function (apiHost, documentUuid, documentType, token) { return __awaiter(void 0, void 0, void 0, function () {
379
432
  var response;
380
433
  return __generator(this, function (_a) {
381
434
  switch (_a.label) {
382
435
  case 0:
383
- if (!invoiceUuid) {
384
- throw new Error("Invoice ID is required to fetch PDF");
436
+ if (!documentUuid) {
437
+ throw new Error('Invoice ID is required to fetch PDF');
385
438
  }
386
- return [4 /*yield*/, fetch("".concat(apiEndpoint, "/api/legacy_invoices/").concat(invoiceUuid), {
387
- method: "GET",
439
+ return [4 /*yield*/, fetch("".concat(apiHost, "/api/legacy_documents/").concat(documentUuid, "?type=").concat(documentType), {
388
440
  headers: {
389
- "Content-type": "application/json; charset=utf-8",
390
441
  Authorization: "Bearer ".concat(token),
391
442
  },
392
- // body: JSON.stringify({
393
- // query: transactionMutation(filter),
394
- // }),
395
443
  })];
396
444
  case 1:
397
445
  response = _a.sent();
398
446
  if (!response.ok)
399
- throw new Error("Failed to fetch PDF");
447
+ throw new Error('Failed to fetch PDF');
400
448
  return [2 /*return*/, response.blob()]; // Return the PDF as a blob
401
449
  }
402
450
  });
403
451
  }); };
404
- function InvoicePDF(_a) {
405
- var invoiceUuid = _a.invoiceUuid, apiHost = _a.apiHost, token = _a.token;
452
+ function LegacyDocument(_a) {
453
+ var documentUuid = _a.documentUuid, documentType = _a.documentType;
454
+ var apiHost = react.useContext(BunnyContext).apiHost;
406
455
  var _b = react.useState(undefined), pdfUrl = _b[0], setPdfUrl = _b[1];
456
+ var token = useToken();
407
457
  var _c = reactQuery.useQuery({
408
- queryKey: ["invoicePDF", invoiceUuid],
409
- queryFn: function () { return fetchPDF(apiHost || "", invoiceUuid, token); },
410
- enabled: Boolean(invoiceUuid),
458
+ queryKey: ['documentPDF', documentUuid],
459
+ queryFn: function () { return fetchPDF(apiHost, documentUuid, documentType, token); },
460
+ enabled: Boolean(documentUuid),
411
461
  }), pdfBlob = _c.data, isLoading = _c.isLoading;
412
462
  react.useEffect(function () {
413
463
  if (pdfBlob) {
@@ -419,10 +469,10 @@ function InvoicePDF(_a) {
419
469
  if (isLoading || !pdfUrl)
420
470
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
421
471
  return (jsxRuntime.jsx("iframe", { src: pdfUrl, style: {
422
- border: "none",
423
- gridColumn: "1/-1",
424
- minHeight: "1000px",
425
- minWidth: "780px",
472
+ border: 'none',
473
+ gridColumn: '1/-1',
474
+ minHeight: '1000px',
475
+ minWidth: '780px',
426
476
  }, title: "Invoice PDF", width: "100%" }));
427
477
  }
428
478
 
@@ -434,7 +484,7 @@ var getPaymentMethods = function (_a) {
434
484
  var _b;
435
485
  return __generator(this, function (_c) {
436
486
  switch (_c.label) {
437
- case 0: return [4 /*yield*/, common.gqlRequest({
487
+ case 0: return [4 /*yield*/, gqlRequest({
438
488
  query: paymentMethodsQuery(accountId ? "filter: \"accountId is ".concat(accountId, "\"") : ''),
439
489
  token: token,
440
490
  apiHost: apiHost,
@@ -455,6 +505,7 @@ var usePaymentMethod = function (_a) {
455
505
  token: token,
456
506
  }),
457
507
  queryFn: function () { return getPaymentMethods({ apiHost: apiHost, token: token, accountId: accountId }); },
508
+ staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
458
509
  }), data = _b.data, isLoading = _b.isLoading;
459
510
  return {
460
511
  paymentMethods: data,
@@ -471,7 +522,7 @@ var filterPaymentPlugins = function (plugins) {
471
522
  ((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.frontend) === null || _d === void 0 ? void 0 : _d.length);
472
523
  });
473
524
  };
474
- var MUTATION$8 = "{\n paymentPlugins {\n enabled\n entities\n guid\n hidden\n id\n name\n status\n type\n webhookEnabled\n components\n }\n}";
525
+ 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}";
475
526
  var getPaymentPlugins = function (_a) {
476
527
  var apiHost = _a.apiHost, token = _a.token;
477
528
  return __awaiter(void 0, void 0, void 0, function () {
@@ -480,8 +531,8 @@ var getPaymentPlugins = function (_a) {
480
531
  switch (_b.label) {
481
532
  case 0:
482
533
  _b.trys.push([0, 2, , 3]);
483
- return [4 /*yield*/, common.gqlRequest({
484
- query: MUTATION$8,
534
+ return [4 /*yield*/, gqlRequest({
535
+ query: MUTATION$9,
485
536
  token: token,
486
537
  apiHost: apiHost,
487
538
  })];
@@ -501,6 +552,7 @@ var usePaymentPlugins = function (_a) {
501
552
  var _b = reactQuery.useQuery({
502
553
  queryKey: ['paymentPlugins', token],
503
554
  queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token }); },
555
+ staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
504
556
  }), paymentPlugins = _b.data, isFetched = _b.isFetched;
505
557
  var filteredPaymentPlugins = filterPaymentPlugins(paymentPlugins);
506
558
  var paymentMethodAllowedPlugins = filteredPaymentPlugins === null || filteredPaymentPlugins === void 0 ? void 0 : filteredPaymentPlugins.filter(function (plugin) {
@@ -517,7 +569,7 @@ var getQuoteAmountDue = function (quote) {
517
569
  return quote.amountDue;
518
570
  };
519
571
 
520
- var MUTATION$7 = "\n mutation checkout(\n $invoiceId: ID,\n $quoteId: ID,\n $paymentMethodId: ID,\n $paymentMethodData: CheckoutPaymentMethodAttributes\n ) {\n checkout(\n invoiceId: $invoiceId,\n quoteId: $quoteId,\n paymentMethodId: $paymentMethodId,\n paymentMethodData: $paymentMethodData\n ) {\n invoice {\n id\n state\n amount\n amountDue\n }\n payment {\n id\n state\n amount\n }\n paymentApplication {\n id\n invoiceId\n paymentId\n }\n transaction {\n id\n amount\n }\n }\n }\n";
572
+ var MUTATION$8 = "\n mutation checkout(\n $invoiceId: ID,\n $quoteId: ID,\n $paymentMethodId: ID,\n $paymentMethodData: CheckoutPaymentMethodAttributes\n ) {\n checkout(\n invoiceId: $invoiceId,\n quoteId: $quoteId,\n paymentMethodId: $paymentMethodId,\n paymentMethodData: $paymentMethodData\n ) {\n invoice {\n id\n state\n amount\n amountDue\n }\n payment {\n id\n state\n amount\n }\n paymentApplication {\n id\n invoiceId\n paymentId\n }\n transaction {\n id\n amount\n }\n }\n }\n";
521
573
  var checkout = function (_a) {
522
574
  var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
523
575
  return __awaiter(void 0, void 0, void 0, function () {
@@ -533,8 +585,8 @@ var checkout = function (_a) {
533
585
  if (paymentMethodData) {
534
586
  mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
535
587
  }
536
- return [4 /*yield*/, common.gqlRequest({
537
- query: MUTATION$7,
588
+ return [4 /*yield*/, gqlRequest({
589
+ query: MUTATION$8,
538
590
  token: token,
539
591
  vars: mutationVars,
540
592
  apiHost: apiHost,
@@ -559,14 +611,13 @@ function usePay$1(_a) {
559
611
  var customCheckoutFunction = react.useContext(PaymentContext).customCheckoutFunction;
560
612
  var token = useToken();
561
613
  var pay = function () { return __awaiter(_this, void 0, void 0, function () {
562
- var amountDue, currencyId, response, response, error_1;
614
+ var currencyId, response, response, error_1;
563
615
  return __generator(this, function (_a) {
564
616
  switch (_a.label) {
565
617
  case 0:
566
- amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
567
618
  currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
568
- if (!amountDue || !currencyId) {
569
- throw new Error("No amount or currencyId");
619
+ if (!currencyId) {
620
+ throw new Error('No currencyId');
570
621
  }
571
622
  _a.label = 1;
572
623
  case 1:
@@ -713,75 +764,6 @@ var CheckoutFooter = function (_a) {
713
764
  return (jsxRuntime.jsx(ActualCheckoutFooter, { plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, noPadding: noPadding }));
714
765
  };
715
766
 
716
- // Automatically sets the default payment method if there is none currently set
717
- var useAutoSetDefaultPaymentMethod = function (_a) {
718
- var accountId = _a.accountId, token = _a.token, handleSetDefault = _a.handleSetDefault, setDefaultPaymentMethodLoading = _a.setDefaultPaymentMethodLoading, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
719
- var queryClient = reactQuery.useQueryClient();
720
- var apiHost = react.useContext(BunnyContext).apiHost;
721
- var _c = usePaymentMethod({
722
- accountId: accountId,
723
- token: token,
724
- apiHost: apiHost,
725
- }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod;
726
- // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
727
- function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
728
- var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
729
- accountId: accountId,
730
- token: token,
731
- }));
732
- if (cachedPaymentMethods) {
733
- for (var _i = 0, _a = cachedPaymentMethods; _i < _a.length; _i++) {
734
- var paymentMethod = _a[_i];
735
- paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
736
- }
737
- queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
738
- accountId: accountId,
739
- token: token,
740
- }), cachedPaymentMethods);
741
- }
742
- }
743
- react.useEffect(function () {
744
- if (setDefaultPaymentMethodLoading || !enabled)
745
- return;
746
- if ((storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) > 0 && !defaultPaymentMethod) {
747
- handleSetDefault(storedPaymentMethods[0]);
748
- setDefaultPaymentMethodOnCache(storedPaymentMethods[0]);
749
- }
750
- }, [
751
- storedPaymentMethods,
752
- defaultPaymentMethod,
753
- handleSetDefault,
754
- setDefaultPaymentMethodLoading,
755
- queryClient,
756
- accountId,
757
- token,
758
- ]);
759
- };
760
-
761
- var usePaymentMethodSelectorPlugin = function (_a) {
762
- var defaultPaymentMethod = _a.defaultPaymentMethod, defaultPaymentMethodPlugin = _a.defaultPaymentMethodPlugin, paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins;
763
- var _b = react.useState(), selectorPaymentMethodPlugin = _b[0], setSelectorPaymentMethodPlugin = _b[1];
764
- react.useEffect(function () {
765
- if (selectorPaymentMethodPlugin) {
766
- return;
767
- }
768
- if (defaultPaymentMethod) {
769
- setSelectorPaymentMethodPlugin(defaultPaymentMethodPlugin);
770
- }
771
- else {
772
- setSelectorPaymentMethodPlugin(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
773
- }
774
- }, [
775
- defaultPaymentMethod,
776
- defaultPaymentMethodPlugin,
777
- paymentMethodAllowedPlugins,
778
- ]);
779
- return {
780
- selectorPaymentMethodPlugin: selectorPaymentMethodPlugin,
781
- setSelectorPaymentMethodPlugin: setSelectorPaymentMethodPlugin,
782
- };
783
- };
784
-
785
767
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
786
768
 
787
769
  function getDefaultExportFromCjs (x) {
@@ -18103,7 +18085,7 @@ var Visa = function (_a) {
18103
18085
  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" })] })));
18104
18086
  };
18105
18087
 
18106
- var Text$p = antd.Typography.Text;
18088
+ var Text$r = antd.Typography.Text;
18107
18089
  var MiniCreditCard = function (_a) {
18108
18090
  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;
18109
18091
  var darkMode = react.useContext(BunnyContext).darkMode;
@@ -18114,7 +18096,7 @@ var MiniCreditCard = function (_a) {
18114
18096
  return darkMode ? 'var(--row-background-alternate)' : 'bg-slate-50';
18115
18097
  }, [darkMode]);
18116
18098
  var isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
18117
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Issuer, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$p, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] }))) })));
18099
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Issuer, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$r, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] }))) })));
18118
18100
  };
18119
18101
  var Identifier = function (_a) {
18120
18102
  var _b, _c, _d;
@@ -18123,9 +18105,9 @@ var Identifier = function (_a) {
18123
18105
  return null;
18124
18106
  }
18125
18107
  if (((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.type) === 'cashapp') {
18126
- return jsxRuntime.jsx(Text$p, { children: "Cashapp" });
18108
+ return jsxRuntime.jsx(Text$r, { children: "Cashapp" });
18127
18109
  }
18128
- return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$p, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$p, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
18110
+ return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$r, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$r, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
18129
18111
  };
18130
18112
  var Issuer = function (_a) {
18131
18113
  var _b;
@@ -18134,7 +18116,7 @@ var Issuer = function (_a) {
18134
18116
  var issuer = (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer;
18135
18117
  if (issuer.length == 0 || list.includes(issuer.toLowerCase()))
18136
18118
  return null;
18137
- return jsxRuntime.jsx(Text$p, { children: lodashExports.capitalize(issuer) });
18119
+ return jsxRuntime.jsx(Text$r, { children: lodashExports.capitalize(issuer) });
18138
18120
  };
18139
18121
  var DropdownMenu = function (_a) {
18140
18122
  var setDefault = _a.setDefault, remove = _a.remove, isDefault = _a.isDefault, id = _a.id;
@@ -18195,6 +18177,75 @@ var CardImage = function (_a) {
18195
18177
  }
18196
18178
  };
18197
18179
 
18180
+ // Automatically sets the default payment method if there is none currently set
18181
+ var useAutoSetDefaultPaymentMethod = function (_a) {
18182
+ var accountId = _a.accountId, token = _a.token, handleSetDefault = _a.handleSetDefault, setDefaultPaymentMethodLoading = _a.setDefaultPaymentMethodLoading, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
18183
+ var queryClient = reactQuery.useQueryClient();
18184
+ var apiHost = react.useContext(BunnyContext).apiHost;
18185
+ var _c = usePaymentMethod({
18186
+ accountId: accountId,
18187
+ token: token,
18188
+ apiHost: apiHost,
18189
+ }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod;
18190
+ // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
18191
+ function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
18192
+ var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
18193
+ accountId: accountId,
18194
+ token: token,
18195
+ }));
18196
+ if (cachedPaymentMethods) {
18197
+ for (var _i = 0, _a = cachedPaymentMethods; _i < _a.length; _i++) {
18198
+ var paymentMethod = _a[_i];
18199
+ paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
18200
+ }
18201
+ queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
18202
+ accountId: accountId,
18203
+ token: token,
18204
+ }), cachedPaymentMethods);
18205
+ }
18206
+ }
18207
+ react.useEffect(function () {
18208
+ if (setDefaultPaymentMethodLoading || !enabled)
18209
+ return;
18210
+ if ((storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) > 0 && !defaultPaymentMethod) {
18211
+ handleSetDefault(storedPaymentMethods[0]);
18212
+ setDefaultPaymentMethodOnCache(storedPaymentMethods[0]);
18213
+ }
18214
+ }, [
18215
+ storedPaymentMethods,
18216
+ defaultPaymentMethod,
18217
+ handleSetDefault,
18218
+ setDefaultPaymentMethodLoading,
18219
+ queryClient,
18220
+ accountId,
18221
+ token,
18222
+ ]);
18223
+ };
18224
+
18225
+ var usePaymentMethodSelectorPlugin = function (_a) {
18226
+ var defaultPaymentMethod = _a.defaultPaymentMethod, defaultPaymentMethodPlugin = _a.defaultPaymentMethodPlugin, paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins;
18227
+ var _b = react.useState(), selectorPaymentMethodPlugin = _b[0], setSelectorPaymentMethodPlugin = _b[1];
18228
+ react.useEffect(function () {
18229
+ if (selectorPaymentMethodPlugin) {
18230
+ return;
18231
+ }
18232
+ if (defaultPaymentMethod) {
18233
+ setSelectorPaymentMethodPlugin(defaultPaymentMethodPlugin);
18234
+ }
18235
+ else {
18236
+ setSelectorPaymentMethodPlugin(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
18237
+ }
18238
+ }, [
18239
+ defaultPaymentMethod,
18240
+ defaultPaymentMethodPlugin,
18241
+ paymentMethodAllowedPlugins,
18242
+ ]);
18243
+ return {
18244
+ selectorPaymentMethodPlugin: selectorPaymentMethodPlugin,
18245
+ setSelectorPaymentMethodPlugin: setSelectorPaymentMethodPlugin,
18246
+ };
18247
+ };
18248
+
18198
18249
  var SavePaymentMethodFooter = function (_a) {
18199
18250
  var isSaving = _a.isSaving, onSave = _a.onSave, noPadding = _a.noPadding;
18200
18251
  var isMobile = common.useIsMobile();
@@ -18356,7 +18407,7 @@ function useSave$1(_a) {
18356
18407
  return { save: save, isSaving: isSaving };
18357
18408
  }
18358
18409
 
18359
- var Text$o = antd.Typography.Text;
18410
+ var Text$q = antd.Typography.Text;
18360
18411
  var TEST_CARD = '4242424242424242';
18361
18412
  var DemoPayForm = function (_a) {
18362
18413
  var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -18418,7 +18469,7 @@ var DemoPayForm = function (_a) {
18418
18469
  var onCardCvcChange = function (cvc) {
18419
18470
  setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
18420
18471
  };
18421
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$o, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
18472
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$q, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
18422
18473
  };
18423
18474
  var StyledInputs = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"], ["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"])), function (_a) {
18424
18475
  var darkMode = _a.darkMode;
@@ -18649,11 +18700,12 @@ var PaymentMethodDetails = function (_a) {
18649
18700
  }
18650
18701
  };
18651
18702
 
18652
- var CardIcon = function () {
18653
- return (jsxRuntime.jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
18703
+ var CardIcon = function (_a) {
18704
+ var className = _a.className;
18705
+ return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
18654
18706
  };
18655
18707
 
18656
- var Text$n = antd.Typography.Text;
18708
+ var Text$p = antd.Typography.Text;
18657
18709
  var PaymentMethodSelector = function (_a) {
18658
18710
  var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
18659
18711
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsxRuntime.jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
@@ -18662,11 +18714,11 @@ var PaymentOption = function (_a) {
18662
18714
  var selected = _a.selected, paymentPlugin = _a.paymentPlugin, onClick = _a.onClick, name = _a.name;
18663
18715
  var brandColor = react.useContext(BrandContext).brandColor;
18664
18716
  var darkMode = react.useContext(BunnyContext).darkMode;
18665
- var isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("ach");
18666
- var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
18667
- return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "bunny-flex bunny-justify-between bunny-items-center bunny-w-full bunny-cursor-pointer bunny-py-2 bunny-px-4 bunny-rounded bunny-border-solid ".concat(darkMode
18717
+ var isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('ach');
18718
+ var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
18719
+ return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ".concat(darkMode
18668
18720
  ? "var(--row-background-dark) border-gray-500"
18669
- : "bunny-bg-slate-50 bunny-border-slate-200", " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsxRuntime.jsx(Text$n, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
18721
+ : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$p, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] })));
18670
18722
  };
18671
18723
  var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"], ["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"])), function (_a) {
18672
18724
  var $brandColor = _a.$brandColor, $selected = _a.$selected;
@@ -18876,7 +18928,7 @@ function StripeWrapper(_a) {
18876
18928
  }
18877
18929
 
18878
18930
  function Invoice(_a) {
18879
- 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;
18931
+ 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;
18880
18932
  return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
18881
18933
  id: id,
18882
18934
  invoiceQuoteViewComponent: invoiceQuoteViewComponent,
@@ -18903,10 +18955,10 @@ function ActualInvoice() {
18903
18955
  // Queries
18904
18956
  var formattedInvoice = reactQuery.useQuery({
18905
18957
  queryKey: common.QueryKeyFactory.default.createFormattedInvoiceKey({ id: id, token: token }),
18906
- queryFn: function () { return common.getFormattedInvoice({ id: id, token: token, apiHost: apiHost }); },
18958
+ queryFn: function () { return common.getFormattedInvoice({ id: id, token: token, apiHost: apiHost, componentsVersion: PACKAGE_VERSION }); },
18907
18959
  }).data;
18908
18960
  // Derived state
18909
- var isInvoicePayable = common.PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || "");
18961
+ var isInvoicePayable = common.PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || '');
18910
18962
  // Local state
18911
18963
  var isMobile = common.useIsMobile(isInvoicePayable ? common.BreakpointNumbers.lg : undefined);
18912
18964
  var onSuccess = function () {
@@ -18919,7 +18971,7 @@ function ActualInvoice() {
18919
18971
  token: token,
18920
18972
  }),
18921
18973
  });
18922
- showSuccessNotification("Your invoice has been paid", "Payment successful");
18974
+ showSuccessNotification('Your invoice has been paid', 'Payment successful');
18923
18975
  onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
18924
18976
  };
18925
18977
  var onFail = function (error) {
@@ -18932,18 +18984,18 @@ function ActualInvoice() {
18932
18984
  }, [formattedInvoice]);
18933
18985
  if (!formattedInvoice)
18934
18986
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
18935
- 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 bunny-overflow-hidden" : "", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost, token: token }) }))) : (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 }) })))] })) })));
18987
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 bunny-overflow-hidden ".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 }) })))] })) })));
18936
18988
  }
18937
18989
 
18938
- var MUTATION$6 = function (id) { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n object { documents { id filename size date url } }\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 }"; };
18990
+ var MUTATION$7 = function (id) { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n object { documents { id filename size date url } }\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 }"; };
18939
18991
  var getFormattedQuote = function (_a) {
18940
18992
  var id = _a.id, token = _a.token, apiHost = _a.apiHost;
18941
18993
  return __awaiter(void 0, void 0, void 0, function () {
18942
18994
  var response;
18943
18995
  return __generator(this, function (_b) {
18944
18996
  switch (_b.label) {
18945
- case 0: return [4 /*yield*/, common.gqlRequest({
18946
- query: MUTATION$6(),
18997
+ case 0: return [4 /*yield*/, gqlRequest({
18998
+ query: MUTATION$7(),
18947
18999
  token: token,
18948
19000
  apiHost: apiHost,
18949
19001
  vars: { id: id },
@@ -19215,7 +19267,7 @@ var AcceptQuoteModal = function (_a) {
19215
19267
  }, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: true, ref: firstInputRef }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsxRuntime.jsx(antd.Input, {}) })), taxNumberRequired && (jsxRuntime.jsx(antd.Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsxRuntime.jsx(antd.Input, {}) })))] })) })));
19216
19268
  };
19217
19269
 
19218
- var Text$m = antd.Typography.Text;
19270
+ var Text$o = antd.Typography.Text;
19219
19271
  defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
19220
19272
  function Quote(_a) {
19221
19273
  var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onQuoteLoaded = _a.onQuoteLoaded;
@@ -19284,20 +19336,20 @@ function ActualQuote() {
19284
19336
  var isAccepted = formattedQuote.state === 'ACCEPTED';
19285
19337
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-end bunny-items-center bunny-gap-4", id: "acceptance", style: {
19286
19338
  color: entityBranding.secondaryColor,
19287
- } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$m, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? 'Quote is expired' : 'Accept quote' }))) : null] })))] })), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_b = (_a = formattedQuote.object) === null || _a === void 0 ? void 0 : _a.documents) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
19339
+ } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$o, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? 'Quote is expired' : 'Accept quote' }))) : null] })))] })), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_b = (_a = formattedQuote.object) === null || _a === void 0 ? void 0 : _a.documents) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
19288
19340
  return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
19289
19341
  }) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
19290
19342
  }
19291
19343
  var templateObject_1$7;
19292
19344
 
19293
- var QUOTES_QUERY = function (filter) { return "\n query quotes {\n quotes ".concat(filter ? "(".concat(filter, ")") : "", " {\n pageInfo {\n startCursor\n endCursor\n hasNextPage\n hasPreviousPage\n }\n nodes {\n id\n name\n account {\n name\n id\n }\n applicationDate\n state\n createdAt\n expiresAt\n currencyId\n amount\n number\n }\n }\n }"); };
19345
+ var QUOTES_QUERY = function (filter) { return "\n query quotes {\n quotes ".concat(filter ? "(".concat(filter, ")") : '', " {\n pageInfo {\n startCursor\n endCursor\n hasNextPage\n hasPreviousPage\n }\n nodes {\n id\n name\n account {\n name\n id\n }\n applicationDate\n state\n createdAt\n expiresAt\n currencyId\n amount\n number\n }\n }\n }"); };
19294
19346
  var getQuotes = function (_a) {
19295
19347
  var token = _a.token, apiHost = _a.apiHost, filter = _a.filter;
19296
19348
  return __awaiter(void 0, void 0, void 0, function () {
19297
19349
  var response;
19298
19350
  return __generator(this, function (_b) {
19299
19351
  switch (_b.label) {
19300
- case 0: return [4 /*yield*/, common.gqlRequest({
19352
+ case 0: return [4 /*yield*/, gqlRequest({
19301
19353
  query: QUOTES_QUERY(filter),
19302
19354
  token: token,
19303
19355
  vars: {},
@@ -19375,10 +19427,10 @@ var getColor = function (state) {
19375
19427
  }
19376
19428
  };
19377
19429
 
19378
- var Text$l = antd.Typography.Text;
19430
+ var Text$n = antd.Typography.Text;
19379
19431
  var TransactionDate = function (_a) {
19380
19432
  var date = _a.date;
19381
- return jsxRuntime.jsx(Text$l, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
19433
+ return jsxRuntime.jsx(Text$n, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
19382
19434
  };
19383
19435
 
19384
19436
  var ArrowDownToLine = function (_a) {
@@ -19415,13 +19467,13 @@ var TransactionGridCell = defaultStyled.div.withConfig({
19415
19467
  }, common.SLATE_600);
19416
19468
  var templateObject_1$6;
19417
19469
 
19418
- var Text$k = antd.Typography.Text;
19470
+ var Text$m = antd.Typography.Text;
19419
19471
  var TransactionsEmptyState = function () {
19420
19472
  var noTransactionsMessage = react.useContext(TransactionsListContext).noTransactionsMessage;
19421
- return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
19473
+ return (jsxRuntime.jsx(Text$m, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
19422
19474
  };
19423
19475
 
19424
- var Text$j = antd.Typography.Text;
19476
+ var Text$l = antd.Typography.Text;
19425
19477
  var isInvoice = function (transaction) {
19426
19478
  return transaction.kind === "INVOICE";
19427
19479
  };
@@ -19433,7 +19485,7 @@ var TransactionRowTitle = function (_a) {
19433
19485
  if (!isInvoice(transaction) && !isQuote(transaction)) {
19434
19486
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
19435
19487
  }
19436
- return (jsxRuntime.jsx(Text$j, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19488
+ return (jsxRuntime.jsx(Text$l, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19437
19489
  };
19438
19490
 
19439
19491
  function transactionDateToDisplay(transaction, transactionDateType) {
@@ -19452,7 +19504,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
19452
19504
  }
19453
19505
  }
19454
19506
 
19455
- var Text$i = antd.Typography.Text;
19507
+ var Text$k = antd.Typography.Text;
19456
19508
  var TransactionsListDesktop = function (_a) {
19457
19509
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19458
19510
  var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19481,11 +19533,11 @@ var TransactionsListDesktop = function (_a) {
19481
19533
  !showState &&
19482
19534
  !showAmount &&
19483
19535
  !showDownload &&
19484
- !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$i, { 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$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$i, { 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$i, { 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));
19536
+ !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$k, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$k, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$k, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$k, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
19485
19537
  }) }));
19486
19538
  };
19487
19539
 
19488
- var Text$h = antd.Typography.Text;
19540
+ var Text$j = antd.Typography.Text;
19489
19541
  var TransactionsListMobile = function (_a) {
19490
19542
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19491
19543
  var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19508,12 +19560,12 @@ var TransactionsListMobile = function (_a) {
19508
19560
  backgroundColor: index % 2 === 0
19509
19561
  ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
19510
19562
  : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
19511
- } }, { 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$h, { 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$h, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$h, { children: common.formatCurrency(transaction.transactionable.amount ||
19563
+ } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$j, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$j, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$j, { children: common.formatCurrency(transaction.transactionable.amount ||
19512
19564
  transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
19513
19565
  }) }));
19514
19566
  };
19515
19567
 
19516
- var Text$g = antd.Typography.Text;
19568
+ var Text$i = antd.Typography.Text;
19517
19569
  var DISPLAY_WIDTH = 1200;
19518
19570
  function Transactions(_a) {
19519
19571
  var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date", "title", "state", "amount", "download"] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? "shadow-md" : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
@@ -19626,7 +19678,7 @@ function TransactionsDisplay(_a) {
19626
19678
  onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
19627
19679
  setDrawerOpen(false);
19628
19680
  }
19629
- return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? "bunny-overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col bunny-gap-1" : "bunny-flex-row bunny-items-center", " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$g, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
19681
+ return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? "bunny-overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col bunny-gap-1" : "bunny-flex-row bunny-items-center", " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$i, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
19630
19682
  ), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-w-full" : "") }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
19631
19683
  ? searchBarClassName
19632
19684
  : "border border-slate-200", onChange: function (e) {
@@ -19744,7 +19796,7 @@ function QuotesWrapper() {
19744
19796
  return (jsxRuntime.jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
19745
19797
  }
19746
19798
 
19747
- var MUTATION$5 = function () { return "\nmutation AccountSignup (\n $pluginId: String!,\n $paymentMethodId: String,\n $priceListCode: String!,\n $accountId: ID!,\n $quoteId: ID!,\n $entityId: ID!\n) {\n accountSignup(\n pluginId: $pluginId,\n paymentMethodId: $paymentMethodId,\n priceListCode: $priceListCode,\n accountId: $accountId,\n quoteId: $quoteId,\n entityId: $entityId\n ) {\n errors\n quote {\n acceptedByName\n acceptedByTitle\n accountId\n amount\n amountDue\n applicationDate\n applied\n backdatedPeriods\n backdatedQuote\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceImmediately\n invoiceImmediatelyAvailable\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n number\n ownerId\n payableId\n periodAmount\n poNumber\n requiresApproval\n smallUnitAmountDue\n splitInvoice\n startDate\n state\n subtotal\n taxAmount\n taxCode\n updatedAt\n uuid\n }\n }\n}"; };
19799
+ var MUTATION$6 = function () { return "\nmutation AccountSignup (\n $pluginId: String!,\n $paymentMethodId: String,\n $priceListCode: String!,\n $accountId: ID!,\n $quoteId: ID!,\n $entityId: ID!\n) {\n accountSignup(\n pluginId: $pluginId,\n paymentMethodId: $paymentMethodId,\n priceListCode: $priceListCode,\n accountId: $accountId,\n quoteId: $quoteId,\n entityId: $entityId\n ) {\n errors\n quote {\n accountId\n amount\n amountDue\n applicationDate\n applied\n backdatedPeriods\n backdatedQuote\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceImmediately\n invoiceImmediatelyAvailable\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n number\n ownerId\n payableId\n periodAmount\n poNumber\n requiresApproval\n smallUnitAmountDue\n splitInvoice\n startDate\n state\n subtotal\n taxAmount\n taxCode\n updatedAt\n uuid\n }\n }\n}"; };
19748
19800
  var accountSignup = function (_a) {
19749
19801
  var token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode, entityId = _a.entityId;
19750
19802
  return __awaiter(void 0, void 0, void 0, function () {
@@ -19762,8 +19814,8 @@ var accountSignup = function (_a) {
19762
19814
  priceListCode: priceListCode,
19763
19815
  entityId: entityId,
19764
19816
  };
19765
- return [4 /*yield*/, common.gqlRequest({
19766
- query: MUTATION$5(),
19817
+ return [4 /*yield*/, gqlRequest({
19818
+ query: MUTATION$6(),
19767
19819
  token: token,
19768
19820
  vars: vars,
19769
19821
  apiHost: apiHost,
@@ -19779,7 +19831,7 @@ var accountSignup = function (_a) {
19779
19831
  });
19780
19832
  };
19781
19833
 
19782
- var MUTATION$4 = function () { return "\nmutation QuoteAccountSignup (\n $accountName: String!,\n $billingContact: ContactAttributes!,\n $priceListCode: String!,\n $entityId: ID!\n) {\n quoteAccountSignup(\n priceListCode: $priceListCode,\n accountName: $accountName,\n billingContact: $billingContact,\n entityId: $entityId\n ) {\n account {\n id\n }\n quote {\n acceptedByName\n acceptedByTitle\n accountId\n amount\n amountDue\n applicationDate\n applied\n backdatedPeriods\n backdatedQuote\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceImmediately\n invoiceImmediatelyAvailable\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n number\n ownerId\n payableId\n periodAmount\n poNumber\n requiresApproval\n smallUnitAmountDue\n splitInvoice\n startDate\n state\n subtotal\n taxAmount\n taxCode\n updatedAt\n uuid\n }\n tenant {\n code\n }\n portalSessionToken\n errors\n }\n}"; };
19834
+ var MUTATION$5 = function () { return "\nmutation QuoteAccountSignup (\n $accountName: String!,\n $billingContact: ContactAttributes!,\n $priceListCode: String!,\n $entityId: ID!\n) {\n quoteAccountSignup(\n priceListCode: $priceListCode,\n accountName: $accountName,\n billingContact: $billingContact,\n entityId: $entityId\n ) {\n account {\n id\n }\n quote {\n accountId\n amount\n amountDue\n applicationDate\n applied\n backdatedPeriods\n backdatedQuote\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceImmediately\n invoiceImmediatelyAvailable\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n number\n ownerId\n payableId\n periodAmount\n poNumber\n requiresApproval\n smallUnitAmountDue\n splitInvoice\n startDate\n state\n subtotal\n taxAmount\n taxCode\n updatedAt\n uuid\n }\n tenant {\n code\n }\n portalSessionToken\n errors\n }\n}"; };
19783
19835
  var quoteAccountSignup = function (_a) {
19784
19836
  var token = _a.token, apiHost = _a.apiHost, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact, entityId = _a.entityId;
19785
19837
  return __awaiter(void 0, void 0, void 0, function () {
@@ -19794,8 +19846,8 @@ var quoteAccountSignup = function (_a) {
19794
19846
  billingContact: billingContact,
19795
19847
  entityId: entityId,
19796
19848
  };
19797
- return [4 /*yield*/, common.gqlRequest({
19798
- query: MUTATION$4(),
19849
+ return [4 /*yield*/, gqlRequest({
19850
+ query: MUTATION$5(),
19799
19851
  token: token,
19800
19852
  vars: vars,
19801
19853
  apiHost: apiHost,
@@ -19811,14 +19863,41 @@ var quoteAccountSignup = function (_a) {
19811
19863
  });
19812
19864
  };
19813
19865
 
19814
- var MUTATION$3 = function () { return "\nquery PriceList($code: String!) {\n priceList (code: $code) {\n basePrice\n code\n createdAt\n currencyId\n id\n isVisible\n name\n periodMonths\n planId\n priceDescription\n productId\n sku\n trialAllowed\n trialLengthDays\n updatedAt\n }\n}"; };
19866
+ var MUTATION$4 = "mutation quoteAddCoupon($couponCode: String!, $quoteId: ID!) {\n quoteAddCoupon(couponCode: $couponCode, quoteId: $quoteId) {\n quote {\n id\n subtotal\n taxAmount\n amount\n quoteChanges {\n id\n charges {\n id\n amount\n couponId\n }\n }\n }\n }\n}";
19867
+ var quoteAddCoupon = function (_a) {
19868
+ var quoteId = _a.quoteId, couponCode = _a.couponCode, token = _a.token, apiHost = _a.apiHost;
19869
+ return __awaiter(void 0, void 0, void 0, function () {
19870
+ var vars, response, errors;
19871
+ var _b;
19872
+ return __generator(this, function (_c) {
19873
+ switch (_c.label) {
19874
+ case 0:
19875
+ vars = { quoteId: quoteId, couponCode: couponCode };
19876
+ return [4 /*yield*/, gqlRequest({
19877
+ query: MUTATION$4,
19878
+ token: token,
19879
+ vars: vars,
19880
+ apiHost: apiHost,
19881
+ })];
19882
+ case 1:
19883
+ response = _c.sent();
19884
+ errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAddCoupon) === null || _b === void 0 ? void 0 : _b.errors;
19885
+ if (errors)
19886
+ throw errors;
19887
+ return [2 /*return*/, response.quote];
19888
+ }
19889
+ });
19890
+ });
19891
+ };
19892
+
19893
+ var MUTATION$3 = function () { return "\nquery PriceList($code: String!) {\n priceList (code: $code) {\n basePrice\n code\n createdAt\n currencyId\n id\n isVisible\n name\n periodMonths\n planId\n priceDescription\n productId\n product {\n name\n }\n sku\n trialAllowed\n trialLengthDays\n updatedAt\n }\n}"; };
19815
19894
  var getPriceList = function (_a) {
19816
19895
  var token = _a.token, code = _a.code, apiHost = _a.apiHost;
19817
19896
  return __awaiter(void 0, void 0, void 0, function () {
19818
19897
  var response;
19819
19898
  return __generator(this, function (_b) {
19820
19899
  switch (_b.label) {
19821
- case 0: return [4 /*yield*/, common.gqlRequest({
19900
+ case 0: return [4 /*yield*/, gqlRequest({
19822
19901
  query: MUTATION$3(),
19823
19902
  token: token,
19824
19903
  vars: { code: code },
@@ -19832,52 +19911,105 @@ var getPriceList = function (_a) {
19832
19911
  });
19833
19912
  };
19834
19913
 
19914
+ 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 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 couponId\n quantity\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
19915
+ var getQuote = function (_a) {
19916
+ var id = _a.id, token = _a.token, apiHost = _a.apiHost;
19917
+ return __awaiter(void 0, void 0, void 0, function () {
19918
+ var response;
19919
+ return __generator(this, function (_b) {
19920
+ switch (_b.label) {
19921
+ case 0: return [4 /*yield*/, gqlRequest({
19922
+ query: QUOTE_QUERY(id),
19923
+ token: token,
19924
+ vars: {},
19925
+ apiHost: apiHost,
19926
+ })];
19927
+ case 1:
19928
+ response = _b.sent();
19929
+ return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
19930
+ }
19931
+ });
19932
+ });
19933
+ };
19934
+
19935
+ var useCurrentUserData = function () {
19936
+ var queryClient = reactQuery.useQueryClient();
19937
+ var token = useToken();
19938
+ var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
19939
+ if (!currentUser)
19940
+ return {};
19941
+ return currentUser;
19942
+ };
19943
+
19944
+ var BunnyFooterIcon = function (_a) {
19945
+ var color = _a.color;
19946
+ 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" }) })) })] })));
19947
+ };
19948
+
19949
+ var Text$h = antd.Typography.Text;
19950
+ var Footer = function (_a) {
19951
+ var className = _a.className;
19952
+ var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
19953
+ var isMobile = common.useIsMobile();
19954
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ".concat(isMobile ? 'bunny-flex-col bunny-gap-2 bunny-grow' : '', " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
19955
+ };
19956
+ var BunnyMarketingLink = function () {
19957
+ var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
19958
+ var isMobile = common.useIsMobile();
19959
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsxRuntime.jsx(Text$h, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsxRuntime.jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
19960
+ };
19961
+ var StyedLink = styled__default["default"].a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n font-size: 14px;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n font-size: 14px;\n"])), common.SLATE_400, common.SLATE_500);
19962
+ 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);
19963
+ var templateObject_1$5, templateObject_2$1;
19964
+
19965
+ var Title$1 = antd.Typography.Title;
19835
19966
  function PaymentForms(_a) {
19836
19967
  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;
19837
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsx(PaymentForm, { onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction })) : null })) : (jsxRuntime.jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
19968
+ 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, { 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 })] })) }));
19838
19969
  }
19839
19970
  function InitialSignupForm(_a) {
19840
- var onSubmit = _a.onSubmit, submitting = _a.submitting;
19971
+ var className = _a.className, onSubmit = _a.onSubmit, submitting = _a.submitting;
19841
19972
  var form = antd.Form.useForm()[0];
19842
19973
  function handleSubmit() {
19843
19974
  form.validateFields({ validateOnly: false }).then(function () {
19844
19975
  onSubmit(form.getFieldsValue());
19845
19976
  });
19846
19977
  }
19847
- return (jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-justify-between bunny-h-full bunny-w-full", form: form, layout: "vertical", autoComplete: "off" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-2" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: 'Please input your first name!' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: 'Please input your last name!' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "email", rules: [
19848
- { required: true, message: 'Please input your email!' },
19849
- { type: 'email', message: 'Please enter a valid email!' },
19850
- ] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Please input your company name!' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full bunny-mt-4" }, { children: "Proceed to payment" })) })] })));
19978
+ 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.jsx(antd.Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: 'First name is required' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: 'Last name is required' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "email", rules: [
19979
+ { required: true, message: 'Email is required' },
19980
+ { type: 'email', message: 'Please enter a valid email' },
19981
+ ] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Company name is required' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full" }, { children: "Proceed to payment" })) })] })) })));
19851
19982
  }
19852
19983
 
19853
- var Title = antd.Typography.Title, Text$f = antd.Typography.Text;
19984
+ var Title = antd.Typography.Title, Text$g = antd.Typography.Text;
19854
19985
  function PaymentSuccessDisplay(_a) {
19855
19986
  var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
19856
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$f, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
19987
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$g, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
19857
19988
  }
19858
19989
 
19859
- var Text$e = antd.Typography.Text;
19990
+ var Text$f = antd.Typography.Text;
19860
19991
  function PriceListDisplay(_a) {
19861
- var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
19992
+ var priceListData = _a.priceListData;
19862
19993
  if (!priceListData)
19863
19994
  return null;
19864
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-justify-between bunny-h-full bunny-my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ style: { fontSize: "16px" }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
19995
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(Text$f, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxRuntime.jsxs(Text$f, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " / month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$f, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$f, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
19865
19996
  }
19866
19997
 
19867
19998
  var showErrorNotification = common.useErrorNotification();
19868
19999
  function Signup(_a) {
19869
- var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, style = _a.style, entityId = _a.entityId;
20000
+ var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, couponCode = _a.couponCode, className = _a.className, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, style = _a.style, entityId = _a.entityId;
19870
20001
  // Hooks
19871
20002
  var apiHost = react.useContext(BunnyContext).apiHost;
19872
20003
  var tokenFromContexts = useToken();
19873
20004
  var isMobile = common.useIsMobile();
19874
20005
  var topNavImageUrl = react.useContext(BrandContext).topNavImageUrl;
19875
- var _d = react.useState(undefined), quote = _d[0], setQuote = _d[1];
19876
- var _e = react.useState(undefined), accountId = _e[0], setAccountId = _e[1];
19877
- var _f = react.useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
20006
+ var _c = react.useState(undefined), initialQuote = _c[0], setInitialQuote = _c[1];
20007
+ var _d = react.useState(undefined), accountId = _d[0], setAccountId = _d[1];
20008
+ var _e = react.useState(undefined), portalSessionToken = _e[0], setPortalSessionToken = _e[1];
19878
20009
  var token = portalSessionToken || tokenFromContexts;
19879
- var _g = react.useState(false), proceedingToPayment = _g[0], setProceedingToPayment = _g[1];
19880
- var _h = react.useState(false), purchaseSucceeded = _h[0], setPurchaseSucceeded = _h[1];
20010
+ var _f = react.useState(false), proceedingToPayment = _f[0], setProceedingToPayment = _f[1];
20011
+ var _g = react.useState(false), purchaseSucceeded = _g[0], setPurchaseSucceeded = _g[1];
20012
+ var defaultCouponAppliedRef = react.useRef(undefined);
19881
20013
  var defaultPaymentMethod = usePaymentMethod({
19882
20014
  accountId: accountId,
19883
20015
  token: token,
@@ -19885,13 +20017,57 @@ function Signup(_a) {
19885
20017
  }).defaultPaymentMethod;
19886
20018
  var queryClient = reactQuery.useQueryClient();
19887
20019
  // Queries
19888
- var priceListData = reactQuery.useQuery({
19889
- queryKey: ["priceList", priceListCode],
20020
+ var _h = reactQuery.useQuery({
20021
+ queryKey: ['priceList', priceListCode],
19890
20022
  queryFn: function () { return getPriceList({ token: token, apiHost: apiHost, code: priceListCode }); },
19891
- }).data;
20023
+ }), priceListData = _h.data, isLoadingPriceList = _h.isLoading;
20024
+ var _j = reactQuery.useQuery({
20025
+ queryKey: ['quote', initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id],
20026
+ queryFn: function () {
20027
+ if (!(initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id)) {
20028
+ throw new Error('Quote ID is required');
20029
+ }
20030
+ return getQuote({ token: token, apiHost: apiHost, id: initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id });
20031
+ },
20032
+ enabled: !!(initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id),
20033
+ }), data = _j.data, isLoadingQuote = _j.isLoading;
20034
+ var quote = data || initialQuote;
20035
+ var _k = reactQuery.useMutation({
20036
+ mutationFn: function (couponCode) {
20037
+ if (!quote) {
20038
+ throw new Error('Quote is required');
20039
+ }
20040
+ if (!token) {
20041
+ throw new Error('Token is required');
20042
+ }
20043
+ return quoteAddCoupon({
20044
+ quoteId: quote.id,
20045
+ couponCode: couponCode,
20046
+ apiHost: apiHost,
20047
+ token: token,
20048
+ });
20049
+ },
20050
+ onSuccess: function () {
20051
+ queryClient.refetchQueries({
20052
+ queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
20053
+ });
20054
+ showSuccessNotification('Coupon applied');
20055
+ },
20056
+ onError: function (error) {
20057
+ var _a, _b;
20058
+ showErrorNotification((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
20059
+ },
20060
+ }), addCoupon = _k.mutate, isAddingCoupon = _k.isPending;
20061
+ // Handle default coupon application
20062
+ react.useEffect(function () {
20063
+ if (couponCode && (quote === null || quote === void 0 ? void 0 : quote.id) && defaultCouponAppliedRef.current !== couponCode) {
20064
+ addCoupon(couponCode);
20065
+ defaultCouponAppliedRef.current = couponCode;
20066
+ }
20067
+ }, [couponCode, quote === null || quote === void 0 ? void 0 : quote.id]);
19892
20068
  function handleSubmit(formData) {
19893
20069
  return __awaiter(this, void 0, void 0, function () {
19894
- var data, error_1;
20070
+ var data_1, error_1;
19895
20071
  return __generator(this, function (_a) {
19896
20072
  switch (_a.label) {
19897
20073
  case 0:
@@ -19910,9 +20086,9 @@ function Signup(_a) {
19910
20086
  entityId: entityId,
19911
20087
  })];
19912
20088
  case 1:
19913
- data = _a.sent();
19914
- setAccountId(data.account.id);
19915
- setPortalSessionToken(data.portalSessionToken);
20089
+ data_1 = _a.sent();
20090
+ setAccountId(data_1.account.id);
20091
+ setPortalSessionToken(data_1.portalSessionToken);
19916
20092
  // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
19917
20093
  // to instead use paymentMethods from portalSessionToken.
19918
20094
  queryClient.invalidateQueries({
@@ -19922,7 +20098,7 @@ function Signup(_a) {
19922
20098
  }),
19923
20099
  });
19924
20100
  setProceedingToPayment(false);
19925
- setQuote(data.quote);
20101
+ setInitialQuote(data_1.quote);
19926
20102
  return [3 /*break*/, 3];
19927
20103
  case 2:
19928
20104
  error_1 = _a.sent();
@@ -19948,16 +20124,16 @@ function Signup(_a) {
19948
20124
  switch (_a.label) {
19949
20125
  case 0:
19950
20126
  if (!portalSessionToken) {
19951
- throw new Error("Portal session token is required");
20127
+ throw new Error('Portal session token is required');
19952
20128
  }
19953
20129
  if (!accountId) {
19954
- throw new Error("Account ID is required");
20130
+ throw new Error('Account ID is required');
19955
20131
  }
19956
20132
  if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
19957
- throw new Error("Plugin ID is required");
20133
+ throw new Error('Plugin ID is required');
19958
20134
  }
19959
20135
  if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id)) {
19960
- throw new Error("Payment method ID is required");
20136
+ throw new Error('Payment method ID is required');
19961
20137
  }
19962
20138
  return [4 /*yield*/, accountSignup({
19963
20139
  token: portalSessionToken,
@@ -19977,45 +20153,27 @@ function Signup(_a) {
19977
20153
  function handlePaymentFail(error) {
19978
20154
  showErrorNotification(error.response.message);
19979
20155
  }
19980
- var WrapperComponent = function (_a) {
19981
- var children = _a.children, className = _a.className, style = _a.style;
19982
- return isCardEnabled ? (jsxRuntime.jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsxRuntime.jsx("div", __assign({ className: className, style: style }, { children: children })));
19983
- };
19984
- return (jsxRuntime.jsx(WrapperComponent, __assign({ className: "bunny-p-4 bunny-flex bunny-flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "bunny-w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col" : "bunny-flex-row", " bunny-h-full bunny-w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col ".concat(isMobile ? "bunny-items-center" : "bunny-w-1/2 bunny-items-center") }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-h-full" : "bunny-my-4") }, { children: jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: isMobile ? undefined : "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex ".concat(isMobile
19985
- ? "bunny-items-center bunny-justify-center bunny-my-12"
19986
- : "bunny-w-1/2 bunny-items-center bunny-justify-center bunny-my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-w-full" : "bunny-w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
19987
- }
19988
-
19989
- var createRequestHeaders = function (token) {
19990
- var bearerToken = token ? "Bearer ".concat(token) : null;
19991
- var headers = {
19992
- "Content-type": "application/json; charset=utf-8",
19993
- };
19994
- if (bearerToken) {
19995
- headers["Authorization"] = bearerToken;
20156
+ if (purchaseSucceeded) {
20157
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-screen bunny-flex bunny-items-start bunny-pt-[25vh]" }, { children: jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "bunny-w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId }) }))) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) }));
19996
20158
  }
19997
- return headers;
19998
- };
19999
- var getGraphQLBaseURL = function (apiHost) {
20000
- return "".concat(apiHost, "/graphql");
20001
- };
20002
- var useGraphQLRequest = function () {
20003
- return function (query, apiHost, token, variables) { return __awaiter(void 0, void 0, void 0, function () {
20004
- var error_1;
20005
- return __generator(this, function (_a) {
20006
- switch (_a.label) {
20007
- case 0:
20008
- _a.trys.push([0, 2, , 3]);
20009
- return [4 /*yield*/, request__default["default"](getGraphQLBaseURL(apiHost), query, variables, createRequestHeaders(token))];
20010
- case 1: return [2 /*return*/, _a.sent()];
20011
- case 2:
20012
- error_1 = _a.sent();
20013
- throw error_1;
20014
- case 3: return [2 /*return*/];
20015
- }
20016
- });
20017
- }); };
20159
+ 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, priceListData: priceListData, isAddingCoupon: isAddingCoupon })) : (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: {
20160
+ boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
20161
+ } }, { 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: isLoadingQuote ? undefined : quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) }))) }))] })));
20162
+ }
20163
+ var Text$e = antd.Typography.Text;
20164
+ var CheckoutSummaryDivider = function () {
20165
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-my-2" }, { children: jsxRuntime.jsx(antd.Divider, { className: "m-0" }) })));
20018
20166
  };
20167
+ var showSuccessNotification = common.useSuccessNotification();
20168
+ function CheckoutSummary(_a) {
20169
+ var quote = _a.quote, className = _a.className; _a.onAddCoupon; var priceListData = _a.priceListData; _a.isAddingCoupon;
20170
+ return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxRuntime.jsxs(Text$e, { 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) {
20171
+ return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
20172
+ var multiplier = charge.kind === 'COUPON' ? -1 : 1;
20173
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: charge.name }), jsxRuntime.jsx("div", { children: charge.quantity }), jsxRuntime.jsx("div", { children: common.formatCurrency(multiplier * charge.amount, charge.currencyId) })] }), charge.id));
20174
+ });
20175
+ }) })), 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.amountDue, 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.taxAmount, quote.currencyId) })] }))] }), false ] })));
20176
+ }
20019
20177
 
20020
20178
  var useQuoteSubscriptionUpgrade = function () {
20021
20179
  var graphQLRequest = useGraphQLRequest();
@@ -20076,27 +20234,6 @@ var useQuoteDelete = function () {
20076
20234
  }); };
20077
20235
  };
20078
20236
 
20079
- 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 charges {\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 quantity\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
20080
- var getQuote = function (_a) {
20081
- var id = _a.id, token = _a.token, apiHost = _a.apiHost;
20082
- return __awaiter(void 0, void 0, void 0, function () {
20083
- var response;
20084
- return __generator(this, function (_b) {
20085
- switch (_b.label) {
20086
- case 0: return [4 /*yield*/, common.gqlRequest({
20087
- query: QUOTE_QUERY(id),
20088
- token: token,
20089
- vars: {},
20090
- apiHost: apiHost,
20091
- })];
20092
- case 1:
20093
- response = _b.sent();
20094
- return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
20095
- }
20096
- });
20097
- });
20098
- };
20099
-
20100
20237
  var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
20101
20238
  var getSubscriptions = function (_a) {
20102
20239
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
@@ -20105,7 +20242,7 @@ var getSubscriptions = function (_a) {
20105
20242
  var _b, _c;
20106
20243
  return __generator(this, function (_d) {
20107
20244
  switch (_d.label) {
20108
- case 0: return [4 /*yield*/, common.gqlRequest({
20245
+ case 0: return [4 /*yield*/, gqlRequest({
20109
20246
  isInPreviewMode: isInPreviewMode,
20110
20247
  query: SUBSCRIPTIONS_QUERY,
20111
20248
  token: token,
@@ -20124,7 +20261,7 @@ var pageWrapperClassName = function (isMobile) {
20124
20261
  return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
20125
20262
  };
20126
20263
 
20127
- var QUOTE_FIELDS = "quote {\n formattedQuote {\n html\n }\n acceptedByName\n acceptedByTitle\n accountId\n amount\n amountDue\n applicationDate\n applied\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n ownerId\n periodAmount\n poNumber\n requiresApproval\n startDate\n state\n subtotal\n taxAmount\n updatedAt\n uuid\n amountsByPeriod {\n amount\n id\n name\n }\n endDateOptions {\n endDate\n label\n }\n invoiceUntilOptions {\n endDate\n label\n }\n quoteChanges {\n id\n priceListId\n charges {\n amount\n amountsByPeriod { amount startDate }\n billingPeriod\n billingPeriodAmounts { id amount prorationRate }\n chargeType\n couponId\n createdAt\n currencyId\n discount\n endDate\n feature { id name code isUnit unitName }\n id\n invoiceLineText\n name\n price\n priceDecimals\n priceTiers { starts price }\n pricingModel\n prorationRate\n quantity\n quantityMax\n quantityMin\n startDate\n tieredAveragePrice\n updatedAt\n }\n }\n}";
20264
+ var QUOTE_FIELDS = "quote {\n formattedQuote {\n html\n }\n acceptedByName\n acceptedByTitle\n accountId\n amount\n amountDue\n applicationDate\n applied\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n ownerId\n periodAmount\n poNumber\n requiresApproval\n startDate\n state\n subtotal\n taxAmount\n updatedAt\n uuid\n amountsByPeriod {\n amount\n id\n name\n }\n endDateOptions {\n endDate\n label\n }\n invoiceUntilOptions {\n endDate\n label\n }\n quoteChanges {\n currencyId\n id\n kind\n charges {\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n billingPeriodAmounts { id amount prorationRate }\n chargeType\n couponId\n createdAt\n currencyId\n discount\n endDate\n feature { id name code isUnit unitName }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n couponId\n price\n priceDecimals\n priceTiers { starts price }\n pricingModel\n prorationRate\n quantity\n quantityMax\n quantityMin\n startDate\n tieredAveragePrice\n updatedAt\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n }\n}";
20128
20265
 
20129
20266
  var QUOTE_RECALCULATE_TAXES = "\n mutation QuoteRecalculateTaxes($id: ID!) {\n quoteRecalculateTaxes(id: $id) {\n ".concat(QUOTE_FIELDS, "\n errors\n }\n }\n");
20130
20267
  var quoteRecalculateTaxes = function (_a) {
@@ -20136,7 +20273,7 @@ var quoteRecalculateTaxes = function (_a) {
20136
20273
  switch (_d.label) {
20137
20274
  case 0:
20138
20275
  vars = { id: quoteId };
20139
- return [4 /*yield*/, common.gqlRequest({
20276
+ return [4 /*yield*/, gqlRequest({
20140
20277
  query: QUOTE_RECALCULATE_TAXES,
20141
20278
  token: token,
20142
20279
  vars: vars,
@@ -20161,7 +20298,7 @@ var getTaxationRequiredAccountFields = function (_a) {
20161
20298
  var _b, _c;
20162
20299
  return __generator(this, function (_d) {
20163
20300
  switch (_d.label) {
20164
- case 0: return [4 /*yield*/, common.gqlRequest({
20301
+ case 0: return [4 /*yield*/, gqlRequest({
20165
20302
  query: MUTATION$2,
20166
20303
  token: token,
20167
20304
  apiHost: apiHost,
@@ -20169,8 +20306,7 @@ var getTaxationRequiredAccountFields = function (_a) {
20169
20306
  case 1:
20170
20307
  response = _d.sent();
20171
20308
  return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
20172
- ? response.currentUser
20173
- .taxationRequiredAccountFields
20309
+ ? response.currentUser.taxationRequiredAccountFields
20174
20310
  : null];
20175
20311
  }
20176
20312
  });
@@ -20186,35 +20322,6 @@ var useHasTaxPlugin = function (_a) {
20186
20322
  return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
20187
20323
  };
20188
20324
 
20189
- var useCurrentUserData = function () {
20190
- var queryClient = reactQuery.useQueryClient();
20191
- var token = useToken();
20192
- var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
20193
- if (!currentUser)
20194
- return {};
20195
- return currentUser;
20196
- };
20197
-
20198
- var BunnyFooterIcon = function (_a) {
20199
- var color = _a.color;
20200
- 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" }) })) })] })));
20201
- };
20202
-
20203
- var Footer = function (_a) {
20204
- var className = _a.className;
20205
- var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
20206
- var isMobile = common.useIsMobile();
20207
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ".concat(isMobile ? 'bunny-flex-col bunny-gap-2 bunny-grow' : '', " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
20208
- };
20209
- var BunnyMarketingLink = function () {
20210
- var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
20211
- var isMobile = common.useIsMobile();
20212
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsxRuntime.jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
20213
- };
20214
- var StyedLink = styled__default["default"].a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n font-size: 14px;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n font-size: 14px;\n"])), common.SLATE_400, common.SLATE_500);
20215
- 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);
20216
- var templateObject_1$5, templateObject_2$1;
20217
-
20218
20325
  var MUTATION$1 = "\nmutation accountUpdate(\n $id: ID!,\n $attributes: AccountAttributes!) {\n accountUpdate(\n id: $id,\n attributes: $attributes\n ) {\n account {\n id\n billingCountry\n billingState\n billingStreet\n billingCity\n billingZip\n name\n }\n errors\n }\n }\n";
20219
20326
  var accountUpdate = function (_a) {
20220
20327
  var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
@@ -20225,7 +20332,7 @@ var accountUpdate = function (_a) {
20225
20332
  switch (_c.label) {
20226
20333
  case 0:
20227
20334
  vars = { id: accountId, attributes: attributes };
20228
- return [4 /*yield*/, common.gqlRequest({
20335
+ return [4 /*yield*/, gqlRequest({
20229
20336
  query: MUTATION$1,
20230
20337
  token: token,
20231
20338
  vars: vars,
@@ -20289,10 +20396,10 @@ var FormBillingState = function (_a) {
20289
20396
 
20290
20397
  var QuoteCheckout = function (_a) {
20291
20398
  var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields;
20292
- var _b = react.useContext(BunnyContext), apiHost = _b.apiHost; _b.graphQLClient;
20399
+ var apiHost = react.useContext(BunnyContext).apiHost;
20293
20400
  var token = useToken();
20294
20401
  var isMobile = common.useIsMobile();
20295
- var _c = react.useState(false), isSaving = _c[0], setIsSaving = _c[1];
20402
+ var _b = react.useState(false), isSaving = _b[0], setIsSaving = _b[1];
20296
20403
  var paymentRequired = getQuoteAmountDue(quote) > 0;
20297
20404
  var checkoutMutation = reactQuery.useMutation({
20298
20405
  mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -20300,9 +20407,9 @@ var QuoteCheckout = function (_a) {
20300
20407
  switch (_a.label) {
20301
20408
  case 0:
20302
20409
  if (!quote)
20303
- throw new Error("Quote is required");
20410
+ throw new Error('Quote is required');
20304
20411
  if (paymentRequired)
20305
- throw new Error("Payment is required");
20412
+ throw new Error('Payment is required');
20306
20413
  return [4 /*yield*/, checkout({ quoteId: quote.id, token: token, apiHost: apiHost })];
20307
20414
  case 1: return [2 /*return*/, _a.sent()];
20308
20415
  }
@@ -20323,17 +20430,17 @@ var QuoteCheckout = function (_a) {
20323
20430
  }
20324
20431
  if (taxationRequiredAccountFields)
20325
20432
  return (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
20326
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? "bunny-shadow-padding-x" : "") }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
20433
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
20327
20434
  };
20328
20435
  var PaymentFormWrapper = function (_a) {
20329
20436
  var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
20330
20437
  var isMobile = common.useIsMobile();
20331
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-6 bunny-shrink-0 ".concat(isMobile ? "bunny-w-full bunny-shadow-padding-xb" : "", " ").concat(className), style: __assign({}, (isMobile
20438
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-6 bunny-shrink-0 ".concat(isMobile ? 'bunny-w-full bunny-shadow-padding-xb' : '', " ").concat(className), style: __assign({}, (isMobile
20332
20439
  ? setMaxHeight
20333
- ? { maxHeight: "60vh" }
20440
+ ? { maxHeight: '60vh' }
20334
20441
  : {}
20335
20442
  : {
20336
- width: "350px",
20443
+ width: '350px',
20337
20444
  })) }, { children: children })));
20338
20445
  };
20339
20446
 
@@ -20350,18 +20457,18 @@ var Checkout = function (_a) {
20350
20457
  var queryClient = reactQuery.useQueryClient();
20351
20458
  // Queries
20352
20459
  var _d = reactQuery.useQuery({
20353
- queryKey: ["getTaxationRequiredAccountFields", token],
20460
+ queryKey: ['getTaxationRequiredAccountFields', token],
20354
20461
  queryFn: function () { return getTaxationRequiredAccountFields({ apiHost: apiHost, token: token }); },
20355
20462
  enabled: Boolean(quote),
20356
20463
  staleTime: 0,
20357
20464
  }), taxationRequiredAccountFields = _d.data, isLoadingTaxationRequiredAccountFields = _d.isLoading;
20358
20465
  var _e = reactQuery.useQuery({
20359
- queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
20466
+ queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
20360
20467
  queryFn: function () {
20361
- return (quote === null || quote === void 0 ? void 0 : quote.accountId) && common.getAccount({ id: quote.accountId, apiHost: apiHost, token: token });
20468
+ return (quote === null || quote === void 0 ? void 0 : quote.accountId) &&
20469
+ common.getAccount({ id: quote.accountId, apiHost: apiHost, token: token, componentsVersion: PACKAGE_VERSION });
20362
20470
  },
20363
- enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
20364
- ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
20471
+ enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
20365
20472
  }), account = _e.data, isLoadingAccount = _e.isLoading;
20366
20473
  reactQuery.useQuery({
20367
20474
  queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
@@ -20383,8 +20490,8 @@ var Checkout = function (_a) {
20383
20490
  updatedQuote = _a.sent();
20384
20491
  if (updatedQuote) {
20385
20492
  quoteKey = queryKeyFactory.createObjectKey({
20386
- objectName: "editingQuote",
20387
20493
  id: updatedQuote.id,
20494
+ objectName: 'editingQuote',
20388
20495
  token: token,
20389
20496
  });
20390
20497
  calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
@@ -20412,7 +20519,7 @@ var Checkout = function (_a) {
20412
20519
  return null;
20413
20520
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50 bunny-overflow-auto", style: {
20414
20521
  zIndex: 1001,
20415
- } }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-gap-6 bunny-pt-4 ".concat(isMobile ? "bunny-flex-col" : "bunny-shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "" })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full bunny-pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
20522
+ } }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb') }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full bunny-pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
20416
20523
  onFail(error);
20417
20524
  }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
20418
20525
  onFail(error);
@@ -20437,15 +20544,12 @@ var SubscriptionsContext = react.createContext({});
20437
20544
 
20438
20545
  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";
20439
20546
  var quoteChargeUpdate = function (_a) {
20440
- var discount = _a.discount,
20441
- // endDate,
20442
- name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
20443
- return common.gqlRequest({
20547
+ 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;
20548
+ return gqlRequest({
20444
20549
  query: QUOTE_CHARGE_UPDATE,
20445
20550
  vars: {
20446
20551
  subtotal: subtotal,
20447
20552
  discount: discount,
20448
- // endDate,
20449
20553
  name: name,
20450
20554
  price: price,
20451
20555
  quantity: quantity,
@@ -20643,23 +20747,22 @@ var CheckoutBarSummarySection = function (_a) {
20643
20747
  };
20644
20748
 
20645
20749
  var PlanPickerCheckoutBarWrapper = function (_a) {
20646
- var handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
20750
+ var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
20647
20751
  // Context
20648
20752
  var quotePreviewData = react.useContext(SubscriptionsContext).quotePreviewData;
20649
20753
  var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
20650
20754
  if (!selectedPriceList)
20651
20755
  return null;
20652
- return (jsxRuntime.jsx(PlanPickerCheckoutBar, { handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
20756
+ return (jsxRuntime.jsx(PlanPickerCheckoutBar, { editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
20653
20757
  };
20654
20758
  var PlanPickerCheckoutBar = function (_a) {
20655
- var selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
20759
+ var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
20656
20760
  // Context
20657
20761
  var token = useToken();
20658
20762
  var _b = react.useContext(SubscriptionsContext), quotePreviewData = _b.quotePreviewData, upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
20659
20763
  var apiHost = react.useContext(BunnyContext).apiHost;
20660
20764
  // Local state
20661
20765
  var _c = react.useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
20662
- var quoteIdRef = react.useRef();
20663
20766
  // Hooks
20664
20767
  var showSuccessNotification = common.useSuccessNotification();
20665
20768
  var queryClient = reactQuery.useQueryClient();
@@ -20678,15 +20781,16 @@ var PlanPickerCheckoutBar = function (_a) {
20678
20781
  onSuccess: function (subscriptionUpdateData) {
20679
20782
  var _a;
20680
20783
  var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
20681
- quoteIdRef.current = quote.id;
20784
+ setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
20682
20785
  },
20683
20786
  });
20684
20787
  var updateCharge = reactQuery.useMutation({
20685
20788
  mutationFn: quoteChargeUpdate,
20686
20789
  onSuccess: function () {
20687
20790
  queryClient.invalidateQueries({
20688
- queryKey: common.QueryKeyFactory.default.createQuoteKey({
20689
- id: quoteIdRef.current || '',
20791
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
20792
+ objectName: 'editingQuote',
20793
+ id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
20690
20794
  token: token,
20691
20795
  }),
20692
20796
  });
@@ -20694,8 +20798,9 @@ var PlanPickerCheckoutBar = function (_a) {
20694
20798
  }).mutate;
20695
20799
  // Queries
20696
20800
  var quote = reactQuery.useQuery({
20697
- queryKey: common.QueryKeyFactory.default.createQuoteKey({
20698
- id: quoteIdRef.current || '',
20801
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
20802
+ objectName: 'editingQuote',
20803
+ id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
20699
20804
  token: token,
20700
20805
  }),
20701
20806
  queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -20703,11 +20808,11 @@ var PlanPickerCheckoutBar = function (_a) {
20703
20808
  return __generator(this, function (_a) {
20704
20809
  switch (_a.label) {
20705
20810
  case 0:
20706
- if (!quoteIdRef.current) {
20707
- throw new Error('Quote ID is required');
20811
+ if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
20812
+ throw new Error('editingQuote is undefined');
20708
20813
  }
20709
20814
  return [4 /*yield*/, getQuote({
20710
- id: quoteIdRef.current,
20815
+ id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
20711
20816
  token: token,
20712
20817
  apiHost: apiHost,
20713
20818
  })];
@@ -20717,7 +20822,7 @@ var PlanPickerCheckoutBar = function (_a) {
20717
20822
  }
20718
20823
  });
20719
20824
  }); },
20720
- enabled: Boolean(quoteIdRef.current),
20825
+ enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
20721
20826
  }).data;
20722
20827
  react.useEffect(function () {
20723
20828
  if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
@@ -20803,7 +20908,7 @@ var getPriceListChangeOptions = function (_a) {
20803
20908
  var response, priceListChangeOptions;
20804
20909
  return __generator(this, function (_b) {
20805
20910
  switch (_b.label) {
20806
- case 0: return [4 /*yield*/, common.gqlRequest({
20911
+ case 0: return [4 /*yield*/, gqlRequest({
20807
20912
  isInPreviewMode: isInPreviewMode,
20808
20913
  query: PRICE_LIST_CHANGE_OPTIONS_QUERY,
20809
20914
  vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id, productId: productId },
@@ -20945,18 +21050,18 @@ var PriceListCardButton = function (_a) {
20945
21050
  var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
20946
21051
  var createButtonText = function () {
20947
21052
  if (isPriceListCurrentSubscription)
20948
- return "Current";
21053
+ return 'Current';
20949
21054
  if (isSelected)
20950
- return "Selected";
21055
+ return 'Selected';
20951
21056
  if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
20952
- return "Subscribed";
21057
+ return 'Subscribed';
20953
21058
  if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US)
20954
21059
  return priceList.plan.contactUsLabel;
20955
- return "Select";
21060
+ return 'Select';
20956
21061
  };
20957
21062
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end" }, { children: jsxRuntime.jsx(StyledCardButton, __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: disableOnClick, style: {
20958
- maxWidth: "240px",
20959
- }, type: isSelected ? "primary" : "default" }, { children: createButtonText() })) })) })));
21063
+ maxWidth: '240px',
21064
+ }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
20960
21065
  };
20961
21066
  var StyledCardButton = styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"], ["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"])), common.SLATE_200, common.SLATE_600);
20962
21067
  var templateObject_1$3;
@@ -20987,16 +21092,16 @@ var PlanPickerGridCell = function (_a) {
20987
21092
 
20988
21093
  var PriceListCardDesktop = function (_a) {
20989
21094
  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;
20990
- return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 bunny-pb-4 ".concat(disableOnClick ? "" : "cursor-pointer"), onClick: function () {
21095
+ return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 ".concat(disableOnClick ? '' : 'cursor-pointer'), onClick: function () {
20991
21096
  if (!disableOnClick) {
20992
21097
  if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US) {
20993
- window.open(priceList.plan.contactUsUrl, "_blank");
21098
+ window.open(priceList.plan.contactUsUrl, '_blank');
20994
21099
  }
20995
21100
  else
20996
21101
  onClick(priceList);
20997
21102
  }
20998
21103
  }, style: {
20999
- height: "100%",
21104
+ height: '100%',
21000
21105
  } }, { 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 })] })) }));
21001
21106
  };
21002
21107
 
@@ -21364,7 +21469,7 @@ var PlanPicker = function () {
21364
21469
  // Queries
21365
21470
  var _c = reactQuery.useQuery({
21366
21471
  queryKey: common.QueryKeyFactory.default.createTableKey({
21367
- pluralType: "subscriptions",
21472
+ pluralType: 'subscriptions',
21368
21473
  token: token,
21369
21474
  }),
21370
21475
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
@@ -21388,7 +21493,7 @@ var PlanPicker = function () {
21388
21493
  // Handlers
21389
21494
  var onChangePriceList = react.useCallback(function (selectedPriceList) {
21390
21495
  if (isInPreviewMode)
21391
- return showInfoNotification("You are in preview mode");
21496
+ return showInfoNotification('You are in preview mode');
21392
21497
  return setQuotePreviewData({
21393
21498
  priceList: selectedPriceList,
21394
21499
  quantity: calculateNewQuantity(selectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
@@ -21478,6 +21583,12 @@ var PlanManager = function (_a) {
21478
21583
  observer.unobserve(el);
21479
21584
  };
21480
21585
  }, []);
21586
+ function handleSetEditingQuoteData(quoteId, isTrial) {
21587
+ setEditingQuoteData({
21588
+ id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
21589
+ isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial),
21590
+ });
21591
+ }
21481
21592
  // Handlers
21482
21593
  var onSuccess = function () {
21483
21594
  setEditingQuoteData(undefined);
@@ -21506,7 +21617,7 @@ var PlanManager = function (_a) {
21506
21617
  return showInfoNotification('You are in preview mode');
21507
21618
  setQuotePreviewData(undefined);
21508
21619
  onChangePlanCancel();
21509
- }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
21620
+ }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { editingQuote: editingQuoteData, setEditingQuoteData: handleSetEditingQuoteData, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
21510
21621
  };
21511
21622
 
21512
21623
  var useCancelSubscription = function () {
@@ -21547,7 +21658,7 @@ var getFeatureUsage = function (_a) {
21547
21658
  vars = {
21548
21659
  id: subscriptionChargeId,
21549
21660
  };
21550
- return [4 /*yield*/, common.gqlRequest({
21661
+ return [4 /*yield*/, gqlRequest({
21551
21662
  query: FEATURE_USAGE_MUTATION,
21552
21663
  token: token,
21553
21664
  vars: vars,
@@ -21558,7 +21669,7 @@ var getFeatureUsage = function (_a) {
21558
21669
  if ((_b = response.featureUsageHistogram) === null || _b === void 0 ? void 0 : _b.data)
21559
21670
  return [2 /*return*/, response.featureUsageHistogram];
21560
21671
  else
21561
- throw new Error("No data found");
21672
+ throw new Error('No data found');
21562
21673
  }
21563
21674
  });
21564
21675
  });
@@ -21993,7 +22104,7 @@ var quoteChargeCreate = function (_a) {
21993
22104
  var
21994
22105
  // endDate,
21995
22106
  price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
21996
- return common.gqlRequest({
22107
+ return gqlRequest({
21997
22108
  query: QUOTE_CHARGE_CREATE,
21998
22109
  vars: {
21999
22110
  // endDate,
@@ -22225,8 +22336,8 @@ var QuoteChangeSummarySection = function (_a) {
22225
22336
  : openCheckout, disabled: !editingQuoteData, size: isMobile ? "large" : "middle", type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? "Activate Trial" : "Proceed to checkout" })) }))] })));
22226
22337
  };
22227
22338
 
22228
- var QUANTITY_CHANGE_HEADER_TITLE = "Update unit quantity";
22229
- var QUANTITY_CHANGE_HEADER_DESCRIPTION = "Adjust quantities below. The change will take effect immediately after checkout has been completed.";
22339
+ var QUANTITY_CHANGE_HEADER_TITLE = 'Update unit quantity';
22340
+ var QUANTITY_CHANGE_HEADER_DESCRIPTION = 'Adjust quantities below. The change will take effect immediately after checkout has been completed.';
22230
22341
  var QuantityChangeDrawerDesktop = function (_a) {
22231
22342
  var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions;
22232
22343
  var _b = react.useState(open), openLocal = _b[0], setOpenLocal = _b[1];
@@ -22248,22 +22359,22 @@ var QuantityChangeDrawerDesktop = function (_a) {
22248
22359
  return (jsxRuntime.jsxs(antd.Drawer, __assign({ closeIcon: null, destroyOnClose: true, onClose: onClose, open: open, styles: isMobile
22249
22360
  ? {
22250
22361
  body: {
22251
- padding: "1rem",
22252
- overflow: "hidden",
22362
+ padding: '1rem',
22363
+ overflow: 'hidden',
22253
22364
  background: common.SLATE_50,
22254
22365
  },
22255
22366
  wrapper: {
22256
- width: "100vw",
22367
+ width: '100vw',
22257
22368
  },
22258
22369
  }
22259
22370
  : {
22260
22371
  wrapper: {
22261
- minWidth: "600px",
22372
+ minWidth: '600px',
22262
22373
  },
22263
22374
  }, title: jsxRuntime.jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-pb-4", style: {
22264
- gridTemplateColumns: "2fr 1fr 1fr",
22265
- rowGap: "0.75rem",
22266
- columnGap: "1rem",
22375
+ gridTemplateColumns: '2fr 1fr 1fr',
22376
+ rowGap: '0.75rem',
22377
+ columnGap: '1rem',
22267
22378
  } }, { children: [jsxRuntime.jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-py-2" }), subscriptions.map(function (subscription, index) {
22268
22379
  var _a;
22269
22380
  var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
@@ -22271,7 +22382,7 @@ var QuantityChangeDrawerDesktop = function (_a) {
22271
22382
  var _a;
22272
22383
  if ((isTrial && !charge.trial) ||
22273
22384
  (!isTrial && charge.trial) ||
22274
- ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === "USAGE")
22385
+ ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'USAGE')
22275
22386
  return null;
22276
22387
  return (jsxRuntime.jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions }, chargeIndex));
22277
22388
  }) }), index));
@@ -22311,7 +22422,7 @@ var SubscriptionsNavigation = function (_a) {
22311
22422
 
22312
22423
  var Text$1 = antd.Typography.Text;
22313
22424
  var SubscriptionsWrapper = function (_a) {
22314
- var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, _b = _a.isInPreviewMode, isInPreviewMode = _b === void 0 ? false : _b, productId = _a.productId, className = _a.className, _c = _a.styles, userStyles = _c === void 0 ? {} : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.hideExpiredToggle, hideExpiredToggle = _e === void 0 ? false : _e;
22425
+ var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, _b = _a.isInPreviewMode, isInPreviewMode = _b === void 0 ? false : _b, productId = _a.productId, className = _a.className, _c = _a.styles, userStyles = _c === void 0 ? {} : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, hideExpired = _a.hideExpired, _e = _a.hideExpiredToggle, hideExpiredToggle = _e === void 0 ? false : _e;
22315
22426
  var defaultStyles = {
22316
22427
  gap: 4,
22317
22428
  shadow: 'sm',
@@ -22332,6 +22443,7 @@ var SubscriptionsWrapper = function (_a) {
22332
22443
  subscriptionProductNameStyle: styles.subscriptionProductNameStyle,
22333
22444
  productId: productId,
22334
22445
  isInPreviewMode: isInPreviewMode,
22446
+ hideExpired: hideExpired,
22335
22447
  upgradingSubscription: upgradingSubscription,
22336
22448
  setUpgradingSubscription: setUpgradingSubscription,
22337
22449
  updatingChargeQuantityId: updatingChargeQuantityId,
@@ -22347,14 +22459,15 @@ var Subscriptions = function (_a) {
22347
22459
  // Context
22348
22460
  var token = useToken();
22349
22461
  var apiHost = react.useContext(BunnyContext).apiHost;
22350
- var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _b.setSubscriptionUpgradeId, className = _b.className, isInPreviewMode = _b.isInPreviewMode;
22462
+ var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _b.setSubscriptionUpgradeId, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired;
22351
22463
  // Local state
22352
22464
  var _c = react.useState(), editingQuoteData = _c[0], setEditingQuoteData = _c[1];
22353
22465
  var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
22354
- var _e = react.useState(true), hideExpired = _e[0], setHideExpired = _e[1];
22466
+ var _e = react.useState(true), hideExpiredState = _e[0], setHideExpiredState = _e[1];
22355
22467
  var _f = react.useState(false), quantityDrawerOpen = _f[0], setQuantityDrawerOpen = _f[1];
22356
22468
  var _g = react.useState(false), expiredSwitchVisible = _g[0], setExpiredSwitchVisible = _g[1];
22357
22469
  var _h = react.useState(false), isChangingPlan = _h[0], setIsChangingPlan = _h[1];
22470
+ var hideExpired = hideExpiredOverride !== null && hideExpiredOverride !== void 0 ? hideExpiredOverride : hideExpiredState;
22358
22471
  // Hooks
22359
22472
  var queryClient = reactQuery.useQueryClient();
22360
22473
  var showSuccessNotification = common.useSuccessNotification();
@@ -22428,7 +22541,7 @@ var Subscriptions = function (_a) {
22428
22541
  });
22429
22542
  showSuccessNotification('Your plan has been updated', 'Payment successful');
22430
22543
  setPayModalVisible(false);
22431
- setHideExpired(true);
22544
+ setHideExpiredState(true);
22432
22545
  };
22433
22546
  var onCancel = function () {
22434
22547
  setPayModalVisible(false);
@@ -22458,7 +22571,7 @@ var Subscriptions = function (_a) {
22458
22571
  });
22459
22572
  react.useEffect(function () {
22460
22573
  if (allSubscriptionsExpired && subscriptions.length > 0)
22461
- setHideExpired(false);
22574
+ setHideExpiredState(false);
22462
22575
  }, [allSubscriptionsExpired, subscriptions]);
22463
22576
  react.useEffect(function () {
22464
22577
  if (hasExpiredOrCanceledSubscriptions && subscriptions.length > 0)
@@ -22469,7 +22582,7 @@ var Subscriptions = function (_a) {
22469
22582
  setIsChangingPlan(false);
22470
22583
  }, handlePortalErrors: handlePortalErrors }));
22471
22584
  }
22472
- return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod })] })));
22585
+ return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod })] })));
22473
22586
  };
22474
22587
  var PageHeaderWithActions = function (_a) {
22475
22588
  var children = _a.children, title = _a.title;
@@ -22494,7 +22607,7 @@ var billingDetailsUpdate = function (_a) {
22494
22607
  switch (_c.label) {
22495
22608
  case 0:
22496
22609
  vars = { attributes: attributes };
22497
- return [4 /*yield*/, common.gqlRequest({
22610
+ return [4 /*yield*/, gqlRequest({
22498
22611
  query: MUTATION,
22499
22612
  token: token,
22500
22613
  vars: vars,
@@ -22522,7 +22635,7 @@ var getBillingDetails = function (_a) {
22522
22635
  var _b;
22523
22636
  return __generator(this, function (_c) {
22524
22637
  switch (_c.label) {
22525
- case 0: return [4 /*yield*/, common.gqlRequest({
22638
+ case 0: return [4 /*yield*/, gqlRequest({
22526
22639
  query: billingDetailsQuery(),
22527
22640
  token: token,
22528
22641
  apiHost: apiHost,