@bunnyapp/components 1.3.0-beta.4 → 1.3.0-beta.5

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 (116) hide show
  1. package/dist/cjs/index.js +1342 -911
  2. package/dist/cjs/src/components/BillingDetails/BillingDetails.d.ts +1 -1
  3. package/dist/cjs/src/components/PaymentForm/DemoPay/demoPayUtils.d.ts +2 -2
  4. package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +2 -3
  5. package/dist/cjs/src/components/PaymentForm/PaymentMethodDetails.d.ts +1 -1
  6. package/dist/cjs/src/components/PlanManagerQuoteProvider.d.ts +19 -0
  7. package/dist/cjs/src/components/QuotePreviewProvider.d.ts +0 -2
  8. package/dist/cjs/src/components/Subscriptions/AddonIndentation.d.ts +8 -0
  9. package/dist/cjs/src/components/Subscriptions/AddonSubscriptionCards.d.ts +7 -0
  10. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +3 -3
  11. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +2 -3
  12. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutButton.d.ts +2 -1
  13. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +1 -2
  14. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +2 -1
  15. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanAddonsCard.d.ts +11 -0
  16. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +4 -3
  17. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +3 -3
  18. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +1 -2
  19. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +2 -3
  20. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +3 -2
  21. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +2 -2
  22. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +2 -1
  23. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardTitle.d.ts +1 -1
  24. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +1 -3
  25. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/{PriceListSelector.d.ts → priceListSelector/PriceListSelector.d.ts} +1 -2
  26. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelectorContext.d.ts +9 -0
  27. package/dist/cjs/src/components/Subscriptions/QuotePreviewData.d.ts +6 -0
  28. package/dist/cjs/src/components/Subscriptions/SubscriptionRequests.d.ts +0 -1
  29. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +2 -2
  30. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts +1 -1
  31. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +2 -1
  32. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +2 -1
  33. package/dist/cjs/src/components/TaxationForm.d.ts +2 -2
  34. package/dist/cjs/src/graphql/QuoteRequests.d.ts +17 -1
  35. package/dist/cjs/src/graphql/mutations/quoteAddonCreate.d.ts +7 -0
  36. package/dist/cjs/src/graphql/mutations/quoteChangeCreate.d.ts +8 -0
  37. package/dist/cjs/src/graphql/mutations/quoteChangeDelete.d.ts +6 -0
  38. package/dist/cjs/src/graphql/mutations/quoteChargeDelete.d.ts +2 -1
  39. package/dist/cjs/src/graphql/mutations/quoteCompose.d.ts +0 -1
  40. package/dist/cjs/src/graphql/mutations/quoteCreate.d.ts +8 -0
  41. package/dist/cjs/src/graphql/mutations/quoteCreateWithDeal.d.ts +10 -0
  42. package/dist/cjs/src/graphql/mutations/subscriptionTrialConvert.d.ts +7 -0
  43. package/dist/cjs/src/graphql/queries/getCurrentUserData.d.ts +13 -0
  44. package/dist/cjs/src/graphql/queries/getFeatureUsage.d.ts +1 -4
  45. package/dist/cjs/src/graphql/queries/getFormattedQuote.d.ts +2 -4
  46. package/dist/cjs/src/graphql/queries/getPriceListChangeOptions.d.ts +2 -1
  47. package/dist/cjs/src/graphql/queries/getQuote.d.ts +3 -1
  48. package/dist/cjs/src/hooks/quotes/useQuoteCreate.d.ts +12 -0
  49. package/dist/cjs/src/hooks/quotes/useQuoteUpdateFeatureAddon.d.ts +2 -3
  50. package/dist/cjs/src/hooks/useCurrentUserData.d.ts +10 -1
  51. package/dist/cjs/src/hooks/usePaymentPlugins.d.ts +2 -2
  52. package/dist/cjs/src/hooks/useToggleAddonQuoteChange.d.ts +7 -0
  53. package/dist/cjs/src/mocks/handlers.d.ts +1 -1
  54. package/dist/cjs/src/utils/addonPlanUtils.d.ts +4 -0
  55. package/dist/cjs/src/utils/couponUtils.d.ts +2 -0
  56. package/dist/esm/index.js +1343 -912
  57. package/dist/esm/src/components/BillingDetails/BillingDetails.d.ts +1 -1
  58. package/dist/esm/src/components/PaymentForm/DemoPay/demoPayUtils.d.ts +2 -2
  59. package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +2 -3
  60. package/dist/esm/src/components/PaymentForm/PaymentMethodDetails.d.ts +1 -1
  61. package/dist/esm/src/components/PlanManagerQuoteProvider.d.ts +19 -0
  62. package/dist/esm/src/components/QuotePreviewProvider.d.ts +0 -2
  63. package/dist/esm/src/components/Subscriptions/AddonIndentation.d.ts +8 -0
  64. package/dist/esm/src/components/Subscriptions/AddonSubscriptionCards.d.ts +7 -0
  65. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +3 -3
  66. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +2 -3
  67. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutButton.d.ts +2 -1
  68. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +1 -2
  69. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +2 -1
  70. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanAddonsCard.d.ts +11 -0
  71. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +4 -3
  72. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +3 -3
  73. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +1 -2
  74. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +2 -3
  75. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +3 -2
  76. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +2 -2
  77. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +2 -1
  78. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardTitle.d.ts +1 -1
  79. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +1 -3
  80. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/{PriceListSelector.d.ts → priceListSelector/PriceListSelector.d.ts} +1 -2
  81. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelectorContext.d.ts +9 -0
  82. package/dist/esm/src/components/Subscriptions/QuotePreviewData.d.ts +6 -0
  83. package/dist/esm/src/components/Subscriptions/SubscriptionRequests.d.ts +0 -1
  84. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +2 -2
  85. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts +1 -1
  86. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +2 -1
  87. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +2 -1
  88. package/dist/esm/src/components/TaxationForm.d.ts +2 -2
  89. package/dist/esm/src/graphql/QuoteRequests.d.ts +17 -1
  90. package/dist/esm/src/graphql/mutations/quoteAddonCreate.d.ts +7 -0
  91. package/dist/esm/src/graphql/mutations/quoteChangeCreate.d.ts +8 -0
  92. package/dist/esm/src/graphql/mutations/quoteChangeDelete.d.ts +6 -0
  93. package/dist/esm/src/graphql/mutations/quoteChargeDelete.d.ts +2 -1
  94. package/dist/esm/src/graphql/mutations/quoteCompose.d.ts +0 -1
  95. package/dist/esm/src/graphql/mutations/quoteCreate.d.ts +8 -0
  96. package/dist/esm/src/graphql/mutations/quoteCreateWithDeal.d.ts +10 -0
  97. package/dist/esm/src/graphql/mutations/subscriptionTrialConvert.d.ts +7 -0
  98. package/dist/esm/src/graphql/queries/getCurrentUserData.d.ts +13 -0
  99. package/dist/esm/src/graphql/queries/getFeatureUsage.d.ts +1 -4
  100. package/dist/esm/src/graphql/queries/getFormattedQuote.d.ts +2 -4
  101. package/dist/esm/src/graphql/queries/getPriceListChangeOptions.d.ts +2 -1
  102. package/dist/esm/src/graphql/queries/getQuote.d.ts +3 -1
  103. package/dist/esm/src/hooks/quotes/useQuoteCreate.d.ts +12 -0
  104. package/dist/esm/src/hooks/quotes/useQuoteUpdateFeatureAddon.d.ts +2 -3
  105. package/dist/esm/src/hooks/useCurrentUserData.d.ts +10 -1
  106. package/dist/esm/src/hooks/usePaymentPlugins.d.ts +2 -2
  107. package/dist/esm/src/hooks/useToggleAddonQuoteChange.d.ts +7 -0
  108. package/dist/esm/src/mocks/handlers.d.ts +1 -1
  109. package/dist/esm/src/utils/addonPlanUtils.d.ts +4 -0
  110. package/dist/esm/src/utils/couponUtils.d.ts +2 -0
  111. package/dist/index.d.ts +3 -4
  112. package/package.json +1 -1
  113. package/dist/cjs/src/components/UpgradeFromTrial.d.ts +0 -6
  114. package/dist/esm/src/components/UpgradeFromTrial.d.ts +0 -6
  115. /package/dist/cjs/src/components/icons/{iDeal.d.ts → IDeal.d.ts} +0 -0
  116. /package/dist/esm/src/components/icons/{iDeal.d.ts → IDeal.d.ts} +0 -0
package/dist/esm/index.js CHANGED
@@ -4,7 +4,7 @@ import { Markup } from 'interweave';
4
4
  import { ConfigProvider, Spin, Button, Tag, Typography, Dropdown, Input, Modal, Checkbox, Skeleton, Collapse, Form, Tooltip, Drawer, Card as Card$1, Divider, Select, Image, Radio, Space, Switch, Popconfirm, Table } from 'antd';
5
5
  import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CheckCircleFilled, CloseOutlined, ArrowLeftOutlined, InfoCircleOutlined } from '@ant-design/icons';
6
6
  import styled from 'styled-components';
7
- import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, createClientDevHeaders, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory, useIsMobile, isColorTooDark, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, request as request$1, useErrorNotification, invokePlugin, useAllErrorFormats, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR, Lists, sortSubscriptionCharges, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, MODAL_MAX_HEIGHT, DataInterval, QuoteChangeKind, TAG_COLORS } from '@bunnyapp/common';
7
+ import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, createClientDevHeaders, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory, useIsMobile, isColorTooDark, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, request as request$1, useErrorNotification, invokePlugin, useAllErrorFormats, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR, SubscriptionState as SubscriptionState$2, QuoteChangeKind, Lists, sortSubscriptionCharges, getAccount, StringUtils, BillingPeriod, PricingModel, ChargeType, PERIOD_LABELS, PricingStyle, SLATE_100, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS } from '@bunnyapp/common';
8
8
  import { QueryClient, QueryClientProvider, useQuery, useQueryClient, useMutation, keepPreviousData } from '@tanstack/react-query';
9
9
  import theme from 'antd/lib/theme/index.js';
10
10
  import { RecoilRoot } from 'recoil';
@@ -45,7 +45,7 @@ function styleInject(css, ref) {
45
45
  }
46
46
  }
47
47
 
48
- var css_248z = ":root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n box-sizing: border-box;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n position: fixed;\n}\n.bunny-absolute {\n position: absolute;\n}\n.bunny-relative {\n position: relative;\n}\n.bunny-sticky {\n position: sticky;\n}\n.bunny-bottom-0 {\n bottom: 0px;\n}\n.bunny-bottom-4 {\n bottom: 1rem;\n}\n.bunny-left-0 {\n left: 0px;\n}\n.bunny-right-0 {\n right: 0px;\n}\n.bunny-top-0 {\n top: 0px;\n}\n.bunny-col-span-1 {\n grid-column: span 1 / span 1;\n}\n.bunny-col-span-full {\n grid-column: 1 / -1;\n}\n.bunny-m-0 {\n margin: 0px;\n}\n.bunny-mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.bunny-mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n margin-top: 6rem;\n margin-bottom: 6rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n margin-top: 6rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-1\\/2 {\n height: 50%;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-h-screen {\n height: 100vh;\n}\n.bunny-max-h-\\[calc\\(100vh-10rem\\)\\] {\n max-height: calc(100vh - 10rem);\n}\n.bunny-min-h-0 {\n min-height: 0px;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-3\\/5 {\n width: 60%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-w-screen {\n width: 100vw;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-flex-wrap {\n flex-wrap: wrap;\n}\n.bunny-items-start {\n align-items: flex-start;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-overflow-y-auto {\n overflow-y: auto;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-12 {\n padding-left: 3rem;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pr-4 {\n padding-right: 1rem;\n}\n.bunny-pt-1 {\n padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.hover\\:bunny-text-orange-400:hover {\n --tw-text-opacity: 1;\n color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n margin: 0 !important;\n}\n.bunny-components .ant-upload {\n border-radius: 0.5rem !important;\n}\n.bunny-components .ant-checkbox-inner {\n border-color: #cccccc;\n}\n.bunny-components .ant-row {\n margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n font-size: 0.875rem !important;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n border: none !important;\n}\n.bunny-components .ant-form-item {\n margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n text-transform: none !important;\n font-size: 0.75rem;\n padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n width: 100%;\n color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n font-size: 11px;\n min-height: 11px;\n line-height: 11px;\n padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n font-size: smaller;\n}\n.bunny-components .ant-tree {\n font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-page-header {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n}\n.bunny-components .ant-tag {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 14px;\n font-weight: 500;\n white-space: nowrap;\n padding-inline-start: 0.625rem;\n padding-inline-end: 0.625rem;\n margin: 0;\n}\n.bunny-components .ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n color: #6b7280 !important;\n background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.bunny-components .ant-picker {\n width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n background: #f8fafc;\n}\n.bunny-components .vista-link {\n color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n text-decoration: underline;\n cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n padding: 0;\n text-align: center;\n font-size: 0.875rem !important;\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n display: flex !important;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n background: #eef0f2 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n border: none;\n}\n.bunny-components .ant-btn {\n box-shadow: none;\n text-shadow: none;\n outline: none !important;\n line-height: 1;\n font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n color: #94a3b8;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n background-color: rgba(113, 125, 148, 0.1) !important;\n border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n display: flex !important;\n align-items: center;\n}\n.bunny-components .ant-select-item {\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n display: flex;\n align-items: center;\n white-space: nowrap !important;\n overflow: visible !important;\n text-overflow: default !important;\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n display: none;\n}\n.bunny-components .ant-layout-header {\n height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n width: inherit;\n position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n gap: 4px !important;\n}\n.bunny-components .group {\n display: flex;\n flex-direction: row;\n flex-flow: row wrap;\n box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n top: 96px !important;\n animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n color: #ffffff;\n background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n border-color: #ff5833 !important;\n background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n border-bottom: 2px solid transparent !important;\n padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n display: none !important;\n}\n.bunny-components .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n border-radius: 8px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n font-size: 14px !important;\n overflow-wrap: break-word;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff5833 !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
48
+ var css_248z = ":root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n box-sizing: border-box;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n position: fixed;\n}\n.bunny-absolute {\n position: absolute;\n}\n.bunny-relative {\n position: relative;\n}\n.bunny-sticky {\n position: sticky;\n}\n.bunny-bottom-0 {\n bottom: 0px;\n}\n.bunny-bottom-4 {\n bottom: 1rem;\n}\n.bunny-left-0 {\n left: 0px;\n}\n.bunny-right-0 {\n right: 0px;\n}\n.bunny-top-0 {\n top: 0px;\n}\n.bunny-col-span-1 {\n grid-column: span 1 / span 1;\n}\n.bunny-col-span-full {\n grid-column: 1 / -1;\n}\n.bunny-m-0 {\n margin: 0px;\n}\n.bunny-mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.bunny-mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.bunny-mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n margin-top: 6rem;\n margin-bottom: 6rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-ml-auto {\n margin-left: auto;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n margin-top: 6rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-0\\.5 {\n height: 0.125rem;\n}\n.bunny-h-1\\/2 {\n height: 50%;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-h-screen {\n height: 100vh;\n}\n.bunny-max-h-\\[calc\\(100vh-10rem\\)\\] {\n max-height: calc(100vh - 10rem);\n}\n.bunny-min-h-0 {\n min-height: 0px;\n}\n.bunny-w-0\\.5 {\n width: 0.125rem;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-3\\/5 {\n width: 60%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-w-screen {\n width: 100vw;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-flex-wrap {\n flex-wrap: wrap;\n}\n.bunny-items-start {\n align-items: flex-start;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-overflow-y-auto {\n overflow-y: auto;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-gray-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-12 {\n padding-left: 3rem;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pr-4 {\n padding-right: 1rem;\n}\n.bunny-pt-1 {\n padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.hover\\:bunny-text-orange-400:hover {\n --tw-text-opacity: 1;\n color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n margin: 0 !important;\n}\n.bunny-components .ant-upload {\n border-radius: 0.5rem !important;\n}\n.bunny-components .ant-checkbox-inner {\n border-color: #cccccc;\n}\n.bunny-components .ant-row {\n margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n font-size: 0.875rem !important;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n border: none !important;\n}\n.bunny-components .ant-form-item {\n margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n text-transform: none !important;\n font-size: 0.75rem;\n padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n width: 100%;\n color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n font-size: 11px;\n min-height: 11px;\n line-height: 11px;\n padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n font-size: smaller;\n}\n.bunny-components .ant-tree {\n font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-page-header {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n}\n.bunny-components .ant-tag {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 14px;\n font-weight: 500;\n white-space: nowrap;\n padding-inline-start: 0.625rem;\n padding-inline-end: 0.625rem;\n margin: 0;\n}\n.bunny-components .ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n color: #6b7280 !important;\n background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.bunny-components .ant-picker {\n width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n background: #f8fafc;\n}\n.bunny-components .vista-link {\n color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n text-decoration: underline;\n cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n padding: 0;\n text-align: center;\n font-size: 0.875rem !important;\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n display: flex !important;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n background: #eef0f2 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n border: none;\n}\n.bunny-components .ant-btn {\n box-shadow: none;\n text-shadow: none;\n outline: none !important;\n line-height: 1;\n font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n color: #94a3b8;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n background-color: rgba(113, 125, 148, 0.1) !important;\n border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n display: flex !important;\n align-items: center;\n}\n.bunny-components .ant-select-item {\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n display: flex;\n align-items: center;\n white-space: nowrap !important;\n overflow: visible !important;\n text-overflow: default !important;\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n display: none;\n}\n.bunny-components .ant-layout-header {\n height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n width: inherit;\n position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n gap: 4px !important;\n}\n.bunny-components .group {\n display: flex;\n flex-direction: row;\n flex-flow: row wrap;\n box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n top: 96px !important;\n animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n color: #ffffff;\n background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n border-color: #ff5833 !important;\n background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n border-bottom: 2px solid transparent !important;\n padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n display: none !important;\n}\n.bunny-components .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n border-radius: 8px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n font-size: 14px !important;\n overflow-wrap: break-word;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff5833 !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
49
49
  styleInject(css_248z);
50
50
 
51
51
  /******************************************************************************
@@ -143,7 +143,7 @@ var BrandContext = createContext({
143
143
  });
144
144
 
145
145
  // This will be replaced at build time by rollup-plugin-replace
146
- var PACKAGE_VERSION = '1.0.76-beta.15';
146
+ var PACKAGE_VERSION = '1.3.0-beta.4';
147
147
  var createRequestHeaders = function (token) {
148
148
  var headers = createClientDevHeaders(token);
149
149
  // Add the components version header
@@ -419,6 +419,7 @@ var DocumentTemplatePreview = function (_a) {
419
419
  URL.revokeObjectURL(url_1);
420
420
  };
421
421
  }
422
+ return undefined;
422
423
  }, [data]);
423
424
  if (isLoading) {
424
425
  return (jsx("div", __assign({ className: "flex items-center justify-center h-96" }, { children: jsx(Spin, {}) })));
@@ -490,6 +491,7 @@ function LegacyDocument(_a) {
490
491
  setPdfUrl(url_1);
491
492
  return function () { return URL.revokeObjectURL(url_1); };
492
493
  }
494
+ return undefined;
493
495
  }, [pdfBlob]);
494
496
  if (isLoading || !pdfUrl)
495
497
  return jsx(Fragment, {});
@@ -536,7 +538,7 @@ var checkout = function (_a) {
536
538
  });
537
539
  };
538
540
 
539
- var paymentMethodsQuery = function (filter) { return "query paymentMethods {\n paymentMethods ".concat(filter ? "(".concat(filter, ")") : '', " {\n nodes {\n id\n pluginId\n accountId\n expirationDate\n plugin {\n guid\n id\n }\n state\n metadata {\n issuer\n identifier\n kind\n description\n icon\n type\n }\n isDefault\n }\n }\n}"); };
541
+ var paymentMethodsQuery = function () { return "query PaymentMethods($accountId: ID) {\n paymentMethods (accountId: $accountId) {\n nodes {\n id\n pluginId\n accountId\n expirationDate\n plugin {\n guid\n id\n }\n state\n metadata {\n issuer\n identifier\n kind\n description\n icon\n type\n }\n isDefault\n }\n }\n}"; };
540
542
  var getPaymentMethods = function (_a) {
541
543
  var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
542
544
  return __awaiter(void 0, void 0, void 0, function () {
@@ -545,9 +547,10 @@ var getPaymentMethods = function (_a) {
545
547
  return __generator(this, function (_c) {
546
548
  switch (_c.label) {
547
549
  case 0: return [4 /*yield*/, gqlRequest({
548
- query: paymentMethodsQuery(accountId ? "filter: \"accountId is ".concat(accountId, "\"") : ''),
550
+ query: paymentMethodsQuery(),
549
551
  token: token,
550
552
  apiHost: apiHost,
553
+ vars: { accountId: accountId },
551
554
  })];
552
555
  case 1:
553
556
  response = _c.sent();
@@ -575,20 +578,11 @@ var usePaymentMethod = function (_a) {
575
578
  };
576
579
 
577
580
  var filterPaymentPlugins = function (plugins) {
578
- return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) { var _a, _b; return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'payment' && ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'valid'; }).filter(function (plugin) { return plugin.name !== 'Manual Payment'; });
579
- };
580
- var filterPaymentPluginsByEntity = function (plugins, selectedEntityId) {
581
- return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
582
- var _a, _b;
583
- return selectedEntityId === undefined ||
584
- selectedEntityId === null ||
585
- ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(selectedEntityId)) ||
586
- ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0;
587
- });
581
+ return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) { var _a, _b; return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'payment' && ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'valid'; });
588
582
  };
589
- var MUTATION$9 = "{\n paymentPlugins {\n enabled\n entities\n guid\n hidden\n id\n name\n status\n type\n webhookEnabled\n components\n }\n}";
583
+ var MUTATION$9 = "query PaymentPlugins($accountId: ID) {\n paymentPlugins (accountId: $accountId) {\n enabled\n entities\n guid\n hidden\n id\n name\n status\n type\n webhookEnabled\n components\n }\n}";
590
584
  var getPaymentPlugins = function (_a) {
591
- var apiHost = _a.apiHost, token = _a.token;
585
+ var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
592
586
  return __awaiter(void 0, void 0, void 0, function () {
593
587
  var response;
594
588
  return __generator(this, function (_b) {
@@ -599,6 +593,7 @@ var getPaymentPlugins = function (_a) {
599
593
  query: MUTATION$9,
600
594
  token: token,
601
595
  apiHost: apiHost,
596
+ vars: { accountId: accountId },
602
597
  })];
603
598
  case 1:
604
599
  response = _b.sent();
@@ -612,18 +607,15 @@ var getPaymentPlugins = function (_a) {
612
607
  });
613
608
  };
614
609
  var usePaymentPlugins = function (_a) {
615
- var apiHost = _a.apiHost, token = _a.token, selectedEntityId = _a.selectedEntityId;
610
+ var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
616
611
  var _b = useQuery({
617
612
  queryKey: ['paymentPlugins', token],
618
- queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token }); },
613
+ queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token, accountId: accountId }); },
619
614
  staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
620
615
  }), paymentPlugins = _b.data, isFetched = _b.isFetched;
621
616
  var filteredPaymentPlugins = filterPaymentPlugins(paymentPlugins);
622
- var filteredPaymentPluginsByEntity = selectedEntityId
623
- ? filterPaymentPluginsByEntity(filteredPaymentPlugins, selectedEntityId)
624
- : filteredPaymentPlugins;
625
617
  return {
626
- paymentPlugins: filteredPaymentPluginsByEntity,
618
+ paymentPlugins: filteredPaymentPlugins,
627
619
  isFetched: isFetched,
628
620
  };
629
621
  };
