@bunnyapp/components 1.0.62 → 1.0.64-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/dist/cjs/index.js +799 -355
  2. package/dist/cjs/src/components/CustomizedAntdComponents/Tag.d.ts +3 -1
  3. package/dist/cjs/src/components/DocumentTemplatePreview.d.ts +4 -0
  4. package/dist/cjs/src/components/Invoice/InvoiceQuoteView.d.ts +2 -1
  5. package/dist/cjs/src/components/PaymentForm/CheckoutFooter.d.ts +7 -2
  6. package/dist/cjs/src/components/PaymentForm/DemoPay/hooks/useApproveHold.d.ts +13 -0
  7. package/dist/cjs/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +1 -1
  8. package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +6 -1
  9. package/dist/cjs/src/components/PaymentForm/Stripe/hooks/useApproveHold.d.ts +13 -0
  10. package/dist/cjs/src/components/PaymentForm/Stripe/stripeUtils.d.ts +9 -2
  11. package/dist/cjs/src/components/Quote/AcceptQuoteModal.d.ts +2 -1
  12. package/dist/cjs/src/components/Quote/PaymentHoldModal.d.ts +7 -0
  13. package/dist/cjs/src/components/Quote/Quote.stories.d.ts +70 -116
  14. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/NextPriceListButton.d.ts +2 -2
  15. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts +1 -1
  16. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +1 -1
  17. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +1 -1
  18. package/dist/cjs/src/components/Subscriptions/SubscriptionsListContainer.d.ts +2 -2
  19. package/dist/cjs/src/components/Subscriptions/TieredDisplayDropdown.d.ts +8 -0
  20. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionChargeTotal.d.ts +1 -1
  21. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionChargeUnitPrice.d.ts +3 -3
  22. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +1 -1
  23. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionCardMobile/SubscriptionCardMobile.d.ts +1 -1
  24. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +7 -4
  25. package/dist/cjs/src/enums/BillingPeriodConverter.d.ts +8 -0
  26. package/dist/cjs/src/graphql/queries/getQuoteFirstInvoice.d.ts +7 -0
  27. package/dist/cjs/src/graphql/queries/getTransactions.d.ts +1 -1
  28. package/dist/cjs/src/hooks/quotes/useSendAcceptQuote.d.ts +3 -2
  29. package/dist/cjs/src/hooks/usePlugins.d.ts +1 -1
  30. package/dist/cjs/src/mocks/handlers.d.ts +1 -1
  31. package/dist/cjs/src/styles/AntdOverrides.d.ts +3 -0
  32. package/dist/cjs/src/styles/constants.d.ts +4 -0
  33. package/dist/cjs/src/utils/stringUtils.d.ts +1 -0
  34. package/dist/esm/index.js +802 -359
  35. package/dist/esm/src/components/CustomizedAntdComponents/Tag.d.ts +3 -1
  36. package/dist/esm/src/components/DocumentTemplatePreview.d.ts +4 -0
  37. package/dist/esm/src/components/Invoice/InvoiceQuoteView.d.ts +2 -1
  38. package/dist/esm/src/components/PaymentForm/CheckoutFooter.d.ts +7 -2
  39. package/dist/esm/src/components/PaymentForm/DemoPay/hooks/useApproveHold.d.ts +13 -0
  40. package/dist/esm/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +1 -1
  41. package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +6 -1
  42. package/dist/esm/src/components/PaymentForm/Stripe/hooks/useApproveHold.d.ts +13 -0
  43. package/dist/esm/src/components/PaymentForm/Stripe/stripeUtils.d.ts +9 -2
  44. package/dist/esm/src/components/Quote/AcceptQuoteModal.d.ts +2 -1
  45. package/dist/esm/src/components/Quote/PaymentHoldModal.d.ts +7 -0
  46. package/dist/esm/src/components/Quote/Quote.stories.d.ts +70 -116
  47. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/NextPriceListButton.d.ts +2 -2
  48. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts +1 -1
  49. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +1 -1
  50. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +1 -1
  51. package/dist/esm/src/components/Subscriptions/SubscriptionsListContainer.d.ts +2 -2
  52. package/dist/esm/src/components/Subscriptions/TieredDisplayDropdown.d.ts +8 -0
  53. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionChargeTotal.d.ts +1 -1
  54. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionChargeUnitPrice.d.ts +3 -3
  55. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +1 -1
  56. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionCardMobile/SubscriptionCardMobile.d.ts +1 -1
  57. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +7 -4
  58. package/dist/esm/src/enums/BillingPeriodConverter.d.ts +8 -0
  59. package/dist/esm/src/graphql/queries/getQuoteFirstInvoice.d.ts +7 -0
  60. package/dist/esm/src/graphql/queries/getTransactions.d.ts +1 -1
  61. package/dist/esm/src/hooks/quotes/useSendAcceptQuote.d.ts +3 -2
  62. package/dist/esm/src/hooks/usePlugins.d.ts +1 -1
  63. package/dist/esm/src/mocks/handlers.d.ts +1 -1
  64. package/dist/esm/src/styles/AntdOverrides.d.ts +3 -0
  65. package/dist/esm/src/styles/constants.d.ts +4 -0
  66. package/dist/esm/src/utils/stringUtils.d.ts +1 -0
  67. package/dist/index.d.ts +6 -1
  68. package/package.json +3 -2
  69. package/dist/cjs/src/graphql/queries/getPlanChangeOptions.d.ts +0 -8
  70. package/dist/esm/src/graphql/queries/getPlanChangeOptions.d.ts +0 -8
package/dist/cjs/index.js CHANGED
@@ -15,6 +15,7 @@ var recoil = require('recoil');
15
15
  var request = require('graphql-request');
16
16
  var reactStripeJs = require('@stripe/react-stripe-js');
17
17
  var index_js = require('@stripe/stripe-js/pure/index.js');
18
+ var parse = require('html-react-parser');
18
19
  var reactFontawesome = require('@fortawesome/react-fontawesome');
19
20
  var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
20
21
  var recharts = require('recharts');
@@ -44,6 +45,7 @@ function _interopNamespace(e) {
44
45
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
45
46
  var theme__default = /*#__PURE__*/_interopDefaultLegacy(theme);
46
47
  var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
48
+ var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
47
49
  var pkg__default = /*#__PURE__*/_interopDefaultLegacy(pkg);
48
50
 
49
51
  function styleInject(css, ref) {
@@ -73,7 +75,7 @@ function styleInject(css, ref) {
73
75
  }
74
76
  }
75
77
 
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";
78
+ var css_248z = ":root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n box-sizing: border-box;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n position: fixed;\n}\n.bunny-absolute {\n position: absolute;\n}\n.bunny-relative {\n position: relative;\n}\n.bunny-sticky {\n position: sticky;\n}\n.bunny-bottom-0 {\n bottom: 0px;\n}\n.bunny-bottom-4 {\n bottom: 1rem;\n}\n.bunny-left-0 {\n left: 0px;\n}\n.bunny-right-0 {\n right: 0px;\n}\n.bunny-top-0 {\n top: 0px;\n}\n.bunny-col-span-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-0 {\n margin-top: 0px;\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.mr-4 {\n margin-right: 1rem;\n}\n.mb-0 {\n margin-bottom: 0px;\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.whitespace-pre-wrap {\n white-space: pre-wrap;\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.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-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.bg-red-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 113 113 / 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-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / 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.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@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
79
  styleInject(css_248z);
78
80
 
79
81
  /******************************************************************************
@@ -171,18 +173,11 @@ var BrandContext = react.createContext({
171
173
  });
172
174
 
173
175
  // This will be replaced at build time by rollup-plugin-replace
174
- var PACKAGE_VERSION = '1.0.61';
176
+ var PACKAGE_VERSION = '1.0.64-beta.2';
175
177
  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
- }
178
+ var headers = common.createClientDevHeaders(token);
179
+ // Add the components version header
180
+ headers[common.X_BUNNY_COMPONENTS_VERSION_HEADER_NAME] = PACKAGE_VERSION;
186
181
  return headers;
187
182
  };
188
183
  var getGraphQLBaseURL = function (apiHost) {
@@ -252,6 +247,14 @@ var createGraphQLClient = function (apiHost, token) {
252
247
  });
253
248
  };
254
249
 
250
+ var BLUE_GRAY_HEX = '#717D94';
251
+ var CHARCOAL_GRAY = '#232323';
252
+ var PRIMARY_COLOR = '#FF5833';
253
+ var SECONDARY_SUCCESS_COLOR = '#00B76A';
254
+
255
+ var AntdOverrides = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n && .ant-popover {\n z-index: 1050;\n }\n && .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n\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\n && .ant-btn-link:disabled {\n color: ", ";\n }\n && .ant-btn-link:disabled:hover {\n background-color: transparent;\n }\n\n && .ant-notification {\n width: min-content;\n }\n && .ant-notification-topRight {\n right: 0;\n left: 0;\n margin-left: auto;\n margin-right: auto;\n }\n && .ant-notification-notice-wrapper {\n width: 350px;\n overflow: hidden;\n }\n && .ant-notification-notice {\n padding: 16px;\n width: 350px;\n\n display: flex;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08),\n 0px 3px 5px rgba(0, 0, 0, 0.16);\n }\n\n && .ant-notification-notice-description {\n padding: 0 14px 0 0;\n color: ", ";\n font-size: 14px;\n overflow-wrap: break-word;\n }\n\n && .ant-notification-notice-success {\n background-color: #edfffa;\n }\n && .ant-notification-notice-error {\n background-color: #fff8f4;\n }\n && .ant-notification-notice-error .ant-notification-notice-message {\n color: ", ";\n font-weight: 500;\n }\n && .ant-notification-notice-error .ant-notification-notice-icon {\n color: ", ";\n }\n\n && .ant-notification-notice-success .ant-notification-notice-message {\n color: ", ";\n font-weight: 500;\n }\n && .ant-notification-notice-success .ant-notification-notice-icon {\n color: ", ";\n }\n\n && .ant-notification-notice-message {\n margin-bottom: 0;\n }\n\n && .ant-notification-notice-close {\n top: 16px;\n right: 16px;\n }\n\n && .ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex;\n align-items: center;\n }\n && .ant-menu-submenu::after {\n display: none;\n }\n"], ["\n && .ant-popover {\n z-index: 1050;\n }\n && .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n\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\n && .ant-btn-link:disabled {\n color: ", ";\n }\n && .ant-btn-link:disabled:hover {\n background-color: transparent;\n }\n\n && .ant-notification {\n width: min-content;\n }\n && .ant-notification-topRight {\n right: 0;\n left: 0;\n margin-left: auto;\n margin-right: auto;\n }\n && .ant-notification-notice-wrapper {\n width: 350px;\n overflow: hidden;\n }\n && .ant-notification-notice {\n padding: 16px;\n width: 350px;\n\n display: flex;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08),\n 0px 3px 5px rgba(0, 0, 0, 0.16);\n }\n\n && .ant-notification-notice-description {\n padding: 0 14px 0 0;\n color: ", ";\n font-size: 14px;\n overflow-wrap: break-word;\n }\n\n && .ant-notification-notice-success {\n background-color: #edfffa;\n }\n && .ant-notification-notice-error {\n background-color: #fff8f4;\n }\n && .ant-notification-notice-error .ant-notification-notice-message {\n color: ", ";\n font-weight: 500;\n }\n && .ant-notification-notice-error .ant-notification-notice-icon {\n color: ", ";\n }\n\n && .ant-notification-notice-success .ant-notification-notice-message {\n color: ", ";\n font-weight: 500;\n }\n && .ant-notification-notice-success .ant-notification-notice-icon {\n color: ", ";\n }\n\n && .ant-notification-notice-message {\n margin-bottom: 0;\n }\n\n && .ant-notification-notice-close {\n top: 16px;\n right: 16px;\n }\n\n && .ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex;\n align-items: center;\n }\n && .ant-menu-submenu::after {\n display: none;\n }\n"])), BLUE_GRAY_HEX, CHARCOAL_GRAY, PRIMARY_COLOR, PRIMARY_COLOR, SECONDARY_SUCCESS_COLOR, SECONDARY_SUCCESS_COLOR);
256
+ var templateObject_1$d;
257
+
255
258
  var BunnyContext = react.createContext({});
256
259
  var extraQueryClient = new reactQuery.QueryClient();
257
260
  // Every component shares similar props and functionality, which this wrapper handles.
@@ -273,7 +276,7 @@ function BunnyProvider(_a) {
273
276
  apiHost: apiHost,
274
277
  token: token,
275
278
  onTokenExpired: onTokenExpired,
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 })) })) })) })));
279
+ } }, { children: jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsxRuntime.jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children: jsxRuntime.jsx(AntdOverrides, __assign({ className: "bunny-component-wrapper" }, { children: children })) })) })) })));
277
280
  }
278
281
  function ContextualWrapper(_a) {
279
282
  var children = _a.children, darkMode = _a.darkMode, configProviderProps = _a.configProviderProps;
@@ -342,18 +345,15 @@ var useAjax = function (onError) {
342
345
  case 0: return [4 /*yield*/, fetch(url, {
343
346
  method: method,
344
347
  body: bodyData,
345
- headers: {
346
- "Content-type": "application/json; charset=utf-8",
347
- Authorization: "Bearer ".concat(token),
348
- },
348
+ headers: common.createClientDevHeaders(token),
349
349
  })];
350
350
  case 1:
351
351
  response = _a.sent();
