@bunnyapp/components 1.0.55 → 1.0.56-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 (96) hide show
  1. package/dist/cjs/index.js +685 -625
  2. package/dist/cjs/src/components/BunnyProvider.d.ts +2 -2
  3. package/dist/cjs/src/components/Checkout/Checkout.d.ts +2 -3
  4. package/dist/cjs/src/components/Checkout/QuoteCheckout.d.ts +1 -1
  5. package/dist/cjs/src/components/PaymentForm/{PaymentMethod → DemoPay}/CreditCard/CreditCard.d.ts +5 -3
  6. package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +2 -3
  7. package/dist/cjs/src/components/PaymentForm/PaymentFormTypes.d.ts +1 -1
  8. package/dist/cjs/src/components/PaymentForm/PaymentMethodDetails.d.ts +4 -4
  9. package/dist/cjs/src/components/PaymentForm/hooks/useAutoSetDefaultPaymentMethod.d.ts +8 -0
  10. package/dist/cjs/src/components/PaymentForm/hooks/useHasActiveSubscription.d.ts +5 -0
  11. package/dist/cjs/src/components/PaymentForm/hooks/usePaymentMethodSelectorPlugin.d.ts +11 -0
  12. package/dist/cjs/src/components/PaymentForm/index.d.ts +0 -1
  13. package/dist/cjs/src/components/PaymentForm/useRemovePaymentMethod.d.ts +1 -1
  14. package/dist/cjs/src/components/PaymentForm/useSetDefaultPaymentMethod.d.ts +6 -0
  15. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/NextPriceListButton.d.ts +2 -1
  16. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarInput.d.ts +3 -2
  17. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +1 -2
  18. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +2 -1
  19. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +2 -1
  20. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +1 -2
  21. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +3 -2
  22. package/dist/cjs/src/components/Subscriptions/SubscriptionRequests.d.ts +2 -2
  23. package/dist/cjs/src/components/index.d.ts +1 -1
  24. package/dist/cjs/src/contexts/PaymentContext.d.ts +2 -1
  25. package/dist/cjs/src/graphql/QuoteRequests.d.ts +4 -3
  26. package/dist/cjs/src/graphql/mutations/quoteChargeCreate.d.ts +2 -3
  27. package/dist/cjs/src/graphql/mutations/quoteChargeUpdate.d.ts +12 -0
  28. package/dist/cjs/src/graphql/mutations/quoteCompose.d.ts +1 -1
  29. package/dist/cjs/src/graphql/mutations/quoteRecalculateTaxes.d.ts +2 -2
  30. package/dist/cjs/src/graphql/queries/getPriceListChangeOptions.d.ts +1 -1
  31. package/dist/cjs/src/graphql/queries/getTaxationRequiredAccountFields.d.ts +2 -2
  32. package/dist/cjs/src/hooks/quotes/useSendAcceptQuote.d.ts +1 -1
  33. package/dist/cjs/src/hooks/quotes/useSigningComplete.d.ts +1 -1
  34. package/dist/cjs/src/hooks/useHasTaxPlugin.d.ts +1 -1
  35. package/dist/cjs/src/hooks/usePaymentMethod.d.ts +6 -5
  36. package/dist/cjs/src/hooks/usePaymentPlugins.d.ts +1 -1
  37. package/dist/cjs/src/hooks/usePlugins.d.ts +2 -2
  38. package/dist/cjs/src/hooks/useSigningPlugins.d.ts +1 -1
  39. package/dist/cjs/src/hooks/useToken.d.ts +1 -1
  40. package/dist/cjs/src/utils/apiUtils.d.ts +1 -1
  41. package/dist/esm/index.js +689 -628
  42. package/dist/esm/src/components/BunnyProvider.d.ts +2 -2
  43. package/dist/esm/src/components/Checkout/Checkout.d.ts +2 -3
  44. package/dist/esm/src/components/Checkout/QuoteCheckout.d.ts +1 -1
  45. package/dist/esm/src/components/PaymentForm/{PaymentMethod → DemoPay}/CreditCard/CreditCard.d.ts +5 -3
  46. package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +2 -3
  47. package/dist/esm/src/components/PaymentForm/PaymentFormTypes.d.ts +1 -1
  48. package/dist/esm/src/components/PaymentForm/PaymentMethodDetails.d.ts +4 -4
  49. package/dist/esm/src/components/PaymentForm/hooks/useAutoSetDefaultPaymentMethod.d.ts +8 -0
  50. package/dist/esm/src/components/PaymentForm/hooks/useHasActiveSubscription.d.ts +5 -0
  51. package/dist/esm/src/components/PaymentForm/hooks/usePaymentMethodSelectorPlugin.d.ts +11 -0
  52. package/dist/esm/src/components/PaymentForm/index.d.ts +0 -1
  53. package/dist/esm/src/components/PaymentForm/useRemovePaymentMethod.d.ts +1 -1
  54. package/dist/esm/src/components/PaymentForm/useSetDefaultPaymentMethod.d.ts +6 -0
  55. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/NextPriceListButton.d.ts +2 -1
  56. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarInput.d.ts +3 -2
  57. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +1 -2
  58. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +2 -1
  59. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +2 -1
  60. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +1 -2
  61. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +3 -2
  62. package/dist/esm/src/components/Subscriptions/SubscriptionRequests.d.ts +2 -2
  63. package/dist/esm/src/components/index.d.ts +1 -1
  64. package/dist/esm/src/contexts/PaymentContext.d.ts +2 -1
  65. package/dist/esm/src/graphql/QuoteRequests.d.ts +4 -3
  66. package/dist/esm/src/graphql/mutations/quoteChargeCreate.d.ts +2 -3
  67. package/dist/esm/src/graphql/mutations/quoteChargeUpdate.d.ts +12 -0
  68. package/dist/esm/src/graphql/mutations/quoteCompose.d.ts +1 -1
  69. package/dist/esm/src/graphql/mutations/quoteRecalculateTaxes.d.ts +2 -2
  70. package/dist/esm/src/graphql/queries/getPriceListChangeOptions.d.ts +1 -1
  71. package/dist/esm/src/graphql/queries/getTaxationRequiredAccountFields.d.ts +2 -2
  72. package/dist/esm/src/hooks/quotes/useSendAcceptQuote.d.ts +1 -1
  73. package/dist/esm/src/hooks/quotes/useSigningComplete.d.ts +1 -1
  74. package/dist/esm/src/hooks/useHasTaxPlugin.d.ts +1 -1
  75. package/dist/esm/src/hooks/usePaymentMethod.d.ts +6 -5
  76. package/dist/esm/src/hooks/usePaymentPlugins.d.ts +1 -1
  77. package/dist/esm/src/hooks/usePlugins.d.ts +2 -2
  78. package/dist/esm/src/hooks/useSigningPlugins.d.ts +1 -1
  79. package/dist/esm/src/hooks/useToken.d.ts +1 -1
  80. package/dist/esm/src/utils/apiUtils.d.ts +1 -1
  81. package/dist/index.d.ts +4 -12
  82. package/package.json +1 -1
  83. package/dist/cjs/src/components/PaymentForm/PaymentMethod/PaymentMethod.d.ts +0 -8
  84. package/dist/cjs/src/components/PaymentForm/PaymentMethod/PaymentMethod.stories.d.ts +0 -11
  85. package/dist/cjs/src/components/PaymentForm/PaymentMethod/index.d.ts +0 -1
  86. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/consts.d.ts +0 -1
  87. package/dist/cjs/src/graphql/queries/getPortalPreviewQuery.d.ts +0 -2
  88. package/dist/esm/src/components/PaymentForm/PaymentMethod/PaymentMethod.d.ts +0 -8
  89. package/dist/esm/src/components/PaymentForm/PaymentMethod/PaymentMethod.stories.d.ts +0 -11
  90. package/dist/esm/src/components/PaymentForm/PaymentMethod/index.d.ts +0 -1
  91. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/consts.d.ts +0 -1
  92. package/dist/esm/src/graphql/queries/getPortalPreviewQuery.d.ts +0 -2
  93. /package/dist/cjs/src/components/PaymentForm/{PaymentMethod → DemoPay}/CreditCard/LargCardIcon.d.ts +0 -0
  94. /package/dist/cjs/src/components/PaymentForm/{PaymentMethod → DemoPay}/CreditCard/PlusIcon.d.ts +0 -0
  95. /package/dist/esm/src/components/PaymentForm/{PaymentMethod → DemoPay}/CreditCard/LargCardIcon.d.ts +0 -0
  96. /package/dist/esm/src/components/PaymentForm/{PaymentMethod → DemoPay}/CreditCard/PlusIcon.d.ts +0 -0
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-divider-horizontal {\n margin: 0;\n}\n.ant-divider-horizontal {\n margin: 0;\n}\n.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-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !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-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !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* {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\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.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.font-light {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-medium {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-bold {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\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}\nbody {\n color: #232323;\n background-color: #f8fafc;\n}\nth {\n font-weight: normal;\n}\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\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-divider-horizontal {\n margin: 0;\n}\n.ant-divider-horizontal {\n margin: 0;\n}\n.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-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !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-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !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* {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\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.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.font-light {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-medium {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-bold {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\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}\nbody {\n color: #232323;\n background-color: #f8fafc;\n}\nth {\n font-weight: normal;\n}\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\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,7 +170,7 @@ 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
+ var MUTATION$8 = "\n query entityBranding {\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }\n";
174
174
  var getBranding = function (_a) {
175
175
  var token = _a.token, apiHost = _a.apiHost;
176
176
  return __awaiter(void 0, void 0, void 0, function () {
@@ -178,7 +178,7 @@ var getBranding = function (_a) {
178
178
  return __generator(this, function (_b) {
179
179
  switch (_b.label) {
180
180
  case 0: return [4 /*yield*/, common.gqlRequest({
181
- query: MUTATION$9,
181
+ query: MUTATION$8,
182
182
  token: token,
183
183
  apiHost: apiHost,
184
184
  })];
@@ -442,35 +442,47 @@ function InvoicePDF(_a) {
442
442
  }, title: "Invoice PDF", width: "100%" }));
443
443
  }
444
444
 
445
- var paymentMethodsQuery = "query paymentMethods ($filter: String, $first: Int, $sort: String) {\n paymentMethods (filter: $filter, first: $first, sort: $sort) {\n nodes {\n id\n disabled\n pluginId\n accountId\n expirationDate\n plugin {\n guid\n id\n }\n state\n metadata {\n issuer\n identifier\n kind\n description\n icon\n }\n }\n }\n}";
445
+ var paymentMethodsQuery = "query paymentMethods ($filter: String, $sort: String) {\n paymentMethods (filter: $filter, sort: $sort) {\n nodes {\n id\n disabled\n pluginId\n accountId\n expirationDate\n plugin {\n guid\n id\n }\n state\n metadata {\n issuer\n identifier\n kind\n description\n icon\n }\n isDefault\n }\n }\n}";
446
+ var getPaymentMethods = function (_a) {
447
+ var apiHost = _a.apiHost, token = _a.token;
448
+ return __awaiter(void 0, void 0, void 0, function () {
449
+ var response, paymentMethods;
450
+ var _b;
451
+ return __generator(this, function (_c) {
452
+ switch (_c.label) {
453
+ case 0: return [4 /*yield*/, common.gqlRequest({
454
+ query: paymentMethodsQuery,
455
+ token: token,
456
+ apiHost: apiHost,
457
+ })];
458
+ case 1:
459
+ response = _c.sent();
460
+ paymentMethods = ((_b = response === null || response === void 0 ? void 0 : response.paymentMethods) === null || _b === void 0 ? void 0 : _b.nodes) || [];
461
+ return [2 /*return*/, paymentMethods];
462
+ }
463
+ });
464
+ });
465
+ };
446
466
  var usePaymentMethod = function (_a) {
447
- var accountId = _a.accountId, graphQLClient = _a.graphQLClient, token = _a.token;
467
+ var accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost;
448
468
  var _b = reactQuery.useQuery({
449
469
  queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
450
- token: token,
451
470
  accountId: accountId,
471
+ token: token,
452
472
  }),
453
- queryFn: function () {
454
- return graphQLClient
455
- .request(paymentMethodsQuery, {
456
- first: 1,
457
- filter: "disabled is false".concat(accountId ? " && accountId=".concat(accountId) : ""),
458
- })
459
- .then(function (data) {
460
- var _a, _b;
461
- // TODO error checking of response
462
- var paymentMethod = ((_b = (_a = data === null || data === void 0 ? void 0 : data.paymentMethods) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b[0]) || null;
463
- return paymentMethod;
464
- });
465
- },
473
+ queryFn: function () { return getPaymentMethods({ apiHost: apiHost, token: token }); },
466
474
  }), data = _b.data, isLoading = _b.isLoading;
467
- return { data: data, isLoading: isLoading };
475
+ return {
476
+ paymentMethods: data,
477
+ defaultPaymentMethod: data === null || data === void 0 ? void 0 : data.find(function (paymentMethod) { return paymentMethod.isDefault; }),
478
+ isLoading: isLoading,
479
+ };
468
480
  };
469
481
 
470
482
  var usePlugins = function (_a) {
471
483
  var apiHost = _a.apiHost, token = _a.token;
472
484
  var response = reactQuery.useQuery({
473
- queryKey: common.QueryKeyFactory.default.pluginsKey(token),
485
+ queryKey: common.QueryKeyFactory.default.pluginsKey(token || ""),
474
486
  queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
475
487
  var plugins;
476
488
  return __generator(this, function (_a) {
@@ -519,7 +531,7 @@ var getQuoteAmountDue = function (quote) {
519
531
  return quote.amountDue;
520
532
  };
521
533
 
522
- 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";
534
+ 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";
523
535
  var checkout = function (_a) {
524
536
  var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
525
537
  return __awaiter(void 0, void 0, void 0, function () {
@@ -536,7 +548,7 @@ var checkout = function (_a) {
536
548
  mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
537
549
  }
538
550
  return [4 /*yield*/, common.gqlRequest({
539
- query: MUTATION$8,
551
+ query: MUTATION$7,
540
552
  token: token,
541
553
  vars: mutationVars,
542
554
  apiHost: apiHost,
@@ -649,7 +661,7 @@ var ActualCheckoutFooter = function (_a) {
649
661
  var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, noPadding = _a.noPadding, plugin = _a.plugin;
650
662
  var isMobile = common.useIsMobile();
651
663
  var _b = react.useState(false), isPaying = _b[0], setIsPaying = _b[1];
652
- var storedPaymentMethod = react.useContext(PaymentContext).storedPaymentMethod;
664
+ var defaultPaymentMethod = react.useContext(PaymentContext).defaultPaymentMethod;
653
665
  var amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
654
666
  var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
655
667
  // Payment hooks
@@ -661,7 +673,7 @@ var ActualCheckoutFooter = function (_a) {
661
673
  },
662
674
  quote: quote,
663
675
  invoice: invoice,
664
- storedPaymentMethod: storedPaymentMethod,
676
+ storedPaymentMethod: defaultPaymentMethod,
665
677
  plugin: plugin,
666
678
  }).pay;
667
679
  var payStripe = usePay({
@@ -672,7 +684,7 @@ var ActualCheckoutFooter = function (_a) {
672
684
  },
673
685
  quote: quote,
674
686
  invoice: invoice,
675
- storedPaymentMethod: storedPaymentMethod,
687
+ storedPaymentMethod: defaultPaymentMethod,
676
688
  plugin: plugin,
677
689
  }).pay;
678
690
  var handlePaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -702,7 +714,7 @@ var ActualCheckoutFooter = function (_a) {
702
714
  }
703
715
  });
704
716
  }); };
705
- return (jsxRuntime.jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isPaying, onClick: function () {
717
+ 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 () {
706
718
  setIsPaying(true);
707
719
  handlePaymentSubmit();
708
720
  }, size: isMobile ? "large" : "middle", type: "primary" }, { children: "".concat(isPaying ? "Paying" : "Pay", " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : "") })) })));
@@ -714,6 +726,75 @@ var CheckoutFooter = function (_a) {
714
726
  return (jsxRuntime.jsx(ActualCheckoutFooter, { plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, noPadding: noPadding }));
715
727
  };
716
728
 
729
+ // Automatically sets the default payment method if there is none currently set
730
+ var useAutoSetDefaultPaymentMethod = function (_a) {
731
+ var accountId = _a.accountId, token = _a.token, handleSetDefault = _a.handleSetDefault, setDefaultPaymentMethodLoading = _a.setDefaultPaymentMethodLoading;
732
+ var queryClient = reactQuery.useQueryClient();
733
+ var apiHost = react.useContext(BunnyContext).apiHost;
734
+ var _b = usePaymentMethod({
735
+ accountId: accountId,
736
+ token: token,
737
+ apiHost: apiHost,
738
+ }), storedPaymentMethods = _b.paymentMethods, defaultPaymentMethod = _b.defaultPaymentMethod;
739
+ // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
740
+ function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
741
+ var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
742
+ accountId: accountId,
743
+ token: token,
744
+ }));
745
+ if (cachedPaymentMethods) {
746
+ for (var _i = 0, _a = cachedPaymentMethods; _i < _a.length; _i++) {
747
+ var paymentMethod = _a[_i];
748
+ paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
749
+ }
750
+ queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
751
+ accountId: accountId,
752
+ token: token,
753
+ }), cachedPaymentMethods);
754
+ }
755
+ }
756
+ react.useEffect(function () {
757
+ if (setDefaultPaymentMethodLoading)
758
+ return;
759
+ if ((storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) > 0 && !defaultPaymentMethod) {
760
+ handleSetDefault(storedPaymentMethods[0]);
761
+ setDefaultPaymentMethodOnCache(storedPaymentMethods[0]);
762
+ }
763
+ }, [
764
+ storedPaymentMethods,
765
+ defaultPaymentMethod,
766
+ handleSetDefault,
767
+ setDefaultPaymentMethodLoading,
768
+ queryClient,
769
+ accountId,
770
+ token,
771
+ ]);
772
+ };
773
+
774
+ var usePaymentMethodSelectorPlugin = function (_a) {
775
+ var defaultPaymentMethod = _a.defaultPaymentMethod, defaultPaymentMethodPlugin = _a.defaultPaymentMethodPlugin, paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins;
776
+ var _b = react.useState(), selectorPaymentMethodPlugin = _b[0], setSelectorPaymentMethodPlugin = _b[1];
777
+ react.useEffect(function () {
778
+ if (selectorPaymentMethodPlugin) {
779
+ return;
780
+ }
781
+ if (defaultPaymentMethod) {
782
+ setSelectorPaymentMethodPlugin(defaultPaymentMethodPlugin);
783
+ }
784
+ else {
785
+ setSelectorPaymentMethodPlugin(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
786
+ }
787
+ }, [
788
+ defaultPaymentMethod,
789
+ defaultPaymentMethodPlugin,
790
+ paymentMethodAllowedPlugins,
791
+ ]);
792
+ return {
793
+ selectorPaymentMethodPlugin: selectorPaymentMethodPlugin,
794
+ setSelectorPaymentMethodPlugin: setSelectorPaymentMethodPlugin,
795
+ };
796
+ };
797
+
717
798
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
718
799
 
719
800
  function getDefaultExportFromCjs (x) {
@@ -784,7 +865,7 @@ var ChinaUnionPay = function (_a) {
784
865
  return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "60", height: "38", viewBox: "0 0 60 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "59", height: "37", rx: "7.5", fill: "white", stroke: "#D3D3D3" }), jsxRuntime.jsx("path", { d: "M18.2466 6.855H27.4811C28.7703 6.855 29.5728 7.90603 29.272 9.20036L24.972 27.6585C24.6682 28.949 23.3782 30 22.0886 30H12.8537C11.5641 30 10.7624 28.949 11.0632 27.6585L15.3654 9.20036C15.6653 7.90603 16.9545 6.855 18.2466 6.855Z", fill: "#ED171F" }), jsxRuntime.jsx("path", { d: "M26.7132 6.855H37.3336C38.6223 6.855 38.0411 7.90603 37.7381 9.20036L33.4385 27.6585C33.1382 28.949 33.2324 30 31.9402 30H21.3206C20.0298 30 19.2303 28.949 19.5336 27.6585L23.8315 9.20036C24.1353 7.90603 25.424 6.855 26.7132 6.855Z", fill: "#082F67" }), jsxRuntime.jsx("path", { d: "M36.9136 6.855H46.1468C47.4368 6.855 48.2384 7.90603 47.9364 9.20036L43.6372 27.6585C43.3351 28.949 42.0455 30 40.7516 30H31.521C30.2288 30 29.4285 28.949 29.7314 27.6585L34.0293 9.20036C34.3318 7.90603 35.621 6.855 36.9136 6.855Z", fill: "#006A65" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M38.4247 20.4849L37.2994 24.2089H37.6019L37.3681 24.979H37.0656L36.9951 25.218H35.9242L35.9968 24.979H33.82L34.0387 24.2664H34.2587L35.4005 20.4849L35.6286 19.7209H36.7212L36.6071 20.1072C36.6071 20.1072 36.8979 19.8972 37.1741 19.8254C37.4502 19.7528 39.0337 19.7265 39.0337 19.7265L38.799 20.4849H38.4247ZM36.4995 20.4849L36.2103 21.4365C36.2103 21.4365 36.5336 21.2909 36.7112 21.2421C36.8901 21.1958 37.1589 21.1777 37.1589 21.1777L37.3681 20.4849H36.4995ZM36.0669 21.9098L35.7678 22.8994C35.7678 22.8994 36.0984 22.73 36.276 22.6773C36.4549 22.6358 36.7255 22.6021 36.7255 22.6021L36.9377 21.9098H36.0669ZM35.3702 24.2197H36.241L36.4925 23.383H35.6217L35.3702 24.2197Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M38.9076 19.7265H40.0736L40.0866 20.1613C40.0797 20.2343 40.1427 20.2689 40.2776 20.2689H40.5144L40.2979 20.9863H39.6687C39.1224 21.0265 38.9163 20.7918 38.9284 20.5286L38.9076 19.7265Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M39.0602 23.1305H37.9487L38.1397 22.4909H39.4099L39.5918 21.9079H38.3368L38.5525 21.1875H42.0439L41.8252 21.9079H40.6545L40.4713 22.4909H41.6446L41.4514 23.1305H40.1808L39.9561 23.3998H40.4713L40.5962 24.2049C40.6096 24.284 40.6121 24.3363 40.6372 24.3708C40.6631 24.4006 40.8174 24.4145 40.9069 24.4145H41.0633L40.8256 25.198H40.4293C40.368 25.198 40.2772 25.1928 40.1532 25.1863C40.033 25.1759 39.9479 25.1064 39.8684 25.0683C39.7958 25.032 39.6869 24.9439 39.6618 24.7939L39.5374 23.9905L38.9608 24.7831C38.7772 25.032 38.5291 25.2226 38.1108 25.2226H37.3009L37.5131 24.5238H37.8221C37.9116 24.5238 37.9906 24.4888 38.0485 24.4586C38.1082 24.4335 38.1605 24.4037 38.2201 24.3155L39.0602 23.1305Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M26.8864 21.3815H29.8294L29.612 22.0842H28.4348L28.252 22.6818H29.456L29.2365 23.4075H28.0333L27.7416 24.3811C27.7057 24.4892 28.026 24.5043 28.1418 24.5043L28.7451 24.4209L28.5035 25.223H27.1457C27.0389 25.223 26.9555 25.2079 26.8371 25.1811C26.7226 25.1525 26.672 25.1015 26.6214 25.0237C26.5722 24.9438 26.497 24.879 26.548 24.7096L26.9374 23.42H26.2692L26.4909 22.6818H27.1629L27.3414 22.0842H26.672L26.8864 21.3815Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M28.8682 20.1195H30.0752L29.8544 20.8541H28.2052L28.0259 21.0084C27.9498 21.0832 27.923 21.0516 27.8232 21.1057C27.7303 21.1532 27.5337 21.2461 27.28 21.2461H26.7506L26.9658 20.5395H27.1244C27.2588 20.5395 27.35 20.5283 27.3962 20.4985C27.449 20.4656 27.5073 20.3909 27.5751 20.269L27.8777 19.718H29.0786L28.8682 20.1195Z", fill: "white" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M30.5938 19.7264H31.6223L31.4728 20.2437C31.4728 20.2437 31.7969 19.9848 32.0247 19.8923C32.2511 19.8072 32.7641 19.7311 32.7641 19.7311L34.428 19.7225L33.861 21.6106C33.7659 21.9347 33.6548 22.1439 33.5852 22.239C33.5217 22.3366 33.4482 22.4183 33.3026 22.4974C33.1626 22.5722 33.0351 22.6154 32.9175 22.6275C32.8073 22.6357 32.6388 22.64 32.4046 22.6422H30.8025L30.3501 24.1366C30.3073 24.284 30.2865 24.354 30.3146 24.3937C30.3384 24.43 30.3928 24.4702 30.468 24.4702L31.1746 24.4037L30.9339 25.2226H30.1413C29.8898 25.2226 29.7066 25.2174 29.5778 25.2075C29.4559 25.198 29.3284 25.2075 29.2441 25.1414C29.1694 25.0766 29.0574 24.9918 29.06 24.9041C29.0683 24.8229 29.1011 24.688 29.1534 24.5039L30.5938 19.7264ZM32.7775 21.6344H31.0912L30.9884 21.9749H32.4473C32.6198 21.9533 32.6552 21.9779 32.669 21.9697L32.7775 21.6344ZM31.185 21.3271C31.185 21.3271 31.5139 21.0263 32.0778 20.9286C32.2062 20.9036 33.0083 20.9118 33.0083 20.9118L33.1297 20.5081H31.4305L31.185 21.3271Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M33.5921 22.7747L33.4979 23.2285C33.4559 23.3693 33.4209 23.4778 33.3138 23.5686C33.2027 23.6632 33.0696 23.763 32.7606 23.763L32.191 23.7859L32.1862 24.2998C32.1785 24.4459 32.2178 24.4303 32.2411 24.4541C32.2675 24.4787 32.2904 24.4904 32.3168 24.4986L32.4961 24.4904L33.0415 24.4584L32.8168 25.2078H32.191C31.7524 25.2078 31.4274 25.1983 31.3202 25.1127C31.2156 25.0466 31.2018 24.9619 31.2048 24.8188L31.2441 22.8201H32.242L32.2295 23.2285H32.4702C32.5523 23.2285 32.6063 23.2198 32.6417 23.1986C32.6707 23.1749 32.6936 23.1437 32.7096 23.0932L32.8068 22.7747H33.5921Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M19.3395 12.7519C19.3032 12.9127 18.6632 15.8704 18.6606 15.8722C18.5219 16.4698 18.4238 16.8985 18.0824 17.1721C17.8887 17.3311 17.6623 17.4094 17.4008 17.4094C16.9808 17.4094 16.734 17.2006 16.6921 16.8035L16.6843 16.6678C16.6843 16.6678 16.8122 15.8652 16.814 15.8622C16.814 15.8622 17.486 13.1664 17.6065 12.8116C17.6117 12.7917 17.6143 12.7817 17.6169 12.7714C16.3075 12.783 16.0745 12.7714 16.0594 12.7519C16.052 12.7783 16.017 12.946 16.017 12.946L15.3299 15.9815L15.2703 16.2408L15.1579 17.0826C15.1579 17.3311 15.2072 17.536 15.3044 17.7084C15.6177 18.2564 16.511 18.3377 17.0149 18.3377C17.6662 18.3377 18.2751 18.1985 18.6874 17.9478C19.4026 17.5243 19.591 16.8614 19.7583 16.2754L19.8352 15.975C19.8352 15.975 20.5288 13.1759 20.6473 12.8116C20.6507 12.7917 20.6529 12.7817 20.6576 12.7714C19.709 12.7817 19.4298 12.7714 19.3395 12.7519Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M23.1723 18.3077C22.7073 18.3012 22.5444 18.3012 22.0011 18.3289L21.98 18.2887C22.0279 18.0821 22.0794 17.8785 22.1252 17.6689L22.1917 17.3867C22.2924 16.9464 22.3909 16.4347 22.4026 16.2804C22.4121 16.1862 22.4432 15.952 22.1757 15.952C22.0625 15.952 21.9449 16.0073 21.8265 16.0613C21.7608 16.2955 21.6282 16.9515 21.5672 17.2519C21.432 17.8829 21.4233 17.9542 21.3633 18.2666L21.3244 18.3077C20.8451 18.3012 20.6796 18.3012 20.1286 18.3289L20.1026 18.283C20.1951 17.9079 20.2867 17.5298 20.3749 17.1555C20.6057 16.1395 20.6601 15.7501 20.7245 15.2337L20.7677 15.203C21.3049 15.1278 21.435 15.1131 22.0163 14.9934L22.0655 15.0483L21.9778 15.372C22.0759 15.3141 22.1688 15.2549 22.2704 15.203C22.5444 15.0682 22.8495 15.0284 23.0176 15.0284C23.2713 15.0284 23.5496 15.0997 23.6663 15.394C23.7769 15.6564 23.7039 15.9805 23.5586 16.6175L23.4835 16.9412C23.3344 17.6504 23.3102 17.78 23.2267 18.2666L23.1723 18.3077Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M25.0585 18.3077C24.7793 18.3064 24.5995 18.3012 24.4232 18.3064C24.2486 18.3077 24.0779 18.3168 23.8182 18.3289L23.8026 18.3064L23.7853 18.283C23.8562 18.0142 23.8964 17.92 23.9309 17.8245C23.9664 17.7299 24.001 17.6339 24.0623 17.3612C24.1436 17.006 24.1937 16.7571 24.2296 16.5397C24.2667 16.3284 24.2879 16.1495 24.3143 15.9416L24.3359 15.9252L24.3592 15.9053C24.6371 15.866 24.8147 15.84 24.9945 15.8124C25.1769 15.786 25.3605 15.7501 25.6488 15.6957L25.66 15.7207L25.6678 15.7462C25.6142 15.9662 25.5598 16.1862 25.5075 16.41C25.4561 16.6326 25.4016 16.8513 25.3532 17.073C25.2478 17.541 25.2067 17.7148 25.1816 17.8396C25.1587 17.9589 25.1509 18.0237 25.1095 18.2666L25.0844 18.2887L25.0585 18.3077Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M29.2305 16.7091C29.3935 15.9948 29.2686 15.6607 29.1091 15.4563C28.8658 15.1477 28.4397 15.0479 27.9958 15.0479C27.7301 15.0479 27.0952 15.0751 26.5987 15.5332C26.2443 15.8621 26.0779 16.3107 25.9781 16.7389C25.8782 17.175 25.7628 17.9641 26.4867 18.2567C26.7114 18.3509 27.0313 18.3777 27.2396 18.3777C27.7698 18.3777 28.3135 18.2312 28.7206 17.7982C29.0382 17.446 29.1813 16.923 29.2305 16.7091ZM28.0166 16.6573C27.9911 16.777 27.8865 17.2256 27.7426 17.4161C27.6432 17.5562 27.5252 17.6404 27.3947 17.6404C27.358 17.6404 27.1285 17.6404 27.1242 17.2999C27.1216 17.1322 27.1566 16.9576 27.1985 16.7718C27.3208 16.2307 27.4651 15.7769 27.8329 15.7769C28.1225 15.7769 28.1415 16.1145 28.0166 16.6573Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M40.5855 18.3561C40.0254 18.3509 39.8642 18.3509 39.3465 18.373L39.3115 18.331C39.4532 17.7982 39.595 17.267 39.7199 16.7286C39.8819 16.0298 39.9191 15.7329 39.9736 15.324L40.0155 15.2895C40.5713 15.2095 40.726 15.1875 41.3059 15.0803L41.3241 15.1278C41.2178 15.566 41.1115 16.0047 41.0103 16.4446C40.7964 17.3664 40.7186 17.8349 40.6365 18.3163L40.5855 18.3561Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M40.8523 16.7721C41.0152 16.0612 40.3601 16.7094 40.2551 16.4748C40.0943 16.1092 40.195 15.3671 39.5493 15.1195C39.3017 15.0231 38.7183 15.148 38.2204 15.6031C37.8682 15.9307 37.7005 16.3736 37.6016 16.8015C37.5013 17.2315 37.3864 18.0189 38.1063 18.3015C38.3337 18.3979 38.5424 18.4256 38.7498 18.4173C39.4741 18.378 40.0265 17.2855 40.434 16.852C40.749 16.5098 40.8043 16.9808 40.8523 16.7721ZM39.7442 16.7189C39.717 16.833 39.612 17.2868 39.4681 17.4744C39.373 17.6088 39.1466 17.6939 39.0169 17.6939C38.9802 17.6939 38.7524 17.6939 38.7442 17.3564C38.7425 17.1904 38.7775 17.0158 38.8207 16.8283C38.943 16.2989 39.0874 15.8468 39.4551 15.8468C39.7451 15.8468 39.8687 16.1761 39.7442 16.7189Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M32.4031 18.3077C31.9372 18.3012 31.7795 18.3012 31.2319 18.3289L31.2125 18.2887C31.2587 18.0821 31.3114 17.8785 31.3598 17.6689L31.4251 17.3867C31.5262 16.9464 31.6243 16.4347 31.6355 16.2804C31.6446 16.1862 31.6757 15.952 31.4104 15.952C31.2954 15.952 31.1792 16.0073 31.0599 16.0613C30.9951 16.2955 30.862 16.9515 30.798 17.2519C30.6653 17.8829 30.6563 17.9542 30.5962 18.2666L30.5564 18.3077C30.0776 18.3012 29.9134 18.3012 29.3637 18.3289L29.3386 18.283C29.4302 17.9079 29.5201 17.5298 29.6083 17.1555C29.8386 16.1395 29.8935 15.7501 29.9575 15.2337L30.0007 15.203C30.5378 15.1278 30.6684 15.1131 31.2496 14.9934L31.2954 15.0483L31.2112 15.372C31.3067 15.3141 31.4039 15.2549 31.5029 15.203C31.7751 15.0682 32.0828 15.0284 32.2475 15.0284C32.502 15.0284 32.7808 15.0997 32.9005 15.394C33.0098 15.6564 32.9359 15.9805 32.7894 16.6175L32.7164 16.9412C32.5643 17.6504 32.5409 17.78 32.4605 18.2666L32.4031 18.3077Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M36.9307 14.4822C36.8486 14.8504 36.6096 15.1629 36.3006 15.3137C36.0452 15.4421 35.7344 15.4516 35.4129 15.4516H35.2059L35.2215 15.369C35.2215 15.369 35.6048 13.7048 35.6031 13.71L35.6143 13.6248L35.6212 13.5591L35.7742 13.5751C35.7742 13.5751 36.5616 13.6434 36.5815 13.6456C36.8931 13.764 37.0201 14.0769 36.9307 14.4822ZM36.4276 12.7467C36.4255 12.7467 36.0417 12.7518 36.0417 12.7518C35.0378 12.7631 34.6354 12.7583 34.4703 12.7385C34.4531 12.8119 34.428 12.9424 34.428 12.9424L34.0693 14.6115C34.0693 14.6115 33.2097 18.1565 33.1687 18.3229C34.0447 18.3134 34.4042 18.3134 34.5542 18.3285C34.5883 18.1621 34.7932 17.172 34.7932 17.172C34.7932 17.172 34.9682 16.4447 34.9786 16.4179C34.9786 16.4179 35.0326 16.3436 35.0883 16.3137H35.1683C35.9233 16.3137 36.7781 16.3137 37.4462 15.8206C37.9004 15.4831 38.2138 14.9848 38.3516 14.3802C38.3888 14.2316 38.4147 14.0535 38.4147 13.8772C38.4147 13.6456 38.368 13.4161 38.2323 13.2363C37.8918 12.7583 37.2142 12.7518 36.4276 12.7467Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M45.1748 15.0751L45.1303 15.0254C44.5581 15.1399 44.4535 15.1598 43.9263 15.2293L43.8865 15.2674C43.8848 15.2739 43.8831 15.2842 43.8818 15.2924L43.8792 15.2842C43.4868 16.1913 43.4993 15.9951 43.1791 16.7073C43.1769 16.6736 43.1765 16.6525 43.1756 16.6187L43.0961 15.0751L43.0455 15.0254C42.4466 15.1399 42.4306 15.1598 41.8761 15.2293L41.8316 15.2674C41.8277 15.2877 41.8264 15.3076 41.8234 15.3292L41.8277 15.3374C41.8968 15.6931 41.8809 15.6131 41.9496 16.171C41.982 16.445 42.0243 16.7225 42.0567 16.9926C42.1121 17.4463 42.1423 17.6706 42.208 18.3612C41.835 18.981 41.7447 19.2148 41.3882 19.7584L41.4072 19.8077C41.9496 19.7874 42.0745 19.7874 42.4755 19.7874L42.5641 19.6884C42.8671 19.0354 45.1748 15.0751 45.1748 15.0751Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M25.5693 15.4586C25.8753 15.2447 25.9146 14.9491 25.6553 14.7957C25.3926 14.6414 24.9353 14.6898 24.6259 14.9042C24.3143 15.1151 24.2802 15.4115 24.5399 15.5662C24.8001 15.7171 25.2595 15.673 25.5693 15.4586Z", fill: "white" }), jsxRuntime.jsx("path", { d: "M42.5238 19.7429L42.0727 20.5152C41.93 20.7788 41.6651 20.9771 41.2442 20.9784L40.5255 20.9668L40.7347 20.2706H40.8738C40.9477 20.2706 41.0018 20.2658 41.0432 20.2455C41.0787 20.2343 41.105 20.2062 41.1344 20.1647L41.3993 19.7429H42.5238Z", fill: "white" })] })));
785
866
  };
786
867
 
787
- var CreditCard$1 = function (_a) {
868
+ var CreditCard = function (_a) {
788
869
  var className = _a.className;
789
870
  return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "60", height: "38", viewBox: "0 0 60 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "59", height: "37", rx: "7.5", fill: "white", stroke: "#D3D3D3" }), jsxRuntime.jsx("path", { d: "M1 10L59 10", stroke: "#D3D3D3", "stroke-width": "7" }), jsxRuntime.jsx("path", { d: "M5 20H34", stroke: "#D3D3D3", "stroke-width": "2", "stroke-linecap": "round" }), jsxRuntime.jsx("path", { d: "M5 27H25", stroke: "#D3D3D3", "stroke-width": "2", "stroke-linecap": "round" }), jsxRuntime.jsx("rect", { x: "46", y: "21", width: "10", height: "7", rx: "2", fill: "#D9D9D9" })] })));
790
871
  };
@@ -814,26 +895,10 @@ var Visa = function (_a) {
814
895
  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" })] })));
815
896
  };
816
897
 
817
- var LargeCardIcon = function () {
818
- return (jsxRuntime.jsx("svg", __assign({ width: "72", height: "56", viewBox: "0 0 72 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M8 0H64C68.375 0 72 3.625 72 8V12H0V8C0 3.625 3.5 0 8 0ZM72 24V48C72 52.5 68.375 56 64 56H8C3.5 56 0 52.5 0 48V24H72ZM14 40C12.875 40 12 41 12 42C12 43.125 12.875 44 14 44H22C23 44 24 43.125 24 42C24 41 23 40 22 40H14ZM28 42C28 43.125 28.875 44 30 44H46C47 44 48 43.125 48 42C48 41 47 40 46 40H30C28.875 40 28 41 28 42Z", fill: "#E2E8F0" }) })));
819
- };
820
-
821
- var PlusIcon = function (_a) {
822
- var color = _a.color;
823
- return (jsxRuntime.jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
824
- };
825
-
826
- var Text$o = antd.Typography.Text;
827
- var CreditCard = function (_a) {
828
- var _b;
829
- var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d;
830
- var isMobile = common.useIsMobile();
831
- var Wrapper = cardEnabled ? Card : "div";
832
- return (jsxRuntime.jsxs(Wrapper, __assign({ className: "".concat(cardEnabled ? shadow : "", " m-0") }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$o, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier })] })), jsxRuntime.jsx(CustomizedTag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(antd.Divider, {}), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(CardAttribute, { title: "EXPIRATION", value: expirationDate(paymentMethodData) }), isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
833
- };
898
+ var Text$p = antd.Typography.Text;
834
899
  var MiniCreditCard = function (_a) {
835
900
  var _b, _c;
836
- var _d = _a.hideRemoveButton, hideRemoveButton = _d === void 0 ? false : _d, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData;
901
+ var _d = _a.hideDropdownMenu, hideDropdownMenu = _d === void 0 ? false : _d, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData, onClickSetDefault = _a.onClickSetDefault, id = _a.id;
837
902
  var darkMode = react.useContext(BunnyContext).darkMode;
838
903
  var borderColor = react.useMemo(function () {
839
904
  return darkMode ? "border-slate-700" : "border-slate-200";
@@ -844,14 +909,37 @@ var MiniCreditCard = function (_a) {
844
909
  function capitalize(str) {
845
910
  return str.charAt(0).toUpperCase() + str.slice(1);
846
911
  }
847
- return (jsxRuntime.jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$o, { children: capitalize((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$o, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$o, { children: (_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.identifier })] })] })) })), !hideRemoveButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove" })) })))] })) : (jsxRuntime.jsxs("div", __assign({ className: "flex flex-row gap-2 items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$o, __assign({ className: "text-slate-400", style: { fontSize: "12px" } }, { children: "No payment method selected" })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" })] }))) })));
912
+ var isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
913
+ return (jsxRuntime.jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border"), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$p, { children: capitalize((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$p, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$p, { children: (_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.identifier })] }), jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null })] })) })), !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: "flex flex-row gap-2 items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$p, __assign({ className: "text-slate-400", style: { fontSize: "12px" } }, { children: "No payment methods" })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" })] }))) })));
914
+ };
915
+ var DropdownMenu = function (_a) {
916
+ var setDefault = _a.setDefault, remove = _a.remove, isDefault = _a.isDefault, id = _a.id;
917
+ // Define the menu items
918
+ var items = [
919
+ {
920
+ key: "1",
921
+ label: "Remove",
922
+ onClick: function () {
923
+ remove();
924
+ },
925
+ },
926
+ {
927
+ key: "2",
928
+ label: "Set as default",
929
+ onClick: function () {
930
+ setDefault();
931
+ },
932
+ disabled: isDefault,
933
+ },
934
+ ];
935
+ return (jsxRuntime.jsx(antd.Dropdown, __assign({ menu: { items: items }, trigger: ["click"] }, { children: jsxRuntime.jsx("a", __assign({ onClick: function (e) { return e.preventDefault(); }, id: id, className: "cursor-pointer hover:bg-gray-100 rounded-md p-1" }, { children: jsxRuntime.jsx(icons.EllipsisOutlined, { style: { fontSize: "20px" } }) })) })));
848
936
  };
849
937
  var CardImage = function (_a) {
850
938
  var _b;
851
939
  var paymentMethodData = _a.paymentMethodData;
852
940
  var issuer = (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer;
853
941
  var className = "w-12 h-8";
854
- switch (issuer) {
942
+ switch (issuer.toLowerCase()) {
855
943
  case "visa":
856
944
  return jsxRuntime.jsx(Visa, { className: className });
857
945
  case "mastercard":
@@ -871,30 +959,9 @@ var CardImage = function (_a) {
871
959
  case "china_unionpay":
872
960
  return jsxRuntime.jsx(ChinaUnionPay, { className: className });
873
961
  default:
874
- return jsxRuntime.jsx(CreditCard$1, { className: className });
962
+ return jsxRuntime.jsx(CreditCard, { className: className });
875
963
  }
876
964
  };
877
- var CardAttribute = function (_a) {
878
- var title = _a.title, value = _a.value;
879
- return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.jsx(Text$o, { children: value })] })));
880
- };
881
- var CardActions = function (_a) {
882
- var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
883
- var isMobile = common.useIsMobile();
884
- return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6 ".concat(isMobile ? "justify-center mt-4" : "") }, { children: [jsxRuntime.jsx(antd.Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove payment method" })) })), jsxRuntime.jsx(antd.Divider, { style: { height: "24px" }, type: "vertical" }), jsxRuntime.jsx(antd.Button, __assign({ onClick: onClickUpdate, type: "primary" }, { children: "Update" }))] })));
885
- };
886
- var EmptyCard = function (_a) {
887
- var onClick = _a.onClick, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, _c = _a.cardEnabled, cardEnabled = _c === void 0 ? true : _c;
888
- var brandColor = react.useContext(BrandContext).brandColor;
889
- return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center w-full pt-8 px-4 pb-6 cursor-pointer ".concat(cardEnabled ? "bg-white ".concat(shadow, " rounded-md") : ""), onClick: onClick }, { children: [jsxRuntime.jsx(LargeCardIcon, {}), jsxRuntime.jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsxRuntime.jsx(antd.Button, __assign({ type: "link", id: "openAddPaymentMethodDrawer" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsxRuntime.jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
890
- };
891
- var isExpired = function (paymentMethodData) {
892
- var expDate = dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate);
893
- return expDate.isBefore(dayjs());
894
- };
895
- var expirationDate = function (storedPaymentMethod) {
896
- return dayjs(storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.expirationDate).format("MM/YY");
897
- };
898
965
 