@@ -18402,7 +18394,7 @@ var Bancontact = function (_a) {
18402
18394
  return (jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.2243 35.1715C18.2243 34.882 18.156 34.6314 18.0199 34.4199C17.8835 34.2083 17.7043 34.0468 17.4819 33.9355C17.7043 33.8242 17.8766 33.6597 17.9991 33.4426C18.1214 33.2255 18.1825 32.9806 18.1825 32.7078V32.5575C18.1825 32.2233 18.1186 31.9451 17.9908 31.7223C17.8628 31.4996 17.6833 31.3213 17.4526 31.1878C17.2219 31.0541 16.9451 30.9582 16.6227 30.8995C16.3 30.8411 15.9414 30.812 15.5465 30.812C15.4131 30.812 15.274 30.8147 15.1296 30.8203C14.9848 30.8258 14.8445 30.8328 14.7083 30.8411C14.572 30.8494 14.4468 30.8593 14.3329 30.8704C14.2188 30.8817 14.1256 30.8928 14.0534 30.9037C13.8921 30.9318 13.7781 30.9817 13.7114 31.0541C13.6448 31.1266 13.6113 31.2575 13.6113 31.4467V36.5245C13.6113 36.7139 13.646 36.8447 13.7156 36.917C13.7851 36.9895 13.9032 37.0394 14.0702 37.0673C14.1535 37.084 14.2536 37.0979 14.3704 37.1091C14.4871 37.1202 14.6136 37.1299 14.7499 37.1383C14.8862 37.1466 15.0265 37.1535 15.1711 37.1593C15.3158 37.1646 15.4575 37.1676 15.5966 37.1676C15.9581 37.1676 16.2986 37.1397 16.6185 37.084C16.9381 37.0285 17.2161 36.9295 17.4526 36.7874C17.689 36.6456 17.8766 36.4534 18.0157 36.2113C18.1546 35.969 18.2243 35.6642 18.2243 35.2967V35.1715ZM16.8063 32.7746C16.8063 32.8637 16.7924 32.9487 16.7645 33.0293C16.7366 33.11 16.6909 33.1795 16.627 33.2383C16.5629 33.2966 16.4768 33.3439 16.3684 33.38C16.2599 33.4162 16.1222 33.4343 15.9554 33.4343H15.0213V31.9895C15.049 31.9895 15.0921 31.9883 15.1505 31.9853C15.2089 31.9825 15.27 31.9812 15.3339 31.9812H15.6551C16.0833 31.9812 16.3822 32.0354 16.5518 32.144C16.7214 32.2526 16.8063 32.421 16.8063 32.6492V32.7746ZM16.5935 35.8062C16.7576 35.6782 16.8397 35.4971 16.8397 35.2634V35.1714C16.8397 34.971 16.7756 34.797 16.6478 34.6494C16.5198 34.502 16.289 34.4282 15.9554 34.4282H15.0213V35.9898H15.1671C15.231 35.9898 15.2977 35.9916 15.3673 35.9942C15.4368 35.9969 15.5035 35.9985 15.5676 35.9985H15.7051C16.1333 35.9985 16.4295 35.9343 16.5935 35.8062ZM22.7955 33.9438C22.7955 33.6377 22.7496 33.3772 22.6578 33.1629C22.5662 32.9487 22.4368 32.7732 22.27 32.6367C22.1032 32.5004 21.8988 32.4003 21.6568 32.3362C21.415 32.2722 21.1439 32.2401 20.8436 32.2401C20.5654 32.2401 20.2943 32.2597 20.0303 32.2987C19.766 32.3375 19.556 32.3766 19.4005 32.4154C19.2948 32.4435 19.242 32.5046 19.242 32.5991V33.2756C19.242 33.3314 19.2559 33.3705 19.2837 33.3925C19.3115 33.4149 19.3475 33.4261 19.3922 33.4261H19.4337C19.5006 33.4204 19.5839 33.4135 19.684 33.4051C19.7842 33.3968 19.8968 33.3901 20.022 33.3842C20.1471 33.3788 20.2777 33.3746 20.414 33.3717C20.5501 33.3689 20.6851 33.3675 20.8186 33.3675C21.0131 33.3675 21.1661 33.4038 21.2773 33.4761C21.3885 33.5486 21.4441 33.7045 21.4441 33.9438V34.2445H20.9937C20.2763 34.2445 19.7549 34.3572 19.4296 34.5827C19.1043 34.8081 18.9416 35.1659 18.9416 35.6558V35.7313C18.9416 36.0039 18.982 36.2321 19.0625 36.4158C19.1431 36.5996 19.2503 36.7472 19.3837 36.8587C19.5172 36.9699 19.6686 37.0493 19.8384 37.0964C20.008 37.1438 20.1846 37.1676 20.3681 37.1676C20.6184 37.1676 20.8339 37.1341 21.0145 37.0673C21.1952 37.0005 21.3662 36.9086 21.5276 36.7917V36.9253C21.5276 36.9699 21.5442 37.0089 21.5776 37.0422C21.6111 37.0756 21.6499 37.0923 21.6944 37.0923H22.6287C22.6731 37.0923 22.712 37.0756 22.7455 37.0422C22.7789 37.0089 22.7955 36.9699 22.7955 36.9253V33.9438ZM21.1481 36.0942C21.2619 36.0581 21.3691 36.015 21.4692 35.9648V35.0462H20.9937C20.8491 35.0462 20.7296 35.0587 20.635 35.0837C20.5404 35.1088 20.4653 35.1465 20.4098 35.1966C20.3542 35.2465 20.3152 35.3107 20.2931 35.3886C20.2707 35.4666 20.2596 35.5556 20.2596 35.6558V35.7312C20.2596 35.9092 20.3026 36.0233 20.3889 36.0734C20.4751 36.1235 20.6071 36.1485 20.7852 36.1485C20.913 36.1485 21.0339 36.1306 21.1481 36.0942ZM27.9007 36.917V34.1358C27.9007 33.8744 27.8799 33.6278 27.8381 33.3968C27.7964 33.166 27.7214 32.9653 27.6129 32.7954C27.5045 32.6256 27.3543 32.4905 27.1624 32.3904C26.9707 32.2902 26.7245 32.2401 26.4242 32.2401C26.1572 32.2401 25.9208 32.2723 25.7152 32.3369C25.5094 32.4014 25.2925 32.515 25.0646 32.6776V32.4752C25.0646 32.4305 25.0478 32.3911 25.0145 32.3575C24.9811 32.3238 24.9421 32.3068 24.8976 32.3068H23.9634C23.9187 32.3068 23.8799 32.3235 23.8467 32.357C23.8133 32.3904 23.7966 32.4295 23.7966 32.4739V36.917C23.7966 36.9615 23.8145 37.0019 23.8508 37.038C23.8869 37.0743 23.9272 37.0923 23.9717 37.0923H24.9811C25.0256 37.0923 25.0646 37.0743 25.0978 37.0382C25.1313 37.0021 25.1479 36.9619 25.1479 36.9173V33.6341C25.2925 33.5564 25.4287 33.4925 25.5567 33.4426C25.6845 33.3925 25.8096 33.3675 25.932 33.3675C26.0599 33.3675 26.1642 33.38 26.2449 33.4051C26.3254 33.4301 26.388 33.4731 26.4325 33.5345C26.477 33.5954 26.5076 33.6759 26.5243 33.7757C26.5409 33.8758 26.5494 33.9981 26.5494 34.1425V36.9173C26.5494 36.9619 26.566 37.0021 26.5994 37.0382C26.6327 37.0743 26.6715 37.0923 26.7162 37.0923H27.7255C27.7699 37.0923 27.8102 37.0743 27.8464 37.038C27.8826 37.0019 27.9007 36.9615 27.9007 36.917ZM32.0047 36.1071V36.8502C32.0047 36.9114 31.9907 36.9546 31.963 36.9796C31.9351 37.0047 31.8906 37.0255 31.8294 37.0422C31.7127 37.0701 31.5611 37.0978 31.3749 37.1259C31.1885 37.1535 30.9703 37.1676 30.72 37.1676C30.1305 37.1676 29.6592 36.9867 29.3062 36.6246C28.953 36.2628 28.7765 35.7394 28.7765 35.0546V34.3531C28.7765 33.6682 28.953 33.1448 29.3062 32.7831C29.6592 32.421 30.1305 32.2401 30.72 32.2401C30.9703 32.2401 31.1885 32.254 31.3749 32.2817C31.5611 32.3098 31.7127 32.3375 31.8294 32.3653C31.8906 32.3819 31.9351 32.4029 31.963 32.4279C31.9907 32.453 32.0047 32.4962 32.0047 32.5574V33.3007C32.0047 33.3453 31.9893 33.38 31.9588 33.4051C31.9281 33.4301 31.8906 33.4426 31.8462 33.4426H31.8294C31.6737 33.4261 31.5251 33.4121 31.3832 33.401C31.2413 33.3901 31.0508 33.3842 30.8118 33.3842C30.7172 33.3842 30.6283 33.3996 30.5448 33.4301C30.4613 33.4608 30.3891 33.5137 30.328 33.5888C30.2666 33.6641 30.2181 33.7641 30.1819 33.8895C30.1457 34.0147 30.1277 34.1692 30.1277 34.3531V35.0546C30.1277 35.2382 30.1457 35.3927 30.1819 35.5181C30.2181 35.6433 30.2666 35.7436 30.328 35.8187C30.3891 35.8939 30.4613 35.9468 30.5448 35.9774C30.6283 36.008 30.7172 36.0233 30.8118 36.0233C31.0508 36.0233 31.2413 36.0178 31.3832 36.0067C31.5251 35.9956 31.6737 35.9815 31.8294 35.9649H31.8462C31.8906 35.9649 31.9281 35.9774 31.9588 36.0025C31.9893 36.0276 32.0047 36.0623 32.0047 36.1071ZM36.6346 34.4115C36.6346 34.0773 36.5885 33.7768 36.4966 33.5095C36.4046 33.2423 36.2709 33.0155 36.0954 32.8289C35.9199 32.6424 35.7025 32.4976 35.4436 32.3946C35.1844 32.2918 34.8848 32.2401 34.5449 32.2401C34.2051 32.2401 33.9056 32.2918 33.6465 32.3946C33.3873 32.4976 33.1685 32.6424 32.9903 32.8289C32.8119 33.0155 32.6768 33.2423 32.585 33.5095C32.4928 33.7768 32.4469 34.0773 32.4469 34.4115V34.9961C32.4469 35.3301 32.4928 35.6309 32.585 35.8981C32.6768 36.1653 32.8119 36.3922 32.9903 36.5788C33.1685 36.7654 33.3873 36.91 33.6465 37.013C33.9056 37.1159 34.2051 37.1676 34.5449 37.1676C34.8848 37.1676 35.1844 37.1159 35.4436 37.013C35.7025 36.91 35.9199 36.7654 36.0954 36.5788C36.2709 36.3922 36.4046 36.1653 36.4966 35.8981C36.5885 35.6309 36.6346 35.3301 36.6346 34.9961V34.4115ZM34.5449 36.0233C35.037 36.0233 35.2832 35.6809 35.2832 34.9961V34.4115C35.2832 33.7322 35.037 33.3925 34.5449 33.3925C34.3016 33.3925 34.1164 33.4774 33.9893 33.6472C33.8619 33.8172 33.7984 34.0719 33.7984 34.4115V34.9961C33.7984 35.3357 33.8619 35.5918 33.9893 35.7644C34.1164 35.9371 34.3016 36.0233 34.5449 36.0233ZM41.5976 36.917V34.1358C41.5976 33.8744 41.5765 33.6278 41.5351 33.3968C41.4933 33.166 41.4181 32.9653 41.3095 32.7954C41.2011 32.6256 41.0511 32.4905 40.8593 32.3904C40.6674 32.2902 40.4213 32.2401 40.1211 32.2401C39.8542 32.2401 39.6177 32.2723 39.4119 32.3369C39.2062 32.4014 38.9893 32.515 38.7613 32.6776V32.4752C38.7613 32.4305 38.7447 32.3911 38.7111 32.3575C38.678 32.3238 38.6389 32.3068 38.5945 32.3068H37.6602C37.6157 32.3068 37.5769 32.3235 37.5434 32.357C37.5102 32.3904 37.4934 32.4295 37.4934 32.4739V36.917C37.4934 36.9615 37.5114 37.0019 37.5476 37.038C37.5838 37.0743 37.624 37.0923 37.6687 37.0923H38.678C38.7224 37.0923 38.7613 37.0743 38.7948 37.0382C38.828 37.0021 38.8448 36.9619 38.8448 36.9173V33.6341C38.9893 33.5564 39.1256 33.4925 39.2534 33.4426C39.3815 33.3925 39.5065 33.3675 39.629 33.3675C39.7568 33.3675 39.8611 33.38 39.9416 33.4051C40.0222 33.4301 40.0849 33.4731 40.1294 33.5345C40.1739 33.5954 40.2044 33.6759 40.2212 33.7757C40.2378 33.8758 40.2462 33.9981 40.2462 34.1425V36.9173C40.2462 36.9619 40.2628 37.0021 40.2962 37.0382C40.3296 37.0743 40.3684 37.0923 40.413 37.0923H41.4223C41.4668 37.0923 41.5072 37.0743 41.5434 37.038C41.5794 37.0019 41.5976 36.9615 41.5976 36.917ZM45.2348 36.2893V36.9357C45.2348 37.0295 45.182 37.0848 45.0763 37.1011C44.9483 37.1233 44.8371 37.1398 44.7427 37.1509C44.6481 37.162 44.5395 37.1675 44.4174 37.1675C44.1905 37.1675 43.9901 37.1493 43.816 37.1133C43.6419 37.077 43.4966 37.0061 43.3805 36.9003C43.2646 36.7945 43.1761 36.6483 43.1153 36.4617C43.0547 36.2753 43.0242 36.0347 43.0242 35.7394V33.3175L42.357 33.2088C42.3123 33.1977 42.2721 33.1769 42.2359 33.1462C42.1997 33.1157 42.1817 33.0781 42.1817 33.0335V32.4822C42.1817 32.4378 42.1997 32.3974 42.2359 32.3611C42.2721 32.325 42.3123 32.3068 42.357 32.3068H43.0242V31.622C43.0242 31.5774 43.0409 31.5414 43.0739 31.5134C43.1068 31.4857 43.1458 31.4663 43.1902 31.455L44.2016 31.2798H44.2263C44.2705 31.2798 44.3065 31.2921 44.3343 31.3171C44.3618 31.3423 44.3757 31.3771 44.3757 31.4215V32.3068H45.0597C45.104 32.3068 45.143 32.3237 45.1764 32.3573C45.2099 32.3909 45.2265 32.4305 45.2265 32.4752V33.1573C45.2265 33.2024 45.2099 33.2416 45.1764 33.2752C45.143 33.3089 45.104 33.3257 45.0597 33.3257H44.3757V35.7561C44.3757 35.9231 44.3895 36.0304 44.4174 36.0776C44.4451 36.1249 44.5229 36.1485 44.6507 36.1485H45.0597C45.1764 36.1485 45.2348 36.1955 45.2348 36.2893ZM49.6891 33.9438C49.6891 33.6377 49.6433 33.3772 49.5514 33.1629C49.4597 32.9487 49.3305 32.7732 49.1637 32.6367C48.9969 32.5004 48.7925 32.4003 48.5505 32.3362C48.3087 32.2722 48.0376 32.2401 47.7373 32.2401C47.4589 32.2401 47.188 32.2597 46.924 32.2987C46.6597 32.3375 46.4497 32.3766 46.2942 32.4154C46.1882 32.4435 46.1357 32.5046 46.1357 32.5991V33.2756C46.1357 33.3314 46.1494 33.3705 46.1773 33.3925C46.2052 33.4149 46.2412 33.4261 46.2857 33.4261H46.3274C46.3943 33.4204 46.4776 33.4135 46.5777 33.4051C46.6779 33.3968 46.7905 33.3901 46.9155 33.3842C47.0408 33.3788 47.1714 33.3746 47.3077 33.3717C47.4438 33.3689 47.5788 33.3675 47.7121 33.3675C47.9068 33.3675 48.0598 33.4038 48.171 33.4761C48.2822 33.5486 48.3378 33.7045 48.3378 33.9438V34.2445H47.8874C47.1698 34.2445 46.6486 34.3572 46.3233 34.5827C45.998 34.8081 45.8353 35.1659 45.8353 35.6558V35.7313C45.8353 36.0039 45.8755 36.2321 45.9562 36.4158C46.0366 36.5996 46.144 36.7472 46.2774 36.8587C46.4109 36.9699 46.5623 37.0493 46.7321 37.0964C46.9017 37.1438 47.0782 37.1676 47.2618 37.1676C47.5121 37.1676 47.7274 37.1341 47.9082 37.0673C48.0889 37.0005 48.2597 36.9086 48.4213 36.7917V36.9253C48.4213 36.9699 48.4379 37.0089 48.4713 37.0422C48.5046 37.0756 48.5436 37.0923 48.5881 37.0923H49.5224C49.5668 37.0923 49.6057 37.0756 49.6392 37.0422C49.6724 37.0089 49.6891 36.9699 49.6891 36.9253V33.9438ZM48.0418 36.0942C48.1556 36.0581 48.2628 36.015 48.3629 35.9648V35.0462H47.8874C47.7428 35.0462 47.6233 35.0587 47.5287 35.0837C47.4341 35.1088 47.359 35.1465 47.3035 35.1966C47.2477 35.2465 47.2088 35.3107 47.1868 35.3886C47.1644 35.4666 47.1533 35.5556 47.1533 35.6558V35.7312C47.1533 35.9092 47.1963 36.0233 47.2826 36.0734C47.3688 36.1235 47.5008 36.1485 47.6789 36.1485C47.8067 36.1485 47.9274 36.1306 48.0418 36.0942ZM53.7933 36.8502V36.1071C53.7933 36.0623 53.7779 36.0276 53.7474 36.0025C53.7167 35.9774 53.6793 35.9649 53.6348 35.9649H53.6181C53.4624 35.9815 53.3136 35.9956 53.1718 36.0067C53.0301 36.0178 52.8395 36.0233 52.6005 36.0233C52.5057 36.0233 52.4167 36.008 52.3336 35.9774C52.2501 35.9468 52.1777 35.8939 52.1165 35.8187C52.0554 35.7436 52.0067 35.6433 51.9707 35.5181C51.9343 35.3927 51.9165 35.2382 51.9165 35.0546V34.3531C51.9165 34.1692 51.9343 34.0147 51.9707 33.8895C52.0067 33.7641 52.0554 33.6641 52.1165 33.5888C52.1777 33.5137 52.2501 33.4608 52.3336 33.4301C52.4167 33.3996 52.5057 33.3842 52.6005 33.3842C52.8395 33.3842 53.0301 33.3901 53.1718 33.401C53.3136 33.4121 53.4624 33.4261 53.6181 33.4426H53.6348C53.6793 33.4426 53.7167 33.4301 53.7474 33.4051C53.7779 33.38 53.7933 33.3453 53.7933 33.3007V32.5574C53.7933 32.4962 53.7794 32.453 53.7515 32.4279C53.7235 32.4029 53.6793 32.3819 53.6181 32.3653C53.5014 32.3375 53.3497 32.3098 53.1635 32.2817C52.9771 32.254 52.759 32.2401 52.5087 32.2401C51.9189 32.2401 51.4479 32.421 51.0947 32.7831C50.7415 33.1448 50.565 33.6682 50.565 34.3531V35.0546C50.565 35.7394 50.7415 36.2628 51.0947 36.6246C51.4479 36.9867 51.9189 37.1676 52.5087 37.1676C52.759 37.1676 52.9771 37.1535 53.1635 37.1259C53.3497 37.0978 53.5014 37.0701 53.6181 37.0422C53.6793 37.0255 53.7235 37.0047 53.7515 36.9796C53.7794 36.9546 53.7933 36.9114 53.7933 36.8502ZM57.3884 36.2893V36.9357C57.3884 37.0295 57.3354 37.0848 57.2299 37.1011C57.1019 37.1233 56.9907 37.1398 56.8963 37.1509C56.8016 37.162 56.6931 37.1675 56.571 37.1675C56.3441 37.1675 56.1437 37.1493 55.9696 37.1133C55.7954 37.077 55.6502 37.0061 55.5343 36.9003C55.4183 36.7945 55.3298 36.6483 55.269 36.4617C55.2083 36.2753 55.1778 36.0347 55.1778 35.7394V33.3175L54.5106 33.2088C54.4659 33.1977 54.4257 33.1769 54.3895 33.1462C54.3533 33.1157 54.3353 33.0781 54.3353 33.0335V32.4822C54.3353 32.4378 54.3533 32.3974 54.3895 32.3611C54.4257 32.325 54.4659 32.3068 54.5106 32.3068H55.1778V31.622C55.1778 31.5774 55.1945 31.5414 55.2276 31.5134C55.2605 31.4857 55.2993 31.4663 55.3436 31.455L56.355 31.2798H56.38C56.4241 31.2798 56.4602 31.2921 56.4875 31.3171C56.5154 31.3423 56.5293 31.3771 56.5293 31.4215V32.3068H57.2133C57.2577 32.3068 57.2966 32.3237 57.3301 32.3573C57.3633 32.3909 57.3801 32.4305 57.3801 32.4752V33.1573C57.3801 33.2024 57.3633 33.2416 57.3301 33.2752C57.2966 33.3089 57.2577 33.3257 57.2133 33.3257H56.5293V35.7561C56.5293 35.9231 56.5431 36.0304 56.571 36.0776C56.5987 36.1249 56.6765 36.1485 56.8045 36.1485H57.2133C57.3301 36.1485 57.3884 36.1955 57.3884 36.2893Z", fill: "#005697" }), jsx("path", { d: "M52.6187 14.7398H39.0664L37.6881 16.2935L33.2155 21.3349V21.3351L31.8372 22.8886H18.464L19.821 21.3153L20.4633 20.5706L21.8202 18.9973H15.6582C14.5325 18.9973 13.6113 19.943 13.6113 21.0987V25.5326C13.6113 26.6885 14.5325 27.6342 15.6582 27.6342H39.2492C40.3749 27.6342 41.9127 26.9318 42.6665 26.0733L46.235 22.0097L52.6187 14.7398Z", fill: "#005697" }), jsx("path", { d: "M55.3418 10C56.4676 10 57.3887 10.9457 57.3887 12.1015V16.5353C57.3887 17.691 56.4676 18.6368 55.3418 18.6368H49.1999L50.5697 17.0753H50.5699L51.2491 16.3012L52.6189 14.7398H39.0667L31.8375 22.8945H18.3813L28.0314 11.9701L28.3966 11.5566C29.153 10.7005 30.6929 10 31.8186 10H55.3418V10Z", fill: "#FBD500" })] })));
18403
18395
  };
18404
18396
 
18405
- var Text$q = Typography.Text;
18397
+ var Text$r = Typography.Text;
18406
18398
  var MiniCreditCard = function (_a) {
18407
18399
  var className = _a.className, buttons = _a.buttons, _b = _a.hideDropdownMenu, hideDropdownMenu = _b === void 0 ? false : _b, _c = _a.hideDefaultTag, hideDefaultTag = _c === void 0 ? false : _c, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData, onClickSetDefault = _a.onClickSetDefault, id = _a.id;
18408
18400
  var darkMode = useContext(BunnyContext).darkMode;
@@ -18413,7 +18405,7 @@ var MiniCreditCard = function (_a) {
18413
18405
  return darkMode ? 'var(--row-background-alternate)' : 'bg-slate-50';
18414
18406
  }, [darkMode]);
18415
18407
  var isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
18416
- return (jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxs(Fragment, { children: [jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Issuer, { paymentMethodData: paymentMethodData }), jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsx("div", { children: isDefault ? (jsx(Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsx(Fragment, { children: !hideDropdownMenu && (jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsx(CreditCardOutlined, {}), jsx(Text$q, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsx(Button, { disabled: true, type: "link" }), buttons] }))) })));
18408
+ return (jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxs(Fragment, { children: [jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Issuer, { paymentMethodData: paymentMethodData }), jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsx("div", { children: isDefault ? (jsx(Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsx(Fragment, { children: !hideDropdownMenu && (jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsx(CreditCardOutlined, {}), jsx(Text$r, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsx(Button, { disabled: true, type: "link" }), buttons] }))) })));
18417
18409
  };
18418
18410
  var Identifier = function (_a) {
18419
18411
  var _b, _c, _d;
@@ -18422,9 +18414,9 @@ var Identifier = function (_a) {
18422
18414
  return null;
18423
18415
  }
18424
18416
  if (((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.type) === 'cashapp') {
18425
- return jsx(Text$q, { children: "Cashapp" });
18417
+ return jsx(Text$r, { children: "Cashapp" });
18426
18418
  }
18427
- return (jsxs("div", { children: [jsx(Text$q, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsx(Text$q, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
18419
+ return (jsxs("div", { children: [jsx(Text$r, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsx(Text$r, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
18428
18420
  };
18429
18421
  var Issuer = function (_a) {
18430
18422
  var _b;
@@ -18433,7 +18425,7 @@ var Issuer = function (_a) {
18433
18425
  var issuer = (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer;
18434
18426
  if (issuer.length == 0 || list.includes(issuer.toLowerCase()))
18435
18427
  return null;
18436
- return jsx(Text$q, { children: lodashExports.capitalize(issuer) });
18428
+ return jsx(Text$r, { children: lodashExports.capitalize(issuer) });
18437
18429
  };
18438
18430
  var DropdownMenu = function (_a) {
18439
18431
  var setDefault = _a.setDefault, remove = _a.remove, isDefault = _a.isDefault, id = _a.id;
@@ -18602,13 +18594,13 @@ var isCardExpired = function (expiry) {
18602
18594
  var formatCardExpiry = function (cardExpiry) {
18603
18595
  if (cardExpiry.length <= 2)
18604
18596
  return cardExpiry;
18605
- return cardExpiry.substring(0, 2) + "/" + cardExpiry.substring(2);
18597
+ return cardExpiry.substring(0, 2) + '/' + cardExpiry.substring(2);
18606
18598
  };
18607
18599
  // removes spaces from a credit card number
18608
18600
  var unformatCardNumber = function (cardNumber) {
18609
- var cardNumberArray = cardNumber.split("");
18610
- var unformattedCardNumberArray = cardNumberArray.filter(function (character) { return character !== " "; });
18611
- return unformattedCardNumberArray.join("");
18601
+ var cardNumberArray = cardNumber.split('');
18602
+ var unformattedCardNumberArray = cardNumberArray.filter(function (character) { return character !== ' '; });
18603
+ return unformattedCardNumberArray.join('');
18612
18604
  };
18613
18605
  var storePayment = function (options, plugin, apiHost, accountId) { return __awaiter(void 0, void 0, void 0, function () {
18614
18606
  var testCreditCardNumber, testCreditCardCvc, testCreditCardExpirationDate, token, response;
@@ -18617,7 +18609,7 @@ var storePayment = function (options, plugin, apiHost, accountId) { return __awa
18617
18609
  case 0:
18618
18610
  testCreditCardNumber = options.testCreditCardNumber, testCreditCardCvc = options.testCreditCardCvc, testCreditCardExpirationDate = options.testCreditCardExpirationDate, token = options.token;
18619
18611
  return [4 /*yield*/, invokePlugin({
18620
- method: "store_payment_method",
18612
+ method: 'store_payment_method',
18621
18613
  plugin: plugin,
18622
18614
  payload: {
18623
18615
  test_credit_card_number: testCreditCardNumber,
@@ -18630,7 +18622,7 @@ var storePayment = function (options, plugin, apiHost, accountId) { return __awa
18630
18622
  })];
18631
18623
  case 1:
18632
18624
  response = _a.sent();
18633
- if ((response === null || response === void 0 ? void 0 : response.status) !== "success")
18625
+ if ((response === null || response === void 0 ? void 0 : response.status) !== 'success')
18634
18626
  throw new Error(response === null || response === void 0 ? void 0 : response.message);
18635
18627
  return [2 /*return*/, response];
18636
18628
  }
@@ -18730,7 +18722,7 @@ function useSave$1(_a) {
18730
18722
  return { save: save, isSaving: isSaving };
18731
18723
  }
18732
18724
 
18733
- var Text$p = Typography.Text;
18725
+ var Text$q = Typography.Text;
18734
18726
  var TEST_CARD = '4242424242424242';
18735
18727
  var DemoPayForm = function (_a) {
18736
18728
  var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -18792,7 +18784,7 @@ var DemoPayForm = function (_a) {
18792
18784
  var onCardCvcChange = function (cvc) {
18793
18785
  setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
18794
18786
  };
18795
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsx(Text$p, { children: "DemoPay is for testing only." }), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
18787
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsx(Text$q, { children: "DemoPay is for testing only." }), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
18796
18788
  };
18797
18789
  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) {
18798
18790
  var darkMode = _a.darkMode;
@@ -18947,7 +18939,7 @@ var PaymentMethodDetails = function (_a) {
18947
18939
  case 'StripePayment':
18948
18940
  return (jsx(StripeForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
18949
18941
  case 'DemoPayPayment':
18950
- return (jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
18942
+ return (jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: function (response) { return onSavePaymentMethod(response); }, plugin: plugin }));
18951
18943
  default:
18952
18944
  console.warn('Can not find form for plugin', plugin);
18953
18945
  return jsx(Fragment, {});
@@ -18959,7 +18951,7 @@ var CardIcon = function (_a) {
18959
18951
  return (jsxs("svg", __assign({ className: className, width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [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: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1.5 7.5H16.5", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
18960
18952
  };
18961
18953
 
18962
- var Text$o = Typography.Text;
18954
+ var Text$p = Typography.Text;
18963
18955
  var PaymentMethodSelector = function (_a) {
18964
18956
  var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
18965
18957
  return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
@@ -18972,7 +18964,7 @@ var PaymentOption = function (_a) {
18972
18964
  var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
18973
18965
  return (jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ".concat(darkMode
18974
18966
  ? "var(--row-background-dark) border-gray-500"
18975
- : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$o, { children: name })] })), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] })));
18967
+ : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$p, { children: name })] })), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] })));
18976
18968
  };
18977
18969
  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) {
18978
18970
  var $brandColor = _a.$brandColor, $selected = _a.$selected;
@@ -19093,7 +19085,7 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
19093
19085
  var showErrorNotification$2 = useErrorNotification();
19094
19086
  var PaymentForm = function (_a) {
19095
19087
  var _b;
19096
- var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, entityId = _a.entityId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, paymentHoldOptions = _a.paymentHoldOptions;
19088
+ var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, paymentHoldOptions = _a.paymentHoldOptions;
19097
19089
  // Local state
19098
19090
  var _c = useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
19099
19091
  // Simple hooks
@@ -19107,7 +19099,7 @@ var PaymentForm = function (_a) {
19107
19099
  apiHost: apiHost,
19108
19100
  }), storedPaymentMethods = _d.paymentMethods, defaultPaymentMethod = _d.defaultPaymentMethod, isPaymentMethodLoading = _d.isLoading;
19109
19101
  // Complex hooks
19110
- var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, selectedEntityId: entityId, token: token }).paymentPlugins;
19102
+ var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, token: token, accountId: accountId }).paymentPlugins;
19111
19103
  var selectedPaymentMethodPlugin = useMemo(function () {
19112
19104
  // TODO: consolate PluginData and PaymentPlugin into one type. Needs to be done on API side.
19113
19105
  return paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
@@ -19165,14 +19157,14 @@ var PaymentForm = function (_a) {
19165
19157
  setShowPaymentMethodForm(false);
19166
19158
  onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
19167
19159
  };
19168
- var handleSavePaymentMethod = function () {
19160
+ var handleSavePaymentMethod = function (response) {
19169
19161
  queryClient.invalidateQueries({
19170
19162
  queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
19171
19163
  accountId: accountId,
19172
19164
  token: token,
19173
19165
  }),
19174
19166
  });
19175
- onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
19167
+ onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
19176
19168
  setShowPaymentMethodForm(false);
19177
19169
  };
19178
19170
  function handleClickAddPaymentMethod() {
@@ -19214,15 +19206,6 @@ function StripeWrapper(_a) {
19214
19206
  return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: children })));
19215
19207
  }
19216
19208
 
19217
- var useCurrentUserData = function () {
19218
- var queryClient = useQueryClient();
19219
- var token = useToken();
19220
- var currentUser = queryClient.getQueryData(QueryKeyFactory.default.currentUserKey(token));
19221
- if (!currentUser)
19222
- return {};
19223
- return currentUser;
19224
- };
19225
-
19226
19209
  function Invoice(_a) {
19227
19210
  var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onInvoiceLoaded = _a.onInvoiceLoaded;
19228
19211
  return (jsx(InvoiceQuoteContext.Provider, __assign({ value: {
@@ -19245,7 +19228,6 @@ function ActualInvoice() {
19245
19228
  var _b = useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired;
19246
19229
  var _c = useContext(InvoiceQuoteContext), hideDownloadButton = _c.hideDownloadButton, onInvoiceLoaded = _c.onInvoiceLoaded;
19247
19230
  var token = useToken();
19248
- var entityId = useCurrentUserData().entityId;
19249
19231
  // Hooks
19250
19232
  var showSuccessNotification = useSuccessNotification();
19251
19233
  var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
@@ -19281,12 +19263,12 @@ function ActualInvoice() {
19281
19263
  }, [formattedInvoice]);
19282
19264
  if (!formattedInvoice)
19283
19265
  return jsx(Fragment, {});
19284
- return (jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
19266
+ return (jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
19285
19267
  }
19286
19268
 
19287
- var MUTATION$8 = function (id) { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n quote {\n documentTemplateId\n documents { id filename size date url }\n firstInvoice {\n id\n state\n }\n payableId\n id\n payToAccept\n currentPaymentHold {\n createdAt\n expiresAt\n id\n updatedAt\n paymentMethod {\n accountId\n createdAt\n expirationDate\n failureCode\n id\n isDefault\n lastSuccess\n paymentType\n pluginId\n state\n updatedAt\n metadata {\n description\n expiration\n icon\n identifier\n issuer\n kind\n }\n }\n }\n }\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"; };
19269
+ var MUTATION$8 = function () { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n quote {\n documentTemplateId\n documents { id filename size date url }\n firstInvoice {\n id\n state\n }\n payableId\n id\n payToAccept\n currentPaymentHold {\n createdAt\n expiresAt\n id\n updatedAt\n paymentMethod {\n accountId\n createdAt\n expirationDate\n failureCode\n id\n isDefault\n lastSuccess\n paymentType\n pluginId\n state\n updatedAt\n metadata {\n description\n expiration\n icon\n identifier\n issuer\n kind\n }\n }\n }\n }\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"; };
19288
19270
  var getFormattedQuote = function (_a) {
19289
- var id = _a.id, token = _a.token, apiHost = _a.apiHost;
19271
+ var token = _a.token, apiHost = _a.apiHost;
19290
19272
  return __awaiter(void 0, void 0, void 0, function () {
19291
19273
  var response;
19292
19274
  return __generator(this, function (_b) {
@@ -19295,12 +19277,11 @@ var getFormattedQuote = function (_a) {
19295
19277
  query: MUTATION$8(),
19296
19278
  token: token,
19297
19279
  apiHost: apiHost,
19298
- vars: { id: id },
19299
19280
  })];
19300
19281
  case 1:
19301
19282
  response = _b.sent();
19302
- if (response === null || response === void 0 ? void 0 : response.formattedQuote.error) {
19303
- throw new Error(response === null || response === void 0 ? void 0 : response.formattedQuote.error);
19283
+ if (response.errors && response.errors.length > 0) {
19284
+ throw new Error(response.errors[0].message);
19304
19285
  }
19305
19286
  return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedQuote];
19306
19287
  }
@@ -19595,10 +19576,9 @@ var PaymentHoldModal = function (_a) {
19595
19576
  var visible = _a.visible, setVisible = _a.setVisible, quote = _a.quote;
19596
19577
  var queryClient = useQueryClient();
19597
19578
  var token = useToken();
19598
- var entityId = useCurrentUserData().entityId;
19599
19579
  return (jsxs(StyledModal$1, __assign({ centered: true, onCancel: function () {
19600
19580
  setVisible(false);
19601
- }, footer: null, open: visible, width: 600 }, { children: [jsx(Title$2, __assign({ className: "mt-4 pb-4 mx-4", level: 5 }, { children: "Pay to accept" })), jsx("div", __assign({ className: "mb-4" }, { children: jsx(PaymentForm, { entityId: entityId, quote: {
19581
+ }, footer: null, open: visible, width: 600 }, { children: [jsx(Title$2, __assign({ className: "mt-4 pb-4 mx-4", level: 5 }, { children: "Pay to accept" })), jsx("div", __assign({ className: "mb-4" }, { children: jsx(PaymentForm, { quote: {
19602
19582
  amount: quote.amount,
19603
19583
  currencyId: quote.currency,
19604
19584
  id: quote.quote.id,
@@ -19621,7 +19601,7 @@ var PaymentHoldModal = function (_a) {
19621
19601
  } }) }))] })));
19622
19602
  };
19623
19603
 
19624
- var Text$n = Typography.Text;
19604
+ var Text$o = Typography.Text;
19625
19605
  defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
19626
19606
  function Quote(_a) {
19627
19607
  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;
@@ -19661,18 +19641,10 @@ function ActualQuote() {
19661
19641
  var _f = useQuery({
19662
19642
  queryKey: QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
19663
19643
  queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
19664
- var error_1;
19665
19644
  return __generator(this, function (_a) {
19666
19645
  switch (_a.label) {
19667
- case 0:
19668
- _a.trys.push([0, 2, , 3]);
19669
- return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost, id: id })];
19646
+ case 0: return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost })];
19670
19647
  case 1: return [2 /*return*/, _a.sent()];
19671
- case 2:
19672
- error_1 = _a.sent();
19673
- showErrorNotification(error_1.message);
19674
- return [3 /*break*/, 3];
19675
- case 3: return [2 /*return*/];
19676
19648
  }
19677
19649
  });
19678
19650
  }); },
@@ -19687,7 +19659,6 @@ function ActualQuote() {
19687
19659
  }), acceptBoxVisible = _g.acceptBoxVisible, isAccepting = _g.isAccepting, sendAccept = _g.sendAccept, setAcceptBoxVisible = _g.setAcceptBoxVisible, setIsAccepting = _g.setIsAccepting, startAcceptance = _g.startAcceptance, pandadocPollingModalVisible = _g.pandadocPollingModalVisible, setPandadocPollingModalVisible = _g.setPandadocPollingModalVisible, isSendAcceptPending = _g.isSendAcceptPending;
19688
19660
  useSigningComplete({ data: formattedQuote, token: token });
19689
19661
  var isMobile = useIsMobile();
19690
- var showErrorNotification = useErrorNotification();
19691
19662
  useEffect(function () {
19692
19663
  if (formattedQuote) {
19693
19664
  onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote);
@@ -19712,7 +19683,7 @@ function ActualQuote() {
19712
19683
  if ((firstInvoice === null || firstInvoice === void 0 ? void 0 : firstInvoice.state) === 'PAID' && paymentHoldCompleted) {
19713
19684
  return jsx(Invoice, { id: firstInvoice.id });
19714
19685
  }
19715
- return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.documentTemplateId) ? "/pdf/quote" : undefined }, { children: ((_d = (_c = formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.quote.documents.map(function (doc, index) {
19686
+ return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.documentTemplateId) ? "/pdf/quote" : undefined }, { children: ((_d = (_c = formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.quote.documents.map(function (doc, index) {
19716
19687
  return (jsx(Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
19717
19688
  }) }))) : null }))] })), jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept, isSendAcceptPending: isSendAcceptPending }), jsx(PaymentHoldModal, { visible: paymentHoldModalVisible, setVisible: setPaymentHoldModalVisible, quote: formattedQuote }), jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
19718
19689
  }
@@ -19727,7 +19698,7 @@ function QuoteButtons(_a) {
19727
19698
  var signingPlugins = useSigningPlugins({ apiHost: apiHost, token: token });
19728
19699
  return (jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
19729
19700
  color: entityBranding.secondaryColor,
19730
- } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$n, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [paymentHold ? (jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsx(Button, __assign({ disabled: isExpired, onClick: function () { return setPaymentHoldModalVisible(true); }, type: "primary" }, { children: "Pay to accept" }))) : (jsx(Fragment, { children: !isAccepted ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary" }, { children: isExpired
19701
+ } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$o, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [paymentHold ? (jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsx(Button, __assign({ disabled: isExpired, onClick: function () { return setPaymentHoldModalVisible(true); }, type: "primary" }, { children: "Pay to accept" }))) : (jsx(Fragment, { children: !isAccepted ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary" }, { children: isExpired
19731
19702
  ? 'Quote is expired'
19732
19703
  : (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length)
19733
19704
  ? 'Start signing'
@@ -19827,10 +19798,10 @@ var getColor = function (state) {
19827
19798
  }
19828
19799
  };
19829
19800
 
19830
- var Text$m = Typography.Text;
19801
+ var Text$n = Typography.Text;
19831
19802
  var TransactionDate = function (_a) {
19832
19803
  var date = _a.date;
19833
- return jsx(Text$m, __assign({ className: "bunny-text-sm" }, { children: formatDate(date) }));
19804
+ return jsx(Text$n, __assign({ className: "bunny-text-sm" }, { children: formatDate(date) }));
19834
19805
  };
19835
19806
 
19836
19807
  var ArrowDownToLine = function (_a) {
@@ -19867,13 +19838,13 @@ var TransactionGridCell = defaultStyled.div.withConfig({
19867
19838
  }, SLATE_600);
19868
19839
  var templateObject_1$6;
19869
19840
 
19870
- var Text$l = Typography.Text;
19841
+ var Text$m = Typography.Text;
19871
19842
  var TransactionsEmptyState = function () {
19872
19843
  var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
19873
- return (jsx(Text$l, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || 'There are no transactions' })));
19844
+ return (jsx(Text$m, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || 'There are no transactions' })));
19874
19845
  };
19875
19846
 
19876
- var Text$k = Typography.Text;
19847
+ var Text$l = Typography.Text;
19877
19848
  var isInvoice = function (transaction) {
19878
19849
  return transaction.kind === 'INVOICE';
19879
19850
  };
@@ -19882,7 +19853,7 @@ var TransactionRowTitle = function (_a) {
19882
19853
  if (!isInvoice(transaction)) {
19883
19854
  return jsx(Fragment, {});
19884
19855
  }
19885
- return (jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: '11px' } }, { children: transaction.transactionable.number })));
19856
+ return (jsx(Text$l, __assign({ className: "bunny-text-slate-400", style: { fontSize: '11px' } }, { children: transaction.transactionable.number })));
19886
19857
  };
19887
19858
 
19888
19859
  function transactionDateToDisplay(transaction, transactionDateType) {
@@ -19900,7 +19871,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
19900
19871
  }
19901
19872
  }
19902
19873
 
19903
- var Text$j = Typography.Text;
19874
+ var Text$k = Typography.Text;
19904
19875
  var TransactionsListDesktop = function (_a) {
19905
19876
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19906
19877
  var _b = useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19929,11 +19900,11 @@ var TransactionsListDesktop = function (_a) {
19929
19900
  !showState &&
19930
19901
  !showAmount &&
19931
19902
  !showDownload &&
19932
- !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && jsx(TransactionGridCell, { right: false }), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$j, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
19903
+ !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$k, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsx(Text$k, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(Text$k, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && jsx(TransactionGridCell, { right: false }), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$k, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
19933
19904
  }) }));
19934
19905
  };
19935
19906
 
19936
- var Text$i = Typography.Text;
19907
+ var Text$j = Typography.Text;
19937
19908
  var TransactionsListMobile = function (_a) {
19938
19909
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19939
19910
  var _b = useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19956,11 +19927,11 @@ var TransactionsListMobile = function (_a) {
19956
19927
  backgroundColor: index % 2 === 0
19957
19928
  ? "var(--row-background".concat(darkMode ? '-dark' : '', ")")
19958
19929
  : "var(--row-background-alternate".concat(darkMode ? '-dark' : '', ")"),
19959
- } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] }))), jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$i, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$i, { children: "\u00B7" }), showAmount && (jsx(Text$i, { children: formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
19930
+ } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] }))), jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$j, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$j, { children: "\u00B7" }), showAmount && (jsx(Text$j, { children: formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
19960
19931
  }) }));
19961
19932
  };
19962
19933
 
19963
- var Text$h = Typography.Text;
19934
+ var Text$i = Typography.Text;
19964
19935
  var DISPLAY_WIDTH = 1200;
19965
19936
  function Transactions(_a) {
19966
19937
  var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? 'Past transactions' : _d, _e = _a.columns, columns = _e === void 0 ? ['date', 'title', 'state', 'amount', 'download'] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? 'shadow-md' : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
@@ -20007,7 +19978,7 @@ function Transactions(_a) {
20007
19978
  function TransactionsDisplay(_a) {
20008
19979
  var _b, _c;
20009
19980
  var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search;
20010
- var _d = useContext(TransactionsListContext), showSearchBar = _d.showSearchBar, showTitle = _d.showTitle, title = _d.title, transactionComponent = _d.transactionComponent, useModal = _d.useModal, suppressTransactionDisplay = _d.suppressTransactionDisplay, className = _d.className, shadow = _d.shadow, searchBarClassName = _d.searchBarClassName, style = _d.style, onTransactionClick = _d.onTransactionClick, onTransactionDisplayClose = _d.onTransactionDisplayClose, kindsToShow = _d.kindsToShow, filterTransactions = _d.filterTransactions, sortTransactions = _d.sortTransactions; _d.transactionDateType;
19981
+ var _d = useContext(TransactionsListContext), showSearchBar = _d.showSearchBar, showTitle = _d.showTitle, title = _d.title, transactionComponent = _d.transactionComponent, useModal = _d.useModal, suppressTransactionDisplay = _d.suppressTransactionDisplay, className = _d.className, shadow = _d.shadow, searchBarClassName = _d.searchBarClassName, style = _d.style, onTransactionClick = _d.onTransactionClick, onTransactionDisplayClose = _d.onTransactionDisplayClose, kindsToShow = _d.kindsToShow, filterTransactions = _d.filterTransactions, sortTransactions = _d.sortTransactions;
20011
19982
  var columns = useContext(TransactionsListContext).columns;
20012
19983
  var darkMode = useContext(BunnyContext).darkMode;
20013
19984
  var secondaryColor = useContext(BrandContext).secondaryColor;
@@ -20071,7 +20042,7 @@ function TransactionsDisplay(_a) {
20071
20042
  onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
20072
20043
  setDrawerOpen(false);
20073
20044
  }
20074
- return (jsxs("div", __assign({ style: style }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? 'bunny-overflow-hidden' : '', " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center', " bunny-justify-between") }, { children: [showTitle ? (jsx(Text$h, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsx("div", {}) // Empty div so justify-between works
20045
+ return (jsxs("div", __assign({ style: style }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? 'bunny-overflow-hidden' : '', " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center', " bunny-justify-between") }, { children: [showTitle ? (jsx(Text$i, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsx("div", {}) // Empty div so justify-between works
20075
20046
  ), showSearchBar && (jsx("div", __assign({ className: "".concat(isMobile ? 'bunny-w-full' : '') }, { children: jsx(Input, { className: searchBarClassName ? searchBarClassName : '', onChange: function (e) {
20076
20047
  if (isNaN(Number(e.target.value))) {
20077
20048
  return;
@@ -20301,21 +20272,22 @@ var getPriceList = function (_a) {
20301
20272
  });
20302
20273
  };
20303
20274
 
20304
- var QUOTE_QUERY = function (id) { return "\n query quote {\n quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n startDate\n amountsByPeriod {\n amount\n startDate\n }\n quoteChanges {\n currencyId\n id\n kind\n charges {\n subtotal\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n coupon {\n couponCode\n }\n quantity\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
20275
+ var QUOTE_FIELDS = function (removeFormattedQuoteField) { return "\n fragment QuoteFields on Quote {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n ".concat(removeFormattedQuoteField ? '' : "formattedQuote { html }", "\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n startDate\n amountsByPeriod {\n amount\n startDate\n }\n kind\n quoteChanges {\n currencyId\n id\n kind\n charges {\n subtotal\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n coupon {\n couponCode\n }\n quantity\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n }\n }\n"); };
20276
+ var QUOTE_QUERY = function (id, removeFormattedQuoteField) { return "\n".concat(QUOTE_FIELDS(removeFormattedQuoteField), "\n query quote {\n quote ").concat(id ? "(id: ".concat(id, ")") : '', " {\n ...QuoteFields\n }\n }"); };
20305
20277
  var getQuote = function (_a) {
20306
- var id = _a.id, token = _a.token, apiHost = _a.apiHost;
20278
+ var id = _a.id, token = _a.token, apiHost = _a.apiHost, _b = _a.removeFormattedQuoteField, removeFormattedQuoteField = _b === void 0 ? false : _b;
20307
20279
  return __awaiter(void 0, void 0, void 0, function () {
20308
20280
  var response;
20309
- return __generator(this, function (_b) {
20310
- switch (_b.label) {
20281
+ return __generator(this, function (_c) {
20282
+ switch (_c.label) {
20311
20283
  case 0: return [4 /*yield*/, gqlRequest({
20312
- query: QUOTE_QUERY(id),
20284
+ query: QUOTE_QUERY(id, removeFormattedQuoteField),
20313
20285
  token: token,
20314
20286
  vars: {},
20315
20287
  apiHost: apiHost,
20316
20288
  })];
20317
20289
  case 1:
20318
- response = _b.sent();
20290
+ response = _c.sent();
20319
20291
  return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
20320
20292
  }
20321
20293
  });
@@ -20456,27 +20428,83 @@ var useUpdateCoupons = function (_a) {
20456
20428
  };
20457
20429
  };
20458
20430
 
20431
+ var CURRENT_USER_DATA_QUERY = "{\n company {\n name\n }\n currentUser {\n account {\n billingCountry\n currencyId\n }\n authObjectName\n payload {\n returnUrl\n }\n privacyUrl\n termsUrl\n entityId\n }\n }";
20432
+ var getCurrentUserData = function (_a) {
20433
+ var token = _a.token, apiHost = _a.apiHost;
20434
+ return __awaiter(void 0, void 0, void 0, function () {
20435
+ var response;
20436
+ var _b, _c, _d, _e, _f, _g, _h, _j;
20437
+ return __generator(this, function (_k) {
20438
+ switch (_k.label) {
20439
+ case 0: return [4 /*yield*/, gqlRequest$1({
20440
+ query: CURRENT_USER_DATA_QUERY,
20441
+ token: token,
20442
+ apiHost: apiHost,
20443
+ })];
20444
+ case 1:
20445
+ response = _k.sent();
20446
+ return [2 /*return*/, {
20447
+ authObjectName: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.authObjectName,
20448
+ account: (_c = response === null || response === void 0 ? void 0 : response.currentUser) === null || _c === void 0 ? void 0 : _c.account,
20449
+ companyName: (_d = response === null || response === void 0 ? void 0 : response.company) === null || _d === void 0 ? void 0 : _d.name,
20450
+ returnUrl: (_f = (_e = response === null || response === void 0 ? void 0 : response.currentUser) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.returnUrl,
20451
+ privacyUrl: (_g = response === null || response === void 0 ? void 0 : response.currentUser) === null || _g === void 0 ? void 0 : _g.privacyUrl,
20452
+ termsUrl: (_h = response === null || response === void 0 ? void 0 : response.currentUser) === null || _h === void 0 ? void 0 : _h.termsUrl,
20453
+ entityId: (_j = response === null || response === void 0 ? void 0 : response.currentUser) === null || _j === void 0 ? void 0 : _j.entityId,
20454
+ }];
20455
+ }
20456
+ });
20457
+ });
20458
+ };
20459
+
20460
+ var useCurrentUserData = function (token) {
20461
+ var apiHost = useContext(BunnyContext).apiHost;
20462
+ var currentUserData = useQuery({
20463
+ queryKey: QueryKeyFactory.default.currentUserKey(token),
20464
+ queryFn: function () { return getCurrentUserData({ token: token, apiHost: apiHost }); },
20465
+ enabled: Boolean(token),
20466
+ }).data;
20467
+ return currentUserData || {};
20468
+ };
20469
+
20459
20470
  var BunnyFooterIcon = function (_a) {
20460
20471
  var color = _a.color;
20461
20472
  return (jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [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 }), 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 }), 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 }), 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 }), 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 }), 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 })] })), jsx("defs", { children: jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
20462
20473
  };
20463
20474
 
20464
- var Text$g = Typography.Text;
20475
+ var Text$h = Typography.Text;
20465
20476
  var Footer = function (_a) {
20466
20477
  var className = _a.className;
20467
- var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
20478
+ var token = useToken();
20479
+ var _b = useCurrentUserData(token), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
20468
20480
  var isMobile = useIsMobile();
20469
20481
  return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ".concat(isMobile ? 'bunny-flex-col bunny-gap-2' : '', " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3" }, { children: [termsUrl && (jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsx(BunnyMarketingLink, {})] })));
20470
20482
  };
20471
20483
  var BunnyMarketingLink = function () {
20472
20484
  var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
20473
20485
  var isMobile = useIsMobile();
20474
- return (jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsx(Text$g, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) }))] })) })) })));
20486
+ return (jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsx(Text$h, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) }))] })) })) })));
20475
20487
  };