352
352
  if (response.status !== 200 && response.status !== 201) {
353
353
  return [2 /*return*/, response.json().then(function (data) {
354
354
  if (response.status === 401) {
355
- console.error("expired token");
356
- onError === null || onError === void 0 ? void 0 : onError("expired token");
355
+ console.error('expired token');
356
+ onError === null || onError === void 0 ? void 0 : onError('expired token');
357
357
  }
358
358
  else {
359
359
  throw new Error(data === null || data === void 0 ? void 0 : data.message);
@@ -369,7 +369,7 @@ var useAjax = function (onError) {
369
369
  var useDownloadFile = function (id, onError) {
370
370
  var ajax = useAjax(onError);
371
371
  return function (url, token) {
372
- return ajax(url + (id ? "?id=".concat(id) : ""), "GET", function (rsp) { return __awaiter(void 0, void 0, void 0, function () {
372
+ return ajax(url + (id ? "?id=".concat(id) : ''), 'GET', function (rsp) { return __awaiter(void 0, void 0, void 0, function () {
373
373
  var blob, file, contentDisposition, anchor, filenameRegex, matches;
374
374
  return __generator(this, function (_a) {
375
375
  switch (_a.label) {
@@ -377,15 +377,14 @@ var useDownloadFile = function (id, onError) {
377
377
  case 1:
378
378
  blob = _a.sent();
379
379
  file = window.URL.createObjectURL(blob);
380
- contentDisposition = rsp.headers.get("content-disposition");
381
- anchor = document.createElement("a");
380
+ contentDisposition = rsp.headers.get('content-disposition');
381
+ anchor = document.createElement('a');
382
382
  anchor.href = file;
383
- if (contentDisposition &&
384
- contentDisposition.indexOf("attachment") !== -1) {
383
+ if (contentDisposition && contentDisposition.indexOf('attachment') !== -1) {
385
384
  filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
386
385
  matches = filenameRegex.exec(contentDisposition);
387
386
  if (matches != null && matches[1]) {
388
- anchor.setAttribute("download", matches[1].replace(/['"]/g, ""));
387
+ anchor.setAttribute('download', matches[1].replace(/['"]/g, ''));
389
388
  }
390
389
  }
391
390
  anchor.click();
@@ -408,9 +407,59 @@ function useToken() {
408
407
  return overrideToken || tokenFromContext;
409
408
  }
410
409
 
411
- var MarkupContainer = defaultStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
410
+ var DocumentTemplatePreview = function (_a) {
411
+ var targetUrl = _a.targetUrl;
412
+ var _b = react.useState(null), pdfUrl = _b[0], setPdfUrl = _b[1];
413
+ var queryClient = reactQuery.useQueryClient();
414
+ var queryKey = react.useMemo(function () { return ['documentTemplatePreview', targetUrl]; }, [targetUrl]);
415
+ // Clear previous data when component mounts or id changes
416
+ react.useEffect(function () {
417
+ // Remove any existing data for this query
418
+ queryClient.removeQueries({ queryKey: queryKey });
419
+ }, [queryClient, queryKey]);
420
+ var _c = reactQuery.useQuery({
421
+ queryKey: queryKey,
422
+ queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
423
+ var response, blob;
424
+ return __generator(this, function (_a) {
425
+ switch (_a.label) {
426
+ case 0: return [4 /*yield*/, fetch(targetUrl)];
427
+ case 1:
428
+ response = _a.sent();
429
+ if (!response.ok) {
430
+ throw new Error('Failed to fetch PDF');
431
+ }
432
+ return [4 /*yield*/, response.blob()];
433
+ case 2:
434
+ blob = _a.sent();
435
+ return [2 /*return*/, blob];
436
+ }
437
+ });
438
+ }); },
439
+ enabled: !!targetUrl,
440
+ }), data = _c.data, isLoading = _c.isLoading;
441
+ react.useEffect(function () {
442
+ if (data) {
443
+ var url_1 = URL.createObjectURL(data);
444
+ setPdfUrl(url_1);
445
+ // Cleanup function to revoke the object URL
446
+ return function () {
447
+ URL.revokeObjectURL(url_1);
448
+ };
449
+ }
450
+ }, [data]);
451
+ if (isLoading) {
452
+ return (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center h-96" }, { children: jsxRuntime.jsx(antd.Spin, {}) })));
453
+ }
454
+ if (!pdfUrl) {
455
+ return jsxRuntime.jsx(jsxRuntime.Fragment, {});
456
+ }
457
+ return (jsxRuntime.jsx("div", __assign({ className: "document-template-preview max-w-[1280px] mx-auto bg-white rounded p-4" }, { children: jsxRuntime.jsx("iframe", { src: pdfUrl, width: "100%", height: "800px", style: { border: 'none' }, title: "Document Template Preview" }) })));
458
+ };
459
+
460
+ var MarkupContainer = defaultStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
412
461
  var InvoiceQuoteView = function (_a) {
413
- var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError;
462
+ var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError, targetUrl = _a.targetUrl;
414
463
  var downloadFile = useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
415
464
  var secondaryColor = react.useContext(BrandContext).secondaryColor;
416
465
  var apiHost = react.useContext(BunnyContext).apiHost;
@@ -422,11 +471,11 @@ var InvoiceQuoteView = function (_a) {
422
471
  color: secondaryColor,
423
472
  }, type: "link" }, { children: backButtonName || 'Back' }))) : null }), !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
424
473
  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: {
474
+ } }, { 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: [targetUrl ? (jsxRuntime.jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (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
475
  minWidth: '750px',
427
- } }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] })))] })));
476
+ } }, { children: [targetUrl ? (jsxRuntime.jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsxRuntime.jsx(interweave.Markup, { content: html })), children] })))] })));
428
477
  };
429
- var templateObject_1$b;
478
+ var templateObject_1$c;
430
479
 
431
480
  var fetchPDF = function (apiHost, documentUuid, documentType, token) { return __awaiter(void 0, void 0, void 0, function () {
432
481
  var response;
@@ -437,9 +486,7 @@ var fetchPDF = function (apiHost, documentUuid, documentType, token) { return __
437
486
  throw new Error('Invoice ID is required to fetch PDF');
438
487
  }
439
488
  return [4 /*yield*/, fetch("".concat(apiHost, "/api/legacy_documents/").concat(documentUuid, "?type=").concat(documentType), {
440
- headers: {
441
- Authorization: "Bearer ".concat(token),
442
- },
489
+ headers: common.createClientDevHeaders(token),
443
490
  })];
444
491
  case 1:
445
492
  response = _a.sent();
@@ -566,7 +613,7 @@ var usePaymentPlugins = function (_a) {
566
613
  };
567
614
 
568
615
  var getQuoteAmountDue = function (quote) {
569
- return quote.amountDue;
616
+ return quote.amountDue || quote.amount;
570
617
  };
571
618
 
572
619
  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";
@@ -651,6 +698,212 @@ function usePay$1(_a) {
651
698
  return { pay: pay };
652
699
  }
653
700
 
701
+ var createPaymentMethod = function (_a) {
702
+ var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
703
+ return __awaiter(void 0, void 0, void 0, function () {
704
+ var response;
705
+ return __generator(this, function (_b) {
706
+ switch (_b.label) {
707
+ case 0: return [4 /*yield*/, common.invokePlugin({
708
+ plugin: plugin,
709
+ method: 'store_payment_method',
710
+ payload: {
711
+ payment_method_id: paymentMethodId,
712
+ account_id: accountId,
713
+ },
714
+ token: token,
715
+ apiHost: apiHost,
716
+ })];
717
+ case 1:
718
+ response = _b.sent();
719
+ if (response.status !== 'success')
720
+ throw new Error(response.message || 'Unknown error');
721
+ return [2 /*return*/, response];
722
+ }
723
+ });
724
+ });
725
+ };
726
+ var createSetupIntent = function (plugin, apiHost, token, accountId) {
727
+ return common.invokePlugin({
728
+ plugin: plugin,
729
+ method: 'create_setup_intent',
730
+ token: token,
731
+ apiHost: apiHost,
732
+ payload: {
733
+ account_id: accountId,
734
+ },
735
+ });
736
+ };
737
+ var createPaymentHold = function (_a) {
738
+ var quote = _a.quote, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, paymentMethodId = _a.paymentMethodId;
739
+ return __awaiter(void 0, void 0, void 0, function () {
740
+ var payload, response;
741
+ return __generator(this, function (_b) {
742
+ switch (_b.label) {
743
+ case 0:
744
+ payload = {
745
+ quote_id: quote.id,
746
+ amount: quote.amount,
747
+ payment_method_id: paymentMethodId,
748
+ };
749
+ return [4 /*yield*/, common.invokePlugin({
750
+ plugin: plugin,
751
+ method: 'create_payment_hold',
752
+ payload: payload,
753
+ token: token,
754
+ apiHost: apiHost,
755
+ })];
756
+ case 1:
757
+ response = _b.sent();
758
+ if (response.status !== 'success')
759
+ throw new Error(response.message || 'Unknown error');
760
+ return [2 /*return*/, response];
761
+ }
762
+ });
763
+ });
764
+ };
765
+ var fetchStripeKey = function (plugin, apiHost, token, accountId) { return __awaiter(void 0, void 0, void 0, function () {
766
+ var response;
767
+ return __generator(this, function (_a) {
768
+ switch (_a.label) {
769
+ case 0: return [4 /*yield*/, common.invokePlugin({
770
+ plugin: plugin,
771
+ method: 'retrieve_config',
772
+ token: token,
773
+ apiHost: apiHost,
774
+ payload: {
775
+ account_id: accountId,
776
+ },
777
+ })];
778
+ case 1:
779
+ response = _a.sent();
780
+ return [2 /*return*/, response];
781
+ }
782
+ });
783
+ }); };
784
+ index_js.loadStripe.setLoadParameters({ advancedFraudSignals: false });
785
+ var useStripePlugin = function (plugin, apiHost, currencyId, token, accountId) {
786
+ var _a = react.useState(null), stripe = _a[0], setStripe = _a[1];
787
+ var showErrorNotification = common.useErrorNotification();
788
+ var options = {
789
+ mode: 'setup',
790
+ currency: currencyId,
791
+ setupFutureUsage: 'off_session',
792
+ };
793
+ react.useEffect(function () {
794
+ var _a, _b;
795
+ if (!plugin)
796
+ return;
797
+ if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== 'StripePayment')
798
+ return;
799
+ fetchStripeKey(plugin, apiHost || '', token, accountId)
800
+ .then(function (_a) {
801
+ var payload = _a.payload;
802
+ return index_js.loadStripe(payload.publishable_key).then(setStripe);
803
+ })
804
+ .catch(function (error) {
805
+ console.error('Caught Error in fetching stripe key: ', error);
806
+ showErrorNotification(error.message, 'Unexpected Error fetching key');
807
+ });
808
+ // eslint-disable-next-line
809
+ }, [plugin, token]);
810
+ return { stripe: stripe, options: options };
811
+ };
812
+
813
+ function useApproveHold$1(_a) {
814
+ var _this = this;
815
+ var onApproveHoldSuccess = _a.onApproveHoldSuccess, onApproveHoldError = _a.onApproveHoldError;
816
+ // Hooks
817
+ var _b = react.useState(false), isSaving = _b[0], setIsSaving = _b[1];
818
+ var apiHost = react.useContext(BunnyContext).apiHost;
819
+ var token = useToken();
820
+ var approveHold = function (_a) {
821
+ var plugin = _a.plugin, quote = _a.quote, paymentMethodId = _a.paymentMethodId;
822
+ return __awaiter(_this, void 0, void 0, function () {
823
+ var response, error_1;
824
+ return __generator(this, function (_b) {
825
+ switch (_b.label) {
826
+ case 0:
827
+ _b.trys.push([0, 2, 3, 4]);
828
+ if (!token)
829
+ throw new Error("Token couldn't be retrieved");
830
+ setIsSaving(true);
831
+ return [4 /*yield*/, createPaymentHold({
832
+ quote: quote,
833
+ plugin: plugin,
834
+ token: token,
835
+ apiHost: apiHost,
836
+ paymentMethodId: paymentMethodId,
837
+ })];
838
+ case 1:
839
+ response = _b.sent();
840
+ if (response.status !== 'success')
841
+ throw new Error(response === null || response === void 0 ? void 0 : response.message);
842
+ onApproveHoldSuccess === null || onApproveHoldSuccess === void 0 ? void 0 : onApproveHoldSuccess(response);
843
+ return [3 /*break*/, 4];
844
+ case 2:
845
+ error_1 = _b.sent();
846
+ console.error(error_1);
847
+ onApproveHoldError === null || onApproveHoldError === void 0 ? void 0 : onApproveHoldError(error_1);
848
+ return [3 /*break*/, 4];
849
+ case 3:
850
+ setIsSaving(false);
851
+ return [7 /*endfinally*/];
852
+ case 4: return [2 /*return*/];
853
+ }
854
+ });
855
+ });
856
+ };
857
+ return { approveHold: approveHold, isSaving: isSaving };
858
+ }
859
+
860
+ function useApproveHold(_a) {
861
+ var _this = this;
862
+ var onApproveHoldSuccess = _a.onApproveHoldSuccess, onApproveHoldError = _a.onApproveHoldError;
863
+ // Hooks
864
+ var _b = react.useState(false), isSaving = _b[0], setIsSaving = _b[1];
865
+ var apiHost = react.useContext(BunnyContext).apiHost;
866
+ var token = useToken();
867
+ var approveHold = function (_a) {
868
+ var plugin = _a.plugin, quote = _a.quote, paymentMethodId = _a.paymentMethodId;
869
+ return __awaiter(_this, void 0, void 0, function () {
870
+ var response, error_1;
871
+ return __generator(this, function (_b) {
872
+ switch (_b.label) {
873
+ case 0:
874
+ _b.trys.push([0, 2, 3, 4]);
875
+ if (!token)
876
+ throw new Error("Token couldn't be retrieved");
877
+ setIsSaving(true);
878
+ return [4 /*yield*/, createPaymentHold({
879
+ quote: quote,
880
+ plugin: plugin,
881
+ token: token,
882
+ apiHost: apiHost,
883
+ paymentMethodId: paymentMethodId,
884
+ })];
885
+ case 1:
886
+ response = _b.sent();
887
+ if (response.status !== 'success')
888
+ throw new Error(response === null || response === void 0 ? void 0 : response.message);
889
+ onApproveHoldSuccess === null || onApproveHoldSuccess === void 0 ? void 0 : onApproveHoldSuccess(response);
890
+ return [3 /*break*/, 4];
891
+ case 2:
892
+ error_1 = _b.sent();
893
+ console.error(error_1);
894
+ onApproveHoldError === null || onApproveHoldError === void 0 ? void 0 : onApproveHoldError(error_1);
895
+ return [3 /*break*/, 4];
896
+ case 3:
897
+ setIsSaving(false);
898
+ return [7 /*endfinally*/];
899
+ case 4: return [2 /*return*/];
900
+ }
901
+ });
902
+ });
903
+ };
904
+ return { approveHold: approveHold, isSaving: isSaving };
905
+ }
906
+
654
907
  function usePay(_a) {
655
908
  var _this = this;
656
909
  var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice, storedPaymentMethod = _a.storedPaymentMethod, plugin = _a.plugin;
@@ -694,8 +947,9 @@ function usePay(_a) {
694
947
  }
695
948
 
696
949
  var handleAllErrorFormats = common.useAllErrorFormats();
950
+ var showErrorNotification$2 = common.useErrorNotification();
697
951
  var ActualCheckoutFooter = function (_a) {
698
- var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess; _a.noPadding; var plugin = _a.plugin;
952
+ var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, noPadding = _a.noPadding, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
699
953
  var isMobile = common.useIsMobile();
700
954
  var _b = react.useState(false), isPaying = _b[0], setIsPaying = _b[1];
701
955
  var defaultPaymentMethod = react.useContext(PaymentContext).defaultPaymentMethod;
@@ -724,6 +978,70 @@ var ActualCheckoutFooter = function (_a) {
724
978
  storedPaymentMethod: defaultPaymentMethod,
725
979
  plugin: plugin,
726
980
  }).pay;
981
+ // Approve hold hooks
982
+ var approveHoldStripe = useApproveHold$1({
983
+ onApproveHoldSuccess: function (response) {
984
+ onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
985
+ },
986
+ onApproveHoldError: function (error) {
987
+ setIsPaying(false);
988
+ handleAllErrorFormats(error);
989
+ },
990
+ }).approveHold;
991
+ var approveHoldDemoPay = useApproveHold({
992
+ onApproveHoldSuccess: function (response) {
993
+ onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
994
+ },
995
+ onApproveHoldError: function (error) {
996
+ setIsPaying(false);
997
+ handleAllErrorFormats(error);
998
+ },
999
+ }).approveHold;
1000
+ var handleApproveHold = function () { return __awaiter(void 0, void 0, void 0, function () {
1001
+ var _a;
1002
+ var _b, _c, _d, _e;
1003
+ return __generator(this, function (_f) {
1004
+ switch (_f.label) {
1005
+ case 0:
1006
+ if (!plugin)
1007
+ return [2 /*return*/, console.error('plugin is undefined')];
1008
+ if (!quote)
1009
+ return [2 /*return*/, console.error('quote is undefined')];
1010
+ if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id))
1011
+ return [2 /*return*/, console.error('defaultPaymentMethod is undefined')];
1012
+ _a = (_c = (_b = plugin.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name;
1013
+ switch (_a) {
1014
+ case 'StripePayment': return [3 /*break*/, 1];
1015
+ case 'DemoPayPayment': return [3 /*break*/, 3];
1016
+ }
1017
+ return [3 /*break*/, 5];
1018
+ case 1:
1019
+ setIsPaying(true);
1020
+ return [4 /*yield*/, approveHoldStripe({
1021
+ plugin: plugin,
1022
+ quote: quote,
1023
+ paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
1024
+ })];
1025
+ case 2:
1026
+ _f.sent();
1027
+ return [3 /*break*/, 6];
1028
+ case 3:
1029
+ setIsPaying(true);
1030
+ return [4 /*yield*/, approveHoldDemoPay({
1031
+ plugin: plugin,
1032
+ quote: quote,
1033
+ paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
1034
+ })];
1035
+ case 4:
1036
+ _f.sent();
1037
+ return [3 /*break*/, 6];
1038
+ case 5:
1039
+ showErrorNotification$2("Payment holds are not supported by ".concat((_e = (_d = plugin.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name));
1040
+ return [3 /*break*/, 6];
1041
+ case 6: return [2 /*return*/];
1042
+ }
1043
+ });
1044
+ }); };
727
1045
  var handlePaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
728
1046
  var _a;
729
1047
  var _b, _c;
@@ -752,16 +1070,21 @@ var ActualCheckoutFooter = function (_a) {
752
1070
  }
753
1071
  });
754
1072
  }); };