899
966
  var SavePaymentMethodFooter = function (_a) {
900
967
  var isSaving = _a.isSaving, onSave = _a.onSave, noPadding = _a.noPadding;
@@ -1057,7 +1124,7 @@ function useSave$1(_a) {
1057
1124
  return { save: save, isSaving: isSaving };
1058
1125
  }
1059
1126
 
1060
- var Text$n = antd.Typography.Text;
1127
+ var Text$o = antd.Typography.Text;
1061
1128
  var TEST_CARD = "4242424242424242";
1062
1129
  var DemoPayForm = function (_a) {
1063
1130
  var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -1118,7 +1185,7 @@ var DemoPayForm = function (_a) {
1118
1185
  var onCardCvcChange = function (cvc) {
1119
1186
  setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
1120
1187
  };
1121
- return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$n, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
1188
+ return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "flex 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 })] })));
1122
1189
  };
1123
1190
  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) {
1124
1191
  var darkMode = _a.darkMode;
@@ -1337,20 +1404,17 @@ var StripeForm = function (_a) {
1337
1404
 
1338
1405
  var PaymentMethodDetails = function (_a) {
1339
1406
  var _b, _c, _d, _e, _f, _g, _h, _j;
1340
- var onFail = _a.onFail, paymentMethod = _a.paymentMethod, onSavePaymentMethod = _a.onSavePaymentMethod, customPaymentForms = _a.customPaymentForms;
1341
- if (!paymentMethod)
1342
- return null;
1343
- paymentMethod = paymentMethod;
1344
- switch ((_c = (_b = paymentMethod.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name) {
1407
+ var onFail = _a.onFail, plugin = _a.plugin, onSavePaymentMethod = _a.onSavePaymentMethod, customPaymentForms = _a.customPaymentForms;
1408
+ switch ((_c = (_b = plugin.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name) {
1345
1409
  case "StripePayment":
1346
- return (jsxRuntime.jsx(StripeForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: paymentMethod }));
1410
+ return (jsxRuntime.jsx(StripeForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
1347
1411
  case "DemoPayPayment":
1348
- return (jsxRuntime.jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: paymentMethod }));
1412
+ return (jsxRuntime.jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
1349
1413
  default:
1350
1414
  if (customPaymentForms &&
1351
- ((_e = (_d = paymentMethod.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name) &&
1352
- customPaymentForms[(_g = (_f = paymentMethod.components) === null || _f === void 0 ? void 0 : _f.frontend) === null || _g === void 0 ? void 0 : _g[0].name]) {
1353
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: customPaymentForms[(_j = (_h = paymentMethod.components) === null || _h === void 0 ? void 0 : _h.frontend) === null || _j === void 0 ? void 0 : _j[0].name] }));
1415
+ ((_e = (_d = plugin.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name) &&
1416
+ customPaymentForms[(_g = (_f = plugin.components) === null || _f === void 0 ? void 0 : _f.frontend) === null || _g === void 0 ? void 0 : _g[0].name]) {
1417
+ return jsxRuntime.jsx(jsxRuntime.Fragment, { children: customPaymentForms[(_j = (_h = plugin.components) === null || _h === void 0 ? void 0 : _h.frontend) === null || _j === void 0 ? void 0 : _j[0].name] });
1354
1418
  }
1355
1419
  return jsxRuntime.jsx("p", { children: "Can not find form for plugin" });
1356
1420
  }
@@ -1360,7 +1424,7 @@ var CardIcon = function () {
1360
1424
  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" })] })));
1361
1425
  };
1362
1426
 
1363
- var Text$m = antd.Typography.Text;
1427
+ var Text$n = antd.Typography.Text;
1364
1428
  var PaymentMethodSelector = function (_a) {
1365
1429
  var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
1366
1430
  return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col 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)); }) })));
@@ -1373,7 +1437,7 @@ var PaymentOption = function (_a) {
1373
1437
  var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
1374
1438
  return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "flex justify-between items-center w-full cursor-pointer py-2 px-4 rounded border-solid ".concat(darkMode
1375
1439
  ? "var(--row-background-dark) border-gray-500"
1376
- : "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsxRuntime.jsx(Text$m, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
1440
+ : "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex gap-2 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: "text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
1377
1441
  };
1378
1442
  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) {
1379
1443
  var $brandColor = _a.$brandColor, $selected = _a.$selected;
@@ -1385,7 +1449,7 @@ var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateOb
1385
1449
  });
1386
1450
  var templateObject_1$9;
1387
1451
 
1388
- function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId) {
1452
+ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRemovePaymentMethod) {
1389
1453
  var _this = this;
1390
1454
  var queryClient = reactQuery.useQueryClient();
1391
1455
  var showErrorNotification = common.useErrorNotification();
@@ -1409,10 +1473,14 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId) {
1409
1473
  })