20476
20488
  var StyedLink = styled.a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n"])), SLATE_400, SLATE_500);
20477
20489
  var StyledBunnyLink = styled(StyedLink)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n &:hover {\n color: ", " !important;\n }\n"], ["\n &:hover {\n color: ", " !important;\n }\n"])), PRIMARY_COLOR);
20478
20490
  var templateObject_1$5, templateObject_2$1;
20479
20491
 
20492
+ function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
20493
+ var _a;
20494
+ var upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL;
20495
+ function upgradingFromFree() {
20496
+ var totalPrice = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges.reduce(function (acc, charge) { return acc + Number((charge === null || charge === void 0 ? void 0 : charge.discountedPrice) || 0); }, 0);
20497
+ return totalPrice === 0;
20498
+ }
20499
+ if (quote.kind === QuoteChangeKind.SUBSCRIBE) {
20500
+ return activeCouponsExist;
20501
+ }
20502
+ else if (quote.kind === QuoteChangeKind.ADJUSTMENT) {
20503
+ return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
20504
+ }
20505
+ return false;
20506
+ }
20507
+
20480
20508
  function CouponEditor(_a) {
20481
20509
  var className = _a.className, onAddCoupon = _a.onAddCoupon, isAddingCoupon = _a.isAddingCoupon, couponCode = _a.couponCode, setCouponCode = _a.setCouponCode;
20482
20510
  function handleAddCoupon() {
@@ -20490,10 +20518,13 @@ function CouponEditor(_a) {
20490
20518
  return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(className) }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2" }, { children: [jsx(Input, { value: couponCode, onChange: function (e) { return setCouponCode(e.target.value); }, placeholder: "Coupon code", disabled: isAddingCoupon, size: "small" }), jsx(Button, __assign({ loading: isAddingCoupon, type: "primary", onClick: handleAddCoupon, disabled: couponCode.length === 0 }, { children: "Apply" }))] })) })));
20491
20519
  }
20492
20520
 
20493
- var Text$f = Typography.Text;
20521
+ var SubscriptionsContext = createContext({});
20522
+
20523
+ var Text$g = Typography.Text;
20494
20524
  function CheckoutSummary(_a) {
20495
20525
  var quote = _a.quote, className = _a.className, onAddCoupon = _a.onAddCoupon, onRemoveCoupon = _a.onRemoveCoupon, isRemovingCoupon = _a.isRemovingCoupon, priceListData = _a.priceListData, isAddingCoupon = _a.isAddingCoupon, couponCode = _a.couponCode, setCouponCode = _a.setCouponCode, activeCouponsExist = _a.activeCouponsExist;
20496
- return (jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxs(Text$f, { children: [jsxs("div", __assign({ className: "bunny-text-lg bunny-font-medium bunny-mb-4" }, { children: ["Checkout summary - ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.product.name, " ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.name] })), jsx("div", __assign({ className: "bunny-space-y-4" }, { children: quote === null || quote === void 0 ? void 0 : quote.quoteChanges.map(function (quoteChange) {
20526
+ var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
20527
+ return (jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxs(Text$g, { children: [jsxs("div", __assign({ className: "bunny-text-lg bunny-font-medium bunny-mb-4" }, { children: ["Checkout summary - ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.product.name, " ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.name] })), jsx("div", __assign({ className: "bunny-space-y-4" }, { children: quote === null || quote === void 0 ? void 0 : quote.quoteChanges.map(function (quoteChange) {
20497
20528
  return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
20498
20529
  var _a;
20499
20530
  var multiplier = charge.kind === 'COUPON' ? -1 : 1;
@@ -20508,7 +20539,8 @@ function CheckoutSummary(_a) {
20508
20539
  onRemoveCoupon((_b = charge.coupon) === null || _b === void 0 ? void 0 : _b.couponCode);
20509
20540
  }, className: "bunny-text-orange-500 hover:bunny-text-orange-400 bunny-cursor-pointer" }, { children: "Remove" }))) : (jsx("div", { children: charge.quantity })) })), jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-right" }, { children: formatCurrency(multiplier * (charge.subtotal || 0), charge.currencyId) }))] }), charge.id));
20510
20541
  });
20511
- }) })), jsx(CheckoutSummaryDivider, {}), jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Subtotal" }), jsx("div", { children: formatCurrency(quote.subtotal, quote.currencyId) })] })), jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Taxes" }), jsx("div", { children: formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsx(CheckoutSummaryDivider, {}), jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Total" }), jsx("div", { children: formatCurrency(quote.amountDue, quote.currencyId) })] }))] }), activeCouponsExist && (jsx(CouponEditor, { className: "bunny-w-full", quote: quote, onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] })));
20542
+ }) })), jsx(CheckoutSummaryDivider, {}), jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Subtotal" }), jsx("div", { children: formatCurrency(quote.subtotal, quote.currencyId) })] })), jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Taxes" }), jsx("div", { children: formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsx(CheckoutSummaryDivider, {}), jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Total" }), jsx("div", { children: formatCurrency(quote.amountDue, quote.currencyId) })] }))] }), upgradingSubscription &&
20543
+ shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsx(CouponEditor, { className: "bunny-w-full", quote: quote, onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] })));
20512
20544
  }
20513
20545
  var CheckoutSummaryDivider = function () {
20514
20546
  return (jsx("div", __assign({ className: "bunny-my-2" }, { children: jsx(Divider, { className: "m-0" }) })));
@@ -20517,8 +20549,7 @@ var CheckoutSummaryDivider = function () {
20517
20549
  var Title$1 = Typography.Title;
20518
20550
  function PaymentForms(_a) {
20519
20551
  var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, defaultValues = _a.defaultValues;
20520
- var entityId = useCurrentUserData().entityId;
20521
- return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsxs(Fragment, { children: [jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Payment" })), jsx("div", __assign({ className: "bunny-overflow-y-auto bunny-max-h-[calc(100vh-10rem)]" }, { children: jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction }) }))] })) : null })) : (jsxs(Fragment, { children: [jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Signup" })), jsx(InitialSignupForm, { className: "bunny-px-4", onSubmit: handleSubmit, submitting: proceedingToPayment, defaultValues: defaultValues })] })) }));
20552
+ return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsxs(Fragment, { children: [jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Payment" })), jsx("div", __assign({ className: "bunny-overflow-y-auto bunny-max-h-[calc(100vh-10rem)]" }, { children: jsx(PaymentForm, { onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction }) }))] })) : null })) : (jsxs(Fragment, { children: [jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Signup" })), jsx(InitialSignupForm, { className: "bunny-px-4", onSubmit: handleSubmit, submitting: proceedingToPayment, defaultValues: defaultValues })] })) }));
20522
20553
  }
20523
20554
  function InitialSignupForm(_a) {
20524
20555
  var className = _a.className, onSubmit = _a.onSubmit, submitting = _a.submitting, defaultValues = _a.defaultValues;
@@ -20555,18 +20586,18 @@ function InitialSignupForm(_a) {
20555
20586
  } }) })) })) })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full" }, { children: "Proceed to payment" })) })] })) })));
20556
20587
  }
20557
20588
 
20558
- var Title = Typography.Title, Text$e = Typography.Text;
20589
+ var Title = Typography.Title, Text$f = Typography.Text;
20559
20590
  function PaymentSuccessDisplay(_a) {
20560
20591
  var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
20561
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxs(Text$e, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
20592
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxs(Text$f, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
20562
20593
  }
20563
20594
 
20564
- var Text$d = Typography.Text;
20595
+ var Text$e = Typography.Text;
20565
20596
  function PriceListDisplay(_a) {
20566
20597
  var priceListData = _a.priceListData;
20567
20598
  if (!priceListData)
20568
20599
  return null;
20569
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxs(Text$d, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxs(Text$d, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [formatCurrency(priceListData.basePrice, priceListData.currencyId), " / month"] }))] })), priceListData.trialAllowed ? (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxs(Text$d, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$d, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
20600
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxs(Text$e, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxs(Text$e, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [formatCurrency(priceListData.basePrice, priceListData.currencyId), " / month"] }))] })), priceListData.trialAllowed ? (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxs(Text$e, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$e, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
20570
20601
  }
20571
20602
 
20572
20603
  var showErrorNotification = useErrorNotification();
@@ -20771,19 +20802,14 @@ function Signup(_a) {
20771
20802
  } }) }))) }))] })));
20772
20803
  }
20773
20804
 
20774
- var useQuoteSubscriptionUpgrade = function () {
20775
- var graphQLRequest = useGraphQLRequest();
20776
- return function (subscriptionId, priceListId, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
20777
- var data;
20778
- return __generator(this, function (_a) {
20779
- switch (_a.label) {
20780
- 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 })];
20781
- case 1:
20782
- data = _a.sent();
20783
- return [2 /*return*/, data];
20784
- }
20785
- });
20786
- }); };
20805
+ var quoteSubscriptionUpgrade = function (_a) {
20806
+ var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId, apiHost = _a.apiHost, token = _a.token;
20807
+ return gqlRequest({
20808
+ query: "mutation QuoteSubscriptionUpgrade($subscriptionId: ID!, $priceListId: ID!) {\n quoteSubscriptionUpgrade(\n subscriptionId: $subscriptionId\n priceListId: $priceListId\n ) {\n quote {\n id\n }\n }\n }",
20809
+ vars: { subscriptionId: subscriptionId, priceListId: priceListId },
20810
+ apiHost: apiHost,
20811
+ token: token,
20812
+ });
20787
20813
  };
20788
20814
  var useCreateSubscriptionQuote = function () {
20789
20815
  var graphQLRequest = useGraphQLRequest();
@@ -20829,8 +20855,31 @@ var useQuoteDelete = function () {
20829
20855
  });
20830
20856
  }); };
20831
20857
  };
20858
+ var quoteSubscriptionAddon = function (_a) {
20859
+ var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId, apiHost = _a.apiHost, token = _a.token;
20860
+ return gqlRequest({
20861
+ query: "mutation QuoteSubscriptionAddon($subscriptionId: ID!, $priceListId: ID) {\n quoteSubscriptionAddon(subscriptionId: $subscriptionId, priceListId: $priceListId) {\n errors\n quote {\n id\n }\n }\n }",
20862
+ vars: {
20863
+ subscriptionId: subscriptionId,
20864
+ priceListId: priceListId,
20865
+ },
20866
+ apiHost: apiHost,
20867
+ token: token,
20868
+ });
20869
+ };
20870
+ var quoteSubscriptionActivate = function (_a) {
20871
+ var subscriptionId = _a.subscriptionId, apiHost = _a.apiHost, token = _a.token;
20872
+ return gqlRequest({
20873
+ query: "mutation QuoteSubscriptionActivate($subscriptionId: ID!) {\n quoteSubscriptionActivate(subscriptionId: $subscriptionId) {\n quote {\n id\n }\n }\n }",
20874
+ vars: {
20875
+ subscriptionId: subscriptionId,
20876
+ },
20877
+ apiHost: apiHost,
20878
+ token: token,
20879
+ });
20880
+ };
20832
20881
 
20833
- var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n daysLeftInTrial\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n featureAddon\n id\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
20882
+ var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n addonSubscriptions {\n id\n }\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList {\n id\n periodMonths\n name\n plan {\n id\n addon\n addonPlans { id }\n }\n }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n account { id }\n daysLeftInTrial\n trialExpirationAction\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n featureAddon\n id\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
20834
20883
  var getSubscriptions = function (_a) {
20835
20884
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
20836
20885
  return __awaiter(void 0, void 0, void 0, function () {
@@ -20916,7 +20965,7 @@ var accountUpdate = function (_a) {
20916
20965
  });
20917
20966
  };
20918
20967
 
20919
- var COUNTRIES_REQUIRING_STATE = ["US", "CA"];
20968
+ var COUNTRIES_REQUIRING_STATE = ['US', 'CA'];
20920
20969
  var TaxationForm = function (_a) {
20921
20970
  var account = _a.account, quote = _a.quote;
20922
20971
  // Hooks
@@ -20944,19 +20993,18 @@ var TaxationForm = function (_a) {
20944
20993
  }); },
20945
20994
  onSuccess: function () {
20946
20995
  queryClient.invalidateQueries({
20947
- queryKey: ["getTaxationRequiredAccountFields", token],
20996
+ queryKey: ['getTaxationRequiredAccountFields', token],
20948
20997
  });
20949
20998
  },
20950
20999
  }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