1073
+ if (paymentHoldOptions === null || paymentHoldOptions === void 0 ? void 0 : paymentHoldOptions.payToAccept) {
1074
+ return (jsxRuntime.jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? '' : '') }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isPaying, onClick: function () {
1075
+ handleApproveHold();
1076
+ }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Approving hold for' : 'Approve hold for', " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : '') })) })));
1077
+ }
755
1078
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-gap-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: isPaying, onClick: function () {
756
1079
  setIsPaying(true);
757
1080
  handlePaymentSubmit();
758
1081
  }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Paying' : 'Pay', " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : '') })) })));
759
1082
  };
760
1083
  var CheckoutFooter = function (_a) {
761
- var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, noPadding = _a.noPadding, plugin = _a.plugin;
1084
+ var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, noPadding = _a.noPadding, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
762
1085
  if (!plugin)
763
1086
  return null;
764
- return (jsxRuntime.jsx(ActualCheckoutFooter, { plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, noPadding: noPadding }));
1087
+ return (jsxRuntime.jsx(ActualCheckoutFooter, { paymentHoldOptions: paymentHoldOptions, plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, noPadding: noPadding }));
765
1088
  };
766
1089
 
767
1090
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -18008,31 +18331,31 @@ var Card = function (_a) {
18008
18331
  };
18009
18332
 
18010
18333
  var tagStyleMap = {
18011
- blue: { color: "var(--bunny-blue-500)", background: "var(--bunny-blue-200)" },
18334
+ blue: { color: 'var(--bunny-blue-500)', background: 'var(--bunny-blue-200)' },
18012
18335
  green: {
18013
- color: "var(--bunny-green-600)",
18014
- background: "var(--bunny-green-200)",
18336
+ color: 'var(--bunny-green-600)',
18337
+ background: 'var(--bunny-green-200)',
18015
18338
  },
18016
- red: { color: "var(--bunny-red-500)", background: "var(--bunny-red-200)" },
18339
+ red: { color: 'var(--bunny-red-500)', background: 'var(--bunny-red-200)' },
18017
18340
  orange: {
18018
- color: "var(--bunny-orange-500)",
18019
- background: "var(--bunny-orange-200)",
18341
+ color: 'var(--bunny-orange-500)',
18342
+ background: 'var(--bunny-orange-200)',
18020
18343
  },
18021
18344
  yellow: {
18022
- color: "var(--bunny-yellow-500)",
18023
- background: "var(--bunny-yellow-200)",
18345
+ color: 'var(--bunny-yellow-500)',
18346
+ background: 'var(--bunny-yellow-200)',
18024
18347
  },
18025
18348
  purple: {
18026
- color: "var(--bunny-purple-500)",
18027
- background: "var(--bunny-purple-200)",
18349
+ color: 'var(--bunny-purple-500)',
18350
+ background: 'var(--bunny-purple-200)',
18028
18351
  },
18029
- black: { color: "white", background: "var(--bunny-black)" },
18352
+ black: { color: 'white', background: 'var(--bunny-black)' },
18030
18353
  };
18031
18354
  // This component provides custom styling for antd Tag components without using antd overwrites.
18032
18355
  // Please use this component instead of the antd Tag component directly to maintain consistent styling.
18033
18356
  var CustomizedTag = function (_a) {
18034
- var children = _a.children, color = _a.color, className = _a.className;
18035
- return (jsxRuntime.jsx(antd.Tag, __assign({ color: color, style: color ? tagStyleMap[color] : undefined, className: "bunny-m-0 bunny-font-medium bunny-rounded-full bunny-border-none bunny-whitespace-nowrap ".concat(className) }, { children: children })));
18357
+ var children = _a.children, color = _a.color, className = _a.className, style = _a.style;
18358
+ return (jsxRuntime.jsx(antd.Tag, __assign({ color: color, style: __assign(__assign({}, (color ? tagStyleMap[color] : undefined)), style), className: "bunny-m-0 bunny-font-medium bunny-rounded-full bunny-border-none bunny-whitespace-nowrap ".concat(className) }, { children: children })));
18036
18359
  };
18037
18360
 
18038
18361
  var Amex = function (_a) {
@@ -18085,7 +18408,7 @@ var Visa = function (_a) {
18085
18408
  return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "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" })] })));
18086
18409
  };
18087
18410
 
18088
- var Text$r = antd.Typography.Text;
18411
+ var Text$q = antd.Typography.Text;
18089
18412
  var MiniCreditCard = function (_a) {
18090
18413
  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;
18091
18414
  var darkMode = react.useContext(BunnyContext).darkMode;
@@ -18096,7 +18419,7 @@ var MiniCreditCard = function (_a) {
18096
18419
  return darkMode ? 'var(--row-background-alternate)' : 'bg-slate-50';
18097
18420
  }, [darkMode]);
18098
18421
  var isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
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] }))) })));
18422
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Issuer, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$q, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] }))) })));
18100
18423
  };
18101
18424
  var Identifier = function (_a) {
18102
18425
  var _b, _c, _d;
@@ -18105,9 +18428,9 @@ var Identifier = function (_a) {
18105
18428
  return null;
18106
18429
  }
18107
18430
  if (((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.type) === 'cashapp') {
18108
- return jsxRuntime.jsx(Text$r, { children: "Cashapp" });
18431
+ return jsxRuntime.jsx(Text$q, { children: "Cashapp" });
18109
18432
  }
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 })] }));
18433
+ return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$q, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$q, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
18111
18434
  };
18112
18435
  var Issuer = function (_a) {
18113
18436
  var _b;
@@ -18116,7 +18439,7 @@ var Issuer = function (_a) {
18116
18439
  var issuer = (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer;
18117
18440
  if (issuer.length == 0 || list.includes(issuer.toLowerCase()))
18118
18441
  return null;
18119
- return jsxRuntime.jsx(Text$r, { children: lodashExports.capitalize(issuer) });
18442
+ return jsxRuntime.jsx(Text$q, { children: lodashExports.capitalize(issuer) });
18120
18443
  };
18121
18444
  var DropdownMenu = function (_a) {
18122
18445
  var setDefault = _a.setDefault, remove = _a.remove, isDefault = _a.isDefault, id = _a.id;
@@ -18407,7 +18730,7 @@ function useSave$1(_a) {
18407
18730
  return { save: save, isSaving: isSaving };
18408
18731
  }
18409
18732
 
18410
- var Text$q = antd.Typography.Text;
18733
+ var Text$p = antd.Typography.Text;
18411
18734
  var TEST_CARD = '4242424242424242';
18412
18735
  var DemoPayForm = function (_a) {
18413
18736
  var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -18469,100 +18792,16 @@ var DemoPayForm = function (_a) {
18469
18792
  var onCardCvcChange = function (cvc) {
18470
18793
  setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
18471
18794
  };
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 })] })));
18795
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$p, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
18473
18796
  };
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) {
18797
+ var StyledInputs = defaultStyled.div(templateObject_1$b || (templateObject_1$b = __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) {
18475
18798
  var darkMode = _a.darkMode;
18476
18799
  return darkMode ? 'var(--row-background-dark)' : 'white';
18477
18800
  }, function (_a) {
18478
18801
  var darkMode = _a.darkMode;
18479
18802
  return darkMode ? common.GRAY_500 : common.GRAY_200;
18480
18803
  });
18481
- var templateObject_1$a;
18482
-
18483
- var createPaymentMethod = function (_a) {
18484
- var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
18485
- return __awaiter(void 0, void 0, void 0, function () {
18486
- var response;
18487
- return __generator(this, function (_b) {
18488
- switch (_b.label) {
18489
- case 0: return [4 /*yield*/, common.invokePlugin({
18490
- plugin: plugin,
18491
- method: "store_payment_method",
18492
- payload: {
18493
- payment_method_id: paymentMethodId,
18494
- account_id: accountId,
18495
- },
18496
- token: token,
18497
- apiHost: apiHost,
18498
- })];
18499
- case 1:
18500
- response = _b.sent();
18501
- if (response.status !== "success")
18502
- throw new Error(response.message || "Unknown error");
18503
- return [2 /*return*/, response];
18504
- }
18505
- });
18506
- });
18507
- };
18508
- var createSetupIntent = function (plugin, apiHost, token, accountId) {
18509
- return common.invokePlugin({
18510
- plugin: plugin,
18511
- method: "create_setup_intent",
18512
- token: token,
18513
- apiHost: apiHost,
18514
- payload: {
18515
- account_id: accountId,
18516
- },
18517
- });
18518
- };
18519
- var fetchStripeKey = function (plugin, apiHost, token, accountId) { return __awaiter(void 0, void 0, void 0, function () {
18520
- var response;
18521
- return __generator(this, function (_a) {
18522
- switch (_a.label) {
18523
- case 0: return [4 /*yield*/, common.invokePlugin({
18524
- plugin: plugin,
18525
- method: "retrieve_config",
18526
- token: token,
18527
- apiHost: apiHost,
18528
- payload: {
18529
- account_id: accountId,
18530
- },
18531
- })];
18532
- case 1:
18533
- response = _a.sent();
18534
- return [2 /*return*/, response];
18535
- }
18536
- });
18537
- }); };
18538
- index_js.loadStripe.setLoadParameters({ advancedFraudSignals: false });
18539
- var useStripePlugin = function (plugin, apiHost, currencyId, token, accountId) {
18540
- var _a = react.useState(null), stripe = _a[0], setStripe = _a[1];
18541
- var showErrorNotification = common.useErrorNotification();
18542
- var options = {
18543
- mode: "setup",
18544
- currency: currencyId,
18545
- setupFutureUsage: "off_session",
18546
- };
18547
- react.useEffect(function () {
18548
- var _a, _b;
18549
- if (!plugin)
18550
- return;
18551
- if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== "StripePayment")
18552
- return;
18553
- fetchStripeKey(plugin, apiHost || "", token, accountId)
18554
- .then(function (_a) {
18555
- var payload = _a.payload;
18556
- return index_js.loadStripe(payload.publishable_key).then(setStripe);
18557
- })
18558
- .catch(function (error) {
18559
- console.error("Caught Error in fetching stripe key: ", error);
18560
- showErrorNotification(error.message, "Unexpected Error fetching key");
18561
- });
18562
- // eslint-disable-next-line
18563
- }, [plugin, token]);
18564
- return { stripe: stripe, options: options };
18565
- };
18804
+ var templateObject_1$b;
18566
18805
 