1410
1474
  .then(function () {
1411
1475
  showSuccessNotification("Payment method was removed", "Success");
1412
- queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
1413
- token: token,
1414
- accountId: accountId,
1415
- }), null);
1476
+ // TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
1477
+ queryClient.invalidateQueries({
1478
+ queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
1479
+ token: token,
1480
+ accountId: accountId,
1481
+ }),
1482
+ });
1483
+ onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod();
1416
1484
  })
1417
1485
  .catch(function (error) {
1418
1486
  showErrorNotification(error.message, "Error removing payment method");
@@ -1427,62 +1495,104 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId) {
1427
1495
  return removePaymentMethod;
1428
1496
  }
1429
1497
 
1498
+ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId) {
1499
+ var _this = this;
1500
+ var queryClient = reactQuery.useQueryClient();
1501
+ var showErrorNotification = common.useErrorNotification();
1502
+ var showSuccessNotification = common.useSuccessNotification();
1503
+ var _a = react.useState(false), loading = _a[0], setLoading = _a[1];
1504
+ var setDefaultPaymentMethod = react.useCallback(function (data) { return __awaiter(_this, void 0, void 0, function () {
1505
+ var plugin;
1506
+ return __generator(this, function (_a) {
1507
+ switch (_a.label) {
1508
+ case 0:
1509
+ plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (paymentPlugin) { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
1510
+ if (!(data && plugin)) return [3 /*break*/, 2];
1511
+ setLoading(true);
1512
+ return [4 /*yield*/, common.invokePlugin({
1513
+ plugin: plugin,
1514
+ method: "assign_default_payment_method",
1515
+ payload: {
1516
+ payment_method_id: data.id,
1517
+ account_id: accountId,
1518
+ },
1519
+ token: token,
1520
+ apiHost: apiHost,
1521
+ })
1522
+ .then(function () {
1523
+ showSuccessNotification("Payment method ".concat(data.metadata.identifier, " was set as default"), "Success");
1524
+ // TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
1525
+ queryClient.invalidateQueries({
1526
+ queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
1527
+ token: token,
1528
+ accountId: accountId,
1529
+ }),
1530
+ });
1531
+ })
1532
+ .catch(function (error) {
1533
+ setLoading(false);
1534
+ showErrorNotification(error.message, "Error removing payment method");
1535
+ })
1536
+ .finally(function () {
1537
+ setLoading(false);
1538
+ })];
1539
+ case 1:
1540
+ _a.sent();
1541
+ _a.label = 2;
1542
+ case 2: return [2 /*return*/];
1543
+ }
1544
+ });
1545
+ }); }, [paymentPlugins, token, apiHost, queryClient]);
1546
+ return { setDefaultPaymentMethod: setDefaultPaymentMethod, loading: loading };
1547
+ }
1548
+
1430
1549
  var Panel = antd.Collapse.Panel;
1431
1550
  var PaymentForm = function (_a) {
1432
1551
  var _b;
1433
- var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, customPaymentForms = _a.customPaymentForms, _c = _a.useAllPaymentPlugins, useAllPaymentPlugins = _c === void 0 ? false : _c;
1552
+ var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, customPaymentForms = _a.customPaymentForms, _c = _a.useAllPaymentPlugins, useAllPaymentPlugins = _c === void 0 ? false : _c;
1434
1553
  // Local state
1435
- var _d = react.useState(), selectedPaymentMethod = _d[0], setSelectedPaymentMethod = _d[1];
1436
- var _e = react.useState(false), showPaymentMethodForm = _e[0], setShowPaymentMethodForm = _e[1];
1437
- var paying = !!(quote || invoice);
1438
- var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) ||
1439
- (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
1440
- currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
1441
- // Hooks
1554
+ var _d = react.useState(false), showPaymentMethodForm = _d[0], setShowPaymentMethodForm = _d[1];
1555
+ // Simple hooks
1556
+ var queryClient = reactQuery.useQueryClient();
1442
1557
  var apiHost = react.useContext(BunnyContext).apiHost;
1443
1558
  var tokenFromContexts = useToken();
1444
1559
  var token = overrideToken || tokenFromContexts;
1445
- var _f = usePaymentMethod({
1560
+ var _e = usePaymentMethod({
1446
1561
  accountId: accountId,
1447
- graphQLClient: graphQLClient,
1448
1562
  token: token,
1449
- }), storedPaymentMethod = _f.data, isPaymentMethodLoading = _f.isLoading;
1450
- var isPaymentMethodFetched = storedPaymentMethod !== undefined;
1451
- var _g = usePaymentPlugins({ apiHost: apiHost, token: token }), allPaymentMethodAllowedPlugins = _g.paymentMethodAllowedPlugins, allPaymentPlugins = _g.paymentPlugins, arePluginsFetched = _g.isFetched;
1563
+ apiHost: apiHost,
1564
+ }), storedPaymentMethods = _e.paymentMethods, defaultPaymentMethod = _e.defaultPaymentMethod, isPaymentMethodLoading = _e.isLoading;
1565
+ // Complex hooks
1566
+ var _f = usePaymentPlugins({ apiHost: apiHost, token: token }), allPaymentMethodAllowedPlugins = _f.paymentMethodAllowedPlugins, allPaymentPlugins = _f.paymentPlugins;
1452
1567
  var paymentMethodAllowedPlugins = react.useMemo(function () {
1453
1568
  if (useAllPaymentPlugins) {
1454
1569
  return allPaymentPlugins;
1455
1570
  }
1456
1571
  return allPaymentMethodAllowedPlugins;
1457
1572
  }, [allPaymentMethodAllowedPlugins, allPaymentPlugins, useAllPaymentPlugins]);
1458
- var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId);
1459
- var queryClient = reactQuery.useQueryClient();
1460
- // Set default plugin
1461
- react.useEffect(function () {
1462
- if (!arePluginsFetched ||
1463
- !isPaymentMethodFetched ||
1464
- selectedPaymentMethod) {
1465
- return;
1466
- }
1467
- var pluginPaymentMethod = paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
1468
- if (pluginPaymentMethod) {
1469
- setSelectedPaymentMethod(pluginPaymentMethod);
1470
- }
1471
- else if (paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]) {
1472
- setSelectedPaymentMethod(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
1473
- }
1474
- }, [
1475
- arePluginsFetched,
1476
- isPaymentMethodFetched,
1477
- paymentMethodAllowedPlugins,
1478
- selectedPaymentMethod,
1479
- setSelectedPaymentMethod,
1480
- storedPaymentMethod,
1481
- ]);
1482
- var showPaymentMethodSelector = react.useMemo(function () {
1483
- var pluginCount = (paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.length) || 0;
1484
- return pluginCount > 1;
1485
- }, [paymentMethodAllowedPlugins]);
1573
+ var selectedPaymentMethodPlugin = react.useMemo(function () {
1574
+ return paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
1575
+ }, [paymentMethodAllowedPlugins, defaultPaymentMethod]);
1576
+ // Derived state
1577
+ var defaultPaymentMethodPlugin = paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
1578
+ var paying = !!(quote || invoice);
1579
+ var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) ||
1580
+ (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
1581
+ currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
1582
+ // Custom hooks
1583
+ var _g = useSetDefaultPaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId), handleSetDefault = _g.setDefaultPaymentMethod, setDefaultPaymentMethodLoading = _g.loading;
1584
+ useAutoSetDefaultPaymentMethod({
1585
+ accountId: accountId,
1586
+ token: token,
1587
+ handleSetDefault: handleSetDefault,
1588
+ setDefaultPaymentMethodLoading: setDefaultPaymentMethodLoading,
1589
+ });
1590
+ var _h = usePaymentMethodSelectorPlugin({
1591
+ defaultPaymentMethod: defaultPaymentMethod,
1592
+ defaultPaymentMethodPlugin: defaultPaymentMethodPlugin,
1593
+ paymentMethodAllowedPlugins: paymentMethodAllowedPlugins,
1594
+ }), selectorPaymentMethodPlugin = _h.selectorPaymentMethodPlugin, setSelectorPaymentMethodPlugin = _h.setSelectorPaymentMethodPlugin;
1595
+ var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId, onRemovePaymentMethod);
1486
1596
  var handlePaymentSuccess = function () {
1487
1597
  // Hide payment method selector and form
1488
1598
  setShowPaymentMethodForm(false);
@@ -1505,13 +1615,12 @@ var PaymentForm = function (_a) {
1505
1615
  onClickCancel: function () { return setShowPaymentMethodForm(false); },
1506
1616
  accountId: accountId,
1507
1617
  overrideToken: overrideToken,
1508
- storedPaymentMethod: storedPaymentMethod,
1618
+ storedPaymentMethods: storedPaymentMethods,
1619
+ defaultPaymentMethod: defaultPaymentMethod,
1509
1620
  customCheckoutFunction: customCheckoutFunction,
1510
- } }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectedPaymentMethod, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(storedPaymentMethod); }, paymentMethodData: storedPaymentMethod }) })), paying && storedPaymentMethod ? (jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethod }) }))) : (
1511
- //if not paying and payment method is saved, show Collapse
1512
- 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: "pt-2" }, { children: jsxRuntime.jsxs(antd.Button, __assign({ onClick: function () {
1621
+ } }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 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: "pt-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ onClick: function () {
1513
1622
  setShowPaymentMethodForm(true);
1514
- }, type: "default", className: "w-full", id: "addPaymentMethod" }, { children: [storedPaymentMethod ? "Update" : "Add", " payment method"] })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsx("div", { children: selectedPaymentMethod ? (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [showPaymentMethodSelector && (jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectedPaymentMethod })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, paymentMethod: selectedPaymentMethod, customPaymentForms: customPaymentForms }) }))] }))) : (jsxRuntime.jsx("div", { children: "No payment method selected" })) }) }), "1") })))] }) })) })) })));
1623
+ }, type: "default", className: "w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsxRuntime.jsx("div", __assign({ className: "flex flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin, customPaymentForms: customPaymentForms }) })))] })) }), "1") })), paying ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultPaymentMethod ? (jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethodPlugin }) }))) : null })) : null] }) })) })) })));
1515
1624
  };
