@bunnyapp/components 1.0.60 → 1.0.62-beta.0

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 (98) hide show
  1. package/dist/cjs/index.js +939 -502
  2. package/dist/cjs/src/components/Checkout/Checkout.d.ts +2 -2
  3. package/dist/cjs/src/components/Checkout/QuoteCheckout.d.ts +2 -2
  4. package/dist/cjs/src/components/CustomizedAntdComponents/Tag.d.ts +3 -1
  5. package/dist/cjs/src/components/Invoice/Invoice.d.ts +2 -2
  6. package/dist/cjs/src/components/Invoice/InvoiceQuoteView.d.ts +2 -2
  7. package/dist/cjs/src/components/LegacyInvoicePDF.d.ts +3 -4
  8. package/dist/cjs/src/components/PaymentForm/CheckoutFooter.d.ts +7 -2
  9. package/dist/cjs/src/components/PaymentForm/CouponEditor.d.ts +8 -0
  10. package/dist/cjs/src/components/PaymentForm/DemoPay/hooks/useApproveHold.d.ts +13 -0
  11. package/dist/cjs/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +2 -2
  12. package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +6 -1
  13. package/dist/cjs/src/components/PaymentForm/PaymentMethodSelector.d.ts +1 -1
  14. package/dist/cjs/src/components/PaymentForm/Stripe/hooks/useApproveHold.d.ts +13 -0
  15. package/dist/cjs/src/components/PaymentForm/Stripe/stripeUtils.d.ts +9 -2
  16. package/dist/cjs/src/components/Quote/AcceptQuoteModal.d.ts +2 -1
  17. package/dist/cjs/src/components/Quote/PaymentHoldModal.d.ts +7 -0
  18. package/dist/cjs/src/components/Quote/Quote.stories.d.ts +5 -5
  19. package/dist/cjs/src/components/Signup/PriceListDisplay.d.ts +3 -4
  20. package/dist/cjs/src/components/Signup/Signup.d.ts +5 -5
  21. package/dist/cjs/src/components/Signup/Signup.stories.d.ts +2 -3
  22. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanManager.d.ts +4 -0
  23. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +1 -1
  24. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +4 -1
  25. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +1 -1
  26. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +1 -1
  27. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +1 -1
  28. package/dist/cjs/src/components/Subscriptions/Subscriptions.d.ts +2 -1
  29. package/dist/cjs/src/components/Subscriptions/SubscriptionsContext.d.ts +3 -2
  30. package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +2 -2
  31. package/dist/cjs/src/components/icons/CardIcon.d.ts +3 -1
  32. package/dist/cjs/src/graphql/mutations/checkout.d.ts +1 -1
  33. package/dist/cjs/src/graphql/mutations/quoteAddCoupon.d.ts +1 -1
  34. package/dist/cjs/src/graphql/mutations/quoteCompose.d.ts +2 -2
  35. package/dist/cjs/src/graphql/queries/getBillingDetails.d.ts +2 -2
  36. package/dist/cjs/src/graphql/queries/getBranding.d.ts +2 -2
  37. package/dist/cjs/src/graphql/queries/getFeatureUsage.d.ts +1 -1
  38. package/dist/cjs/src/graphql/queries/getFormattedQuote.d.ts +1 -1
  39. package/dist/cjs/src/graphql/queries/getPlanChangeOptions.d.ts +1 -1
  40. package/dist/cjs/src/graphql/queries/getPriceList.d.ts +1 -1
  41. package/dist/cjs/src/graphql/queries/getPriceListChangeOptions.d.ts +1 -1
  42. package/dist/cjs/src/graphql/queries/getQuote.d.ts +1 -1
  43. package/dist/cjs/src/graphql/queries/getQuoteFirstInvoice.d.ts +7 -0
  44. package/dist/cjs/src/graphql/queries/getTaxationRequiredAccountFields.d.ts +1 -1
  45. package/dist/cjs/src/hooks/quotes/useSendAcceptQuote.d.ts +3 -2
  46. package/dist/cjs/src/mocks/handlers.d.ts +1 -1
  47. package/dist/cjs/src/utils/apiUtils.d.ts +8 -0
  48. package/dist/esm/index.js +916 -479
  49. package/dist/esm/src/components/Checkout/Checkout.d.ts +2 -2
  50. package/dist/esm/src/components/Checkout/QuoteCheckout.d.ts +2 -2
  51. package/dist/esm/src/components/CustomizedAntdComponents/Tag.d.ts +3 -1
  52. package/dist/esm/src/components/Invoice/Invoice.d.ts +2 -2
  53. package/dist/esm/src/components/Invoice/InvoiceQuoteView.d.ts +2 -2
  54. package/dist/esm/src/components/LegacyInvoicePDF.d.ts +3 -4
  55. package/dist/esm/src/components/PaymentForm/CheckoutFooter.d.ts +7 -2
  56. package/dist/esm/src/components/PaymentForm/CouponEditor.d.ts +8 -0
  57. package/dist/esm/src/components/PaymentForm/DemoPay/hooks/useApproveHold.d.ts +13 -0
  58. package/dist/esm/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +2 -2
  59. package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +6 -1
  60. package/dist/esm/src/components/PaymentForm/PaymentMethodSelector.d.ts +1 -1
  61. package/dist/esm/src/components/PaymentForm/Stripe/hooks/useApproveHold.d.ts +13 -0
  62. package/dist/esm/src/components/PaymentForm/Stripe/stripeUtils.d.ts +9 -2
  63. package/dist/esm/src/components/Quote/AcceptQuoteModal.d.ts +2 -1
  64. package/dist/esm/src/components/Quote/PaymentHoldModal.d.ts +7 -0
  65. package/dist/esm/src/components/Quote/Quote.stories.d.ts +5 -5
  66. package/dist/esm/src/components/Signup/PriceListDisplay.d.ts +3 -4
  67. package/dist/esm/src/components/Signup/Signup.d.ts +5 -5
  68. package/dist/esm/src/components/Signup/Signup.stories.d.ts +2 -3
  69. package/dist/esm/src/components/Subscriptions/PlanManager/PlanManager.d.ts +4 -0
  70. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +1 -1
  71. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +4 -1
  72. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +1 -1
  73. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +1 -1
  74. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +1 -1
  75. package/dist/esm/src/components/Subscriptions/Subscriptions.d.ts +2 -1
  76. package/dist/esm/src/components/Subscriptions/SubscriptionsContext.d.ts +3 -2
  77. package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +2 -2
  78. package/dist/esm/src/components/icons/CardIcon.d.ts +3 -1
  79. package/dist/esm/src/graphql/mutations/checkout.d.ts +1 -1
  80. package/dist/esm/src/graphql/mutations/quoteAddCoupon.d.ts +1 -1
  81. package/dist/esm/src/graphql/mutations/quoteCompose.d.ts +2 -2
  82. package/dist/esm/src/graphql/queries/getBillingDetails.d.ts +2 -2
  83. package/dist/esm/src/graphql/queries/getBranding.d.ts +2 -2
  84. package/dist/esm/src/graphql/queries/getFeatureUsage.d.ts +1 -1
  85. package/dist/esm/src/graphql/queries/getFormattedQuote.d.ts +1 -1
  86. package/dist/esm/src/graphql/queries/getPlanChangeOptions.d.ts +1 -1
  87. package/dist/esm/src/graphql/queries/getPriceList.d.ts +1 -1
  88. package/dist/esm/src/graphql/queries/getPriceListChangeOptions.d.ts +1 -1
  89. package/dist/esm/src/graphql/queries/getQuote.d.ts +1 -1
  90. package/dist/esm/src/graphql/queries/getQuoteFirstInvoice.d.ts +7 -0
  91. package/dist/esm/src/graphql/queries/getTaxationRequiredAccountFields.d.ts +1 -1
  92. package/dist/esm/src/hooks/quotes/useSendAcceptQuote.d.ts +3 -2
  93. package/dist/esm/src/mocks/handlers.d.ts +1 -1
  94. package/dist/esm/src/utils/apiUtils.d.ts +8 -0
  95. package/dist/index.d.ts +11 -5
  96. package/package.json +3 -3
  97. package/dist/cjs/src/components/Checkout/CouponComponent.d.ts +0 -7
  98. package/dist/esm/src/components/Checkout/CouponComponent.d.ts +0 -7
package/dist/cjs/index.js CHANGED
@@ -73,7 +73,7 @@ function styleInject(css, ref) {
73
73
  }
74
74
  }
75
75
 
76
- var css_248z = ".ant-popover {\n z-index: 1050;\n}\n.ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n}\n.ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ant-btn-link:disabled {\n color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n background-color: transparent !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n color: #232323 !important;\n font-size: 14px !important;\n word-break: break-all !important;\n overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff6e1c !important;\n font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-menu-submenu::after {\n display: none !important;\n}\n:root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n position: fixed;\n}\n.bunny-absolute {\n position: absolute;\n}\n.bunny-relative {\n position: relative;\n}\n.bunny-sticky {\n position: sticky;\n}\n.bunny-bottom-0 {\n bottom: 0px;\n}\n.bunny-bottom-4 {\n bottom: 1rem;\n}\n.bunny-left-0 {\n left: 0px;\n}\n.bunny-right-0 {\n right: 0px;\n}\n.bunny-top-0 {\n top: 0px;\n}\n.bunny-col-span-full {\n grid-column: 1 / -1;\n}\n.bunny-m-0 {\n margin: 0px;\n}\n.bunny-mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.bunny-mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.bunny-my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-2 {\n padding: 0.5rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pb-8 {\n padding-bottom: 2rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
76
+ var css_248z = ".ant-popover {\n z-index: 1050;\n}\n.ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n}\n.ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ant-btn-link:disabled {\n color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n background-color: transparent !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n color: #232323 !important;\n font-size: 14px !important;\n word-break: break-all !important;\n overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff6e1c !important;\n font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-menu-submenu::after {\n display: none !important;\n}\n:root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n box-sizing: border-box;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n position: fixed;\n}\n.bunny-absolute {\n position: absolute;\n}\n.bunny-relative {\n position: relative;\n}\n.bunny-sticky {\n position: sticky;\n}\n.bunny-bottom-0 {\n bottom: 0px;\n}\n.bunny-bottom-4 {\n bottom: 1rem;\n}\n.bunny-left-0 {\n left: 0px;\n}\n.bunny-right-0 {\n right: 0px;\n}\n.bunny-top-0 {\n top: 0px;\n}\n.bunny-col-span-full {\n grid-column: 1 / -1;\n}\n.bunny-m-0 {\n margin: 0px;\n}\n.bunny-mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.bunny-mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n margin-top: 6rem;\n margin-bottom: 6rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n margin-top: 6rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-1\\/2 {\n height: 50%;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-h-screen {\n height: 100vh;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-3\\/5 {\n width: 60%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-w-screen {\n width: 100vw;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-items-start {\n align-items: flex-start;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-2 {\n padding: 0.5rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pb-8 {\n padding-bottom: 2rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pr-4 {\n padding-right: 1rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-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
77
  styleInject(css_248z);
78
78
 
79
79
  /******************************************************************************
@@ -170,15 +170,67 @@ var BrandContext = react.createContext({
170
170
  topNavImageUrl: common.DEFAULT_TOP_NAV_IMAGE_URL,
171
171
  });
172
172
 
173
- var MUTATION$9 = "\n query entityBranding {\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }\n";
173
+ // This will be replaced at build time by rollup-plugin-replace
174
+ var PACKAGE_VERSION = '1.0.62-beta.0';
175
+ var createRequestHeaders = function (token) {
176
+ var _a;
177
+ var bearerToken = token ? "Bearer ".concat(token) : null;
178
+ var headers = (_a = {
179
+ 'Content-type': 'application/json; charset=utf-8'
180
+ },
181
+ _a[common.X_BUNNY_COMPONENTS_VERSION_HEADER_NAME] = PACKAGE_VERSION,
182
+ _a);
183
+ if (bearerToken) {
184
+ headers['Authorization'] = bearerToken;
185
+ }
186
+ return headers;
187
+ };
188
+ var getGraphQLBaseURL = function (apiHost) {
189
+ return "".concat(apiHost, "/graphql");
190
+ };
191
+ var useGraphQLRequest = function () { return function (query, apiHost, token, variables) { return __awaiter(void 0, void 0, void 0, function () {
192
+ var error_1;
193
+ return __generator(this, function (_a) {
194
+ switch (_a.label) {
195
+ case 0:
196
+ _a.trys.push([0, 2, , 3]);
197
+ return [4 /*yield*/, request__default["default"](getGraphQLBaseURL(apiHost), query, variables, createRequestHeaders(token))];
198
+ case 1: return [2 /*return*/, _a.sent()];
199
+ case 2:
200
+ error_1 = _a.sent();
201
+ throw error_1;
202
+ case 3: return [2 /*return*/];
203
+ }
204
+ });
205
+ }); }; };
206
+ var gqlRequest = function (_a) {
207
+ var query = _a.query, apiHost = _a.apiHost, token = _a.token, vars = _a.vars, isInPreviewMode = _a.isInPreviewMode;
208
+ return __awaiter(void 0, void 0, void 0, function () {
209
+ return __generator(this, function (_b) {
210
+ switch (_b.label) {
211
+ case 0: return [4 /*yield*/, common.gqlRequest({
212
+ query: query,
213
+ apiHost: apiHost,
214
+ token: token,
215
+ vars: vars,
216
+ componentsVersion: PACKAGE_VERSION,
217
+ isInPreviewMode: isInPreviewMode,
218
+ })];
219
+ case 1: return [2 /*return*/, _b.sent()];
220
+ }
221
+ });
222
+ });
223
+ };
224
+
225
+ var MUTATION$a = "\n query entityBranding {\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }\n";
174
226
  var getBranding = function (_a) {
175
227
  var token = _a.token, apiHost = _a.apiHost;
176
228
  return __awaiter(void 0, void 0, void 0, function () {
177
229
  var response;
178
230
  return __generator(this, function (_b) {
179
231
  switch (_b.label) {
180
- case 0: return [4 /*yield*/, common.gqlRequest({
181
- query: MUTATION$9,
232
+ case 0: return [4 /*yield*/, gqlRequest({
233
+ query: MUTATION$a,
182
234
  token: token,
183
235
  apiHost: apiHost,
184
236
  })];
@@ -221,7 +273,7 @@ function BunnyProvider(_a) {
221
273
  apiHost: apiHost,
222
274
  token: token,
223
275
  onTokenExpired: onTokenExpired,
224
- } }, { children: jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsxRuntime.jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children: children })) })) })));
276
+ } }, { children: jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsxRuntime.jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-component-wrapper" }, { children: children })) })) })) })));
225
277
  }
226
278
  function ContextualWrapper(_a) {
227
279
  var children = _a.children, darkMode = _a.darkMode, configProviderProps = _a.configProviderProps;
@@ -229,6 +281,7 @@ function ContextualWrapper(_a) {
229
281
  var branding = reactQuery.useQuery({
230
282
  queryKey: common.QueryKeyFactory.default.brandingKey(token),
231
283
  queryFn: function () { return getBranding({ token: token, apiHost: apiHost }); },
284
+ staleTime: 1000 * 60 * 5, // 5 minutes
232
285
  }).data;
233
286
  var isMobile = common.useIsMobile();
234
287
  var entityBranding = react.useMemo(function () {
@@ -365,49 +418,46 @@ var InvoiceQuoteView = function (_a) {
365
418
  var _b = react.useContext(InvoiceQuoteContext), shadow = _b.shadow, hideDownloadButton = _b.hideDownloadButton;
366
419
  var isMobile = common.useIsMobile();
367
420
  var buttonsVisible = formattedInvoice && (!hideDownloadButton || onBackButtonClick);
368
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-grow ".concat(isMobile ? "bunny-overflow-hidden" : "") }, { children: [buttonsVisible ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between bunny-items-center bunny-pb-4 ".concat(isMobile ? "bunny-shadow-padding-x" : ""), id: "acceptance" }, { children: [jsxRuntime.jsx("div", { children: onBackButtonClick ? (jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-pl-0", onClick: onBackButtonClick, style: {
421
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-grow ".concat(isMobile ? 'bunny-overflow-hidden' : '') }, { children: [buttonsVisible ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between bunny-items-center bunny-pb-4 ".concat(isMobile ? 'bunny-shadow-padding-x' : ''), id: "acceptance" }, { children: [jsxRuntime.jsx("div", { children: onBackButtonClick ? (jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-pl-0", onClick: onBackButtonClick, style: {
369
422
  color: secondaryColor,
370
- }, type: "link" }, { children: backButtonName || "Back" }))) : null }), !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
371
- return downloadFile(apiHost + "/api/pdf/invoice/" + formattedInvoice.id, token);
372
- } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : "bunny-shadow-md", " bunny-rounded-md"), style: {
373
- minWidth: "750px",
423
+ }, type: "link" }, { children: backButtonName || 'Back' }))) : null }), !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
424
+ return downloadFile(apiHost + '/api/pdf/invoice/' + formattedInvoice.id, token);
425
+ } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
426
+ minWidth: '750px',
374
427
  } }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] })))] })));
375
428
  };
376
429
  var templateObject_1$b;
377
430
 