18567
18806
  function useSave(_a) {
18568
18807
  var _this = this;
@@ -18705,7 +18944,7 @@ var CardIcon = function (_a) {
18705
18944
  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" })] })));
18706
18945
  };
18707
18946
 
18708
- var Text$p = antd.Typography.Text;
18947
+ var Text$o = antd.Typography.Text;
18709
18948
  var PaymentMethodSelector = function (_a) {
18710
18949
  var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
18711
18950
  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)); }) })));
@@ -18718,9 +18957,9 @@ var PaymentOption = function (_a) {
18718
18957
  var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
18719
18958
  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
18720
18959
  ? "var(--row-background-dark) border-gray-500"
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" }))] })));
18960
+ : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$o, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] })));
18722
18961
  };
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) {
18962
+ var PaymentOptionContainer = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __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) {
18724
18963
  var $brandColor = _a.$brandColor, $selected = _a.$selected;
18725
18964
  return $selected &&
18726
18965
  "\n border-color: ".concat($brandColor, ";\n ");
@@ -18728,7 +18967,7 @@ var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateOb
18728
18967
  var $brandColor = _a.$brandColor;
18729
18968
  return $brandColor;
18730
18969
  });
18731
- var templateObject_1$9;
18970
+ var templateObject_1$a;
18732
18971
 
18733
18972
  function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRemovePaymentMethod, onError) {
18734
18973
  var _this = this;
@@ -18836,11 +19075,10 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
18836
19075
  return { setDefaultPaymentMethod: setDefaultPaymentMethod, loading: loading };
18837
19076
  }
18838
19077
 
18839
- var Panel = antd.Collapse.Panel;
18840
19078
  var showErrorNotification$1 = common.useErrorNotification();
18841
19079
  var PaymentForm = function (_a) {
18842
19080
  var _b;
18843
- var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId;
19081
+ var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, paymentHoldOptions = _a.paymentHoldOptions;
18844
19082
  // Local state
18845
19083
  var _c = react.useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
18846
19084
  // Simple hooks
@@ -18919,7 +19157,14 @@ var PaymentForm = function (_a) {
18919
19157
  storedPaymentMethods: storedPaymentMethods,
18920
19158
  defaultPaymentMethod: defaultPaymentMethod,
18921
19159
  customCheckoutFunction: customCheckoutFunction,
18922
- } }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsxRuntime.jsx(antd.Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsxRuntime.jsx(Panel, __assign({ header: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !showPaymentMethodForm ? (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] })) }), "1") })), paying && !selectedPaymentPluginIsManualPayment ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultPaymentMethod ? (jsxRuntime.jsx("div", __assign({ className: "bunny-px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethodPlugin }) }))) : null })) : null] }) })) })) })));
19160
+ } }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsxRuntime.jsx(antd.Collapse, { bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyOnHidden: true, items: [
19161
+ {
19162
+ key: '1',
19163
+ showArrow: false,
19164
+ label: !showPaymentMethodForm ? (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null,
19165
+ children: (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] }))),
19166
+ },
19167
+ ] }), paying && !selectedPaymentPluginIsManualPayment ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultPaymentMethod && selectedPaymentMethodPlugin ? (jsxRuntime.jsx("div", __assign({ className: "bunny-px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, plugin: selectedPaymentMethodPlugin, paymentHoldOptions: paymentHoldOptions }) }))) : null })) : null] }) })) })) })));
18923
19168
  };
18924
19169
  function StripeWrapper(_a) {
18925
19170
  var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
@@ -18987,7 +19232,7 @@ function ActualInvoice() {
18987
19232
  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 }) })))] })) })));
18988
19233
  }