20951
- return (jsxs(Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsx(Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsx(Input, { placeholder: "Street" }) })), jsx(Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsx(Input, { placeholder: "City" }) })), jsx(FormBillingState, { form: form }), jsx(Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsx(Select, { options: Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
21000
+ return (jsxs(Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsx(Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsx(Input, { placeholder: "Street" }) })), jsx(Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsx(Input, { placeholder: "City" }) })), jsx(FormBillingState, {}), jsx(Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsx(Select, { options: Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
20952
21001
  var _a, _b;
20953
- return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
20954
- ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
21002
+ return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
21003
+ ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
20955
21004
  } }) })), jsx(Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsx(Input, { placeholder: "Zip" }) })), jsx(Form.Item, { children: jsx(Button, __assign({ className: "bunny-w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
20956
21005
  };
20957
- var FormBillingState = function (_a) {
20958
- _a.form;
20959
- var billingCountry = Form.useWatch("billingCountry");
21006
+ var FormBillingState = function () {
21007
+ var billingCountry = Form.useWatch('billingCountry');
20960
21008
  var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
20961
21009
  return (jsx(Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsx(Input, { placeholder: "State" }) })));
20962
21010
  };
@@ -20966,11 +21014,11 @@ var QuoteCheckout = function (_a) {
20966
21014
  var _b, _c;
20967
21015
  var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, onRecalculateTaxes = _a.onRecalculateTaxes;
20968
21016
  var apiHost = useContext(BunnyContext).apiHost;
21017
+ var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
20969
21018
  var token = useToken();
20970
21019
  var isMobile = useIsMobile();
20971
21020
  var _d = useState(false), isSaving = _d[0], setIsSaving = _d[1];
20972
21021
  var paymentRequired = getQuoteAmountDue(quote) > 0;
20973
- var entityId = useCurrentUserData().entityId;
20974
21022
  var queryClient = useQueryClient();
20975
21023
  var _e = useState(''), couponCode = _e[0], setCouponCode = _e[1];
20976
21024
  var _f = useUpdateCoupons({
@@ -21031,7 +21079,8 @@ var QuoteCheckout = function (_a) {
21031
21079
  }
21032
21080
  if (taxationRequiredAccountFields)
21033
21081
  return (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsx(TaxationForm, { account: account, quote: quote }) })));
21034
- return (jsx(Fragment, { children: paymentRequired ? (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full" }, { children: [jsx(PaymentForm, { entityId: entityId, onFail: onFail, onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: activeCouponsExist && (jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", quote: quote, onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsx(Button, __assign({ type: "link", loading: isRemovingCoupon, onClick: function () {
21082
+ return (jsx(Fragment, { children: paymentRequired ? (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full" }, { children: [jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: upgradingSubscription &&
21083
+ shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", quote: quote, onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsx(Button, __assign({ type: "link", loading: isRemovingCoupon, onClick: function () {
21035
21084
  couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(function (couponCharge) {
21036
21085
  var _a;
21037
21086
  var couponCode = (_a = couponCharge === null || couponCharge === void 0 ? void 0 : couponCharge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode;
@@ -21156,13 +21205,9 @@ var QuotePreviewContext = createContext({});
21156
21205
  function QuotePreviewProvider(_a) {
21157
21206
  var children = _a.children;
21158
21207
  var _b = useState(), quotePreviewData = _b[0], setQuotePreviewData = _b[1];
21159
- function handleSetEditingQuote(editingQuoteId) {
21160
- setQuotePreviewData(__assign(__assign({}, quotePreviewData), { editingQuoteId: editingQuoteId }));
21161
- }
21162
21208
  return (jsx(QuotePreviewContext.Provider, __assign({ value: {
21163
21209
  quotePreviewData: quotePreviewData,
21164
21210
  setQuotePreviewData: setQuotePreviewData,
21165
- handleSetEditingQuote: handleSetEditingQuote,
21166
21211
  } }, { children: children })));
21167
21212
  }
21168
21213
 
@@ -21180,7 +21225,161 @@ var PageTitle = function (_a) {
21180
21225
  } })), title] })));
21181
21226
  };
21182
21227
 
21183
- var SubscriptionsContext = createContext({});
21228
+ var useQuoteCreate = function (_a) {
21229
+ var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, upgradingSubscription = _a.upgradingSubscription, selectedPriceList = _a.selectedPriceList, token = _a.token;
21230
+ var apiHost = useContext(BunnyContext).apiHost;
21231
+ // Queries
21232
+ var quote = useQuery({
21233
+ queryKey: QueryKeyFactory.default.createObjectKey({
21234
+ objectName: 'editingQuote',
21235
+ id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21236
+ token: token,
21237
+ }),
21238
+ queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21239
+ var quote;
21240
+ return __generator(this, function (_a) {
21241
+ switch (_a.label) {
21242
+ case 0:
21243
+ if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
21244
+ throw new Error('editingQuote is undefined');
21245
+ }
21246
+ return [4 /*yield*/, getQuote({
21247
+ id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21248
+ token: token,
21249
+ apiHost: apiHost,
21250
+ removeFormattedQuoteField: false,
21251
+ })];
21252
+ case 1:
21253
+ quote = _a.sent();
21254
+ return [2 /*return*/, quote];
21255
+ }
21256
+ });
21257
+ }); },
21258
+ enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
21259
+ }).data;
21260
+ var _b = useMutation({
21261
+ mutationFn: function (_a) {
21262
+ var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
21263
+ return __awaiter(void 0, void 0, void 0, function () {
21264
+ return __generator(this, function (_b) {
21265
+ switch (_b.label) {
21266
+ case 0: return [4 /*yield*/, quoteSubscriptionUpgrade({ subscriptionId: subscriptionId, priceListId: priceListId, apiHost: apiHost, token: token })];
21267
+ case 1: return [2 /*return*/, _b.sent()];
21268
+ }
21269
+ });
21270
+ });
21271
+ },
21272
+ onSuccess: function (subscriptionUpdateData) {
21273
+ var _a;
21274
+ var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
21275
+ setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21276
+ },
21277
+ }), createQuote = _b.mutate, isCreatingQuote = _b.isPending;
21278
+ var _c = useMutation({
21279
+ mutationFn: function (_a) {
21280
+ var subscriptionId = _a.subscriptionId;
21281
+ return __awaiter(void 0, void 0, void 0, function () {
21282
+ return __generator(this, function (_b) {
21283
+ switch (_b.label) {
21284
+ case 0: return [4 /*yield*/, quoteSubscriptionAddon({ subscriptionId: subscriptionId, apiHost: apiHost, token: token })];
21285
+ case 1: return [2 /*return*/, _b.sent()];
21286
+ }
21287
+ });
21288
+ });
21289
+ },
21290
+ onSuccess: function (subscriptionAddonUpdateData) {
21291
+ var _a;
21292
+ var quote = (_a = subscriptionAddonUpdateData === null || subscriptionAddonUpdateData === void 0 ? void 0 : subscriptionAddonUpdateData.quoteSubscriptionAddon) === null || _a === void 0 ? void 0 : _a.quote;
21293
+ setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21294
+ },
21295
+ }), createEmptyQuote = _c.mutate, isCreatingEmptyQuote = _c.isPending;
21296
+ var subscriptionActivate = useMutation({
21297
+ mutationFn: quoteSubscriptionActivate,
21298
+ onSuccess: function (response) {
21299
+ var _a;
21300
+ var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionActivate) === null || _a === void 0 ? void 0 : _a.quote;
21301
+ setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21302
+ },
21303
+ }).mutate;
21304
+ useEffect(function () {
21305
+ var _a;
21306
+ if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
21307
+ return;
21308
+ }
21309
+ if (!(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
21310
+ return;
21311
+ }
21312
+ var buyingAddonsForCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
21313
+ var isActivatingTrialSubscription = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL &&
21314
+ upgradingSubscription.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
21315
+ if (isActivatingTrialSubscription) {
21316
+ subscriptionActivate({
21317
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21318
+ apiHost: apiHost,
21319
+ token: token,
21320
+ });
21321
+ }
21322
+ else if (buyingAddonsForCurrentSubscription) {
21323
+ createEmptyQuote({
21324
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21325
+ });
21326
+ }
21327
+ else {
21328
+ createQuote({
21329
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21330
+ priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21331
+ });
21332
+ }
21333
+ }, [selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id]);
21334
+ return { quote: quote, isQuotePending: isCreatingQuote || isCreatingEmptyQuote };
21335
+ };
21336
+
21337
+ var PlanManagerQuoteContext = createContext({});
21338
+ function useFeatureAddonsPending() {
21339
+ var _a = useState([]), featureAddonsLoading = _a[0], setFeatureAddonsLoading = _a[1];
21340
+ var addFeatureAddonLoading = function (featureAddonId) {
21341
+ setFeatureAddonsLoading(__spreadArray(__spreadArray([], featureAddonsLoading, true), [featureAddonId], false));
21342
+ };
21343
+ var removeFeatureAddonLoading = function (featureAddonId) {
21344
+ setFeatureAddonsLoading(featureAddonsLoading.filter(function (id) { return id !== featureAddonId; }));
21345
+ };
21346
+ return {
21347
+ isFeatureAddonsLoading: featureAddonsLoading.length > 0,
21348
+ addFeatureAddonLoading: addFeatureAddonLoading,
21349
+ removeFeatureAddonLoading: removeFeatureAddonLoading,
21350
+ };
21351
+ }
21352
+ function PlanManagerQuoteProvider(_a) {
21353
+ var children = _a.children, editingQuoteData = _a.editingQuoteData, setEditingQuoteData = _a.setEditingQuoteData;
21354
+ // Contexts
21355
+ var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
21356
+ var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
21357
+ // Hooks
21358
+ var token = useToken();
21359
+ var _b = useState(false), isAddonPlanLoading = _b[0], setIsAddonPlanLoading = _b[1];
21360
+ var _c = useFeatureAddonsPending(), isFeatureAddonsLoading = _c.isFeatureAddonsLoading, addFeatureAddonLoading = _c.addFeatureAddonLoading, removeFeatureAddonLoading = _c.removeFeatureAddonLoading;
21361
+ var _d = useQuoteCreate({
21362
+ editingQuote: editingQuoteData,
21363
+ setEditingQuoteData: function (quoteId, isTrial) {
21364
+ setEditingQuoteData({
21365
+ id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) || '',
21366
+ isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) || false,
21367
+ });
21368
+ },
21369
+ upgradingSubscription: upgradingSubscription,
21370
+ selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList,
21371
+ token: token,
21372
+ }), quote = _d.quote, isQuotePending = _d.isQuotePending;
21373
+ return (jsx(PlanManagerQuoteContext.Provider, __assign({ value: {
21374
+ quote: quote,
21375
+ isQuotePending: isQuotePending,
21376
+ isAddonPlanLoading: isAddonPlanLoading,
21377
+ setIsAddonPlanLoading: setIsAddonPlanLoading,
21378
+ isFeatureAddonsLoading: isFeatureAddonsLoading,
21379
+ addFeatureAddonLoading: addFeatureAddonLoading,
21380
+ removeFeatureAddonLoading: removeFeatureAddonLoading,
21381
+ } }, { children: children })));
21382
+ }
21184
21383
 
21185
21384
  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";
21186
21385
  var quoteChargeUpdate = function (_a) {
@@ -21248,6 +21447,21 @@ var QuantityLabel = function (_a) {
21248
21447
  return (jsx("span", __assign({ className: "bunny-text-slate-500 bunny-font-medium", style: { fontSize: "11px" } }, { children: pluralizedFeatureName.toUpperCase() })));
21249
21448
  };
21250
21449
 
21450
+ function isAddonPurchased(featureAddon, currentSubscription) {
21451
+ var purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(function (charge) { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
21452
+ if (!purchasedFeatureAddons)
21453
+ return false;
21454
+ return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
21455
+ }
21456
+ function priceListHasUnpurchasedFeatureAddons(priceList, currentSubscription) {
21457
+ var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
21458
+ var purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(function (charge) { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
21459
+ var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
21460
+ return !(purchasedFeatureAddons === null || purchasedFeatureAddons === void 0 ? void 0 : purchasedFeatureAddons.some(function (purchasedCharge) { var _a; return ((_a = purchasedCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === charge.id; }));
21461
+ });
21462
+ return unpurchasedFeatureAddons.length > 0;
21463
+ }
21464
+
21251
21465
  var periodMonthsConverter = function (period) {
21252
21466
  if (period === 0)
21253
21467
  return BillingPeriod.ONCE;
@@ -21273,16 +21487,118 @@ var billingPeriodConverter = function (period) {
21273
21487
  return 12;
21274
21488
  };
21275
21489
 
21276
- var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
21277
- // Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
21278
- var createPlanDescription = function (priceList) {
21279
- return (priceList.plan.description || '').replace(removeHTMLTagsRegex, function (x, y) {
21280
- return y ? ' & ' : '';
21490
+ var canShowQuantitiesInput = function (charge, subscription) {
21491
+ // Check if the subscription is active, pending, or in trial,
21492
+ // the pricing model is not flat,
21493
+ // and if it's not a trial, also check if the current charge is the last one in the subscription.
21494
+ var _a, _b, _c;
21495
+ var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE;
21496
+ var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
21497
+ var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL;
21498
+ var isFlatPricing = charge.pricingModel === 'FLAT';
21499
+ var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
21500
+ !isFlatPricing &&
21501
+ charge.selfServiceQuantity &&
21502
+ !charge.expired;
21503
+ // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
21504
+ return shouldProcessCharge;
21505
+ };
21506
+ var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
21507
+ var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
21508
+ var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
21509
+ var charges = [
21510
+ {
21511
+ id: quoteChangeCharge.id,
21512
+ quantity: editedSubscription.quantity - subscriptionQuantity,
21513
+ },
21514
+ ];
21515
+ return { charges: charges, quoteChange: quoteChange };
21516
+ };
21517
+ var canShowChangeQuantities = function (_a) {
21518
+ var subscriptions = _a.subscriptions;
21519
+ return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
21520
+ return subscription.charges.some(function (charge) {
21521
+ return canShowQuantitiesInput(charge, subscription);
21522
+ });
21281
21523
  });
21282
21524
  };
21283
- var getActivePlanPriceData = function (priceList, selectedPriceList) {
21284
- if (!priceList) {
21285
- return;
21525
+ var canSubscriptionUpgradeFromTrial = function (subscription) {
21526
+ var _a;
21527
+ return (((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL &&
21528
+ subscription.plan.selfServiceBuy) ||
21529
+ false;
21530
+ };
21531
+ var isSubscriptionNotActive = function (subscription) {
21532
+ var _a, _b;
21533
+ return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
21534
+ ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.CANCELED;
21535
+ };
21536
+ var isSubscriptionActiveOrPending = function (subscription) {
21537
+ var _a, _b;
21538
+ return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE ||
21539
+ ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
21540
+ };
21541
+ var isSubscriptionTrial = function (subscription) { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL; };
21542
+ // Helper function to check if charge is a discount
21543
+ var isDiscount = function (kind) {
21544
+ return kind === QuoteChangeKind.DISCOUNT || kind === QuoteChangeKind.FREE_PERIOD_DISCOUNT;
21545
+ };
21546
+ var hasPriceTiers = function (charge) {
21547
+ var _a;
21548
+ return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
21549
+ };
21550
+ var hasMultiplePriceTiers = function (charge) {
21551
+ var _a;
21552
+ return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length) > 1;
21553
+ };
21554
+ var getApplicablePriceTier = function (charge, currencyId, priceDecimals) {
21555
+ var _a;
21556
+ if (!((_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length))
21557
+ return '';
21558
+ var selectedTier;
21559
+ // For TIERED pricing model: always show the first tier
21560
+ if (charge.pricingModel === PricingModel.TIERED) {
21561
+ selectedTier = charge.priceTiers[0];
21562
+ }
21563
+ // For VOLUME and BANDS pricing models: find the tier that contains the current quantity
21564
+ else if (charge.pricingModel === PricingModel.VOLUME ||
21565
+ charge.pricingModel === PricingModel.BANDS) {
21566
+ // Find the appropriate tier based on quantity
21567
+ selectedTier = charge.priceTiers.find(function (tier, index) {
21568
+ var nextTier = charge.priceTiers[index + 1];
21569
+ var tierStart = tier.starts;
21570
+ var tierEnd = nextTier ? nextTier.starts - 1 : Infinity;
21571
+ return charge.quantity >= tierStart && charge.quantity <= tierEnd;
21572
+ });
21573
+ // Fallback to first tier if no tier found (shouldn't happen with proper data)
21574
+ selectedTier = selectedTier || charge.priceTiers[0];
21575
+ }
21576
+ // Default fallback for any other pricing models
21577
+ else {
21578
+ selectedTier = charge.priceTiers[0];
21579
+ }
21580
+ if (!selectedTier)
21581
+ return '';
21582
+ // Calculate the tier range for display
21583
+ var tierIndex = charge.priceTiers.indexOf(selectedTier);
21584
+ var starts = selectedTier.starts;
21585
+ var nextTier = charge.priceTiers[tierIndex + 1];
21586
+ var ends = nextTier ? nextTier.starts - 1 : '∞';
21587
+ return hasMultiplePriceTiers(charge)
21588
+ ? "".concat(starts, "-").concat(ends, ": ").concat(formatCurrency(selectedTier.price, currencyId, priceDecimals))
21589
+ : "".concat(formatCurrency(selectedTier.price, currencyId, priceDecimals));
21590
+ };
21591
+
21592
+ var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
21593
+ // Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
21594
+ var createPlanDescription = function (priceList) {
21595
+ return (priceList.plan.description || '').replace(removeHTMLTagsRegex, function (_, y) {
21596
+ return y ? ' & ' : '';
21597
+ });
21598
+ };
21599
+ var getActivePlanPriceData = function (priceList, selectedPriceList) {
21600
+ if (!priceList) {
21601
+ return;
21286
21602
  }
21287
21603
  // If a period option is selected, return the charge that matches the selected period option
21288
21604
  var activeBillingPLCharge;
@@ -21318,33 +21634,36 @@ var getActivePlanPriceData = function (priceList, selectedPriceList) {
21318
21634
  };
21319
21635
  };
21320
21636
  var isPriceListDisabled = function (_a) {
21321
- var priceList = _a.priceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription, canPurchaseFeatureAddons = _a.canPurchaseFeatureAddons;
21322
- // Plan already has a subscription
21323
- var existingSubscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
21324
- var _a, _b;
21325
- var isCurrentUpgradingSubscription = subscription.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id);
21326
- var subscriptionAlreadyExists = isCurrentUpgradingSubscription
21327
- ? subscription.priceList.id === priceList.id
21328
- : subscription.plan.id === priceList.plan.id;
21329
- return (subscriptionAlreadyExists &&
21330
- subscription.plan.id === priceList.plan.id &&
21331
- ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== SubscriptionState$2.CANCELED &&
21332
- ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== SubscriptionState$2.EXPIRED);
21333
- });
21334
- var isUpgradingPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21335
- if (existingSubscription) {
21336
- return true;
21337
- }
21338
- if (isUpgradingPriceList && !canPurchaseFeatureAddons) {
21339
- return true;
21637
+ var _b;
21638
+ var priceList = _a.priceList, upgradingSubscription = _a.upgradingSubscription;
21639
+ var canPurchaseFeatureAddons = priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21640
+ // TODO: rename hasPlanAddons to canPurchasePlanAddons and check whether we can purchase plan addons
21641
+ var hasPlanAddons = (((_b = priceList.plan.addonPlans) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0;
21642
+ var existingSubscriptionInTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
21643
+ var isUpgradingSubscriptionPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21644
+ // When should priceList be disabled?
21645
+ // if upgradingSubscription?.priceList.id === priceList.id
21646
+ // AND the upgradingSubscription is not in trial
21647
+ // AND cannot purchase feature addons
21648
+ // AND cannot purchase add-on plans
21649
+ // AND selfServiceBuy is false
21650
+ if (isUpgradingSubscriptionPriceList) {
21651
+ return !existingSubscriptionInTrial && !canPurchaseFeatureAddons && !hasPlanAddons;
21340
21652
  }
21341
21653
  return false;
21342
21654
  };
21343
21655
 
21344
21656
  var CheckoutButton = function (_a) {
21345
- var checkoutButtonDisabled = _a.checkoutButtonDisabled, onClickCheckout = _a.onClickCheckout, loading = _a.loading;
21657
+ var checkoutButtonDisabled = _a.checkoutButtonDisabled, onClickCheckout = _a.onClickCheckout, loading = _a.loading, tooltipText = _a.tooltipText;
21346
21658
  var isMobile = useIsMobile();
21347
- return (jsx(Button, __assign({ className: isMobile ? "w-full" : "", disabled: checkoutButtonDisabled, onClick: onClickCheckout, size: isMobile ? "large" : "middle", type: "primary", loading: loading }, { children: "Proceed to checkout" })));
21659
+ var TooltipWrapper = function (_a) {
21660
+ var children = _a.children;
21661
+ if (tooltipText) {
21662
+ return jsx(Tooltip, __assign({ title: tooltipText }, { children: children }));
21663
+ }
21664
+ return jsx("div", { children: children });
21665
+ };
21666
+ return (jsx(TooltipWrapper, { children: jsx(Button, __assign({ className: isMobile ? 'w-full' : '', disabled: checkoutButtonDisabled, onClick: onClickCheckout, size: isMobile ? 'large' : 'middle', type: "primary", loading: loading }, { children: "Proceed to checkout" })) }));
21348
21667
  };
21349
21668
 
21350
21669
  var CheckoutPrice = function (_a) {
@@ -21361,15 +21680,18 @@ var CheckoutPrice = function (_a) {
21361
21680
 
21362
21681
  var CheckoutBarSummarySection = function (_a) {
21363
21682
  var _b;
21364
- var open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription;
21683
+ var open = _a.open, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription;
21365
21684
  // Context
21366
21685
  var apiHost = useContext(BunnyContext).apiHost;
21367
21686
  var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
21687
+ var _c = useContext(PlanManagerQuoteContext), quote = _c.quote, isQuotePending = _c.isQuotePending, isAddonPlanLoading = _c.isAddonPlanLoading, isFeatureAddonsLoading = _c.isFeatureAddonsLoading;
21688
+ var accountId = useContext(PaymentContext).accountId;
21368
21689
  // Hooks
21369
21690
  var token = useToken();
21370
21691
  var paymentPlugins = usePaymentPlugins({
21371
21692
  apiHost: apiHost,
21372
21693
  token: token,
21694
+ accountId: accountId,
21373
21695
  }).paymentPlugins;
21374
21696
  var queryClient = useQueryClient();
21375
21697
  var isMobile = useIsMobile();
@@ -21380,39 +21702,42 @@ var CheckoutBarSummarySection = function (_a) {
21380
21702
  token: token,
21381
21703
  }),
21382
21704
  });
21383
- var isUpgradingCurrentSubscription = selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
21705
+ // When should checkout button be disabled?
21706
+ var isUpgradingSubscription = selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
21384
21707
  var disableCheckoutButton = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
21385
21708
  !selectedPriceList ||
21386
- // quantityLocal !== quotePreviewData.quantity ||
21387
21709
  isFetching ||
21388
- isUpgradingCurrentSubscription ||
21710
+ !isUpgradingSubscription ||
21389
21711
  open);
21390
21712
  var checkoutButtonDisabled = (quote === null || quote === void 0 ? void 0 : quote.amountDue) && (quote === null || quote === void 0 ? void 0 : quote.amountDue) > 0 ? false : disableCheckoutButton;
21391
21713
  var activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21392
21714
  var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === ChargeType.USAGE;
21393
- var hasPaymentMethodsOrIsFree = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) || Boolean(quote && getQuoteAmountDue(quote) === 0);
21394
- return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : '') }, { children: [quote && (jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'items-center justify-between w-full' : 'flex-col') }, { children: [jsx("div", __assign({ className: "bunny-text-slate-500 bunny-font-medium bunny-text-right", style: { fontSize: '11px' } }, { children: "TOTAL" })), jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] }))), hasPaymentMethodsOrIsFree && (jsx(CheckoutButton, { checkoutButtonDisabled: checkoutButtonDisabled, onClickCheckout: onClickCheckout, loading: !quote }))] })));
21715
+ var hasPaymentPlugins = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length);
21716
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : '') }, { children: [quote && (jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'items-center justify-between w-full' : 'flex-col') }, { children: [jsx("div", __assign({ className: "bunny-text-slate-500 bunny-font-medium bunny-text-right", style: { fontSize: '11px' } }, { children: "TOTAL" })), jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] }))), jsx(CheckoutButton, { checkoutButtonDisabled: checkoutButtonDisabled || !hasPaymentPlugins, onClickCheckout: onClickCheckout, loading: !quote || isQuotePending || isAddonPlanLoading || isFeatureAddonsLoading, tooltipText: !hasPaymentPlugins
21717
+ ? 'Cannot checkout. No valid payment plugins found. Please contact your administrator.'
21718
+ : undefined })] })));
21395
21719
  };
21396
21720
 
21397
21721
  var PlanPickerCheckoutBarWrapper = function (_a) {
21398
- var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21722
+ var editingQuote = _a.editingQuote, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21399
21723
  // Context
21400
21724
  var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
21401
21725
  var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
21402
21726
  if (!selectedPriceList)
21403
21727
  return null;
21404
- return (jsx(PlanPickerCheckoutBar, { editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
21728
+ return (jsx(PlanPickerCheckoutBar, { editingQuote: editingQuote, handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
21405
21729
  };
21406
21730
  var PlanPickerCheckoutBar = function (_a) {
21407
- var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21731
+ var editingQuote = _a.editingQuote, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21408
21732
  // Context
21409
- var token = useToken();
21410
21733
  var _b = useContext(SubscriptionsContext), upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
21411
- var _c = useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, handleSetEditingQuote = _c.handleSetEditingQuote;
21734
+ var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
21412
21735
  var apiHost = useContext(BunnyContext).apiHost;
21736
+ var quote = useContext(PlanManagerQuoteContext).quote;
21413
21737
  // Local state
21414
- var _d = useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
21738
+ var _c = useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
21415
21739
  // Hooks
21740
+ var token = useToken();
21416
21741
  var showSuccessNotification = useSuccessNotification();
21417
21742
  var queryClient = useQueryClient();
21418
21743
  var isMobile = useIsMobile();
@@ -21420,33 +21745,7 @@ var PlanPickerCheckoutBar = function (_a) {
21420
21745
  token: token,
21421
21746
  apiHost: apiHost,
21422
21747
  }).defaultPaymentMethod;
21423
- var createSubscriptionUpgradeQuote = useQuoteSubscriptionUpgrade();
21424
- var createSubscriptionUpdateQuote = useCreateSubscriptionQuote();
21425
21748
  // Mutations
21426
- var createQuote = useMutation({
21427
- mutationFn: function (_a) {
21428
- var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
21429
- return createSubscriptionUpgradeQuote(subscriptionId, priceListId, apiHost, token);
21430
- },
21431
- onSuccess: function (subscriptionUpdateData) {
21432
- var _a;
21433
- var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
21434
- setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21435
- handleSetEditingQuote(quote.id);
21436
- },
21437
- });
21438
- var createEmptyQuote = useMutation({
21439
- mutationFn: function (_a) {
21440
- var subscriptionId = _a.subscriptionId;
21441
- return createSubscriptionUpdateQuote([subscriptionId], apiHost, token);
21442
- },
21443
- onSuccess: function (subscriptionUpdateData) {
21444
- var _a;
21445
- var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
21446
- setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21447
- handleSetEditingQuote(quote.id);
21448
- },
21449
- });
21450
21749
  var updateCharge = useMutation({
21451
21750
  mutationFn: quoteChargeUpdate,
21452
21751
  onSuccess: function () {
@@ -21459,64 +21758,6 @@ var PlanPickerCheckoutBar = function (_a) {
21459
21758
  });
21460
21759
  },
21461
21760
  }).mutate;
21462
- // Queries
21463
- var quote = useQuery({
21464
- queryKey: QueryKeyFactory.default.createObjectKey({
21465
- objectName: 'editingQuote',
21466
- id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21467
- token: token,
21468
- }),
21469
- queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21470
- var quote;
21471
- return __generator(this, function (_a) {
21472
- switch (_a.label) {
21473
- case 0:
21474
- if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
21475
- throw new Error('editingQuote is undefined');
21476
- }
21477
- return [4 /*yield*/, getQuote({
21478
- id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21479
- token: token,
21480
- apiHost: apiHost,
21481
- })];
21482
- case 1:
21483
- quote = _a.sent();
21484
- return [2 /*return*/, quote];
21485
- }
21486
- });
21487
- }); },
21488
- enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
21489
- }).data;
21490
- useEffect(function () {
21491
- if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
21492
- console.error('upgradingSubscription is undefined');
21493
- return;
21494
- }
21495
- var upgradingCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
21496
- if (upgradingCurrentSubscription) {
21497
- createEmptyQuote.mutate({
21498
- subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21499
- });
21500
- }
21501
- else {
21502
- createQuote.mutate({
21503
- subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21504
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21505
- });
21506
- }
21507
- }, [selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id]);
21508
- // Reset query key on unmount
21509
- useEffect(function () {
21510
- return function () {
21511
- queryClient.invalidateQueries({
21512
- queryKey: QueryKeyFactory.default.calculatedPricesKey({
21513
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21514
- quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
21515
- token: token,
21516
- }),
21517
- });
21518
- };
21519
- }, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
21520
21761
  var handleCheckoutSuccess = function () {
21521
21762
  queryClient.invalidateQueries({
21522
21763
  queryKey: QueryKeyFactory.default.createTableKey({
@@ -21531,9 +21772,6 @@ var PlanPickerCheckoutBar = function (_a) {
21531
21772
  showSuccessNotification('Your subscription has been created', 'Checkout successful');
21532
21773
  onCheckoutSuccess();
21533
21774
  };
21534
- var onCheckoutFail = function (error) {
21535
- handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
21536
- };
21537
21775
  function onChangeQuantity(chargeId, quantity) {
21538
21776
  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); });
21539
21777
  var quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) {
@@ -21555,6 +21793,18 @@ var PlanPickerCheckoutBar = function (_a) {
21555
21793
  token: token,
21556
21794
  });
21557
21795
  }
21796
+ // Reset query key on unmount
21797
+ useEffect(function () {
21798
+ return function () {
21799
+ queryClient.invalidateQueries({
21800
+ queryKey: QueryKeyFactory.default.calculatedPricesKey({
21801
+ priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21802
+ quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
21803
+ token: token,
21804
+ }),
21805
+ });
21806
+ };
21807
+ }, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
21558
21808
  return (jsxs("div", __assign({ className: "flex ".concat(isMobile ? 'bunny-flex-col bunny-gap-4' : 'bunny-flex-row', " my-2 p-4 justify-between bg-white rounded-md ").concat(shadow ? "shadow-".concat(shadow) : '') }, { children: [jsx("div", __assign({ className: "".concat(isMobile ? 'bunny-flex bunny-flex-col' : 'bunny-flex', " bunny-gap-4") }, { children: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.map(function (charge, index) {
21559
21809
  var _a;
21560
21810
  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); });
@@ -21568,13 +21818,13 @@ var PlanPickerCheckoutBar = function (_a) {
21568
21818
  return (jsx(CheckoutBarInput, { disabled: !chargeQuantity, charge: charge, quantity: chargeQuantity !== null && chargeQuantity !== void 0 ? chargeQuantity : 0, selectedPriceList: selectedPriceList, onQuantityChanged: function (quantity) {
21569
21819
  onChangeQuantity(charge.id, quantity);
21570
21820
  } }, index));
21571
- }) })), jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription }), jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
21821
+ }) })), jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription }), jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: function (error) { return handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error); }, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
21572
21822
  };
21573
21823
 
21574
21824
  // WARNING: There is a preview button on APP that will need to be changed if this query is changed