378
- var fetchPDF = function (apiEndpoint, invoiceUuid, token) { return __awaiter(void 0, void 0, void 0, function () {
431
+ var fetchPDF = function (apiHost, documentUuid, documentType, token) { return __awaiter(void 0, void 0, void 0, function () {
379
432
  var response;
380
433
  return __generator(this, function (_a) {
381
434
  switch (_a.label) {
382
435
  case 0:
383
- if (!invoiceUuid) {
384
- throw new Error("Invoice ID is required to fetch PDF");
436
+ if (!documentUuid) {
437
+ throw new Error('Invoice ID is required to fetch PDF');
385
438
  }
386
- return [4 /*yield*/, fetch("".concat(apiEndpoint, "/api/legacy_invoices/").concat(invoiceUuid), {
387
- method: "GET",
439
+ return [4 /*yield*/, fetch("".concat(apiHost, "/api/legacy_documents/").concat(documentUuid, "?type=").concat(documentType), {
388
440
  headers: {
389
- "Content-type": "application/json; charset=utf-8",
390
441
  Authorization: "Bearer ".concat(token),
391
442
  },
392
- // body: JSON.stringify({
393
- // query: transactionMutation(filter),
394
- // }),
395
443
  })];
396
444
  case 1:
397
445
  response = _a.sent();
398
446
  if (!response.ok)
399
- throw new Error("Failed to fetch PDF");
447
+ throw new Error('Failed to fetch PDF');
400
448
  return [2 /*return*/, response.blob()]; // Return the PDF as a blob
401
449
  }
402
450
  });
403
451
  }); };
404
- function InvoicePDF(_a) {
405
- var invoiceUuid = _a.invoiceUuid, apiHost = _a.apiHost, token = _a.token;
452
+ function LegacyDocument(_a) {
453
+ var documentUuid = _a.documentUuid, documentType = _a.documentType;
454
+ var apiHost = react.useContext(BunnyContext).apiHost;
406
455
  var _b = react.useState(undefined), pdfUrl = _b[0], setPdfUrl = _b[1];
456
+ var token = useToken();
407
457
  var _c = reactQuery.useQuery({
408
- queryKey: ["invoicePDF", invoiceUuid],
409
- queryFn: function () { return fetchPDF(apiHost || "", invoiceUuid, token); },
410
- enabled: Boolean(invoiceUuid),
458
+ queryKey: ['documentPDF', documentUuid],
459
+ queryFn: function () { return fetchPDF(apiHost, documentUuid, documentType, token); },
460
+ enabled: Boolean(documentUuid),
411
461
  }), pdfBlob = _c.data, isLoading = _c.isLoading;
412
462
  react.useEffect(function () {
413
463
  if (pdfBlob) {
@@ -419,10 +469,10 @@ function InvoicePDF(_a) {
419
469
  if (isLoading || !pdfUrl)
420
470
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
421
471
  return (jsxRuntime.jsx("iframe", { src: pdfUrl, style: {
422
- border: "none",
423
- gridColumn: "1/-1",
424
- minHeight: "1000px",
425
- minWidth: "780px",
472
+ border: 'none',
473
+ gridColumn: '1/-1',
474
+ minHeight: '1000px',
475
+ minWidth: '780px',
426
476
  }, title: "Invoice PDF", width: "100%" }));
427
477
  }
428
478
 
@@ -434,7 +484,7 @@ var getPaymentMethods = function (_a) {
434
484
  var _b;
435
485
  return __generator(this, function (_c) {
436
486
  switch (_c.label) {
437
- case 0: return [4 /*yield*/, common.gqlRequest({
487
+ case 0: return [4 /*yield*/, gqlRequest({
438
488
  query: paymentMethodsQuery(accountId ? "filter: \"accountId is ".concat(accountId, "\"") : ''),
439
489
  token: token,
440
490
  apiHost: apiHost,
@@ -455,6 +505,7 @@ var usePaymentMethod = function (_a) {
455
505
  token: token,
456
506
  }),
457
507
  queryFn: function () { return getPaymentMethods({ apiHost: apiHost, token: token, accountId: accountId }); },
508
+ staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
458
509
  }), data = _b.data, isLoading = _b.isLoading;
459
510
  return {
460
511
  paymentMethods: data,
@@ -471,7 +522,7 @@ var filterPaymentPlugins = function (plugins) {
471
522
  ((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.frontend) === null || _d === void 0 ? void 0 : _d.length);
472
523
  });
473
524
  };
474
- var MUTATION$8 = "{\n paymentPlugins {\n enabled\n entities\n guid\n hidden\n id\n name\n status\n type\n webhookEnabled\n components\n }\n}";
525
+ var MUTATION$9 = "{\n paymentPlugins {\n enabled\n entities\n guid\n hidden\n id\n name\n status\n type\n webhookEnabled\n components\n }\n}";
475
526
  var getPaymentPlugins = function (_a) {
476
527
  var apiHost = _a.apiHost, token = _a.token;
477
528
  return __awaiter(void 0, void 0, void 0, function () {
@@ -480,8 +531,8 @@ var getPaymentPlugins = function (_a) {
480
531
  switch (_b.label) {
481
532
  case 0:
482
533
  _b.trys.push([0, 2, , 3]);
483
- return [4 /*yield*/, common.gqlRequest({
484
- query: MUTATION$8,
534
+ return [4 /*yield*/, gqlRequest({
535
+ query: MUTATION$9,
485
536
  token: token,
486
537
  apiHost: apiHost,
487
538
  })];
@@ -501,6 +552,7 @@ var usePaymentPlugins = function (_a) {
501
552
  var _b = reactQuery.useQuery({
502
553
  queryKey: ['paymentPlugins', token],
503
554
  queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token }); },
555
+ staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
504
556
  }), paymentPlugins = _b.data, isFetched = _b.isFetched;
505
557
  var filteredPaymentPlugins = filterPaymentPlugins(paymentPlugins);
506
558
  var paymentMethodAllowedPlugins = filteredPaymentPlugins === null || filteredPaymentPlugins === void 0 ? void 0 : filteredPaymentPlugins.filter(function (plugin) {
@@ -514,10 +566,10 @@ var usePaymentPlugins = function (_a) {
514
566
  };
515
567
 
516
568
  var getQuoteAmountDue = function (quote) {
517
- return quote.amountDue;
569
+ return quote.amountDue || quote.amount;
518
570
  };
519
571
 
520
- var MUTATION$7 = "\n mutation checkout(\n $invoiceId: ID,\n $quoteId: ID,\n $paymentMethodId: ID,\n $paymentMethodData: CheckoutPaymentMethodAttributes\n ) {\n checkout(\n invoiceId: $invoiceId,\n quoteId: $quoteId,\n paymentMethodId: $paymentMethodId,\n paymentMethodData: $paymentMethodData\n ) {\n invoice {\n id\n state\n amount\n amountDue\n }\n payment {\n id\n state\n amount\n }\n paymentApplication {\n id\n invoiceId\n paymentId\n }\n transaction {\n id\n amount\n }\n }\n }\n";
572
+ var MUTATION$8 = "\n mutation checkout(\n $invoiceId: ID,\n $quoteId: ID,\n $paymentMethodId: ID,\n $paymentMethodData: CheckoutPaymentMethodAttributes\n ) {\n checkout(\n invoiceId: $invoiceId,\n quoteId: $quoteId,\n paymentMethodId: $paymentMethodId,\n paymentMethodData: $paymentMethodData\n ) {\n invoice {\n id\n state\n amount\n amountDue\n }\n payment {\n id\n state\n amount\n }\n paymentApplication {\n id\n invoiceId\n paymentId\n }\n transaction {\n id\n amount\n }\n }\n }\n";
521
573
  var checkout = function (_a) {
522
574
  var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
523
575
  return __awaiter(void 0, void 0, void 0, function () {
@@ -533,8 +585,8 @@ var checkout = function (_a) {
533
585
  if (paymentMethodData) {
534
586
  mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
535
587
  }
536
- return [4 /*yield*/, common.gqlRequest({
537
- query: MUTATION$7,
588
+ return [4 /*yield*/, gqlRequest({
589
+ query: MUTATION$8,
538
590
  token: token,
539
591
  vars: mutationVars,
540
592
  apiHost: apiHost,
@@ -559,14 +611,13 @@ function usePay$1(_a) {
559
611
  var customCheckoutFunction = react.useContext(PaymentContext).customCheckoutFunction;
560
612
  var token = useToken();
561
613
  var pay = function () { return __awaiter(_this, void 0, void 0, function () {
562
- var amountDue, currencyId, response, response, error_1;
614
+ var currencyId, response, response, error_1;
563
615
  return __generator(this, function (_a) {
564
616
  switch (_a.label) {
565
617
  case 0:
566
- amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
567
618
  currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
568
- if (!amountDue || !currencyId) {
569
- throw new Error("No amount or currencyId");
619
+ if (!currencyId) {
620
+ throw new Error('No currencyId');
570
621
  }
571
622
  _a.label = 1;
572
623
  case 1:
@@ -600,6 +651,212 @@ function usePay$1(_a) {
600
651
  return { pay: pay };
601
652
  }
602
653
 
654
+ var createPaymentMethod = function (_a) {
655
+ var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
656
+ return __awaiter(void 0, void 0, void 0, function () {
657
+ var response;
658
+ return __generator(this, function (_b) {
659
+ switch (_b.label) {
660
+ case 0: return [4 /*yield*/, common.invokePlugin({
661
+ plugin: plugin,
662
+ method: 'store_payment_method',
663
+ payload: {
664
+ payment_method_id: paymentMethodId,
665
+ account_id: accountId,
666
+ },
667
+ token: token,
668
+ apiHost: apiHost,
669
+ })];
670
+ case 1:
671
+ response = _b.sent();
672
+ if (response.status !== 'success')
673
+ throw new Error(response.message || 'Unknown error');
674
+ return [2 /*return*/, response];
675
+ }
676
+ });
677
+ });
678
+ };
679
+ var createSetupIntent = function (plugin, apiHost, token, accountId) {
680
+ return common.invokePlugin({
681
+ plugin: plugin,
682
+ method: 'create_setup_intent',
683
+ token: token,
684
+ apiHost: apiHost,
685
+ payload: {
686
+ account_id: accountId,
687
+ },
688
+ });
689
+ };
690
+ var createPaymentHold = function (_a) {
691
+ var quote = _a.quote, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, paymentMethodId = _a.paymentMethodId;
692
+ return __awaiter(void 0, void 0, void 0, function () {
693
+ var payload, response;
694
+ return __generator(this, function (_b) {
695
+ switch (_b.label) {
696
+ case 0:
697
+ payload = {
698
+ quote_id: quote.id,
699
+ amount: quote.amount,
700
+ payment_method_id: paymentMethodId,
701
+ };
702
+ return [4 /*yield*/, common.invokePlugin({
703
+ plugin: plugin,
704
+ method: 'create_payment_hold',
705
+ payload: payload,
706
+ token: token,
707
+ apiHost: apiHost,
708
+ })];
709
+ case 1:
710
+ response = _b.sent();
711
+ if (response.status !== 'success')
712
+ throw new Error(response.message || 'Unknown error');
713
+ return [2 /*return*/, response];
714
+ }
715
+ });
716
+ });
717
+ };
718
+ var fetchStripeKey = function (plugin, apiHost, token, accountId) { return __awaiter(void 0, void 0, void 0, function () {
719
+ var response;
720
+ return __generator(this, function (_a) {
721
+ switch (_a.label) {
722
+ case 0: return [4 /*yield*/, common.invokePlugin({
723
+ plugin: plugin,
724
+ method: 'retrieve_config',
725
+ token: token,
726
+ apiHost: apiHost,
727
+ payload: {
728
+ account_id: accountId,
729
+ },
730
+ })];
731
+ case 1:
732
+ response = _a.sent();
733
+ return [2 /*return*/, response];
734
+ }
735
+ });
736
+ }); };
737
+ index_js.loadStripe.setLoadParameters({ advancedFraudSignals: false });
738
+ var useStripePlugin = function (plugin, apiHost, currencyId, token, accountId) {
739
+ var _a = react.useState(null), stripe = _a[0], setStripe = _a[1];
740
+ var showErrorNotification = common.useErrorNotification();
741
+ var options = {
742
+ mode: 'setup',
743
+ currency: currencyId,
744
+ setupFutureUsage: 'off_session',
745
+ };
746
+ react.useEffect(function () {
747
+ var _a, _b;
748
+ if (!plugin)
749
+ return;
750
+ if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== 'StripePayment')
751
+ return;
752
+ fetchStripeKey(plugin, apiHost || '', token, accountId)
753
+ .then(function (_a) {
754
+ var payload = _a.payload;
755
+ return index_js.loadStripe(payload.publishable_key).then(setStripe);
756
+ })
757
+ .catch(function (error) {
758
+ console.error('Caught Error in fetching stripe key: ', error);
759
+ showErrorNotification(error.message, 'Unexpected Error fetching key');
760
+ });
761
+ // eslint-disable-next-line
762
+ }, [plugin, token]);
763
+ return { stripe: stripe, options: options };
764
+ };
765
+
766
+ function useApproveHold$1(_a) {
767
+ var _this = this;
768
+ var onApproveHoldSuccess = _a.onApproveHoldSuccess, onApproveHoldError = _a.onApproveHoldError;
769
+ // Hooks
770
+ var _b = react.useState(false), isSaving = _b[0], setIsSaving = _b[1];
771
+ var apiHost = react.useContext(BunnyContext).apiHost;
772
+ var token = useToken();
773
+ var approveHold = function (_a) {
774
+ var plugin = _a.plugin, quote = _a.quote, paymentMethodId = _a.paymentMethodId;
775
+ return __awaiter(_this, void 0, void 0, function () {
776
+ var response, error_1;
777
+ return __generator(this, function (_b) {
778
+ switch (_b.label) {
779
+ case 0:
780
+ _b.trys.push([0, 2, 3, 4]);
781
+ if (!token)
782
+ throw new Error("Token couldn't be retrieved");
783
+ setIsSaving(true);
784
+ return [4 /*yield*/, createPaymentHold({
785
+ quote: quote,
786
+ plugin: plugin,
787
+ token: token,
788
+ apiHost: apiHost,
789
+ paymentMethodId: paymentMethodId,
790
+ })];
791
+ case 1:
792
+ response = _b.sent();
793
+ if (response.status !== 'success')
794
+ throw new Error(response === null || response === void 0 ? void 0 : response.message);
795
+ onApproveHoldSuccess === null || onApproveHoldSuccess === void 0 ? void 0 : onApproveHoldSuccess(response);
796
+ return [3 /*break*/, 4];
797
+ case 2:
798
+ error_1 = _b.sent();
799
+ console.error(error_1);
800
+ onApproveHoldError === null || onApproveHoldError === void 0 ? void 0 : onApproveHoldError(error_1);
801
+ return [3 /*break*/, 4];
802
+ case 3:
803
+ setIsSaving(false);
804
+ return [7 /*endfinally*/];
805
+ case 4: return [2 /*return*/];
806
+ }
807
+ });
808
+ });
809
+ };
810
+ return { approveHold: approveHold, isSaving: isSaving };
811
+ }
812
+
813
+ function useApproveHold(_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
+
603
860
  function usePay(_a) {
604
861
  var _this = this;
605
862
  var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice, storedPaymentMethod = _a.storedPaymentMethod, plugin = _a.plugin;
@@ -643,8 +900,9 @@ function usePay(_a) {
643
900
  }
644
901
 
645
902
  var handleAllErrorFormats = common.useAllErrorFormats();
903
+ var showErrorNotification$2 = common.useErrorNotification();
646
904
  var ActualCheckoutFooter = function (_a) {
647
- var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess; _a.noPadding; var plugin = _a.plugin;
905
+ var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, noPadding = _a.noPadding, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
648
906
  var isMobile = common.useIsMobile();
649
907
  var _b = react.useState(false), isPaying = _b[0], setIsPaying = _b[1];
650
908
  var defaultPaymentMethod = react.useContext(PaymentContext).defaultPaymentMethod;
@@ -673,6 +931,70 @@ var ActualCheckoutFooter = function (_a) {
673
931
  storedPaymentMethod: defaultPaymentMethod,
674
932
  plugin: plugin,
675
933
  }).pay;
934
+ // Approve hold hooks
935
+ var approveHoldStripe = useApproveHold$1({
936
+ onApproveHoldSuccess: function (response) {
937
+ onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
938
+ },
939
+ onApproveHoldError: function (error) {
940
+ setIsPaying(false);
941
+ handleAllErrorFormats(error);
942
+ },
943
+ }).approveHold;
944
+ var approveHoldDemoPay = useApproveHold({
945
+ onApproveHoldSuccess: function (response) {
946
+ onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
947
+ },
948
+ onApproveHoldError: function (error) {
949
+ setIsPaying(false);
950
+ handleAllErrorFormats(error);
951
+ },
952
+ }).approveHold;
953
+ var handleApproveHold = function () { return __awaiter(void 0, void 0, void 0, function () {
954
+ var _a;
955
+ var _b, _c, _d, _e;
956
+ return __generator(this, function (_f) {
957
+ switch (_f.label) {
958
+ case 0:
959
+ if (!plugin)
960
+ return [2 /*return*/, console.error('plugin is undefined')];
961
+ if (!quote)
962
+ return [2 /*return*/, console.error('quote is undefined')];
963
+ if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id))
964
+ return [2 /*return*/, console.error('defaultPaymentMethod is undefined')];
965
+ _a = (_c = (_b = plugin.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name;
966
+ switch (_a) {
967
+ case 'StripePayment': return [3 /*break*/, 1];
968
+ case 'DemoPayPayment': return [3 /*break*/, 3];
969
+ }
970
+ return [3 /*break*/, 5];
971
+ case 1:
972
+ setIsPaying(true);
973
+ return [4 /*yield*/, approveHoldStripe({
974
+ plugin: plugin,
975
+ quote: quote,
976
+ paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
977
+ })];
978
+ case 2:
979
+ _f.sent();
980
+ return [3 /*break*/, 6];
981
+ case 3:
982
+ setIsPaying(true);
983
+ return [4 /*yield*/, approveHoldDemoPay({
984
+ plugin: plugin,
985
+ quote: quote,
986
+ paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
987
+ })];
988
+ case 4:
989
+ _f.sent();
990
+ return [3 /*break*/, 6];
991
+ case 5:
992
+ 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));
993
+ return [3 /*break*/, 6];
994
+ case 6: return [2 /*return*/];
995
+ }
996
+ });
997
+ }); };
676
998
  var handlePaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
677
999
  var _a;
678
1000
  var _b, _c;
@@ -701,85 +1023,21 @@ var ActualCheckoutFooter = function (_a) {
701
1023
  }
702
1024
  });
703
1025
  }); };
1026
+ if (paymentHoldOptions === null || paymentHoldOptions === void 0 ? void 0 : paymentHoldOptions.payToAccept) {
1027
+ 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 () {
1028
+ handleApproveHold();
1029
+ }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Approving hold for' : 'Approve hold for', " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : '') })) })));
1030
+ }
704
1031
  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 () {
705
1032
  setIsPaying(true);
706
1033
  handlePaymentSubmit();
707
1034
  }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Paying' : 'Pay', " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : '') })) })));
708
1035
  };
709
1036
  var CheckoutFooter = function (_a) {
710
- var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, noPadding = _a.noPadding, plugin = _a.plugin;
1037
+ var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, noPadding = _a.noPadding, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
711
1038
  if (!plugin)
712
1039
  return null;
713
- return (jsxRuntime.jsx(ActualCheckoutFooter, { plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, noPadding: noPadding }));
714
- };
715
-
716
- // Automatically sets the default payment method if there is none currently set
717
- var useAutoSetDefaultPaymentMethod = function (_a) {
718
- var accountId = _a.accountId, token = _a.token, handleSetDefault = _a.handleSetDefault, setDefaultPaymentMethodLoading = _a.setDefaultPaymentMethodLoading, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
719
- var queryClient = reactQuery.useQueryClient();
720
- var apiHost = react.useContext(BunnyContext).apiHost;
721
- var _c = usePaymentMethod({
722
- accountId: accountId,
723
- token: token,
724
- apiHost: apiHost,
725
- }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod;
726
- // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
727
- function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
728
- var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
729
- accountId: accountId,
730
- token: token,
731
- }));
732
- if (cachedPaymentMethods) {
733
- for (var _i = 0, _a = cachedPaymentMethods; _i < _a.length; _i++) {
734
- var paymentMethod = _a[_i];
735
- paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
736
- }
737
- queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
738
- accountId: accountId,
739
- token: token,
740
- }), cachedPaymentMethods);
741
- }
742
- }
743
- react.useEffect(function () {
744
- if (setDefaultPaymentMethodLoading || !enabled)
745
- return;
746
- if ((storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) > 0 && !defaultPaymentMethod) {
747
- handleSetDefault(storedPaymentMethods[0]);
748
- setDefaultPaymentMethodOnCache(storedPaymentMethods[0]);
749
- }
750
- }, [
751
- storedPaymentMethods,
752
- defaultPaymentMethod,
753
- handleSetDefault,
754
- setDefaultPaymentMethodLoading,
755
- queryClient,
756
- accountId,
757
- token,
758
- ]);
759
- };
760
-
761
- var usePaymentMethodSelectorPlugin = function (_a) {
762
- var defaultPaymentMethod = _a.defaultPaymentMethod, defaultPaymentMethodPlugin = _a.defaultPaymentMethodPlugin, paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins;
763
- var _b = react.useState(), selectorPaymentMethodPlugin = _b[0], setSelectorPaymentMethodPlugin = _b[1];
764
- react.useEffect(function () {
765
- if (selectorPaymentMethodPlugin) {
766
- return;
767
- }
768
- if (defaultPaymentMethod) {
769
- setSelectorPaymentMethodPlugin(defaultPaymentMethodPlugin);
770
- }
771
- else {
772
- setSelectorPaymentMethodPlugin(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
773
- }
774
- }, [
775
- defaultPaymentMethod,
776
- defaultPaymentMethodPlugin,
777
- paymentMethodAllowedPlugins,
778
- ]);
779
- return {
780
- selectorPaymentMethodPlugin: selectorPaymentMethodPlugin,
781
- setSelectorPaymentMethodPlugin: setSelectorPaymentMethodPlugin,
782
- };
1040
+ return (jsxRuntime.jsx(ActualCheckoutFooter, { paymentHoldOptions: paymentHoldOptions, plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, noPadding: noPadding }));
783
1041
  };
784
1042
 
785
1043
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -18026,31 +18284,31 @@ var Card = function (_a) {
18026
18284
  };
18027
18285
 
18028
18286
  var tagStyleMap = {
18029
- blue: { color: "var(--bunny-blue-500)", background: "var(--bunny-blue-200)" },
18287
+ blue: { color: 'var(--bunny-blue-500)', background: 'var(--bunny-blue-200)' },
18030
18288
  green: {
18031
- color: "var(--bunny-green-600)",
18032
- background: "var(--bunny-green-200)",
18289
+ color: 'var(--bunny-green-600)',
18290
+ background: 'var(--bunny-green-200)',
18033
18291
  },
18034
- red: { color: "var(--bunny-red-500)", background: "var(--bunny-red-200)" },
18292
+ red: { color: 'var(--bunny-red-500)', background: 'var(--bunny-red-200)' },
18035
18293
  orange: {
18036
- color: "var(--bunny-orange-500)",
18037
- background: "var(--bunny-orange-200)",
18294
+ color: 'var(--bunny-orange-500)',
18295
+ background: 'var(--bunny-orange-200)',
18038
18296
  },
18039
18297
  yellow: {
18040
- color: "var(--bunny-yellow-500)",
18041
- background: "var(--bunny-yellow-200)",
18298
+ color: 'var(--bunny-yellow-500)',
18299
+ background: 'var(--bunny-yellow-200)',
18042
18300
  },
18043
18301
  purple: {
18044
- color: "var(--bunny-purple-500)",
18045
- background: "var(--bunny-purple-200)",
18302
+ color: 'var(--bunny-purple-500)',
18303
+ background: 'var(--bunny-purple-200)',
18046
18304
  },
18047
- black: { color: "white", background: "var(--bunny-black)" },
18305
+ black: { color: 'white', background: 'var(--bunny-black)' },
18048
18306
  };
18049
18307
  // This component provides custom styling for antd Tag components without using antd overwrites.
18050
18308
  // Please use this component instead of the antd Tag component directly to maintain consistent styling.
18051
18309
  var CustomizedTag = function (_a) {
18052
- var children = _a.children, color = _a.color, className = _a.className;
18053
- 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 })));
18310
+ var children = _a.children, color = _a.color, className = _a.className, style = _a.style;
18311
+ 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 })));
18054
18312
  };
18055
18313
 
18056
18314
  var Amex = function (_a) {
@@ -18103,7 +18361,7 @@ var Visa = function (_a) {
18103
18361
  return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.2505 32.5165H17.0099L13.8299 20.3847C13.679 19.8267 13.3585 19.3333 12.8871 19.1008C11.7106 18.5165 10.4142 18.0514 9 17.8169V17.3498H15.8313C16.7742 17.3498 17.4813 18.0514 17.5991 18.8663L19.2491 27.6173L23.4877 17.3498H27.6104L21.2505 32.5165ZM29.9675 32.5165H25.9626L29.2604 17.3498H33.2653L29.9675 32.5165ZM38.4467 21.5514C38.5646 20.7346 39.2717 20.2675 40.0967 20.2675C41.3931 20.1502 42.8052 20.3848 43.9838 20.9671L44.6909 17.7016C43.5123 17.2345 42.216 17 41.0395 17C37.1524 17 34.3239 19.1008 34.3239 22.0165C34.3239 24.2346 36.3274 25.3992 37.7417 26.1008C39.2717 26.8004 39.861 27.2675 39.7431 27.9671C39.7431 29.0165 38.5646 29.4836 37.3881 29.4836C35.9739 29.4836 34.5596 29.1338 33.2653 28.5494L32.5582 31.8169C33.9724 32.3992 35.5025 32.6338 36.9167 32.6338C41.2752 32.749 43.9838 30.6502 43.9838 27.5C43.9838 23.5329 38.4467 23.3004 38.4467 21.5514ZM58 32.5165L54.82 17.3498H51.4044C50.6972 17.3498 49.9901 17.8169 49.7544 18.5165L43.8659 32.5165H47.9887L48.8116 30.3004H53.8772L54.3486 32.5165H58ZM51.9936 21.4342L53.1701 27.1502H49.8723L51.9936 21.4342Z", fill: "#172B85" })] })));
18104
18362
  };
18105
18363
 
18106
- var Text$p = antd.Typography.Text;
18364
+ var Text$r = antd.Typography.Text;
18107
18365
  var MiniCreditCard = function (_a) {
18108
18366
  var className = _a.className, buttons = _a.buttons, _b = _a.hideDropdownMenu, hideDropdownMenu = _b === void 0 ? false : _b, _c = _a.hideDefaultTag, hideDefaultTag = _c === void 0 ? false : _c, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData, onClickSetDefault = _a.onClickSetDefault, id = _a.id;
18109
18367
  var darkMode = react.useContext(BunnyContext).darkMode;
@@ -18114,7 +18372,7 @@ var MiniCreditCard = function (_a) {
18114
18372
  return darkMode ? 'var(--row-background-alternate)' : 'bg-slate-50';
18115
18373
  }, [darkMode]);
18116
18374
  var isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
18117
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Issuer, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$p, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] }))) })));
18375
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Issuer, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$r, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] }))) })));
18118
18376
  };
18119
18377
  var Identifier = function (_a) {
18120
18378
  var _b, _c, _d;
@@ -18123,9 +18381,9 @@ var Identifier = function (_a) {
18123
18381
  return null;
18124
18382
  }
18125
18383
  if (((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.type) === 'cashapp') {
18126
- return jsxRuntime.jsx(Text$p, { children: "Cashapp" });
18384
+ return jsxRuntime.jsx(Text$r, { children: "Cashapp" });
18127
18385
  }
18128
- return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$p, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$p, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
18386
+ return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$r, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$r, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
18129
18387
  };
18130
18388
  var Issuer = function (_a) {
18131
18389
  var _b;
@@ -18134,7 +18392,7 @@ var Issuer = function (_a) {
18134
18392
  var issuer = (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer;
18135
18393
  if (issuer.length == 0 || list.includes(issuer.toLowerCase()))
18136
18394
  return null;
18137
- return jsxRuntime.jsx(Text$p, { children: lodashExports.capitalize(issuer) });
18395
+ return jsxRuntime.jsx(Text$r, { children: lodashExports.capitalize(issuer) });
18138
18396
  };
18139
18397
  var DropdownMenu = function (_a) {
18140
18398
  var setDefault = _a.setDefault, remove = _a.remove, isDefault = _a.isDefault, id = _a.id;
@@ -18195,6 +18453,75 @@ var CardImage = function (_a) {
18195
18453
  }
18196
18454
  };
18197
18455
 
18456
+ // Automatically sets the default payment method if there is none currently set
18457
+ var useAutoSetDefaultPaymentMethod = function (_a) {
18458
+ var accountId = _a.accountId, token = _a.token, handleSetDefault = _a.handleSetDefault, setDefaultPaymentMethodLoading = _a.setDefaultPaymentMethodLoading, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
18459
+ var queryClient = reactQuery.useQueryClient();
18460
+ var apiHost = react.useContext(BunnyContext).apiHost;
18461
+ var _c = usePaymentMethod({
18462
+ accountId: accountId,
18463
+ token: token,
18464
+ apiHost: apiHost,
18465
+ }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod;
18466
+ // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
18467
+ function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
18468
+ var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
18469
+ accountId: accountId,
18470
+ token: token,
18471
+ }));
18472
+ if (cachedPaymentMethods) {
18473
+ for (var _i = 0, _a = cachedPaymentMethods; _i < _a.length; _i++) {
18474
+ var paymentMethod = _a[_i];
18475
+ paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
18476
+ }
18477
+ queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
18478
+ accountId: accountId,
18479
+ token: token,
18480
+ }), cachedPaymentMethods);
18481
+ }
18482
+ }
18483
+ react.useEffect(function () {
18484
+ if (setDefaultPaymentMethodLoading || !enabled)
18485
+ return;
18486
+ if ((storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) > 0 && !defaultPaymentMethod) {
18487
+ handleSetDefault(storedPaymentMethods[0]);
18488
+ setDefaultPaymentMethodOnCache(storedPaymentMethods[0]);
18489
+ }
18490
+ }, [
18491
+ storedPaymentMethods,
18492
+ defaultPaymentMethod,
18493
+ handleSetDefault,
18494
+ setDefaultPaymentMethodLoading,
18495
+ queryClient,
18496
+ accountId,
18497
+ token,
18498
+ ]);
18499
+ };
18500
+
18501
+ var usePaymentMethodSelectorPlugin = function (_a) {
18502
+ var defaultPaymentMethod = _a.defaultPaymentMethod, defaultPaymentMethodPlugin = _a.defaultPaymentMethodPlugin, paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins;
18503
+ var _b = react.useState(), selectorPaymentMethodPlugin = _b[0], setSelectorPaymentMethodPlugin = _b[1];
18504
+ react.useEffect(function () {
18505
+ if (selectorPaymentMethodPlugin) {
18506
+ return;
18507
+ }
18508
+ if (defaultPaymentMethod) {
18509
+ setSelectorPaymentMethodPlugin(defaultPaymentMethodPlugin);
18510
+ }
18511
+ else {
18512
+ setSelectorPaymentMethodPlugin(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
18513
+ }
18514
+ }, [
18515
+ defaultPaymentMethod,
18516
+ defaultPaymentMethodPlugin,
18517
+ paymentMethodAllowedPlugins,
18518
+ ]);
18519
+ return {
18520
+ selectorPaymentMethodPlugin: selectorPaymentMethodPlugin,
18521
+ setSelectorPaymentMethodPlugin: setSelectorPaymentMethodPlugin,
18522
+ };
18523
+ };
18524
+
18198
18525
  var SavePaymentMethodFooter = function (_a) {
18199
18526
  var isSaving = _a.isSaving, onSave = _a.onSave, noPadding = _a.noPadding;
18200
18527
  var isMobile = common.useIsMobile();
@@ -18356,7 +18683,7 @@ function useSave$1(_a) {
18356
18683
  return { save: save, isSaving: isSaving };
18357
18684
  }
18358
18685
 
18359
- var Text$o = antd.Typography.Text;
18686
+ var Text$q = antd.Typography.Text;
18360
18687
  var TEST_CARD = '4242424242424242';
18361
18688
  var DemoPayForm = function (_a) {
18362
18689
  var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -18418,7 +18745,7 @@ var DemoPayForm = function (_a) {
18418
18745
  var onCardCvcChange = function (cvc) {
18419
18746
  setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
18420
18747
  };
18421
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$o, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
18748
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$q, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
18422
18749
  };
18423
18750
  var StyledInputs = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"], ["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"])), function (_a) {
18424
18751
  var darkMode = _a.darkMode;
@@ -18429,90 +18756,6 @@ var StyledInputs = defaultStyled.div(templateObject_1$a || (templateObject_1$a =
18429
18756
  });
18430
18757
  var templateObject_1$a;
18431
18758
 
18432
- var createPaymentMethod = function (_a) {
18433
- var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
18434
- return __awaiter(void 0, void 0, void 0, function () {
18435
- var response;
18436
- return __generator(this, function (_b) {
18437
- switch (_b.label) {
18438
- case 0: return [4 /*yield*/, common.invokePlugin({
18439
- plugin: plugin,
18440
- method: "store_payment_method",
18441
- payload: {
18442
- payment_method_id: paymentMethodId,
18443
- account_id: accountId,
18444
- },
18445
- token: token,
18446
- apiHost: apiHost,
18447
- })];
18448
- case 1:
18449
- response = _b.sent();
18450
- if (response.status !== "success")
18451
- throw new Error(response.message || "Unknown error");
18452
- return [2 /*return*/, response];
18453
- }
18454
- });
18455
- });
18456
- };
18457
- var createSetupIntent = function (plugin, apiHost, token, accountId) {
18458
- return common.invokePlugin({
18459
- plugin: plugin,
18460
- method: "create_setup_intent",
18461
- token: token,
18462
- apiHost: apiHost,
18463
- payload: {
18464
- account_id: accountId,
18465
- },
18466
- });
18467
- };
18468
- var fetchStripeKey = function (plugin, apiHost, token, accountId) { return __awaiter(void 0, void 0, void 0, function () {
18469
- var response;
18470
- return __generator(this, function (_a) {
18471
- switch (_a.label) {
18472
- case 0: return [4 /*yield*/, common.invokePlugin({
18473
- plugin: plugin,
18474
- method: "retrieve_config",
18475
- token: token,
18476
- apiHost: apiHost,
18477
- payload: {
18478
- account_id: accountId,
18479
- },
18480
- })];
18481
- case 1:
18482
- response = _a.sent();
18483
- return [2 /*return*/, response];
18484
- }
18485
- });
18486
- }); };
18487
- index_js.loadStripe.setLoadParameters({ advancedFraudSignals: false });
18488
- var useStripePlugin = function (plugin, apiHost, currencyId, token, accountId) {
18489
- var _a = react.useState(null), stripe = _a[0], setStripe = _a[1];
18490
- var showErrorNotification = common.useErrorNotification();
18491
- var options = {
18492
- mode: "setup",
18493
- currency: currencyId,
18494
- setupFutureUsage: "off_session",
18495
- };
18496
- react.useEffect(function () {
18497
- var _a, _b;
18498
- if (!plugin)
18499
- return;
18500
- if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== "StripePayment")
18501
- return;
18502
- fetchStripeKey(plugin, apiHost || "", token, accountId)
18503
- .then(function (_a) {
18504
- var payload = _a.payload;
18505
- return index_js.loadStripe(payload.publishable_key).then(setStripe);
18506
- })
18507
- .catch(function (error) {
18508
- console.error("Caught Error in fetching stripe key: ", error);
18509
- showErrorNotification(error.message, "Unexpected Error fetching key");
18510
- });
18511
- // eslint-disable-next-line
18512
- }, [plugin, token]);
18513
- return { stripe: stripe, options: options };
18514
- };
18515
-
18516
18759
  function useSave(_a) {
18517
18760
  var _this = this;
18518
18761
  var onSaveSuccess = _a.onSaveSuccess, onSaveError = _a.onSaveError;
@@ -18649,11 +18892,12 @@ var PaymentMethodDetails = function (_a) {
18649
18892
  }
18650
18893
  };
18651
18894
 
18652
- var CardIcon = function () {
18653
- return (jsxRuntime.jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
18895
+ var CardIcon = function (_a) {
18896
+ var className = _a.className;
18897
+ return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
18654
18898
  };
18655
18899
 
18656
- var Text$n = antd.Typography.Text;
18900
+ var Text$p = antd.Typography.Text;
18657
18901
  var PaymentMethodSelector = function (_a) {
18658
18902
  var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
18659
18903
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsxRuntime.jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
@@ -18662,11 +18906,11 @@ var PaymentOption = function (_a) {
18662
18906
  var selected = _a.selected, paymentPlugin = _a.paymentPlugin, onClick = _a.onClick, name = _a.name;
18663
18907
  var brandColor = react.useContext(BrandContext).brandColor;
18664
18908
  var darkMode = react.useContext(BunnyContext).darkMode;
18665
- var isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("ach");
18666
- var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
18667
- return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "bunny-flex bunny-justify-between bunny-items-center bunny-w-full bunny-cursor-pointer bunny-py-2 bunny-px-4 bunny-rounded bunny-border-solid ".concat(darkMode
18909
+ var isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('ach');
18910
+ var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
18911
+ return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ".concat(darkMode
18668
18912
  ? "var(--row-background-dark) border-gray-500"
18669
- : "bunny-bg-slate-50 bunny-border-slate-200", " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsxRuntime.jsx(Text$n, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
18913
+ : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$p, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] })));
18670
18914
  };
18671
18915
  var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"], ["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"])), function (_a) {
18672
18916
  var $brandColor = _a.$brandColor, $selected = _a.$selected;
@@ -18788,7 +19032,7 @@ var Panel = antd.Collapse.Panel;
18788
19032
  var showErrorNotification$1 = common.useErrorNotification();
18789
19033
  var PaymentForm = function (_a) {
18790
19034
  var _b;
18791
- 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;
19035
+ 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;
18792
19036
  // Local state
18793
19037
  var _c = react.useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
18794
19038
  // Simple hooks
@@ -18867,7 +19111,7 @@ var PaymentForm = function (_a) {
18867
19111
  storedPaymentMethods: storedPaymentMethods,
18868
19112
  defaultPaymentMethod: defaultPaymentMethod,
18869
19113
  customCheckoutFunction: customCheckoutFunction,
18870
- } }, { 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] }) })) })) })));
19114
+ } }, { 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 && 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] }) })) })) })));
18871
19115
  };