18989
19234
 
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 }"; };
19235
+ var MUTATION$7 = function (id) { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n quote {\n documentTemplateId\n documents { id filename size date url }\n firstInvoice {\n id\n state\n }\n payableId\n id\n payToAccept\n currentPaymentHold {\n createdAt\n expiresAt\n id\n updatedAt\n paymentMethod {\n accountId\n createdAt\n expirationDate\n failureCode\n id\n isDefault\n lastSuccess\n paymentType\n pluginId\n state\n updatedAt\n metadata {\n description\n expiration\n icon\n identifier\n issuer\n kind\n }\n }\n }\n }\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"; };
18991
19236
  var getFormattedQuote = function (_a) {
18992
19237
  var id = _a.id, token = _a.token, apiHost = _a.apiHost;
18993
19238
  return __awaiter(void 0, void 0, void 0, function () {
@@ -19014,12 +19259,12 @@ var getFormattedQuote = function (_a) {
19014
19259
  var usePlugins = function (_a) {
19015
19260
  var apiHost = _a.apiHost, token = _a.token;
19016
19261
  var response = reactQuery.useQuery({
19017
- queryKey: common.QueryKeyFactory.default.pluginsKey(token || ""),
19262
+ queryKey: common.QueryKeyFactory.default.pluginsKey(token || ''),
19018
19263
  queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
19019
19264
  var plugins;
19020
19265
  return __generator(this, function (_a) {
19021
19266
  switch (_a.label) {
19022
- case 0: return [4 /*yield*/, common.getPlugins({
19267
+ case 0: return [4 /*yield*/, getPlugins({
19023
19268
  token: token,
19024
19269
  apiHost: apiHost,
19025
19270
  })];
@@ -19032,6 +19277,37 @@ var usePlugins = function (_a) {
19032
19277
  });
19033
19278
  return response;
19034
19279
  };
19280
+ var getPlugins = function (_a) {
19281
+ var entityId = _a.entityId, token = _a.token, apiHost = _a.apiHost;
19282
+ return __awaiter(void 0, void 0, void 0, function () {
19283
+ var response, plugins, filteredPlugins, error;
19284
+ return __generator(this, function (_b) {
19285
+ switch (_b.label) {
19286
+ case 0: return [4 /*yield*/, common.request({
19287
+ endpoint: "/plugins",
19288
+ token: token,
19289
+ apiHost: apiHost,
19290
+ })];
19291
+ case 1:
19292
+ response = _b.sent();
19293
+ if (!response.ok) return [3 /*break*/, 3];
19294
+ return [4 /*yield*/, response.json()];
19295
+ case 2:
19296
+ plugins = _b.sent();
19297
+ filteredPlugins = plugins.filter(function (plugin) {
19298
+ var _a, _b;
19299
+ var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) || ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 || !entityId;
19300
+ return result;
19301
+ });
19302
+ return [2 /*return*/, filteredPlugins];
19303
+ case 3: return [4 /*yield*/, response.json()];
19304
+ case 4:
19305
+ error = _b.sent();
19306
+ throw error;
19307
+ }
19308
+ });
19309
+ });
19310
+ };
19035
19311
 
19036
19312
  var filterSigningPlugins = function (plugins) {
19037
19313
  return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
@@ -19046,15 +19322,41 @@ var useSigningPlugins = function (_a) {
19046
19322
  return filterSigningPlugins(plugins.data);
19047
19323
  };
19048
19324
 
19325
+ var QUOTE_ACCEPT = "\n mutation quoteAccept($name: String!, $title: String!, $poNumber: String, $taxNumber: String, $quoteId: ID) {\n quoteAccept(name: $name, title: $title, poNumber: $poNumber, taxNumber: $taxNumber, quoteId: $quoteId) {\n errors\n }\n }\n";
19326
+ var quoteAccept = function (_a) {
19327
+ var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token, changedFormItems = _a.changedFormItems;
19328
+ return __awaiter(void 0, void 0, void 0, function () {
19329
+ var vars, response, errors;
19330
+ var _b, _c;
19331
+ return __generator(this, function (_d) {
19332
+ switch (_d.label) {
19333
+ case 0:
19334
+ vars = __assign(__assign({}, changedFormItems), { quoteId: quoteId });
19335
+ return [4 /*yield*/, common.gqlRequest({
19336
+ query: QUOTE_ACCEPT,
19337
+ token: token,
19338
+ vars: vars,
19339
+ apiHost: apiHost,
19340
+ })];
19341
+ case 1:
19342
+ response = _d.sent();
19343
+ errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAccept) === null || _b === void 0 ? void 0 : _b.errors;
19344
+ if (errors)
19345
+ throw errors;
19346
+ return [2 /*return*/, (_c = response.quoteAccept) === null || _c === void 0 ? void 0 : _c.quote];
19347
+ }
19348
+ });
19349
+ });
19350
+ };
19351
+ // export default quoteAccept;
19049
19352
  var useSendAcceptQuote = function (_a) {
19050
- var onTokenExpired = _a.onTokenExpired, quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
19353
+ _a.onTokenExpired; var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
19051
19354
  // Hooks
19052
19355
  var graphQLMutation = common.useGraphQLmutation(function () {
19053
19356
  console.log("navigate in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
19054
19357
  }, apiHost || "", function () {
19055
19358
  console.log("onError in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
19056
19359
  });
19057
- var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
19058
19360
  var signingPlugins = useSigningPlugins({ apiHost: apiHost, token: token });
19059
19361
  var queryClient = reactQuery.useQueryClient();
19060
19362
  // Local state
@@ -19104,12 +19406,6 @@ var useSendAcceptQuote = function (_a) {
19104
19406
  token: token,
19105
19407
  }),
19106
19408
  });
19107
- queryClient.refetchQueries({
19108
- queryKey: common.QueryKeyFactory.default.createQuoteKey({
19109
- id: quoteId,
19110
- token: token,
19111
- }),
19112
- });
19113
19409
  });
19114
19410
  // Open the DropboxSign modal
19115
19411
  client.open(url, {
@@ -19120,29 +19416,27 @@ var useSendAcceptQuote = function (_a) {
19120
19416
  }
19121
19417
  });
19122
19418
  }); };
19123
- var sendAccept = function (changedFormItems) {
19124
- var mutation = "mutation quoteAccept($name: String!, $title: String!, $poNumber: String, $taxNumber: String, $quoteId: ID) {\n quoteAccept(name: $name, title: $title, poNumber: $poNumber, taxNumber: $taxNumber, quoteId: $quoteId) {\n errors\n }\n }";
19125
- var variables = __assign(__assign({}, changedFormItems), { quoteId: quoteId });
19126
- graphQLMutation(mutation, variables, function (rsp) {
19127
- if (rsp.errors)
19128
- handleAllErrorFormats(rsp.errors);
19129
- else {
19130
- setAcceptBoxVisible(false);
19131
- queryClient.invalidateQueries({
19132
- queryKey: common.QueryKeyFactory.default.createQuoteKey({
19133
- id: quoteId,
19134
- token: token,
19135
- }),
19136
- });
19137
- queryClient.invalidateQueries({
19138
- queryKey: common.QueryKeyFactory.default.createQuoteKey({
19139
- id: quoteId,
19419
+ var _e = reactQuery.useMutation({
19420
+ mutationFn: function (changedFormItems) { return __awaiter(void 0, void 0, void 0, function () {
19421
+ return __generator(this, function (_a) {
19422
+ return [2 /*return*/, quoteAccept({
19423
+ quoteId: quoteId,
19424
+ apiHost: apiHost,
19140
19425
  token: token,
19141
- }),
19142
- });
19143
- }
19144
- }, token);
19145
- };
19426
+ changedFormItems: changedFormItems,
19427
+ })];
19428
+ });
19429
+ }); },
19430
+ onSuccess: function () {
19431
+ setAcceptBoxVisible(false);
19432
+ queryClient.invalidateQueries({
19433
+ queryKey: common.QueryKeyFactory.default.createQuoteKey({
19434
+ id: quoteId,
19435
+ token: token,
19436
+ }),
19437
+ });
19438
+ },
19439
+ }), sendAcceptMutation = _e.mutate, isSendAcceptPending = _e.isPending;
19146
19440
  var startAcceptance = function () {
19147
19441
  setIsAccepting(true);
19148
19442
  if (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length) {
@@ -19155,12 +19449,13 @@ var useSendAcceptQuote = function (_a) {
19155
19449
  return {
19156
19450
  acceptBoxVisible: acceptBoxVisible,
19157
19451
  isAccepting: isAccepting,
19158
- sendAccept: sendAccept,
19452
+ sendAccept: sendAcceptMutation,
19159
19453
  setAcceptBoxVisible: setAcceptBoxVisible,
19160
19454
  setIsAccepting: setIsAccepting,
19161
19455
  startAcceptance: startAcceptance,
19162
19456
  pandadocPollingModalVisible: pandadocPollingModalVisible,
19163
19457
  setPandadocPollingModalVisible: setPandadocPollingModalVisible,
19458
+ isSendAcceptPending: isSendAcceptPending,
19164
19459
  };
19165
19460
  };
19166
19461
 
@@ -19228,11 +19523,11 @@ var PandadocPollingModal = function (_a) {
19228
19523
  return (jsxRuntime.jsxs(antd.Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-py-4 bunny-text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-center" }, { children: infoMessage }))] })));
19229
19524
  };
19230
19525
 
19231
- var ModalOverrideBrandStylings = defaultStyled(antd.Modal)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n .ant-modal-content {\n border-radius: 0.75rem;\n overflow: hidden;\n padding: 0 !important;\n }\n\n .ant-modal-header {\n border-bottom: none;\n padding: 1.5rem 1.5rem 0;\n margin: 0 !important;\n }\n .ant-modal-body {\n padding: 1rem 1.5rem 1.5rem;\n }\n .ant-modal-footer {\n border-top: none;\n padding: 0 1.5rem 1.5rem;\n margin: 0 !important;\n }\n"], ["\n .ant-modal-content {\n border-radius: 0.75rem;\n overflow: hidden;\n padding: 0 !important;\n }\n\n .ant-modal-header {\n border-bottom: none;\n padding: 1.5rem 1.5rem 0;\n margin: 0 !important;\n }\n .ant-modal-body {\n padding: 1rem 1.5rem 1.5rem;\n }\n .ant-modal-footer {\n border-top: none;\n padding: 0 1.5rem 1.5rem;\n margin: 0 !important;\n }\n"])));
19526
+ var ModalOverrideBrandStylings = defaultStyled(antd.Modal)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n .ant-modal-content {\n border-radius: 0.75rem;\n overflow: hidden;\n padding: 0 !important;\n }\n\n .ant-modal-header {\n border-bottom: none;\n padding: 1.5rem 1.5rem 0;\n margin: 0 !important;\n }\n .ant-modal-body {\n padding: 1rem 1.5rem 1.5rem;\n }\n .ant-modal-footer {\n border-top: none;\n padding: 0 1.5rem 1.5rem;\n margin: 0 !important;\n }\n"], ["\n .ant-modal-content {\n border-radius: 0.75rem;\n overflow: hidden;\n padding: 0 !important;\n }\n\n .ant-modal-header {\n border-bottom: none;\n padding: 1.5rem 1.5rem 0;\n margin: 0 !important;\n }\n .ant-modal-body {\n padding: 1rem 1.5rem 1.5rem;\n }\n .ant-modal-footer {\n border-top: none;\n padding: 0 1.5rem 1.5rem;\n margin: 0 !important;\n }\n"])));
19232
19527
  var StyledModal$1 = function (props) {
19233
19528
  return jsxRuntime.jsx(ModalOverrideBrandStylings, __assign({ closable: false }, props));
19234
19529
  };
19235
- var templateObject_1$8;
19530
+ var templateObject_1$9;
19236
19531
 
19237
19532
  var useFocusFirstInput = function (_a) {
19238
19533
  var firstInputRef = _a.firstInputRef, isVisible = _a.isVisible;
@@ -19243,7 +19538,7 @@ var useFocusFirstInput = function (_a) {
19243
19538
  };
19244
19539
 
19245
19540
  var AcceptQuoteModal = function (_a) {
19246
- var acceptBoxVisible = _a.acceptBoxVisible, formattedQuote = _a.formattedQuote, sendAccept = _a.sendAccept, setAcceptBoxVisible = _a.setAcceptBoxVisible, setIsAccepting = _a.setIsAccepting;
19541
+ var acceptBoxVisible = _a.acceptBoxVisible, formattedQuote = _a.formattedQuote, sendAccept = _a.sendAccept, setAcceptBoxVisible = _a.setAcceptBoxVisible, setIsAccepting = _a.setIsAccepting, isSendAcceptPending = _a.isSendAcceptPending;
19247
19542
  // Refs
19248
19543
  var firstInputRef = react.useRef(null);
19249
19544
  // Hooks
@@ -19254,7 +19549,10 @@ var AcceptQuoteModal = function (_a) {
19254
19549
  var createRules = function (required, title) {
19255
19550
  return required ? [{ required: true, message: "".concat(title, " is required") }] : [];
19256
19551
  };
19257
- return (jsxRuntime.jsx(StyledModal$1, __assign({ centered: true, okText: "Accept", onCancel: function () {
19552
+ return (jsxRuntime.jsx(StyledModal$1, __assign({ centered: true, okText: isSendAcceptPending ? "Accepting..." : "Accept", okButtonProps: {
19553
+ loading: isSendAcceptPending,
19554
+ disabled: isSendAcceptPending,
19555
+ }, onCancel: function () {
19258
19556
  setAcceptBoxVisible(false);
19259
19557
  setIsAccepting(false);
19260
19558
  }, onOk: function () {
@@ -19267,8 +19565,39 @@ var AcceptQuoteModal = function (_a) {
19267
19565
  }, 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, {}) })))] })) })));
19268
19566
  };
19269
19567
 
19270
- var Text$o = antd.Typography.Text;
19271
- defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
19568
+ var Title$2 = antd.Typography.Title;
19569
+ var showSuccessNotification$1 = common.useSuccessNotification();
19570
+ var PaymentHoldModal = function (_a) {
19571
+ var visible = _a.visible, setVisible = _a.setVisible, quote = _a.quote;
19572
+ var queryClient = reactQuery.useQueryClient();
19573
+ var token = useToken();
19574
+ return (jsxRuntime.jsxs(StyledModal$1, __assign({ centered: true, onCancel: function () {
19575
+ setVisible(false);
19576
+ }, footer: null, open: visible, width: 600 }, { children: [jsxRuntime.jsx(Title$2, __assign({ className: "mt-4 pb-4 mx-4", level: 5 }, { children: "Pay to accept" })), jsxRuntime.jsx("div", __assign({ className: "mb-4" }, { children: jsxRuntime.jsx(PaymentForm, { quote: {
19577
+ amount: quote.amount,
19578
+ currencyId: quote.currency,
19579
+ id: quote.quote.id,
19580
+ }, paymentHoldOptions: {
19581
+ payToAccept: true,
19582
+ amountToHold: quote.amount,
19583
+ }, onFail: function () {
19584
+ setVisible(false);
19585
+ }, onPaymentSuccess: function () {
19586
+ setVisible(false);
19587
+ }, onPaymentHoldSuccess: function () {
19588
+ setVisible(false);
19589
+ showSuccessNotification$1("Approved payment hold for ".concat(common.formatCurrency(quote.amount, quote.currency)));
19590
+ queryClient.invalidateQueries({
19591
+ queryKey: common.QueryKeyFactory.default.createQuoteKey({
19592
+ id: quote.id,
19593
+ token: token,
19594
+ }),
19595
+ });
19596
+ } }) }))] })));
19597
+ };
19598
+
19599
+ var Text$n = antd.Typography.Text;
19600
+ defaultStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
19272
19601
  function Quote(_a) {
19273
19602
  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;
19274
19603
  return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
@@ -19282,16 +19611,29 @@ function Quote(_a) {
19282
19611
  onQuoteLoaded: onQuoteLoaded,
19283
19612
  } }, { children: jsxRuntime.jsx(ActualQuote, {}) })));
19284
19613
  }
19614
+ // TODO: dissolve this hook
19615
+ var useQuotePaymentHold = function (formattedQuote) {
19616
+ var _a, _b;
19617
+ var _c = react.useState(false), paymentHoldModalVisible = _c[0], setPaymentHoldModalVisible = _c[1];
19618
+ var shouldDoPaymentHold = ((_a = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _a === void 0 ? void 0 : _a.payToAccept) == true;
19619
+ var currentPaymentHold = (_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.currentPaymentHold;
19620
+ return {
19621
+ paymentHold: currentPaymentHold,
19622
+ paymentHoldModalVisible: paymentHoldModalVisible,
19623
+ setPaymentHoldModalVisible: setPaymentHoldModalVisible,
19624
+ shouldDoPaymentHold: shouldDoPaymentHold,
19625
+ paymentHoldCompleted: currentPaymentHold ? true : false,
19626
+ };
19627
+ };
19285
19628
  function ActualQuote() {
19286
19629
  var _this = this;
19287
- var _a, _b;
19630
+ var _a, _b, _c, _d;
19288
19631
  // Context
19289
- var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, onTokenExpired = _c.onTokenExpired;
19632
+ var _e = react.useContext(BunnyContext), apiHost = _e.apiHost, onTokenExpired = _e.onTokenExpired;
19290
19633
  var token = useToken();
19291
- var entityBranding = react.useContext(BrandContext);
19292
- var _d = react.useContext(InvoiceQuoteContext), className = _d.className, id = _d.id, hideDownloadButton = _d.hideDownloadButton, onQuoteLoaded = _d.onQuoteLoaded;
19634
+ var _f = react.useContext(InvoiceQuoteContext), className = _f.className, id = _f.id, hideDownloadButton = _f.hideDownloadButton, onQuoteLoaded = _f.onQuoteLoaded;
19293
19635
  // Queries
19294
- var _e = reactQuery.useQuery({
19636
+ var _g = reactQuery.useQuery({
19295
19637
  queryKey: common.QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
19296
19638
  queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
19297
19639
  var error_1;
@@ -19310,17 +19652,15 @@ function ActualQuote() {
19310
19652
  });
19311
19653
  }); },
19312
19654
  placeholderData: reactQuery.keepPreviousData,
19313
- }), data = _e.data, isLoading = _e.isLoading;
19655
+ }), data = _g.data, isLoading = _g.isLoading;
19314
19656
  var formattedQuote = data;
19315
19657
  // Hooks
19316
- var downloadFile = useDownloadFile(id);
19317
- var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
19318
- var _f = useSendAcceptQuote({
19658
+ var _h = useSendAcceptQuote({
19319
19659
  token: token,
19320
19660
  onTokenExpired: onTokenExpired,
19321
19661
  apiHost: apiHost,
19322
19662
  quoteId: id,
19323
- }), acceptBoxVisible = _f.acceptBoxVisible, isAccepting = _f.isAccepting, sendAccept = _f.sendAccept, setAcceptBoxVisible = _f.setAcceptBoxVisible, setIsAccepting = _f.setIsAccepting, startAcceptance = _f.startAcceptance, pandadocPollingModalVisible = _f.pandadocPollingModalVisible, setPandadocPollingModalVisible = _f.setPandadocPollingModalVisible;
19663
+ }), acceptBoxVisible = _h.acceptBoxVisible, isAccepting = _h.isAccepting, sendAccept = _h.sendAccept, setAcceptBoxVisible = _h.setAcceptBoxVisible, setIsAccepting = _h.setIsAccepting, startAcceptance = _h.startAcceptance, pandadocPollingModalVisible = _h.pandadocPollingModalVisible, setPandadocPollingModalVisible = _h.setPandadocPollingModalVisible, isSendAcceptPending = _h.isSendAcceptPending;
19324
19664
  useSigningComplete({ data: formattedQuote, token: token });
19325
19665
  var isMobile = common.useIsMobile();
19326
19666
  var showErrorNotification = common.useErrorNotification();
@@ -19329,18 +19669,54 @@ function ActualQuote() {
19329
19669
  onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote);
19330
19670
  }
19331
19671
  }, [formattedQuote]);
19672
+ // Payment hold stuff here
19673
+ var _j = useQuotePaymentHold(formattedQuote), paymentHoldModalVisible = _j.paymentHoldModalVisible, setPaymentHoldModalVisible = _j.setPaymentHoldModalVisible, shouldDoPaymentHold = _j.shouldDoPaymentHold, paymentHoldCompleted = _j.paymentHoldCompleted, paymentHold = _j.paymentHold;
19674
+ var handleClickAccept = function () {
19675
+ if (shouldDoPaymentHold && !paymentHoldCompleted) {
19676
+ setPaymentHoldModalVisible(true);
19677
+ }
19678
+ else {
19679
+ startAcceptance();
19680
+ }
19681
+ };
19332
19682
  if (!formattedQuote || isLoading) {
19333
19683
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
19334
19684
  }
19335
19685
  // Derived state
19336
19686
  var isAccepted = formattedQuote.state === 'ACCEPTED';
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: {
19338
- color: entityBranding.secondaryColor,
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) {
19687
+ var firstInvoice = (_a = formattedQuote.quote) === null || _a === void 0 ? void 0 : _a.firstInvoice;
19688
+ if ((firstInvoice === null || firstInvoice === void 0 ? void 0 : firstInvoice.state) === 'PAID' && paymentHoldCompleted) {
19689
+ return jsxRuntime.jsx(Invoice, { id: firstInvoice.id });
19690
+ }
19691
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.documentTemplateId)
19692
+ ? "".concat(apiHost, "/api/pdf/quote/").concat(formattedQuote.quote.id)
19693
+ : undefined }, { children: ((_d = (_c = formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.quote.documents.map(function (doc, index) {
19340
19694
  return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
19341
- }) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
19695
+ }) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept, isSendAcceptPending: isSendAcceptPending }), jsxRuntime.jsx(PaymentHoldModal, { visible: paymentHoldModalVisible, setVisible: setPaymentHoldModalVisible, quote: formattedQuote }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
19342
19696
  }
19343
- var templateObject_1$7;
19697
+ // TODO: clean up the logic here. Its quite confusing
19698
+ function QuoteButtons(_a) {
19699
+ var isAccepted = _a.isAccepted, formattedQuote = _a.formattedQuote, isMobile = _a.isMobile, hideDownloadButton = _a.hideDownloadButton, id = _a.id, isAccepting = _a.isAccepting, handleClickAccept = _a.handleClickAccept, setPaymentHoldModalVisible = _a.setPaymentHoldModalVisible, shouldDoPaymentHold = _a.shouldDoPaymentHold, paymentHoldCompleted = _a.paymentHoldCompleted, paymentHold = _a.paymentHold;
19700
+ var apiHost = react.useContext(BunnyContext).apiHost;
19701
+ var token = useToken();
19702
+ var entityBranding = react.useContext(BrandContext);
19703
+ var downloadFile = useDownloadFile(id);
19704
+ var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
19705
+ return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
19706
+ color: entityBranding.secondaryColor,
19707
+ } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$n, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [paymentHold ? (jsxRuntime.jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired, onClick: function () { return setPaymentHoldModalVisible(true); }, type: "primary" }, { children: "Pay to accept" }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary" }, { children: isExpired ? 'Quote is expired' : 'Accept quote' }))) : null }))] })))] })));
19708
+ }
19709
+ function PaymentHoldDisplay(_a) {
19710
+ var _b, _c, _d, _e;
19711
+ var paymentHold = _a.paymentHold, currency = _a.currency, amount = _a.amount;
19712
+ var paymentMethod = ((_c = (_b = paymentHold.paymentMethod) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.identifier)
19713
+ ? (_e = (_d = paymentHold.paymentMethod) === null || _d === void 0 ? void 0 : _d.metadata) === null || _e === void 0 ? void 0 : _e.identifier
19714
+ : 'N/A';
19715
+ var formattedAmount = currency ? common.formatCurrency(amount, currency) : 'N/A';
19716
+ var expirationDate = paymentHold.expiresAt ? common.formatDate(paymentHold.expiresAt) : 'N/A';
19717
+ return (jsxRuntime.jsx(antd.Tooltip, __assign({ title: "".concat(formattedAmount, " will be charged to ").concat(paymentMethod, " once the quote is accepted. Hold will be released on ").concat(expirationDate, " if not accepted.") }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(CustomizedTag, __assign({ color: 'orange', className: "rounded-md", style: { padding: 6 } }, { children: ["Hold of ", formattedAmount, " on ****", paymentMethod] })) }) })));
19718
+ }
19719
+ var templateObject_1$8;
19344
19720
 
19345
19721
  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 }"); };
19346
19722
  var getQuotes = function (_a) {
@@ -19363,17 +19739,14 @@ var getQuotes = function (_a) {
19363
19739
  });
19364
19740
  };
19365
19741
 