1516
1625
  function StripeWrapper(_a) {
1517
1626
  var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
@@ -1538,7 +1647,7 @@ function ActualInvoice() {
1538
1647
  // Context
1539
1648
  var queryClient = reactQuery.useQueryClient();
1540
1649
  var _a = react.useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess, className = _a.className;
1541
- var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
1650
+ var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired; _b.graphQLClient;
1542
1651
  var _c = react.useContext(InvoiceQuoteContext), hideDownloadButton = _c.hideDownloadButton, onInvoiceLoaded = _c.onInvoiceLoaded;
1543
1652
  var token = useToken();
1544
1653
  // Hooks
@@ -1576,10 +1685,10 @@ function ActualInvoice() {
1576
1685
  }, [formattedInvoice]);
1577
1686
  if (!formattedInvoice)
1578
1687
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
1579
- return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "flex justify-center 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: "w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice, graphQLClient: graphQLClient }) })))] })) })));
1688
+ return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "flex justify-center 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: "w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
1580
1689
  }
1581
1690
 
1582
- var MUTATION$7 = function (id) { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n object { documents { id filename size date url } }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"; };
1691
+ 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 }"; };
1583
1692
  var getFormattedQuote = function (_a) {
1584
1693
  var id = _a.id, token = _a.token, apiHost = _a.apiHost;
1585
1694
  return __awaiter(void 0, void 0, void 0, function () {
@@ -1587,7 +1696,7 @@ var getFormattedQuote = function (_a) {
1587
1696
  return __generator(this, function (_b) {
1588
1697
  switch (_b.label) {
1589
1698
  case 0: return [4 /*yield*/, common.gqlRequest({
1590
- query: MUTATION$7(),
1699
+ query: MUTATION$6(),
1591
1700
  token: token,
1592
1701
  apiHost: apiHost,
1593
1702
  vars: { id: id },
@@ -1837,7 +1946,7 @@ var AcceptQuoteModal = function (_a) {
1837
1946
  }, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col 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, {}) })))] })) })));
1838
1947
  };
1839
1948
 
1840
- var Text$l = antd.Typography.Text;
1949
+ var Text$m = antd.Typography.Text;
1841
1950
  defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
1842
1951
  function Quote(_a) {
1843
1952
  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;
@@ -1906,7 +2015,7 @@ function ActualQuote() {
1906
2015
  var isAccepted = formattedQuote.state === "ACCEPTED";
1907
2016
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "bunny-shadow-padding-xb", " ").concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
1908
2017
  color: entityBranding.secondaryColor,
1909
- } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$l, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile
2018
+ } }, { 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
1910
2019
  ? "flex w-full justify-end gap-2"
1911
2020
  : "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
1912
2021
  return downloadFile(apiHost + "/api/pdf/quote", token);
@@ -19212,10 +19321,10 @@ var getColor = function (state) {
19212
19321
  }
19213
19322
  };
19214
19323
 
19215
- var Text$k = antd.Typography.Text;
19324
+ var Text$l = antd.Typography.Text;
19216
19325
  var TransactionDate = function (_a) {
19217
19326
  var date = _a.date;
19218
- return jsxRuntime.jsx(Text$k, __assign({ className: "text-sm" }, { children: common.formatDate(date) }));
19327
+ return jsxRuntime.jsx(Text$l, __assign({ className: "text-sm" }, { children: common.formatDate(date) }));
19219
19328
  };
19220
19329
 