18872
19116
  function StripeWrapper(_a) {
18873
19117
  var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
@@ -18876,7 +19120,7 @@ function StripeWrapper(_a) {
18876
19120
  }
18877
19121
 
18878
19122
  function Invoice(_a) {
18879
- var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onInvoiceLoaded = _a.onInvoiceLoaded;
19123
+ var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onInvoiceLoaded = _a.onInvoiceLoaded;
18880
19124
  return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
18881
19125
  id: id,
18882
19126
  invoiceQuoteViewComponent: invoiceQuoteViewComponent,
@@ -18903,10 +19147,10 @@ function ActualInvoice() {
18903
19147
  // Queries
18904
19148
  var formattedInvoice = reactQuery.useQuery({
18905
19149
  queryKey: common.QueryKeyFactory.default.createFormattedInvoiceKey({ id: id, token: token }),
18906
- queryFn: function () { return common.getFormattedInvoice({ id: id, token: token, apiHost: apiHost }); },
19150
+ queryFn: function () { return common.getFormattedInvoice({ id: id, token: token, apiHost: apiHost, componentsVersion: PACKAGE_VERSION }); },
18907
19151
  }).data;
18908
19152
  // Derived state
18909
- var isInvoicePayable = common.PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || "");
19153
+ var isInvoicePayable = common.PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || '');
18910
19154
  // Local state
18911
19155
  var isMobile = common.useIsMobile(isInvoicePayable ? common.BreakpointNumbers.lg : undefined);
18912
19156
  var onSuccess = function () {
@@ -18919,7 +19163,7 @@ function ActualInvoice() {
18919
19163
  token: token,
18920
19164
  }),
18921
19165
  });