19366
- var transactionMutation = function (filter) { return "\nquery transactions {\n transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n nodes {\n amount\n createdAt\n currencyId\n description\n id\n kind\n state\n transactionableId\n transactionable {\n ...on Payment { amount }\n ...on Invoice { amount number dueAt issuedAt isLegacy }\n ...on CreditNote { amount number issuedAt }\n }\n account {\n name\n id\n }\n }\n }\n}"); };
19742
+ var transactionMutation = function (filter) { return "\nquery transactions {\n transactions ".concat(filter ? "(".concat(filter, ")") : '', " {\n nodes {\n amount\n createdAt\n currencyId\n description\n id\n kind\n state\n transactionableId\n transactionable {\n ...on Payment { amount }\n ...on Invoice { amount number dueAt issuedAt isLegacy }\n ...on CreditNote { amount number issuedAt }\n }\n account {\n name\n id\n }\n }\n }\n}"); };
19367
19743
  var getTransactions = function (filter, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
19368
19744
  var response, _a, data, errors;
19369
19745
  return __generator(this, function (_b) {
19370
19746
  switch (_b.label) {
19371
- case 0: return [4 /*yield*/, fetch(apiHost + "/graphql", {
19372
- method: "POST",
19373
- headers: {
19374
- "Content-type": "application/json; charset=utf-8",
19375
- Authorization: "Bearer ".concat(token),
19376
- },
19747
+ case 0: return [4 /*yield*/, fetch(apiHost + '/graphql', {
19748
+ method: 'POST',
19749
+ headers: common.createClientDevHeaders(token),
19377
19750
  body: JSON.stringify({
19378
19751
  query: transactionMutation(filter),
19379
19752
  }),
@@ -19427,10 +19800,10 @@ var getColor = function (state) {
19427
19800
  }
19428
19801
  };
19429
19802
 
19430
- var Text$n = antd.Typography.Text;
19803
+ var Text$m = antd.Typography.Text;
19431
19804
  var TransactionDate = function (_a) {
19432
19805
  var date = _a.date;
19433
- return jsxRuntime.jsx(Text$n, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
19806
+ return jsxRuntime.jsx(Text$m, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
19434
19807
  };
19435
19808
 
19436
19809
  var ArrowDownToLine = function (_a) {
@@ -19460,20 +19833,20 @@ var TransactionGridCell = defaultStyled.div.withConfig({
19460
19833
  shouldForwardProp: function (prop) {
19461
19834
  return !["gridColumn", "padding", "right"].includes(prop);
19462
19835
  },
19463
- })(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n ", "\n\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n text-align: ", ";\n white-space: nowrap;\n font-size: 14px;\n color: ", ";\n\n background-color: inherit;\n\n padding: 1rem;\n min-width: 48px;\n"], ["\n ", "\n\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n text-align: ", ";\n white-space: nowrap;\n font-size: 14px;\n color: ", ";\n\n background-color: inherit;\n\n padding: 1rem;\n min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) {
19836
+ })(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n ", "\n\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n text-align: ", ";\n white-space: nowrap;\n font-size: 14px;\n color: ", ";\n\n background-color: inherit;\n\n padding: 1rem;\n min-width: 48px;\n"], ["\n ", "\n\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n text-align: ", ";\n white-space: nowrap;\n font-size: 14px;\n color: ", ";\n\n background-color: inherit;\n\n padding: 1rem;\n min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) {
19464
19837
  return props.right ? "flex-end" : "flex-start";
19465
19838
  }, function (props) {
19466
19839
  return props.right ? "right" : "left";
19467
19840
  }, common.SLATE_600);
19468
- var templateObject_1$6;
19841
+ var templateObject_1$7;
19469
19842
 
19470
- var Text$m = antd.Typography.Text;
19843
+ var Text$l = antd.Typography.Text;
19471
19844
  var TransactionsEmptyState = function () {
19472
19845
  var noTransactionsMessage = react.useContext(TransactionsListContext).noTransactionsMessage;
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" })));
19846
+ return (jsxRuntime.jsx(Text$l, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
19474
19847
  };
19475
19848
 
19476
- var Text$l = antd.Typography.Text;
19849
+ var Text$k = antd.Typography.Text;
19477
19850
  var isInvoice = function (transaction) {
19478
19851
  return transaction.kind === "INVOICE";
19479
19852
  };
@@ -19485,7 +19858,7 @@ var TransactionRowTitle = function (_a) {
19485
19858
  if (!isInvoice(transaction) && !isQuote(transaction)) {
19486
19859
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
19487
19860
  }
19488
- return (jsxRuntime.jsx(Text$l, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19861
+ return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19489
19862
  };
19490
19863
 
19491
19864
  function transactionDateToDisplay(transaction, transactionDateType) {
@@ -19504,7 +19877,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
19504
19877
  }
19505
19878
  }
19506
19879
 
19507
- var Text$k = antd.Typography.Text;
19880
+ var Text$j = antd.Typography.Text;
19508
19881
  var TransactionsListDesktop = function (_a) {
19509
19882
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19510
19883
  var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19533,11 +19906,11 @@ var TransactionsListDesktop = function (_a) {
19533
19906
  !showState &&
19534
19907
  !showAmount &&
19535
19908
  !showDownload &&
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));
19909
+ !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$j, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
19537
19910
  }) }));
19538
19911
  };
19539
19912
 
19540
- var Text$j = antd.Typography.Text;
19913
+ var Text$i = antd.Typography.Text;
19541
19914
  var TransactionsListMobile = function (_a) {
19542
19915
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19543
19916
  var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19560,12 +19933,12 @@ var TransactionsListMobile = function (_a) {
19560
19933
  backgroundColor: index % 2 === 0
19561
19934
  ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
19562
19935
  : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
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 ||
19936
+ } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$i, { children: common.formatCurrency(transaction.transactionable.amount ||
19564
19937
  transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
19565
19938
  }) }));
19566
19939
  };
19567
19940
 
19568
- var Text$i = antd.Typography.Text;
19941
+ var Text$h = antd.Typography.Text;
19569
19942
  var DISPLAY_WIDTH = 1200;
19570
19943
  function Transactions(_a) {
19571
19944
  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 ? [
@@ -19678,7 +20051,7 @@ function TransactionsDisplay(_a) {
19678
20051
  onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
19679
20052
  setDrawerOpen(false);
19680
20053
  }
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
20054
+ return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? "bunny-overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col bunny-gap-1" : "bunny-flex-row bunny-items-center", " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$h, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
19682
20055
  ), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-w-full" : "") }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
19683
20056
  ? searchBarClassName
19684
20057
  : "border border-slate-200", onChange: function (e) {
@@ -19946,7 +20319,7 @@ var BunnyFooterIcon = function (_a) {
19946
20319
  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
20320
  };
19948
20321
 
19949
- var Text$h = antd.Typography.Text;
20322
+ var Text$g = antd.Typography.Text;
19950
20323
  var Footer = function (_a) {
19951
20324
  var className = _a.className;
19952
20325
  var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
@@ -19956,11 +20329,11 @@ var Footer = function (_a) {
19956
20329
  var BunnyMarketingLink = function () {
19957
20330
  var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
19958
20331
  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 }) }))] })) })) })));
20332
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsxRuntime.jsx(Text$g, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsxRuntime.jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
19960
20333
  };
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);
20334
+ var StyedLink = styled__default["default"].a(templateObject_1$6 || (templateObject_1$6 = __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
20335
  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;
20336
+ var templateObject_1$6, templateObject_2$1;
19964
20337
 
19965
20338
  var Title$1 = antd.Typography.Title;
19966
20339
  function PaymentForms(_a) {
@@ -19981,18 +20354,18 @@ function InitialSignupForm(_a) {
19981
20354
  ] }, { 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" })) })] })) })));
19982
20355
  }
19983
20356
 
19984
- var Title = antd.Typography.Title, Text$g = antd.Typography.Text;
20357
+ var Title = antd.Typography.Title, Text$f = antd.Typography.Text;
19985
20358
  function PaymentSuccessDisplay(_a) {
19986
20359
  var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
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] })))] })));
20360
+ 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] })))] })));
19988
20361
  }
19989
20362
 
19990
- var Text$f = antd.Typography.Text;
20363
+ var Text$e = antd.Typography.Text;
19991
20364
  function PriceListDisplay(_a) {
19992
20365
  var priceListData = _a.priceListData;
19993
20366
  if (!priceListData)
19994
20367
  return 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] })));
20368
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " / month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
19996
20369
  }
19997
20370
 
19998
20371
  var showErrorNotification = common.useErrorNotification();
@@ -20160,14 +20533,14 @@ function Signup(_a) {
20160
20533
  boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
20161
20534
  } }, { 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
20535
  }
20163
- var Text$e = antd.Typography.Text;
20536
+ var Text$d = antd.Typography.Text;
20164
20537
  var CheckoutSummaryDivider = function () {
20165
20538
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-my-2" }, { children: jsxRuntime.jsx(antd.Divider, { className: "m-0" }) })));
20166
20539
  };
20167
20540
  var showSuccessNotification = common.useSuccessNotification();
20168
20541
  function CheckoutSummary(_a) {
20169
20542
  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) {
20543
+ return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxRuntime.jsxs(Text$d, { 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
20544
  return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
20172
20545
  var multiplier = charge.kind === 'COUPON' ? -1 : 1;
20173
20546
  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));
@@ -20901,7 +21274,7 @@ var PlanPickerCheckoutBar = function (_a) {
20901
21274
  };
20902
21275
 
20903
21276
  // WARNING: There is a preview button on APP that will need to be changed if this query is changed
20904
- var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n basePrice\n id\n currencyId\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
21277
+ var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
20905
21278
  var getPriceListChangeOptions = function (_a) {
20906
21279
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
20907
21280
  return __awaiter(void 0, void 0, void 0, function () {
@@ -20986,7 +21359,7 @@ var BillingPeriodSelector = function (_a) {
20986
21359
  };
20987
21360
  var ProductRadioStyled = styled__default["default"].div.withConfig({
20988
21361
  shouldForwardProp: function (prop) { return !["brandColor"].includes(prop); },
20989
- })(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"], ["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"])), function (props) {
21362
+ })(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"], ["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"])), function (props) {
20990
21363
  return props.brandColor ? props.brandColor : "black";
20991
21364
  }, function (props) {
20992
21365
  return props.brandColor ? props.brandColor : "black";
@@ -20995,7 +21368,7 @@ var StyledRadioGroup = styled__default["default"].div(templateObject_2 || (templ
20995
21368
  var $isMobile = _a.$isMobile;
20996
21369
  return $isMobile ? "100%" : "min-content";
20997
21370
  });
20998
- var templateObject_1$4, templateObject_2;
21371
+ var templateObject_1$5, templateObject_2;
20999
21372
 
21000
21373
  var PriceListCardTitle = function (_a) {
21001
21374
  var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
@@ -21007,35 +21380,47 @@ var PriceListCardTitle = function (_a) {
21007
21380
 
21008
21381
  var PriceListCardPrice = function (_a) {
21009
21382
  var priceList = _a.priceList;
21010
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: "32px" } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
21011
- ? common.formatCurrency(priceList.basePrice, priceList.currencyId, 0)
21383
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: '32px' } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
21384
+ ? common.formatCurrency(priceList.monthlyBasePrice, priceList.currencyId, 0)
21012
21385
  : priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US
21013
- ? ""
21014
- : "Free" })));
21386
+ ? ''
21387
+ : 'Free' })));
21015
21388
  };
21016
21389
 
21017
- var Text$d = antd.Typography.Text;
21390
+ var Text$c = antd.Typography.Text;
21018
21391
  var PriceListCardDescription = function (_a) {
21019
21392
  var description = _a.description;
21393
+ var htmlParsedDescription = parse__default["default"](description || '');
21020
21394
  if (!description)
21021
21395
  return null;
21022
- return jsxRuntime.jsx(Text$d, __assign({ className: "bunny-text-center" }, { children: description }));
21396
+ return jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: htmlParsedDescription }));
21023
21397
  };
21024
21398
 
21025
- var Text$c = antd.Typography.Text;
21399
+ var BillingPeriodConverter;
21400
+ (function (BillingPeriodConverter) {
21401
+ BillingPeriodConverter["ONCE"] = "once";
21402
+ BillingPeriodConverter["MONTHLY"] = "monthly";
21403
+ BillingPeriodConverter["ANNUAL"] = "annually";
21404
+ BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
21405
+ BillingPeriodConverter["QUARTERLY"] = "quarterly";
21406
+ })(BillingPeriodConverter || (BillingPeriodConverter = {}));
21407
+ var BillingPeriodConverter$1 = BillingPeriodConverter;
21408
+
21409
+ var isEmptyHtml = function (html) {
21410
+ return /^<[^>]*>(\s*)<\/[^>]*>$/.test(html);
21411
+ };
21412
+ var Text$b = antd.Typography.Text;
21026
21413
  var PriceListCardPriceDescription = function (_a) {
21027
21414
  var feature = _a.feature, priceList = _a.priceList;
21028
21415
  var isMobile = common.useIsMobile();
21029
21416
  var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === common.PricingModel.FLAT && charge.basePrice > 0; });
21030
21417
  if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== common.PricingStyle.PRICED)
21031
21418
  return null;
21032
- return (jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
21033
- fontSize: isMobile ? "13px" : "12px",
21034
- } }, { children: priceList.plan.pricingDescription
21035
- ? priceList.plan.pricingDescription
21036
- : "per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
21037
- ? "".concat(feature.unitName.toLowerCase(), " / ")
21038
- : "").concat(common.PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)]) })));
21419
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
21420
+ fontSize: isMobile ? '13px' : '12px',
21421
+ } }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsxRuntime.jsx(interweave.Markup, { content: priceList.plan.pricingDescription })) : ("per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
21422
+ ? "".concat(feature.unitName.toLowerCase(), " / ")
21423
+ : '', "month")) })), priceList.periodMonths > 1 && (jsxRuntime.jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
21039
21424
  };
21040
21425
 
21041
21426
  var CheckIcon = function (_a) {
@@ -21063,8 +21448,8 @@ var PriceListCardButton = function (_a) {
21063
21448
  maxWidth: '240px',
21064
21449
  }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
21065
21450
  };
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);
21067
- var templateObject_1$3;
21451
+ var StyledCardButton = styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __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);
21452
+ var templateObject_1$4;
21068
21453
 