21575
- var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n showPriceAsMonthly\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n featureAddon\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n priceList {\n id\n }\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
21825
+ var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n showPriceAsMonthly\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n addonPlans {\n addon\n availableFrom\n availableTo\n basePrice\n code\n contactUsLabel\n contactUsUrl\n createdAt\n description\n id\n internalNotes\n isAvailableNow\n isVisible\n name\n position\n pricingDescription\n pricingStyle\n productId\n productPlanName\n selfServiceBuy\n selfServiceCancel\n selfServiceRenew\n updatedAt\n priceLists {\n id\n periodMonths\n showPriceAsMonthly\n monthlyBasePrice\n basePrice\n currencyId\n plan {\n pricingStyle\n }\n }\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n addon\n addonPlans {\n id\n name\n code\n contactUsLabel\n contactUsUrl\n description\n position\n pricingDescription\n pricingStyle\n addon\n basePrice\n priceLists {\n id\n basePrice\n periodMonths\n isVisible\n }\n }\n compatiblePlans {\n id\n name\n code\n contactUsLabel\n contactUsUrl\n description\n position\n pricingDescription\n pricingStyle\n addon\n }\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n featureAddon\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n priceList {\n id\n }\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
21576
21826
  var getPriceListChangeOptions = function (_a) {
21577
- var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
21827
+ var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription, accountCurrencyId = _a.accountCurrencyId;
21578
21828
  return __awaiter(void 0, void 0, void 0, function () {
21579
21829
  var response, priceListChangeOptions;
21580
21830
  return __generator(this, function (_b) {
@@ -21595,6 +21845,8 @@ var getPriceListChangeOptions = function (_a) {
21595
21845
  if (priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) {
21596
21846
  priceListChangeOptions.priceLists.sort(function (a, b) { return a.plan.position - b.plan.position; });
21597
21847
  }
21848
+ // Filter out price lists that don't have the same currency as the account
21849
+ priceListChangeOptions.priceLists = priceListChangeOptions.priceLists.filter(function (priceList) { return priceList.currencyId === accountCurrencyId; });
21598
21850
  return [2 /*return*/, priceListChangeOptions];
21599
21851
  }
21600
21852
  });
@@ -21606,6 +21858,34 @@ var ErrorView = function (_a) {
21606
21858
  return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full", style: { marginTop: "80px" } }, { children: [jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
21607
21859
  };
21608
21860
 
21861
+ var Text$d = Typography.Text;
21862
+ var BillingPeriodSelector = function (_a) {
21863
+ var availableBillingPeriods = _a.availableBillingPeriods, onChangeBillingPeriod = _a.onChangeBillingPeriod, products = _a.products, selectedBillingPeriod = _a.selectedBillingPeriod, selectedProduct = _a.selectedProduct, onChangeProduct = _a.onChangeProduct;
21864
+ var _b = useContext(BrandContext), secondaryColor = _b.secondaryColor, brandColor = _b.brandColor;
21865
+ var isMobile = useIsMobile();
21866
+ if (!availableBillingPeriods || (availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.length) < 2)
21867
+ return null;
21868
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-8 bunny-pb-6" }, { children: [(products === null || products === void 0 ? void 0 : products.length) && products.length > 1 && (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsx("div", __assign({ className: "bunny-font-medium bunny-text-xs", style: {
21869
+ color: secondaryColor,
21870
+ } }, { children: "Select product" })), jsx(ProductRadioStyled, __assign({ brandColor: brandColor }, { children: jsx(Radio.Group, __assign({ onChange: function (e) {
21871
+ onChangeProduct(products === null || products === void 0 ? void 0 : products.find(function (product) { return product.id === e.target.value; }));
21872
+ }, value: selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id, buttonStyle: "solid" }, { children: jsx(Space, __assign({ className: "bunny-gap-2" }, { children: products === null || products === void 0 ? void 0 : products.map(function (product) { return (jsx(Radio.Button, __assign({ value: product.id }, { children: product.name }), product.id)); }) })) })) }))] }))), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-gap-2" }, { children: [!isMobile && (jsx(Text$d, __assign({ className: "bunny-font-medium bunny-text-xs", style: {
21873
+ color: secondaryColor,
21874
+ } }, { children: "Subscription term" }))), jsx(StyledRadioGroup, __assign({ className: "bunny-w-full", "$isMobile": isMobile }, { children: jsx(Radio.Group, __assign({ onChange: function (e) {
21875
+ onChangeBillingPeriod(e.target.value);
21876
+ }, value: selectedBillingPeriod, size: "small", buttonStyle: "solid" }, { children: availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.map(function (periodMonth, index) {
21877
+ return (jsx(Radio.Button, __assign({ value: periodMonthsConverter(periodMonth) }, { children: periodMonthsConverter(periodMonth) }), index));
21878
+ }) })) }))] }))] })));
21879
+ };
21880
+ var ProductRadioStyled = styled.div.withConfig({
21881
+ shouldForwardProp: function (prop) { return !['brandColor'].includes(prop); },
21882
+ })(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"], ["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"])), function (props) { return (props.brandColor ? props.brandColor : 'black'); }, function (props) { return (props.brandColor ? props.brandColor : 'black'); });
21883
+ var StyledRadioGroup = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .ant-radio-group {\n display: flex !important;\n align-items: center !important;\n padding: 4px !important;\n background-color: ", " !important;\n border-radius: 6px !important;\n width: ", " !important;\n border: none !important;\n }\n .ant-radio-button-wrapper {\n flex-grow: 1 !important;\n z-index: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n border-color: transparent !important;\n border-radius: 4px !important;\n > span {\n font-size: 11px !important;\n }\n }\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n background: transparent !important;\n }\n .ant-radio-button-wrapper::before {\n display: none !important;\n }\n"], ["\n .ant-radio-group {\n display: flex !important;\n align-items: center !important;\n padding: 4px !important;\n background-color: ", " !important;\n border-radius: 6px !important;\n width: ", " !important;\n border: none !important;\n }\n .ant-radio-button-wrapper {\n flex-grow: 1 !important;\n z-index: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n border-color: transparent !important;\n border-radius: 4px !important;\n > span {\n font-size: 11px !important;\n }\n }\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n background: transparent !important;\n }\n .ant-radio-button-wrapper::before {\n display: none !important;\n }\n"])), GRAY_200, function (_a) {
21884
+ var $isMobile = _a.$isMobile;
21885
+ return ($isMobile ? '100%' : 'min-content');
21886
+ });
21887
+ var templateObject_1$4, templateObject_2;
21888
+
21609
21889
  var calculateNewQuantity = function (priceList, currentQuantity) {
21610
21890
  if (currentQuantity === void 0) { currentQuantity = 1; }
21611
21891
  var priceListRecurringCharge = priceList === null || priceList === void 0 ? void 0 : priceList.charges.find(function (priceListCharge) {
@@ -21637,48 +21917,6 @@ var calculateNewQuantity = function (priceList, currentQuantity) {
21637
21917
  }
21638
21918
  };
21639
21919
 
21640
- function isAddonPurchased(featureAddon, currentSubscription) {
21641
- var purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(function (charge) { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
21642
- if (!purchasedFeatureAddons)
21643
- return false;
21644
- return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
21645
- }
21646
- function priceListHasUnpurchasedFeatureAddons(priceList, currentSubscription) {
21647
- var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
21648
- var purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(function (charge) { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
21649
- var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
21650
- return !(purchasedFeatureAddons === null || purchasedFeatureAddons === void 0 ? void 0 : purchasedFeatureAddons.some(function (purchasedCharge) { var _a; return ((_a = purchasedCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === charge.id; }));
21651
- });
21652
- return unpurchasedFeatureAddons.length > 0;
21653
- }
21654
-
21655
- var BillingPeriodSelector = function (_a) {
21656
- var availableBillingPeriods = _a.availableBillingPeriods, onChangeBillingPeriod = _a.onChangeBillingPeriod, products = _a.products, selectedBillingPeriod = _a.selectedBillingPeriod, selectedProduct = _a.selectedProduct, onChangeProduct = _a.onChangeProduct;
21657
- var _b = useContext(BrandContext), secondaryColor = _b.secondaryColor, brandColor = _b.brandColor;
21658
- var isMobile = useIsMobile();
21659
- if (!availableBillingPeriods || (availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.length) < 2)
21660
- return null;
21661
- return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-8 bunny-pb-6" }, { children: [(products === null || products === void 0 ? void 0 : products.length) && products.length > 1 && (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsx("div", __assign({ className: "bunny-font-medium bunny-text-xs", style: {
21662
- color: secondaryColor,
21663
- } }, { children: "Select product" })), jsx(ProductRadioStyled, __assign({ brandColor: brandColor }, { children: jsx(Radio.Group, __assign({ onChange: function (e) {
21664
- onChangeProduct(products === null || products === void 0 ? void 0 : products.find(function (product) { return product.id === e.target.value; }));
21665
- }, value: selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id, buttonStyle: "solid" }, { children: jsx(Space, __assign({ className: "bunny-gap-2" }, { children: products === null || products === void 0 ? void 0 : products.map(function (product) { return (jsx(Radio.Button, __assign({ value: product.id }, { children: product.name }), product.id)); }) })) })) }))] }))), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-gap-2" }, { children: [!isMobile && (jsx("div", __assign({ className: "bunny-font-medium bunny-text-xs", style: {
21666
- color: secondaryColor,
21667
- } }, { children: "Subscription term" }))), jsx(StyledRadioGroup, __assign({ className: "bunny-w-full", "$isMobile": isMobile }, { children: jsx(Radio.Group, __assign({ onChange: function (e) {
21668
- onChangeBillingPeriod(e.target.value);
21669
- }, value: selectedBillingPeriod, size: "small", buttonStyle: "solid" }, { children: availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.map(function (periodMonth, index) {
21670
- return (jsx(Radio.Button, __assign({ value: periodMonthsConverter(periodMonth) }, { children: periodMonthsConverter(periodMonth) }), index));
21671
- }) })) }))] }))] })));
21672
- };
21673
- var ProductRadioStyled = styled.div.withConfig({
21674
- shouldForwardProp: function (prop) { return !['brandColor'].includes(prop); },
21675
- })(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"], ["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"])), function (props) { return (props.brandColor ? props.brandColor : 'black'); }, function (props) { return (props.brandColor ? props.brandColor : 'black'); });
21676
- var StyledRadioGroup = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .ant-radio-group {\n display: flex !important;\n align-items: center !important;\n padding: 4px !important;\n background-color: ", " !important;\n border-radius: 6px !important;\n width: ", " !important;\n border: none !important;\n }\n .ant-radio-button-wrapper {\n flex-grow: 1 !important;\n z-index: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n border-color: transparent !important;\n border-radius: 4px !important;\n > span {\n font-size: 11px !important;\n }\n }\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n background: transparent !important;\n }\n .ant-radio-button-wrapper::before {\n display: none !important;\n }\n"], ["\n .ant-radio-group {\n display: flex !important;\n align-items: center !important;\n padding: 4px !important;\n background-color: ", " !important;\n border-radius: 6px !important;\n width: ", " !important;\n border: none !important;\n }\n .ant-radio-button-wrapper {\n flex-grow: 1 !important;\n z-index: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n border-color: transparent !important;\n border-radius: 4px !important;\n > span {\n font-size: 11px !important;\n }\n }\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n background: transparent !important;\n }\n .ant-radio-button-wrapper::before {\n display: none !important;\n }\n"])), GRAY_200, function (_a) {
21677
- var $isMobile = _a.$isMobile;
21678
- return ($isMobile ? '100%' : 'min-content');
21679
- });
21680
- var templateObject_1$4, templateObject_2;
21681
-
21682
21920
  var NextPriceListButton = function (_a) {
21683
21921
  var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21684
21922
  return (jsxs("div", __assign({ className: "bunny-absolute bunny-flex bunny-gap-1", style: { top: '12px', right: '8px' } }, { children: [priceListStart > 0 && (jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
@@ -21703,6 +21941,8 @@ var NextPriceListButton = function (_a) {
21703
21941
  var getAvailablePlansAndPriceLists = function (_a) {
21704
21942
  var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, plansToDisplay = _a.plansToDisplay;
21705
21943
  var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + plansToDisplay);
21944
+ // displayPriceLists don't have enough data in them, so we're finding the same price list within
21945
+ // priceListChangeOptions which has more data in it.
21706
21946
  var availablePriceListsArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
21707
21947
  var _a;
21708
21948
  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; });
@@ -21719,14 +21959,13 @@ var everythingInPlusString = function (_a) {
21719
21959
  };
21720
21960
 
21721
21961
  var PriceListCardButton = function (_a) {
21722
- var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
21723
- // Context
21962
+ var disableSelectCurrentPlan = _a.disableSelectCurrentPlan, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
21724
21963
  var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
21725
- var showBuyAddonsButton = isPriceListCurrentSubscription &&
21726
- subscriptionPlan &&
21727
- priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21728
21964
  var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
21965
+ var canUpgradeFromTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
21729
21966
  var createButtonText = function () {
21967
+ if (isPriceListCurrentSubscription && canUpgradeFromTrial)
21968
+ return 'Upgrade from trial';
21730
21969
  if (isPriceListCurrentSubscription)
21731
21970
  return 'Current';
21732
21971
  if (isSelected)
@@ -21737,11 +21976,9 @@ var PriceListCardButton = function (_a) {
21737
21976
  return priceList.plan.contactUsLabel;
21738
21977
  return 'Select';
21739
21978
  };
21740
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end bunny-gap-3" }, { children: [showBuyAddonsButton && (jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsx(Button, __assign({ className: "bunny-w-full", disabled: disableOnClick, style: {
21741
- maxWidth: '240px',
21742
- }, type: isSelected ? 'primary' : 'default' }, { children: "Buy addons" })) }))), jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsx(Button, __assign({ className: "bunny-w-full", disabled: disableOnClick || showBuyAddonsButton, style: {
21743
- maxWidth: '240px',
21744
- }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) }))] })));
21979
+ return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end bunny-gap-3" }, { children: jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsx(Button, __assign({ className: "bunny-w-full", disabled: disableSelectCurrentPlan, style: {
21980
+ maxWidth: '240px',
21981
+ }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
21745
21982
  };
21746
21983
 
21747
21984
  var Text$c = Typography.Text;
@@ -21770,9 +22007,9 @@ var calculatePriceDecimals = function (priceList) {
21770
22007
  return 0;
21771
22008
  };
21772
22009
  var PriceListCardPrice = function (_a) {
21773
- var priceList = _a.priceList;
22010
+ var priceList = _a.priceList, _b = _a.fontSize, fontSize = _b === void 0 ? '32px' : _b;
21774
22011
  var priceDecimals = calculatePriceDecimals(priceList);
21775
- return (jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: '32px' } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === PricingStyle.PRICED
22012
+ return (jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: fontSize } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === PricingStyle.PRICED
21776
22013
  ? formatCurrency(getPrice(priceList), priceList.currencyId, priceDecimals)
21777
22014
  : priceList.plan.pricingStyle === PricingStyle.CONTACT_US
21778
22015
  ? ''
@@ -21816,33 +22053,63 @@ function PriceDescriptionString(_a) {
21816
22053
  var PriceListCardTitle = function (_a) {
21817
22054
  var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
21818
22055
  var isMobile = useIsMobile();
21819
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-4" }, { children: [Boolean(trialRemainingDays) && (jsx("div", __assign({ className: "bunny-font-medium bunny-text-secondary", style: { height: "1rem" } }, { children: isPriceListCurrentSubscription
21820
- ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
21821
- : " " }))), jsx("div", __assign({ className: "bunny-font-medium bunny-text-center ".concat(isMobile ? "bunny-text-slate-500" : "bunny-text-orange-600"), style: { fontSize: "20px" } }, { children: priceList.plan.name }))] })));
21822
- };
21823
-
21824
- var PLAN_GRID_PADDING = 4;
21825
- var PlanPickerGridCell = function (_a) {
21826
- var children = _a.children, noBorder = _a.noBorder;
21827
- var isMobile = useIsMobile();
21828
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col", style: isMobile
21829
- ? {}
21830
- : __assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(SLATE_200) })) }, { children: [jsx("div", __assign({ className: "bunny-grow" }, { children: children })), !isMobile && jsx(Divider, {})] })));
22056
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-4" }, { children: [Boolean(trialRemainingDays) && (jsx("div", __assign({ className: "bunny-font-medium bunny-text-secondary", style: { height: '1rem' } }, { children: isPriceListCurrentSubscription
22057
+ ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? '' : 's')
22058
+ : ' ' }))), jsx("div", __assign({ className: "bunny-font-medium bunny-text-center ".concat(isMobile ? 'bunny-text-slate-500' : 'bunny-text-orange-600'), style: { fontSize: '20px' } }, { children: priceList.plan.name }))] })));
21831
22059
  };
21832
22060
 