19221
19330
  var ArrowDownToLine = function (_a) {
@@ -19252,12 +19361,13 @@ var TransactionGridCell = defaultStyled.div.withConfig({
19252
19361
  }, common.SLATE_600);
19253
19362
  var templateObject_1$6;
19254
19363
 
19255
- var Text$j = antd.Typography.Text;
19364
+ var Text$k = antd.Typography.Text;
19256
19365
  var TransactionsEmptyState = function () {
19257
19366
  var noTransactionsMessage = react.useContext(TransactionsListContext).noTransactionsMessage;
19258
- return (jsxRuntime.jsx(Text$j, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
19367
+ return (jsxRuntime.jsx(Text$k, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
19259
19368
  };
19260
19369
 
19370
+ var Text$j = antd.Typography.Text;
19261
19371
  var isInvoice = function (transaction) {
19262
19372
  return transaction.kind === "INVOICE";
19263
19373
  };
@@ -19269,7 +19379,7 @@ var TransactionRowTitle = function (_a) {
19269
19379
  if (!isInvoice(transaction) && !isQuote(transaction)) {
19270
19380
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
19271
19381
  }
19272
- return (jsxRuntime.jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19382
+ return (jsxRuntime.jsx(Text$j, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19273
19383
  };
19274
19384
 
19275
19385
  function transactionDateToDisplay(transaction, transactionDateType) {
@@ -19580,103 +19690,7 @@ function QuotesWrapper() {
19580
19690
  return (jsxRuntime.jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
19581
19691
  }
19582
19692
 
19583
- // TODO: move this to common
19584
- var billingDetailsQuery = function () {
19585
- return "\nquery BillingDetails {\n billingDetails {\n billingCity\n billingContact {\n email\n }\n billingCountry\n billingState\n billingStreet\n billingZip\n name\n taxNumber\n currency {\n id\n }\n }\n}";
19586
- };
19587
- var getBillingDetails = function (_a) {
19588
- var token = _a.token, apiHost = _a.apiHost;
19589
- return __awaiter(void 0, void 0, void 0, function () {
19590
- var response;
19591
- var _b;
19592
- return __generator(this, function (_c) {
19593
- switch (_c.label) {
19594
- case 0: return [4 /*yield*/, common.gqlRequest({
19595
- query: billingDetailsQuery(),
19596
- token: token,
19597
- apiHost: apiHost,
19598
- })];
19599
- case 1:
19600
- response = _c.sent();
19601
- if (response === null || response === void 0 ? void 0 : response.errors) {
19602
- throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
19603
- }
19604
- return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
19605
- }
19606
- });
19607
- });
19608
- };
19609
-
19610
- var Text$f = antd.Typography.Text;
19611
- var DrawerHeader = function (_a) {
19612
- var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
19613
- return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx(Text$f, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
19614
- };
19615
-
19616
- var PaymentMethod = function (_a) {
19617
- var _b;
19618
- var className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d,
19619
- /** Whether to use a modal instead of a drawer for the payment method form */
19620
- _e = _a.useModal,
19621
- /** Whether to use a modal instead of a drawer for the payment method form */
19622
- useModal = _e === void 0 ? true : _e;
19623
- var _f = react.useContext(BunnyContext), apiHost = _f.apiHost, graphQLClient = _f.graphQLClient, onTokenExpired = _f.onTokenExpired;
19624
- var token = useToken();
19625
- // Hooks
19626
- var queryClient = reactQuery.useQueryClient();
19627
- var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, token: token }).paymentPlugins;
19628
- var showSuccessNotification = common.useSuccessNotification();
19629
- var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
19630
- var data = usePaymentMethod({ graphQLClient: graphQLClient, token: token }).data;
19631
- var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], apiHost, token);
19632
- // Queries
19633
- var billingDetails = reactQuery.useQuery({
19634
- queryKey: common.QueryKeyFactory.default.billingDetailsKey({ token: token }),
19635
- queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
19636
- }).data;
19637
- // Local state
19638
- var _g = react.useState(false), showModal = _g[0], setShowModal = _g[1];
19639
- var onSuccess = function () {
19640
- queryClient.invalidateQueries({
19641
- queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({ token: token }),
19642
- });
19643
- setShowModal(false);
19644
- showSuccessNotification("Your payment method has been saved");
19645
- };
19646
- if (data === undefined)
19647
- return jsxRuntime.jsx(jsxRuntime.Fragment, {});
19648
- return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [data ? (jsxRuntime.jsx(CreditCard, { onClickRemove: function () { return __awaiter(void 0, void 0, void 0, function () {
19649
- return __generator(this, function (_a) {
19650
- switch (_a.label) {
19651
- case 0: return [4 /*yield*/, onClickRemove(data)];
19652
- case 1:
19653
- _a.sent();
19654
- return [2 /*return*/];
19655
- }
19656
- });
19657
- }); }, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data, shadow: shadow, cardEnabled: cardEnabled })) : (jsxRuntime.jsx(EmptyCard, { onClick: function () { return setShowModal(true); }, shadow: shadow, cardEnabled: cardEnabled })), jsxRuntime.jsx(PaymentMethodDisplay, __assign({ useModal: useModal, setShowModal: setShowModal, showModal: showModal }, { children: jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
19658
- handleAllErrorFormats(error);
19659
- }, onPaymentSuccess: function () {
19660
- onSuccess();
19661
- }, graphQLClient: graphQLClient, currencyId: (_b = billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.currency) === null || _b === void 0 ? void 0 : _b.id }) }))] })));
19662
- };
19663
- var PaymentMethodDisplay = function (_a) {
19664
- var children = _a.children, useModal = _a.useModal, setShowModal = _a.setShowModal, showModal = _a.showModal;
19665
- if (useModal) {
19666
- return (jsxRuntime.jsx(antd.Modal, __assign({ closeIcon: null, open: showModal, onClose: function () { return setShowModal(false); }, onCancel: function () { return setShowModal(false); }, styles: {
19667
- body: {
19668
- padding: "1rem 0 0 0",
19669
- },
19670
- }, title: jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(DrawerHeader, { closeButtonClassName: "bg-transparent border-none cursor-pointer hover:bg-gray-100 p-2 rounded-sm transition-all duration-200", onClose: function () { return setShowModal(false); }, title: "New payment method" }) })), footer: null }, { children: children })));
19671
- }
19672
- return (jsxRuntime.jsx(antd.Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
19673
- body: {
19674
- padding: "1rem 0.5rem 0",
19675
- },
19676
- }, title: jsxRuntime.jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method", closeButtonClassName: "ant-drawer-close" }) }, { children: children })));
19677
- };
19678
-
19679
- 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 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}"; };
19693
+ 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}"; };
19680
19694
  var accountSignup = function (_a) {
19681
19695
  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;
19682
19696
  return __awaiter(void 0, void 0, void 0, function () {
@@ -19695,7 +19709,7 @@ var accountSignup = function (_a) {
19695
19709
  entityId: entityId,
19696
19710
  };
19697
19711
  return [4 /*yield*/, common.gqlRequest({
19698
- query: MUTATION$6(),
19712
+ query: MUTATION$5(),
19699
19713
  token: token,
19700
19714
  vars: vars,
19701
19715
  apiHost: apiHost,
@@ -19711,7 +19725,7 @@ var accountSignup = function (_a) {
19711
19725
  });
19712
19726
  };
19713
19727
 
19714
- 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 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}"; };
19728
+ 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}"; };
19715
19729
  var quoteAccountSignup = function (_a) {
19716
19730
  var token = _a.token, apiHost = _a.apiHost, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact, entityId = _a.entityId;
19717
19731
  return __awaiter(void 0, void 0, void 0, function () {
@@ -19727,7 +19741,7 @@ var quoteAccountSignup = function (_a) {
19727
19741
  entityId: entityId,
19728
19742
  };
19729
19743
  return [4 /*yield*/, common.gqlRequest({
19730
- query: MUTATION$5(),
19744
+ query: MUTATION$4(),
19731
19745
  token: token,
19732
19746
  vars: vars,
19733
19747
  apiHost: apiHost,
@@ -19743,7 +19757,7 @@ var quoteAccountSignup = function (_a) {
19743
19757
  });
19744
19758
  };
19745
19759
 
19746
- var MUTATION$4 = 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}"; };
19760
+ 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}"; };
19747
19761
  var getPriceList = function (_a) {
19748
19762
  var token = _a.token, code = _a.code, apiHost = _a.apiHost;
19749
19763
  return __awaiter(void 0, void 0, void 0, function () {
@@ -19751,7 +19765,7 @@ var getPriceList = function (_a) {
19751
19765
  return __generator(this, function (_b) {
19752
19766
  switch (_b.label) {
19753
19767
  case 0: return [4 /*yield*/, common.gqlRequest({
19754
- query: MUTATION$4(),
19768
+ query: MUTATION$3(),
19755
19769
  token: token,
19756
19770
  vars: { code: code },
19757
19771
  apiHost: apiHost,
@@ -19766,8 +19780,8 @@ var getPriceList = function (_a) {
19766
19780
 
19767
19781
  function PaymentForms(_a) {
19768
19782
  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;
19769
- var apiHost = react.useContext(BunnyContext).apiHost;
19770
- 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, graphQLClient: createGraphQLClient(apiHost, overrideToken), customCheckoutFunction: customCheckoutFunction })) : null })) : (jsxRuntime.jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
19783
+ react.useContext(BunnyContext).apiHost;
19784
+ 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 })) }));
19771
19785
  }
19772
19786
  function InitialSignupForm(_a) {
19773
19787
  var onSubmit = _a.onSubmit, submitting = _a.submitting;
@@ -19785,40 +19799,39 @@ function InitialSignupForm(_a) {
19785
19799
  ] }, { 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: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
19786
19800
  }
19787
19801
 
19788
- var Title = antd.Typography.Title, Text$e = antd.Typography.Text;
19802
+ var Title = antd.Typography.Title, Text$f = antd.Typography.Text;
19789
19803
  function PaymentSuccessDisplay(_a) {
19790
19804
  var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
19791
- return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center 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: "mt-2 m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$e, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
19805
+ return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center 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: "mt-2 m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$f, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
19792
19806
  }
19793
19807
 
19794
- var Text$d = antd.Typography.Text;
19808
+ var Text$e = antd.Typography.Text;
19795
19809
  function PriceListDisplay(_a) {
19796
19810
  var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
19797
19811
  if (!priceListData)
19798
19812
  return null;
19799
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsx(Text$d, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$d, __assign({ className: "font-bold text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsxs(Text$d, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$d, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
19813
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsx(Text$e, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$e, __assign({ className: "font-bold text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$e, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
19800
19814
  }
19801
19815
 
19802
19816
  var showErrorNotification = common.useErrorNotification();
19803
19817
  function Signup(_a) {
19804
19818
  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;
19805
19819
  // Hooks
19806
- var _d = react.useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
19820
+ var apiHost = react.useContext(BunnyContext).apiHost;
19807
19821
  var tokenFromContexts = useToken();
19808
19822
  var isMobile = common.useIsMobile();
19809
19823
  var topNavImageUrl = react.useContext(BrandContext).topNavImageUrl;
19810
- var _e = react.useState(undefined), quote = _e[0], setQuote = _e[1];
19811
- var _f = react.useState(undefined), accountId = _f[0], setAccountId = _f[1];
19812
- var _g = react.useState(undefined), portalSessionToken = _g[0], setPortalSessionToken = _g[1];
19824
+ var _d = react.useState(undefined), quote = _d[0], setQuote = _d[1];
19825
+ var _e = react.useState(undefined), accountId = _e[0], setAccountId = _e[1];
19826
+ var _f = react.useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
19813
19827
  var token = portalSessionToken || tokenFromContexts;
19814
- var _h = react.useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
19815
- var _j = react.useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
19816
- var _k = react.useState(undefined), paymentMethodGraphQLClient = _k[0], setPaymentMethodGraphQLClient = _k[1];
19817
- var paymentMethod = usePaymentMethod({
19828
+ var _g = react.useState(false), proceedingToPayment = _g[0], setProceedingToPayment = _g[1];
19829
+ var _h = react.useState(false), purchaseSucceeded = _h[0], setPurchaseSucceeded = _h[1];
19830
+ var defaultPaymentMethod = usePaymentMethod({
19818
19831
  accountId: accountId,
19819
- graphQLClient: paymentMethodGraphQLClient || graphQLClient,
19820
19832
  token: token,
19821
- }).data;
19833
+ apiHost: apiHost,
19834
+ }).defaultPaymentMethod;
19822
19835
  var queryClient = reactQuery.useQueryClient();
19823
19836
  // Queries
19824
19837
  var priceListData = reactQuery.useQuery({
@@ -19849,11 +19862,11 @@ function Signup(_a) {
19849
19862
  data = _a.sent();
19850
19863
  setAccountId(data.account.id);
19851
19864
  setPortalSessionToken(data.portalSessionToken);
19852
- setPaymentMethodGraphQLClient(createGraphQLClient(apiHost, data.portalSessionToken));
19853
19865
  // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
19854
19866
  // to instead use paymentMethods from portalSessionToken.
19855
19867
  queryClient.invalidateQueries({
19856
19868
  queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
19869
+ accountId: accountId,
19857
19870
  token: token,
19858
19871
  }),
19859
19872
  });
@@ -19892,14 +19905,14 @@ function Signup(_a) {
19892
19905
  if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
19893
19906
  throw new Error("Plugin ID is required");
19894
19907
  }
19895
- if (!(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id)) {
19908
+ if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id)) {
19896
19909
  throw new Error("Payment method ID is required");
19897
19910
  }
19898
19911
  return [4 /*yield*/, accountSignup({
19899
19912
  token: portalSessionToken,
19900
19913
  apiHost: apiHost,
19901
19914
  quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
19902
- paymentMethodId: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
19915
+ paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
19903
19916
  pluginId: plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(),
19904
19917
  priceListCode: priceListCode,
19905
19918
  accountId: accountId,
@@ -19923,18 +19936,20 @@ function Signup(_a) {
19923
19936
  }
19924
19937
 
19925
19938
  var createRequestHeaders = function (token) {
19926
- var bearerToken = "Bearer ".concat(token);
19939
+ var bearerToken = token ? "Bearer ".concat(token) : null;
19927
19940
  var headers = {
19928
19941
  "Content-type": "application/json; charset=utf-8",
19929
19942
  };
19930
- headers["Authorization"] = bearerToken;
19943
+ if (bearerToken) {
19944
+ headers["Authorization"] = bearerToken;
19945
+ }
19931
19946
  return headers;
19932
19947
  };
19933
19948
  var getGraphQLBaseURL = function (apiHost) {
19934
19949
  return "".concat(apiHost, "/graphql");
19935
19950
  };
19936
19951
  var useGraphQLRequest = function () {
19937
- return function (query, token, apiHost, variables) { return __awaiter(void 0, void 0, void 0, function () {
19952
+ return function (query, apiHost, token, variables) { return __awaiter(void 0, void 0, void 0, function () {
19938
19953
  var error_1;
19939
19954
  return __generator(this, function (_a) {
19940
19955
  switch (_a.label) {
@@ -19951,13 +19966,27 @@ var useGraphQLRequest = function () {
19951
19966
  }); };
19952
19967
  };
19953
19968
 
19969
+ var useQuoteSubscriptionUpgrade = function () {
19970
+ var graphQLRequest = useGraphQLRequest();
19971
+ return function (subscriptionId, priceListId, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
19972
+ var data;
19973
+ return __generator(this, function (_a) {
19974
+ switch (_a.label) {
19975
+ case 0: return [4 /*yield*/, graphQLRequest("\n mutation QuoteSubscriptionUpgrade($subscriptionId: ID!, $priceListId: ID!) {\n quoteSubscriptionUpgrade(\n subscriptionId: $subscriptionId\n priceListId: $priceListId\n ) {\n quote {\n id\n }\n }\n }\n ", apiHost, token, { subscriptionId: subscriptionId, priceListId: priceListId })];
19976
+ case 1:
19977
+ data = _a.sent();
19978
+ return [2 /*return*/, data];
19979
+ }
19980
+ });
19981
+ }); };
19982
+ };
19954
19983
  var useCreateSubscriptionQuote = function () {
19955
19984
  var graphQLRequest = useGraphQLRequest();
19956
- return function (subscriptionIds, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
19985
+ return function (subscriptionIds, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
19957
19986
  var data;
19958
19987
  return __generator(this, function (_a) {
19959
19988
  switch (_a.label) {
19960
- case 0: return [4 /*yield*/, graphQLRequest("\n mutation quoteSubscriptionUpdate(\n $subscriptionIds: [ID!]!,\n ) {\n quoteSubscriptionUpdate(\n subscriptionIds: $subscriptionIds,\n ) {\n quote {\n id\n quoteChanges {\n id\n priceList {\n id\n }\n subscription {\n charges {\n startDate\n endDate\n id\n priceListCharge {\n id\n }\n }\n }\n }\n }\n }\n }\n ", token, apiHost, {
19989
+ case 0: return [4 /*yield*/, graphQLRequest("\n mutation quoteSubscriptionUpdate(\n $subscriptionIds: [ID!]!,\n ) {\n quoteSubscriptionUpdate(\n subscriptionIds: $subscriptionIds,\n ) {\n quote {\n id\n quoteChanges {\n id\n priceList {\n id\n }\n subscription {\n charges {\n startDate\n endDate\n id\n priceListCharge {\n id\n }\n }\n }\n }\n }\n }\n }\n ", apiHost, token, {
19961
19990
  subscriptionIds: subscriptionIds,
19962
19991
  })];
19963
19992
  case 1:
@@ -19969,11 +19998,11 @@ var useCreateSubscriptionQuote = function () {
19969
19998
  };
19970
19999
  var useQuoteChangeUpdate = function () {
19971
20000
  var graphQLRequest = useGraphQLRequest();
19972
- return function (charges, quoteChangeId, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
20001
+ return function (charges, quoteChangeId, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
19973
20002
  var response;
19974
20003
  return __generator(this, function (_a) {
19975
20004
  switch (_a.label) {
19976
- case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {\n quoteChangeUpdate(id:$id, charges:$charges) {\n quoteChange { id quoteId }\n errors\n }\n }", token, apiHost, { charges: charges, id: quoteChangeId })];
20005
+ case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {\n quoteChangeUpdate(id:$id, charges:$charges) {\n quoteChange { id quoteId }\n errors\n }\n }", apiHost, token, { charges: charges, id: quoteChangeId })];
19977
20006
  case 1:
19978
20007
  response = _a.sent();
19979
20008
  return [2 /*return*/, response];
@@ -19983,11 +20012,11 @@ var useQuoteChangeUpdate = function () {
19983
20012
  };
19984
20013
  var useQuoteDelete = function () {
19985
20014
  var graphQLRequest = useGraphQLRequest();
19986
- return function (quoteId, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
20015
+ return function (quoteId, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
19987
20016
  var response;
19988
20017
  return __generator(this, function (_a) {
19989
20018
  switch (_a.label) {
19990
- case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteDelete($id: ID!) {\n quoteDelete(id: $id) {\n errors\n }\n }", token, apiHost, { id: quoteId })];
20019
+ case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteDelete($id: ID!) {\n quoteDelete(id: $id) {\n errors\n }\n }", apiHost, token, { id: quoteId })];
19991
20020
  case 1:
19992
20021
  response = _a.sent();
19993
20022
  return [2 /*return*/, response];
@@ -19996,7 +20025,7 @@ var useQuoteDelete = function () {
19996
20025
  }); };
19997
20026
  };
19998
20027
 
19999
- var QUOTE_QUERY = function (id) { return "\n query quote {\n quote(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 quantity\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
20028
+ var QUOTE_QUERY = function (id) { return "\n query quote {\n quote(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 }"); };
20000
20029
  var getQuote = function (_a) {
20001
20030
  var id = _a.id, token = _a.token, apiHost = _a.apiHost;
20002
20031
  return __awaiter(void 0, void 0, void 0, function () {
@@ -20045,35 +20074,10 @@ var pageWrapperClassName = function (isMobile) {
20045
20074
  };
20046
20075
 
20047
20076
  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}";
20048
- var MUTATION$3 = "\nmutation quoteCompose($quoteId: ID, $priceListId: ID, $subscriptionId: ID, $quantity: Int, $accountId: ID) {\n quoteCompose(quoteId: $quoteId, priceListId: $priceListId, subscriptionId: $subscriptionId, quantity: $quantity, accountId: $accountId) {\n ".concat(QUOTE_FIELDS, "\n }\n}\n");
20049
- var quoteCompose = function (_a) {
20050
- var quoteId = _a.quoteId, priceListId = _a.priceListId, subscriptionId = _a.subscriptionId, quantity = _a.quantity, accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost;
20051
- return __awaiter(void 0, void 0, void 0, function () {
20052
- var vars, response, _b, errors, quote;
20053
- return __generator(this, function (_c) {
20054
- switch (_c.label) {
20055
- case 0:
20056
- vars = { quoteId: quoteId, priceListId: priceListId, subscriptionId: subscriptionId, quantity: quantity, accountId: accountId };
20057
- return [4 /*yield*/, common.gqlRequest({
20058
- query: MUTATION$3,
20059
- token: token,
20060
- vars: vars,
20061
- apiHost: apiHost,
20062
- })];
20063
- case 1:
20064
- response = _c.sent();
20065
- _b = response === null || response === void 0 ? void 0 : response.quoteCompose, errors = _b.errors, quote = _b.quote;
20066
- if (errors)
20067
- throw errors;
20068
- return [2 /*return*/, quote];
20069
- }
20070
- });
20071
- });
20072
- };
20073
20077
 
20074
20078
  var QUOTE_RECALCULATE_TAXES = "\n mutation QuoteRecalculateTaxes($id: ID!) {\n quoteRecalculateTaxes(id: $id) {\n ".concat(QUOTE_FIELDS, "\n errors\n }\n }\n");
20075
20079
  var quoteRecalculateTaxes = function (_a) {
20076
- var quoteId = _a.quoteId, token = _a.token, apiHost = _a.apiHost;
20080
+ var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
20077
20081
  return __awaiter(void 0, void 0, void 0, function () {
20078
20082
  var vars, response, errors;
20079
20083
  var _b, _c;
@@ -20100,7 +20104,7 @@ var quoteRecalculateTaxes = function (_a) {
20100
20104
 
20101
20105
  var MUTATION$2 = "{\n currentUser {\n taxationRequiredAccountFields\n }\n}";
20102
20106
  var getTaxationRequiredAccountFields = function (_a) {
20103
- var token = _a.token, apiHost = _a.apiHost;
20107
+ var apiHost = _a.apiHost, token = _a.token;
20104
20108
  return __awaiter(void 0, void 0, void 0, function () {
20105
20109
  var response;
20106
20110
  var _b, _c;
@@ -20131,9 +20135,38 @@ var useHasTaxPlugin = function (_a) {
20131
20135
  return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
20132
20136
  };
20133
20137
 
20134
- 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";
20135
- var accountUpdate = function (_a) {
20136
- var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
20138
+ var useCurrentUserData = function () {
20139
+ var queryClient = reactQuery.useQueryClient();
20140
+ var token = useToken();
20141
+ var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
20142
+ if (!currentUser)
20143
+ return {};
20144
+ return currentUser;
20145
+ };
20146
+
20147
+ var BunnyFooterIcon = function (_a) {
20148
+ var color = _a.color;
20149
+ 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" }) })) })] })));
20150
+ };
20151
+
20152
+ var Footer = function (_a) {
20153
+ var className = _a.className;
20154
+ var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
20155
+ var isMobile = common.useIsMobile();
20156
+ return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(isMobile ? "flex-col gap-2 grow" : "", " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
20157
+ };
20158
+ var BunnyMarketingLink = function () {
20159
+ var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
20160
+ var isMobile = common.useIsMobile();
20161
+ return (jsxRuntime.jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex 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 }) }))] })) })) })));
20162
+ };
20163
+ 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 font-family: Inter;\n text-decoration: none;\n font-size: 14px;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n font-family: Inter;\n text-decoration: none;\n font-size: 14px;\n"])), common.SLATE_400, common.SLATE_500);
20164
+ 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);
20165
+ var templateObject_1$5, templateObject_2$1;
20166
+
20167
+ 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";
20168
+ var accountUpdate = function (_a) {
20169
+ var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
20137
20170
  return __awaiter(void 0, void 0, void 0, function () {
20138
20171
  var vars, response, errors;
20139
20172
  var _b;
@@ -20205,7 +20238,7 @@ var FormBillingState = function (_a) {
20205
20238
 
20206
20239
  var QuoteCheckout = function (_a) {
20207
20240
  var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields;
20208
- var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
20241
+ var _b = react.useContext(BunnyContext), apiHost = _b.apiHost; _b.graphQLClient;
20209
20242
  var token = useToken();
20210
20243
  var isMobile = common.useIsMobile();
20211
20244
  var _c = react.useState(false), isSaving = _c[0], setIsSaving = _c[1];
@@ -20239,7 +20272,7 @@ var QuoteCheckout = function (_a) {
20239
20272
  }
20240
20273
  if (taxationRequiredAccountFields)
20241
20274
  return (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
20242
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote, graphQLClient: graphQLClient })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col 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: "text-xs text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
20275
+ 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: "flex flex-col 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: "text-xs text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
20243
20276
  };
20244
20277
  var PaymentFormWrapper = function (_a) {
20245
20278
  var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
@@ -20253,40 +20286,11 @@ var PaymentFormWrapper = function (_a) {
20253
20286
  })) }, { children: children })));
20254
20287
  };
20255
20288
 
20256
- var useCurrentUserData = function () {
20257
- var queryClient = reactQuery.useQueryClient();
20258
- var token = useToken();
20259
- var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
20260
- if (!currentUser)
20261
- return {};
20262
- return currentUser;
20263
- };
20264
-
20265
- var BunnyFooterIcon = function (_a) {
20266
- var color = _a.color;
20267
- 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" }) })) })] })));
20268
- };
20269
-
20270
- var Footer = function (_a) {
20271
- var className = _a.className;
20272
- var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
20273
- var isMobile = common.useIsMobile();
20274
- return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(isMobile ? "flex-col gap-2 grow" : "", " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
20275
- };
20276
- var BunnyMarketingLink = function () {
20277
- var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
20278
- var isMobile = common.useIsMobile();
20279
- return (jsxRuntime.jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex 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 }) }))] })) })) })));
20280
- };
20281
- 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 font-family: Inter;\n text-decoration: none;\n font-size: 14px;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n font-family: Inter;\n text-decoration: none;\n font-size: 14px;\n"])), common.SLATE_400, common.SLATE_500);
20282
- 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);
20283
- var templateObject_1$5, templateObject_2$1;
20284
-
20285
20289
  var queryKeyFactory = common.QueryKeyFactory.default;
20286
20290
  var Checkout = function (_a) {
20287
20291
  var _b, _c;
20288
- var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, token = _a.token, _d = _a.quantity, quantity = _d === void 0 ? 0 : _d;
20289
- var _e = react.useContext(BunnyContext), apiHost = _e.apiHost, graphQLClient = _e.graphQLClient;
20292
+ var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, token = _a.token;
20293
+ var apiHost = react.useContext(BunnyContext).apiHost;
20290
20294
  var isMobile = common.useIsMobile();
20291
20295
  var hasTaxPlugin = useHasTaxPlugin({
20292
20296
  apiHost: apiHost,
@@ -20294,20 +20298,20 @@ var Checkout = function (_a) {
20294
20298
  });
20295
20299
  var queryClient = reactQuery.useQueryClient();
20296
20300
  // Queries
20297
- var _f = reactQuery.useQuery({
20301
+ var _d = reactQuery.useQuery({
20298
20302
  queryKey: ["getTaxationRequiredAccountFields", token],
20299
- queryFn: function () { return getTaxationRequiredAccountFields({ token: token, apiHost: apiHost }); },
20303
+ queryFn: function () { return getTaxationRequiredAccountFields({ apiHost: apiHost, token: token }); },
20300
20304
  enabled: Boolean(quote),
20301
20305
  staleTime: 0,
20302
- }), taxationRequiredAccountFields = _f.data, isLoadingTaxationRequiredAccountFields = _f.isLoading;
20303
- var _g = reactQuery.useQuery({
20306
+ }), taxationRequiredAccountFields = _d.data, isLoadingTaxationRequiredAccountFields = _d.isLoading;
20307
+ var _e = reactQuery.useQuery({
20304
20308
  queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
20305
20309
  queryFn: function () {
20306
- return (quote === null || quote === void 0 ? void 0 : quote.accountId) && common.getAccount({ id: quote.accountId, token: token, apiHost: apiHost });
20310
+ return (quote === null || quote === void 0 ? void 0 : quote.accountId) && common.getAccount({ id: quote.accountId, apiHost: apiHost, token: token });
20307
20311
  },
20308
20312
  enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
20309
20313
  ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
20310
- }), account = _g.data, isLoadingAccount = _g.isLoading;
20314
+ }), account = _e.data, isLoadingAccount = _e.isLoading;
20311
20315
  reactQuery.useQuery({
20312
20316
  queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
20313
20317
  id: quote === null || quote === void 0 ? void 0 : quote.id,
@@ -20321,8 +20325,8 @@ var Checkout = function (_a) {
20321
20325
  if (!quote) return [3 /*break*/, 2];
20322
20326
  return [4 /*yield*/, quoteRecalculateTaxes({
20323
20327
  quoteId: quote.id,
20324
- token: token,
20325
20328
  apiHost: apiHost,
20329
+ token: token,
20326
20330
  })];
20327
20331
  case 1:
20328
20332
  updatedQuote = _a.sent();
@@ -20333,7 +20337,7 @@ var Checkout = function (_a) {
20333
20337
  token: token,
20334
20338
  });
20335
20339
  calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
20336
- quantity: quantity,
20340
+ // quantity,
20337
20341
  priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
20338
20342
  token: token,
20339
20343
  });
@@ -20357,11 +20361,11 @@ var Checkout = function (_a) {
20357
20361
  return null;
20358
20362
  return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 bg-slate-50 overflow-auto", style: {
20359
20363
  zIndex: 1001,
20360
- } }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "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: "h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "w-full pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice, graphQLClient: graphQLClient }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
20364
+ } }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "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: "h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "w-full pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
20361
20365
  onFail(error);
20362
20366
  }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
20363
20367
  onFail(error);
20364
- }, onPaymentSuccess: onSuccess, graphQLClient: graphQLClient }))] })), jsxRuntime.jsx(Footer, {})] })) })));
20368
+ }, onPaymentSuccess: onSuccess }))] })), jsxRuntime.jsx(Footer, {})] })) })));
20365
20369
  };
20366
20370
 