18922
- showSuccessNotification("Your invoice has been paid", "Payment successful");
19166
+ showSuccessNotification('Your invoice has been paid', 'Payment successful');
18923
19167
  onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
18924
19168
  };
18925
19169
  var onFail = function (error) {
@@ -18932,18 +19176,18 @@ function ActualInvoice() {
18932
19176
  }, [formattedInvoice]);
18933
19177
  if (!formattedInvoice)
18934
19178
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
18935
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? "bunny-flex-col bunny-w-full bunny-overflow-hidden" : "", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost, token: token }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
19179
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 bunny-overflow-hidden ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
18936
19180
  }
18937
19181
 
18938
- var MUTATION$6 = function (id) { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n object { documents { id filename size date url } }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"; };
19182
+ var MUTATION$7 = function (id) { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n object {\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 object { documents { id filename size date url } }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"; };
18939
19183
  var getFormattedQuote = function (_a) {
18940
19184
  var id = _a.id, token = _a.token, apiHost = _a.apiHost;
18941
19185
  return __awaiter(void 0, void 0, void 0, function () {
18942
19186
  var response;
18943
19187
  return __generator(this, function (_b) {
18944
19188
  switch (_b.label) {
18945
- case 0: return [4 /*yield*/, common.gqlRequest({
18946
- query: MUTATION$6(),
19189
+ case 0: return [4 /*yield*/, gqlRequest({
19190
+ query: MUTATION$7(),
18947
19191
  token: token,
18948
19192
  apiHost: apiHost,
18949
19193
  vars: { id: id },
@@ -18967,12 +19211,13 @@ var usePlugins = function (_a) {
18967
19211
  var plugins;
18968
19212
  return __generator(this, function (_a) {
18969
19213
  switch (_a.label) {
18970
- case 0: return [4 /*yield*/, common.getPlugins({
19214
+ case 0: return [4 /*yield*/, getPlugins({
18971
19215
  token: token,
18972
19216
  apiHost: apiHost,
18973
19217
  })];
18974
19218
  case 1:
18975
19219
  plugins = _a.sent();
19220
+ console.log("plugins in usePlugins: ", plugins);
18976
19221
  return [2 /*return*/, plugins];
18977
19222
  }
18978
19223
  });
@@ -18980,6 +19225,39 @@ var usePlugins = function (_a) {
18980
19225
  });
18981
19226
  return response;
18982
19227
  };
19228
+ var getPlugins = function (_a) {
19229
+ var entityId = _a.entityId, token = _a.token, apiHost = _a.apiHost;
19230
+ return __awaiter(void 0, void 0, void 0, function () {
19231
+ var response, plugins, filteredPlugins, error;
19232
+ return __generator(this, function (_b) {
19233
+ switch (_b.label) {
19234
+ case 0: return [4 /*yield*/, common.request({
19235
+ endpoint: "/plugins",
19236
+ token: token,
19237
+ apiHost: apiHost,
19238
+ })];
19239
+ case 1:
19240
+ response = _b.sent();
19241
+ if (!response.ok) return [3 /*break*/, 3];
19242
+ return [4 /*yield*/, response.json()];
19243
+ case 2:
19244
+ plugins = _b.sent();
19245
+ filteredPlugins = plugins.filter(function (plugin) {
19246
+ var _a, _b;
19247
+ var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) ||
19248
+ ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 ||
19249
+ !entityId;
19250
+ return result;
19251
+ });
19252
+ return [2 /*return*/, filteredPlugins];
19253
+ case 3: return [4 /*yield*/, response.json()];
19254
+ case 4:
19255
+ error = _b.sent();
19256
+ throw error;
19257
+ }
19258
+ });
19259
+ });
19260
+ };
18983
19261
 
18984
19262
  var filterSigningPlugins = function (plugins) {
18985
19263
  return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
@@ -18994,15 +19272,41 @@ var useSigningPlugins = function (_a) {
18994
19272
  return filterSigningPlugins(plugins.data);
18995
19273
  };
18996
19274
 
19275
+ 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";
19276
+ var quoteAccept = function (_a) {
19277
+ var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token, changedFormItems = _a.changedFormItems;
19278
+ return __awaiter(void 0, void 0, void 0, function () {
19279
+ var vars, response, errors;
19280
+ var _b, _c;
19281
+ return __generator(this, function (_d) {
19282
+ switch (_d.label) {
19283
+ case 0:
19284
+ vars = __assign(__assign({}, changedFormItems), { quoteId: quoteId });
19285
+ return [4 /*yield*/, common.gqlRequest({
19286
+ query: QUOTE_ACCEPT,
19287
+ token: token,
19288
+ vars: vars,
19289
+ apiHost: apiHost,
19290
+ })];
19291
+ case 1:
19292
+ response = _d.sent();
19293
+ errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAccept) === null || _b === void 0 ? void 0 : _b.errors;
19294
+ if (errors)
19295
+ throw errors;
19296
+ return [2 /*return*/, (_c = response.quoteAccept) === null || _c === void 0 ? void 0 : _c.quote];
19297
+ }
19298
+ });
19299
+ });
19300
+ };
19301
+ // export default quoteAccept;
18997
19302
  var useSendAcceptQuote = function (_a) {
18998
- var onTokenExpired = _a.onTokenExpired, quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
19303
+ _a.onTokenExpired; var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
18999
19304
  // Hooks
19000
19305
  var graphQLMutation = common.useGraphQLmutation(function () {
19001
19306
  console.log("navigate in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
19002
19307
  }, apiHost || "", function () {
19003
19308
  console.log("onError in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
19004
19309
  });
19005
- var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
19006
19310
  var signingPlugins = useSigningPlugins({ apiHost: apiHost, token: token });
19007
19311
  var queryClient = reactQuery.useQueryClient();
19008
19312
  // Local state
@@ -19052,45 +19356,37 @@ var useSendAcceptQuote = function (_a) {
19052
19356
  token: token,
19053
19357
  }),
19054
19358
  });
19055
- queryClient.refetchQueries({
19056
- queryKey: common.QueryKeyFactory.default.createQuoteKey({
19057
- id: quoteId,
19058
- token: token,
19059
- }),
19060
- });
19061
19359
  });
19062
19360
  // Open the DropboxSign modal
19063
19361
  client.open(url, {
19064
- clientId: clientId,
19065
- skipDomainVerification: false, // Set true for development testing
19066
- });
19067
- return [2 /*return*/];
19068
- }
19069
- });
19070
- }); };
19071
- var sendAccept = function (changedFormItems) {
19072
- 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 }";
19073
- var variables = __assign(__assign({}, changedFormItems), { quoteId: quoteId });
19074
- graphQLMutation(mutation, variables, function (rsp) {
19075
- if (rsp.errors)
19076
- handleAllErrorFormats(rsp.errors);
19077
- else {
19078
- setAcceptBoxVisible(false);
19079
- queryClient.invalidateQueries({
19080
- queryKey: common.QueryKeyFactory.default.createQuoteKey({
19081
- id: quoteId,
19082
- token: token,
19083
- }),
19084
- });
19085
- queryClient.invalidateQueries({
19086
- queryKey: common.QueryKeyFactory.default.createQuoteKey({
19087
- id: quoteId,
19088
- token: token,
19089
- }),
19090
- });
19362
+ clientId: clientId,
19363
+ skipDomainVerification: false, // Set true for development testing
19364
+ });
19365
+ return [2 /*return*/];
19091
19366
  }
19092
- }, token);
19093
- };
19367
+ });
19368
+ }); };
19369
+ var _e = reactQuery.useMutation({
19370
+ mutationFn: function (changedFormItems) { return __awaiter(void 0, void 0, void 0, function () {
19371
+ return __generator(this, function (_a) {
19372
+ return [2 /*return*/, quoteAccept({
19373
+ quoteId: quoteId,
19374
+ apiHost: apiHost,
19375
+ token: token,
19376
+ changedFormItems: changedFormItems,
19377
+ })];
19378
+ });
19379
+ }); },
19380
+ onSuccess: function () {
19381
+ setAcceptBoxVisible(false);
19382
+ queryClient.invalidateQueries({
19383
+ queryKey: common.QueryKeyFactory.default.createQuoteKey({
19384
+ id: quoteId,
19385
+ token: token,
19386
+ }),
19387
+ });
19388
+ },
19389
+ }), sendAcceptMutation = _e.mutate, isSendAcceptPending = _e.isPending;
19094
19390
  var startAcceptance = function () {
19095
19391
  setIsAccepting(true);
19096
19392
  if (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length) {
@@ -19103,12 +19399,13 @@ var useSendAcceptQuote = function (_a) {
19103
19399
  return {
19104
19400
  acceptBoxVisible: acceptBoxVisible,
19105
19401
  isAccepting: isAccepting,
19106
- sendAccept: sendAccept,
19402
+ sendAccept: sendAcceptMutation,
19107
19403
  setAcceptBoxVisible: setAcceptBoxVisible,
19108
19404
  setIsAccepting: setIsAccepting,
19109
19405
  startAcceptance: startAcceptance,
19110
19406
  pandadocPollingModalVisible: pandadocPollingModalVisible,
19111
19407
  setPandadocPollingModalVisible: setPandadocPollingModalVisible,
19408
+ isSendAcceptPending: isSendAcceptPending,
19112
19409
  };
19113
19410
  };
19114
19411
 
@@ -19191,7 +19488,7 @@ var useFocusFirstInput = function (_a) {
19191
19488
  };
19192
19489
 
19193
19490
  var AcceptQuoteModal = function (_a) {
19194
- var acceptBoxVisible = _a.acceptBoxVisible, formattedQuote = _a.formattedQuote, sendAccept = _a.sendAccept, setAcceptBoxVisible = _a.setAcceptBoxVisible, setIsAccepting = _a.setIsAccepting;
19491
+ var acceptBoxVisible = _a.acceptBoxVisible, formattedQuote = _a.formattedQuote, sendAccept = _a.sendAccept, setAcceptBoxVisible = _a.setAcceptBoxVisible, setIsAccepting = _a.setIsAccepting, isSendAcceptPending = _a.isSendAcceptPending;
19195
19492
  // Refs
19196
19493
  var firstInputRef = react.useRef(null);
19197
19494
  // Hooks
@@ -19202,7 +19499,10 @@ var AcceptQuoteModal = function (_a) {
19202
19499
  var createRules = function (required, title) {
19203
19500
  return required ? [{ required: true, message: "".concat(title, " is required") }] : [];
19204
19501
  };
19205
- return (jsxRuntime.jsx(StyledModal$1, __assign({ centered: true, okText: "Accept", onCancel: function () {
19502
+ return (jsxRuntime.jsx(StyledModal$1, __assign({ centered: true, okText: isSendAcceptPending ? "Accepting..." : "Accept", okButtonProps: {
19503
+ loading: isSendAcceptPending,
19504
+ disabled: isSendAcceptPending,
19505
+ }, onCancel: function () {
19206
19506
  setAcceptBoxVisible(false);
19207
19507
  setIsAccepting(false);
19208
19508
  }, onOk: function () {
@@ -19215,7 +19515,38 @@ var AcceptQuoteModal = function (_a) {
19215
19515
  }, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: true, ref: firstInputRef }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsxRuntime.jsx(antd.Input, {}) })), taxNumberRequired && (jsxRuntime.jsx(antd.Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsxRuntime.jsx(antd.Input, {}) })))] })) })));
19216
19516
  };
19217
19517
 