21833
- var PriceListCardDesktop = function (_a) {
21834
- var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
21835
- return (jsx(PlanPickerGridCell, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 ".concat(disableOnClick ? '' : 'cursor-pointer'), onClick: function () {
21836
- if (!disableOnClick) {
21837
- if (priceList.plan.pricingStyle === PricingStyle.CONTACT_US) {
21838
- window.open(priceList.plan.contactUsUrl, '_blank');
21839
- }
21840
- else
21841
- onClick(priceList);
21842
- }
22061
+ var PriceListSelectorContext = createContext({});
22062
+ var showInfoNotification = useInfoNotification();
22063
+ function PriceListSelectorProvider(_a) {
22064
+ var children = _a.children;
22065
+ // Context
22066
+ var isInPreviewMode = useContext(SubscriptionsContext).isInPreviewMode;
22067
+ var _b = useContext(QuotePreviewContext), quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
22068
+ // Handlers
22069
+ var onChangePriceList = useCallback(function (selectedPriceList) {
22070
+ if (isInPreviewMode)
22071
+ return showInfoNotification('You are in preview mode');
22072
+ return setQuotePreviewData({
22073
+ priceList: selectedPriceList,
22074
+ quantity: calculateNewQuantity(selectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
22075
+ });
22076
+ }, [isInPreviewMode, setQuotePreviewData, showInfoNotification]);
22077
+ // Reset quote preview data when parent (should be PlanPicker) is unmounted
22078
+ useEffect(function () {
22079
+ return function () {
22080
+ setQuotePreviewData({});
22081
+ };
22082
+ }, [setQuotePreviewData]);
22083
+ return (jsx(PriceListSelectorContext.Provider, __assign({ value: { onChangePriceList: onChangePriceList } }, { children: children })));
22084
+ }
22085
+
22086
+ var PLAN_GRID_PADDING = 4;
22087
+ var PlanPickerGridCell = function (_a) {
22088
+ var children = _a.children, noBorder = _a.noBorder;
22089
+ var isMobile = useIsMobile();
22090
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col", style: isMobile
22091
+ ? {}
22092
+ : __assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(SLATE_200) })) }, { children: [jsx("div", __assign({ className: "bunny-grow" }, { children: children })), !isMobile && jsx(Divider, {})] })));
22093
+ };
22094
+
22095
+ var PriceListCardDesktop = function (_a) {
22096
+ var hideButton = _a.hideButton, description = _a.description, disableSelectCurrentPlan = _a.disableSelectCurrentPlan, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays, noBorder = _a.noBorder;
22097
+ var onChangePriceList = useContext(PriceListSelectorContext).onChangePriceList;
22098
+ function handleChangePriceList(priceList) {
22099
+ onChangePriceList(priceList);
22100
+ }
22101
+ return (jsx(PlanPickerGridCell, __assign({ noBorder: noBorder }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 ".concat(disableSelectCurrentPlan ? '' : 'cursor-pointer'), onClick: function () {
22102
+ if (!disableSelectCurrentPlan) {
22103
+ if (priceList.plan.pricingStyle === PricingStyle.CONTACT_US) {
22104
+ window.open(priceList.plan.contactUsUrl, '_blank');
22105
+ }
22106
+ else {
22107
+ handleChangePriceList(priceList);
22108
+ }
22109
+ }
21843
22110
  }, style: {
21844
22111
  height: '100%',
21845
- } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-3" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardPrice, { priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })) }));
22112
+ } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-3" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardPrice, { priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), !hideButton && (jsx(PriceListCardButton, { disableSelectCurrentPlan: disableSelectCurrentPlan, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan }))] })) })));
21846
22113
  };
21847
22114
 
21848
22115
  var CheckIcon = function (_a) {
@@ -21851,23 +22118,24 @@ var CheckIcon = function (_a) {
21851
22118
  };
21852
22119
 
21853
22120
  var PriceListCardMobile = function (_a) {
21854
- var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
22121
+ var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
21855
22122
  var brandColor = useContext(BrandContext).brandColor;
22123
+ var onChangePriceList = useContext(PriceListSelectorContext).onChangePriceList;
21856
22124
  return (jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-border-2 bunny-border-solid bunny-rounded-lg bunny-p-4", onClick: function () {
21857
22125
  if (!disableOnClick)
21858
- onClick(priceList);
22126
+ onChangePriceList(priceList);
21859
22127
  }, style: {
21860
22128
  minWidth: '220px',
21861
22129
  borderColor: isSelected ? brandColor : SLATE_200,
21862
22130
  } }, { children: [isSelected && (jsx("div", __assign({ className: "bunny-absolute", style: {
21863
22131
  top: '10px',
21864
22132
  right: '10px',
21865
- } }, { children: jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardPrice, { priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
22133
+ } }, { children: jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardPrice, { priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsx(PriceListCardButton, { disableSelectCurrentPlan: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
21866
22134
  };
21867
22135
 
21868
22136
  var PriceListCard = function (_a) {
21869
22137
  var _b;
21870
- var isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
22138
+ var hideButton = _a.hideButton, isSelected = _a.isSelected, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, noBorder = _a.noBorder;
21871
22139
  // Context
21872
22140
  var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
21873
22141
  var isMobile = useIsMobile();
@@ -21877,12 +22145,9 @@ var PriceListCard = function (_a) {
21877
22145
  var activeCharge = (_b = getActivePlanPriceData(priceList, priceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21878
22146
  // Is the price list the current price list for the upgradingSubscription
21879
22147
  var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21880
- var canPurchaseFeatureAddons = priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21881
- var disableOnClick = isPriceListDisabled({
22148
+ var disableSelectCurrentPlan = isPriceListDisabled({
21882
22149
  priceList: priceList,
21883
- subscriptions: subscriptions,
21884
22150
  upgradingSubscription: upgradingSubscription,
21885
- canPurchaseFeatureAddons: canPurchaseFeatureAddons,
21886
22151
  });
21887
22152
  var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
21888
22153
  var _a, _b;
@@ -21894,22 +22159,19 @@ var PriceListCard = function (_a) {
21894
22159
  return null;
21895
22160
  }
21896
22161
  var feature = activeCharge.feature;
21897
- return isMobile ? (jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
22162
+ return isMobile ? (jsx(PriceListCardMobile, { description: description, disableOnClick: disableSelectCurrentPlan, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsx(PriceListCardDesktop, { hideButton: hideButton, description: description, disableSelectCurrentPlan: disableSelectCurrentPlan, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, noBorder: noBorder }));
21898
22163
  };
21899
22164
 
21900
- var QUOTE_CHARGE_CREATE$1 = "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n quoteChargeCreate(\n endDate: $endDate\n price: $price\n priceListChargeId: $priceListChargeId\n quantity: $quantity\n quoteChangeId: $quoteChangeId\n startDate: $startDate\n subscriptionChargeId: $subscriptionChargeId\n ) {\n quoteCharge {\n quoteChange {\n id\n quoteId\n }\n id\n }\n }\n}\n\n";
22165
+ var QUOTE_CHARGE_CREATE = "\n".concat(QUOTE_FIELDS(), "\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 quote {\n ...QuoteFields\n }\n }\n id\n }\n }\n}\n\n");
21901
22166
  var quoteChargeCreate = function (_a) {
21902
- var
21903
- // endDate,
21904
- price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
22167
+ var price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
21905
22168
  return __awaiter(void 0, void 0, void 0, function () {
21906
22169
  var response;
21907
22170
  return __generator(this, function (_b) {
21908
22171
  switch (_b.label) {
21909
22172
  case 0: return [4 /*yield*/, gqlRequest({
21910
- query: QUOTE_CHARGE_CREATE$1,
22173
+ query: QUOTE_CHARGE_CREATE,
21911
22174
  vars: {
21912
- // endDate,
21913
22175
  price: price,
21914
22176
  priceListChargeId: priceListChargeId,
21915
22177
  quantity: quantity,
@@ -21931,32 +22193,38 @@ var quoteChargeCreate = function (_a) {
21931
22193
  });
21932
22194
  };
21933
22195
 
21934
- var QUOTE_CHARGE_CREATE = "\nmutation QuoteChargeDelete ($quoteChargeId: ID!) {\n quoteChargeDelete(\n quoteChargeId: $quoteChargeId\n ) {\n errors\n quoteCharge {\n quoteChange {\n id\n quoteId\n }\n }\n }\n}\n\n";
22196
+ var QUOTE_CHARGE_DELETE = "\n".concat(QUOTE_FIELDS(), "\nmutation QuoteChargeDelete ($quoteChargeId: ID!) {\n quoteChargeDelete(\n quoteChargeId: $quoteChargeId\n ) {\n errors\n quoteCharge {\n quoteChange {\n id\n quoteId\n quote {\n ...QuoteFields\n }\n }\n }\n }\n}\n\n");
21935
22197
  var quoteChargeDelete = function (_a) {
21936
22198
  var quoteChargeId = _a.quoteChargeId, token = _a.token, apiHost = _a.apiHost;
21937
- return gqlRequest({
21938
- query: QUOTE_CHARGE_CREATE,
21939
- vars: {
21940
- quoteChargeId: quoteChargeId,
21941
- },
21942
- apiHost: apiHost,
21943
- token: token,
22199
+ return __awaiter(void 0, void 0, void 0, function () {
22200
+ var response;
22201
+ return __generator(this, function (_b) {
22202
+ switch (_b.label) {
22203
+ case 0: return [4 /*yield*/, gqlRequest({
22204
+ query: QUOTE_CHARGE_DELETE,
22205
+ vars: {
22206
+ quoteChargeId: quoteChargeId,
22207
+ },
22208
+ apiHost: apiHost,
22209
+ token: token,
22210
+ })];
22211
+ case 1:
22212
+ response = _b.sent();
22213
+ if (response.errors) {
22214
+ throw new Error(response.errors[0].message);
22215
+ }
22216
+ return [2 /*return*/, response.quoteChargeDelete.quoteCharge];
22217
+ }
22218
+ });
21944
22219
  });
21945
22220
  };
21946
22221
 
21947
- var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
22222
+ var useQuoteUpdateFeatureAddon = function (quote, featureAddon) {
21948
22223
  var apiHost = useContext(BunnyContext).apiHost;
22224
+ var _a = useContext(PlanManagerQuoteContext), addFeatureAddonLoading = _a.addFeatureAddonLoading, removeFeatureAddonLoading = _a.removeFeatureAddonLoading;
21949
22225
  var token = useToken();
21950
22226
  var queryClient = useQueryClient();
21951
22227
  var addedQuoteChargeId = useRef();
21952
- var editingQuote = useQuery({
21953
- queryKey: QueryKeyFactory.default.createObjectKey({
21954
- objectName: 'editingQuote',
21955
- id: quoteId,
21956
- }),
21957
- queryFn: function () { return (quoteId ? getQuote({ id: quoteId, token: token, apiHost: apiHost }) : undefined); },
21958
- enabled: Boolean(quoteId),
21959
- }).data;
21960
22228
  function handleAddFeatureAddon() {
21961
22229
  quoteChargeCreateMutation();
21962
22230
  }
@@ -21965,7 +22233,7 @@ var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
21965
22233
  return;
21966
22234
  quoteChargeDeleteMutation({ quoteChargeId: addedQuoteChargeId.current });
21967
22235
  }
21968
- var _a = useMutation({
22236
+ var _b = useMutation({
21969
22237
  mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21970
22238
  var quoteCharge;
21971
22239
  return __generator(this, function (_a) {
@@ -21973,12 +22241,13 @@ var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
21973
22241
  case 0:
21974
22242
  if (!token)
21975
22243
  throw new Error('Token is required');
21976
- if (!editingQuote)
22244
+ if (!quote)
21977
22245
  throw new Error('Editing quote is required');
21978
22246
  return [4 /*yield*/, quoteChargeCreate({
21979
- quoteChangeId: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.quoteChanges[editingQuote.quoteChanges.length - 1].id,
22247
+ // TODO: get the correct quoteChangeId
22248
+ quoteChangeId: quote === null || quote === void 0 ? void 0 : quote.quoteChanges[quote.quoteChanges.length - 1].id,
21980
22249
  priceListChargeId: featureAddon.id,
21981
- startDate: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.startDate,
22250
+ startDate: quote === null || quote === void 0 ? void 0 : quote.startDate,
21982
22251
  apiHost: apiHost,
21983
22252
  token: token,
21984
22253
  })];
@@ -21991,40 +22260,62 @@ var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
21991
22260
  onSuccess: function (_a) {
21992
22261
  var quoteCharge = _a.quoteCharge;
21993
22262
  addedQuoteChargeId.current = quoteCharge.id;
21994
- queryClient.invalidateQueries({
21995
- queryKey: QueryKeyFactory.default.createObjectKey({
21996
- objectName: 'editingQuote',
21997
- }),
21998
- });
22263
+ queryClient.setQueryData(QueryKeyFactory.default.createObjectKey({
22264
+ objectName: 'editingQuote',
22265
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
22266
+ token: token,
22267
+ }), quoteCharge.quoteChange.quote);
21999
22268
  },
22000
- }), quoteChargeCreateMutation = _a.mutate, isCreatingFeatureAddon = _a.isPending;
22001
- var _b = useMutation({
22269
+ }), quoteChargeCreateMutation = _b.mutate, isCreatingFeatureAddon = _b.isPending;
22270
+ var _c = useMutation({
22002
22271
  mutationFn: function (_a) {
22003
22272
  var quoteChargeId = _a.quoteChargeId;
22004
- return quoteChargeDelete({ quoteChargeId: quoteChargeId, token: token, apiHost: apiHost });
22273
+ return __awaiter(void 0, void 0, void 0, function () {
22274
+ var response;
22275
+ return __generator(this, function (_b) {
22276
+ switch (_b.label) {
22277
+ case 0: return [4 /*yield*/, quoteChargeDelete({ quoteChargeId: quoteChargeId, token: token, apiHost: apiHost })];
22278
+ case 1:
22279
+ response = _b.sent();
22280
+ return [2 /*return*/, { quoteCharge: response }];
22281
+ }
22282
+ });
22283
+ });
22005
22284
  },
22006
- onSuccess: function () {
22285
+ onSuccess: function (_a) {
22286
+ var quoteCharge = _a.quoteCharge;
22007
22287
  addedQuoteChargeId.current = undefined;
22008
- queryClient.invalidateQueries({
22009
- queryKey: QueryKeyFactory.default.createObjectKey({
22010
- objectName: 'editingQuote',
22011
- }),
22012
- });
22288
+ queryClient.setQueryData(QueryKeyFactory.default.createObjectKey({
22289
+ objectName: 'editingQuote',
22290
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
22291
+ token: token,
22292
+ }), quoteCharge.quoteChange.quote);
22013
22293
  },
22014
- }), quoteChargeDeleteMutation = _b.mutate, isDeletingFeatureAddon = _b.isPending;
22294
+ }), quoteChargeDeleteMutation = _c.mutate, isDeletingFeatureAddon = _c.isPending;
22295
+ var isPending = isCreatingFeatureAddon || isDeletingFeatureAddon;
22015
22296
  useEffect(function () {
22016
22297
  // If the quoteId changes, then its because we changed pricelists, so we need to reset the addedQuoteChargeId
22017
22298
  // so that isChecked becomes false
22018
22299
  addedQuoteChargeId.current = undefined;
22019
- }, [quoteId]);
22300
+ }, [quote === null || quote === void 0 ? void 0 : quote.id]);
22301
+ useEffect(function () {
22302
+ if (isPending) {
22303
+ addFeatureAddonLoading(featureAddon.id);
22304
+ }
22305
+ else {
22306
+ removeFeatureAddonLoading(featureAddon.id);
22307
+ }
22308
+ return function () {
22309
+ removeFeatureAddonLoading(featureAddon.id);
22310
+ };
22311
+ }, [isPending]);
22020
22312
  return {
22021
22313
  handleAddFeatureAddon: handleAddFeatureAddon,
22022
22314
  handleRemoveFeatureAddon: handleRemoveFeatureAddon,
22023
- isPending: isCreatingFeatureAddon || isDeletingFeatureAddon,
22315
+ isPending: isPending,
22024
22316
  isChecked: isDeletingFeatureAddon
22025
22317
  ? false
22026
22318
  : Boolean(addedQuoteChargeId.current || isCreatingFeatureAddon),
22027
- editingQuoteLoaded: editingQuote !== undefined,
22028
22319
  };
22029
22320
  };
22030
22321
 
@@ -22066,7 +22357,8 @@ function FeatureAddonRow(_a) {
22066
22357
  var featureAddon = _a.featureAddon, priceList = _a.priceList;
22067
22358
  var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
22068
22359
  var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
22069
- var _d = useQuoteUpdateFeatureAddon(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.editingQuoteId, featureAddon), handleAddFeatureAddon = _d.handleAddFeatureAddon, handleRemoveFeatureAddon = _d.handleRemoveFeatureAddon, isPending = _d.isPending, isChecked = _d.isChecked, editingQuoteLoaded = _d.editingQuoteLoaded;
22360
+ var quote = useContext(PlanManagerQuoteContext).quote;
22361
+ var _d = useQuoteUpdateFeatureAddon(quote, featureAddon), handleAddFeatureAddon = _d.handleAddFeatureAddon, handleRemoveFeatureAddon = _d.handleRemoveFeatureAddon, isPending = _d.isPending, isChecked = _d.isChecked;
22070
22362
  var brandColor = useContext(BrandContext).brandColor;
22071
22363
  var isPriceListSelected = ((_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id) === priceList.id;
22072
22364
  var isPurchased = isAddonPurchased(featureAddon, upgradingSubscription);
@@ -22078,7 +22370,7 @@ function FeatureAddonRow(_a) {
22078
22370
  periodMonths: priceList.periodMonths,
22079
22371
  doesPlanHaveFlatFeeCharges: false,
22080
22372
  }) }))] }));
22081
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-flex-wrap bunny-items-center bunny-justify-between bunny-gap-1" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center bunny-gap-1" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [checked ? (jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" })) : (jsx(CheckIcon, { backgroundColor: SLATE_200, size: "15px" })), featureAddon.name] })), jsx(Tooltip, __assign({ title: tooltipContent }, { children: jsx(InfoCircleOutlined, { className: "bunny-text-gray-500", size: 15 }) }))] })), jsx(Switch, { size: "small", loading: isPending, disabled: isDisabled || !editingQuoteLoaded, checked: checked, onChange: function (checked) {
22373
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-flex-wrap bunny-items-center bunny-justify-between bunny-gap-1" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center bunny-gap-1" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [checked ? (jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" })) : (jsx(CheckIcon, { backgroundColor: SLATE_200, size: "15px" })), featureAddon.name] })), jsx(Tooltip, __assign({ title: tooltipContent }, { children: jsx(InfoCircleOutlined, { className: "bunny-text-gray-500", size: 15 }) }))] })), jsx(Switch, { size: "small", loading: isPending, disabled: isDisabled || !quote, checked: checked, onChange: function (checked) {
22082
22374
  if (checked) {
22083
22375
  handleAddFeatureAddon();
22084
22376
  }
@@ -22108,23 +22400,169 @@ var filterUniqueFeatures = function (_a) {
22108
22400
  return updatedPriceLists;
22109
22401
  };
22110
22402
  var EverythingPlanFeatures = function (_a) {
22111
- var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
22403
+ var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay, _b = _a.hideBorder, hideBorder = _b === void 0 ? false : _b;
22112
22404
  var brandColor = useContext(BrandContext).brandColor;
22113
22405
  var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: displayPriceLists });
22114
22406
  return (jsx(Fragment, { children: __spreadArray([], Array(plansToDisplay), true).map(function (_, planIndex) {
22115
22407
  var priceList = uniquePlanFeatures[planIndex];
22116
22408
  var prevPriceList = displayPriceLists[planIndex - 1];
22117
22409
  if (!priceList)
22118
- return (jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(SLATE_200) } : {} }, planIndex));
22410
+ return (jsx("div", { style: prevPriceList && !hideBorder ? { borderLeft: "1px solid ".concat(SLATE_200) } : {} }, planIndex));
22119
22411
  if (!priceList.plan.planFeatures)
22120
22412
  return (jsxs("div", { children: [jsx(FeatureAddonsList, { priceList: priceList }), ";"] }, planIndex));
22121
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: { borderLeft: "1px solid ".concat(SLATE_200) } }, { children: [priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
22413
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: !hideBorder ? { borderLeft: "1px solid ".concat(SLATE_200) } : {} }, { children: [priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
22122
22414
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22123
22415
  return (jsxs("div", __assign({ className: "bunny-contents" }, { children: [prevPriceList && everythingInPlus && planIndex > 0 && planFeatureIndex === 0 && (jsx("div", __assign({ className: "bunny-font-medium", style: { fontSize: '13px' } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
22124
22416
  }), jsx(FeatureAddonsList, { priceList: priceList })] }), planIndex));
22125
22417
  }) }));
22126
22418
  };
22127
22419
 
22420
+ var QUOTE_CHANGE_DELETE = "\n".concat(QUOTE_FIELDS(), "\n mutation QuoteChangeDelete($id: ID!) {\n quoteChangeDelete(id: $id) {\n errors\n quoteChange {\n quote {\n ...QuoteFields\n }\n }\n }\n }\n");
22421
+ var quoteChangeDelete = function (_a) {
22422
+ var id = _a.id, apiHost = _a.apiHost, token = _a.token;
22423
+ return __awaiter(void 0, void 0, void 0, function () {
22424
+ var vars, response, errors;
22425
+ var _b;
22426
+ return __generator(this, function (_c) {
22427
+ switch (_c.label) {
22428
+ case 0:
22429
+ vars = {
22430
+ id: id,
22431
+ };
22432
+ return [4 /*yield*/, gqlRequest({
22433
+ query: QUOTE_CHANGE_DELETE,
22434
+ token: token,
22435
+ vars: vars,
22436
+ apiHost: apiHost,
22437
+ })];
22438
+ case 1:
22439
+ response = _c.sent();
22440
+ errors = (_b = response === null || response === void 0 ? void 0 : response.quoteChangeDelete) === null || _b === void 0 ? void 0 : _b.errors;
22441
+ if (errors)
22442
+ throw errors;
22443
+ return [2 /*return*/, response.quoteChangeDelete];
22444
+ }
22445
+ });
22446
+ });
22447
+ };
22448
+
22449
+ var QUOTE_CHANGE_CREATE = "\n".concat(QUOTE_FIELDS(), "\nmutation QuoteChangeCreate(\n $quoteId: ID!\n $priceListId: ID!\n $parentQuoteChangeId: ID!\n) {\n quoteChangeCreate(\n quoteId: $quoteId\n priceListId: $priceListId\n parentQuoteChangeId: $parentQuoteChangeId\n ) {\n errors\n quoteChange {\n id\n quote {\n ...QuoteFields\n }\n }\n }\n}\n");
22450
+ var quoteChangeCreate = function (_a) {
22451
+ var parentQuoteChangeId = _a.parentQuoteChangeId, priceListId = _a.priceListId, apiHost = _a.apiHost, token = _a.token, quoteId = _a.quoteId;
22452
+ return __awaiter(void 0, void 0, void 0, function () {
22453
+ var vars, response, errors;
22454
+ var _b;
22455
+ return __generator(this, function (_c) {
22456
+ switch (_c.label) {
22457
+ case 0:
22458
+ vars = {
22459
+ parentQuoteChangeId: parentQuoteChangeId,
22460
+ priceListId: priceListId,
22461
+ quoteId: quoteId,
22462
+ };
22463
+ return [4 /*yield*/, gqlRequest({
22464
+ query: QUOTE_CHANGE_CREATE,
22465
+ token: token,
22466
+ vars: vars,
22467
+ apiHost: apiHost,
22468
+ })];
22469
+ case 1:
22470
+ response = _c.sent();
22471
+ errors = (_b = response === null || response === void 0 ? void 0 : response.quoteChangeCreate) === null || _b === void 0 ? void 0 : _b.errors;
22472
+ if (errors)
22473
+ throw errors;
22474
+ return [2 /*return*/, response.quoteChangeCreate];
22475
+ }
22476
+ });
22477
+ });
22478
+ };
22479
+
22480
+ var useToggleAddonPlan = function (quote, plan, billingPeriod, selectedPriceList, setIsAddonPlanLoading) {
22481
+ var token = useToken();
22482
+ var isAdded = useRef(false);
22483
+ var queryClient = useQueryClient();
22484
+ var apiHost = useContext(BunnyContext).apiHost;
22485
+ var parentQuoteChange = useMemo(function () {
22486
+ return quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === selectedPriceList.id; });
22487
+ }, [quote, selectedPriceList]);
22488
+ var _a = useMutation({
22489
+ mutationFn: quoteChangeCreate,
22490
+ onSuccess: function (quoteChangeCreate) {
22491
+ isAdded.current = true;
22492
+ var updatedQuote = quoteChangeCreate.quoteChange.quote;
22493
+ queryClient.setQueryData(QueryKeyFactory.default.createObjectKey({
22494
+ objectName: 'editingQuote',
22495
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
22496
+ token: token,
22497
+ }), updatedQuote);
22498
+ },
22499
+ }), addAddonQuoteChange = _a.mutate, isAddingAddonQuoteChange = _a.isPending;
22500
+ var _b = useMutation({
22501
+ mutationFn: quoteChangeDelete,
22502
+ onSuccess: function (quoteChangeDelete) {
22503
+ isAdded.current = false;
22504
+ var updatedQuote = quoteChangeDelete.quoteChange.quote;
22505
+ queryClient.setQueryData(QueryKeyFactory.default.createObjectKey({
22506
+ objectName: 'editingQuote',
22507
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
22508
+ token: token,
22509
+ }), updatedQuote);
22510
+ },
22511
+ }), deleteQuoteChange = _b.mutate, isDeletingQuoteChange = _b.isPending;
22512
+ function handleAddAddonQuoteChange() {
22513
+ if (!parentQuoteChange) {
22514
+ throw new Error('Parent quote change not found');
22515
+ }
22516
+ var priceList = plan.priceLists.find(function (pl) { return pl.periodMonths === billingPeriod; });
22517
+ if (!priceList) {
22518
+ throw new Error('Price list not found');
22519
+ }
22520
+ if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
22521
+ throw new Error('Quote ID not found');
22522
+ }
22523
+ addAddonQuoteChange({
22524
+ parentQuoteChangeId: parentQuoteChange.id,
22525
+ priceListId: priceList.id,
22526
+ apiHost: apiHost,
22527
+ token: token,
22528
+ quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
22529
+ });
22530
+ }
22531
+ function handleDeleteQuoteChange() {
22532
+ var priceList = plan.priceLists.find(function (pl) { return pl.periodMonths === billingPeriod; });
22533
+ if (!priceList) {
22534
+ throw new Error('Price list not found');
22535
+ }
22536
+ var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === priceList.id; });
22537
+ if (!quoteChange) {
22538
+ throw new Error('Quote change not found');
22539
+ }
22540
+ deleteQuoteChange({
22541
+ id: quoteChange.id,
22542
+ apiHost: apiHost,
22543
+ token: token,
22544
+ });
22545
+ }
22546
+ useEffect(function () {
22547
+ if (isAddingAddonQuoteChange || isDeletingQuoteChange) {
22548
+ setIsAddonPlanLoading(true);
22549
+ }
22550
+ else {
22551
+ setIsAddonPlanLoading(false);
22552
+ }
22553
+ }, [isAddingAddonQuoteChange, isDeletingQuoteChange]);
22554
+ useEffect(function () {
22555
+ isAdded.current = false;
22556
+ setIsAddonPlanLoading(false);
22557
+ }, [selectedPriceList]);
22558
+ return {
22559
+ isPending: isAddingAddonQuoteChange || isDeletingQuoteChange || parentQuoteChange === undefined,
22560
+ addedQuoteChange: isAdded.current,
22561
+ deleteQuoteChange: handleDeleteQuoteChange,
22562
+ addAddonQuoteChange: handleAddAddonQuoteChange,
22563
+ };
22564
+ };
22565
+
22128
22566
  var Text$a = Typography.Text;
22129
22567
  var PlanFeatures = function (_a) {
22130
22568
  var _b;
@@ -22175,32 +22613,85 @@ var FeatureTitle = function (_a) {
22175
22613
  return (jsx(Text$a, __assign({ className: " ".concat(isFeatureGroup ? 'bunny-text-slate-500 bunny-font-medium bunny-pt-4' : ''), style: __assign({}, (isFeatureGroup ? { fontSize: '11px' } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
22176
22614
  };
22177
22615
 
22616
+ var PlanAddonsCard = function (_a) {
22617
+ var selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, addonPlans = _a.addonPlans, selectedProduct = _a.selectedProduct, priceListChangeOptions = _a.priceListChangeOptions, selectedBillingPeriod = _a.selectedBillingPeriod;
22618
+ var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
22619
+ var _b = useState(), selectedAddonPriceList = _b[0], setSelectedAddonPriceList = _b[1];
22620
+ function isAddonPlanPurchased(plan) {
22621
+ var isChangingPlans = selectedPriceList.plan.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.plan.id);
22622
+ if (isChangingPlans) {
22623
+ return false;
22624
+ }
22625
+ var currentSubscription = subscriptions.find(function (subscription) { return subscription.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id); });
22626
+ var addonSubscriptionIds = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.addonSubscriptions;
22627
+ var addonSubscriptions = addonSubscriptionIds === null || addonSubscriptionIds === void 0 ? void 0 : addonSubscriptionIds.map(function (addonSubscription) {
22628
+ return subscriptions.find(function (subscription) { return subscription.id === addonSubscription.id; });
22629
+ });
22630
+ // filter out cancelled addons
22631
+ var activeAddonSubscriptions = addonSubscriptions === null || addonSubscriptions === void 0 ? void 0 : addonSubscriptions.filter(function (addonSubscription) { return (addonSubscription === null || addonSubscription === void 0 ? void 0 : addonSubscription.state) !== SubscriptionState$2.CANCELED; });
22632
+ return activeAddonSubscriptions === null || activeAddonSubscriptions === void 0 ? void 0 : activeAddonSubscriptions.some(function (addonSubscription) { return (addonSubscription === null || addonSubscription === void 0 ? void 0 : addonSubscription.plan.id) === plan.id; });
22633
+ }
22634
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-overflow-hidden" }, { children: [jsx(AddonPlanModal, { onClose: function () { return setSelectedAddonPriceList(undefined); }, selectedProduct: selectedProduct, priceList: selectedAddonPriceList }), addonPlans.length > 0 && (jsx("div", __assign({ className: "bunny-text-black bunny-pt-2 bunny-pb-4 bunny-font-bold" }, { children: "Add-on plans" }))), jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: addonPlans.map(function (plan) {
22635
+ var isPurchased = isAddonPlanPurchased(plan);
22636
+ if (selectedBillingPeriod === undefined) {
22637
+ return null;
22638
+ }
22639
+ return (jsx(PlanAddonsCardRow, { plan: plan, selectedPriceList: selectedPriceList, setSelectedAddonPriceList: setSelectedAddonPriceList, isPurchased: isPurchased || false, selectedBillingPeriod: selectedBillingPeriod, priceListChangeOptions: priceListChangeOptions }));
22640
+ }) }))] })));
22641
+ };
22642
+ function PlanAddonsCardRow(_a) {
22643
+ var _b, _c;
22644
+ var plan = _a.plan, selectedPriceList = _a.selectedPriceList, setSelectedAddonPriceList = _a.setSelectedAddonPriceList, isPurchased = _a.isPurchased, selectedBillingPeriod = _a.selectedBillingPeriod, priceListChangeOptions = _a.priceListChangeOptions;
22645
+ var _d = useContext(PlanManagerQuoteContext), quote = _d.quote, setIsAddonPlanLoading = _d.setIsAddonPlanLoading;
22646
+ var _e = useToggleAddonPlan(quote, plan, billingPeriodConverter(selectedBillingPeriod), selectedPriceList, setIsAddonPlanLoading), isPending = _e.isPending, addedQuoteChange = _e.addedQuoteChange, addAddonQuoteChange = _e.addAddonQuoteChange, deleteQuoteChange = _e.deleteQuoteChange;
22647
+ var addonPriceListId = (_b = plan.priceLists.find(function (priceList) { return priceList.periodMonths === billingPeriodConverter(selectedBillingPeriod); })) === null || _b === void 0 ? void 0 : _b.id;
22648
+ var addonPriceList = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists.find(function (priceList) { return priceList.id === addonPriceListId; });
22649
+ var activeCharge = (_c = getActivePlanPriceData(addonPriceList, addonPriceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
22650
+ if (!addonPriceList) {
22651
+ return null;
22652
+ }
22653
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-justify-between bunny-items-center bunny-w-full bunny-p-4 bunny-rounded-md bunny-border bunny-bg-white bunny-shadow bunny-mb-2" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-orange-600", style: { fontSize: '16px' } }, { children: plan.name })), jsx(PriceListCardDescription, { description: plan.description }), jsx(PriceListCardPrice, { priceList: addonPriceList, fontSize: "16px" }), jsx(PriceListCardPriceDescription, { feature: activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.feature, priceList: addonPriceList }), jsx(Button, __assign({ type: "link", onClick: function () { return setSelectedAddonPriceList(addonPriceList); } }, { children: jsx(InfoCircleOutlined, {}) }))] })), jsx(Switch, { loading: isPending, checked: addedQuoteChange || isPurchased, onChange: function (checked) {
22654
+ if (checked) {
22655
+ addAddonQuoteChange();
22656
+ }
22657
+ else {
22658
+ deleteQuoteChange();
22659
+ }
22660
+ }, disabled: isPurchased })] }), plan.id));
22661
+ }
22662
+ function AddonPlanModal(_a) {
22663
+ var onClose = _a.onClose, selectedProduct = _a.selectedProduct, priceList = _a.priceList;
22664
+ var displayPriceLists = priceList ? [priceList] : [];
22665
+ var plansToDisplay = 1;
22666
+ return (jsx(Modal, __assign({ open: !!priceList, onCancel: onClose, footer: null }, { children: jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
22667
+ gridTemplateColumns: "minmax(auto, 200px) repeat(".concat(plansToDisplay, ", minmax(200px, 1fr))"),
22668
+ } }, { children: [jsx(PlanPickerGridCell, { noBorder: true }), priceList && (jsx(PriceListCard, { isSelected: true, priceList: priceList, noBorder: true, hideButton: true })), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsx(EverythingPlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: 1, selectedProduct: selectedProduct, hideBorder: true })) : (jsx(PlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: 1, selectedProduct: selectedProduct }))] })) })));
22669
+ }
22670
+
22178
22671
  var PriceListGridDesktop = function (_a) {
22179
- 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;
22180
- var _b = useMemo(function () {
22672
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, selectedBillingPeriod = _a.selectedBillingPeriod;
22673
+ var addonPlans = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.addonPlans;
22674
+ var displayPriceLists = useMemo(function () {
22181
22675
  return getAvailablePlansAndPriceLists({
22182
22676
  availablePriceLists: availablePriceLists,
22183
22677
  priceListChangeOptions: priceListChangeOptions,
22184
22678
  priceListStart: priceListStart,
22185
22679
  plansToDisplay: (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3,
22186
22680
  });
22187
- }, [availablePriceLists, priceListChangeOptions, priceListStart]); _b.availablePriceListsArray; var displayPriceLists = _b.displayPriceLists;
22681
+ }, [availablePriceLists, priceListChangeOptions, priceListStart]).displayPriceLists;
22188
22682
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22189
22683
  var plansToDisplay = Math.min((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3, availablePriceLists.length);
22190
- var hasFeatureAddons = displayPriceLists.some(function (priceList) {
22191
- return priceList.charges.some(function (charge) { return charge.featureAddon; });
22192
- });
22193
- return (jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-rounded-md bunny-shadow bunny-overflow-hidden bunny-bg-white" }, { children: [jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
22194
- gridTemplateColumns: everythingInPlus
22195
- ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
22196
- : "minmax(auto, 400px) repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))"),
22197
- } }, { children: [!everythingInPlus && jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(plansToDisplay), true).map(function (_, index) {
22198
- var priceList = displayPriceLists[index];
22199
- var doesPrevPriceListExist = displayPriceLists[index - 1];
22200
- if (!priceList)
22201
- return jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
22202
- return (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));
22203
- }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsx(EverythingPlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsxs(Fragment, { children: [jsx(PlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }), hasFeatureAddons && (jsx(PlanFeatureAddons, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay }))] }))] }))] })));
22684
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-rounded-md bunny-shadow bunny-overflow-hidden bunny-bg-white" }, { children: [jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
22685
+ gridTemplateColumns: everythingInPlus
22686
+ ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
22687
+ : "minmax(auto, 400px) repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))"),
22688
+ } }, { children: [!everythingInPlus && jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(plansToDisplay), true).map(function (_, index) {
22689
+ var priceList = displayPriceLists[index];
22690
+ var doesPrevPriceListExist = displayPriceLists[index - 1];
22691
+ if (!priceList)
22692
+ return jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
22693
+ return (jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22694
+ }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsx(EverythingPlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsxs(Fragment, { children: [jsx(PlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }), jsx(PlanFeatureAddons, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay })] }))] }))] })), selectedPriceList && addonPlans ? (jsx(PlanAddonsCard, { selectedPriceList: selectedPriceList, subscriptions: subscriptions, addonPlans: addonPlans, selectedProduct: selectedProduct, priceListChangeOptions: priceListChangeOptions, selectedBillingPeriod: selectedBillingPeriod })) : null] })));
22204
22695
  };
22205
22696
 
22206
22697
  var Text$9 = Typography.Text;
@@ -22214,42 +22705,43 @@ var PriceListCardFeature = function (_a) {
22214
22705
 
22215
22706
  var PriceListGridMobile = function (_a) {
22216
22707
  var _b, _c, _d, _e;
22217
- var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
22708
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
22218
22709
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22219
22710
  var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
22220
22711
  var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
22221
22712
  var prevPriceList = (_c = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _c === void 0 ? void 0 : _c.find(function (priceList) { return priceList.id === prevPriceListId; });
22222
22713
  return (jsxs(Fragment, { children: [jsx("div", __assign({ className: "bunny-flex bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-xb", style: { flexShrink: 0 } }, { children: availablePriceLists.map(function (priceList, index) {
22223
- return (jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22714
+ return (jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22224
22715
  }) })), jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
22225
22716
  ? everythingInPlusString({ priceList: prevPriceList })
22226
- : "Features" })), jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
22717
+ : 'Features' })), jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
22227
22718
  };
22228
22719
 
22229
22720
  var PriceListGrid = function (_a) {
22230
22721
  var _b, _c;
22231
- 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, upgradingSubscriptionState = _a.upgradingSubscriptionState;
22722
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, upgradingSubscriptionState = _a.upgradingSubscriptionState, selectedBillingPeriod = _a.selectedBillingPeriod;
22232
22723
  // Hooks
22233
22724
  var isMobile = useIsMobile();
22234
22725
  // Derived state
22235
22726
  var currentPriceList = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.find(function (priceList) { var _a; return priceList.id === ((_a = upgradingSubscriptionState === null || upgradingSubscriptionState === void 0 ? void 0 : upgradingSubscriptionState.plan) === null || _a === void 0 ? void 0 : _a.id); });
22236
22727
  var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), 'days');
22237
- return isMobile ? (jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }));
22728
+ return isMobile ? (jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays, selectedBillingPeriod: selectedBillingPeriod }));
22238
22729
  };
22239
22730
 
22240
22731
  var createAvailableBillingPeriods = function (priceLists, selectedProduct) {
22241
22732
  return priceLists === null || priceLists === void 0 ? void 0 : priceLists.filter(function (priceList) { return priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id); }).map(function (priceList) { return priceList.periodMonths; }).sort(function (a, b) { return a - b; }).filter(function (currentValue, index, array) { return index === array.indexOf(currentValue); });
22242
22733
  };
22243
22734
  var PriceListSelector = function (_a) {
22244
- var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions;
22735
+ var _b;
22736
+ var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions;
22245
22737
  // Context
22246
22738
  var isInPreviewMode = useContext(SubscriptionsContext).isInPreviewMode;
22247
- var _b = useContext(QuotePreviewContext), quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
22739
+ var _c = useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22248
22740
  var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
22249
22741
  // Local state
22250
- var _c = useState(), selectedProduct = _c[0], setSelectedProduct = _c[1];
22251
- var _d = useState(), selectedBillingPeriod = _d[0], setSelectedBillingPeriod = _d[1];
22252
- var _e = useState(0), priceListStart = _e[0], setPriceListStart = _e[1];
22742
+ var _d = useState(), selectedProduct = _d[0], setSelectedProduct = _d[1];
22743
+ var _e = useState(), selectedBillingPeriod = _e[0], setSelectedBillingPeriod = _e[1];
22744
+ var _f = useState(0), priceListStart = _f[0], setPriceListStart = _f[1];
22253
22745
  // Derived state
22254
22746
  var availableBillingPeriods = useMemo(function () { return createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct); }, [priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct]);
22255
22747
  var availablePriceLists = useMemo(function () {
@@ -22257,7 +22749,7 @@ var PriceListSelector = function (_a) {
22257
22749
  return (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) {
22258
22750
  return periodMonthsConverter(priceList.periodMonths) === selectedBillingPeriod &&
22259
22751
  priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id);
22260
- })) || []);
22752
+ }).filter(function (priceList) { return priceList.plan.addon !== true; })) || []);
22261
22753
  }, [priceListChangeOptions, selectedBillingPeriod, selectedProduct]);
22262
22754
  // Handlers
22263
22755
  var onChangeBillingPeriod = useCallback(function (billingPeriod) {
@@ -22273,9 +22765,7 @@ var PriceListSelector = function (_a) {
22273
22765
  priceList.plan.id === ((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.plan.id) &&
22274
22766
  !isPriceListDisabled({
22275
22767
  priceList: priceList,
22276
- subscriptions: subscriptions,
22277
22768
  upgradingSubscription: upgradingSubscription,
22278
- canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, upgradingSubscription),
22279
22769
  });
22280
22770
  });
22281
22771
  var isPriceListCurrentSubscription = newSelectedPriceList && (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
@@ -22287,17 +22777,12 @@ var PriceListSelector = function (_a) {
22287
22777
  }
22288
22778
  else if (isPriceListCurrentSubscription) {
22289
22779
  setQuotePreviewData({
22780
+ priceList: newSelectedPriceList,
22290
22781
  quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
22291
22782
  });
22292
22783
  }
22293
22784
  }
22294
- }, [
22295
- quotePreviewData,
22296
- priceListChangeOptions,
22297
- subscriptions,
22298
- upgradingSubscription,
22299
- setQuotePreviewData,
22300
- ]);
22785
+ }, [quotePreviewData, priceListChangeOptions, upgradingSubscription, setQuotePreviewData]);
22301
22786
  var onChangeProduct = useCallback(function (product) {
22302
22787
  var newAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, product);
22303
22788
  if (!(newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods.includes(billingPeriodConverter(selectedBillingPeriod)))) {
@@ -22306,8 +22791,19 @@ var PriceListSelector = function (_a) {
22306
22791
  setSelectedProduct(product);
22307
22792
  }, [priceListChangeOptions, selectedBillingPeriod, onChangeBillingPeriod]);
22308
22793
  // Default settings
22794
+ var initialProduct = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products) === null || _b === void 0 ? void 0 : _b[0];
22795
+ var initialBillingPeriod = useMemo(function () {
22796
+ var initialAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, initialProduct);
22797
+ if ((upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) &&
22798
+ (initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods.includes(billingPeriodConverter(periodMonthsConverter(upgradingSubscription.priceList.periodMonths))))) {
22799
+ return periodMonthsConverter(upgradingSubscription.priceList.periodMonths);
22800
+ }
22801
+ else {
22802
+ return periodMonthsConverter((initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods[0]) || 1);
22803
+ }
22804
+ }, [upgradingSubscription]);
22805
+ // Set initial billing period and initial product
22309
22806
  useEffect(function () {
22310
- var _a, _b, _c, _d;
22311
22807
  if (arePlanChangeOptionsLoading ||
22312
22808
  areSubscriptionsLoading ||
22313
22809
  !priceListChangeOptions ||
@@ -22315,55 +22811,46 @@ var PriceListSelector = function (_a) {
22315
22811
  selectedProduct ||
22316
22812
  selectedPriceList)
22317
22813
  return;
22318
- var initialProduct = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products) === null || _a === void 0 ? void 0 : _a[0];
22319
- var initialAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, initialProduct);
22320
- var initialBillingPeriod;
22321
- if ((upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) &&
22322
- (initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods.includes(billingPeriodConverter(periodMonthsConverter(upgradingSubscription.priceList.periodMonths))))) {
22323
- initialBillingPeriod = periodMonthsConverter(upgradingSubscription.priceList.periodMonths);
22324
- }
22325
- else {
22326
- initialBillingPeriod = periodMonthsConverter((initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods[0]) || 1);
22327
- }
22328
- var initialAvailablePriceLists = ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) {
22329
- return periodMonthsConverter(priceList.periodMonths) === initialBillingPeriod &&
22330
- priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
22331
- })) || [];
22332
- var initialPriceList;
22333
- var initialQuantity = (_d = (_c = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.quantity;
22334
- if (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) {
22335
- initialPriceList = initialAvailablePriceLists.find(function (priceList) { return priceList.id === upgradingSubscription.priceList.id; });
22336
- }
22337
22814
  if (initialBillingPeriod)
22338
22815
  setSelectedBillingPeriod(initialBillingPeriod);
22339
22816
  if (initialProduct)
22340
22817
  setSelectedProduct(initialProduct);
22818
+ }, [
22819
+ setSelectedBillingPeriod,
22820
+ setSelectedProduct,
22821
+ selectedBillingPeriod,
22822
+ arePlanChangeOptionsLoading,
22823
+ areSubscriptionsLoading,
22824
+ priceListChangeOptions,
22825
+ selectedPriceList,
22826
+ selectedProduct,
22827
+ ]);
22828
+ // Set initial price list and initial quantity in quote preview data
22829
+ // Will also set the initial price list and quantity if the billing period is changed
22830
+ useEffect(function () {
22831
+ var _a, _b, _c;
22832
+ var initialAvailablePriceLists = ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) {
22833
+ return periodMonthsConverter(priceList.periodMonths) === initialBillingPeriod &&
22834
+ priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
22835
+ })) || [];
22836
+ var initialPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList)
22837
+ ? initialAvailablePriceLists.find(function (priceList) { return priceList.id === upgradingSubscription.priceList.id; })
22838
+ : undefined;
22341
22839
  if (initialPriceList &&
22342
22840
  !isInPreviewMode &&
22343
22841
  !isPriceListDisabled({
22344
22842
  priceList: initialPriceList,
22345
- subscriptions: subscriptions,
22346
22843
  upgradingSubscription: upgradingSubscription,
22347
- canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(initialPriceList, upgradingSubscription),
22348
- })) {
22844
+ }) &&
22845
+ !(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList)) {
22846
+ var initialQuantity = (_c = (_b = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.quantity;
22349
22847
  setQuotePreviewData({
22350
22848
  priceList: initialPriceList,
22351
22849
  quantity: calculateNewQuantity(initialPriceList, initialQuantity),
22352
22850
  });
22353
22851
  }
22354
- }, [
22355
- arePlanChangeOptionsLoading,
22356
- areSubscriptionsLoading,
22357
- isInPreviewMode,
22358
- priceListChangeOptions,
22359
- selectedBillingPeriod,
22360
- selectedPriceList,
22361
- selectedProduct,
22362
- setQuotePreviewData,
22363
- subscriptions,
22364
- upgradingSubscription,
22365
- ]);
22366
- return (jsxs(Fragment, { children: [jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsx(PriceListGrid, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription })] }));
22852
+ }, [isInPreviewMode, subscriptions, upgradingSubscription, selectedBillingPeriod]);
22853
+ return (jsxs(Fragment, { children: [jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsx(PriceListGrid, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription, selectedBillingPeriod: selectedBillingPeriod })] }));
22367
22854
  };