21069
21454
  var PriceListCardMobile = function (_a) {
21070
21455
  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;
@@ -21135,13 +21520,13 @@ var PriceListCard = function (_a) {
21135
21520
  return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsxRuntime.jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
21136
21521
  };
21137
21522
 
21138
- var Text$b = antd.Typography.Text;
21523
+ var Text$a = antd.Typography.Text;
21139
21524
  var PriceListCardFeature = function (_a) {
21140
21525
  var index = _a.index, planFeature = _a.planFeature;
21141
21526
  var brandColor = react.useContext(BrandContext).brandColor;
21142
21527
  if (planFeature.feature.kind === "GROUP")
21143
- return jsxRuntime.jsx(Text$b, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
21144
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$b, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
21528
+ return jsxRuntime.jsx(Text$a, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
21529
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$a, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
21145
21530
  };
21146
21531
 
21147
21532
  var getAvailablePlansAndPriceLists = function (_a) {
@@ -21178,7 +21563,7 @@ var PriceListGridMobile = function (_a) {
21178
21563
 
21179
21564
  var NextPriceListButton = function (_a) {
21180
21565
  var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21181
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-absolute bunny-flex bunny-gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21566
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-absolute bunny-flex bunny-gap-1", style: { top: '12px', right: '8px' } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21182
21567
  setPriceListStart(function (prev) {
21183
21568
  var newValue = prev - 1;
21184
21569
  if (newValue < 0) {
@@ -21186,7 +21571,7 @@ var NextPriceListButton = function (_a) {
21186
21571
  }
21187
21572
  return newValue;
21188
21573
  });
21189
- }, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21574
+ }, style: { width: '22px', height: '22px' } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21190
21575
  return setPriceListStart(function (prev) {
21191
21576
  var newValue = prev + 1;
21192
21577
  if (newValue >= availablePriceLists.length) {
@@ -21194,7 +21579,7 @@ var NextPriceListButton = function (_a) {
21194
21579
  }
21195
21580
  return newValue;
21196
21581
  });
21197
- }, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
21582
+ }, style: { width: '22px', height: '22px' } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
21198
21583
  };
21199
21584
 
21200
21585
  var filterUniqueFeatures = function (_a) {
@@ -21248,7 +21633,7 @@ var FeatureGridCell = function (_a) {
21248
21633
  : {})) }, { children: children })));
21249
21634
  };
21250
21635
 
21251
- var Text$a = antd.Typography.Text;
21636
+ var Text$9 = antd.Typography.Text;
21252
21637
  var PlanFeatures = function (_a) {
21253
21638
  var _b;
21254
21639
  var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
@@ -21287,14 +21672,14 @@ var PlanFeatures = function (_a) {
21287
21672
  return (jsxRuntime.jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
21288
21673
  if (isFeatureGroup)
21289
21674
  return jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex);
21290
- return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$a, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
21675
+ return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$9, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
21291
21676
  })] }), rowIndex));
21292
21677
  }) }));
21293
21678
  };
21294
21679
  var FeatureTitle = function (_a) {
21295
21680
  var _b;
21296
21681
  var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
21297
- return (jsxRuntime.jsx(Text$a, __assign({ className: " ".concat(isFeatureGroup ? 'bunny-text-slate-500 bunny-font-medium bunny-pt-4' : ''), style: __assign({}, (isFeatureGroup ? { fontSize: '11px' } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
21682
+ return (jsxRuntime.jsx(Text$9, __assign({ className: " ".concat(isFeatureGroup ? 'bunny-text-slate-500 bunny-font-medium bunny-pt-4' : ''), style: __assign({}, (isFeatureGroup ? { fontSize: '11px' } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
21298
21683
  };
21299
21684
 
21300
21685
  var PriceListGridDesktop = function (_a) {
@@ -21510,12 +21895,12 @@ var PlanPicker = function () {
21510
21895
  return (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
21511
21896
  };
21512
21897
 
21513
- var Text$9 = antd.Typography.Text;
21898
+ var Text$8 = antd.Typography.Text;
21514
21899
  var PreviewModeAdvisary = function (_a) {
21515
21900
  var isInPreviewMode = _a.isInPreviewMode;
21516
21901
  if (!isInPreviewMode)
21517
21902
  return null;
21518
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full bunny-rounded" }, { children: jsxRuntime.jsx(Text$9, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
21903
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full bunny-rounded" }, { children: jsxRuntime.jsx(Text$8, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
21519
21904
  };
21520
21905
 
21521
21906
  var PlanManager = function (_a) {
@@ -21675,7 +22060,7 @@ var getFeatureUsage = function (_a) {
21675
22060
  });
21676
22061
  };
21677
22062
 
21678
- var StyledModal = defaultStyled(antd.Modal)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n z-index: 2000;\n\n .ant-modal-content {\n overflow: hidden;\n padding: 0 !important;\n }\n .ant-modal-body {\n height: min-content;\n max-height: ", ";\n overflow: auto;\n display: flex;\n flex-direction: column;\n padding: 0;\n }\n .ant-modal-footer {\n padding: 0 1.5rem 1.5rem;\n }\n"], ["\n z-index: 2000;\n\n .ant-modal-content {\n overflow: hidden;\n padding: 0 !important;\n }\n .ant-modal-body {\n height: min-content;\n max-height: ", ";\n overflow: auto;\n display: flex;\n flex-direction: column;\n padding: 0;\n }\n .ant-modal-footer {\n padding: 0 1.5rem 1.5rem;\n }\n"])), common.MODAL_MAX_HEIGHT);
22063
+ var StyledModal = defaultStyled(antd.Modal)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n z-index: 2000;\n\n .ant-modal-content {\n overflow: hidden;\n padding: 0 !important;\n }\n .ant-modal-body {\n height: min-content;\n max-height: ", ";\n overflow: auto;\n display: flex;\n flex-direction: column;\n padding: 0;\n }\n .ant-modal-footer {\n padding: 0 1.5rem 1.5rem;\n }\n"], ["\n z-index: 2000;\n\n .ant-modal-content {\n overflow: hidden;\n padding: 0 !important;\n }\n .ant-modal-body {\n height: min-content;\n max-height: ", ";\n overflow: auto;\n display: flex;\n flex-direction: column;\n padding: 0;\n }\n .ant-modal-footer {\n padding: 0 1.5rem 1.5rem;\n }\n"])), common.MODAL_MAX_HEIGHT);
21679
22064
  var HeaderModalWrapper = function (props) {
21680
22065
  var children = props.children, description = props.description, title = props.title;
21681
22066
  var modalProps = react.useMemo(function () {
@@ -21687,7 +22072,7 @@ var HeaderModalWrapper = function (props) {
21687
22072
  width: "75%",
21688
22073
  } }, { children: description })))] }))), children] })));
21689
22074
  };
21690
- var templateObject_1$2;
22075
+ var templateObject_1$3;
21691
22076
 
21692
22077
  var isPlural = pkg__default["default"].isPlural;
21693
22078
  var getDateFormat = function (dataInterval) {
@@ -21765,8 +22150,8 @@ var FeatureBarChart = function (_a) {
21765
22150
  position: { y: -62 },
21766
22151
  }))), jsxRuntime.jsx(recharts.Bar, { dataKey: featureName, fill: brandColor, activeBar: jsxRuntime.jsx(recharts.Rectangle, { fill: brandColor }) })] })));
21767
22152
  };
21768
- var StyledBarChart = defaultStyled(recharts.BarChart)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n .recharts-surface {\n overflow: visible;\n }\n"], ["\n .recharts-surface {\n overflow: visible;\n }\n"])));
21769
- var templateObject_1$1;
22153
+ var StyledBarChart = defaultStyled(recharts.BarChart)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n .recharts-surface {\n overflow: visible;\n }\n"], ["\n .recharts-surface {\n overflow: visible;\n }\n"])));
22154
+ var templateObject_1$2;
21770
22155
 
21771
22156
  var canShowQuantitiesInput = function (charge, subscription) {
21772
22157
  // Check if the subscription is active, pending, or in trial,
@@ -21776,7 +22161,7 @@ var canShowQuantitiesInput = function (charge, subscription) {
21776
22161
  var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE;
21777
22162
  var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
21778
22163
  var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL;
21779
- var isFlatPricing = charge.pricingModel === "FLAT";
22164
+ var isFlatPricing = charge.pricingModel === 'FLAT';
21780
22165
  var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
21781
22166
  !isFlatPricing &&
21782
22167
  charge.selfServiceQuantity &&
@@ -21785,9 +22170,7 @@ var canShowQuantitiesInput = function (charge, subscription) {
21785
22170
  return shouldProcessCharge;
21786
22171
  };
21787
22172
  var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
21788
- var quoteChange = quote.quoteChanges.find(function (quoteChange) {
21789
- return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id);
21790
- });
22173
+ var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
21791
22174
  var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
21792
22175
  var charges = [
21793
22176
  {
@@ -21815,6 +22198,49 @@ var canShowSubscriptionActions = function (subscription) {
21815
22198
  return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE ||
21816
22199
  ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
21817
22200
  };
22201
+ // Helper function to check if charge is a discount
22202
+ var isDiscount = function (kind) {
22203
+ return kind === common.QuoteChangeKind.DISCOUNT || kind === common.QuoteChangeKind.FREE_PERIOD_DISCOUNT;
22204
+ };
22205
+ var hasPriceTiers = function (charge) {
22206
+ var _a;
22207
+ return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
22208
+ };
22209
+ var getApplicablePriceTier = function (charge, currencyId) {
22210
+ var _a;
22211
+ if (!((_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length))
22212
+ return '';
22213
+ var selectedTier;
22214
+ // For TIERED pricing model: always show the first tier
22215
+ if (charge.pricingModel === common.PricingModel.TIERED) {
22216
+ selectedTier = charge.priceTiers[0];
22217
+ }
22218
+ // For VOLUME and BANDS pricing models: find the tier that contains the current quantity
22219
+ else if (charge.pricingModel === common.PricingModel.VOLUME ||
22220
+ charge.pricingModel === common.PricingModel.BANDS) {
22221
+ // Find the appropriate tier based on quantity
22222
+ selectedTier = charge.priceTiers.find(function (tier, index) {
22223
+ var nextTier = charge.priceTiers[index + 1];
22224
+ var tierStart = tier.starts;
22225
+ var tierEnd = nextTier ? nextTier.starts - 1 : Infinity;
22226
+ return charge.quantity >= tierStart && charge.quantity <= tierEnd;
22227
+ });
22228
+ // Fallback to first tier if no tier found (shouldn't happen with proper data)
22229
+ selectedTier = selectedTier || charge.priceTiers[0];
22230
+ }
22231
+ // Default fallback for any other pricing models
22232
+ else {
22233
+ selectedTier = charge.priceTiers[0];
22234
+ }
22235
+ if (!selectedTier)
22236
+ return '';
22237
+ // Calculate the tier range for display
22238
+ var tierIndex = charge.priceTiers.indexOf(selectedTier);
22239
+ var starts = selectedTier.starts;
22240
+ var nextTier = charge.priceTiers[tierIndex + 1];
22241
+ var ends = nextTier ? nextTier.starts - 1 : '∞';
22242
+ return "".concat(starts, "-").concat(ends, ": ").concat(common.formatCurrency(selectedTier.price, currencyId));
22243
+ };
21818
22244
 
21819
22245
  var SubscriptionCardActions = function (_a) {
21820
22246
  var _b, _c;
@@ -21827,7 +22253,7 @@ var SubscriptionCardActions = function (_a) {
21827
22253
  canShowSubscriptionActions(subscription) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [canShowCancelButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), canShowChangePlanButton && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL ? (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Upgrade" }))) : null;
21828
22254
  };
21829
22255
 
21830
- var Text$8 = antd.Typography.Text;
22256
+ var Text$7 = antd.Typography.Text;
21831
22257
  var getSubscriptionStatusText = function (subscription) {
21832
22258
  var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
21833
22259
  if (cancellationDate &&
@@ -21856,59 +22282,81 @@ var SubscriptionCardHeader = function (_a) {
21856
22282
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
21857
22283
  return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: {
21858
22284
  backgroundColor: darkMode ? "var(--row-background-dark)" : "",
21859
- } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$8, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsxRuntime.jsx(Text$8, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsxRuntime.jsx(Text$8, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
22285
+ } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsxRuntime.jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsxRuntime.jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
21860
22286
  };
21861
22287
 
21862
- var BillingPeriodConverter;
21863
- (function (BillingPeriodConverter) {
21864
- BillingPeriodConverter["ONCE"] = "once";
21865
- BillingPeriodConverter["MONTHLY"] = "monthly";
21866
- BillingPeriodConverter["ANNUAL"] = "annually";
21867
- BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
21868
- BillingPeriodConverter["QUARTERLY"] = "quarterly";
21869
- })(BillingPeriodConverter || (BillingPeriodConverter = {}));
21870
22288
  var SubscriptionChargeTotal = function (_a) {
21871
22289
  var charge = _a.charge, subscription = _a.subscription;
21872
- var billingPeriod = charge.billingPeriod && BillingPeriodConverter[charge.billingPeriod];
22290
+ var billingPeriod = charge.billingPeriod && BillingPeriodConverter$1[charge.billingPeriod];
21873
22291
  var isMobile = common.useIsMobile();
21874
22292
  var currencyId = subscription.currencyId;
21875
22293
  var formattedDiscountedPrice = common.formatCurrency(charge.price, currencyId);
21876
22294
  var formattedPeriodPrice = common.formatCurrency(charge.periodPrice, currencyId);
21877
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-gap-1 ".concat(isMobile ? "bunny-flex-col" : "") }, { children: charge.chargeType === common.ChargeType.USAGE || charge.trial
21878
- ? "-"
21879
- : charge.kind === common.SubscriptionChargeKind.DISCOUNT
22295
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-gap-1 ".concat(isMobile ? 'bunny-flex-col' : '') }, { children: charge.chargeType === common.ChargeType.USAGE || charge.trial
22296
+ ? '-'
22297
+ : charge.kind === common.QuoteChangeKind.DISCOUNT
21880
22298
  ? "-".concat(formattedDiscountedPrice, " ").concat(billingPeriod)
21881
22299
  : "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
21882
22300
  };
21883
22301
 
21884
- var Text$7 = antd.Typography.Text;
22302
+ var formatNumber = function (num, decimals) {
22303
+ if (decimals === void 0) { decimals = 2; }
22304
+ if (decimals && decimals > 20)
22305
+ decimals = 20;
22306
+ if (num === null || num === undefined || !num.toFixed)
22307
+ return num;
22308
+ if (isNaN(decimals))
22309
+ decimals = 2;
22310
+ return parseFloat(num.toFixed(decimals)).toLocaleString(navigator.language, {
22311
+ minimumFractionDigits: decimals,
22312
+ maximumFractionDigits: decimals,
22313
+ });
22314
+ };
22315
+
22316
+ var StyledTable = styled__default["default"](antd.Table)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n .ant-table-cell {\n border-bottom: none !important;\n }\n"], ["\n .ant-table-cell {\n border-bottom: none !important;\n }\n"])));
22317
+ var TieredDisplayDropdown = function (_a) {
22318
+ var _b;
22319
+ var charge = _a.charge, currencyId = _a.currencyId, truncatedText = _a.truncatedText;
22320
+ var onlyHasOneTier = ((_b = charge.priceTiers) === null || _b === void 0 ? void 0 : _b.length) === 1;
22321
+ var dropdownTrigger = (jsxRuntime.jsx("div", __assign({ className: "w-full ".concat(onlyHasOneTier ? '' : 'underline cursor-pointer') }, { children: truncatedText })));
22322
+ if (onlyHasOneTier) {
22323
+ return dropdownTrigger;
22324
+ }
22325
+ return (jsxRuntime.jsx(antd.Dropdown, __assign({ dropdownRender: function () {
22326
+ return (jsxRuntime.jsx("div", __assign({ className: "rounded border border-solid border-slate-200 bg-white overflow-hidden" }, { children: jsxRuntime.jsx(StyledTable, { columns: [
22327
+ {
22328
+ dataIndex: 'starts',
22329
+ title: 'From # of units',
22330
+ align: 'right',
22331
+ render: function (_, record, index) {
22332
+ var _a;
22333
+ record = record;
22334
+ var nextRecord = (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a[index + 1];
22335
+ var starts = record.starts;
22336
+ var ends = (nextRecord === null || nextRecord === void 0 ? void 0 : nextRecord.starts) ? nextRecord.starts - 1 : '∞';
22337
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [formatNumber(starts, 0), " -", ' ', typeof ends === 'number' ? formatNumber(ends, 0) : '∞'] }));
22338
+ },
22339
+ },
22340
+ {
22341
+ dataIndex: 'price',
22342
+ title: 'Unit price',
22343
+ align: 'right',
22344
+ render: function (value) {
22345
+ return jsxRuntime.jsx(jsxRuntime.Fragment, { children: common.formatCurrency(value, currencyId, charge.priceDecimals) });
22346
+ },
22347
+ },
22348
+ ], dataSource: charge.priceTiers, pagination: false, size: "small" }) })));
22349
+ } }, { children: dropdownTrigger })));
22350
+ };
22351
+ var templateObject_1$1;
22352
+
21885
22353
  var SubscriptionChargeUnitPrice = function (_a) {
21886
- var charge = _a.charge, subscription = _a.subscription;
21887
- var darkMode = react.useContext(BunnyContext).darkMode;
21888
- var _b = react.useState(false), showPriceTiers = _b[0], setShowPriceTiers = _b[1];
21889
- var displayPriceTiers = (charge === null || charge === void 0 ? void 0 : charge.priceTiers) && charge.pricingModel === common.PricingModel.TIERED;
21890
- var isDiscount = (charge === null || charge === void 0 ? void 0 : charge.kind) === common.SubscriptionChargeKind.DISCOUNT;
21891
- if (displayPriceTiers)
21892
- return (jsxRuntime.jsx(antd.Dropdown, __assign({ dropdownRender: function () {
21893
- var _a;
21894
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-rounded bunny-border bunny-border-solid bunny-border-slate-200 bunny-p-2", style: {
21895
- backgroundColor: darkMode
21896
- ? "var(--row-background-dark)"
21897
- : "var(--row-background)",
21898
- } }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-grid bunny-grid-cols-2", style: { columnGap: "0.5rem" } }, { children: (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.map(function (tier, index) {
21899
- var _a, _b, _c;
21900
- var ends = ((_b = (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a[index + 1]) === null || _b === void 0 ? void 0 : _b.starts)
21901
- ? ((_c = charge.priceTiers[index + 1]) === null || _c === void 0 ? void 0 : _c.starts) - 1
21902
- : "∞";
21903
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " :"] })), jsxRuntime.jsx("div", __assign({ className: "bunny-whitespace-nowrap bunny-text-right" }, { children: common.formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
21904
- }) })) })));
21905
- }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-cursor-pointer bunny-underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "Hide tiers" : "Show tiers" })) })));
21906
- else if (charge.chargeType === common.ChargeType.USAGE || charge.trial)
21907
- return jsxRuntime.jsx(Text$7, { children: "-" });
21908
- else if (isDiscount)
21909
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["-", common.formatCurrency(charge.discountedPrice, subscription.currencyId)] }));
21910
- else
21911
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: common.formatCurrency(charge.discountedPrice, subscription.currencyId) }));
22354
+ var charge = _a.charge, currencyId = _a.currencyId;
22355
+ var price = charge.trial
22356
+ ? '-'
22357
+ : common.formatCurrency(charge.discountedPrice, currencyId, charge.priceDecimals);
22358
+ var isChargeDiscount = isDiscount(charge.kind);
22359
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasPriceTiers(charge) ? (jsxRuntime.jsx(TieredDisplayDropdown, { charge: charge, currencyId: currencyId, truncatedText: "".concat(charge.kind === common.QuoteChangeKind.PRICE_UPDATE ? 'new ' : '').concat(getApplicablePriceTier(charge, currencyId)) })) : isChargeDiscount ? ("-".concat(price)) : (price) }));
21912
22360
  };