19218
- var Text$m = antd.Typography.Text;
19518
+ var Title$2 = antd.Typography.Title;
19519
+ var showSuccessNotification$1 = common.useSuccessNotification();
19520
+ var PaymentHoldModal = function (_a) {
19521
+ var visible = _a.visible, setVisible = _a.setVisible, quote = _a.quote;
19522
+ var queryClient = reactQuery.useQueryClient();
19523
+ var token = useToken();
19524
+ return (jsxRuntime.jsxs(StyledModal$1, __assign({ centered: true, onCancel: function () {
19525
+ setVisible(false);
19526
+ }, 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: {
19527
+ amount: quote.amount,
19528
+ currencyId: quote.currency,
19529
+ id: quote.object.id,
19530
+ }, paymentHoldOptions: {
19531
+ payToAccept: true,
19532
+ amountToHold: quote.amount,
19533
+ }, onFail: function () {
19534
+ setVisible(false);
19535
+ }, onPaymentSuccess: function () {
19536
+ setVisible(false);
19537
+ }, onPaymentHoldSuccess: function () {
19538
+ setVisible(false);
19539
+ showSuccessNotification$1("Approved payment hold for ".concat(common.formatCurrency(quote.amount, quote.currency)));
19540
+ queryClient.invalidateQueries({
19541
+ queryKey: common.QueryKeyFactory.default.createQuoteKey({
19542
+ id: quote.id,
19543
+ token: token,
19544
+ }),
19545
+ });
19546
+ } }) }))] })));
19547
+ };
19548
+
19549
+ var Text$o = antd.Typography.Text;
19219
19550
  defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
19220
19551
  function Quote(_a) {
19221
19552
  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;
@@ -19230,16 +19561,29 @@ function Quote(_a) {
19230
19561
  onQuoteLoaded: onQuoteLoaded,
19231
19562
  } }, { children: jsxRuntime.jsx(ActualQuote, {}) })));
19232
19563
  }
19564
+ // TODO: dissolve this hook
19565
+ var useQuotePaymentHold = function (formattedQuote) {
19566
+ var _a = react.useState(false), paymentHoldModalVisible = _a[0], setPaymentHoldModalVisible = _a[1];
19567
+ var shouldDoPaymentHold = (formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.object.payToAccept) == true;
19568
+ var currentPaymentHold = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.object.currentPaymentHold;
19569
+ return {
19570
+ paymentHold: currentPaymentHold,
19571
+ paymentHoldModalVisible: paymentHoldModalVisible,
19572
+ setPaymentHoldModalVisible: setPaymentHoldModalVisible,
19573
+ shouldDoPaymentHold: shouldDoPaymentHold,
19574
+ paymentHoldCompleted: currentPaymentHold ? true : false,
19575
+ };
19576
+ };
19233
19577
  function ActualQuote() {
19234
19578
  var _this = this;
19235
- var _a, _b;
19579
+ var _a, _b, _c;
19236
19580
  // Context
19237
- var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, onTokenExpired = _c.onTokenExpired;
19581
+ var _d = react.useContext(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired;
19238
19582
  var token = useToken();
19239
- var entityBranding = react.useContext(BrandContext);
19240
- var _d = react.useContext(InvoiceQuoteContext), className = _d.className, id = _d.id, hideDownloadButton = _d.hideDownloadButton, onQuoteLoaded = _d.onQuoteLoaded;
19583
+ react.useContext(BrandContext);
19584
+ var _e = react.useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton, onQuoteLoaded = _e.onQuoteLoaded;
19241
19585
  // Queries
19242
- var _e = reactQuery.useQuery({
19586
+ var _f = reactQuery.useQuery({
19243
19587
  queryKey: common.QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
19244
19588
  queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
19245
19589
  var error_1;
@@ -19258,17 +19602,15 @@ function ActualQuote() {
19258
19602
  });
19259
19603
  }); },
19260
19604
  placeholderData: reactQuery.keepPreviousData,
19261
- }), data = _e.data, isLoading = _e.isLoading;
19605
+ }), data = _f.data, isLoading = _f.isLoading;
19262
19606
  var formattedQuote = data;
19263
19607
  // Hooks
19264
- var downloadFile = useDownloadFile(id);
19265
- var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
19266
- var _f = useSendAcceptQuote({
19608
+ var _g = useSendAcceptQuote({
19267
19609
  token: token,
19268
19610
  onTokenExpired: onTokenExpired,
19269
19611
  apiHost: apiHost,
19270
19612
  quoteId: id,
19271
- }), acceptBoxVisible = _f.acceptBoxVisible, isAccepting = _f.isAccepting, sendAccept = _f.sendAccept, setAcceptBoxVisible = _f.setAcceptBoxVisible, setIsAccepting = _f.setIsAccepting, startAcceptance = _f.startAcceptance, pandadocPollingModalVisible = _f.pandadocPollingModalVisible, setPandadocPollingModalVisible = _f.setPandadocPollingModalVisible;
19613
+ }), acceptBoxVisible = _g.acceptBoxVisible, isAccepting = _g.isAccepting, sendAccept = _g.sendAccept, setAcceptBoxVisible = _g.setAcceptBoxVisible, setIsAccepting = _g.setIsAccepting, startAcceptance = _g.startAcceptance, pandadocPollingModalVisible = _g.pandadocPollingModalVisible, setPandadocPollingModalVisible = _g.setPandadocPollingModalVisible, isSendAcceptPending = _g.isSendAcceptPending;
19272
19614
  useSigningComplete({ data: formattedQuote, token: token });
19273
19615
  var isMobile = common.useIsMobile();
19274
19616
  var showErrorNotification = common.useErrorNotification();
@@ -19277,27 +19619,61 @@ function ActualQuote() {
19277
19619
  onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote);
19278
19620
  }
19279
19621
  }, [formattedQuote]);
19622
+ // Payment hold stuff here
19623
+ var _h = useQuotePaymentHold(formattedQuote), paymentHoldModalVisible = _h.paymentHoldModalVisible, setPaymentHoldModalVisible = _h.setPaymentHoldModalVisible, shouldDoPaymentHold = _h.shouldDoPaymentHold, paymentHoldCompleted = _h.paymentHoldCompleted, paymentHold = _h.paymentHold;
19624
+ var handleClickAccept = function () {
19625
+ if (shouldDoPaymentHold && !paymentHoldCompleted) {
19626
+ setPaymentHoldModalVisible(true);
19627
+ }
19628
+ else {
19629
+ startAcceptance();
19630
+ }
19631
+ };
19280
19632
  if (!formattedQuote || isLoading) {
19281
19633
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
19282
19634
  }
19283
19635
  // Derived state
19284
19636
  var isAccepted = formattedQuote.state === 'ACCEPTED';
19285
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-end bunny-items-center bunny-gap-4", id: "acceptance", style: {
19286
- color: entityBranding.secondaryColor,
19287
- } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$m, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? 'Quote is expired' : 'Accept quote' }))) : null] })))] })), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_b = (_a = formattedQuote.object) === null || _a === void 0 ? void 0 : _a.documents) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
19637
+ var firstInvoice = (_a = formattedQuote.object) === null || _a === void 0 ? void 0 : _a.firstInvoice;
19638
+ if ((firstInvoice === null || firstInvoice === void 0 ? void 0 : firstInvoice.state) === 'PAID' && paymentHoldCompleted) {
19639
+ return jsxRuntime.jsx(Invoice, { id: firstInvoice.id });
19640
+ }
19641
+ 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 }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
19288
19642
  return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
19289
- }) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
19643
+ }) }))) : 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 })] }));
19644
+ }
19645
+ // TODO: clean up the logic here. Its quite confusing
19646
+ function QuoteButtons(_a) {
19647
+ 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;
19648
+ var apiHost = react.useContext(BunnyContext).apiHost;
19649
+ var token = useToken();
19650
+ var entityBranding = react.useContext(BrandContext);
19651
+ var downloadFile = useDownloadFile(id);
19652
+ var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
19653
+ return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
19654
+ color: entityBranding.secondaryColor,
19655
+ } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$o, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [paymentHold ? (jsxRuntime.jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired, onClick: function () { return setPaymentHoldModalVisible(true); }, type: "primary" }, { children: "Pay to accept" }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary" }, { children: isExpired ? 'Quote is expired' : 'Accept quote' }))) : null }))] })))] })));
19656
+ }
19657
+ function PaymentHoldDisplay(_a) {
19658
+ var _b, _c, _d, _e;
19659
+ var paymentHold = _a.paymentHold, currency = _a.currency, amount = _a.amount;
19660
+ var paymentMethod = ((_c = (_b = paymentHold.paymentMethod) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.identifier)
19661
+ ? (_e = (_d = paymentHold.paymentMethod) === null || _d === void 0 ? void 0 : _d.metadata) === null || _e === void 0 ? void 0 : _e.identifier
19662
+ : 'N/A';
19663
+ var formattedAmount = currency ? common.formatCurrency(amount, currency) : 'N/A';
19664
+ var expirationDate = paymentHold.expiresAt ? common.formatDate(paymentHold.expiresAt) : 'N/A';
19665
+ 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] })) }) })));
19290
19666
  }
19291
19667
  var templateObject_1$7;
19292
19668
 