22368
22855
 
22369
22856
  var PlanPicker = function () {
@@ -22372,18 +22859,17 @@ var PlanPicker = function () {
22372
22859
  var token = useToken();
22373
22860
  var apiHost = useContext(BunnyContext).apiHost;
22374
22861
  var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, upgradingSubscription = _b.upgradingSubscription;
22375
- var _c = useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22376
- // Hooks
22377
- var showInfoNotification = useInfoNotification();
22862
+ var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
22863
+ var account = useCurrentUserData(token).account;
22378
22864
  // Queries
22379
- var _d = useQuery({
22865
+ var _c = useQuery({
22380
22866
  queryKey: QueryKeyFactory.default.createTableKey({
22381
22867
  pluralType: 'subscriptions',
22382
22868
  token: token,
22383
22869
  }),
22384
22870
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
22385
- }), subscriptions = _d.data, areSubscriptionsLoading = _d.isLoading;
22386
- var _e = useQuery({
22871
+ }), subscriptions = _c.data, areSubscriptionsLoading = _c.isLoading;
22872
+ var _d = useQuery({
22387
22873
  queryKey: QueryKeyFactory.default.planChangeOptionsKey({
22388
22874
  subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
22389
22875
  token: token,
@@ -22395,28 +22881,12 @@ var PlanPicker = function () {
22395
22881
  productId: productId,
22396
22882
  token: token,
22397
22883
  upgradingSubscription: upgradingSubscription,
22884
+ accountCurrencyId: account === null || account === void 0 ? void 0 : account.currencyId,
22398
22885
  });
22399
22886
  },
22400
22887
  enabled: !areSubscriptionsLoading,
22401
- }), priceListChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
22402
- // Handlers
22403
- var onChangePriceList = useCallback(function (selectedPriceList) {
22404
- if (isInPreviewMode)
22405
- return showInfoNotification('You are in preview mode');
22406
- return setQuotePreviewData({
22407
- priceList: selectedPriceList,
22408
- quantity: calculateNewQuantity(selectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
22409
- });
22410
- }, [isInPreviewMode, setQuotePreviewData, showInfoNotification]);
22411
- // Reset quote preview data when the plan picker is unmounted
22412
- useEffect(function () {
22413
- return function () {
22414
- setQuotePreviewData({});
22415
- };
22416
- }, [setQuotePreviewData]);
22417
- if (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0)
22418
- return jsx(ErrorView, { message: "There are no plans available" });
22419
- return (jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
22888
+ }), priceListChangeOptions = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
22889
+ return (jsx(PriceListSelectorProvider, { children: ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0 ? (jsx(ErrorView, { message: "There are no plans available" })) : (jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions })) }));
22420
22890
  };
22421
22891
 
22422
22892
  var Text$8 = Typography.Text;
@@ -22456,17 +22926,6 @@ var PlanManager = function (_a) {
22456
22926
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
22457
22927
  enabled: false,
22458
22928
  }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
22459
- var quote = useQuery({
22460
- queryKey: QueryKeyFactory.default.createObjectKey({
22461
- id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
22462
- objectName: 'editingQuote',
22463
- token: token,
22464
- }),
22465
- queryFn: function () {
22466
- return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost }) : undefined;
22467
- },
22468
- enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
22469
- }).data;
22470
22929
  useEffect(function () {
22471
22930
  if (subscriptionUpgradeId && !upgradingSubscription) {
22472
22931
  var subscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) { return subscription.id === subscriptionUpgradeId; });
@@ -22492,12 +22951,6 @@ var PlanManager = function (_a) {
22492
22951
  observer.unobserve(el);
22493
22952
  };
22494
22953
  }, []);
22495
- function handleSetEditingQuoteData(quoteId, isTrial) {
22496
- setEditingQuoteData({
22497
- id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) || '',
22498
- isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) || false,
22499
- });
22500
- }
22501
22954
  // Handlers
22502
22955
  var onSuccess = function () {
22503
22956
  setEditingQuoteData(undefined);
@@ -22521,12 +22974,12 @@ var PlanManager = function (_a) {
22521
22974
  };
22522
22975
  if (subscriptionsAreLoading && !isInPreviewMode)
22523
22976
  return jsx(Fragment, {});
22524
- return (jsxs("div", __assign({ className: "".concat(className) }, { children: [jsx(PreviewModeAdvisary, { isInPreviewMode: isInPreviewMode }), jsx(PageTitle, { onGoBack: function () {
22525
- if (isInPreviewMode)
22526
- return showInfoNotification('You are in preview mode');
22527
- setQuotePreviewData(undefined);
22528
- onChangePlanCancel();
22529
- }, title: "Change plan" }), jsx(PlanPicker, {}), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsx("div", { ref: stickyRef }), jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsx(PlanPickerCheckoutBarWrapper, { editingQuote: editingQuoteData, setEditingQuoteData: handleSetEditingQuoteData, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
22977
+ return (jsx("div", __assign({ className: "".concat(className) }, { children: jsxs(PlanManagerQuoteProvider, __assign({ editingQuoteData: editingQuoteData, setEditingQuoteData: setEditingQuoteData }, { children: [jsx(PreviewModeAdvisary, { isInPreviewMode: isInPreviewMode }), jsx(PageTitle, { onGoBack: function () {
22978
+ if (isInPreviewMode)
22979
+ return showInfoNotification('You are in preview mode');
22980
+ setQuotePreviewData(undefined);
22981
+ onChangePlanCancel();
22982
+ }, title: "Change plan" }), jsx(PlanPicker, {}), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, token: token, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsx("div", { ref: stickyRef }), jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsx(PlanPickerCheckoutBarWrapper, { editingQuote: editingQuoteData, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })) })));
22530
22983
  };
22531
22984
 
22532
22985
  var useCancelSubscription = function () {
@@ -22545,6 +22998,30 @@ var useCancelSubscription = function () {
22545
22998
  }); };
22546
22999
  };
22547
23000
 
23001
+ var ADDON_INDENTATION = 64;
23002
+ function findNonAddonSubscriptions(subscriptions) {
23003
+ return subscriptions.filter(function (subscription) {
23004
+ return (subscription.priceList.plan.addon === false || subscription.priceList.plan.addon === null) &&
23005
+ findParentSubscription(subscription, subscriptions) === undefined;
23006
+ });
23007
+ }
23008
+ function findAddonSubscriptions(parentSubscription, subscriptions) {
23009
+ var _a;
23010
+ var addonSubscriptionsIds = (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.map(function (addonSubscription) { return addonSubscription.id; });
23011
+ return subscriptions.filter(function (subscription) { return addonSubscriptionsIds === null || addonSubscriptionsIds === void 0 ? void 0 : addonSubscriptionsIds.includes(subscription.id); });
23012
+ }
23013
+ function findParentSubscription(subscription, subscriptions) {
23014
+ return subscriptions.find(function (parentSubscription) {
23015
+ var _a;
23016
+ return (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.some(function (addonSubscription) { return addonSubscription.id === subscription.id; });
23017
+ });
23018
+ }
23019
+
23020
+ var AddonIndentation = function (_a) {
23021
+ var isLast = _a.isLast, indentation = _a.indentation, verticalMargin = _a.verticalMargin;
23022
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-relative", style: { width: "".concat(indentation, "px") } }, { children: [jsx("div", { className: "bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto", style: { marginTop: verticalMargin } }), jsx("div", { className: "bunny-bg-gray-300 bunny-h-0.5 bunny-w-1/2 bunny-ml-auto" }), isLast ? (jsx("div", { className: "bunny-flex-1" })) : (jsx("div", { className: "bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto", style: { marginBottom: verticalMargin } }))] })));
23023
+ };
23024
+
22548
23025
  var SubscriptionState;
22549
23026
  (function (SubscriptionState) {
22550
23027
  SubscriptionState["ACTIVE"] = "ACTIVE";
@@ -22557,7 +23034,7 @@ var SubscriptionState$1 = SubscriptionState;
22557
23034
 
22558
23035
  var FEATURE_USAGE_MUTATION = "\nquery GetFeatureUsage($id: ID!) {\n featureUsageHistogram(subscriptionChargeId: $id) {\n subscriptionCharge { \n id\n name\n amount\n currentPeriodPriceByTiers { \n tier { starts price } \n quantity\n amount\n }\n }\n feature { id name }\n periodRange\n dataInterval\n data {\n periodStart\n periodEnd\n intervals {\n intervalStart\n intervalUsage\n }\n intervalsTotal\n }\n }\n}\n";
22559
23036
  var getFeatureUsage = function (_a) {
22560
- var subscriptionChargeId = _a.subscriptionChargeId; _a.startDate; _a.endDate; _a.dataInterval; var token = _a.token, apiHost = _a.apiHost;
23037
+ var subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
22561
23038
  return __awaiter(void 0, void 0, void 0, function () {
22562
23039
  var vars, response;
22563
23040
  var _b;
@@ -22677,362 +23154,16 @@ var FeatureBarChart = function (_a) {
22677
23154
  var StyledBarChart = defaultStyled(BarChart)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n .recharts-surface {\n overflow: visible;\n }\n"], ["\n .recharts-surface {\n overflow: visible;\n }\n"])));
22678
23155
  var templateObject_1$2;
22679
23156
 
22680
- var canShowQuantitiesInput = function (charge, subscription) {
22681
- // Check if the subscription is active, pending, or in trial,
22682
- // the pricing model is not flat,
22683
- // and if it's not a trial, also check if the current charge is the last one in the subscription.
22684
- var _a, _b, _c;
22685
- var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE;
22686
- var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
22687
- var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL;
22688
- var isFlatPricing = charge.pricingModel === 'FLAT';
22689
- var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
22690
- !isFlatPricing &&
22691
- charge.selfServiceQuantity &&
22692
- !charge.expired;
22693
- // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
22694
- return shouldProcessCharge;
22695
- };
22696
- var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
22697
- var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
22698
- var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
22699
- var charges = [
22700
- {
22701
- id: quoteChangeCharge.id,
22702
- quantity: editedSubscription.quantity - subscriptionQuantity,
22703
- },
22704
- ];
22705
- return { charges: charges, quoteChange: quoteChange };
22706
- };
22707
- var canShowChangeQuantities = function (_a) {
22708
- var subscriptions = _a.subscriptions;
22709
- return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
22710
- return subscription.charges.some(function (charge, chargeIndex) {
22711
- return canShowQuantitiesInput(charge, subscription);
22712
- });
22713
- });
22714
- };
22715
- var isSubscriptionNotActive = function (subscription) {
22716
- var _a, _b;
22717
- return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
22718
- ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.CANCELED;
22719
- };
22720
- var isSubscriptionActiveOrPending = function (subscription) {
22721
- var _a, _b;
22722
- return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE ||
22723
- ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
22724
- };
22725
- var isSubscriptionTrial = function (subscription) { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL; };
22726
- // Helper function to check if charge is a discount
22727
- var isDiscount = function (kind) {
22728
- return kind === QuoteChangeKind.DISCOUNT || kind === QuoteChangeKind.FREE_PERIOD_DISCOUNT;
22729
- };
22730
- var hasPriceTiers = function (charge) {
22731
- var _a;
22732
- return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
22733
- };
22734
- var hasMultiplePriceTiers = function (charge) {
22735
- var _a;
22736
- return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length) > 1;
22737
- };
22738
- var getApplicablePriceTier = function (charge, currencyId, priceDecimals) {
22739
- var _a;
22740
- if (!((_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length))
22741
- return '';
22742
- var selectedTier;
22743
- // For TIERED pricing model: always show the first tier
22744
- if (charge.pricingModel === PricingModel.TIERED) {
22745
- selectedTier = charge.priceTiers[0];
22746
- }
22747
- // For VOLUME and BANDS pricing models: find the tier that contains the current quantity
22748
- else if (charge.pricingModel === PricingModel.VOLUME ||
22749
- charge.pricingModel === PricingModel.BANDS) {
22750
- // Find the appropriate tier based on quantity
22751
- selectedTier = charge.priceTiers.find(function (tier, index) {
22752
- var nextTier = charge.priceTiers[index + 1];
22753
- var tierStart = tier.starts;
22754
- var tierEnd = nextTier ? nextTier.starts - 1 : Infinity;
22755
- return charge.quantity >= tierStart && charge.quantity <= tierEnd;
22756
- });
22757
- // Fallback to first tier if no tier found (shouldn't happen with proper data)
22758
- selectedTier = selectedTier || charge.priceTiers[0];
22759
- }
22760
- // Default fallback for any other pricing models
22761
- else {
22762
- selectedTier = charge.priceTiers[0];
22763
- }
22764
- if (!selectedTier)
22765
- return '';
22766
- // Calculate the tier range for display
22767
- var tierIndex = charge.priceTiers.indexOf(selectedTier);
22768
- var starts = selectedTier.starts;
22769
- var nextTier = charge.priceTiers[tierIndex + 1];
22770
- var ends = nextTier ? nextTier.starts - 1 : '∞';
22771
- return hasMultiplePriceTiers(charge)
22772
- ? "".concat(starts, "-").concat(ends, ": ").concat(formatCurrency(selectedTier.price, currencyId, priceDecimals))
22773
- : "".concat(formatCurrency(selectedTier.price, currencyId, priceDecimals));
22774
- };
22775
-
22776
- var MUTATION = "\nmutation BillingDetailsUpdate(\n $attributes: BillingDetailsAttributes!) {\n billingDetailsUpdate(\n attributes: $attributes\n ) {\n billingDetails {\n billingCity\n billingContact {\n email\n }\n billingCountry\n billingState\n billingStreet\n billingZip\n name\n taxNumber\n }\n errors\n }\n }\n";
22777
- var billingDetailsUpdate = function (_a) {
22778
- var attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
22779
- return __awaiter(void 0, void 0, void 0, function () {
22780
- var vars, response, errors;
22781
- var _b;
22782
- return __generator(this, function (_c) {
22783
- switch (_c.label) {
22784
- case 0:
22785
- vars = { attributes: attributes };
22786
- return [4 /*yield*/, gqlRequest({
22787
- query: MUTATION,
22788
- token: token,
22789
- vars: vars,
22790
- apiHost: apiHost,
22791
- })];
22792
- case 1:
22793
- response = _c.sent();
22794
- errors = (_b = response === null || response === void 0 ? void 0 : response.billingDetailsUpdate) === null || _b === void 0 ? void 0 : _b.errors;
22795
- if (errors)
22796
- throw errors;
22797
- return [2 /*return*/, response.billingDetailsUpdate];
22798
- }
22799
- });
22800
- });
22801
- };
22802
-
22803
- // TODO: move this to common
22804
- var billingDetailsQuery = function () {
22805
- 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}";
22806
- };
22807
- var getBillingDetails = function (_a) {
22808
- var token = _a.token, apiHost = _a.apiHost;
22809
- return __awaiter(void 0, void 0, void 0, function () {
22810
- var response;
22811
- var _b;
22812
- return __generator(this, function (_c) {
22813
- switch (_c.label) {
22814
- case 0: return [4 /*yield*/, gqlRequest({
22815
- query: billingDetailsQuery(),
22816
- token: token,
22817
- apiHost: apiHost,
22818
- })];
22819
- case 1:
22820
- response = _c.sent();
22821
- if (response === null || response === void 0 ? void 0 : response.errors) {
22822
- throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
22823
- }
22824
- return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
22825
- }
22826
- });
22827
- });
22828
- };
22829
-
22830
- var Text$7 = Typography.Text;
22831
- function BillingDetailsSection(_a) {
22832
- var _this = this;
22833
- var hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
22834
- // State
22835
- var _b = useState(false), isFormEdited = _b[0], setIsFormEdited = _b[1];
22836
- var _c = useState(false), formIsValid = _c[0], setFormIsValid = _c[1];
22837
- var form = Form.useForm()[0];
22838
- var values = Form.useWatch([], form);
22839
- // Context
22840
- var apiHost = useContext(BunnyContext).apiHost;
22841
- var token = useToken();
22842
- // Hooks
22843
- var isMobile = useIsMobile();
22844
- var queryClient = useQueryClient();
22845
- var showErrorNotification = useErrorNotification();
22846
- var showSuccessNotification = useSuccessNotification();
22847
- // Queries
22848
- var _d = useQuery({
22849
- queryKey: QueryKeyFactory.default.billingDetailsKey({ token: token }),
22850
- queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
22851
- }), billingDetails = _d.data, isLoadingBillingDetails = _d.isLoading;
22852
- var _e = useMutation({
22853
- mutationFn: function (changedFormData) { return __awaiter(_this, void 0, void 0, function () {
22854
- var updatedBillingDetails;
22855
- return __generator(this, function (_a) {
22856
- switch (_a.label) {
22857
- case 0: return [4 /*yield*/, billingDetailsUpdate({
22858
- attributes: {
22859
- name: changedFormData.name,
22860
- billingStreet: changedFormData.billingStreet,
22861
- billingCity: changedFormData.billingCity,
22862
- billingZip: changedFormData.billingZip,
22863
- billingState: changedFormData.billingState,
22864
- billingCountry: changedFormData.billingCountry,
22865
- billingContactEmail: changedFormData.billingContactEmail,
22866
- taxNumber: changedFormData.taxNumber,
22867
- },
22868
- token: token,
22869
- apiHost: apiHost,
22870
- })];
22871
- case 1:
22872
- updatedBillingDetails = _a.sent();
22873
- queryClient.setQueryData(QueryKeyFactory.default.billingDetailsKey({ token: token }), function (old) {
22874
- return __assign(__assign({}, old), updatedBillingDetails.billingDetails);
22875
- });
22876
- return [2 /*return*/, updatedBillingDetails];
22877
- }
22878
- });
22879
- }); },
22880
- onSuccess: function () {
22881
- showSuccessNotification('Your account details have been saved');
22882
- queryClient.invalidateQueries({
22883
- queryKey: QueryKeyFactory.default.taxationRequiredAccountFieldsKey({
22884
- token: token,
22885
- }),
22886
- });
22887
- },
22888
- }), updateBillingDetails = _e.mutate, isUpdatingBillingDetails = _e.isPending;
22889
- // Set form values when billing details are loaded
22890
- useEffect(function () {
22891
- var _a;
22892
- if (billingDetails) {
22893
- form.setFieldsValue({
22894
- billingStreet: billingDetails.billingStreet,
22895
- billingCity: billingDetails.billingCity,
22896
- billingZip: billingDetails.billingZip,
22897
- billingState: billingDetails.billingState,
22898
- billingCountry: billingDetails.billingCountry,
22899
- billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
22900
- taxNumber: billingDetails.taxNumber,
22901
- });
22902
- }
22903
- }, [billingDetails]);
22904
- useEffect(function () {
22905
- form
22906
- .validateFields({ validateOnly: true })
22907
- .then(function () { return setFormIsValid(true); })
22908
- .catch(function () { return setFormIsValid(false); });
22909
- var isFormEdited = function () {
22910
- var _a;
22911
- if (!billingDetails)
22912
- return false;
22913
- var currentValues = form.getFieldsValue();
22914
- var accountValues = {
22915
- billingStreet: billingDetails.billingStreet,
22916
- billingCity: billingDetails.billingCity,
22917
- billingZip: billingDetails.billingZip,
22918
- billingState: billingDetails.billingState,
22919
- billingCountry: billingDetails.billingCountry,
22920
- billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
22921
- taxNumber: billingDetails.taxNumber,
22922
- };
22923
- return Object.keys(currentValues).some(function (key) {
22924
- var value = accountValues[key];
22925
- return currentValues[key] !== value;
22926
- });
22927
- };
22928
- setIsFormEdited(isFormEdited());
22929
- }, [form, values, billingDetails]);
22930
- // Validate form fields when isFormEdited changes
22931
- useEffect(function () {
22932
- var validateOnly = isFormEdited ? false : true;
22933
- form.validateFields({ validateOnly: validateOnly });
22934
- }, [isFormEdited]);
22935
- var saveBillingDetails = function () { return __awaiter(_this, void 0, void 0, function () {
22936
- var _this = this;
22937
- return __generator(this, function (_a) {
22938
- form.validateFields({ validateOnly: false }).then(function () { return __awaiter(_this, void 0, void 0, function () {
22939
- var error_1;
22940
- return __generator(this, function (_a) {
22941
- switch (_a.label) {
22942
- case 0:
22943
- _a.trys.push([0, 2, 3, 4]);
22944
- return [4 /*yield*/, form.validateFields()];
22945
- case 1:
22946
- _a.sent();
22947
- updateBillingDetails(form.getFieldsValue());
22948
- return [3 /*break*/, 4];
22949
- case 2:
22950
- error_1 = _a.sent();
22951
- if (error_1 instanceof Error) {
22952
- showErrorNotification('Failed to update account', error_1.message);
22953
- }
22954
- else {
22955
- showErrorNotification('Please fill out all required fields');
22956
- }
22957
- return [3 /*break*/, 4];
22958
- case 3:
22959
- setIsFormEdited(false);
22960
- return [7 /*endfinally*/];
22961
- case 4: return [2 /*return*/];
22962
- }
22963
- });
22964
- }); });
22965
- return [2 /*return*/];
22966
- });
22967
- }); };
22968
- var filteredCountryList = useMemo(function () {
22969
- return countryListFilter ? Lists.COUNTRY_LIST.filter(countryListFilter) : Lists.COUNTRY_LIST;
22970
- }, [countryListFilter]);
22971
- return (jsx("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? 'bunny-w-full' : 'bunny-w-1/2') }, { children: jsxs("div", __assign({ className: "bunny-px-4" }, { children: [jsxs(Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: [jsx("div", __assign({ className: "bunny-mb-2" }, { children: jsx(Text$7, __assign({ className: "bunny-font-medium bunny-text-lg" }, { children: (billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.name) || 'No company name' })) })), jsxs(Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsx(Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [{ required: true, message: 'Street address is required' }] }, { children: jsx(Input, {}) })), jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsx(Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: 'City is required' }], className: "bunny-flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: 'Zipcode is required' }], className: "bunny-flex-1" }, { children: jsx(Input, {}) }))] })), jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: [jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsx(Form.Item, __assign({ label: "State", name: "billingState", rules: [
22972
- {
22973
- required: false,
22974
- },
22975
- ] }, { children: jsx(Input, {}) })) })), jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsx(Form.Item, __assign({ label: "Country", name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsx(Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
22976
- var _a, _b;
22977
- return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
22978
- ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
22979
- } }) })) }))] })), jsx(Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
22980
- {
22981
- required: true,
22982
- message: 'Email is required',
22983
- type: 'email',
22984
- },
22985
- ] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }] }, { children: jsx(Input, {}) }))] }))] })), jsx(Button, __assign({ disabled: !isFormEdited || isUpdatingBillingDetails || !formIsValid, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails }, { children: "Save" }))] })) })));
22986
- }
22987
-
22988
- var BillingDetails = function (_a) {
22989
- var className = _a.className, countryListFilter = _a.countryListFilter, _b = _a.hideBillingDetailsForm, hideBillingDetailsForm = _b === void 0 ? false : _b, _c = _a.hidePaymentMethodForm, hidePaymentMethodForm = _c === void 0 ? false : _c, _d = _a.isCardEnabled, isCardEnabled = _d === void 0 ? true : _d, _e = _a.isUpgradeFromTrial, isUpgradeFromTrial = _e === void 0 ? false : _e, _f = _a.shadow, shadow = _f === void 0 ? 'shadow-md' : _f, onSavePaymentMethod = _a.onSavePaymentMethod;
22990
- // Hooks
22991
- var isMobile = useIsMobile();
22992
- return (jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-py-2 bunny-my-2 ".concat(isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row', " bunny-gap-4") }, { children: [!hideBillingDetailsForm ? (jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm, isUpgradeFromTrial: isUpgradeFromTrial, onSavePaymentMethod: onSavePaymentMethod })) : null] })) })));
22993
- };
22994
- var WrapperComponent = function (_a) {
22995
- var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;
22996
- return (jsx("div", __assign({ className: "".concat(className) }, { children: isCardEnabled ? jsx(Card, __assign({ className: "".concat(shadow) }, { children: children })) : jsx("div", { children: children }) })));
22997
- };
22998
- var ResponsiveDivider = function () {
22999
- var isMobile = useIsMobile();
23000
- return isMobile ? (jsx("div", __assign({ className: "bunny-mx-4" }, { children: jsx(Divider, {}) }))) : (jsx("div", { children: jsx(Divider, { className: "bunny-h-full", type: "vertical" }) }));
23001
- };
23002
- var PaymentFormSection = function (_a) {
23003
- var hideBillingDetailsForm = _a.hideBillingDetailsForm, isUpgradeFromTrial = _a.isUpgradeFromTrial, onSavePaymentMethod = _a.onSavePaymentMethod;
23004
- var isMobile = useIsMobile();
23005
- var onTokenExpired = useContext(BunnyContext).onTokenExpired;
23006
- var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
23007
- var showSuccessNotification = useSuccessNotification();
23008
- var entityId = useCurrentUserData().entityId;
23009
- return (jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
23010
- handleAllErrorFormats(error);
23011
- }, onSavePaymentMethod: function () {
23012
- showSuccessNotification(isUpgradeFromTrial
23013
- ? 'Payment method saved! Your trial will automatically convert to a paid subscription.'
23014
- : 'Payment method saved successfully!');
23015
- onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
23016
- } }) })));
23017
- };
23018
-
23019
- var UpgradeFromTrial = function (_a) {
23020
- var onClose = _a.onClose, open = _a.open;
23021
- return (jsx(Modal, __assign({ width: '80vw', open: open, onCancel: onClose, footer: null }, { children: jsx(BillingDetails, { isUpgradeFromTrial: true, onSavePaymentMethod: onClose }) })));
23022
- };
23023
-
23024
23157
  var SubscriptionCardActions = function (_a) {
23025
23158
  var _b;
23026
23159
  var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
23027
23160
  var apiHost = useContext(BunnyContext).apiHost;
23028
23161
  var token = useToken();
23029
- var _c = usePaymentMethod({
23162
+ var isPaymentMethodLoading = usePaymentMethod({
23030
23163
  accountId: subscription.accountId,
23031
23164
  token: token,
23032
23165
  apiHost: apiHost,
23033
- }), storedPaymentMethods = _c.paymentMethods, isPaymentMethodLoading = _c.isLoading;
23034
- // Local state
23035
- var _d = useState(false), isUpgradeFromTrialModalOpen = _d[0], setIsUpgradeFromTrialModalOpen = _d[1];
23166
+ }).isLoading;
23036
23167
  // Derived state
23037
23168
  var isSelfServiceCancelable = subscription.plan.selfServiceCancel;
23038
23169
  var productPlans = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return priceList.product.id === subscription.product.id; });
@@ -23041,28 +23172,45 @@ var SubscriptionCardActions = function (_a) {
23041
23172
  var isActiveOrPending = isSubscriptionActiveOrPending(subscription);
23042
23173
  if (isPaymentMethodLoading)
23043
23174
  return null;
23044
- return (jsxs(Fragment, { children: [isSelfServiceCancelable && (isInTrial || isActiveOrPending) && (jsx(Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsx(Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), isInTrial && !(storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) && (jsx(Button, __assign({ onClick: function () { return setIsUpgradeFromTrialModalOpen(true); }, type: "primary" }, { children: "Upgrade from trial" }))), arePlansAvailable && (isInTrial || isActiveOrPending) && (jsx(Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: isInTrial ? 'default' : 'primary' }, { children: "Change plan" }))), jsx(UpgradeFromTrial, { onClose: function () { return setIsUpgradeFromTrialModalOpen(false); }, open: isUpgradeFromTrialModalOpen })] }));
23175
+ return (jsxs(Fragment, { children: [isSelfServiceCancelable && onCancelSubscriptionClick && (isInTrial || isActiveOrPending) && (jsx(Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsx(Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), arePlansAvailable && onChangePlanClick && (isActiveOrPending || isInTrial) && (jsx(Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: 'primary' }, { children: isInTrial ? 'Upgrade from trial' : 'Change plan' }))), !arePlansAvailable && isInTrial && jsx(Tag, __assign({ color: "warning" }, { children: "Cannot upgrade" }))] }));
23045
23176
  };
23046
23177
 