20367
20371
  var PageTitle = function (_a) {
@@ -20380,70 +20384,44 @@ var PageTitle = function (_a) {
20380
20384
 
20381
20385
  var SubscriptionsContext = react.createContext({});
20382
20386
 
20383
- var calculateNewQuantity = function (priceList, currentQuantity) {
20384
- if (currentQuantity === void 0) { currentQuantity = 1; }
20385
- var priceListRecurringCharge = priceList === null || priceList === void 0 ? void 0 : priceList.charges.find(function (priceListCharge) {
20386
- return priceListCharge.chargeType === "RECURRING" ||
20387
- priceListCharge.chargeType === "USAGE";
20387
+ 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";
20388
+ var quoteChargeUpdate = function (_a) {
20389
+ var discount = _a.discount,
20390
+ // endDate,
20391
+ name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
20392
+ return common.gqlRequest({
20393
+ query: QUOTE_CHARGE_UPDATE,
20394
+ vars: {
20395
+ subtotal: subtotal,
20396
+ discount: discount,
20397
+ // endDate,
20398
+ name: name,
20399
+ price: price,
20400
+ quantity: quantity,
20401
+ quoteChargeId: quoteChargeId,
20402
+ startDate: startDate,
20403
+ },
20404
+ apiHost: apiHost,
20405
+ token: token,
20388
20406
  });
20389
- var quantityMax = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMax) || Number.POSITIVE_INFINITY;
20390
- var quantityMin = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMin) || Number.NEGATIVE_INFINITY;
20391
- var selfServiceQuantity = priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.selfServiceQuantity;
20392
- // If self service quantity is disabled, return the min quantity
20393
- if (!selfServiceQuantity && quantityMin) {
20394
- return quantityMin;
20395
- }
20396
- // If the current quantity is greater than the max quantity, return the max quantity
20397
- else if (currentQuantity > quantityMax) {
20398
- return quantityMax;
20399
- }
20400
- // If the current quantity is less than the min quantity, return the min quantity
20401
- else if (currentQuantity < quantityMin) {
20402
- return quantityMin;
20403
- }
20404
- // If the current quantity is between the min and max quantity, return the current quantity
20405
- else if (currentQuantity <= quantityMax && currentQuantity >= quantityMin) {
20406
- return currentQuantity;
20407
- }
20408
- // If all else fails, return 1
20409
- else {
20410
- return 1;
20411
- }
20412
20407
  };
20413
20408
 
20414
20409
  var CheckoutBarInput = function (_a) {
20415
- var charge = _a.charge, quantity = _a.quantity, selectedPriceList = _a.selectedPriceList, setQuantity = _a.setQuantity;
20410
+ var disabled = _a.disabled, charge = _a.charge, quantity = _a.quantity, selectedPriceList = _a.selectedPriceList, onQuantityChanged = _a.onQuantityChanged;
20411
+ // State
20416
20412
  var _b = react.useState(false), isTooltipOpen = _b[0], setIsTooltipOpen = _b[1];
20417
- // Context
20418
- var _c = react.useContext(SubscriptionsContext), setQuotePreviewData = _c.setQuotePreviewData, quotePreviewData = _c.quotePreviewData;
20413
+ var _c = react.useState(0), quantityLocal = _c[0], setQuantityLocal = _c[1];
20419
20414
  // Hooks
20420
20415
  var isMobile = common.useIsMobile();
20421
- // Handlers
20422
- var onChangeQuantity = function (quantity) {
20423
- if (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) {
20424
- setQuotePreviewData({
20425
- priceList: quotePreviewData.priceList,
20426
- quantity: calculateNewQuantity(quotePreviewData.priceList, quantity),
20427
- });
20428
- }
20429
- else {
20430
- console.error("No price list found in quote preview data");
20431
- }
20432
- };
20433
- var onBlurUsers = function (e) {
20434
- var amount = Number(e.target.value);
20435
- if (!amount) {
20436
- onChangeQuantity(1);
20437
- }
20438
- };
20439
- // Quantity debounce
20440
- // eslint-disable-next-line
20441
20416
  var quoteChangeDebounce = react.useCallback(lodashExports.debounce(function (newQuantity) { return __awaiter(void 0, void 0, void 0, function () {
20442
20417
  return __generator(this, function (_a) {
20443
- onChangeQuantity(newQuantity);
20418
+ onQuantityChanged(newQuantity);
20444
20419
  return [2 /*return*/];
20445
20420
  });
20446
20421
  }); }, 1000), []);
20422
+ react.useEffect(function () {
20423
+ setQuantityLocal(quantity);
20424
+ }, [quantity]);
20447
20425
  react.useEffect(function () {
20448
20426
  setTimeout(function () {
20449
20427
  setIsTooltipOpen(true);
@@ -20459,11 +20437,11 @@ var CheckoutBarInput = function (_a) {
20459
20437
  paddingTop: "0.75rem",
20460
20438
  paddingBottom: "0.75rem",
20461
20439
  },
20462
- } }, { children: jsxRuntime.jsx(antd.Input, { className: isMobile ? "text-right" : "", disabled: !selectedPriceList || !charge.selfServiceQuantity, onBlur: onBlurUsers, onChange: function (e) {
20440
+ } }, { children: jsxRuntime.jsx(antd.Input, { className: isMobile ? "text-right" : "", disabled: disabled || !selectedPriceList || !charge.selfServiceQuantity, onChange: function (e) {
20463
20441
  var quantity = Number(e.target.value);
20464
- setQuantity(quantity);
20442
+ setQuantityLocal(quantity);
20465
20443
  quoteChangeDebounce(quantity);
20466
- }, min: charge === null || charge === void 0 ? void 0 : charge.quantityMin, max: charge === null || charge === void 0 ? void 0 : charge.quantityMax, style: { minWidth: "120px" }, type: "number", value: quantity, required: true }) }))] })));
20444
+ }, min: charge === null || charge === void 0 ? void 0 : charge.quantityMin, max: charge === null || charge === void 0 ? void 0 : charge.quantityMax, style: { minWidth: "120px" }, type: "number", value: quantityLocal, required: true }) }))] })));
20467
20445
  };
20468
20446
  var QuantityLabel = function (_a) {
20469
20447
  var _b;
@@ -20583,7 +20561,7 @@ var CheckoutPrice = function (_a) {
20583
20561
 
20584
20562
  var CheckoutBarSummarySection = function (_a) {
20585
20563
  var _b;
20586
- var open = _a.open, quantityLocal = _a.quantityLocal, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription, quotePreviewData = _a.quotePreviewData;
20564
+ var open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription, quotePreviewData = _a.quotePreviewData;
20587
20565
  // Context
20588
20566
  var apiHost = react.useContext(BunnyContext).apiHost;
20589
20567
  // Hooks
@@ -20603,7 +20581,7 @@ var CheckoutBarSummarySection = function (_a) {
20603
20581
  });
20604
20582
  var checkoutButtonDisabled = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
20605
20583
  !selectedPriceList ||
20606
- quantityLocal !== quotePreviewData.quantity ||
20584
+ // quantityLocal !== quotePreviewData.quantity ||
20607
20585
  isFetching ||
20608
20586
  selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) ||
20609
20587
  open);
@@ -20624,82 +20602,90 @@ var PlanPickerCheckoutBarWrapper = function (_a) {
20624
20602
  return (jsxRuntime.jsx(PlanPickerCheckoutBar, { handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
20625
20603
  };
20626
20604
  var PlanPickerCheckoutBar = function (_a) {
20627
- var _b;
20628
20605
  var selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
20629
20606
  // Context
20630
20607
  var token = useToken();
20631
- var _c = react.useContext(SubscriptionsContext), quotePreviewData = _c.quotePreviewData, upgradingSubscription = _c.upgradingSubscription, shadow = _c.shadow;
20632
- var _d = react.useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
20608
+ var _b = react.useContext(SubscriptionsContext), quotePreviewData = _b.quotePreviewData, upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
20609
+ var apiHost = react.useContext(BunnyContext).apiHost;
20633
20610
  // Local state
20634
- var _e = react.useState(0), quantityLocal = _e[0], setQuantity = _e[1];
20635
- var _f = react.useState(0), prevQuantity = _f[0], setPrevQuantity = _f[1];
20636
- var _g = react.useState(false), payModalVisible = _g[0], setPayModalVisible = _g[1];
20611
+ var _c = react.useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
20612
+ var quoteIdRef = react.useRef();
20637
20613
  // Hooks
20638
20614
  var showSuccessNotification = common.useSuccessNotification();
20639
20615
  var queryClient = reactQuery.useQueryClient();
20640
20616
  var isMobile = common.useIsMobile();
20641
- var storedPaymentMethod = usePaymentMethod({
20642
- graphQLClient: graphQLClient,
20617
+ var defaultPaymentMethod = usePaymentMethod({
20643
20618
  token: token,
20644
- }).data;
20645
- // Quote ID ref
20646
- var quoteIdRef = react.useRef();
20619
+ apiHost: apiHost,
20620
+ }).defaultPaymentMethod;
20621
+ var createSubscriptionQuote = useQuoteSubscriptionUpgrade();
20622
+ // Mutations
20623
+ var createQuote = reactQuery.useMutation({
20624
+ mutationFn: function (_a) {
20625
+ var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
20626
+ return createSubscriptionQuote(subscriptionId, priceListId, apiHost, token);
20627
+ },
20628
+ onSuccess: function (subscriptionUpdateData) {
20629
+ var _a;
20630
+ var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
20631
+ quoteIdRef.current = quote.id;
20632
+ },
20633
+ });
20634
+ var updateCharge = reactQuery.useMutation({
20635
+ mutationFn: quoteChargeUpdate,
20636
+ onSuccess: function () {
20637
+ queryClient.invalidateQueries({
20638
+ queryKey: common.QueryKeyFactory.default.createQuoteKey({
20639
+ id: quoteIdRef.current || "",
20640
+ token: token,
20641
+ }),
20642
+ });
20643
+ },
20644
+ }).mutate;
20647
20645
  // Queries
20648
- var _h = reactQuery.useQuery({
20649
- queryKey: common.QueryKeyFactory.default.calculatedPricesKey({
20650
- quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
20651
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
20646
+ var quote = reactQuery.useQuery({
20647
+ queryKey: common.QueryKeyFactory.default.createQuoteKey({
20648
+ id: quoteIdRef.current || "",
20652
20649
  token: token,
20653
20650
  }),
20654
20651
  queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
20655
20652
  var quote;
20656
- var _a;
20657
- return __generator(this, function (_b) {
20658
- switch (_b.label) {
20659
- case 0: return [4 /*yield*/, quoteCompose({
20660
- priceListId: (_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.id,
20661
- quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
20662
- quoteId: quoteIdRef.current,
20663
- subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
20653
+ return __generator(this, function (_a) {
20654
+ switch (_a.label) {
20655
+ case 0: return [4 /*yield*/, getQuote({
20656
+ id: quoteIdRef.current || "",
20664
20657
  token: token,
20665
20658
  apiHost: apiHost,
20666
20659
  })];
20667
20660
  case 1:
20668
- quote = _b.sent();
20669
- quoteIdRef.current = quote === null || quote === void 0 ? void 0 : quote.id;
20661
+ quote = _a.sent();
20670
20662
  return [2 /*return*/, quote];
20671
20663
  }
20672
20664
  });
20673
20665
  }); },
20674
- // 'enabled' is commented out for HACKY FIX
20675
- // enabled: Boolean(
20676
- // quotePreviewData?.priceList?.id &&
20677
- // selectedPriceList &&
20678
- // selectedPriceList.id !== upgradingSubscription?.priceList.id
20679
- // ),
20680
- enabled: false,
20681
- placeholderData: reactQuery.keepPreviousData,
20682
- }), quote = _h.data, refetch = _h.refetch;
20683
- // TODO: eventually solve this hacky fix
20684
- // THIS IS NOT OKAY (we couldn't find any other solution on short notice)
20685
- // HACKY FIX START
20686
- // Essentially this useEffect is doing the work useQuery is supposed to do, but isn't doing properly.
20666
+ }).data;
20687
20667
  react.useEffect(function () {
20688
- var _a;
20689
- if (((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.id) &&
20690
- selectedPriceList &&
20691
- selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id)) {
20692
- refetch();
20668
+ if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
20669
+ console.error("upgradingSubscription is undefined");
20670
+ return;
20693
20671
  }
20694
- }, [
20695
- (_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id,
20696
- quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
20697
- refetch,
20698
- selectedPriceList,
20699
- selectedPriceList.id,
20700
- upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id,
20701
- ]);
20702
- // HACKY FIX END
20672
+ createQuote.mutate({
20673
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
20674
+ priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
20675
+ });
20676
+ }, [selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id]);
20677
+ // Reset query key on unmount
20678
+ react.useEffect(function () {
20679
+ return function () {
20680
+ queryClient.invalidateQueries({
20681
+ queryKey: common.QueryKeyFactory.default.calculatedPricesKey({
20682
+ priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
20683
+ quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
20684
+ token: token,
20685
+ }),
20686
+ });
20687
+ };
20688
+ }, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
20703
20689
  var handleCheckoutSuccess = function () {
20704
20690
  queryClient.invalidateQueries({
20705
20691
  queryKey: common.QueryKeyFactory.default.createTableKey({
@@ -20717,39 +20703,45 @@ var PlanPickerCheckoutBar = function (_a) {
20717
20703
  var onCheckoutFail = function (error) {
20718
20704
  handlePortalErrors(error);
20719
20705
  };
20720
- // Set quantity from quote preview data
20721
- react.useEffect(function () {
20722
- if ((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) &&
20723
- prevQuantity !== quotePreviewData.quantity) {
20724
- setQuantity(quotePreviewData.quantity);
20725
- setPrevQuantity(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity);
20706
+ function onChangeQuantity(chargeId, quantity) {
20707
+ var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
20708
+ var quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) {
20709
+ var _a;
20710
+ return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === chargeId;
20711
+ });
20712
+ if (!token) {
20713
+ console.error("token is undefined");
20714
+ return;
20726
20715
  }
20727
- }, [
20728
- prevQuantity,
20729
- quantityLocal,
20730
- quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
20731
- setPrevQuantity,
20732
- setQuantity,
20733
- ]);
20734
- // Reset query key on unmount
20735
- react.useEffect(function () {
20736
- return function () {
20737
- queryClient.invalidateQueries({
20738
- queryKey: common.QueryKeyFactory.default.calculatedPricesKey({
20739
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
20740
- quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
20741
- token: token,
20742
- }),
20743
- });
20744
- };
20745
- }, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
20716
+ if (!quoteCharge) {
20717
+ console.error("quoteCharge not found");
20718
+ return;
20719
+ }
20720
+ updateCharge({
20721
+ quoteChargeId: quoteCharge.id,
20722
+ quantity: quantity,
20723
+ apiHost: apiHost,
20724
+ token: token,
20725
+ });
20726
+ }
20746
20727
  return (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-4" : "flex-row", " my-2 p-4 justify-between bg-white rounded-md ").concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "flex flex-col" : "flex", " gap-4") }, { children: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.map(function (charge, index) {
20747
- return (jsxRuntime.jsx(CheckoutBarInput, { charge: charge, quantity: quantityLocal || 0, selectedPriceList: selectedPriceList, setQuantity: setQuantity }, index));
20748
- }) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quantityLocal: quantityLocal, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsxRuntime.jsx(Checkout, { isMobile: isMobile, onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quantity: quantityLocal, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: storedPaymentMethod, token: token })] })));
20728
+ var _a;
20729
+ var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
20730
+ var chargeQuantity = (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceList) === null || _a === void 0 ? void 0 : _a.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); })) === null || _a === void 0 ? void 0 : _a.quantity;
20731
+ if (charge.chargeType === common.ChargeType.USAGE)
20732
+ return null;
20733
+ if (!quote)
20734
+ return null;
20735
+ if (!chargeQuantity)
20736
+ return null;
20737
+ return (jsxRuntime.jsx(CheckoutBarInput, { disabled: !chargeQuantity, charge: charge, quantity: chargeQuantity !== null && chargeQuantity !== void 0 ? chargeQuantity : 0, selectedPriceList: selectedPriceList, onQuantityChanged: function (quantity) {
20738
+ onChangeQuantity(charge.id, quantity);
20739
+ } }, index));
20740
+ }) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsxRuntime.jsx(Checkout, { isMobile: isMobile, onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
20749
20741
  };
20750
20742
 
20751
20743
  // WARNING: There is a preview button on APP that will need to be changed if this query is changed
20752
- var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n basePrice\n id\n currencyId\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
20744
+ var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n basePrice\n id\n currencyId\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
20753
20745
  var getPriceListChangeOptions = function (_a) {
20754
20746
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
20755
20747
  return __awaiter(void 0, void 0, void 0, function () {
@@ -20783,6 +20775,37 @@ var ErrorView = function (_a) {
20783
20775
  return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsxRuntime.jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
20784
20776
  };
20785
20777
 
20778
+ var calculateNewQuantity = function (priceList, currentQuantity) {
20779
+ if (currentQuantity === void 0) { currentQuantity = 1; }
20780
+ var priceListRecurringCharge = priceList === null || priceList === void 0 ? void 0 : priceList.charges.find(function (priceListCharge) {
20781
+ return priceListCharge.chargeType === "RECURRING" ||
20782
+ priceListCharge.chargeType === "USAGE";
20783
+ });
20784
+ var quantityMax = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMax) || Number.POSITIVE_INFINITY;
20785
+ var quantityMin = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMin) || Number.NEGATIVE_INFINITY;
20786
+ var selfServiceQuantity = priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.selfServiceQuantity;
20787
+ // If self service quantity is disabled, return the min quantity
20788
+ if (!selfServiceQuantity && quantityMin) {
20789
+ return quantityMin;
20790
+ }
20791
+ // If the current quantity is greater than the max quantity, return the max quantity
20792
+ else if (currentQuantity > quantityMax) {
20793
+ return quantityMax;
20794
+ }
20795
+ // If the current quantity is less than the min quantity, return the min quantity
20796
+ else if (currentQuantity < quantityMin) {
20797
+ return quantityMin;
20798
+ }
20799
+ // If the current quantity is between the min and max quantity, return the current quantity
20800
+ else if (currentQuantity <= quantityMax && currentQuantity >= quantityMin) {
20801
+ return currentQuantity;
20802
+ }
20803
+ // If all else fails, return 1
20804
+ else {
20805
+ return 1;
20806
+ }
20807
+ };
20808
+
20786
20809
  var BillingPeriodSelector = function (_a) {
20787
20810
  var availableBillingPeriods = _a.availableBillingPeriods, onChangeBillingPeriod = _a.onChangeBillingPeriod, products = _a.products, selectedBillingPeriod = _a.selectedBillingPeriod, selectedProduct = _a.selectedProduct, onChangeProduct = _a.onChangeProduct;
20788
20811
  var _b = react.useContext(BrandContext), secondaryColor = _b.secondaryColor, brandColor = _b.brandColor;
@@ -20831,22 +20854,22 @@ var PriceListCardPrice = function (_a) {
20831
20854
  : "Free" })));
20832
20855
  };
20833
20856
 
20834
- var Text$c = antd.Typography.Text;
20857
+ var Text$d = antd.Typography.Text;
20835
20858
  var PriceListCardDescription = function (_a) {
20836
20859
  var description = _a.description;
20837
20860
  if (!description)
20838
20861
  return null;
20839
- return jsxRuntime.jsx(Text$c, __assign({ className: "text-center" }, { children: description }));
20862
+ return jsxRuntime.jsx(Text$d, __assign({ className: "text-center" }, { children: description }));
20840
20863
  };
20841
20864
 
20842
- var Text$b = antd.Typography.Text;
20865
+ var Text$c = antd.Typography.Text;
20843
20866
  var PriceListCardPriceDescription = function (_a) {
20844
20867
  var feature = _a.feature, priceList = _a.priceList;
20845
20868
  var isMobile = common.useIsMobile();
20846
20869
  var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === common.PricingModel.FLAT && charge.basePrice > 0; });
20847
20870
  if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== common.PricingStyle.PRICED)
20848
20871
  return null;
20849
- return (jsxRuntime.jsx(Text$b, __assign({ className: "text-center text-gray-900", style: {
20872
+ return (jsxRuntime.jsx(Text$c, __assign({ className: "text-center text-gray-900", style: {
20850
20873
  fontSize: isMobile ? "13px" : "12px",
20851
20874
  } }, { children: priceList.plan.pricingDescription
20852
20875
  ? priceList.plan.pricingDescription
@@ -20919,7 +20942,6 @@ var PriceListCardDesktop = function (_a) {
20919
20942
  }
20920
20943
  }, style: {
20921
20944
  height: "100%",
20922
- maxWidth: "440px",
20923
20945
  } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center 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 })] })) }));