19293
- var QUOTES_QUERY = function (filter) { return "\n query quotes {\n quotes ".concat(filter ? "(".concat(filter, ")") : "", " {\n pageInfo {\n startCursor\n endCursor\n hasNextPage\n hasPreviousPage\n }\n nodes {\n id\n name\n account {\n name\n id\n }\n applicationDate\n state\n createdAt\n expiresAt\n currencyId\n amount\n number\n }\n }\n }"); };
19669
+ var QUOTES_QUERY = function (filter) { return "\n query quotes {\n quotes ".concat(filter ? "(".concat(filter, ")") : '', " {\n pageInfo {\n startCursor\n endCursor\n hasNextPage\n hasPreviousPage\n }\n nodes {\n id\n name\n account {\n name\n id\n }\n applicationDate\n state\n createdAt\n expiresAt\n currencyId\n amount\n number\n }\n }\n }"); };
19294
19670
  var getQuotes = function (_a) {
19295
19671
  var token = _a.token, apiHost = _a.apiHost, filter = _a.filter;
19296
19672
  return __awaiter(void 0, void 0, void 0, function () {
19297
19673
  var response;
19298
19674
  return __generator(this, function (_b) {
19299
19675
  switch (_b.label) {
19300
- case 0: return [4 /*yield*/, common.gqlRequest({
19676
+ case 0: return [4 /*yield*/, gqlRequest({
19301
19677
  query: QUOTES_QUERY(filter),
19302
19678
  token: token,
19303
19679
  vars: {},
@@ -19375,10 +19751,10 @@ var getColor = function (state) {
19375
19751
  }
19376
19752
  };
19377
19753
 
19378
- var Text$l = antd.Typography.Text;
19754
+ var Text$n = antd.Typography.Text;
19379
19755
  var TransactionDate = function (_a) {
19380
19756
  var date = _a.date;
19381
- return jsxRuntime.jsx(Text$l, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
19757
+ return jsxRuntime.jsx(Text$n, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
19382
19758
  };
19383
19759
 
19384
19760
  var ArrowDownToLine = function (_a) {
@@ -19415,13 +19791,13 @@ var TransactionGridCell = defaultStyled.div.withConfig({
19415
19791
  }, common.SLATE_600);
19416
19792
  var templateObject_1$6;
19417
19793
 
19418
- var Text$k = antd.Typography.Text;
19794
+ var Text$m = antd.Typography.Text;
19419
19795
  var TransactionsEmptyState = function () {
19420
19796
  var noTransactionsMessage = react.useContext(TransactionsListContext).noTransactionsMessage;
19421
- return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
19797
+ return (jsxRuntime.jsx(Text$m, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
19422
19798
  };
19423
19799
 
19424
- var Text$j = antd.Typography.Text;
19800
+ var Text$l = antd.Typography.Text;
19425
19801
  var isInvoice = function (transaction) {
19426
19802
  return transaction.kind === "INVOICE";
19427
19803
  };
@@ -19433,7 +19809,7 @@ var TransactionRowTitle = function (_a) {
19433
19809
  if (!isInvoice(transaction) && !isQuote(transaction)) {
19434
19810
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
19435
19811
  }
19436
- return (jsxRuntime.jsx(Text$j, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19812
+ return (jsxRuntime.jsx(Text$l, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19437
19813
  };
19438
19814
 
19439
19815
  function transactionDateToDisplay(transaction, transactionDateType) {
@@ -19452,7 +19828,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
19452
19828
  }
19453
19829
  }
19454
19830
 
19455
- var Text$i = antd.Typography.Text;
19831
+ var Text$k = antd.Typography.Text;
19456
19832
  var TransactionsListDesktop = function (_a) {
19457
19833
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19458
19834
  var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19481,11 +19857,11 @@ var TransactionsListDesktop = function (_a) {
19481
19857
  !showState &&
19482
19858
  !showAmount &&
19483
19859
  !showDownload &&
19484
- !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$i, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$i, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
19860
+ !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$k, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$k, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$k, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$k, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
19485
19861
  }) }));
19486
19862
  };
19487
19863
 
19488
- var Text$h = antd.Typography.Text;
19864
+ var Text$j = antd.Typography.Text;
19489
19865
  var TransactionsListMobile = function (_a) {
19490
19866
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19491
19867
  var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19508,12 +19884,12 @@ var TransactionsListMobile = function (_a) {
19508
19884
  backgroundColor: index % 2 === 0
19509
19885
  ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
19510
19886
  : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
19511
- } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$h, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$h, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$h, { children: common.formatCurrency(transaction.transactionable.amount ||
19887
+ } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$j, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$j, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$j, { children: common.formatCurrency(transaction.transactionable.amount ||
19512
19888
  transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
19513
19889
  }) }));
19514
19890
  };
19515
19891
 
19516
- var Text$g = antd.Typography.Text;
19892
+ var Text$i = antd.Typography.Text;
19517
19893
  var DISPLAY_WIDTH = 1200;
19518
19894
  function Transactions(_a) {
19519
19895
  var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date", "title", "state", "amount", "download"] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? "shadow-md" : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
@@ -19626,7 +20002,7 @@ function TransactionsDisplay(_a) {
19626
20002
  onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
19627
20003
  setDrawerOpen(false);
19628
20004
  }
19629
- return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? "bunny-overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col bunny-gap-1" : "bunny-flex-row bunny-items-center", " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$g, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
20005
+ return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? "bunny-overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col bunny-gap-1" : "bunny-flex-row bunny-items-center", " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$i, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
19630
20006
  ), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-w-full" : "") }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
19631
20007
  ? searchBarClassName
19632
20008
  : "border border-slate-200", onChange: function (e) {
@@ -19744,7 +20120,7 @@ function QuotesWrapper() {
19744
20120
  return (jsxRuntime.jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
19745
20121
  }
19746
20122
 
19747
- var MUTATION$5 = function () { return "\nmutation AccountSignup (\n $pluginId: String!,\n $paymentMethodId: String,\n $priceListCode: String!,\n $accountId: ID!,\n $quoteId: ID!,\n $entityId: ID!\n) {\n accountSignup(\n pluginId: $pluginId,\n paymentMethodId: $paymentMethodId,\n priceListCode: $priceListCode,\n accountId: $accountId,\n quoteId: $quoteId,\n entityId: $entityId\n ) {\n errors\n quote {\n acceptedByName\n acceptedByTitle\n accountId\n amount\n amountDue\n applicationDate\n applied\n backdatedPeriods\n backdatedQuote\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceImmediately\n invoiceImmediatelyAvailable\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n number\n ownerId\n payableId\n periodAmount\n poNumber\n requiresApproval\n smallUnitAmountDue\n splitInvoice\n startDate\n state\n subtotal\n taxAmount\n taxCode\n updatedAt\n uuid\n }\n }\n}"; };
20123
+ var MUTATION$6 = function () { return "\nmutation AccountSignup (\n $pluginId: String!,\n $paymentMethodId: String,\n $priceListCode: String!,\n $accountId: ID!,\n $quoteId: ID!,\n $entityId: ID!\n) {\n accountSignup(\n pluginId: $pluginId,\n paymentMethodId: $paymentMethodId,\n priceListCode: $priceListCode,\n accountId: $accountId,\n quoteId: $quoteId,\n entityId: $entityId\n ) {\n errors\n quote {\n accountId\n amount\n amountDue\n applicationDate\n applied\n backdatedPeriods\n backdatedQuote\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceImmediately\n invoiceImmediatelyAvailable\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n number\n ownerId\n payableId\n periodAmount\n poNumber\n requiresApproval\n smallUnitAmountDue\n splitInvoice\n startDate\n state\n subtotal\n taxAmount\n taxCode\n updatedAt\n uuid\n }\n }\n}"; };
19748
20124
  var accountSignup = function (_a) {
19749
20125
  var token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode, entityId = _a.entityId;
19750
20126
  return __awaiter(void 0, void 0, void 0, function () {
@@ -19762,8 +20138,8 @@ var accountSignup = function (_a) {
19762
20138
  priceListCode: priceListCode,
19763
20139
  entityId: entityId,
19764
20140
  };
19765
- return [4 /*yield*/, common.gqlRequest({
19766
- query: MUTATION$5(),
20141
+ return [4 /*yield*/, gqlRequest({
20142
+ query: MUTATION$6(),
19767
20143
  token: token,
19768
20144
  vars: vars,
19769
20145
  apiHost: apiHost,
@@ -19779,7 +20155,7 @@ var accountSignup = function (_a) {
19779
20155
  });
19780
20156
  };
19781
20157
 
19782
- var MUTATION$4 = function () { return "\nmutation QuoteAccountSignup (\n $accountName: String!,\n $billingContact: ContactAttributes!,\n $priceListCode: String!,\n $entityId: ID!\n) {\n quoteAccountSignup(\n priceListCode: $priceListCode,\n accountName: $accountName,\n billingContact: $billingContact,\n entityId: $entityId\n ) {\n account {\n id\n }\n quote {\n acceptedByName\n acceptedByTitle\n accountId\n amount\n amountDue\n applicationDate\n applied\n backdatedPeriods\n backdatedQuote\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceImmediately\n invoiceImmediatelyAvailable\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n number\n ownerId\n payableId\n periodAmount\n poNumber\n requiresApproval\n smallUnitAmountDue\n splitInvoice\n startDate\n state\n subtotal\n taxAmount\n taxCode\n updatedAt\n uuid\n }\n tenant {\n code\n }\n portalSessionToken\n errors\n }\n}"; };
20158
+ var MUTATION$5 = function () { return "\nmutation QuoteAccountSignup (\n $accountName: String!,\n $billingContact: ContactAttributes!,\n $priceListCode: String!,\n $entityId: ID!\n) {\n quoteAccountSignup(\n priceListCode: $priceListCode,\n accountName: $accountName,\n billingContact: $billingContact,\n entityId: $entityId\n ) {\n account {\n id\n }\n quote {\n accountId\n amount\n amountDue\n applicationDate\n applied\n backdatedPeriods\n backdatedQuote\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceImmediately\n invoiceImmediatelyAvailable\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n number\n ownerId\n payableId\n periodAmount\n poNumber\n requiresApproval\n smallUnitAmountDue\n splitInvoice\n startDate\n state\n subtotal\n taxAmount\n taxCode\n updatedAt\n uuid\n }\n tenant {\n code\n }\n portalSessionToken\n errors\n }\n}"; };
19783
20159
  var quoteAccountSignup = function (_a) {
19784
20160
  var token = _a.token, apiHost = _a.apiHost, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact, entityId = _a.entityId;
19785
20161
  return __awaiter(void 0, void 0, void 0, function () {
@@ -19794,8 +20170,8 @@ var quoteAccountSignup = function (_a) {
19794
20170
  billingContact: billingContact,
19795
20171
  entityId: entityId,
19796
20172
  };
19797
- return [4 /*yield*/, common.gqlRequest({
19798
- query: MUTATION$4(),
20173
+ return [4 /*yield*/, gqlRequest({
20174
+ query: MUTATION$5(),
19799
20175
  token: token,
19800
20176
  vars: vars,
19801
20177
  apiHost: apiHost,
@@ -19811,14 +20187,41 @@ var quoteAccountSignup = function (_a) {
19811
20187
  });
19812
20188
  };
19813
20189
 
19814
- var MUTATION$3 = function () { return "\nquery PriceList($code: String!) {\n priceList (code: $code) {\n basePrice\n code\n createdAt\n currencyId\n id\n isVisible\n name\n periodMonths\n planId\n priceDescription\n productId\n sku\n trialAllowed\n trialLengthDays\n updatedAt\n }\n}"; };
20190
+ var MUTATION$4 = "mutation quoteAddCoupon($couponCode: String!, $quoteId: ID!) {\n quoteAddCoupon(couponCode: $couponCode, quoteId: $quoteId) {\n quote {\n id\n subtotal\n taxAmount\n amount\n quoteChanges {\n id\n charges {\n id\n amount\n couponId\n }\n }\n }\n }\n}";
20191
+ var quoteAddCoupon = function (_a) {
20192
+ var quoteId = _a.quoteId, couponCode = _a.couponCode, token = _a.token, apiHost = _a.apiHost;
20193
+ return __awaiter(void 0, void 0, void 0, function () {
20194
+ var vars, response, errors;
20195
+ var _b;
20196
+ return __generator(this, function (_c) {
20197
+ switch (_c.label) {
20198
+ case 0:
20199
+ vars = { quoteId: quoteId, couponCode: couponCode };
20200
+ return [4 /*yield*/, gqlRequest({
20201
+ query: MUTATION$4,
20202
+ token: token,
20203
+ vars: vars,
20204
+ apiHost: apiHost,
20205
+ })];
20206
+ case 1:
20207
+ response = _c.sent();
20208
+ errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAddCoupon) === null || _b === void 0 ? void 0 : _b.errors;
20209
+ if (errors)
20210
+ throw errors;
20211
+ return [2 /*return*/, response.quote];
20212
+ }
20213
+ });
20214
+ });
20215
+ };
20216
+
20217
+ var MUTATION$3 = function () { return "\nquery PriceList($code: String!) {\n priceList (code: $code) {\n basePrice\n code\n createdAt\n currencyId\n id\n isVisible\n name\n periodMonths\n planId\n priceDescription\n productId\n product {\n name\n }\n sku\n trialAllowed\n trialLengthDays\n updatedAt\n }\n}"; };
19815
20218
  var getPriceList = function (_a) {
19816
20219
  var token = _a.token, code = _a.code, apiHost = _a.apiHost;
19817
20220
  return __awaiter(void 0, void 0, void 0, function () {
19818
20221
  var response;
19819
20222
  return __generator(this, function (_b) {
19820
20223
  switch (_b.label) {
19821
- case 0: return [4 /*yield*/, common.gqlRequest({
20224
+ case 0: return [4 /*yield*/, gqlRequest({
19822
20225
  query: MUTATION$3(),
19823
20226
  token: token,
19824
20227
  vars: { code: code },
@@ -19832,52 +20235,105 @@ var getPriceList = function (_a) {
19832
20235
  });
19833
20236
  };
19834
20237
 
20238
+ var QUOTE_QUERY = function (id) { return "\n query quote {\n quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n amountsByPeriod {\n amount\n startDate\n }\n quoteChanges {\n currencyId\n id\n kind\n charges {\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n couponId\n quantity\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
20239
+ var getQuote = function (_a) {
20240
+ var id = _a.id, token = _a.token, apiHost = _a.apiHost;
20241
+ return __awaiter(void 0, void 0, void 0, function () {
20242
+ var response;
20243
+ return __generator(this, function (_b) {
20244
+ switch (_b.label) {
20245
+ case 0: return [4 /*yield*/, gqlRequest({
20246
+ query: QUOTE_QUERY(id),
20247
+ token: token,
20248
+ vars: {},
20249
+ apiHost: apiHost,
20250
+ })];
20251
+ case 1:
20252
+ response = _b.sent();
20253
+ return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
20254
+ }
20255
+ });
20256
+ });
20257
+ };
20258
+
20259
+ var useCurrentUserData = function () {
20260
+ var queryClient = reactQuery.useQueryClient();
20261
+ var token = useToken();
20262
+ var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
20263
+ if (!currentUser)
20264
+ return {};
20265
+ return currentUser;
20266
+ };
20267
+
20268
+ var BunnyFooterIcon = function (_a) {
20269
+ var color = _a.color;
20270
+ 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" }) })) })] })));
20271
+ };
20272
+
20273
+ var Text$h = antd.Typography.Text;
20274
+ var Footer = function (_a) {
20275
+ var className = _a.className;
20276
+ var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
20277
+ var isMobile = common.useIsMobile();
20278
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ".concat(isMobile ? 'bunny-flex-col bunny-gap-2 bunny-grow' : '', " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
20279
+ };
20280
+ var BunnyMarketingLink = function () {
20281
+ var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
20282
+ var isMobile = common.useIsMobile();
20283
+ 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 }) }))] })) })) })));
20284
+ };
20285
+ 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);
20286
+ 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);
20287
+ var templateObject_1$5, templateObject_2$1;
20288
+
20289
+ var Title$1 = antd.Typography.Title;
19835
20290
  function PaymentForms(_a) {
19836
20291
  var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction;
19837
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsx(PaymentForm, { onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction })) : null })) : (jsxRuntime.jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
20292
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Payment" })), jsxRuntime.jsx(PaymentForm, { onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction })] })) : null })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Signup" })), jsxRuntime.jsx(InitialSignupForm, { className: "bunny-px-4", onSubmit: handleSubmit, submitting: proceedingToPayment })] })) }));
19838
20293
  }
19839
20294
  function InitialSignupForm(_a) {
19840
- var onSubmit = _a.onSubmit, submitting = _a.submitting;
20295
+ var className = _a.className, onSubmit = _a.onSubmit, submitting = _a.submitting;
19841
20296
  var form = antd.Form.useForm()[0];
19842
20297
  function handleSubmit() {
19843
20298
  form.validateFields({ validateOnly: false }).then(function () {
19844
20299
  onSubmit(form.getFieldsValue());
19845
20300
  });
19846
20301
  }
19847
- return (jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-justify-between bunny-h-full bunny-w-full", form: form, layout: "vertical", autoComplete: "off" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-2" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: 'Please input your first name!' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: 'Please input your last name!' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "email", rules: [
19848
- { required: true, message: 'Please input your email!' },
19849
- { type: 'email', message: 'Please enter a valid email!' },
19850
- ] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Please input your company name!' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full bunny-mt-4" }, { children: "Proceed to payment" })) })] })));
20302
+ return (jsxRuntime.jsx(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-h-full bunny-w-full ".concat(className), form: form, layout: "vertical", autoComplete: "off" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-2" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: 'First name is required' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: 'Last name is required' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "email", rules: [
20303
+ { required: true, message: 'Email is required' },
20304
+ { type: 'email', message: 'Please enter a valid email' },
20305
+ ] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Company name is required' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full" }, { children: "Proceed to payment" })) })] })) })));
19851
20306
  }
19852
20307
 
19853
- var Title = antd.Typography.Title, Text$f = antd.Typography.Text;
20308
+ var Title = antd.Typography.Title, Text$g = antd.Typography.Text;
19854
20309
  function PaymentSuccessDisplay(_a) {
19855
20310
  var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
19856
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$f, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
20311
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$g, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
19857
20312
  }
19858
20313
 
19859
- var Text$e = antd.Typography.Text;
20314
+ var Text$f = antd.Typography.Text;
19860
20315
  function PriceListDisplay(_a) {
19861
- var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
20316
+ var priceListData = _a.priceListData;
19862
20317
  if (!priceListData)
19863
20318
  return null;
19864
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-justify-between bunny-h-full bunny-my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ style: { fontSize: "16px" }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
20319
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(Text$f, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxRuntime.jsxs(Text$f, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " / month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$f, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$f, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
19865
20320
  }
19866
20321
 
19867
20322
  var showErrorNotification = common.useErrorNotification();
19868
20323
  function Signup(_a) {
19869
- var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, style = _a.style, entityId = _a.entityId;
20324
+ var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, couponCode = _a.couponCode, className = _a.className, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, style = _a.style, entityId = _a.entityId;
19870
20325
  // Hooks
19871
20326
  var apiHost = react.useContext(BunnyContext).apiHost;
19872
20327
  var tokenFromContexts = useToken();
19873
20328
  var isMobile = common.useIsMobile();
19874
20329
  var topNavImageUrl = react.useContext(BrandContext).topNavImageUrl;
19875
- var _d = react.useState(undefined), quote = _d[0], setQuote = _d[1];
19876
- var _e = react.useState(undefined), accountId = _e[0], setAccountId = _e[1];
19877
- var _f = react.useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
20330
+ var _c = react.useState(undefined), initialQuote = _c[0], setInitialQuote = _c[1];
20331
+ var _d = react.useState(undefined), accountId = _d[0], setAccountId = _d[1];
20332
+ var _e = react.useState(undefined), portalSessionToken = _e[0], setPortalSessionToken = _e[1];
19878
20333
  var token = portalSessionToken || tokenFromContexts;
19879
- var _g = react.useState(false), proceedingToPayment = _g[0], setProceedingToPayment = _g[1];
19880
- var _h = react.useState(false), purchaseSucceeded = _h[0], setPurchaseSucceeded = _h[1];
20334
+ var _f = react.useState(false), proceedingToPayment = _f[0], setProceedingToPayment = _f[1];
20335
+ var _g = react.useState(false), purchaseSucceeded = _g[0], setPurchaseSucceeded = _g[1];
20336
+ var defaultCouponAppliedRef = react.useRef(undefined);
19881
20337
  var defaultPaymentMethod = usePaymentMethod({
19882
20338
  accountId: accountId,
19883
20339
  token: token,
@@ -19885,13 +20341,57 @@ function Signup(_a) {
19885
20341
  }).defaultPaymentMethod;
19886
20342
  var queryClient = reactQuery.useQueryClient();
19887
20343
  // Queries
19888
- var priceListData = reactQuery.useQuery({
19889
- queryKey: ["priceList", priceListCode],
20344
+ var _h = reactQuery.useQuery({
20345
+ queryKey: ['priceList', priceListCode],
19890
20346
  queryFn: function () { return getPriceList({ token: token, apiHost: apiHost, code: priceListCode }); },
19891
- }).data;
20347
+ }), priceListData = _h.data, isLoadingPriceList = _h.isLoading;
20348
+ var _j = reactQuery.useQuery({
20349
+ queryKey: ['quote', initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id],
20350
+ queryFn: function () {
20351
+ if (!(initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id)) {
20352
+ throw new Error('Quote ID is required');
20353
+ }
20354
+ return getQuote({ token: token, apiHost: apiHost, id: initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id });
20355
+ },
20356
+ enabled: !!(initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id),
20357
+ }), data = _j.data, isLoadingQuote = _j.isLoading;
20358
+ var quote = data || initialQuote;
20359
+ var _k = reactQuery.useMutation({
20360
+ mutationFn: function (couponCode) {
20361
+ if (!quote) {
20362
+ throw new Error('Quote is required');
20363
+ }
20364
+ if (!token) {
20365
+ throw new Error('Token is required');
20366
+ }
20367
+ return quoteAddCoupon({
20368
+ quoteId: quote.id,
20369
+ couponCode: couponCode,
20370
+ apiHost: apiHost,
20371
+ token: token,
20372
+ });
20373
+ },
20374
+ onSuccess: function () {
20375
+ queryClient.refetchQueries({
20376
+ queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
20377
+ });
20378
+ showSuccessNotification('Coupon applied');
20379
+ },
20380
+ onError: function (error) {
20381
+ var _a, _b;
20382
+ showErrorNotification((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
20383
+ },
20384
+ }), addCoupon = _k.mutate, isAddingCoupon = _k.isPending;
20385
+ // Handle default coupon application
20386
+ react.useEffect(function () {
20387
+ if (couponCode && (quote === null || quote === void 0 ? void 0 : quote.id) && defaultCouponAppliedRef.current !== couponCode) {
20388
+ addCoupon(couponCode);
20389
+ defaultCouponAppliedRef.current = couponCode;
20390
+ }
20391
+ }, [couponCode, quote === null || quote === void 0 ? void 0 : quote.id]);
19892
20392
  function handleSubmit(formData) {
19893
20393
  return __awaiter(this, void 0, void 0, function () {
19894
- var data, error_1;
20394
+ var data_1, error_1;
19895
20395
  return __generator(this, function (_a) {
19896
20396
  switch (_a.label) {
19897
20397
  case 0:
@@ -19910,9 +20410,9 @@ function Signup(_a) {
19910
20410
  entityId: entityId,
19911
20411
  })];
19912
20412
  case 1:
19913
- data = _a.sent();
19914
- setAccountId(data.account.id);
19915
- setPortalSessionToken(data.portalSessionToken);
20413
+ data_1 = _a.sent();
20414
+ setAccountId(data_1.account.id);
20415
+ setPortalSessionToken(data_1.portalSessionToken);
19916
20416
  // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
19917
20417
  // to instead use paymentMethods from portalSessionToken.
19918
20418
  queryClient.invalidateQueries({
@@ -19922,7 +20422,7 @@ function Signup(_a) {
19922
20422
  }),
19923
20423
  });
19924
20424
  setProceedingToPayment(false);
19925
- setQuote(data.quote);
20425
+ setInitialQuote(data_1.quote);
19926
20426
  return [3 /*break*/, 3];
19927
20427
  case 2:
19928
20428
  error_1 = _a.sent();
@@ -19948,16 +20448,16 @@ function Signup(_a) {
19948
20448
  switch (_a.label) {
19949
20449
  case 0:
19950
20450
  if (!portalSessionToken) {
19951
- throw new Error("Portal session token is required");
20451
+ throw new Error('Portal session token is required');
19952
20452
  }
19953
20453
  if (!accountId) {
19954
- throw new Error("Account ID is required");
20454
+ throw new Error('Account ID is required');
19955
20455
  }
19956
20456
  if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
19957
- throw new Error("Plugin ID is required");
20457
+ throw new Error('Plugin ID is required');
19958
20458
  }
19959
20459
  if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id)) {
19960
- throw new Error("Payment method ID is required");
20460
+ throw new Error('Payment method ID is required');
19961
20461
  }
19962
20462
  return [4 /*yield*/, accountSignup({
19963
20463
  token: portalSessionToken,
@@ -19977,45 +20477,27 @@ function Signup(_a) {
19977
20477
  function handlePaymentFail(error) {
19978
20478
  showErrorNotification(error.response.message);
19979
20479
  }
19980
- var WrapperComponent = function (_a) {
19981
- var children = _a.children, className = _a.className, style = _a.style;
19982
- return isCardEnabled ? (jsxRuntime.jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsxRuntime.jsx("div", __assign({ className: className, style: style }, { children: children })));
19983
- };
19984
- return (jsxRuntime.jsx(WrapperComponent, __assign({ className: "bunny-p-4 bunny-flex bunny-flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "bunny-w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col" : "bunny-flex-row", " bunny-h-full bunny-w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col ".concat(isMobile ? "bunny-items-center" : "bunny-w-1/2 bunny-items-center") }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-h-full" : "bunny-my-4") }, { children: jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: isMobile ? undefined : "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex ".concat(isMobile
19985
- ? "bunny-items-center bunny-justify-center bunny-my-12"
19986
- : "bunny-w-1/2 bunny-items-center bunny-justify-center bunny-my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-w-full" : "bunny-w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
19987
- }
19988
-
19989
- var createRequestHeaders = function (token) {
19990
- var bearerToken = token ? "Bearer ".concat(token) : null;
19991
- var headers = {
19992
- "Content-type": "application/json; charset=utf-8",
19993
- };
19994
- if (bearerToken) {
19995
- headers["Authorization"] = bearerToken;
20480
+ if (purchaseSucceeded) {
20481
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-screen bunny-flex bunny-items-start bunny-pt-[25vh]" }, { children: jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "bunny-w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId }) }))) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) }));
19996
20482
  }
19997
- return headers;
19998
- };
19999
- var getGraphQLBaseURL = function (apiHost) {
20000
- return "".concat(apiHost, "/graphql");
20001
- };
20002
- var useGraphQLRequest = function () {
20003
- return function (query, apiHost, token, variables) { return __awaiter(void 0, void 0, void 0, function () {
20004
- var error_1;
20005
- return __generator(this, function (_a) {
20006
- switch (_a.label) {
20007
- case 0:
20008
- _a.trys.push([0, 2, , 3]);
20009
- return [4 /*yield*/, request__default["default"](getGraphQLBaseURL(apiHost), query, variables, createRequestHeaders(token))];
20010
- case 1: return [2 /*return*/, _a.sent()];
20011
- case 2:
20012
- error_1 = _a.sent();
20013
- throw error_1;
20014
- case 3: return [2 /*return*/];
20015
- }
20016
- });
20017
- }); };
20483
+ return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col' : 'bunny-flex-row', " bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ").concat(shadow, " ").concat(className), style: style }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full', " bunny-justify-center") }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24" }, { children: [jsxRuntime.jsx("div", { children: topNavImageUrl.length > 0 && (jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false })) }), data ? (jsxRuntime.jsx(CheckoutSummary, { quote: data, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, priceListData: priceListData, isAddingCoupon: isAddingCoupon })) : (jsxRuntime.jsx("div", __assign({ className: "bunny-h-full" }, { children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true })) : (jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData })) }))), jsxRuntime.jsx(Footer, {})] })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full', " bunny-items-center"), style: {
20484
+ boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
20485
+ } }, { 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 }) }))) }))] })));
20486
+ }
20487
+ var Text$e = antd.Typography.Text;
20488
+ var CheckoutSummaryDivider = function () {
20489
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-my-2" }, { children: jsxRuntime.jsx(antd.Divider, { className: "m-0" }) })));
20018
20490
  };