23047
- var Text$6 = Typography.Text;
23178
+ var Text$7 = Typography.Text;
23048
23179
  var getSubscriptionStatusText = function (subscription) {
23049
- var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
23050
- if (cancellationDate &&
23051
- (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== SubscriptionState$2.CANCELED &&
23052
- (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== SubscriptionState$2.EXPIRED) {
23180
+ var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate, trialEndDate = subscription.trialEndDate, trialStartDate = subscription.trialStartDate, startDate = subscription.startDate, trialExpirationAction = subscription.trialExpirationAction;
23181
+ var stateUpperCased = state === null || state === void 0 ? void 0 : state.toUpperCase();
23182
+ var isActive = stateUpperCased === SubscriptionState$2.ACTIVE;
23183
+ var isPending = stateUpperCased === SubscriptionState$2.PENDING;
23184
+ var isCanceled = stateUpperCased === SubscriptionState$2.CANCELED;
23185
+ var isExpired = stateUpperCased === SubscriptionState$2.EXPIRED;
23186
+ var isTrial = stateUpperCased === SubscriptionState$2.TRIAL;
23187
+ if (cancellationDate && (isActive || isPending || isTrial))
23053
23188
  return (jsxs(CustomizedTag, __assign({ color: "red" }, { children: ["Canceled - ends on ", formatDate(cancellationDate)] })));
23189
+ if (cancellationDate && isCanceled)
23190
+ return "Canceled on ".concat(formatDate(cancellationDate));
23191
+ if (isExpired)
23192
+ return "Ended on ".concat(formatDate(endDate || trialEndDate));
23193
+ if (isPending) {
23194
+ if (trialStartDate)
23195
+ return "Trial starts on ".concat(formatDate(trialStartDate));
23196
+ if (startDate)
23197
+ return "Activates on ".concat(formatDate(startDate));
23198
+ }
23199
+ if (isTrial) {
23200
+ switch (trialExpirationAction) {
23201
+ case 'ACTIVATE':
23202
+ return "Activates on ".concat(formatDate(endDate));
23203
+ case 'CANCEL':
23204
+ return "Trial ends on ".concat(formatDate(endDate));
23205
+ }
23054
23206
  }
23055
23207
  if (evergreen) {
23056
23208
  return "Renews on ".concat(formatDate(endDate));
23057
23209
  }
23058
- if ((state === null || state === void 0 ? void 0 : state.toUpperCase()) === SubscriptionState$2.CANCELED ||
23059
- (state === null || state === void 0 ? void 0 : state.toUpperCase()) === SubscriptionState$2.EXPIRED) {
23060
- return "Ended on ".concat(formatDate(endDate));
23061
- }
23062
- return "Ends on ".concat(formatDate(endDate));
23210
+ return "Ends on ".concat(formatDate(endDate || trialEndDate));
23063
23211
  };
23064
23212
  var SubscriptionCardHeader = function (_a) {
23065
- var _b, _c, _d, _e, _f;
23213
+ var _b, _c, _d, _e;
23066
23214
  var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
23067
23215
  var darkMode = useContext(BunnyContext).darkMode;
23068
23216
  var brandColor = useContext(BrandContext).brandColor;
@@ -23070,10 +23218,10 @@ var SubscriptionCardHeader = function (_a) {
23070
23218
  var isMobile = useIsMobile();
23071
23219
  // Derived state
23072
23220
  var trialDaysLeft = subscription === null || subscription === void 0 ? void 0 : subscription.daysLeftInTrial;
23073
- var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
23221
+ var isTrial = isSubscriptionTrial(subscription);
23074
23222
  return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: {
23075
23223
  backgroundColor: darkMode ? 'var(--row-background-dark)' : '',
23076
- } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsx(Text$6, __assign({ style: __assign({ fontSize: '11px', fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsx(Text$6, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name }))), jsxs(CustomizedTag, __assign({ color: TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft || 'N/A', " days left)") : ''] }))] }))] })), jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsx(Text$6, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
23224
+ } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_b = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _b === void 0 ? void 0 : _b.name) && (jsx(Text$7, __assign({ style: __assign({ fontSize: '11px', fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_c = subscription.product.name) === null || _c === void 0 ? void 0 : _c.toUpperCase() }))), jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_d = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _d === void 0 ? void 0 : _d.name) && (jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name }))), jsxs(CustomizedTag, __assign({ color: TAG_COLORS[(_e = subscription.state) === null || _e === void 0 ? void 0 : _e.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft || 'N/A', " days left)") : ''] }))] }))] })), jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && (jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
23077
23225
  };
23078
23226
 
23079
23227
  var SubscriptionChargeTotal = function (_a) {
@@ -23150,19 +23298,19 @@ var SubscriptionChargeUnitPrice = function (_a) {
23150
23298
  return (jsx(Fragment, { children: hasPriceTiers(charge) ? (jsx(TieredDisplayDropdown, { charge: charge, currencyId: currencyId, truncatedText: "".concat(charge.kind === QuoteChangeKind.PRICE_UPDATE ? 'new ' : '').concat(getApplicablePriceTier(charge, currencyId, charge.priceDecimals)) })) : isChargeDiscount ? ("-".concat(price)) : (price) }));
23151
23299
  };
23152
23300
 
23153
- var Text$5 = Typography.Text;
23301
+ var Text$6 = Typography.Text;
23154
23302
  var SubscriptionCardColumnHeaders = function (_a) {
23155
23303
  var columns = _a.columns;
23156
- return (jsx(Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsx(Text$5, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
23304
+ return (jsx(Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsx(Text$6, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
23157
23305
  };
23158
23306
 
23159
- var Text$4 = Typography.Text;
23307
+ var Text$5 = Typography.Text;
23160
23308
  var SubscriptionsListCell = function (_a) {
23161
23309
  var children = _a.children, className = _a.className, gridColumn = _a.gridColumn, right = _a.right, style = _a.style;
23162
- return (jsx(Text$4, __assign({ className: "bunny-flex bunny-items-center bunny-text-sm bunny-whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
23310
+ return (jsx(Text$5, __assign({ className: "bunny-flex bunny-items-center bunny-text-sm bunny-whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
23163
23311
  };
23164
23312
 
23165
- var CARD_COLUMNS = [
23313
+ var NON_ADDON_CARD_COLUMNS = [
23166
23314
  {
23167
23315
  title: 'CHARGE',
23168
23316
  width: 'minmax(min-content, 26%)',
@@ -23187,12 +23335,38 @@ var CARD_COLUMNS = [
23187
23335
  width: "minmax(min-content, 18%)",
23188
23336
  },
23189
23337
  ];
23338
+ var ADDON_CARD_COLUMNS = [
23339
+ {
23340
+ title: 'CHARGE',
23341
+ width: 'minmax(min-content, 21.6%)',
23342
+ },
23343
+ {
23344
+ title: 'PERIOD',
23345
+ width: 'minmax(min-content, 21.1%)',
23346
+ },
23347
+ {
23348
+ className: 'text-right',
23349
+ title: 'QUANTITY',
23350
+ width: "minmax(min-content, 19.1%)",
23351
+ },
23352
+ {
23353
+ className: 'text-right',
23354
+ title: 'UNIT PRICE',
23355
+ width: "minmax(min-content, 19.1%)",
23356
+ },
23357
+ {
23358
+ className: 'text-right',
23359
+ title: 'TOTAL',
23360
+ width: "minmax(min-content, 19.1%)",
23361
+ },
23362
+ ];
23190
23363
  var SubscriptionCardDesktop = function (_a) {
23191
23364
  var _b;
23192
- var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
23365
+ var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription, isAddon = _a.isAddon;
23193
23366
  var shadow = useContext(SubscriptionsContext).shadow;
23194
23367
  // Derived state
23195
23368
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
23369
+ var CARD_COLUMNS = isAddon ? ADDON_CARD_COLUMNS : NON_ADDON_CARD_COLUMNS;
23196
23370
  return (jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : '') }, { children: [jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }), jsx(Divider, { className: "bunny-my-4", style: {
23197
23371
  gridColumn: '1 / 5',
23198
23372
  width: 'calc(100% + 32px)',
@@ -23219,11 +23393,9 @@ var SubscriptionCardDesktopRow = function (_a) {
23219
23393
  var chargePeriod = "".concat(formatDate(charge.startDate), " - ").concat(formatDate(charge.endDate));
23220
23394
  // Queries
23221
23395
  var data = useQuery({
23222
- queryKey: ['getFeatureUsage', charge.id, charge.startDate, charge.endDate],
23396
+ queryKey: ['getFeatureUsage', charge.id],
23223
23397
  queryFn: function () {
23224
23398
  return getFeatureUsage({
23225
- endDate: charge.endDate,
23226
- startDate: charge.startDate,
23227
23399
  subscriptionChargeId: charge.id,
23228
23400
  token: token,
23229
23401
  apiHost: apiHost,
@@ -23247,10 +23419,24 @@ var SubscriptionCardDesktopRow = function (_a) {
23247
23419
  : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
23248
23420
  };
23249
23421
 
23250
- var Text$3 = Typography.Text;
23422
+ function AddonSubscriptionsCards(_a) {
23423
+ var onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscriptions = _a.subscriptions, subscription = _a.subscription, hideExpired = _a.hideExpired;
23424
+ var addonSubscriptions = findAddonSubscriptions(subscription, subscriptions);
23425
+ if (addonSubscriptions.length === 0) {
23426
+ return null;
23427
+ }
23428
+ return (jsx(Fragment, { children: addonSubscriptions.map(function (addonSubscription, addonSubscriptionIndex) {
23429
+ if (hideExpired && isSubscriptionNotActive(addonSubscription))
23430
+ return null;
23431
+ var isLast = addonSubscriptionIndex === addonSubscriptions.length - 1;
23432
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-row" }, { children: [jsx(AddonIndentation, { isLast: isLast, indentation: ADDON_INDENTATION, verticalMargin: "-1rem" }), jsx("div", __assign({ className: "bunny-flex-1" }, { children: jsx(SubscriptionCardDesktop, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: addonSubscription, isAddon: true }) }))] })));
23433
+ }) }));
23434
+ }
23435
+
23436
+ var Text$4 = Typography.Text;
23251
23437
  var SubscriptionCardCellMobile = function (_a) {
23252
23438
  var children = _a.children, className = _a.className, style = _a.style;
23253
- return (jsx(Text$3, __assign({ className: className, style: style }, { children: children })));
23439
+ return (jsx(Text$4, __assign({ className: className, style: style }, { children: children })));
23254
23440
  };
23255
23441
 
23256
23442
  var CHARGE_COLUMNS = [
@@ -23298,28 +23484,29 @@ var SubscriptionCard = function (_a) {
23298
23484
  var SubscriptionsList = function (_a) {
23299
23485
  var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscriptions = _a.subscriptions;
23300
23486
  var isMobile = useIsMobile();
23301
- return (jsx(Fragment, { children: subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.map(function (subscription, subscriptionIndex) {
23487
+ var nonAddonSubscriptions = findNonAddonSubscriptions(subscriptions);
23488
+ return (jsx(Fragment, { children: nonAddonSubscriptions === null || nonAddonSubscriptions === void 0 ? void 0 : nonAddonSubscriptions.map(function (subscription, subscriptionIndex) {
23302
23489
  if (hideExpired && isSubscriptionNotActive(subscription))
23303
23490
  return null;
23304
23491
  if (isMobile)
23305
- return jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex);
23306
- return (jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }, subscriptionIndex));
23492
+ return (jsxs(Fragment, { children: [jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex), jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, hideExpired: hideExpired })] }));
23493
+ return (jsxs(Fragment, { children: [jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }, subscriptionIndex), jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, hideExpired: hideExpired })] }));
23307
23494
  }) }));
23308
23495
  };
23309
23496
 
23310
- // Extra props to pass in
23311
- // - previewMode: boolean
23312
- // - productId: string
23313
23497
  var SubscriptionsListContainer = function (_a) {
23314
23498
  var companyName = _a.companyName, _b = _a.hideExpired, hideExpired = _b === void 0 ? false : _b, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, onChangePlanClick = _a.onChangePlanClick, noSubscriptionsComponent = _a.noSubscriptionsComponent, subscriptions = _a.subscriptions, subscriptionsAreLoading = _a.subscriptionsAreLoading;
23315
23499
  // Context
23316
23500
  var apiHost = useContext(BunnyContext).apiHost;
23317
23501
  var gap = useContext(SubscriptionsContext).gap;
23318
23502
  var token = useToken();
23503
+ var account = useCurrentUserData(token).account;
23319
23504
  // Queries
23320
23505
  var _c = useQuery({
23321
23506
  queryKey: QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
23322
- queryFn: function () { return getPriceListChangeOptions({ apiHost: apiHost, token: token }); },
23507
+ queryFn: function () {
23508
+ return getPriceListChangeOptions({ apiHost: apiHost, token: token, accountCurrencyId: account === null || account === void 0 ? void 0 : account.currencyId });
23509
+ },
23323
23510
  enabled: Boolean(onChangePlanClick),
23324
23511
  }), priceListChangeOptions = _c.data, arePriceListChangeOptionsLoading = _c.isLoading;
23325
23512
  if (subscriptionsAreLoading ||
@@ -23328,10 +23515,10 @@ var SubscriptionsListContainer = function (_a) {
23328
23515
  return (jsx(Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-".concat(gap, " bunny-shrink bunny-overflow-auto") }, { children: jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions }) }))) : (noSubscriptionsComponent || (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-w-full" }, { children: jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) }));
23329
23516
  };
23330
23517
 
23331
- var Text$2 = Typography.Text;
23518
+ var Text$3 = Typography.Text;
23332
23519
  var DrawerHeader = function (_a) {
23333
23520
  var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
23334
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2" }, { children: [jsx(Text$2, __assign({ className: "bunny-text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "bunny-text-xs" }, { children: description }))] })));
23521
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2" }, { children: [jsx(Text$3, __assign({ className: "bunny-text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "bunny-text-xs" }, { children: description }))] })));
23335
23522
  };
23336
23523
 
23337
23524
  var formatDateForApi = function (date) {
@@ -23514,13 +23701,13 @@ var QuantityInput = function (_a) {
23514
23701
  }, status: isQuantityLowerThanOriginal(charge.quantity) ? 'error' : '', style: { width: '96px' }, value: value }) }));
23515
23702
  };
23516
23703
 
23517
- var Text$1 = Typography.Text;
23704
+ var Text$2 = Typography.Text;
23518
23705
  var QuantityChangeGridRow = function (_a) {
23519
23706
  var _b;
23520
23707
  var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge;
23521
23708
  if (!canShowQuantitiesInput(subscriptionCharge, subscription))
23522
23709
  return null;
23523
- return (jsxs(Fragment, { children: [jsx(Text$1, __assign({ className: "bunny-font-medium bunny-text-orange-600 bunny-col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsx(Text$1, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsx(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions }), jsx("div", {})] })), jsx(Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
23710
+ return (jsxs(Fragment, { children: [jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-orange-600 bunny-col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsx(Text$2, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions }), jsx("div", {})] })), jsx(Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
23524
23711
  };
23525
23712
 
23526
23713
  var QuantityChangeGridTitle = function (_a) {
@@ -23582,11 +23769,11 @@ var QuantityChangeDrawerDesktop = function (_a) {
23582
23769
  wrapper: {
23583
23770
  minWidth: '600px',
23584
23771
  },
23585
- }, title: jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }) }, { children: [jsxs("div", __assign({ className: "bunny-grid bunny-pb-4", style: {
23772
+ }, title: jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }) }, { children: [jsxs("div", __assign({ className: "bunny-grid bunny-pb-2", style: {
23586
23773
  gridTemplateColumns: '2fr 1fr 1fr',
23587
- rowGap: '0.75rem',
23774
+ rowGap: '0.25rem',
23588
23775
  columnGap: '1rem',
23589
- } }, { children: [jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsx(Divider, { className: "bunny-col-span-full bunny-py-2" }), subscriptions.map(function (subscription, index) {
23776
+ } }, { children: [jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsx(Divider, { className: "bunny-col-span-full" }), subscriptions.map(function (subscription, index) {
23590
23777
  var _a;
23591
23778
  var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL;
23592
23779
  return (jsx("div", __assign({ className: "bunny-contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
@@ -23631,7 +23818,7 @@ var SubscriptionsNavigation = function (_a) {
23631
23818
  return (jsxs(Fragment, { children: [!isMobile && expiredSwitchVisible && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired })), jsx("div", __assign({ className: "bunny-flex bunny-grow bunny-gap-2 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-justify-end') }, { children: canShowChangeQuantitiesButton && (jsx(ChangeQuantitiesButton, { canShowChangeQuantitiesButton: canShowChangeQuantitiesButton, setQuantityDrawerOpen: setQuantityDrawerOpen })) }))] }));
23632
23819
  };
23633
23820
 
23634
- var Text = Typography.Text;
23821
+ var Text$1 = Typography.Text;
23635
23822
  var SubscriptionsWrapper = function (_a) {
23636
23823
  var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, _b = _a.isInPreviewMode, isInPreviewMode = _b === void 0 ? false : _b, productId = _a.productId, className = _a.className, _c = _a.styles, userStyles = _c === void 0 ? {} : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, hideExpired = _a.hideExpired, _e = _a.hideExpiredToggle, hideExpiredToggle = _e === void 0 ? false : _e;
23637
23824
  var defaultStyles = {
@@ -23790,7 +23977,7 @@ var Subscriptions = function (_a) {
23790
23977
  setIsChangingPlan(false);
23791
23978
  }, handlePortalErrors: handlePortalErrors }));
23792
23979
  }
23793
- return (jsxs("div", __assign({ className: className }, { children: [!hideTitle ? jsx(PageTitle, { title: 'Subscriptions' }) : null, jsx(PageHeaderWithActions, __assign({ title: jsx(Fragment, { children: !hideExpiredToggle && (jsxs(Text, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod })] })));
23980
+ return (jsxs("div", __assign({ className: className }, { children: [!hideTitle ? jsx(PageTitle, { title: 'Subscriptions' }) : null, jsx(PageHeaderWithActions, __assign({ title: jsx(Fragment, { children: !hideExpiredToggle && (jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod })] })));
23794
23981
  };
23795
23982
  var PageHeaderWithActions = function (_a) {
23796
23983
  var children = _a.children, title = _a.title;
@@ -23805,4 +23992,248 @@ var PageSubTitle = function (_a) {
23805
23992
  return (jsx("div", __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: secondaryColor } }, { children: title })));
23806
23993
  };
23807
23994
 
23995
+ var MUTATION = "\nmutation BillingDetailsUpdate(\n $attributes: BillingDetailsAttributes!) {\n billingDetailsUpdate(\n attributes: $attributes\n ) {\n billingDetails {\n billingCity\n billingContact {\n email\n }\n billingCountry\n billingState\n billingStreet\n billingZip\n name\n taxNumber\n }\n errors\n }\n }\n";
23996
+ var billingDetailsUpdate = function (_a) {
23997
+ var attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
23998
+ return __awaiter(void 0, void 0, void 0, function () {
23999
+ var vars, response, errors;
24000
+ var _b;
24001
+ return __generator(this, function (_c) {
24002
+ switch (_c.label) {
24003
+ case 0:
24004
+ vars = { attributes: attributes };
24005
+ return [4 /*yield*/, gqlRequest({
24006
+ query: MUTATION,
24007
+ token: token,
24008
+ vars: vars,
24009
+ apiHost: apiHost,
24010
+ })];
24011
+ case 1:
24012
+ response = _c.sent();
24013
+ errors = (_b = response === null || response === void 0 ? void 0 : response.billingDetailsUpdate) === null || _b === void 0 ? void 0 : _b.errors;
24014
+ if (errors)
24015
+ throw errors;
24016
+ return [2 /*return*/, response.billingDetailsUpdate];
24017
+ }
24018
+ });
24019
+ });
24020
+ };
24021
+
24022
+ // TODO: move this to common
24023
+ var billingDetailsQuery = function () {
24024
+ 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}";
24025
+ };
24026
+ var getBillingDetails = function (_a) {
24027
+ var token = _a.token, apiHost = _a.apiHost;
24028
+ return __awaiter(void 0, void 0, void 0, function () {
24029
+ var response;
24030
+ var _b;
24031
+ return __generator(this, function (_c) {
24032
+ switch (_c.label) {
24033
+ case 0: return [4 /*yield*/, gqlRequest({
24034
+ query: billingDetailsQuery(),
24035
+ token: token,
24036
+ apiHost: apiHost,
24037
+ })];
24038
+ case 1:
24039
+ response = _c.sent();
24040
+ if (response === null || response === void 0 ? void 0 : response.errors) {
24041
+ throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
24042
+ }
24043
+ return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
24044
+ }
24045
+ });
24046
+ });
24047
+ };
24048
+
24049
+ var Text = Typography.Text;
24050
+ function BillingDetailsSection(_a) {
24051
+ var _this = this;
24052
+ var hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
24053
+ // State
24054
+ var _b = useState(false), isFormEdited = _b[0], setIsFormEdited = _b[1];
24055
+ var _c = useState(false), formIsValid = _c[0], setFormIsValid = _c[1];
24056
+ var form = Form.useForm()[0];
24057
+ var values = Form.useWatch([], form);
24058
+ // Context
24059
+ var apiHost = useContext(BunnyContext).apiHost;
24060
+ var token = useToken();
24061
+ // Hooks
24062
+ var isMobile = useIsMobile();
24063
+ var queryClient = useQueryClient();
24064
+ var showErrorNotification = useErrorNotification();
24065
+ var showSuccessNotification = useSuccessNotification();
24066
+ // Queries
24067
+ var _d = useQuery({
24068
+ queryKey: QueryKeyFactory.default.billingDetailsKey({ token: token }),
24069
+ queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
24070
+ }), billingDetails = _d.data, isLoadingBillingDetails = _d.isLoading;
24071
+ var _e = useMutation({
24072
+ mutationFn: function (changedFormData) { return __awaiter(_this, void 0, void 0, function () {
24073
+ var updatedBillingDetails;
24074
+ return __generator(this, function (_a) {
24075
+ switch (_a.label) {
24076
+ case 0: return [4 /*yield*/, billingDetailsUpdate({
24077
+ attributes: {
24078
+ name: changedFormData.name,
24079
+ billingStreet: changedFormData.billingStreet,
24080
+ billingCity: changedFormData.billingCity,
24081
+ billingZip: changedFormData.billingZip,
24082
+ billingState: changedFormData.billingState,
24083
+ billingCountry: changedFormData.billingCountry,
24084
+ billingContactEmail: changedFormData.billingContactEmail,
24085
+ taxNumber: changedFormData.taxNumber,
24086
+ },
24087
+ token: token,
24088
+ apiHost: apiHost,
24089
+ })];
24090
+ case 1:
24091
+ updatedBillingDetails = _a.sent();
24092
+ queryClient.setQueryData(QueryKeyFactory.default.billingDetailsKey({ token: token }), function (old) {
24093
+ return __assign(__assign({}, old), updatedBillingDetails.billingDetails);
24094
+ });
24095
+ return [2 /*return*/, updatedBillingDetails];
24096
+ }
24097
+ });
24098
+ }); },
24099
+ onSuccess: function () {
24100
+ showSuccessNotification('Your account details have been saved');
24101
+ queryClient.invalidateQueries({
24102
+ queryKey: QueryKeyFactory.default.taxationRequiredAccountFieldsKey({
24103
+ token: token,
24104
+ }),
24105
+ });
24106
+ },
24107
+ }), updateBillingDetails = _e.mutate, isUpdatingBillingDetails = _e.isPending;
24108
+ // Set form values when billing details are loaded
24109
+ useEffect(function () {
24110
+ var _a;
24111
+ if (billingDetails) {
24112
+ form.setFieldsValue({
24113
+ billingStreet: billingDetails.billingStreet,
24114
+ billingCity: billingDetails.billingCity,
24115
+ billingZip: billingDetails.billingZip,
24116
+ billingState: billingDetails.billingState,
24117
+ billingCountry: billingDetails.billingCountry,
24118
+ billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
24119
+ taxNumber: billingDetails.taxNumber,
24120
+ });
24121
+ }
24122
+ }, [billingDetails]);
24123
+ useEffect(function () {
24124
+ form
24125
+ .validateFields({ validateOnly: true })
24126
+ .then(function () { return setFormIsValid(true); })
24127
+ .catch(function () { return setFormIsValid(false); });
24128
+ var isFormEdited = function () {
24129
+ var _a;
24130
+ if (!billingDetails)
24131
+ return false;
24132
+ var currentValues = form.getFieldsValue();
24133
+ var accountValues = {
24134
+ billingStreet: billingDetails.billingStreet,
24135
+ billingCity: billingDetails.billingCity,
24136
+ billingZip: billingDetails.billingZip,
24137
+ billingState: billingDetails.billingState,
24138
+ billingCountry: billingDetails.billingCountry,
24139
+ billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
24140
+ taxNumber: billingDetails.taxNumber,
24141
+ };
24142
+ return Object.keys(currentValues).some(function (key) {
24143
+ var value = accountValues[key];
24144
+ return currentValues[key] !== value;
24145
+ });
24146
+ };
24147
+ setIsFormEdited(isFormEdited());
24148
+ }, [form, values, billingDetails]);
24149
+ // Validate form fields when isFormEdited changes
24150
+ useEffect(function () {
24151
+ var validateOnly = isFormEdited ? false : true;
24152
+ form.validateFields({ validateOnly: validateOnly });
24153
+ }, [isFormEdited]);
24154
+ var saveBillingDetails = function () { return __awaiter(_this, void 0, void 0, function () {
24155
+ var _this = this;
24156
+ return __generator(this, function (_a) {
24157
+ form.validateFields({ validateOnly: false }).then(function () { return __awaiter(_this, void 0, void 0, function () {
24158
+ var error_1;
24159
+ return __generator(this, function (_a) {
24160
+ switch (_a.label) {
24161
+ case 0:
24162
+ _a.trys.push([0, 2, 3, 4]);
24163
+ return [4 /*yield*/, form.validateFields()];
24164
+ case 1:
24165
+ _a.sent();
24166
+ updateBillingDetails(form.getFieldsValue());
24167
+ return [3 /*break*/, 4];
24168
+ case 2:
24169
+ error_1 = _a.sent();
24170
+ if (error_1 instanceof Error) {
24171
+ showErrorNotification('Failed to update account', error_1.message);
24172
+ }
24173
+ else {
24174
+ showErrorNotification('Please fill out all required fields');
24175
+ }
24176
+ return [3 /*break*/, 4];
24177
+ case 3:
24178
+ setIsFormEdited(false);
24179
+ return [7 /*endfinally*/];
24180
+ case 4: return [2 /*return*/];
24181
+ }
24182
+ });
24183
+ }); });
24184
+ return [2 /*return*/];
24185
+ });
24186
+ }); };
24187
+ var filteredCountryList = useMemo(function () {
24188
+ return countryListFilter ? Lists.COUNTRY_LIST.filter(countryListFilter) : Lists.COUNTRY_LIST;
24189
+ }, [countryListFilter]);
24190
+ return (jsx("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? 'bunny-w-full' : 'bunny-w-1/2') }, { children: jsxs("div", __assign({ className: "bunny-px-4" }, { children: [jsxs(Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: [jsx("div", __assign({ className: "bunny-mb-2" }, { children: jsx(Text, __assign({ className: "bunny-font-medium bunny-text-lg" }, { children: (billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.name) || 'No company name' })) })), jsxs(Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsx(Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [{ required: true, message: 'Street address is required' }] }, { children: jsx(Input, {}) })), jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsx(Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: 'City is required' }], className: "bunny-flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: 'Zipcode is required' }], className: "bunny-flex-1" }, { children: jsx(Input, {}) }))] })), jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: [jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsx(Form.Item, __assign({ label: "State", name: "billingState", rules: [
24191
+ {
24192
+ required: false,
24193
+ },
24194
+ ] }, { children: jsx(Input, {}) })) })), jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsx(Form.Item, __assign({ label: "Country", name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsx(Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
24195
+ var _a, _b;
24196
+ return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
24197
+ ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
24198
+ } }) })) }))] })), jsx(Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
24199
+ {
24200
+ required: true,
24201
+ message: 'Email is required',
24202
+ type: 'email',
24203
+ },
24204
+ ] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }] }, { children: jsx(Input, {}) }))] }))] })), jsx(Button, __assign({ disabled: !isFormEdited || isUpdatingBillingDetails || !formIsValid, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails }, { children: "Save" }))] })) })));
24205
+ }
24206
+
24207
+ var BillingDetails = function (_a) {
24208
+ var className = _a.className, countryListFilter = _a.countryListFilter, _b = _a.hideBillingDetailsForm, hideBillingDetailsForm = _b === void 0 ? false : _b, _c = _a.hidePaymentMethodForm, hidePaymentMethodForm = _c === void 0 ? false : _c, _d = _a.isCardEnabled, isCardEnabled = _d === void 0 ? true : _d, _e = _a.isUpgradeFromTrial, isUpgradeFromTrial = _e === void 0 ? false : _e, _f = _a.shadow, shadow = _f === void 0 ? 'shadow-md' : _f, onSavePaymentMethod = _a.onSavePaymentMethod;
24209
+ // Hooks
24210
+ var isMobile = useIsMobile();
24211
+ return (jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-py-2 bunny-my-2 ".concat(isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row', " bunny-gap-4") }, { children: [!hideBillingDetailsForm ? (jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm, isUpgradeFromTrial: isUpgradeFromTrial, onSavePaymentMethod: onSavePaymentMethod })) : null] })) })));
24212
+ };
24213
+ var WrapperComponent = function (_a) {
24214
+ var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;
24215
+ return (jsx("div", __assign({ className: "".concat(className) }, { children: isCardEnabled ? jsx(Card, __assign({ className: "".concat(shadow) }, { children: children })) : jsx("div", { children: children }) })));
24216
+ };
24217
+ var ResponsiveDivider = function () {
24218
+ var isMobile = useIsMobile();
24219
+ return isMobile ? (jsx("div", __assign({ className: "bunny-mx-4" }, { children: jsx(Divider, {}) }))) : (jsx("div", { children: jsx(Divider, { className: "bunny-h-full", type: "vertical" }) }));
24220
+ };
24221
+ var PaymentFormSection = function (_a) {
24222
+ var hideBillingDetailsForm = _a.hideBillingDetailsForm, isUpgradeFromTrial = _a.isUpgradeFromTrial, onSavePaymentMethod = _a.onSavePaymentMethod;
24223
+ var isMobile = useIsMobile();
24224
+ var onTokenExpired = useContext(BunnyContext).onTokenExpired;
24225
+ var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
24226
+ var showSuccessNotification = useSuccessNotification();
24227
+ return (jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsx(PaymentForm, { onFail: function (error) {
24228
+ handleAllErrorFormats(error);
24229
+ }, onSavePaymentMethod: function (response) {
24230
+ showSuccessNotification(isUpgradeFromTrial
24231
+ ? 'Payment method saved! Your trial will automatically convert to a paid subscription.'
24232
+ : 'Payment method saved successfully!');
24233
+ // TODO: onSavePaymentMethod(response: any) should be cleaned up to have a response type (not any)
24234
+ // and work with both stripe and demo pay requests
24235
+ onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
24236
+ } }) })));
24237
+ };
24238
+
23808
24239
  export { BillingDetails, BunnyProvider, Footer, Invoice, MiniCreditCard, PaymentForm, Quote, Quotes, Signup, SubscriptionsWrapper as Subscriptions, Transactions };