20924
20946
  };
20925
20947
 
@@ -20953,18 +20975,18 @@ var PriceListCard = function (_a) {
20953
20975
  return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsxRuntime.jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
20954
20976
  };
20955
20977
 
20956
- var Text$a = antd.Typography.Text;
20978
+ var Text$b = antd.Typography.Text;
20957
20979
  var PriceListCardFeature = function (_a) {
20958
20980
  var index = _a.index, planFeature = _a.planFeature;
20959
20981
  var brandColor = react.useContext(BrandContext).brandColor;
20960
20982
  if (planFeature.feature.kind === "GROUP")
20961
- return jsxRuntime.jsx(Text$a, __assign({ className: "font-medium base-text" }, { children: planFeature.name }));
20962
- return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$a, __assign({ className: "text-gray-600" }, { children: planFeature.feature.name }))] }), index));
20983
+ return jsxRuntime.jsx(Text$b, __assign({ className: "font-medium base-text" }, { children: planFeature.name }));
20984
+ return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$b, __assign({ className: "text-gray-600" }, { children: planFeature.feature.name }))] }), index));
20963
20985
  };
20964
20986
 
20965
20987
  var getAvailablePlansAndPriceLists = function (_a) {
20966
- var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart;
20967
- var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + 3);
20988
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, plansToDisplay = _a.plansToDisplay;
20989
+ var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + plansToDisplay);
20968
20990
  var availablePlansArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
20969
20991
  var _a;
20970
20992
  var foundPriceList = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.find(function (priceList) { return priceList.plan.id === displayPriceList.plan.id; });
@@ -20994,6 +21016,67 @@ var PriceListGridMobile = function (_a) {
20994
21016
  : "Features" })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 overflow-auto shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsxRuntime.jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
20995
21017
  };
20996
21018
 
21019
+ var NextPriceListButton = function (_a) {
21020
+ var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21021
+ return (jsxRuntime.jsxs("div", __assign({ className: "absolute flex gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
21022
+ setPriceListStart(function (prev) {
21023
+ var newValue = prev - 1;
21024
+ if (newValue < 0) {
21025
+ return prev;
21026
+ }
21027
+ return newValue;
21028
+ });
21029
+ }, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
21030
+ return setPriceListStart(function (prev) {
21031
+ var newValue = prev + 1;
21032
+ if (newValue >= availablePriceLists.length) {
21033
+ return prev;
21034
+ }
21035
+ return newValue;
21036
+ });
21037
+ }, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
21038
+ };
21039
+
21040
+ var filterUniqueFeatures = function (_a) {
21041
+ // Remove any features that in previous plans if everythingInPlus is true
21042
+ var availablePriceLists = _a.availablePriceLists;
21043
+ var uniqueFeatures = new Set();
21044
+ var updatedPriceLists = availablePriceLists.map(function (priceList) {
21045
+ var _a;
21046
+ var updatedPlanFeatures = (_a = priceList.plan.planFeatures) === null || _a === void 0 ? void 0 : _a.filter(function (feature) {
21047
+ if (uniqueFeatures.has(feature.featureId)) {
21048
+ return false;
21049
+ }
21050
+ else {
21051
+ uniqueFeatures.add(feature.featureId);
21052
+ return true;
21053
+ }
21054
+ });
21055
+ return __assign(__assign({}, priceList), { plan: __assign(__assign({}, priceList.plan), { planFeatures: updatedPlanFeatures }) });
21056
+ });
21057
+ return updatedPriceLists;
21058
+ };
21059
+ var EverythingPlanFeatures = function (_a) {
21060
+ var availablePriceLists = _a.availablePriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
21061
+ var brandColor = react.useContext(BrandContext).brandColor;
21062
+ var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: availablePriceLists });
21063
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: __spreadArray([], Array(plansToDisplay), true).map(function (_, planIndex) {
21064
+ var priceList = uniquePlanFeatures[planIndex];
21065
+ var prevPriceList = availablePriceLists[planIndex - 1];
21066
+ if (!priceList)
21067
+ return (jsxRuntime.jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
21068
+ if (!priceList.plan.planFeatures)
21069
+ return jsxRuntime.jsx("div", {}, planIndex);
21070
+ return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
21071
+ var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21072
+ return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [prevPriceList &&
21073
+ everythingInPlus &&
21074
+ planIndex > 0 &&
21075
+ planFeatureIndex === 0 && (jsxRuntime.jsx("div", __assign({ className: "font-medium", style: { fontSize: "13px" } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex gap-1 text-gray-600", style: { fontSize: "13px" } }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
21076
+ }) }), planIndex));
21077
+ }) }));
21078
+ };
21079
+
20997
21080
  var shouldColorRow = function (_a) {
20998
21081
  var isFeatureGroup = _a.isFeatureGroup, rowIndex = _a.rowIndex;
20999
21082
  return !isFeatureGroup && rowIndex % 2 === 1;
@@ -21008,12 +21091,10 @@ var FeatureGridCell = function (_a) {
21008
21091
  : {})) }, { children: children })));
21009
21092
  };
21010
21093
 
21011
- var PLANS_TO_DISPLAY$1 = 3;
21012
-
21013
- var Text$9 = antd.Typography.Text;
21094
+ var Text$a = antd.Typography.Text;
21014
21095
  var PlanFeatures = function (_a) {
21015
21096
  var _b;
21016
- var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct;
21097
+ var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
21017
21098
  var featureGroupCounter = react.useRef(0);
21018
21099
  var visibleFeatureCounter = react.useRef(1);
21019
21100
  var brandColor = react.useContext(BrandContext).brandColor;
@@ -21038,7 +21119,7 @@ var PlanFeatures = function (_a) {
21038
21119
  rowIndex = rowIndex + featureGroupCounter.current;
21039
21120
  // Increment the visible feature counter
21040
21121
  visibleFeatureCounter.current = visibleFeatureCounter.current + 1;
21041
- return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsxRuntime.jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(PLANS_TO_DISPLAY$1), true).map(function (_, columnIndex) {
21122
+ return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsxRuntime.jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(plansToDisplay), true).map(function (_, columnIndex) {
21042
21123
  var _a;
21043
21124
  var plan = availablePlansArray[columnIndex];
21044
21125
  var doesHavePrevPlan = availablePlansArray[columnIndex - 1];
@@ -21048,76 +21129,17 @@ var PlanFeatures = function (_a) {
21048
21129
  if (!plan)
21049
21130
  return (jsxRuntime.jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
21050
21131
  if (isFeatureGroup)
21051
- return jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex);
21052
- return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "flex justify-center text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$9, __assign({ className: "text-gray" }, { children: "-" }))) })) }), columnIndex));
21132
+ return (jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex));
21133
+ return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "flex justify-center text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$a, __assign({ className: "text-gray" }, { children: "-" }))) })) }), columnIndex));
21053
21134
  })] }), rowIndex));
21054
21135
  }) }));
21055
21136
  };
21056
21137
  var FeatureTitle = function (_a) {
21057
21138
  var _b;
21058
21139
  var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
21059
- return (jsxRuntime.jsx(Text$9, __assign({ className: " ".concat(isFeatureGroup ? "text-slate-500 font-medium pt-4" : ""), style: __assign({}, (isFeatureGroup ? { fontSize: "11px" } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
21060
- };
21061
-
21062
- var NextPriceListButton = function (_a) {
21063
- var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart;
21064
- return (jsxRuntime.jsxs("div", __assign({ className: "absolute flex gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
21065
- setPriceListStart(function (prev) {
21066
- var newValue = prev - 1;
21067
- if (newValue < 0) {
21068
- return prev;
21069
- }
21070
- return newValue;
21071
- });
21072
- }, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - 3 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
21073
- return setPriceListStart(function (prev) {
21074
- var newValue = prev + 1;
21075
- if (newValue >= availablePriceLists.length) {
21076
- return prev;
21077
- }
21078
- return newValue;
21079
- });
21080
- }, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
21081
- };
21082
-
21083
- var filterUniqueFeatures = function (_a) {
21084
- // Remove any features that in previous plans if everythingInPlus is true
21085
- var availablePriceLists = _a.availablePriceLists;
21086
- var uniqueFeatures = new Set();
21087
- var updatedPriceLists = availablePriceLists.map(function (priceList) {
21088
- var _a;
21089
- var updatedPlanFeatures = (_a = priceList.plan.planFeatures) === null || _a === void 0 ? void 0 : _a.filter(function (feature) {
21090
- if (uniqueFeatures.has(feature.featureId)) {
21091
- return false;
21092
- }
21093
- else {
21094
- uniqueFeatures.add(feature.featureId);
21095
- return true;
21096
- }
21097
- });
21098
- return __assign(__assign({}, priceList), { plan: __assign(__assign({}, priceList.plan), { planFeatures: updatedPlanFeatures }) });
21099
- });
21100
- return updatedPriceLists;
21101
- };
21102
- var EverythingPlanFeatures = function (_a) {
21103
- var availablePriceLists = _a.availablePriceLists, selectedProduct = _a.selectedProduct;
21104
- var brandColor = react.useContext(BrandContext).brandColor;
21105
- var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: availablePriceLists });
21106
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, planIndex) {
21107
- var priceList = uniquePlanFeatures[planIndex];
21108
- var prevPriceList = availablePriceLists[planIndex - 1];
21109
- if (!priceList)
21110
- return (jsxRuntime.jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
21111
- if (!priceList.plan.planFeatures)
21112
- return jsxRuntime.jsx("div", {}, planIndex);
21113
- return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
21114
- var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21115
- return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [prevPriceList && everythingInPlus && planIndex > 0 && planFeatureIndex === 0 && (jsxRuntime.jsx("div", __assign({ className: "font-medium", style: { fontSize: "13px" } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex gap-1 text-gray-600", style: { fontSize: "13px" } }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
21116
- }) }), planIndex));
21117
- }) }));
21140
+ return (jsxRuntime.jsx(Text$a, __assign({ className: " ".concat(isFeatureGroup ? "text-slate-500 font-medium pt-4" : ""), style: __assign({}, (isFeatureGroup ? { fontSize: "11px" } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
21118
21141
  };
21119
21142
 
21120
- var PLANS_TO_DISPLAY = 3;
21121
21143
  var PriceListGridDesktop = function (_a) {
21122
21144
  var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
21123
21145
  var _b = react.useMemo(function () {
@@ -21125,20 +21147,22 @@ var PriceListGridDesktop = function (_a) {
21125
21147
  availablePriceLists: availablePriceLists,
21126
21148
  priceListChangeOptions: priceListChangeOptions,
21127
21149
  priceListStart: priceListStart,
21150
+ plansToDisplay: (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3,
21128
21151
  });
21129
21152
  }, [availablePriceLists, priceListChangeOptions, priceListStart]), availablePlansArray = _b.availablePlansArray, displayPriceLists = _b.displayPriceLists;
21130
21153
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21131
- return (jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col rounded-md shadow overflow-hidden bg-white" }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "grid w-full", style: {
21154
+ var plansToDisplay = Math.min((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3, availablePriceLists.length);
21155
+ return (jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col rounded-md shadow overflow-hidden bg-white" }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "grid w-full", style: {
21132
21156
  gridTemplateColumns: everythingInPlus
21133
- ? "repeat(3, minmax(120px, 1fr))"
21134
- : "minmax(auto, 400px) repeat(3, minmax(120px, 1fr))",
21135
- } }, { children: [!everythingInPlus && jsxRuntime.jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, index) {
21157
+ ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
21158
+ : "minmax(auto, 400px) repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))"),
21159
+ } }, { children: [!everythingInPlus && jsxRuntime.jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(plansToDisplay), true).map(function (_, index) {
21136
21160
  var priceList = displayPriceLists[index];
21137
21161
  var doesPrevPriceListExist = displayPriceLists[index - 1];
21138
21162
  if (!priceList)
21139
21163
  return (jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index));
21140
21164
  return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
21141
- }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { availablePriceLists: availablePriceLists, selectedProduct: selectedProduct })) : (jsxRuntime.jsx(PlanFeatures, { availablePlansArray: availablePlansArray, selectedProduct: selectedProduct }))] }))] })));
21165
+ }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { availablePriceLists: availablePriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsxRuntime.jsx(PlanFeatures, { availablePlansArray: availablePlansArray, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }))] }))] })));
21142
21166
  };
21143
21167
 