20491
+ var showSuccessNotification = common.useSuccessNotification();
20492
+ function CheckoutSummary(_a) {
20493
+ var quote = _a.quote, className = _a.className; _a.onAddCoupon; var priceListData = _a.priceListData; _a.isAddingCoupon;
20494
+ 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) {
20495
+ return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
20496
+ var multiplier = charge.kind === 'COUPON' ? -1 : 1;
20497
+ 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));
20498
+ });
20499
+ }) })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Subtotal" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.amountDue, quote.currencyId) })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Taxes" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Total" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.amountDue + quote.taxAmount, quote.currencyId) })] }))] }), false ] })));
20500
+ }
20019
20501
 
20020
20502
  var useQuoteSubscriptionUpgrade = function () {
20021
20503
  var graphQLRequest = useGraphQLRequest();
@@ -20076,27 +20558,6 @@ var useQuoteDelete = function () {
20076
20558
  }); };
20077
20559
  };
20078
20560
 
20079
- var QUOTE_QUERY = function (id) { return "\n query quote {\n quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n amountsByPeriod {\n amount\n startDate\n }\n quoteChanges {\n currencyId\n id\n charges {\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n quantity\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
20080
- var getQuote = function (_a) {
20081
- var id = _a.id, token = _a.token, apiHost = _a.apiHost;
20082
- return __awaiter(void 0, void 0, void 0, function () {
20083
- var response;
20084
- return __generator(this, function (_b) {
20085
- switch (_b.label) {
20086
- case 0: return [4 /*yield*/, common.gqlRequest({
20087
- query: QUOTE_QUERY(id),
20088
- token: token,
20089
- vars: {},
20090
- apiHost: apiHost,
20091
- })];
20092
- case 1:
20093
- response = _b.sent();
20094
- return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
20095
- }
20096
- });
20097
- });
20098
- };
20099
-
20100
20561
  var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
20101
20562
  var getSubscriptions = function (_a) {
20102
20563
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
@@ -20105,7 +20566,7 @@ var getSubscriptions = function (_a) {
20105
20566
  var _b, _c;
20106
20567
  return __generator(this, function (_d) {
20107
20568
  switch (_d.label) {
20108
- case 0: return [4 /*yield*/, common.gqlRequest({
20569
+ case 0: return [4 /*yield*/, gqlRequest({
20109
20570
  isInPreviewMode: isInPreviewMode,
20110
20571
  query: SUBSCRIPTIONS_QUERY,
20111
20572
  token: token,
@@ -20124,7 +20585,7 @@ var pageWrapperClassName = function (isMobile) {
20124
20585
  return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
20125
20586
  };
20126
20587
 
20127
- var QUOTE_FIELDS = "quote {\n formattedQuote {\n html\n }\n acceptedByName\n acceptedByTitle\n accountId\n amount\n amountDue\n applicationDate\n applied\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n ownerId\n periodAmount\n poNumber\n requiresApproval\n startDate\n state\n subtotal\n taxAmount\n updatedAt\n uuid\n amountsByPeriod {\n amount\n id\n name\n }\n endDateOptions {\n endDate\n label\n }\n invoiceUntilOptions {\n endDate\n label\n }\n quoteChanges {\n id\n priceListId\n charges {\n amount\n amountsByPeriod { amount startDate }\n billingPeriod\n billingPeriodAmounts { id amount prorationRate }\n chargeType\n couponId\n createdAt\n currencyId\n discount\n endDate\n feature { id name code isUnit unitName }\n id\n invoiceLineText\n name\n price\n priceDecimals\n priceTiers { starts price }\n pricingModel\n prorationRate\n quantity\n quantityMax\n quantityMin\n startDate\n tieredAveragePrice\n updatedAt\n }\n }\n}";
20588
+ var QUOTE_FIELDS = "quote {\n formattedQuote {\n html\n }\n acceptedByName\n acceptedByTitle\n accountId\n amount\n amountDue\n applicationDate\n applied\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n ownerId\n periodAmount\n poNumber\n requiresApproval\n startDate\n state\n subtotal\n taxAmount\n updatedAt\n uuid\n amountsByPeriod {\n amount\n id\n name\n }\n endDateOptions {\n endDate\n label\n }\n invoiceUntilOptions {\n endDate\n label\n }\n quoteChanges {\n currencyId\n id\n kind\n charges {\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n billingPeriodAmounts { id amount prorationRate }\n chargeType\n couponId\n createdAt\n currencyId\n discount\n endDate\n feature { id name code isUnit unitName }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n couponId\n price\n priceDecimals\n priceTiers { starts price }\n pricingModel\n prorationRate\n quantity\n quantityMax\n quantityMin\n startDate\n tieredAveragePrice\n updatedAt\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n }\n}";
20128
20589
 
20129
20590
  var QUOTE_RECALCULATE_TAXES = "\n mutation QuoteRecalculateTaxes($id: ID!) {\n quoteRecalculateTaxes(id: $id) {\n ".concat(QUOTE_FIELDS, "\n errors\n }\n }\n");
20130
20591
  var quoteRecalculateTaxes = function (_a) {
@@ -20136,7 +20597,7 @@ var quoteRecalculateTaxes = function (_a) {
20136
20597
  switch (_d.label) {
20137
20598
  case 0:
20138
20599
  vars = { id: quoteId };
20139
- return [4 /*yield*/, common.gqlRequest({
20600
+ return [4 /*yield*/, gqlRequest({
20140
20601
  query: QUOTE_RECALCULATE_TAXES,
20141
20602
  token: token,
20142
20603
  vars: vars,
@@ -20161,7 +20622,7 @@ var getTaxationRequiredAccountFields = function (_a) {
20161
20622
  var _b, _c;
20162
20623
  return __generator(this, function (_d) {
20163
20624
  switch (_d.label) {
20164
- case 0: return [4 /*yield*/, common.gqlRequest({
20625
+ case 0: return [4 /*yield*/, gqlRequest({
20165
20626
  query: MUTATION$2,
20166
20627
  token: token,
20167
20628
  apiHost: apiHost,
@@ -20169,8 +20630,7 @@ var getTaxationRequiredAccountFields = function (_a) {
20169
20630
  case 1:
20170
20631
  response = _d.sent();
20171
20632
  return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
20172
- ? response.currentUser
20173
- .taxationRequiredAccountFields
20633
+ ? response.currentUser.taxationRequiredAccountFields
20174
20634
  : null];
20175
20635
  }
20176
20636
  });
@@ -20186,35 +20646,6 @@ var useHasTaxPlugin = function (_a) {
20186
20646
  return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
20187
20647
  };
20188
20648
 
20189
- var useCurrentUserData = function () {
20190
- var queryClient = reactQuery.useQueryClient();
20191
- var token = useToken();
20192
- var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
20193
- if (!currentUser)
20194
- return {};
20195
- return currentUser;
20196
- };
20197
-
20198
- var BunnyFooterIcon = function (_a) {
20199
- var color = _a.color;
20200
- return (jsxRuntime.jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
20201
- };
20202
-
20203
- var Footer = function (_a) {
20204
- var className = _a.className;
20205
- var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
20206
- var isMobile = common.useIsMobile();
20207
- return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ".concat(isMobile ? 'bunny-flex-col bunny-gap-2 bunny-grow' : '', " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
20208
- };
20209
- var BunnyMarketingLink = function () {
20210
- var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
20211
- var isMobile = common.useIsMobile();
20212
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsxRuntime.jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
20213
- };
20214
- var StyedLink = styled__default["default"].a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n font-size: 14px;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n font-size: 14px;\n"])), common.SLATE_400, common.SLATE_500);
20215
- var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n &:hover {\n color: ", " !important;\n }\n"], ["\n &:hover {\n color: ", " !important;\n }\n"])), common.PRIMARY_COLOR);
20216
- var templateObject_1$5, templateObject_2$1;
20217
-
20218
20649
  var MUTATION$1 = "\nmutation accountUpdate(\n $id: ID!,\n $attributes: AccountAttributes!) {\n accountUpdate(\n id: $id,\n attributes: $attributes\n ) {\n account {\n id\n billingCountry\n billingState\n billingStreet\n billingCity\n billingZip\n name\n }\n errors\n }\n }\n";
20219
20650
  var accountUpdate = function (_a) {
20220
20651
  var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
@@ -20225,7 +20656,7 @@ var accountUpdate = function (_a) {
20225
20656
  switch (_c.label) {
20226
20657
  case 0:
20227
20658
  vars = { id: accountId, attributes: attributes };
20228
- return [4 /*yield*/, common.gqlRequest({
20659
+ return [4 /*yield*/, gqlRequest({
20229
20660
  query: MUTATION$1,
20230
20661
  token: token,
20231
20662
  vars: vars,
@@ -20289,10 +20720,10 @@ var FormBillingState = function (_a) {
20289
20720
 
20290
20721
  var QuoteCheckout = function (_a) {
20291
20722
  var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields;
20292
- var _b = react.useContext(BunnyContext), apiHost = _b.apiHost; _b.graphQLClient;
20723
+ var apiHost = react.useContext(BunnyContext).apiHost;
20293
20724
  var token = useToken();
20294
20725
  var isMobile = common.useIsMobile();
20295
- var _c = react.useState(false), isSaving = _c[0], setIsSaving = _c[1];
20726
+ var _b = react.useState(false), isSaving = _b[0], setIsSaving = _b[1];
20296
20727
  var paymentRequired = getQuoteAmountDue(quote) > 0;
20297
20728
  var checkoutMutation = reactQuery.useMutation({
20298
20729
  mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -20300,9 +20731,9 @@ var QuoteCheckout = function (_a) {
20300
20731
  switch (_a.label) {
20301
20732
  case 0:
20302
20733
  if (!quote)
20303
- throw new Error("Quote is required");
20734
+ throw new Error('Quote is required');
20304
20735
  if (paymentRequired)
20305
- throw new Error("Payment is required");
20736
+ throw new Error('Payment is required');
20306
20737
  return [4 /*yield*/, checkout({ quoteId: quote.id, token: token, apiHost: apiHost })];
20307
20738
  case 1: return [2 /*return*/, _a.sent()];
20308
20739
  }
@@ -20323,17 +20754,17 @@ var QuoteCheckout = function (_a) {
20323
20754
  }
20324
20755
  if (taxationRequiredAccountFields)
20325
20756
  return (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
20326
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? "bunny-shadow-padding-x" : "") }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
20757
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
20327
20758
  };
20328
20759
  var PaymentFormWrapper = function (_a) {
20329
20760
  var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
20330
20761
  var isMobile = common.useIsMobile();
20331
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-6 bunny-shrink-0 ".concat(isMobile ? "bunny-w-full bunny-shadow-padding-xb" : "", " ").concat(className), style: __assign({}, (isMobile
20762
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-6 bunny-shrink-0 ".concat(isMobile ? 'bunny-w-full bunny-shadow-padding-xb' : '', " ").concat(className), style: __assign({}, (isMobile
20332
20763
  ? setMaxHeight
20333
- ? { maxHeight: "60vh" }
20764
+ ? { maxHeight: '60vh' }
20334
20765
  : {}
20335
20766
  : {
20336
- width: "350px",
20767
+ width: '350px',
20337
20768
  })) }, { children: children })));
20338
20769
  };
20339
20770
 
@@ -20350,18 +20781,18 @@ var Checkout = function (_a) {
20350
20781
  var queryClient = reactQuery.useQueryClient();
20351
20782
  // Queries
20352
20783
  var _d = reactQuery.useQuery({
20353
- queryKey: ["getTaxationRequiredAccountFields", token],
20784
+ queryKey: ['getTaxationRequiredAccountFields', token],
20354
20785
  queryFn: function () { return getTaxationRequiredAccountFields({ apiHost: apiHost, token: token }); },
20355
20786
  enabled: Boolean(quote),
20356
20787
  staleTime: 0,
20357
20788
  }), taxationRequiredAccountFields = _d.data, isLoadingTaxationRequiredAccountFields = _d.isLoading;
20358
20789
  var _e = reactQuery.useQuery({
20359
- queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
20790
+ queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
20360
20791
  queryFn: function () {
20361
- return (quote === null || quote === void 0 ? void 0 : quote.accountId) && common.getAccount({ id: quote.accountId, apiHost: apiHost, token: token });
20792
+ return (quote === null || quote === void 0 ? void 0 : quote.accountId) &&
20793
+ common.getAccount({ id: quote.accountId, apiHost: apiHost, token: token, componentsVersion: PACKAGE_VERSION });
20362
20794
  },
20363
- enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
20364
- ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
20795
+ enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
20365
20796
  }), account = _e.data, isLoadingAccount = _e.isLoading;
20366
20797
  reactQuery.useQuery({
20367
20798
  queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
@@ -20383,8 +20814,8 @@ var Checkout = function (_a) {
20383
20814
  updatedQuote = _a.sent();
20384
20815
  if (updatedQuote) {
20385
20816
  quoteKey = queryKeyFactory.createObjectKey({
20386
- objectName: "editingQuote",
20387
20817
  id: updatedQuote.id,
20818
+ objectName: 'editingQuote',
20388
20819
  token: token,
20389
20820
  });
20390
20821
  calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
@@ -20412,7 +20843,7 @@ var Checkout = function (_a) {
20412
20843
  return null;
20413
20844
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50 bunny-overflow-auto", style: {
20414
20845
  zIndex: 1001,
20415
- } }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-gap-6 bunny-pt-4 ".concat(isMobile ? "bunny-flex-col" : "bunny-shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "" })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full bunny-pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
20846
+ } }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb') }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full bunny-pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
20416
20847
  onFail(error);
20417
20848
  }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
20418
20849
  onFail(error);
@@ -20437,15 +20868,12 @@ var SubscriptionsContext = react.createContext({});
20437
20868
 
20438
20869
  var QUOTE_CHARGE_UPDATE = "\n mutation QuoteChargeUpdate (\n $discount: Float,\n $endDate: ISO8601Date,\n $name: String,\n $price: Float,\n $quantity: Int,\n $quoteChargeId: ID!\n $startDate: ISO8601Date\n $subtotal: Float,\n ) {\n quoteChargeUpdate(\n discount: $discount\n endDate: $endDate\n name: $name\n price: $price\n quantity: $quantity\n quoteChargeId: $quoteChargeId\n startDate: $startDate\n subtotal: $subtotal\n ) {\n quoteCharge {\n id\n }\n }\n }\n";
20439
20870
  var quoteChargeUpdate = function (_a) {
20440
- var discount = _a.discount,
20441
- // endDate,
20442
- name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
20443
- return common.gqlRequest({
20871
+ var discount = _a.discount, name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
20872
+ return gqlRequest({
20444
20873
  query: QUOTE_CHARGE_UPDATE,
20445
20874
  vars: {
20446
20875
  subtotal: subtotal,
20447
20876
  discount: discount,
20448
- // endDate,
20449
20877
  name: name,
20450
20878
  price: price,
20451
20879
  quantity: quantity,
@@ -20643,23 +21071,22 @@ var CheckoutBarSummarySection = function (_a) {
20643
21071
  };
20644
21072
 
20645
21073
  var PlanPickerCheckoutBarWrapper = function (_a) {
20646
- var handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21074
+ var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
20647
21075
  // Context
20648
21076
  var quotePreviewData = react.useContext(SubscriptionsContext).quotePreviewData;
20649
21077
  var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
20650
21078
  if (!selectedPriceList)
20651
21079
  return null;
20652
- return (jsxRuntime.jsx(PlanPickerCheckoutBar, { handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
21080
+ return (jsxRuntime.jsx(PlanPickerCheckoutBar, { editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
20653
21081
  };
20654
21082
  var PlanPickerCheckoutBar = function (_a) {
20655
- var selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21083
+ var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
20656
21084
  // Context
20657
21085
  var token = useToken();
20658
21086
  var _b = react.useContext(SubscriptionsContext), quotePreviewData = _b.quotePreviewData, upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
20659
21087
  var apiHost = react.useContext(BunnyContext).apiHost;
20660
21088
  // Local state
20661
21089
  var _c = react.useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
20662
- var quoteIdRef = react.useRef();
20663
21090
  // Hooks
20664
21091
  var showSuccessNotification = common.useSuccessNotification();
20665
21092
  var queryClient = reactQuery.useQueryClient();
@@ -20678,15 +21105,16 @@ var PlanPickerCheckoutBar = function (_a) {
20678
21105
  onSuccess: function (subscriptionUpdateData) {
20679
21106
  var _a;
20680
21107
  var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
20681
- quoteIdRef.current = quote.id;
21108
+ setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
20682
21109
  },
20683
21110
  });
20684
21111
  var updateCharge = reactQuery.useMutation({
20685
21112
  mutationFn: quoteChargeUpdate,
20686
21113
  onSuccess: function () {
20687
21114
  queryClient.invalidateQueries({
20688
- queryKey: common.QueryKeyFactory.default.createQuoteKey({
20689
- id: quoteIdRef.current || '',
21115
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
21116
+ objectName: 'editingQuote',
21117
+ id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
20690
21118
  token: token,
20691
21119
  }),
20692
21120
  });
@@ -20694,8 +21122,9 @@ var PlanPickerCheckoutBar = function (_a) {
20694
21122
  }).mutate;
20695
21123
  // Queries
20696
21124
  var quote = reactQuery.useQuery({
20697
- queryKey: common.QueryKeyFactory.default.createQuoteKey({
20698
- id: quoteIdRef.current || '',
21125
+ queryKey: common.QueryKeyFactory.default.createObjectKey({
21126
+ objectName: 'editingQuote',
21127
+ id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
20699
21128
  token: token,
20700
21129
  }),
20701
21130
  queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -20703,11 +21132,11 @@ var PlanPickerCheckoutBar = function (_a) {
20703
21132
  return __generator(this, function (_a) {
20704
21133
  switch (_a.label) {
20705
21134
  case 0:
20706
- if (!quoteIdRef.current) {
20707
- throw new Error('Quote ID is required');
21135
+ if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
21136
+ throw new Error('editingQuote is undefined');
20708
21137
  }
20709
21138
  return [4 /*yield*/, getQuote({
20710
- id: quoteIdRef.current,
21139
+ id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
20711
21140
  token: token,
20712
21141
  apiHost: apiHost,
20713
21142
  })];
@@ -20717,7 +21146,7 @@ var PlanPickerCheckoutBar = function (_a) {
20717
21146
  }
20718
21147
  });
20719
21148
  }); },
20720
- enabled: Boolean(quoteIdRef.current),
21149
+ enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
20721
21150
  }).data;
20722
21151
  react.useEffect(function () {
20723
21152
  if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
@@ -20803,7 +21232,7 @@ var getPriceListChangeOptions = function (_a) {
20803
21232
  var response, priceListChangeOptions;
20804
21233
  return __generator(this, function (_b) {
20805
21234
  switch (_b.label) {
20806
- case 0: return [4 /*yield*/, common.gqlRequest({
21235
+ case 0: return [4 /*yield*/, gqlRequest({
20807
21236
  isInPreviewMode: isInPreviewMode,
20808
21237
  query: PRICE_LIST_CHANGE_OPTIONS_QUERY,
20809
21238
  vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id, productId: productId },
@@ -20945,18 +21374,18 @@ var PriceListCardButton = function (_a) {
20945
21374
  var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
20946
21375
  var createButtonText = function () {
20947
21376
  if (isPriceListCurrentSubscription)
20948
- return "Current";
21377
+ return 'Current';
20949
21378
  if (isSelected)
20950
- return "Selected";
21379
+ return 'Selected';
20951
21380
  if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
20952
- return "Subscribed";
21381
+ return 'Subscribed';
20953
21382
  if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US)
20954
21383
  return priceList.plan.contactUsLabel;
20955
- return "Select";
21384
+ return 'Select';
20956
21385
  };
20957
21386
  return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end" }, { children: jsxRuntime.jsx(StyledCardButton, __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: disableOnClick, style: {
20958
- maxWidth: "240px",
20959
- }, type: isSelected ? "primary" : "default" }, { children: createButtonText() })) })) })));
21387
+ maxWidth: '240px',
21388
+ }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
20960
21389
  };
20961
21390
  var StyledCardButton = styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"], ["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"])), common.SLATE_200, common.SLATE_600);
20962
21391
  var templateObject_1$3;
@@ -20987,16 +21416,16 @@ var PlanPickerGridCell = function (_a) {
20987
21416
 
20988
21417
  var PriceListCardDesktop = function (_a) {
20989
21418
  var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
20990
- return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 bunny-pb-4 ".concat(disableOnClick ? "" : "cursor-pointer"), onClick: function () {
21419
+ return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 ".concat(disableOnClick ? '' : 'cursor-pointer'), onClick: function () {
20991
21420
  if (!disableOnClick) {
20992
21421
  if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US) {
20993
- window.open(priceList.plan.contactUsUrl, "_blank");
21422
+ window.open(priceList.plan.contactUsUrl, '_blank');
20994
21423
  }
20995
21424
  else
20996
21425
  onClick(priceList);
20997
21426
  }
20998
21427
  }, style: {
20999
- height: "100%",
21428
+ height: '100%',
21000
21429
  } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })) }));
21001
21430
  };
21002
21431
 
@@ -21364,7 +21793,7 @@ var PlanPicker = function () {
21364
21793
  // Queries
21365
21794
  var _c = reactQuery.useQuery({
21366
21795
  queryKey: common.QueryKeyFactory.default.createTableKey({
21367
- pluralType: "subscriptions",
21796
+ pluralType: 'subscriptions',
21368
21797
  token: token,
21369
21798
  }),
21370
21799
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
@@ -21388,7 +21817,7 @@ var PlanPicker = function () {
21388
21817
  // Handlers
21389
21818
  var onChangePriceList = react.useCallback(function (selectedPriceList) {
21390
21819
  if (isInPreviewMode)
21391
- return showInfoNotification("You are in preview mode");
21820
+ return showInfoNotification('You are in preview mode');
21392
21821
  return setQuotePreviewData({
21393
21822
  priceList: selectedPriceList,
21394
21823
  quantity: calculateNewQuantity(selectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
@@ -21478,6 +21907,12 @@ var PlanManager = function (_a) {
21478
21907
  observer.unobserve(el);
21479
21908
  };
21480
21909
  }, []);
21910
+ function handleSetEditingQuoteData(quoteId, isTrial) {
21911
+ setEditingQuoteData({
21912
+ id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
21913
+ isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial),
21914
+ });
21915
+ }
21481
21916
  // Handlers
21482
21917
  var onSuccess = function () {
21483
21918
  setEditingQuoteData(undefined);
@@ -21506,7 +21941,7 @@ var PlanManager = function (_a) {
21506
21941
  return showInfoNotification('You are in preview mode');
21507
21942
  setQuotePreviewData(undefined);
21508
21943
  onChangePlanCancel();
21509
- }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
21944
+ }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { editingQuote: editingQuoteData, setEditingQuoteData: handleSetEditingQuoteData, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
21510
21945
  };
21511
21946
 
21512
21947
  var useCancelSubscription = function () {
@@ -21547,7 +21982,7 @@ var getFeatureUsage = function (_a) {
21547
21982
  vars = {
21548
21983
  id: subscriptionChargeId,
21549
21984
  };
21550
- return [4 /*yield*/, common.gqlRequest({
21985
+ return [4 /*yield*/, gqlRequest({
21551
21986
  query: FEATURE_USAGE_MUTATION,
21552
21987
  token: token,
21553
21988
  vars: vars,
@@ -21558,7 +21993,7 @@ var getFeatureUsage = function (_a) {
21558
21993
  if ((_b = response.featureUsageHistogram) === null || _b === void 0 ? void 0 : _b.data)
21559
21994
  return [2 /*return*/, response.featureUsageHistogram];
21560
21995
  else
21561
- throw new Error("No data found");
21996
+ throw new Error('No data found');
21562
21997
  }
21563
21998
  });
21564
21999
  });
@@ -21993,7 +22428,7 @@ var quoteChargeCreate = function (_a) {
21993
22428
  var
21994
22429
  // endDate,
21995
22430
  price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
21996
- return common.gqlRequest({
22431
+ return gqlRequest({
21997
22432
  query: QUOTE_CHARGE_CREATE,
21998
22433
  vars: {
21999
22434
  // endDate,
@@ -22225,8 +22660,8 @@ var QuoteChangeSummarySection = function (_a) {
22225
22660
  : openCheckout, disabled: !editingQuoteData, size: isMobile ? "large" : "middle", type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? "Activate Trial" : "Proceed to checkout" })) }))] })));
22226
22661
  };
22227
22662
 
22228
- var QUANTITY_CHANGE_HEADER_TITLE = "Update unit quantity";
22229
- var QUANTITY_CHANGE_HEADER_DESCRIPTION = "Adjust quantities below. The change will take effect immediately after checkout has been completed.";
22663
+ var QUANTITY_CHANGE_HEADER_TITLE = 'Update unit quantity';
22664
+ var QUANTITY_CHANGE_HEADER_DESCRIPTION = 'Adjust quantities below. The change will take effect immediately after checkout has been completed.';
22230
22665
  var QuantityChangeDrawerDesktop = function (_a) {
22231
22666
  var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions;
22232
22667
  var _b = react.useState(open), openLocal = _b[0], setOpenLocal = _b[1];
@@ -22248,22 +22683,22 @@ var QuantityChangeDrawerDesktop = function (_a) {
22248
22683
  return (jsxRuntime.jsxs(antd.Drawer, __assign({ closeIcon: null, destroyOnClose: true, onClose: onClose, open: open, styles: isMobile
22249
22684
  ? {
22250
22685
  body: {
22251
- padding: "1rem",
22252
- overflow: "hidden",
22686
+ padding: '1rem',
22687
+ overflow: 'hidden',
22253
22688
  background: common.SLATE_50,
22254
22689
  },
22255
22690
  wrapper: {
22256
- width: "100vw",
22691
+ width: '100vw',
22257
22692
  },
22258
22693
  }
22259
22694
  : {
22260
22695
  wrapper: {
22261
- minWidth: "600px",
22696
+ minWidth: '600px',
22262
22697
  },
22263
22698
  }, title: jsxRuntime.jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-pb-4", style: {
22264
- gridTemplateColumns: "2fr 1fr 1fr",
22265
- rowGap: "0.75rem",
22266
- columnGap: "1rem",
22699
+ gridTemplateColumns: '2fr 1fr 1fr',
22700
+ rowGap: '0.75rem',
22701
+ columnGap: '1rem',
22267
22702
  } }, { children: [jsxRuntime.jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-py-2" }), subscriptions.map(function (subscription, index) {
22268
22703
  var _a;
22269
22704
  var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
@@ -22271,7 +22706,7 @@ var QuantityChangeDrawerDesktop = function (_a) {
22271
22706
  var _a;
22272
22707
  if ((isTrial && !charge.trial) ||
22273
22708
  (!isTrial && charge.trial) ||
22274
- ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === "USAGE")
22709
+ ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'USAGE')
22275
22710
  return null;
22276
22711
  return (jsxRuntime.jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions }, chargeIndex));
22277
22712
  }) }), index));
@@ -22311,7 +22746,7 @@ var SubscriptionsNavigation = function (_a) {
22311
22746
 
22312
22747
  var Text$1 = antd.Typography.Text;
22313
22748
  var SubscriptionsWrapper = function (_a) {
22314
- var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, _b = _a.isInPreviewMode, isInPreviewMode = _b === void 0 ? false : _b, productId = _a.productId, className = _a.className, _c = _a.styles, userStyles = _c === void 0 ? {} : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.hideExpiredToggle, hideExpiredToggle = _e === void 0 ? false : _e;
22749
+ var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, _b = _a.isInPreviewMode, isInPreviewMode = _b === void 0 ? false : _b, productId = _a.productId, className = _a.className, _c = _a.styles, userStyles = _c === void 0 ? {} : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, hideExpired = _a.hideExpired, _e = _a.hideExpiredToggle, hideExpiredToggle = _e === void 0 ? false : _e;
22315
22750
  var defaultStyles = {
22316
22751
  gap: 4,
22317
22752
  shadow: 'sm',
@@ -22332,6 +22767,7 @@ var SubscriptionsWrapper = function (_a) {
22332
22767
  subscriptionProductNameStyle: styles.subscriptionProductNameStyle,
22333
22768
  productId: productId,
22334
22769
  isInPreviewMode: isInPreviewMode,
22770
+ hideExpired: hideExpired,
22335
22771
  upgradingSubscription: upgradingSubscription,
22336
22772
  setUpgradingSubscription: setUpgradingSubscription,
22337
22773
  updatingChargeQuantityId: updatingChargeQuantityId,
@@ -22347,14 +22783,15 @@ var Subscriptions = function (_a) {
22347
22783
  // Context
22348
22784
  var token = useToken();
22349
22785
  var apiHost = react.useContext(BunnyContext).apiHost;
22350
- var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _b.setSubscriptionUpgradeId, className = _b.className, isInPreviewMode = _b.isInPreviewMode;
22786
+ var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _b.setSubscriptionUpgradeId, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired;
22351
22787
  // Local state
22352
22788
  var _c = react.useState(), editingQuoteData = _c[0], setEditingQuoteData = _c[1];
22353
22789
  var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
22354
- var _e = react.useState(true), hideExpired = _e[0], setHideExpired = _e[1];
22790
+ var _e = react.useState(true), hideExpiredState = _e[0], setHideExpiredState = _e[1];
22355
22791
  var _f = react.useState(false), quantityDrawerOpen = _f[0], setQuantityDrawerOpen = _f[1];
22356
22792
  var _g = react.useState(false), expiredSwitchVisible = _g[0], setExpiredSwitchVisible = _g[1];
22357
22793
  var _h = react.useState(false), isChangingPlan = _h[0], setIsChangingPlan = _h[1];
22794
+ var hideExpired = hideExpiredOverride !== null && hideExpiredOverride !== void 0 ? hideExpiredOverride : hideExpiredState;
22358
22795
  // Hooks
22359
22796
  var queryClient = reactQuery.useQueryClient();
22360
22797
  var showSuccessNotification = common.useSuccessNotification();
@@ -22428,7 +22865,7 @@ var Subscriptions = function (_a) {
22428
22865
  });
22429
22866
  showSuccessNotification('Your plan has been updated', 'Payment successful');
22430
22867
  setPayModalVisible(false);
22431
- setHideExpired(true);
22868
+ setHideExpiredState(true);
22432
22869
  };
22433
22870
  var onCancel = function () {
22434
22871
  setPayModalVisible(false);
@@ -22458,7 +22895,7 @@ var Subscriptions = function (_a) {
22458
22895
  });
22459
22896
  react.useEffect(function () {
22460
22897
  if (allSubscriptionsExpired && subscriptions.length > 0)
22461
- setHideExpired(false);
22898
+ setHideExpiredState(false);
22462
22899
  }, [allSubscriptionsExpired, subscriptions]);
22463
22900
  react.useEffect(function () {
22464
22901
  if (hasExpiredOrCanceledSubscriptions && subscriptions.length > 0)
@@ -22469,7 +22906,7 @@ var Subscriptions = function (_a) {
22469
22906
  setIsChangingPlan(false);
22470
22907
  }, handlePortalErrors: handlePortalErrors }));
22471
22908
  }
22472
- return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod })] })));
22909
+ return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod })] })));
22473
22910
  };
22474
22911
  var PageHeaderWithActions = function (_a) {
22475
22912
  var children = _a.children, title = _a.title;
@@ -22494,7 +22931,7 @@ var billingDetailsUpdate = function (_a) {
22494
22931
  switch (_c.label) {
22495
22932
  case 0:
22496
22933
  vars = { attributes: attributes };
22497
- return [4 /*yield*/, common.gqlRequest({
22934
+ return [4 /*yield*/, gqlRequest({
22498
22935
  query: MUTATION,
22499
22936
  token: token,
22500
22937
  vars: vars,
@@ -22522,7 +22959,7 @@ var getBillingDetails = function (_a) {
22522
22959
  var _b;
22523
22960
  return __generator(this, function (_c) {
22524
22961
  switch (_c.label) {
22525
- case 0: return [4 /*yield*/, common.gqlRequest({
22962
+ case 0: return [4 /*yield*/, gqlRequest({
22526
22963
  query: billingDetailsQuery(),
22527
22964
  token: token,
22528
22965
  apiHost: apiHost,