21913
22361
 
21914
22362
  var Text$6 = antd.Typography.Text;
@@ -21925,26 +22373,26 @@ var SubscriptionsListCell = function (_a) {
21925
22373
 
21926
22374
  var CARD_COLUMNS = [
21927
22375
  {
21928
- title: "CHARGE",
21929
- width: "minmax(min-content, 26%)",
22376
+ title: 'CHARGE',
22377
+ width: 'minmax(min-content, 26%)',
21930
22378
  },
21931
22379
  {
21932
- title: "PERIOD",
21933
- width: "minmax(min-content, 20%)",
22380
+ title: 'PERIOD',
22381
+ width: 'minmax(min-content, 20%)',
21934
22382
  },
21935
22383
  {
21936
- className: "text-right",
21937
- title: "QUANTITY",
22384
+ className: 'text-right',
22385
+ title: 'QUANTITY',
21938
22386
  width: "minmax(min-content, 18%)",
21939
22387
  },
21940
22388
  {
21941
- className: "text-right",
21942
- title: "UNIT PRICE",
22389
+ className: 'text-right',
22390
+ title: 'UNIT PRICE',
21943
22391
  width: "minmax(min-content, 18%)",
21944
22392
  },
21945
22393
  {
21946
- className: "text-right",
21947
- title: "TOTAL",
22394
+ className: 'text-right',
22395
+ title: 'TOTAL',
21948
22396
  width: "minmax(min-content, 18%)",
21949
22397
  },
21950
22398
  ];
@@ -21954,13 +22402,13 @@ var SubscriptionCardDesktop = function (_a) {
21954
22402
  var shadow = react.useContext(SubscriptionsContext).shadow;
21955
22403
  // Derived state
21956
22404
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
21957
- return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
21958
- gridColumn: "1 / 5",
21959
- width: "calc(100% + 32px)",
21960
- transform: "translateX(-16px)",
22405
+ return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : '') }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
22406
+ gridColumn: '1 / 5',
22407
+ width: 'calc(100% + 32px)',
22408
+ transform: 'translateX(-16px)',
21961
22409
  } }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
21962
- gridTemplateColumns: CARD_COLUMNS.map(function (column) { return column.width; }).join(" "),
21963
- rowGap: "0.75rem",
22410
+ gridTemplateColumns: CARD_COLUMNS.map(function (column) { return column.width; }).join(' '),
22411
+ rowGap: '0.75rem',
21964
22412
  } }, { children: [jsxRuntime.jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), subscription.charges.map(function (charge, chargeIndex) {
21965
22413
  if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
21966
22414
  return null;
@@ -21980,7 +22428,7 @@ var SubscriptionCardDesktopRow = function (_a) {
21980
22428
  var chargePeriod = "".concat(common.formatDate(charge.startDate), " - ").concat(common.formatDate(charge.endDate));
21981
22429
  // Queries
21982
22430
  var data = reactQuery.useQuery({
21983
- queryKey: ["getFeatureUsage", charge.id, charge.startDate, charge.endDate],
22431
+ queryKey: ['getFeatureUsage', charge.id, charge.startDate, charge.endDate],
21984
22432
  queryFn: function () {
21985
22433
  return getFeatureUsage({
21986
22434
  endDate: charge.endDate,
@@ -21994,18 +22442,18 @@ var SubscriptionCardDesktopRow = function (_a) {
21994
22442
  }).data;
21995
22443
  var isRampFirstRow = isRamp && chargeIndex === 0;
21996
22444
  var isTrial = charge.trial;
21997
- var isDiscount = charge.kind === common.SubscriptionChargeKind.DISCOUNT;
22445
+ var isDiscount = charge.kind === common.QuoteChangeKind.DISCOUNT;
21998
22446
  var dontShowChargeName = (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId) === charge.priceListChargeId &&
21999
22447
  !isDiscount &&
22000
22448
  (!isTrial || prevCharge.trial) &&
22001
22449
  (isTrial || !prevCharge.trial);
22002
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? "1/-1" : "1" }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isDiscount ? "bunny-pl-4" : "") }, { children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : "" }) })) }))), jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsxRuntime.jsx("div", { children: chargePeriod }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
22003
- ? ""
22450
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? '1/-1' : '1' }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isDiscount ? 'bunny-pl-4' : '') }, { children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : '' }) })) }))), jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsxRuntime.jsx("div", { children: chargePeriod }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === common.QuoteChangeKind.DISCOUNT
22451
+ ? ''
22004
22452
  : charge.chargeType === common.ChargeType.USAGE
22005
22453
  ? data && jsxRuntime.jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
22006
22454
  : charge.isAmendment
22007
22455
  ? "+".concat((_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString())
22008
- : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
22456
+ : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
22009
22457
  };
22010
22458
 
22011
22459
  var Text$4 = antd.Typography.Text;
@@ -22016,19 +22464,19 @@ var SubscriptionCardCellMobile = function (_a) {
22016
22464
 
22017
22465
  var CHARGE_COLUMNS = [
22018
22466
  {
22019
- title: "CHARGE",
22467
+ title: 'CHARGE',
22020
22468
  },
22021
22469
  {
22022
- className: "text-right",
22023
- title: "QUANTITY",
22470
+ className: 'text-right',
22471
+ title: 'QUANTITY',
22024
22472
  },
22025
22473
  {
22026
- className: "text-right",
22027
- title: "UNIT PRICE",
22474
+ className: 'text-right',
22475
+ title: 'UNIT PRICE',
22028
22476
  },
22029
22477
  {
22030
- className: "text-right",
22031
- title: "TOTAL",
22478
+ className: 'text-right',
22479
+ title: 'TOTAL',
22032
22480
  },
22033
22481
  ];
22034
22482
  var SubscriptionCard = function (_a) {
@@ -22037,26 +22485,22 @@ var SubscriptionCard = function (_a) {
22037
22485
  var darkMode = react.useContext(BunnyContext).darkMode;
22038
22486
  // Derived state
22039
22487
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
22040
- var backgroundColor = darkMode
22041
- ? "var(--row-background-dark)"
22042
- : "var(--row-background)";
22488
+ var backgroundColor = darkMode ? 'var(--row-background-dark)' : 'var(--row-background)';
22043
22489
  return (jsxRuntime.jsx(Card, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-p-4" }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
22044
- gridColumn: "1 / -1",
22045
- width: "calc(100% + 32px)",
22046
- transform: "translateX(-16px)",
22490
+ gridColumn: '1 / -1',
22491
+ width: 'calc(100% + 32px)',
22492
+ transform: 'translateX(-16px)',
22047
22493
  } }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid", style: {
22048
- columnGap: "0.5rem",
22494
+ columnGap: '0.5rem',
22049
22495
  gridTemplateColumns: "1fr auto auto auto",
22050
- rowGap: "0.75rem",
22496
+ rowGap: '0.75rem',
22051
22497
  backgroundColor: backgroundColor,
22052
- } }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }), subscription.charges.map(function (charge, chargeIndex) {
22498
+ } }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: '11px' } }, { children: subscriptionColumn.title }), index)); }), subscription.charges.map(function (charge, chargeIndex) {
22053
22499
  if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
22054
22500
  return null;
22055
22501
  var isRamp = charge.isRamp;
22056
22502
  var chargePeriod = "".concat(common.formatDate(charge.startDate), " - ").concat(common.formatDate(charge.endDate));
22057
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxRuntime.jsxs(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? "1/-1" : "1" } }, { children: [jsxRuntime.jsx("span", { children: charge.name }), !isRamp ? " - ".concat(chargePeriod) : ""] }))), isRamp && (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className }, { children: "- ".concat(chargePeriod) }))), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[1].className }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
22058
- ? ""
22059
- : charge.quantity })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[2].className }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[3].className }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] }), chargeIndex));
22503
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxRuntime.jsxs(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? '1/-1' : '1' } }, { children: [jsxRuntime.jsx("span", { children: charge.name }), !isRamp ? " - ".concat(chargePeriod) : ''] }))), isRamp && (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className }, { children: "- ".concat(chargePeriod) }))), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[1].className }, { children: charge.kind === common.QuoteChangeKind.DISCOUNT ? '' : charge.quantity })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[2].className }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[3].className }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] }), chargeIndex));
22060
22504
  })] }))] })) }));
22061
22505
  };
22062
22506