21144
21168
  var PriceListGrid = function (_a) {
@@ -21284,7 +21308,6 @@ var PlanPicker = function () {
21284
21308
  var apiHost = react.useContext(BunnyContext).apiHost;
21285
21309
  var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData, upgradingSubscription = _b.upgradingSubscription;
21286
21310
  // Hooks
21287
- var queryClient = reactQuery.useQueryClient();
21288
21311
  var showInfoNotification = common.useInfoNotification();
21289
21312
  // Queries
21290
21313
  var _c = reactQuery.useQuery({
@@ -21325,55 +21348,48 @@ var PlanPicker = function () {
21325
21348
  setQuotePreviewData({});
21326
21349
  };
21327
21350
  }, [setQuotePreviewData]);
21328
- if (queryClient.isFetching({
21329
- queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({
21330
- subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21331
- token: token,
21332
- }),
21333
- }))
21334
- return jsxRuntime.jsx(jsxRuntime.Fragment, {});
21335
- else if (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0)
21351
+ if (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0)
21336
21352
  return jsxRuntime.jsx(ErrorView, { message: "There are no plans available" });
21337
21353
  return (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
21338
21354
  };
21339
21355
 
21340
- var Text$8 = antd.Typography.Text;
21356
+ var Text$9 = antd.Typography.Text;
21341
21357
  var PreviewModeAdvisary = function (_a) {
21342
21358
  var isInPreviewMode = _a.isInPreviewMode;
21343
21359
  if (!isInPreviewMode)
21344
21360
  return null;
21345
- return (jsxRuntime.jsx("div", __assign({ className: "flex justify-center w-full rounded" }, { children: jsxRuntime.jsx(Text$8, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
21361
+ return (jsxRuntime.jsx("div", __assign({ className: "flex justify-center w-full rounded" }, { children: jsxRuntime.jsx(Text$9, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
21346
21362
  };
21347
21363
 
21348
21364
  var PlanManager = function (_a) {
21349
21365
  var onChangePlanCancel = _a.onChangePlanCancel, handlePortalErrors = _a.handlePortalErrors;
21350
21366
  // Context
21351
21367
  var token = useToken();
21352
- var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
21353
- var _c = react.useContext(SubscriptionsContext), isInPreviewMode = _c.isInPreviewMode, upgradingSubscription = _c.upgradingSubscription, setUpgradingSubscription = _c.setUpgradingSubscription, subscriptionUpgradeId = _c.subscriptionUpgradeId, setQuotePreviewData = _c.setQuotePreviewData, quotePreviewData = _c.quotePreviewData, className = _c.className;
21368
+ var apiHost = react.useContext(BunnyContext).apiHost;
21369
+ var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, upgradingSubscription = _b.upgradingSubscription, setUpgradingSubscription = _b.setUpgradingSubscription, subscriptionUpgradeId = _b.subscriptionUpgradeId, setQuotePreviewData = _b.setQuotePreviewData, quotePreviewData = _b.quotePreviewData, className = _b.className;
21354
21370
  // Local state
21355
- var _d = react.useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
21356
- var _e = react.useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
21357
- var _f = react.useState(false), isSticky = _f[0], setIsSticky = _f[1];
21371
+ var _c = react.useState(), editingQuoteData = _c[0], setEditingQuoteData = _c[1];
21372
+ var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
21373
+ var _e = react.useState(false), isSticky = _e[0], setIsSticky = _e[1];
21358
21374
  var stickyRef = react.useRef(null);
21359
21375
  // Hooks
21360
21376
  var queryClient = reactQuery.useQueryClient();
21361
21377
  var showSuccessNotification = common.useSuccessNotification();
21362
21378
  var showInfoNotification = common.useInfoNotification();
21363
21379
  var isMobile = common.useIsMobile();
21364
- var storedPaymentMethod = usePaymentMethod({
21365
- graphQLClient: graphQLClient,
21380
+ var defaultPaymentMethod = usePaymentMethod({
21366
21381
  token: token,
21367
- }).data;
21382
+ apiHost: apiHost,
21383
+ }).defaultPaymentMethod;
21368
21384
  // Queries
21369
- var _g = reactQuery.useQuery({
21385
+ var _f = reactQuery.useQuery({
21370
21386
  queryKey: common.QueryKeyFactory.default.createTableKey({
21371
21387
  pluralType: "subscriptions",
21372
21388
  token: token,
21373
21389
  }),
21374
21390
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
21375
21391
  enabled: false,
21376
- }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
21392
+ }), subscriptions = _f.data, subscriptionsAreLoading = _f.isLoading;
21377
21393
  var quote = reactQuery.useQuery({
21378
21394
  queryKey: common.QueryKeyFactory.default.createObjectKey({
21379
21395
  id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
@@ -21447,17 +21463,17 @@ var PlanManager = function (_a) {
21447
21463
  return showInfoNotification("You are in preview mode");
21448
21464
  setQuotePreviewData(undefined);
21449
21465
  onChangePlanCancel();
21450
- }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: storedPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "sticky bottom-4 transition-[margin] duration-300 ".concat(isSticky ? "mx-4" : "mx-0") }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
21466
+ }, 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: "sticky bottom-4 transition-[margin] duration-300 ".concat(isSticky ? "mx-4" : "mx-0") }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
21451
21467
  };
21452
21468
 
21453
21469
  var useCancelSubscription = function () {
21454
21470
  var graphQLRequest = useGraphQLRequest();
21455
- return function (subscriptionIds, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
21471
+ return function (subscriptionIds, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
21456
21472
  var data;
21457
21473
  var _a;
21458
21474
  return __generator(this, function (_b) {
21459
21475
  switch (_b.label) {
21460
- case 0: return [4 /*yield*/, graphQLRequest("\n mutation SubscriptionCancel($subscriptionIds: [ID!]!) {\n subscriptionCancel(ids: $subscriptionIds) {\n subscriptions {\n accountId\n state\n }\n }\n }", token, apiHost, { subscriptionIds: subscriptionIds })];
21476
+ case 0: return [4 /*yield*/, graphQLRequest("\n mutation SubscriptionCancel($subscriptionIds: [ID!]!) {\n subscriptionCancel(ids: $subscriptionIds) {\n subscriptions {\n accountId\n state\n }\n }\n }", apiHost, token, { subscriptionIds: subscriptionIds })];
21461
21477
  case 1:
21462
21478
  data = _b.sent();
21463
21479
  return [2 /*return*/, (_a = data === null || data === void 0 ? void 0 : data.subscriptions) === null || _a === void 0 ? void 0 : _a.nodes];
@@ -21657,7 +21673,7 @@ var SubscriptionCardActions = function (_a) {
21657
21673
  canShowSubscriptionActions(subscription) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [canShowCancelButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "p-0", type: "link" }, { children: "Cancel subscription" })) }))), canShowChangePlanButton && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL ? (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Upgrade" }))) : null;
21658
21674
  };
21659
21675
 
21660
- var Text$7 = antd.Typography.Text;
21676
+ var Text$8 = antd.Typography.Text;
21661
21677
  var getSubscriptionStatusText = function (subscription) {
21662
21678
  var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
21663
21679
  if (cancellationDate &&
@@ -21686,7 +21702,7 @@ var SubscriptionCardHeader = function (_a) {
21686
21702
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
21687
21703
  return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between", style: {
21688
21704
  backgroundColor: darkMode ? "var(--row-background-dark)" : "",
21689
- } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsxRuntime.jsx(Text$7, __assign({ className: "text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx(Text$7, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
21705
+ } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$8, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsxRuntime.jsx(Text$8, __assign({ className: "text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx(Text$8, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
21690
21706
  };
21691
21707
 
21692
21708
  var BillingPeriodConverter;
@@ -21711,7 +21727,7 @@ var SubscriptionChargeTotal = function (_a) {
21711
21727
  : "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
21712
21728
  };
21713
21729
 
21714
- var Text$6 = antd.Typography.Text;
21730
+ var Text$7 = antd.Typography.Text;
21715
21731
  var SubscriptionChargeUnitPrice = function (_a) {
21716
21732
  var charge = _a.charge, subscription = _a.subscription;
21717
21733
  var darkMode = react.useContext(BunnyContext).darkMode;
@@ -21734,23 +21750,23 @@ var SubscriptionChargeUnitPrice = function (_a) {
21734
21750
  }) })) })));
21735
21751
  }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsxRuntime.jsx("div", __assign({ className: "cursor-pointer underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "Hide tiers" : "Show tiers" })) })));
21736
21752
  else if (charge.chargeType === common.ChargeType.USAGE || charge.trial)
21737
- return jsxRuntime.jsx(Text$6, { children: "-" });
21753
+ return jsxRuntime.jsx(Text$7, { children: "-" });
21738
21754
  else if (isDiscount)
21739
21755
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["-", common.formatCurrency(charge.discountedPrice, subscription.currencyId)] }));
21740
21756
  else
21741
21757
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: common.formatCurrency(charge.discountedPrice, subscription.currencyId) }));
21742
21758
  };
21743
21759
 
21744
- var Text$5 = antd.Typography.Text;
21760
+ var Text$6 = antd.Typography.Text;
21745
21761
  var SubscriptionCardColumnHeaders = function (_a) {
21746
21762
  var columns = _a.columns;
21747
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(Text$5, __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
21763
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(Text$6, __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
21748
21764
  };
21749
21765
 
21750
- var Text$4 = antd.Typography.Text;
21766
+ var Text$5 = antd.Typography.Text;
21751
21767
  var SubscriptionsListCell = function (_a) {
21752
21768
  var children = _a.children, className = _a.className, gridColumn = _a.gridColumn, right = _a.right, style = _a.style;
21753
- return (jsxRuntime.jsx(Text$4, __assign({ className: "flex items-center text-sm whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
21769
+ return (jsxRuntime.jsx(Text$5, __assign({ className: "flex items-center text-sm whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
21754
21770
  };
21755
21771
 
21756
21772
  var CARD_COLUMNS = [
@@ -21838,10 +21854,10 @@ var SubscriptionCardDesktopRow = function (_a) {
21838
21854
  : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
21839
21855
  };
21840
21856
 
21841
- var Text$3 = antd.Typography.Text;
21857
+ var Text$4 = antd.Typography.Text;
21842
21858
  var SubscriptionCardCellMobile = function (_a) {
21843
21859
  var children = _a.children, className = _a.className, style = _a.style;
21844
- return (jsxRuntime.jsx(Text$3, __assign({ className: className, style: style }, { children: children })));
21860
+ return (jsxRuntime.jsx(Text$4, __assign({ className: className, style: style }, { children: children })));
21845
21861
  };
21846
21862
 
21847
21863
  var CHARGE_COLUMNS = [
@@ -21914,7 +21930,7 @@ var SubscriptionsListContainer = function (_a) {
21914
21930
  // Queries
21915
21931
  var _c = reactQuery.useQuery({
21916
21932
  queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
21917
- queryFn: function () { return getPriceListChangeOptions({ token: token, apiHost: apiHost }); },
21933
+ queryFn: function () { return getPriceListChangeOptions({ apiHost: apiHost, token: token }); },
21918
21934
  enabled: Boolean(onChangePlanClick),
21919
21935
  }), priceListChangeOptions = _c.data, arePriceListChangeOptionsLoading = _c.isLoading;
21920
21936
  if (subscriptionsAreLoading ||
@@ -21923,13 +21939,21 @@ var SubscriptionsListContainer = function (_a) {
21923
21939
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink overflow-auto") }, { children: jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions }) }))) : (noSubscriptionsComponent || (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) }));
21924
21940
  };
21925
21941
 
21942
+ var Text$3 = antd.Typography.Text;
21943
+ var DrawerHeader = function (_a) {
21944
+ var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
21945
+ return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx(Text$3, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
21946
+ };
21947
+
21926
21948
  var QUOTE_CHARGE_CREATE = "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n quoteChargeCreate(\n endDate: $endDate\n price: $price\n priceListChargeId: $priceListChargeId\n quantity: $quantity\n quoteChangeId: $quoteChangeId\n startDate: $startDate\n subscriptionChargeId: $subscriptionChargeId\n ) {\n quoteCharge {\n quoteChange {\n id\n quoteId\n }\n }\n }\n}\n\n";
21927
21949
  var quoteChargeCreate = function (_a) {
21928
- var endDate = _a.endDate, price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
21950
+ var
21951
+ // endDate,
21952
+ price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
21929
21953
  return common.gqlRequest({
21930
21954
  query: QUOTE_CHARGE_CREATE,
21931
21955
  vars: {
21932
- endDate: endDate,
21956
+ // endDate,
21933
21957
  price: price,
21934
21958
  priceListChargeId: priceListChargeId,
21935
21959
  quantity: quantity,
@@ -21962,14 +21986,17 @@ var QuantityInput = function (_a) {
21962
21986
  (updatingChargeQuantityId && updatingChargeQuantityId !== charge.id) ||
21963
21987
  // If the subscription is not self-service, we disable the quantity input
21964
21988
  !charge.selfServiceQuantity;
21965
- var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined ? "" : editedSubscription.quantity;
21989
+ var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined
21990
+ ? ""
21991
+ : editedSubscription.quantity;
21966
21992
  // Mutations
21967
21993
  var createCharge = reactQuery.useMutation({
21968
21994
  mutationFn: quoteChargeCreate,
21969
21995
  onSuccess: function (response) {
21970
21996
  var _a, _b, _c, _d, _e, _f, _g, _h;
21971
21997
  if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
21972
- var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
21998
+ var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
21999
+ common.SubscriptionState.TRIAL;
21973
22000
  setEditingQuoteData({
21974
22001
  id: (_e = (_d = (_c = response.quoteChargeCreate) === null || _c === void 0 ? void 0 : _c.quoteCharge) === null || _d === void 0 ? void 0 : _d.quoteChange) === null || _e === void 0 ? void 0 : _e.quoteId,
21975
22002
  isTrial: isTrial,
@@ -21986,17 +22013,19 @@ var QuantityInput = function (_a) {
21986
22013
  }).mutate;
21987
22014
  var createQuote = reactQuery.useMutation({
21988
22015
  mutationFn: function (subscriptionIds) {
21989
- return createSubscriptionQuote(subscriptionIds, token, apiHost);
22016
+ return createSubscriptionQuote(subscriptionIds, apiHost, token);
21990
22017
  },
21991
22018
  onSuccess: function (subscriptionUpdateData) {
21992
22019
  var _a, _b;
21993
22020
  var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
21994
- var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
22021
+ var quoteChange = quote.quoteChanges.find(function (quoteChange) {
22022
+ return quoteChange.priceList.id ===
22023
+ (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id);
22024
+ });
21995
22025
  var subscriptionCharge = (_b = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.subscription) === null || _b === void 0 ? void 0 : _b.charges.find(function (charge) { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.chargeId); });
21996
22026
  if (subscriptionCharge && quoteChange && editedSubscription) {
21997
22027
  createCharge({
21998
22028
  apiHost: apiHost,
21999
- endDate: subscriptionCharge.endDate,
22000
22029
  quantity: editedSubscription.quantity,
22001
22030
  quoteChangeId: quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id,
22002
22031
  startDate: subscriptionCharge.startDate,
@@ -22009,12 +22038,13 @@ var QuantityInput = function (_a) {
22009
22038
  var updateQuote = reactQuery.useMutation({
22010
22039
  mutationFn: function (_a) {
22011
22040
  var charges = _a.charges, quoteChangeId = _a.quoteChangeId;
22012
- return quoteChangeUpdate(charges, quoteChangeId, token, apiHost);
22041
+ return quoteChangeUpdate(charges, quoteChangeId, apiHost, token);
22013
22042
  },
22014
22043
  onSuccess: function (response) {
22015
22044
  var _a, _b, _c, _d, _e, _f;
22016
22045
  if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
22017
- var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
22046
+ var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
22047
+ common.SubscriptionState.TRIAL;
22018
22048
  setEditingQuoteData({
22019
22049
  id: (_d = (_c = response.quoteChangeUpdate) === null || _c === void 0 ? void 0 : _c.quoteChange) === null || _d === void 0 ? void 0 : _d.quoteId,
22020
22050
  isTrial: isTrial,
@@ -22031,7 +22061,8 @@ var QuantityInput = function (_a) {
22031
22061
  });
22032
22062
  // Handlers
22033
22063
  var isQuantityLowerThanOriginal = function (quantity) {
22034
- return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined && editedSubscription.quantity <= quantity;
22064
+ return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined &&
22065
+ editedSubscription.quantity <= quantity;
22035
22066
  };
22036
22067
  var onChangeQuantity = function (chargeIndex, value, priceListChargeId, subscription, subscriptionIndex) {
22037
22068
  var quantity = isNaN(parseInt(value)) ? 0 : parseInt(value);
@@ -22194,7 +22225,10 @@ var QuantityChangeDrawerDesktop = function (_a) {
22194
22225
  var _a;
22195
22226
  var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
22196
22227
  return (jsxRuntime.jsx("div", __assign({ className: "contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
22197
- if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
22228
+ var _a;
22229
+ if ((isTrial && !charge.trial) ||
22230
+ (!isTrial && charge.trial) ||
22231
+ ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === "USAGE")
22198
22232
  return null;
22199
22233
  return (jsxRuntime.jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions }, chargeIndex));
22200
22234
  }) }), index));
@@ -22269,7 +22303,7 @@ var Subscriptions = function (_a) {
22269
22303
  var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, noSubscriptionsComponent = _a.noSubscriptionsComponent, hideTitle = _a.hideTitle;
22270
22304
  // Context
22271
22305
  var token = useToken();
22272
- var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
22306
+ var _b = react.useContext(BunnyContext), apiHost = _b.apiHost; _b.graphQLClient;
22273
22307
  var _c = react.useContext(SubscriptionsContext), setUpgradingSubscription = _c.setUpgradingSubscription, updatingChargeQuantityId = _c.updatingChargeQuantityId, setUpdatingChargeQuantityId = _c.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _c.setSubscriptionUpgradeId, className = _c.className, isInPreviewMode = _c.isInPreviewMode;
22274
22308
  // Local state
22275
22309
  var _d = react.useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
@@ -22283,10 +22317,10 @@ var Subscriptions = function (_a) {
22283
22317
  var showSuccessNotification = common.useSuccessNotification();
22284
22318
  var quoteDelete = useQuoteDelete();
22285
22319
  var isMobile = common.useIsMobile();
22286
- var storedPaymentMethod = usePaymentMethod({
22287
- graphQLClient: graphQLClient,
22320
+ var defaultPaymentMethod = usePaymentMethod({
22288
22321
  token: token,
22289
- }).data;
22322
+ apiHost: apiHost,
22323
+ }).defaultPaymentMethod;
22290
22324
  var cancelSubscription = useCancelSubscription();
22291
22325
  // Queries
22292
22326
  var quote = reactQuery.useQuery({
@@ -22312,7 +22346,7 @@ var Subscriptions = function (_a) {
22312
22346
  // Mutations
22313
22347
  var subscriptionCancel = reactQuery.useMutation({
22314
22348
  mutationFn: function (subscription) {
22315
- return cancelSubscription([subscription.id], token, apiHost);
22349
+ return cancelSubscription([subscription.id], apiHost, token);
22316
22350
  },
22317
22351
  onSuccess: function () {
22318
22352
  queryClient.invalidateQueries({
@@ -22363,7 +22397,7 @@ var Subscriptions = function (_a) {
22363
22397
  };
22364
22398
  var onClose = function () {
22365
22399
  if (editingQuoteData) {
22366
- quoteDelete(editingQuoteData.id, token, apiHost);
22400
+ quoteDelete(editingQuoteData.id, apiHost, token);
22367
22401
  setEditingQuoteData(undefined);
22368
22402
  }
22369
22403
  if (updatingChargeQuantityId) {
@@ -22394,7 +22428,7 @@ var Subscriptions = function (_a) {
22394
22428
  setIsChangingPlan(false);
22395
22429
  }, handlePortalErrors: handlePortalErrors }));
22396
22430
  }
22397
- return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: "Subscriptions" }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsxs(Text$1, __assign({ className: "flex items-center justify-between", style: { minWidth: "137px" } }, { children: [hideExpired ? "Active subscriptions" : "All subscriptions", isMobile && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, visible: expiredSwitchVisible }))] })) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: 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: "pt-4 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: storedPaymentMethod })] })));
22431
+ return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: "Subscriptions" }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsxs(Text$1, __assign({ className: "flex items-center justify-between", style: { minWidth: "137px" } }, { children: [hideExpired ? "Active subscriptions" : "All subscriptions", isMobile && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, visible: expiredSwitchVisible }))] })) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: 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: "pt-4 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 })] })));
22398
22432
  };
22399
22433
  var PageHeaderWithActions = function (_a) {
22400
22434
  var children = _a.children, title = _a.title;
@@ -22434,6 +22468,33 @@ var billingDetailsUpdate = function (_a) {
22434
22468
  });
22435
22469
  };
22436
22470
 
22471
+ // TODO: move this to common
22472
+ var billingDetailsQuery = function () {
22473
+ return "\nquery BillingDetails {\n billingDetails {\n billingCity\n billingContact {\n email\n }\n billingCountry\n billingState\n billingStreet\n billingZip\n name\n taxNumber\n currency {\n id\n }\n }\n}";
22474
+ };
22475
+ var getBillingDetails = function (_a) {
22476
+ var token = _a.token, apiHost = _a.apiHost;
22477
+ return __awaiter(void 0, void 0, void 0, function () {
22478
+ var response;
22479
+ var _b;
22480
+ return __generator(this, function (_c) {
22481
+ switch (_c.label) {
22482
+ case 0: return [4 /*yield*/, common.gqlRequest({
22483
+ query: billingDetailsQuery(),
22484
+ token: token,
22485
+ apiHost: apiHost,
22486
+ })];
22487
+ case 1:
22488
+ response = _c.sent();
22489
+ if (response === null || response === void 0 ? void 0 : response.errors) {
22490
+ throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
22491
+ }
22492
+ return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
22493
+ }
22494
+ });
22495
+ });
22496
+ };
22497
+
22437
22498
  var Text = antd.Typography.Text;
22438
22499
  function BillingDetailsSection(_a) {
22439
22500
  var _this = this;
@@ -22617,14 +22678,14 @@ var ResponsiveDivider = function () {
22617
22678
  var PaymentFormSection = function (_a) {
22618
22679
  var hideBillingDetailsForm = _a.hideBillingDetailsForm;
22619
22680
  var isMobile = common.useIsMobile();
22620
- var _b = react.useContext(BunnyContext), onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
22681
+ var onTokenExpired = react.useContext(BunnyContext).onTokenExpired;
22621
22682
  var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
22622
22683
  var showSuccessNotification = common.useSuccessNotification();
22623
22684
  return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? "w-full" : "w-1/2 pt-4", " flex justify-center") }, { children: jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
22624
22685
  handleAllErrorFormats(error);
22625
22686
  }, onSavePaymentMethod: function () {
22626
22687
  showSuccessNotification("Your payment method has been saved");
22627
- }, graphQLClient: graphQLClient }) })));
22688
+ } }) })));
22628
22689
  };
22629
22690
 
22630
22691
  exports.BillingDetails = BillingDetails;
@@ -22632,7 +22693,6 @@ exports.BunnyProvider = BunnyProvider;
22632
22693
  exports.Footer = Footer;
22633
22694
  exports.Invoice = Invoice;
22634
22695
  exports.PaymentForm = PaymentForm;
22635
- exports.PaymentMethod = PaymentMethod;
22636
22696
  exports.Quote = Quote;
22637
22697
  exports.Quotes = Quotes;
22638
22698
  exports.Signup = Signup;