@bunnyapp/components 1.5.0-beta.1 → 1.5.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/dist/cjs/index.js +1098 -1001
  2. package/dist/cjs/src/components/BunnyProvider.d.ts +0 -1
  3. package/dist/cjs/src/components/Checkout/Checkout.d.ts +12 -6
  4. package/dist/cjs/src/components/Invoice/Invoice.d.ts +1 -1
  5. package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +1 -2
  6. package/dist/cjs/src/components/PaymentForm/PaymentFormTypes.d.ts +1 -11
  7. package/dist/cjs/src/components/Quote/Quote.d.ts +1 -1
  8. package/dist/cjs/src/components/QuoteProvider.d.ts +22 -0
  9. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +2 -1
  10. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarInput.d.ts +3 -4
  11. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +5 -5
  12. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanAddonsCard.d.ts +1 -1
  13. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +2 -1
  14. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +2 -1
  15. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/planManagerUtils.d.ts +2 -2
  16. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +3 -2
  17. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +2 -1
  18. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +2 -1
  19. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelector.d.ts +2 -3
  20. package/dist/cjs/src/components/Subscriptions/QuantityDrawerContainer.d.ts +14 -0
  21. package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridRow.d.ts +4 -2
  22. package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuantityInput.d.ts +4 -2
  23. package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +3 -1
  24. package/dist/cjs/src/components/Subscriptions/subscriptionsList/ChangeQuantitiesButton.d.ts +2 -3
  25. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +2 -1
  26. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardHeader.d.ts +2 -3
  27. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts +2 -3
  28. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +2 -3
  29. package/dist/cjs/src/components/Transactions/Transactions.d.ts +2 -2
  30. package/dist/cjs/src/components/Transactions/transactionsList/TransactionsListDesktop.d.ts +1 -1
  31. package/dist/cjs/src/components/Transactions/transactionsList/TransactionsListMobile.d.ts +1 -1
  32. package/dist/cjs/src/components/Transactions/transactionsList/utils.d.ts +1 -1
  33. package/dist/cjs/src/{components/Invoice → contexts}/InvoiceQuoteContext.d.ts +2 -2
  34. package/dist/cjs/src/{components/Subscriptions → contexts}/SubscriptionsContext.d.ts +0 -4
  35. package/dist/{esm/src/components/Transactions → cjs/src/contexts}/TransactionsListContext.d.ts +2 -2
  36. package/dist/cjs/src/graphql/mutations/quoteChargeUpdate.d.ts +2 -1
  37. package/dist/cjs/src/graphql/queries/getAddonPlans.d.ts +7 -0
  38. package/dist/cjs/src/graphql/queries/getFormattedQuote.d.ts +2 -1
  39. package/dist/cjs/src/hooks/quotes/useQuoteCreate.d.ts +1 -4
  40. package/dist/cjs/src/hooks/quotes/useQuoteQuantities.d.ts +14 -0
  41. package/dist/cjs/src/hooks/useCurrentUserData.d.ts +11 -8
  42. package/dist/cjs/src/hooks/usePaymentMethod.d.ts +2 -1
  43. package/dist/cjs/src/hooks/usePriceListChangeOptions.d.ts +6 -0
  44. package/dist/cjs/src/utils/addonPlanUtils.d.ts +3 -1
  45. package/dist/cjs/src/utils/chargeUtils.d.ts +2 -0
  46. package/dist/cjs/src/utils/featureAddonUtils.d.ts +5 -2
  47. package/dist/esm/index.js +1100 -1003
  48. package/dist/esm/src/components/BunnyProvider.d.ts +0 -1
  49. package/dist/esm/src/components/Checkout/Checkout.d.ts +12 -6
  50. package/dist/esm/src/components/Invoice/Invoice.d.ts +1 -1
  51. package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +1 -2
  52. package/dist/esm/src/components/PaymentForm/PaymentFormTypes.d.ts +1 -11
  53. package/dist/esm/src/components/Quote/Quote.d.ts +1 -1
  54. package/dist/esm/src/components/QuoteProvider.d.ts +22 -0
  55. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +2 -1
  56. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarInput.d.ts +3 -4
  57. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +5 -5
  58. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanAddonsCard.d.ts +1 -1
  59. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +2 -1
  60. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +2 -1
  61. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/planManagerUtils.d.ts +2 -2
  62. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +3 -2
  63. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +2 -1
  64. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +2 -1
  65. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelector.d.ts +2 -3
  66. package/dist/esm/src/components/Subscriptions/QuantityDrawerContainer.d.ts +14 -0
  67. package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridRow.d.ts +4 -2
  68. package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuantityInput.d.ts +4 -2
  69. package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +3 -1
  70. package/dist/esm/src/components/Subscriptions/subscriptionsList/ChangeQuantitiesButton.d.ts +2 -3
  71. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +2 -1
  72. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardHeader.d.ts +2 -3
  73. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts +2 -3
  74. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +2 -3
  75. package/dist/esm/src/components/Transactions/Transactions.d.ts +2 -2
  76. package/dist/esm/src/components/Transactions/transactionsList/TransactionsListDesktop.d.ts +1 -1
  77. package/dist/esm/src/components/Transactions/transactionsList/TransactionsListMobile.d.ts +1 -1
  78. package/dist/esm/src/components/Transactions/transactionsList/utils.d.ts +1 -1
  79. package/dist/esm/src/{components/Invoice → contexts}/InvoiceQuoteContext.d.ts +2 -2
  80. package/dist/esm/src/{components/Subscriptions → contexts}/SubscriptionsContext.d.ts +0 -4
  81. package/dist/{cjs/src/components/Transactions → esm/src/contexts}/TransactionsListContext.d.ts +2 -2
  82. package/dist/esm/src/graphql/mutations/quoteChargeUpdate.d.ts +2 -1
  83. package/dist/esm/src/graphql/queries/getAddonPlans.d.ts +7 -0
  84. package/dist/esm/src/graphql/queries/getFormattedQuote.d.ts +2 -1
  85. package/dist/esm/src/hooks/quotes/useQuoteCreate.d.ts +1 -4
  86. package/dist/esm/src/hooks/quotes/useQuoteQuantities.d.ts +14 -0
  87. package/dist/esm/src/hooks/useCurrentUserData.d.ts +11 -8
  88. package/dist/esm/src/hooks/usePaymentMethod.d.ts +2 -1
  89. package/dist/esm/src/hooks/usePriceListChangeOptions.d.ts +6 -0
  90. package/dist/esm/src/utils/addonPlanUtils.d.ts +3 -1
  91. package/dist/esm/src/utils/chargeUtils.d.ts +2 -0
  92. package/dist/esm/src/utils/featureAddonUtils.d.ts +5 -2
  93. package/dist/index.d.ts +1 -2
  94. package/package.json +2 -2
  95. package/dist/cjs/src/components/PlanManagerQuoteProvider.d.ts +0 -19
  96. package/dist/cjs/src/components/QuotePreviewProvider.d.ts +0 -15
  97. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelectorContext.d.ts +0 -9
  98. package/dist/cjs/src/components/Subscriptions/QuotePreviewData.d.ts +0 -6
  99. package/dist/esm/src/components/PlanManagerQuoteProvider.d.ts +0 -19
  100. package/dist/esm/src/components/QuotePreviewProvider.d.ts +0 -15
  101. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListSelector/PriceListSelectorContext.d.ts +0 -9
  102. package/dist/esm/src/components/Subscriptions/QuotePreviewData.d.ts +0 -6
package/dist/esm/index.js CHANGED
@@ -2,9 +2,9 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback } from 'react';
3
3
  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
- import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CheckCircleFilled, CloseOutlined, ArrowLeftOutlined, InfoCircleOutlined } from '@ant-design/icons';
5
+ import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CheckCircleFilled, ArrowLeftOutlined, CloseOutlined, 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, 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';
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, SubscriptionState as SubscriptionState$2, ChargeType, PricingModel, QuoteChangeKind, getAccount, StringUtils, BillingPeriod, 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-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";
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-transparent {\n background-color: transparent;\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, 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.4.0';
146
+ var PACKAGE_VERSION = '1.5.0-beta.1';
147
147
  var createRequestHeaders = function (token) {
148
148
  var headers = createClientDevHeaders({ token: token });
149
149
  // Add the components version header
@@ -538,6 +538,46 @@ var checkout = function (_a) {
538
538
  });
539
539
  };
540
540
 
541
+ 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 }";
542
+ var getCurrentUserData = function (_a) {
543
+ var token = _a.token, apiHost = _a.apiHost;
544
+ return __awaiter(void 0, void 0, void 0, function () {
545
+ var response;
546
+ var _b, _c, _d, _e, _f, _g, _h, _j;
547
+ return __generator(this, function (_k) {
548
+ switch (_k.label) {
549
+ case 0: return [4 /*yield*/, gqlRequest$1({
550
+ query: CURRENT_USER_DATA_QUERY,
551
+ token: token,
552
+ apiHost: apiHost,
553
+ })];
554
+ case 1:
555
+ response = _k.sent();
556
+ return [2 /*return*/, {
557
+ authObjectName: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.authObjectName,
558
+ account: (_c = response === null || response === void 0 ? void 0 : response.currentUser) === null || _c === void 0 ? void 0 : _c.account,
559
+ companyName: (_d = response === null || response === void 0 ? void 0 : response.company) === null || _d === void 0 ? void 0 : _d.name,
560
+ 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,
561
+ privacyUrl: (_g = response === null || response === void 0 ? void 0 : response.currentUser) === null || _g === void 0 ? void 0 : _g.privacyUrl,
562
+ termsUrl: (_h = response === null || response === void 0 ? void 0 : response.currentUser) === null || _h === void 0 ? void 0 : _h.termsUrl,
563
+ entityId: (_j = response === null || response === void 0 ? void 0 : response.currentUser) === null || _j === void 0 ? void 0 : _j.entityId,
564
+ }];
565
+ }
566
+ });
567
+ });
568
+ };
569
+
570
+ var useCurrentUserData = function (token) {
571
+ var apiHost = useContext(BunnyContext).apiHost;
572
+ var _a = useQuery({
573
+ queryKey: QueryKeyFactory.default.currentUserKey(token),
574
+ queryFn: function () { return getCurrentUserData({ token: token, apiHost: apiHost }); },
575
+ enabled: Boolean(token),
576
+ }), currentUserData = _a.data, isCurrentUserDataLoading = _a.isLoading;
577
+ var currentUser = currentUserData || {};
578
+ return { currentUser: currentUser, isCurrentUserDataLoading: isCurrentUserDataLoading };
579
+ };
580
+
541
581
  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}"; };
542
582
  var getPaymentMethods = function (_a) {
543
583
  var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
@@ -561,15 +601,16 @@ var getPaymentMethods = function (_a) {
561
601
  });
562
602
  };
563
603
  var usePaymentMethod = function (_a) {
564
- var accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost;
565
- var _b = useQuery({
566
- queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
604
+ var accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
605
+ var _c = useQuery({
606
+ queryKey: QueryKeyFactory.default.accountPaymentMethodsKey({
567
607
  accountId: accountId,
568
608
  token: token,
569
609
  }),
570
610
  queryFn: function () { return getPaymentMethods({ apiHost: apiHost, token: token, accountId: accountId }); },
571
- staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
572
- }), data = _b.data, isLoading = _b.isLoading;
611
+ staleTime: 5 * 60 * 1000,
612
+ enabled: enabled,
613
+ }), data = _c.data, isLoading = _c.isLoading;
573
614
  return {
574
615
  paymentMethods: data,
575
616
  defaultPaymentMethod: data === null || data === void 0 ? void 0 : data.find(function (paymentMethod) { return paymentMethod.isDefault; }),
@@ -920,7 +961,7 @@ function usePay(_a) {
920
961
  }
921
962
 
922
963
  var handleAllErrorFormats = useAllErrorFormats();
923
- var showErrorNotification$3 = useErrorNotification();
964
+ var showErrorNotification$5 = useErrorNotification();
924
965
  var ActualCheckoutFooter = function (_a) {
925
966
  var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
926
967
  var isMobile = useIsMobile();
@@ -1009,7 +1050,7 @@ var ActualCheckoutFooter = function (_a) {
1009
1050
  _f.sent();
1010
1051
  return [3 /*break*/, 6];
1011
1052
  case 5:
1012
- showErrorNotification$3("Payment holds are not supported by ".concat((_e = (_d = plugin.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name));
1053
+ showErrorNotification$5("Payment holds are not supported by ".concat((_e = (_d = plugin.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name));
1013
1054
  return [3 /*break*/, 6];
1014
1055
  case 6: return [2 /*return*/];
1015
1056
  }
@@ -18504,7 +18545,7 @@ var useAutoSetDefaultPaymentMethod = function (_a) {
18504
18545
  }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod;
18505
18546
  // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
18506
18547
  function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
18507
- var cachedPaymentMethods = queryClient.getQueryData(QueryKeyFactory.default.accountPaymentMethodKey({
18548
+ var cachedPaymentMethods = queryClient.getQueryData(QueryKeyFactory.default.accountPaymentMethodsKey({
18508
18549
  accountId: accountId,
18509
18550
  token: token,
18510
18551
  }));
@@ -18513,7 +18554,7 @@ var useAutoSetDefaultPaymentMethod = function (_a) {
18513
18554
  var paymentMethod = _a[_i];
18514
18555
  paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
18515
18556
  }
18516
- queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodKey({
18557
+ queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodsKey({
18517
18558
  accountId: accountId,
18518
18559
  token: token,
18519
18560
  }), cachedPaymentMethods);
@@ -19000,9 +19041,8 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRem
19000
19041
  })
19001
19042
  .then(function () {
19002
19043
  showSuccessNotification('Payment method was removed', 'Success');
19003
- // TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
19004
19044
  queryClient.invalidateQueries({
19005
- queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
19045
+ queryKey: QueryKeyFactory.default.accountPaymentMethodsKey({
19006
19046
  token: token,
19007
19047
  accountId: accountId,
19008
19048
  }),
@@ -19053,9 +19093,8 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
19053
19093
  .then(function () {
19054
19094
  showSuccessNotification("Payment method ".concat(data.metadata.identifier, " was set as default"), 'Success');
19055
19095
  onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
19056
- // TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
19057
19096
  queryClient.invalidateQueries({
19058
- queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
19097
+ queryKey: QueryKeyFactory.default.accountPaymentMethodsKey({
19059
19098
  token: token,
19060
19099
  accountId: accountId,
19061
19100
  }),
@@ -19082,22 +19121,21 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
19082
19121
  return { setDefaultPaymentMethod: setDefaultPaymentMethod, loading: loading };
19083
19122
  }
19084
19123
 
19085
- var showErrorNotification$2 = useErrorNotification();
19124
+ var showErrorNotification$4 = useErrorNotification();
19086
19125
  var PaymentForm = function (_a) {
19087
- var _b;
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;
19126
+ 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, paymentHoldOptions = _a.paymentHoldOptions;
19089
19127
  // Local state
19090
- var _c = useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
19128
+ var _b = useState(false), showPaymentMethodForm = _b[0], setShowPaymentMethodForm = _b[1];
19091
19129
  // Simple hooks
19092
19130
  var queryClient = useQueryClient();
19093
19131
  var apiHost = useContext(BunnyContext).apiHost;
19094
19132
  var tokenFromContexts = useToken();
19095
19133
  var token = overrideToken || tokenFromContexts;
19096
- var _d = usePaymentMethod({
19134
+ var _c = usePaymentMethod({
19097
19135
  accountId: accountId,
19098
19136
  token: token,
19099
19137
  apiHost: apiHost,
19100
- }), storedPaymentMethods = _d.paymentMethods, defaultPaymentMethod = _d.defaultPaymentMethod, isPaymentMethodLoading = _d.isLoading;
19138
+ }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod, isPaymentMethodLoading = _c.isLoading;
19101
19139
  // Complex hooks
19102
19140
  var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, token: token, accountId: accountId }).paymentPlugins;
19103
19141
  var selectedPaymentMethodPlugin = useMemo(function () {
@@ -19107,13 +19145,14 @@ var PaymentForm = function (_a) {
19107
19145
  // Derived state
19108
19146
  var defaultPaymentMethodPlugin = 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()); });
19109
19147
  var paying = Boolean(quote || invoice);
19110
- var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) ||
19111
- (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
19112
- currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
19148
+ var _d = usePaymentFormCurrencyId({
19149
+ quote: quote,
19150
+ invoice: invoice,
19151
+ }), currencyId = _d.currencyId, isCurrencyIdLoading = _d.isCurrencyIdLoading;
19113
19152
  var paymentRequired = quote ? getQuoteAmountDue(quote) > 0 : true;
19114
19153
  // Custom hooks
19115
19154
  var _e = useSetDefaultPaymentMethod(paymentPlugins || [], apiHost, token, accountId, function (message) {
19116
- showErrorNotification$2(message, 'Error setting default payment method');
19155
+ showErrorNotification$4(message, 'Error setting default payment method');
19117
19156
  }, function () {
19118
19157
  onSetDefaultPaymentMethod === null || onSetDefaultPaymentMethod === void 0 ? void 0 : onSetDefaultPaymentMethod();
19119
19158
  }), handleSetDefault = _e.setDefaultPaymentMethod, setDefaultPaymentMethodLoading = _e.loading;
@@ -19150,7 +19189,7 @@ var PaymentForm = function (_a) {
19150
19189
  onError: onFail,
19151
19190
  }), checkoutNoPayment = _g.mutate, isCheckingOutNoPayment = _g.isPending;
19152
19191
  var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], apiHost, token, accountId, onRemovePaymentMethod, function (message) {
19153
- showErrorNotification$2(message, 'Error removing payment method');
19192
+ showErrorNotification$4(message, 'Error removing payment method');
19154
19193
  });
19155
19194
  var handlePaymentSuccess = function () {
19156
19195
  // Hide payment method selector and form
@@ -19159,7 +19198,7 @@ var PaymentForm = function (_a) {
19159
19198
  };
19160
19199
  var handleSavePaymentMethod = function (response) {
19161
19200
  queryClient.invalidateQueries({
19162
- queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
19201
+ queryKey: QueryKeyFactory.default.accountPaymentMethodsKey({
19163
19202
  accountId: accountId,
19164
19203
  token: token,
19165
19204
  }),
@@ -19169,7 +19208,7 @@ var PaymentForm = function (_a) {
19169
19208
  };
19170
19209
  function handleClickAddPaymentMethod() {
19171
19210
  if ((paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) === 0) {
19172
- showErrorNotification$2('No payment plugins available', 'Error adding payment method');
19211
+ showErrorNotification$4('No payment plugins available', 'Error adding payment method');
19173
19212
  }
19174
19213
  else {
19175
19214
  setShowPaymentMethodForm(true);
@@ -19181,9 +19220,14 @@ var PaymentForm = function (_a) {
19181
19220
  setShowPaymentMethodForm(true);
19182
19221
  }
19183
19222
  }, [storedPaymentMethods]);
19184
- if (isPaymentMethodLoading) {
19223
+ if (isPaymentMethodLoading || isCurrencyIdLoading) {
19185
19224
  return jsx(Skeleton, { active: true, className: "bunny-p-4" });
19186
19225
  }
19226
+ // Return early because it is a bug if PaymentForm is rendered without a currency ID.
19227
+ // For example, sepa / iDeal may not show for dutch customer if no currencyId
19228
+ if (!currencyId) {
19229
+ return jsx("div", { children: "PaymentForm error: No currency ID found from Quote or Invoice or props." });
19230
+ }
19187
19231
  return (jsx(PaymentContext.Provider, __assign({ value: {
19188
19232
  onClickCancel: function () { return setShowPaymentMethodForm(false); },
19189
19233
  accountId: accountId,
@@ -19205,6 +19249,15 @@ function StripeWrapper(_a) {
19205
19249
  var _b = useStripePlugin(plugin, apiHost, currencyId || 'usd', token, accountId), stripe = _b.stripe, options = _b.options;
19206
19250
  return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: children })));
19207
19251
  }
19252
+ function usePaymentFormCurrencyId(_a) {
19253
+ var quote = _a.quote, invoice = _a.invoice;
19254
+ var token = useToken();
19255
+ var _b = useCurrentUserData(token), currentUser = _b.currentUser, isCurrentUserDataLoading = _b.isCurrentUserDataLoading;
19256
+ var account = currentUser === null || currentUser === void 0 ? void 0 : currentUser.account;
19257
+ var accountCurrencyId = account === null || account === void 0 ? void 0 : account.currencyId;
19258
+ var currencyId = useMemo(function () { var _a; return (_a = (accountCurrencyId || (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId))) === null || _a === void 0 ? void 0 : _a.toLowerCase(); }, [accountCurrencyId, quote === null || quote === void 0 ? void 0 : quote.currencyId, invoice === null || invoice === void 0 ? void 0 : invoice.currencyId]);
19259
+ return { currencyId: currencyId, isCurrencyIdLoading: isCurrentUserDataLoading };
19260
+ }
19208
19261
 
19209
19262
  function Invoice(_a) {
19210
19263
  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, _d = _a.hidePaymentForm, hidePaymentForm = _d === void 0 ? false : _d, onInvoiceLoaded = _a.onInvoiceLoaded;
@@ -19269,7 +19322,7 @@ function ActualInvoice(_a) {
19269
19322
 
19270
19323
  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 }"; };
19271
19324
  var getFormattedQuote = function (_a) {
19272
- var token = _a.token, apiHost = _a.apiHost;
19325
+ var token = _a.token, apiHost = _a.apiHost, id = _a.id;
19273
19326
  return __awaiter(void 0, void 0, void 0, function () {
19274
19327
  var response;
19275
19328
  return __generator(this, function (_b) {
@@ -19278,6 +19331,7 @@ var getFormattedQuote = function (_a) {
19278
19331
  query: MUTATION$8(),
19279
19332
  token: token,
19280
19333
  apiHost: apiHost,
19334
+ vars: { id: id },
19281
19335
  })];
19282
19336
  case 1:
19283
19337
  response = _b.sent();
@@ -19377,7 +19431,6 @@ var quoteAccept = function (_a) {
19377
19431
  });
19378
19432
  });
19379
19433
  };
19380
- // export default quoteAccept;
19381
19434
  var useSendAcceptQuote = function (_a) {
19382
19435
  var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
19383
19436
  // Hooks
@@ -19595,7 +19648,7 @@ var PaymentHoldModal = function (_a) {
19595
19648
  showSuccessNotification$2("Approved payment hold for ".concat(formatCurrency(quote.amount, quote.currency)));
19596
19649
  queryClient.invalidateQueries({
19597
19650
  queryKey: QueryKeyFactory.default.createQuoteKey({
19598
- id: quote.id,
19651
+ id: quote.quote.id,
19599
19652
  token: token,
19600
19653
  }),
19601
19654
  });
@@ -19617,7 +19670,6 @@ function Quote(_a) {
19617
19670
  onQuoteLoaded: onQuoteLoaded,
19618
19671
  } }, { children: jsx(ActualQuote, {}) })));
19619
19672
  }
19620
- // TODO: dissolve this hook
19621
19673
  var useQuotePaymentHold = function (formattedQuote) {
19622
19674
  var _a, _b;
19623
19675
  var _c = useState(false), paymentHoldModalVisible = _c[0], setPaymentHoldModalVisible = _c[1];
@@ -19644,7 +19696,7 @@ function ActualQuote() {
19644
19696
  queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
19645
19697
  return __generator(this, function (_a) {
19646
19698
  switch (_a.label) {
19647
- case 0: return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost })];
19699
+ case 0: return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost, id: id })];
19648
19700
  case 1: return [2 /*return*/, _a.sent()];
19649
19701
  }
19650
19702
  });
@@ -19688,7 +19740,6 @@ function ActualQuote() {
19688
19740
  return (jsx(Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
19689
19741
  }) }))) : 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 })] }));
19690
19742
  }
19691
- // TODO: clean up the logic here. Its quite confusing
19692
19743
  function QuoteButtons(_a) {
19693
19744
  var isAccepted = _a.isAccepted, formattedQuote = _a.formattedQuote, isMobile = _a.isMobile, hideDownloadButton = _a.hideDownloadButton, id = _a.id, isAccepting = _a.isAccepting, handleClickAccept = _a.handleClickAccept, setPaymentHoldModalVisible = _a.setPaymentHoldModalVisible, shouldDoPaymentHold = _a.shouldDoPaymentHold, paymentHoldCompleted = _a.paymentHoldCompleted, paymentHold = _a.paymentHold;
19694
19745
  var apiHost = useContext(BunnyContext).apiHost;
@@ -19968,14 +20019,14 @@ function Transactions(_a) {
19968
20019
  var token = useToken();
19969
20020
  // Local state
19970
20021
  var _o = useState(''), search = _o[0], setSearch = _o[1];
19971
- var filterValue = filter || (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : '');
20022
+ var filterValue = filter || (search.length > 0 ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : '');
19972
20023
  // Queries
19973
20024
  var data = useQuery({
19974
20025
  queryKey: ['transactions', token, filterValue],
19975
20026
  queryFn: function () { return getTransactions(filterValue, apiHost, token); },
19976
20027
  placeholderData: keepPreviousData,
19977
20028
  }).data;
19978
- return (jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsDisplay, { transactions: data || [], onSearchValueChanged: setSearch, search: search }) })));
20029
+ return (jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }) })));
19979
20030
  }
19980
20031
  function TransactionsDisplay(_a) {
19981
20032
  var _b, _c;
@@ -20050,7 +20101,7 @@ function TransactionsDisplay(_a) {
20050
20101
  return;
20051
20102
  }
20052
20103
  onSearchValueChanged(e.target.value);
20053
- }, prefix: !search && jsx(SearchOutlined, {}), placeholder: "Search by id #", style: {
20104
+ }, prefix: jsx(SearchOutlined, {}), placeholder: "Search by id #", style: {
20054
20105
  minWidth: '300px',
20055
20106
  }, value: search }) })))] }))) : null, jsx("div", __assign({ className: "bunny-grid bunny-w-full bunny-rounded-md bunny-overflow-auto ".concat(shadow), style: {
20056
20107
  gridTemplateColumns: gridTemplateColumns(),
@@ -20371,7 +20422,7 @@ var getCoupons = function (_a) {
20371
20422
  });
20372
20423
  };
20373
20424
 
20374
- var showErrorNotification$1 = useErrorNotification();
20425
+ var showErrorNotification$3 = useErrorNotification();
20375
20426
  var useUpdateCoupons = function (_a) {
20376
20427
  var apiHost = _a.apiHost, token = _a.token, quoteChangeId = _a.quoteChangeId, onCouponAdded = _a.onCouponAdded, onCouponRemoved = _a.onCouponRemoved;
20377
20428
  var coupons = useQuery({
@@ -20398,7 +20449,7 @@ var useUpdateCoupons = function (_a) {
20398
20449
  },
20399
20450
  onError: function (error) {
20400
20451
  var _a, _b;
20401
- showErrorNotification$1((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
20452
+ showErrorNotification$3((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
20402
20453
  },
20403
20454
  }), addCoupon = _b.mutate, isAddingCoupon = _b.isPending;
20404
20455
  var _c = useMutation({
@@ -20418,7 +20469,7 @@ var useUpdateCoupons = function (_a) {
20418
20469
  },
20419
20470
  onError: function (error) {
20420
20471
  var _a, _b;
20421
- showErrorNotification$1((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error removing coupon');
20472
+ showErrorNotification$3((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error removing coupon');
20422
20473
  },
20423
20474
  }), removeCoupon = _c.mutate, isRemovingCoupon = _c.isPending;
20424
20475
  return {
@@ -20430,45 +20481,6 @@ var useUpdateCoupons = function (_a) {
20430
20481
  };
20431
20482
  };
20432
20483
 
20433
- 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 }";
20434
- var getCurrentUserData = function (_a) {
20435
- var token = _a.token, apiHost = _a.apiHost;
20436
- return __awaiter(void 0, void 0, void 0, function () {
20437
- var response;
20438
- var _b, _c, _d, _e, _f, _g, _h, _j;
20439
- return __generator(this, function (_k) {
20440
- switch (_k.label) {
20441
- case 0: return [4 /*yield*/, gqlRequest$1({
20442
- query: CURRENT_USER_DATA_QUERY,
20443
- token: token,
20444
- apiHost: apiHost,
20445
- })];
20446
- case 1:
20447
- response = _k.sent();
20448
- return [2 /*return*/, {
20449
- authObjectName: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.authObjectName,
20450
- account: (_c = response === null || response === void 0 ? void 0 : response.currentUser) === null || _c === void 0 ? void 0 : _c.account,
20451
- companyName: (_d = response === null || response === void 0 ? void 0 : response.company) === null || _d === void 0 ? void 0 : _d.name,
20452
- 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,
20453
- privacyUrl: (_g = response === null || response === void 0 ? void 0 : response.currentUser) === null || _g === void 0 ? void 0 : _g.privacyUrl,
20454
- termsUrl: (_h = response === null || response === void 0 ? void 0 : response.currentUser) === null || _h === void 0 ? void 0 : _h.termsUrl,
20455
- entityId: (_j = response === null || response === void 0 ? void 0 : response.currentUser) === null || _j === void 0 ? void 0 : _j.entityId,
20456
- }];
20457
- }
20458
- });
20459
- });
20460
- };
20461
-
20462
- var useCurrentUserData = function (token) {
20463
- var apiHost = useContext(BunnyContext).apiHost;
20464
- var currentUserData = useQuery({
20465
- queryKey: QueryKeyFactory.default.currentUserKey(token),
20466
- queryFn: function () { return getCurrentUserData({ token: token, apiHost: apiHost }); },
20467
- enabled: Boolean(token),
20468
- }).data;
20469
- return currentUserData || {};
20470
- };
20471
-
20472
20484
  var BunnyFooterIcon = function (_a) {
20473
20485
  var color = _a.color;
20474
20486
  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" }) })) })] })));
@@ -20478,7 +20490,8 @@ var Text$h = Typography.Text;
20478
20490
  var Footer = function (_a) {
20479
20491
  var className = _a.className;
20480
20492
  var token = useToken();
20481
- var _b = useCurrentUserData(token), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
20493
+ var currentUser = useCurrentUserData(token).currentUser;
20494
+ var privacyUrl = currentUser.privacyUrl, termsUrl = currentUser.termsUrl;
20482
20495
  var isMobile = useIsMobile();
20483
20496
  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, {})] })));
20484
20497
  };
@@ -20491,22 +20504,6 @@ var StyedLink = styled.a(templateObject_1$5 || (templateObject_1$5 = __makeTempl
20491
20504
  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);
20492
20505
  var templateObject_1$5, templateObject_2$1;
20493
20506
 
20494
- function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
20495
- var _a;
20496
- var upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL;
20497
- function upgradingFromFree() {
20498
- 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);
20499
- return totalPrice === 0;
20500
- }
20501
- if (quote.kind === QuoteChangeKind.SUBSCRIBE) {
20502
- return activeCouponsExist;
20503
- }
20504
- else if (quote.kind === QuoteChangeKind.ADJUSTMENT) {
20505
- return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
20506
- }
20507
- return false;
20508
- }
20509
-
20510
20507
  function CouponEditor(_a) {
20511
20508
  var className = _a.className, onAddCoupon = _a.onAddCoupon, isAddingCoupon = _a.isAddingCoupon, couponCode = _a.couponCode, setCouponCode = _a.setCouponCode;
20512
20509
  function handleAddCoupon() {
@@ -20520,17 +20517,14 @@ function CouponEditor(_a) {
20520
20517
  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" }))] })) })));
20521
20518
  }
20522
20519
 
20523
- var SubscriptionsContext = createContext({});
20524
-
20525
20520
  var Text$g = Typography.Text;
20526
20521
  function CheckoutSummary(_a) {
20527
20522
  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;
20528
- var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
20529
20523
  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) {
20530
20524
  return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
20531
20525
  var _a;
20532
20526
  var multiplier = charge.kind === 'COUPON' ? -1 : 1;
20533
- return (jsxs("div", __assign({ className: "bunny-grid bunny-grid-cols-3 bunny-gap-4 bunny-items-center" }, { children: [jsx("div", __assign({ className: "bunny-col-span-1" }, { children: charge.name })), jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-center" }, { children: ((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode) ? (jsx("div", __assign({ onClick: function () {
20527
+ return (jsxs("div", __assign({ className: "bunny-grid bunny-grid-cols-3 bunny-gap-4 bunny-items-center" }, { children: [jsx("div", __assign({ className: "bunny-col-span-1" }, { children: charge.name })), jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-center" }, { children: ((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode) ? (jsx("button", __assign({ onClick: function () {
20534
20528
  var _a, _b;
20535
20529
  if (isRemovingCoupon) {
20536
20530
  return;
@@ -20539,10 +20533,9 @@ function CheckoutSummary(_a) {
20539
20533
  throw new Error('Coupon code not found');
20540
20534
  }
20541
20535
  onRemoveCoupon((_b = charge.coupon) === null || _b === void 0 ? void 0 : _b.couponCode);
20542
- }, 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));
20536
+ }, className: "bunny-text-orange-500 hover:bunny-text-orange-400 bunny-cursor-pointer bunny-bg-transparent bunny-border-none" }, { 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));
20543
20537
  });
20544
- }) })), 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 &&
20545
- shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsx(CouponEditor, { className: "bunny-w-full", quote: quote, onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] })));
20538
+ }) })), 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 }))] })));
20546
20539
  }
20547
20540
  var CheckoutSummaryDivider = function () {
20548
20541
  return (jsx("div", __assign({ className: "bunny-my-2" }, { children: jsx(Divider, { className: "m-0" }) })));
@@ -20581,7 +20574,7 @@ function InitialSignupForm(_a) {
20581
20574
  return (jsx(Form, __assign({ className: "bunny-flex bunny-flex-col bunny-h-full bunny-w-full ".concat(className), form: form, layout: "vertical", autoComplete: "off" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-2" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsx(Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: 'First name is required' }], className: "bunny-flex-1" }, { children: jsx(Input, { placeholder: "First name" }) })), jsx(Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: 'Last name is required' }], className: "bunny-flex-1" }, { children: jsx(Input, { placeholder: "Last name" }) }))] })), jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsx(Form.Item, __assign({ name: "email", rules: [
20582
20575
  { required: true, message: 'Email is required' },
20583
20576
  { type: 'email', message: 'Please enter a valid email' },
20584
- ], className: "bunny-flex-1" }, { children: jsx(Input, { placeholder: "Email" }) })), jsx(Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Company name is required' }], className: "bunny-flex-1" }, { children: jsx(Input, { placeholder: "Company name" }) }))] })), jsx("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsx(Form.Item, __assign({ name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsx(Select, { className: "bunny-w-full", options: Lists.COUNTRY_LIST, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
20577
+ ], className: "bunny-flex-1" }, { children: jsx(Input, { placeholder: "Email" }) })), jsx(Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Company name is required' }], className: "bunny-flex-1" }, { children: jsx(Input, { placeholder: "Company name" }) }))] })), jsx("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsx(Form.Item, __assign({ name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsx(Select, { options: Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
20585
20578
  var _a, _b;
20586
20579
  return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
20587
20580
  ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
@@ -20602,7 +20595,7 @@ function PriceListDisplay(_a) {
20602
20595
  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] })));
20603
20596
  }
20604
20597
 
20605
- var showErrorNotification = useErrorNotification();
20598
+ var showErrorNotification$2 = useErrorNotification();
20606
20599
  var showSuccessNotification$1 = useSuccessNotification();
20607
20600
  function Signup(_a) {
20608
20601
  var _b, _c, _d;
@@ -20612,6 +20605,14 @@ function Signup(_a) {
20612
20605
  var tokenFromContexts = useToken();
20613
20606
  var isMobile = useIsMobile();
20614
20607
  var topNavImageUrl = useContext(BrandContext).topNavImageUrl;
20608
+ var defaultValues = useMemo(function () { return ({
20609
+ firstName: defaultFirstName,
20610
+ lastName: defaultLastName,
20611
+ email: defaultEmail,
20612
+ accountName: defaultCompanyName,
20613
+ billingCountry: defaultBillingCountry,
20614
+ }); }, [defaultFirstName, defaultLastName, defaultEmail, defaultCompanyName, defaultBillingCountry]);
20615
+ var queryClient = useQueryClient();
20615
20616
  var _f = useState(undefined), initialQuote = _f[0], setInitialQuote = _f[1];
20616
20617
  var _g = useState(undefined), accountId = _g[0], setAccountId = _g[1];
20617
20618
  var _h = useState(undefined), portalSessionToken = _h[0], setPortalSessionToken = _h[1];
@@ -20623,8 +20624,8 @@ function Signup(_a) {
20623
20624
  accountId: accountId,
20624
20625
  token: token,
20625
20626
  apiHost: apiHost,
20627
+ enabled: Boolean(accountId),
20626
20628
  }).defaultPaymentMethod;
20627
- var queryClient = useQueryClient();
20628
20629
  var recalculateTaxes = useMutation({
20629
20630
  mutationFn: function () {
20630
20631
  if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
@@ -20634,7 +20635,7 @@ function Signup(_a) {
20634
20635
  },
20635
20636
  onError: function (error) {
20636
20637
  if (!error[0].message.includes('Ensure that you have a taxation plugin')) {
20637
- showErrorNotification(error.message);
20638
+ showErrorNotification$2(error.message);
20638
20639
  }
20639
20640
  },
20640
20641
  onSuccess: function (quote) {
@@ -20670,10 +20671,10 @@ function Signup(_a) {
20670
20671
  onSuccess: function (data) {
20671
20672
  setAccountId(data.account.id);
20672
20673
  setPortalSessionToken(data.portalSessionToken);
20673
- // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
20674
+ // We must invalidate the accountPaymentMethodsKey query in order to clear payment methods from the provided api token,
20674
20675
  // to instead use paymentMethods from portalSessionToken.
20675
20676
  queryClient.invalidateQueries({
20676
- queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
20677
+ queryKey: QueryKeyFactory.default.accountPaymentMethodsKey({
20677
20678
  accountId: accountId,
20678
20679
  token: token,
20679
20680
  }),
@@ -20683,10 +20684,10 @@ function Signup(_a) {
20683
20684
  onError: function (error) {
20684
20685
  var errorMessage = error.response.errors[0].message;
20685
20686
  if (errorMessage.includes("Address couldn't be validated")) {
20686
- showErrorNotification('Please enter a valid billing address');
20687
+ showErrorNotification$2('Please enter a valid billing address');
20687
20688
  }
20688
20689
  else {
20689
- showErrorNotification(errorMessage);
20690
+ showErrorNotification$2(errorMessage);
20690
20691
  }
20691
20692
  },
20692
20693
  }), quoteAccountSignupMutate = _l.mutate, isSigningUp = _l.isPending;
@@ -20783,7 +20784,7 @@ function Signup(_a) {
20783
20784
  }
20784
20785
  function handlePaymentFail(error) {
20785
20786
  var _a;
20786
- showErrorNotification((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.message);
20787
+ showErrorNotification$2((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.message);
20787
20788
  }
20788
20789
  useEffect(function () {
20789
20790
  if (initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id) {
@@ -20795,15 +20796,34 @@ function Signup(_a) {
20795
20796
  }
20796
20797
  return (jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col' : 'bunny-flex-row', " bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ").concat(shadow, " ").concat(className), style: style }, { children: [jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full', " bunny-justify-center") }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24" }, { children: [jsx("div", { children: topNavImageUrl.length > 0 && (jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false })) }), data ? (jsx(CheckoutSummary, { quote: data, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, onRemoveCoupon: removeCoupon, isRemovingCoupon: isRemovingCoupon, priceListData: priceListData, isAddingCoupon: isAddingCoupon, couponCode: couponEditorCouponCode, setCouponCode: setCouponEditorCouponCode, activeCouponsExist: activeCouponsExist })) : (jsx("div", __assign({ className: "bunny-h-full" }, { children: isLoadingPriceList ? (jsx(Skeleton, { active: true })) : (jsx(PriceListDisplay, { priceListData: priceListData })) }))), jsx(Footer, {})] })) })), jsx("div", __assign({ className: "bunny-flex bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full', " bunny-items-center"), style: {
20797
20798
  boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
20798
- } }, { children: isLoadingPriceList ? (jsx(Skeleton, { active: true, className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" })) : (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" }, { children: jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: {
20799
- firstName: defaultFirstName,
20800
- lastName: defaultLastName,
20801
- email: defaultEmail,
20802
- accountName: defaultCompanyName,
20803
- billingCountry: defaultBillingCountry,
20804
- } }) }))) }))] })));
20799
+ } }, { children: isLoadingPriceList ? (jsx(Skeleton, { active: true, className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" })) : (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" }, { children: jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: defaultValues }) }))) }))] })));
20805
20800
  }
20806
20801
 
20802
+ var SubscriptionsContext = createContext({});
20803
+
20804
+ var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n addonSubscriptions {\n id\n plan { 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 }";
20805
+ var getSubscriptions = function (_a) {
20806
+ var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
20807
+ return __awaiter(void 0, void 0, void 0, function () {
20808
+ var response, combinedSubscriptions;
20809
+ var _b, _c;
20810
+ return __generator(this, function (_d) {
20811
+ switch (_d.label) {
20812
+ case 0: return [4 /*yield*/, gqlRequest({
20813
+ isInPreviewMode: isInPreviewMode,
20814
+ query: SUBSCRIPTIONS_QUERY,
20815
+ token: token,
20816
+ apiHost: apiHost,
20817
+ })];
20818
+ case 1:
20819
+ response = _d.sent();
20820
+ combinedSubscriptions = (_c = (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (subscription) { return (__assign(__assign({}, subscription), { charges: sortSubscriptionCharges(subscription.charges) })); });
20821
+ return [2 /*return*/, combinedSubscriptions];
20822
+ }
20823
+ });
20824
+ });
20825
+ };
20826
+
20807
20827
  var quoteSubscriptionUpgrade = function (_a) {
20808
20828
  var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId, apiHost = _a.apiHost, token = _a.token;
20809
20829
  return gqlRequest({
@@ -20843,20 +20863,6 @@ var useQuoteChangeUpdate = function () {
20843
20863
  });
20844
20864
  }); };
20845
20865
  };
20846
- var useQuoteDelete = function () {
20847
- var graphQLRequest = useGraphQLRequest();
20848
- return function (quoteId, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
20849
- var response;
20850
- return __generator(this, function (_a) {
20851
- switch (_a.label) {
20852
- case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteDelete($id: ID!) {\n quoteDelete(id: $id) {\n errors\n }\n }", apiHost, token, { id: quoteId })];
20853
- case 1:
20854
- response = _a.sent();
20855
- return [2 /*return*/, response];
20856
- }
20857
- });
20858
- }); };
20859
- };
20860
20866
  var quoteSubscriptionAddon = function (_a) {
20861
20867
  var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId, apiHost = _a.apiHost, token = _a.token;
20862
20868
  return gqlRequest({
@@ -20881,372 +20887,29 @@ var quoteSubscriptionActivate = function (_a) {
20881
20887
  });
20882
20888
  };
20883
20889
 
20884
- 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 }";
20885
- var getSubscriptions = function (_a) {
20886
- var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
20887
- return __awaiter(void 0, void 0, void 0, function () {
20888
- var response, combinedSubscriptions;
20889
- var _b, _c;
20890
- return __generator(this, function (_d) {
20891
- switch (_d.label) {
20892
- case 0: return [4 /*yield*/, gqlRequest({
20893
- isInPreviewMode: isInPreviewMode,
20894
- query: SUBSCRIPTIONS_QUERY,
20895
- token: token,
20896
- apiHost: apiHost,
20897
- })];
20898
- case 1:
20899
- response = _d.sent();
20900
- combinedSubscriptions = (_c = (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (subscription) { return (__assign(__assign({}, subscription), { charges: sortSubscriptionCharges(subscription.charges) })); });
20901
- return [2 /*return*/, combinedSubscriptions];
20902
- }
20903
- });
20904
- });
20905
- };
20906
-
20907
- var pageWrapperClassName = function (isMobile) {
20908
- return "flex flex-col grow pt-4 ".concat(isMobile ? 'pb-4 overflow-hidden' : 'pb-8', " ").concat('content-container');
20909
- };
20910
-
20911
- var MUTATION$2 = "{\n currentUser {\n taxationRequiredAccountFields\n }\n}";
20912
- var getTaxationRequiredAccountFields = function (_a) {
20913
- var apiHost = _a.apiHost, token = _a.token;
20914
- return __awaiter(void 0, void 0, void 0, function () {
20915
- var response;
20916
- var _b, _c;
20917
- return __generator(this, function (_d) {
20918
- switch (_d.label) {
20919
- case 0: return [4 /*yield*/, gqlRequest({
20920
- query: MUTATION$2,
20921
- token: token,
20922
- apiHost: apiHost,
20923
- })];
20924
- case 1:
20925
- response = _d.sent();
20926
- return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
20927
- ? response.currentUser.taxationRequiredAccountFields
20928
- : null];
20929
- }
20930
- });
20931
- });
20932
- };
20933
-
20934
- var useHasTaxPlugin = function (_a) {
20935
- var apiHost = _a.apiHost, token = _a.token;
20936
- var plugins = usePlugins({
20937
- apiHost: apiHost,
20938
- token: token,
20939
- }).data;
20940
- return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
20941
- };
20942
-
20943
- var MUTATION$1 = "\nmutation accountUpdate(\n $id: ID!,\n $attributes: AccountAttributes!) {\n accountUpdate(\n id: $id,\n attributes: $attributes\n ) {\n account {\n id\n billingCountry\n billingState\n billingStreet\n billingCity\n billingZip\n name\n }\n errors\n }\n }\n";
20944
- var accountUpdate = function (_a) {
20945
- var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
20946
- return __awaiter(void 0, void 0, void 0, function () {
20947
- var vars, response, errors;
20948
- var _b;
20949
- return __generator(this, function (_c) {
20950
- switch (_c.label) {
20951
- case 0:
20952
- vars = { id: accountId, attributes: attributes };
20953
- return [4 /*yield*/, gqlRequest({
20954
- query: MUTATION$1,
20955
- token: token,
20956
- vars: vars,
20957
- apiHost: apiHost,
20958
- })];
20959
- case 1:
20960
- response = _c.sent();
20961
- errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
20962
- if (errors)
20963
- throw errors;
20964
- return [2 /*return*/, response.accountUpdate];
20965
- }
20966
- });
20967
- });
20968
- };
20969
-
20970
- var COUNTRIES_REQUIRING_STATE = ['US', 'CA'];
20971
- var TaxationForm = function (_a) {
20972
- var account = _a.account, quote = _a.quote;
20973
- // Hooks
20974
- var queryClient = useQueryClient();
20890
+ var useQuoteCreate = function (_a) {
20891
+ var upgradingSubscription = _a.upgradingSubscription, selectedPriceList = _a.selectedPriceList, token = _a.token;
20892
+ // Context
20975
20893
  var apiHost = useContext(BunnyContext).apiHost;
20976
- var token = useToken();
20977
- var form = Form.useForm()[0];
20978
- // Mutations
20979
- var _b = useMutation({
20980
- mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
20981
- var account;
20982
- return __generator(this, function (_a) {
20983
- switch (_a.label) {
20984
- case 0: return [4 /*yield*/, accountUpdate({
20985
- accountId: quote.accountId,
20986
- attributes: changedFormData,
20987
- token: token,
20988
- apiHost: apiHost,
20989
- })];
20990
- case 1:
20991
- account = _a.sent();
20992
- return [2 /*return*/, account];
20993
- }
20994
- });
20995
- }); },
20996
- onSuccess: function () {
20997
- queryClient.invalidateQueries({
20998
- queryKey: ['getTaxationRequiredAccountFields', token],
20999
- });
21000
- },
21001
- }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
21002
- 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) {
21003
- var _a, _b;
21004
- return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
21005
- ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
21006
- } }) })), 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" })) })] })));
21007
- };
21008
- var FormBillingState = function () {
21009
- var billingCountry = Form.useWatch('billingCountry');
21010
- var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
21011
- return (jsx(Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsx(Input, { placeholder: "State" }) })));
21012
- };
21013
-
21014
- var showSuccessNotification = useSuccessNotification();
21015
- var QuoteCheckout = function (_a) {
21016
- var _b, _c;
21017
- var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, onRecalculateTaxes = _a.onRecalculateTaxes;
21018
- var apiHost = useContext(BunnyContext).apiHost;
21019
- var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
21020
- var token = useToken();
21021
- var isMobile = useIsMobile();
21022
- var _d = useState(false), isSaving = _d[0], setIsSaving = _d[1];
21023
- var paymentRequired = getQuoteAmountDue(quote) > 0;
21024
- var queryClient = useQueryClient();
21025
- var _e = useState(''), couponCode = _e[0], setCouponCode = _e[1];
21026
- var _f = useUpdateCoupons({
21027
- apiHost: apiHost,
21028
- token: token,
21029
- quoteChangeId: (_b = quote.quoteChanges[quote.quoteChanges.length - 1]) === null || _b === void 0 ? void 0 : _b.id,
21030
- onCouponAdded: function () {
21031
- queryClient.invalidateQueries({
21032
- queryKey: QueryKeyFactory.default.createObjectKey({
21033
- id: quote === null || quote === void 0 ? void 0 : quote.id,
21034
- objectName: 'editingQuote',
21035
- token: token,
21036
- }),
21037
- });
21038
- showSuccessNotification('Coupon applied');
21039
- onRecalculateTaxes();
21040
- setCouponCode('');
21041
- },
21042
- onCouponRemoved: function () {
21043
- queryClient.invalidateQueries({
21044
- queryKey: QueryKeyFactory.default.createObjectKey({
21045
- id: quote === null || quote === void 0 ? void 0 : quote.id,
21046
- objectName: 'editingQuote',
21047
- token: token,
21048
- }),
21049
- });
21050
- showSuccessNotification('Coupon removed');
21051
- onRecalculateTaxes();
21052
- },
21053
- }), addCoupon = _f.addCoupon, removeCoupon = _f.removeCoupon, isAddingCoupon = _f.isAddingCoupon, isRemovingCoupon = _f.isRemovingCoupon, activeCouponsExist = _f.activeCouponsExist;
21054
- var couponsOnQuote = (_c = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _c === void 0 ? void 0 : _c.flatMap(function (quoteChange) { var _a; return (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges) === null || _a === void 0 ? void 0 : _a.filter(function (charge) { return charge.kind === 'COUPON'; }); });
21055
- var checkoutMutation = useMutation({
21056
- mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21057
- return __generator(this, function (_a) {
21058
- switch (_a.label) {
21059
- case 0:
21060
- if (!quote)
21061
- throw new Error('Quote is required');
21062
- if (paymentRequired)
21063
- throw new Error('Payment is required');
21064
- return [4 /*yield*/, checkout({ quoteId: quote.id, token: token, apiHost: apiHost })];
21065
- case 1: return [2 /*return*/, _a.sent()];
21066
- }
21067
- });
21068
- }); },
21069
- onSuccess: onSuccess,
21070
- onError: onFail,
21071
- });
21072
- function handleCheckoutNoPayment() {
21073
- return __awaiter(this, void 0, void 0, function () {
21074
- return __generator(this, function (_a) {
21075
- setIsSaving(true);
21076
- checkoutMutation.mutate();
21077
- setIsSaving(false);
21078
- return [2 /*return*/];
21079
- });
21080
- });
21081
- }
21082
- if (taxationRequiredAccountFields)
21083
- return (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsx(TaxationForm, { account: account, quote: quote }) })));
21084
- 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 &&
21085
- 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 () {
21086
- couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(function (couponCharge) {
21087
- var _a;
21088
- var couponCode = (_a = couponCharge === null || couponCharge === void 0 ? void 0 : couponCharge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode;
21089
- if (couponCode) {
21090
- removeCoupon(couponCode);
21091
- }
21092
- });
21093
- } }, { children: "Remove coupon(s)" })))] }))) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsx(Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
21094
- };
21095
- var PaymentFormWrapper = function (_a) {
21096
- var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
21097
- var isMobile = useIsMobile();
21098
- return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-6 bunny-shrink-0 ".concat(isMobile ? 'bunny-w-full bunny-shadow-padding-xb' : '', " ").concat(className), style: __assign({}, (isMobile
21099
- ? setMaxHeight
21100
- ? { maxHeight: '60vh' }
21101
- : {}
21102
- : {
21103
- width: '350px',
21104
- })) }, { children: children })));
21105
- };
21106
-
21107
- var queryKeyFactory = QueryKeyFactory.default;
21108
- var Checkout = function (_a) {
21109
- var _b, _c;
21110
- var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList;
21111
- var apiHost = useContext(BunnyContext).apiHost;
21112
- var isMobile = useIsMobile();
21113
- var token = useToken();
21114
- var hasTaxPlugin = useHasTaxPlugin({
21115
- apiHost: apiHost,
21116
- token: token,
21117
- });
21118
- var queryClient = useQueryClient();
21119
- // Queries
21120
- var _d = useQuery({
21121
- queryKey: ['getTaxationRequiredAccountFields', token],
21122
- queryFn: function () { return getTaxationRequiredAccountFields({ apiHost: apiHost, token: token }); },
21123
- enabled: Boolean(quote),
21124
- staleTime: 0,
21125
- }), taxationRequiredAccountFields = _d.data, isLoadingTaxationRequiredAccountFields = _d.isLoading;
21126
- var _e = useQuery({
21127
- queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
21128
- queryFn: function () {
21129
- return (quote === null || quote === void 0 ? void 0 : quote.accountId) &&
21130
- getAccount({ id: quote.accountId, apiHost: apiHost, token: token, componentsVersion: PACKAGE_VERSION });
21131
- },
21132
- enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
21133
- }), account = _e.data, isLoadingAccount = _e.isLoading;
21134
- function recalculateTaxes() {
21135
- return __awaiter(this, void 0, void 0, function () {
21136
- var updatedQuote, quoteKey, calculatedPricesKey;
21137
- return __generator(this, function (_a) {
21138
- switch (_a.label) {
21139
- case 0:
21140
- if (!quote) return [3 /*break*/, 2];
21141
- return [4 /*yield*/, quoteRecalculateTaxes({
21142
- quoteId: quote.id,
21143
- apiHost: apiHost,
21144
- token: token,
21145
- })];
21146
- case 1:
21147
- updatedQuote = _a.sent();
21148
- if (updatedQuote) {
21149
- quoteKey = queryKeyFactory.createObjectKey({
21150
- id: updatedQuote.id,
21151
- objectName: 'editingQuote',
21152
- token: token,
21153
- });
21154
- calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
21155
- // quantity,
21156
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21157
- token: token,
21158
- });
21159
- queryClient.setQueryData(quoteKey, updatedQuote);
21160
- queryClient.setQueryData(calculatedPricesKey, updatedQuote);
21161
- }
21162
- _a.label = 2;
21163
- case 2: return [2 /*return*/, {}];
21164
- }
21165
- });
21166
- });
21167
- }
21168
- var recalculateTaxesEnabled = Boolean(quote) &&
21169
- open &&
21170
- hasTaxPlugin &&
21171
- !taxationRequiredAccountFields &&
21172
- !isLoadingTaxationRequiredAccountFields;
21173
- useQuery({
21174
- queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
21175
- id: quote === null || quote === void 0 ? void 0 : quote.id,
21176
- token: token,
21177
- }),
21178
- queryFn: recalculateTaxes,
21179
- // Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
21180
- enabled: recalculateTaxesEnabled,
21181
- staleTime: 0,
21182
- });
21183
- if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
21184
- return null;
21185
- return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50 bunny-overflow-auto", style: {
21186
- zIndex: 1001,
21187
- } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-w-full" }, { children: jsx(CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb') }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsx(Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsx("div", __assign({ className: "bunny-w-full bunny-pt-12" }, { children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsx(QuoteCheckout, { account: account, onFail: function (error) {
21188
- onFail(error);
21189
- }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: function () { return __awaiter(void 0, void 0, void 0, function () {
21190
- return __generator(this, function (_a) {
21191
- switch (_a.label) {
21192
- case 0:
21193
- if (!recalculateTaxesEnabled) return [3 /*break*/, 2];
21194
- return [4 /*yield*/, recalculateTaxes()];
21195
- case 1:
21196
- _a.sent();
21197
- _a.label = 2;
21198
- case 2: return [2 /*return*/];
21199
- }
21200
- });
21201
- }); } })) : (jsx(PaymentForm, { onFail: function (error) {
21202
- onFail(error);
21203
- }, onPaymentSuccess: onSuccess }))] })), jsx(Footer, { className: "bunny-pl-12" })] })) })));
21204
- };
21205
-
21206
- var QuotePreviewContext = createContext({});
21207
- function QuotePreviewProvider(_a) {
21208
- var children = _a.children;
21209
- var _b = useState(), quotePreviewData = _b[0], setQuotePreviewData = _b[1];
21210
- return (jsx(QuotePreviewContext.Provider, __assign({ value: {
21211
- quotePreviewData: quotePreviewData,
21212
- setQuotePreviewData: setQuotePreviewData,
21213
- } }, { children: children })));
21214
- }
21215
-
21216
- var PageTitle = function (_a) {
21217
- var onGoBack = _a.onGoBack, title = _a.title;
21218
- var isMobile = useIsMobile();
21219
- var secondaryColor = useContext(BrandContext).secondaryColor;
21220
- return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3 bunny-font-medium", style: {
21221
- fontSize: "28px",
21222
- paddingBottom: isMobile ? "22px" : "56px",
21223
- color: secondaryColor,
21224
- } }, { children: [onGoBack && (jsx(ArrowLeftOutlined, { onClick: onGoBack, style: {
21225
- fontSize: "20px",
21226
- cursor: "pointer",
21227
- } })), title] })));
21228
- };
21229
-
21230
- var useQuoteCreate = function (_a) {
21231
- var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, upgradingSubscription = _a.upgradingSubscription, selectedPriceList = _a.selectedPriceList, token = _a.token;
21232
- var apiHost = useContext(BunnyContext).apiHost;
21233
- // Queries
21234
- var quote = useQuery({
21235
- queryKey: QueryKeyFactory.default.createObjectKey({
21236
- objectName: 'editingQuote',
21237
- id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21238
- token: token,
21239
- }),
21240
- queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21241
- var quote;
20894
+ // Local state
20895
+ var _b = useState(), quoteId = _b[0], setQuoteId = _b[1];
20896
+ // Queries
20897
+ var quote = useQuery({
20898
+ queryKey: QueryKeyFactory.default.createObjectKey({
20899
+ objectName: 'editingQuote',
20900
+ id: quoteId,
20901
+ token: token,
20902
+ }),
20903
+ queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
20904
+ var quote;
21242
20905
  return __generator(this, function (_a) {
21243
20906
  switch (_a.label) {
21244
20907
  case 0:
21245
- if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
20908
+ if (!quoteId) {
21246
20909
  throw new Error('editingQuote is undefined');
21247
20910
  }
21248
20911
  return [4 /*yield*/, getQuote({
21249
- id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
20912
+ id: quoteId,
21250
20913
  token: token,
21251
20914
  apiHost: apiHost,
21252
20915
  removeFormattedQuoteField: false,
@@ -21257,9 +20920,9 @@ var useQuoteCreate = function (_a) {
21257
20920
  }
21258
20921
  });
21259
20922
  }); },
21260
- enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
20923
+ enabled: Boolean(quoteId),
21261
20924
  }).data;
21262
- var _b = useMutation({
20925
+ var _c = useMutation({
21263
20926
  mutationFn: function (_a) {
21264
20927
  var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
21265
20928
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21274,10 +20937,10 @@ var useQuoteCreate = function (_a) {
21274
20937
  onSuccess: function (subscriptionUpdateData) {
21275
20938
  var _a;
21276
20939
  var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
21277
- setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
20940
+ setQuoteId(quote.id);
21278
20941
  },
21279
- }), createQuote = _b.mutate, isCreatingQuote = _b.isPending;
21280
- var _c = useMutation({
20942
+ }), createQuote = _c.mutate, isCreatingQuote = _c.isPending;
20943
+ var _d = useMutation({
21281
20944
  mutationFn: function (_a) {
21282
20945
  var subscriptionId = _a.subscriptionId;
21283
20946
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21292,15 +20955,15 @@ var useQuoteCreate = function (_a) {
21292
20955
  onSuccess: function (subscriptionAddonUpdateData) {
21293
20956
  var _a;
21294
20957
  var quote = (_a = subscriptionAddonUpdateData === null || subscriptionAddonUpdateData === void 0 ? void 0 : subscriptionAddonUpdateData.quoteSubscriptionAddon) === null || _a === void 0 ? void 0 : _a.quote;
21295
- setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
20958
+ setQuoteId(quote.id);
21296
20959
  },
21297
- }), createEmptyQuote = _c.mutate, isCreatingEmptyQuote = _c.isPending;
20960
+ }), createEmptyQuote = _d.mutate, isCreatingEmptyQuote = _d.isPending;
21298
20961
  var subscriptionActivate = useMutation({
21299
20962
  mutationFn: quoteSubscriptionActivate,
21300
20963
  onSuccess: function (response) {
21301
20964
  var _a;
21302
20965
  var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionActivate) === null || _a === void 0 ? void 0 : _a.quote;
21303
- setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
20966
+ setQuoteId(quote.id);
21304
20967
  },
21305
20968
  }).mutate;
21306
20969
  useEffect(function () {
@@ -21336,88 +20999,635 @@ var useQuoteCreate = function (_a) {
21336
20999
  return { quote: quote, isQuotePending: isCreatingQuote || isCreatingEmptyQuote };
21337
21000
  };
21338
21001
 
21339
- var PlanManagerQuoteContext = createContext({});
21340
- function useFeatureAddonsPending() {
21341
- var _a = useState([]), featureAddonsLoading = _a[0], setFeatureAddonsLoading = _a[1];
21342
- var addFeatureAddonLoading = function (featureAddonId) {
21343
- setFeatureAddonsLoading(__spreadArray(__spreadArray([], featureAddonsLoading, true), [featureAddonId], false));
21344
- };
21345
- var removeFeatureAddonLoading = function (featureAddonId) {
21346
- setFeatureAddonsLoading(featureAddonsLoading.filter(function (id) { return id !== featureAddonId; }));
21347
- };
21348
- return {
21349
- isFeatureAddonsLoading: featureAddonsLoading.length > 0,
21350
- addFeatureAddonLoading: addFeatureAddonLoading,
21351
- removeFeatureAddonLoading: removeFeatureAddonLoading,
21352
- };
21353
- }
21354
- function PlanManagerQuoteProvider(_a) {
21355
- var children = _a.children, editingQuoteData = _a.editingQuoteData, setEditingQuoteData = _a.setEditingQuoteData;
21002
+ var calculateNewQuantity = function (priceListCharge, currentQuantity) {
21003
+ if (currentQuantity === void 0) { currentQuantity = 1; }
21004
+ var quantityMax = (priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMax) || Number.POSITIVE_INFINITY;
21005
+ var quantityMin = (priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMin) || Number.NEGATIVE_INFINITY;
21006
+ var selfServiceQuantity = priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.selfServiceQuantity;
21007
+ if (selfServiceQuantity) {
21008
+ return lodashExports.clamp(currentQuantity, quantityMin, quantityMax);
21009
+ }
21010
+ // If self service quantity is disabled, return the min quantity
21011
+ return quantityMin;
21012
+ };
21013
+
21014
+ var QUOTE_CHARGE_UPDATE = "\n".concat(QUOTE_FIELDS(), "\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 quoteChange {\n id\n quoteId\n quote {\n ...QuoteFields\n }\n }\n id\n }\n }\n }\n");
21015
+ var quoteChargeUpdate = function (_a) {
21016
+ var discount = _a.discount, name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
21017
+ return __awaiter(void 0, void 0, void 0, function () {
21018
+ var response;
21019
+ return __generator(this, function (_b) {
21020
+ switch (_b.label) {
21021
+ case 0: return [4 /*yield*/, gqlRequest({
21022
+ query: QUOTE_CHARGE_UPDATE,
21023
+ vars: {
21024
+ subtotal: subtotal,
21025
+ discount: discount,
21026
+ name: name,
21027
+ price: price,
21028
+ quantity: quantity,
21029
+ quoteChargeId: quoteChargeId,
21030
+ startDate: startDate,
21031
+ },
21032
+ apiHost: apiHost,
21033
+ token: token,
21034
+ })];
21035
+ case 1:
21036
+ response = _b.sent();
21037
+ if (response.errors) {
21038
+ throw new Error(response.errors[0].message);
21039
+ }
21040
+ return [2 /*return*/, response.quoteChargeUpdate.quoteCharge];
21041
+ }
21042
+ });
21043
+ });
21044
+ };
21045
+
21046
+ function canEditChargeQuantity(charge) {
21047
+ if (charge.chargeType === ChargeType.USAGE)
21048
+ return false;
21049
+ if (charge.pricingModel === PricingModel.FLAT)
21050
+ return false;
21051
+ return true;
21052
+ }
21053
+
21054
+ // Functionality:
21055
+ // 1: keep track of quantities set for features based on feature.id
21056
+ // a. copy those quantities over to charges with same feature when initializing
21057
+ // ie: if set 5 for Users in Starter, then switching to Pro with Users, keep 5
21058
+ // 2. set initial quantities for features using the first feature quantity found
21059
+ // Limitations:
21060
+ // - When switching between price lists that share features (e.g. both have Users),
21061
+ // quantities will be adjusted to meet the new min/max requirements of the new price list.
21062
+ // The original quantity is not preserved when switching back to the previous price list.
21063
+ var showErrorNotification$1 = useErrorNotification();
21064
+ var useQuoteQuantities = function (_a) {
21065
+ var selectedPriceList = _a.selectedPriceList, quote = _a.quote;
21066
+ var queryClient = useQueryClient();
21067
+ var token = useToken();
21068
+ var apiHost = useContext(BunnyContext).apiHost;
21069
+ var _b = useFeatureQuantities(), getFeatureQuantity = _b.getFeatureQuantity, setFeatureQuantity = _b.setFeatureQuantity;
21070
+ var _c = useMutation({
21071
+ mutationFn: function (_a) {
21072
+ var quoteChargeId = _a.quoteChargeId, quantity = _a.quantity, apiHost = _a.apiHost, token = _a.token;
21073
+ return __awaiter(void 0, void 0, void 0, function () {
21074
+ var quoteCharge;
21075
+ return __generator(this, function (_b) {
21076
+ switch (_b.label) {
21077
+ case 0: return [4 /*yield*/, quoteChargeUpdate({
21078
+ quoteChargeId: quoteChargeId,
21079
+ quantity: quantity,
21080
+ apiHost: apiHost,
21081
+ token: token,
21082
+ })];
21083
+ case 1:
21084
+ quoteCharge = _b.sent();
21085
+ return [2 /*return*/, { quoteCharge: quoteCharge }];
21086
+ }
21087
+ });
21088
+ });
21089
+ },
21090
+ onSuccess: function (_a) {
21091
+ var quoteCharge = _a.quoteCharge;
21092
+ queryClient.setQueryData(QueryKeyFactory.default.createObjectKey({
21093
+ objectName: 'editingQuote',
21094
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
21095
+ token: token,
21096
+ }), quoteCharge.quoteChange.quote);
21097
+ },
21098
+ }), updateCharge = _c.mutate, isUpdatingCharge = _c.isPending;
21099
+ var handleUpdateQuantity = useCallback(function (quantity, priceListChargeId, quote) {
21100
+ 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); });
21101
+ var quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) {
21102
+ var _a;
21103
+ return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListChargeId;
21104
+ });
21105
+ if (!token) {
21106
+ showErrorNotification$1('Token is undefined in onUpdateQuantity');
21107
+ return;
21108
+ }
21109
+ if (!quoteCharge) {
21110
+ showErrorNotification$1('Quote charge not found');
21111
+ return;
21112
+ }
21113
+ updateCharge({
21114
+ quoteChargeId: quoteCharge.id,
21115
+ quantity: quantity,
21116
+ apiHost: apiHost,
21117
+ token: token,
21118
+ });
21119
+ }, [apiHost, token, updateCharge, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quote === null || quote === void 0 ? void 0 : quote.id]);
21120
+ // Helper function to get quantity from quote for a specific charge
21121
+ var getQuantityFromQuote = function (chargeId) {
21122
+ var _a, _b;
21123
+ if (!quote || !selectedPriceList)
21124
+ return undefined;
21125
+ return (_b = (_a = quote.quoteChanges
21126
+ .find(function (qc) { return qc.priceList.id === selectedPriceList.id; })) === null || _a === void 0 ? void 0 : _a.charges.find(function (c) { return c.priceListCharge.id === chargeId; })) === null || _b === void 0 ? void 0 : _b.quantity;
21127
+ };
21128
+ // Helper function to process a single charge
21129
+ var processCharge = function (charge) {
21130
+ var _a;
21131
+ if (!((_a = charge === null || charge === void 0 ? void 0 : charge.feature) === null || _a === void 0 ? void 0 : _a.id)) {
21132
+ showErrorNotification$1('Charge or feature is undefined', 'Client Error');
21133
+ return;
21134
+ }
21135
+ var storedQuantity = getFeatureQuantity(charge.feature.id);
21136
+ // Determine the quantity to use
21137
+ if (storedQuantity !== undefined) {
21138
+ // Store this quantity for this feature to ensure it's tracked
21139
+ setFeatureQuantity(charge.feature.id, storedQuantity);
21140
+ return storedQuantity;
21141
+ }
21142
+ else {
21143
+ var finalQuantity = calculateNewQuantity(charge, storedQuantity);
21144
+ setFeatureQuantity(charge.feature.id, finalQuantity);
21145
+ return finalQuantity;
21146
+ }
21147
+ };
21148
+ function handleChangeQuantity(priceListChargeId, quantity) {
21149
+ var _a;
21150
+ var charge = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.find(function (charge) { return charge.id === priceListChargeId; });
21151
+ var featureId = (_a = charge === null || charge === void 0 ? void 0 : charge.feature) === null || _a === void 0 ? void 0 : _a.id;
21152
+ if (!featureId) {
21153
+ showErrorNotification$1('featureId not found');
21154
+ return;
21155
+ }
21156
+ if (!quote) {
21157
+ showErrorNotification$1('quote not found');
21158
+ return;
21159
+ }
21160
+ setFeatureQuantity(featureId, quantity);
21161
+ handleUpdateQuantity(quantity, priceListChargeId, quote);
21162
+ }
21163
+ // Initialize quantities when price list changes
21164
+ useEffect(function () {
21165
+ if (!selectedPriceList)
21166
+ return;
21167
+ selectedPriceList.charges.forEach(function (charge) {
21168
+ if (canEditChargeQuantity(charge)) {
21169
+ processCharge(charge);
21170
+ }
21171
+ });
21172
+ }, [selectedPriceList]);
21173
+ // Update quantities when quote changes if local and quote quantities don't match
21174
+ useEffect(function () {
21175
+ if (!quote || !selectedPriceList)
21176
+ return;
21177
+ selectedPriceList.charges.forEach(function (charge) {
21178
+ if (!canEditChargeQuantity(charge))
21179
+ return;
21180
+ var finalQuantity = processCharge(charge);
21181
+ var quantityOnQuote = getQuantityFromQuote(charge.id);
21182
+ // Update quote if needed
21183
+ if (finalQuantity && quantityOnQuote && finalQuantity !== quantityOnQuote) {
21184
+ handleUpdateQuantity(finalQuantity, charge.id, quote);
21185
+ }
21186
+ });
21187
+ }, [quote === null || quote === void 0 ? void 0 : quote.id]);
21188
+ return {
21189
+ onChangeQuantity: handleChangeQuantity,
21190
+ getFeatureQuantity: getFeatureQuantity,
21191
+ isUpdatingCharges: isUpdatingCharge, // Might be multiple charges updating at once
21192
+ };
21193
+ };
21194
+ var useFeatureQuantities = function () {
21195
+ var _a = useState({}), featureQuantities = _a[0], setFeatureQuantities = _a[1];
21196
+ var getFeatureQuantity = function (featureId) {
21197
+ return featureQuantities[featureId];
21198
+ };
21199
+ var setFeatureQuantity = function (featureId, quantity) {
21200
+ setFeatureQuantities(function (prev) {
21201
+ var _a;
21202
+ return (__assign(__assign({}, prev), (_a = {}, _a[featureId] = quantity, _a)));
21203
+ });
21204
+ };
21205
+ return {
21206
+ getFeatureQuantity: getFeatureQuantity,
21207
+ setFeatureQuantity: setFeatureQuantity,
21208
+ };
21209
+ };
21210
+
21211
+ var QuoteContext = createContext({});
21212
+ function useFeatureAddonsPending() {
21213
+ var _a = useState([]), featureAddonsLoading = _a[0], setFeatureAddonsLoading = _a[1];
21214
+ var addFeatureAddonLoading = function (featureAddonId) {
21215
+ setFeatureAddonsLoading(__spreadArray(__spreadArray([], featureAddonsLoading, true), [featureAddonId], false));
21216
+ };
21217
+ var removeFeatureAddonLoading = function (featureAddonId) {
21218
+ setFeatureAddonsLoading(featureAddonsLoading.filter(function (id) { return id !== featureAddonId; }));
21219
+ };
21220
+ return {
21221
+ isFeatureAddonsLoading: featureAddonsLoading.length > 0,
21222
+ addFeatureAddonLoading: addFeatureAddonLoading,
21223
+ removeFeatureAddonLoading: removeFeatureAddonLoading,
21224
+ };
21225
+ }
21226
+ function QuoteProvider(_a) {
21227
+ var children = _a.children;
21356
21228
  // Contexts
21357
- var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
21358
21229
  var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
21230
+ // Local state
21231
+ var _b = useState(), selectedPriceList = _b[0], setSelectedPriceList = _b[1];
21232
+ var _c = useState(false), isAddonPlanLoading = _c[0], setIsAddonPlanLoading = _c[1];
21359
21233
  // Hooks
21360
21234
  var token = useToken();
21361
- var _b = useState(false), isAddonPlanLoading = _b[0], setIsAddonPlanLoading = _b[1];
21362
- var _c = useFeatureAddonsPending(), isFeatureAddonsLoading = _c.isFeatureAddonsLoading, addFeatureAddonLoading = _c.addFeatureAddonLoading, removeFeatureAddonLoading = _c.removeFeatureAddonLoading;
21363
- var _d = useQuoteCreate({
21364
- editingQuote: editingQuoteData,
21365
- setEditingQuoteData: function (quoteId, isTrial) {
21366
- setEditingQuoteData({
21367
- id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) || '',
21368
- isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) || false,
21369
- });
21370
- },
21235
+ var _d = useFeatureAddonsPending(), isFeatureAddonsLoading = _d.isFeatureAddonsLoading, addFeatureAddonLoading = _d.addFeatureAddonLoading, removeFeatureAddonLoading = _d.removeFeatureAddonLoading;
21236
+ var _e = useQuoteCreate({
21371
21237
  upgradingSubscription: upgradingSubscription,
21372
- selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList,
21238
+ selectedPriceList: selectedPriceList,
21373
21239
  token: token,
21374
- }), quote = _d.quote, isQuotePending = _d.isQuotePending;
21375
- return (jsx(PlanManagerQuoteContext.Provider, __assign({ value: {
21240
+ }), quote = _e.quote, isQuotePending = _e.isQuotePending;
21241
+ var _f = useQuoteQuantities({
21242
+ selectedPriceList: selectedPriceList,
21243
+ quote: quote,
21244
+ }), onChangeQuantity = _f.onChangeQuantity, getFeatureQuantity = _f.getFeatureQuantity, isUpdatingCharges = _f.isUpdatingCharges;
21245
+ // Handlers
21246
+ function handleClearQuote() {
21247
+ setSelectedPriceList(undefined);
21248
+ }
21249
+ function handleChangeSelectedPriceList(priceList) {
21250
+ setSelectedPriceList(priceList);
21251
+ }
21252
+ // Important that we keep track of all changes taking place so we can recalculate taxes after all changes are complete
21253
+ var isUpdatingQuote = isUpdatingCharges || isAddonPlanLoading || isFeatureAddonsLoading;
21254
+ return (jsx(QuoteContext.Provider, __assign({ value: {
21376
21255
  quote: quote,
21256
+ selectedPriceList: selectedPriceList,
21377
21257
  isQuotePending: isQuotePending,
21258
+ isUpdatingQuote: isUpdatingQuote,
21259
+ // Plan add-ons pending
21378
21260
  isAddonPlanLoading: isAddonPlanLoading,
21379
21261
  setIsAddonPlanLoading: setIsAddonPlanLoading,
21262
+ // Feature add-ons pending
21380
21263
  isFeatureAddonsLoading: isFeatureAddonsLoading,
21381
21264
  addFeatureAddonLoading: addFeatureAddonLoading,
21382
21265
  removeFeatureAddonLoading: removeFeatureAddonLoading,
21266
+ onClearQuote: handleClearQuote,
21267
+ onChangeSelectedPriceList: handleChangeSelectedPriceList,
21268
+ onChangeQuantity: onChangeQuantity,
21269
+ getFeatureQuantity: getFeatureQuantity,
21383
21270
  } }, { children: children })));
21384
21271
  }
21385
21272
 
21386
- 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";
21387
- var quoteChargeUpdate = function (_a) {
21388
- var discount = _a.discount, name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
21389
- return gqlRequest({
21390
- query: QUOTE_CHARGE_UPDATE,
21391
- vars: {
21392
- subtotal: subtotal,
21393
- discount: discount,
21394
- name: name,
21395
- price: price,
21396
- quantity: quantity,
21397
- quoteChargeId: quoteChargeId,
21398
- startDate: startDate,
21399
- },
21273
+ var PageTitle = function (_a) {
21274
+ var onGoBack = _a.onGoBack, title = _a.title;
21275
+ var isMobile = useIsMobile();
21276
+ var secondaryColor = useContext(BrandContext).secondaryColor;
21277
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3 bunny-font-medium", style: {
21278
+ fontSize: "28px",
21279
+ paddingBottom: isMobile ? "22px" : "56px",
21280
+ color: secondaryColor,
21281
+ } }, { children: [onGoBack && (jsx(ArrowLeftOutlined, { onClick: onGoBack, style: {
21282
+ fontSize: "20px",
21283
+ cursor: "pointer",
21284
+ } })), title] })));
21285
+ };
21286
+
21287
+ function isAddonPurchased(featureAddon, currentSubscription) {
21288
+ 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; });
21289
+ if (!purchasedFeatureAddons)
21290
+ return false;
21291
+ return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
21292
+ }
21293
+ function hasUnpurchasedFeatureAddons(priceList, currentSubscription) {
21294
+ var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
21295
+ 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; });
21296
+ var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
21297
+ 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; }));
21298
+ });
21299
+ return unpurchasedFeatureAddons.length > 0;
21300
+ }
21301
+ function findQuoteChangeForFeatureAddon(quote) {
21302
+ return quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.kind === QuoteChangeKind.UPDATE || qc.kind === QuoteChangeKind.SUBSCRIBE; });
21303
+ }
21304
+ function featureAddonInQuote(selectedPriceList, priceListCharge, quote) {
21305
+ var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === selectedPriceList.id; });
21306
+ if (!quoteChange)
21307
+ return false;
21308
+ return quoteChange.charges.some(function (c) { var _a; return ((_a = c.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListCharge.id; });
21309
+ }
21310
+ // ID Cucumber will use to find the feature addon switch
21311
+ function featureAddonSwitchTestId(featureAddon) {
21312
+ var name = featureAddon.name.toLowerCase().replace(/ /g, '-');
21313
+ return "feature-addon-switch-".concat(name);
21314
+ }
21315
+
21316
+ var pageWrapperClassName = function (isMobile) {
21317
+ return "flex flex-col grow pt-4 ".concat(isMobile ? 'pb-4 overflow-hidden' : 'pb-8', " ").concat('content-container');
21318
+ };
21319
+
21320
+ var MUTATION$2 = "{\n currentUser {\n taxationRequiredAccountFields\n }\n}";
21321
+ var getTaxationRequiredAccountFields = function (_a) {
21322
+ var apiHost = _a.apiHost, token = _a.token;
21323
+ return __awaiter(void 0, void 0, void 0, function () {
21324
+ var response;
21325
+ var _b, _c;
21326
+ return __generator(this, function (_d) {
21327
+ switch (_d.label) {
21328
+ case 0: return [4 /*yield*/, gqlRequest({
21329
+ query: MUTATION$2,
21330
+ token: token,
21331
+ apiHost: apiHost,
21332
+ })];
21333
+ case 1:
21334
+ response = _d.sent();
21335
+ return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
21336
+ ? response.currentUser.taxationRequiredAccountFields
21337
+ : null];
21338
+ }
21339
+ });
21340
+ });
21341
+ };
21342
+
21343
+ var useHasTaxPlugin = function (_a) {
21344
+ var apiHost = _a.apiHost, token = _a.token;
21345
+ var plugins = usePlugins({
21346
+ apiHost: apiHost,
21347
+ token: token,
21348
+ }).data;
21349
+ return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
21350
+ };
21351
+
21352
+ function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
21353
+ var _a;
21354
+ var upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL;
21355
+ function upgradingFromFree() {
21356
+ 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);
21357
+ return totalPrice === 0;
21358
+ }
21359
+ var quoteKindIsValid = quote.kind === QuoteChangeKind.SUBSCRIBE ||
21360
+ quote.kind === QuoteChangeKind.ADJUSTMENT ||
21361
+ quote.kind === QuoteChangeKind.ACTIVATE;
21362
+ if (quoteKindIsValid) {
21363
+ return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
21364
+ }
21365
+ return false;
21366
+ }
21367
+
21368
+ var MUTATION$1 = "\nmutation accountUpdate(\n $id: ID!,\n $attributes: AccountAttributes!) {\n accountUpdate(\n id: $id,\n attributes: $attributes\n ) {\n account {\n id\n billingCountry\n billingState\n billingStreet\n billingCity\n billingZip\n name\n }\n errors\n }\n }\n";
21369
+ var accountUpdate = function (_a) {
21370
+ var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
21371
+ return __awaiter(void 0, void 0, void 0, function () {
21372
+ var vars, response, errors;
21373
+ var _b;
21374
+ return __generator(this, function (_c) {
21375
+ switch (_c.label) {
21376
+ case 0:
21377
+ vars = { id: accountId, attributes: attributes };
21378
+ return [4 /*yield*/, gqlRequest({
21379
+ query: MUTATION$1,
21380
+ token: token,
21381
+ vars: vars,
21382
+ apiHost: apiHost,
21383
+ })];
21384
+ case 1:
21385
+ response = _c.sent();
21386
+ errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
21387
+ if (errors)
21388
+ throw errors;
21389
+ return [2 /*return*/, response.accountUpdate];
21390
+ }
21391
+ });
21392
+ });
21393
+ };
21394
+
21395
+ var COUNTRIES_REQUIRING_STATE = ['US', 'CA'];
21396
+ var TaxationForm = function (_a) {
21397
+ var account = _a.account, quote = _a.quote;
21398
+ // Hooks
21399
+ var queryClient = useQueryClient();
21400
+ var apiHost = useContext(BunnyContext).apiHost;
21401
+ var token = useToken();
21402
+ var form = Form.useForm()[0];
21403
+ // Mutations
21404
+ var _b = useMutation({
21405
+ mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
21406
+ var account;
21407
+ return __generator(this, function (_a) {
21408
+ switch (_a.label) {
21409
+ case 0: return [4 /*yield*/, accountUpdate({
21410
+ accountId: quote.accountId,
21411
+ attributes: changedFormData,
21412
+ token: token,
21413
+ apiHost: apiHost,
21414
+ })];
21415
+ case 1:
21416
+ account = _a.sent();
21417
+ return [2 /*return*/, account];
21418
+ }
21419
+ });
21420
+ }); },
21421
+ onSuccess: function () {
21422
+ queryClient.invalidateQueries({
21423
+ queryKey: ['getTaxationRequiredAccountFields', token],
21424
+ });
21425
+ },
21426
+ }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
21427
+ 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) {
21428
+ var _a, _b;
21429
+ return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
21430
+ ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
21431
+ } }) })), 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" })) })] })));
21432
+ };
21433
+ var FormBillingState = function () {
21434
+ var billingCountry = Form.useWatch('billingCountry');
21435
+ var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
21436
+ return (jsx(Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsx(Input, { placeholder: "State" }) })));
21437
+ };
21438
+
21439
+ var showSuccessNotification = useSuccessNotification();
21440
+ var QuoteCheckout = function (_a) {
21441
+ var _b, _c;
21442
+ var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, onRecalculateTaxes = _a.onRecalculateTaxes;
21443
+ var apiHost = useContext(BunnyContext).apiHost;
21444
+ var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
21445
+ var token = useToken();
21446
+ var isMobile = useIsMobile();
21447
+ var _d = useState(false), isSaving = _d[0], setIsSaving = _d[1];
21448
+ var paymentRequired = getQuoteAmountDue(quote) > 0;
21449
+ var queryClient = useQueryClient();
21450
+ var _e = useState(''), couponCode = _e[0], setCouponCode = _e[1];
21451
+ var _f = useUpdateCoupons({
21452
+ apiHost: apiHost,
21453
+ token: token,
21454
+ quoteChangeId: (_b = quote.quoteChanges[quote.quoteChanges.length - 1]) === null || _b === void 0 ? void 0 : _b.id,
21455
+ onCouponAdded: function () {
21456
+ queryClient.invalidateQueries({
21457
+ queryKey: QueryKeyFactory.default.createObjectKey({
21458
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
21459
+ objectName: 'editingQuote',
21460
+ token: token,
21461
+ }),
21462
+ });
21463
+ showSuccessNotification('Coupon applied');
21464
+ onRecalculateTaxes();
21465
+ setCouponCode('');
21466
+ },
21467
+ onCouponRemoved: function () {
21468
+ queryClient.invalidateQueries({
21469
+ queryKey: QueryKeyFactory.default.createObjectKey({
21470
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
21471
+ objectName: 'editingQuote',
21472
+ token: token,
21473
+ }),
21474
+ });
21475
+ showSuccessNotification('Coupon removed');
21476
+ onRecalculateTaxes();
21477
+ },
21478
+ }), addCoupon = _f.addCoupon, removeCoupon = _f.removeCoupon, isAddingCoupon = _f.isAddingCoupon, isRemovingCoupon = _f.isRemovingCoupon, activeCouponsExist = _f.activeCouponsExist;
21479
+ var couponsOnQuote = (_c = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _c === void 0 ? void 0 : _c.flatMap(function (quoteChange) { var _a; return (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges) === null || _a === void 0 ? void 0 : _a.filter(function (charge) { return charge.kind === 'COUPON'; }); });
21480
+ var checkoutMutation = useMutation({
21481
+ mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21482
+ return __generator(this, function (_a) {
21483
+ switch (_a.label) {
21484
+ case 0:
21485
+ if (!quote)
21486
+ throw new Error('Quote is required');
21487
+ if (paymentRequired)
21488
+ throw new Error('Payment is required');
21489
+ return [4 /*yield*/, checkout({ quoteId: quote.id, token: token, apiHost: apiHost })];
21490
+ case 1: return [2 /*return*/, _a.sent()];
21491
+ }
21492
+ });
21493
+ }); },
21494
+ onSuccess: onSuccess,
21495
+ onError: onFail,
21496
+ });
21497
+ function handleCheckoutNoPayment() {
21498
+ return __awaiter(this, void 0, void 0, function () {
21499
+ return __generator(this, function (_a) {
21500
+ setIsSaving(true);
21501
+ checkoutMutation.mutate();
21502
+ setIsSaving(false);
21503
+ return [2 /*return*/];
21504
+ });
21505
+ });
21506
+ }
21507
+ if (taxationRequiredAccountFields)
21508
+ return (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsx(TaxationForm, { account: account, quote: quote }) })));
21509
+ 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 &&
21510
+ 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 () {
21511
+ couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(function (couponCharge) {
21512
+ var _a;
21513
+ var couponCode = (_a = couponCharge === null || couponCharge === void 0 ? void 0 : couponCharge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode;
21514
+ if (couponCode) {
21515
+ removeCoupon(couponCode);
21516
+ }
21517
+ });
21518
+ } }, { children: "Remove coupon(s)" })))] }))) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsx(Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
21519
+ };
21520
+ var PaymentFormWrapper = function (_a) {
21521
+ var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
21522
+ var isMobile = useIsMobile();
21523
+ return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-6 bunny-shrink-0 ".concat(isMobile ? 'bunny-w-full bunny-shadow-padding-xb' : '', " ").concat(className), style: __assign({}, (isMobile
21524
+ ? setMaxHeight
21525
+ ? { maxHeight: '60vh' }
21526
+ : {}
21527
+ : {
21528
+ width: '350px',
21529
+ })) }, { children: children })));
21530
+ };
21531
+
21532
+ var queryKeyFactory = QueryKeyFactory.default;
21533
+ var Checkout = function (_a) {
21534
+ var _b, _c;
21535
+ var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, isUpdatingQuote = _a.isUpdatingQuote;
21536
+ var apiHost = useContext(BunnyContext).apiHost;
21537
+ var isMobile = useIsMobile();
21538
+ var token = useToken();
21539
+ var hasTaxPlugin = useHasTaxPlugin({
21400
21540
  apiHost: apiHost,
21401
21541
  token: token,
21402
21542
  });
21543
+ var queryClient = useQueryClient();
21544
+ // Queries
21545
+ var _d = useQuery({
21546
+ queryKey: ['getTaxationRequiredAccountFields', token],
21547
+ queryFn: function () { return getTaxationRequiredAccountFields({ apiHost: apiHost, token: token }); },
21548
+ enabled: Boolean(quote),
21549
+ staleTime: 0,
21550
+ }), taxationRequiredAccountFields = _d.data, isLoadingTaxationRequiredAccountFields = _d.isLoading;
21551
+ var _e = useQuery({
21552
+ queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
21553
+ queryFn: function () {
21554
+ return (quote === null || quote === void 0 ? void 0 : quote.accountId) &&
21555
+ getAccount({ id: quote.accountId, apiHost: apiHost, token: token, componentsVersion: PACKAGE_VERSION });
21556
+ },
21557
+ enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
21558
+ }), account = _e.data, isLoadingAccount = _e.isLoading;
21559
+ function recalculateTaxes() {
21560
+ return __awaiter(this, void 0, void 0, function () {
21561
+ var updatedQuote, quoteKey;
21562
+ return __generator(this, function (_a) {
21563
+ switch (_a.label) {
21564
+ case 0:
21565
+ if (!quote) return [3 /*break*/, 2];
21566
+ return [4 /*yield*/, quoteRecalculateTaxes({
21567
+ quoteId: quote.id,
21568
+ apiHost: apiHost,
21569
+ token: token,
21570
+ })];
21571
+ case 1:
21572
+ updatedQuote = _a.sent();
21573
+ if (updatedQuote) {
21574
+ quoteKey = queryKeyFactory.createObjectKey({
21575
+ id: updatedQuote.id,
21576
+ objectName: 'editingQuote',
21577
+ token: token,
21578
+ });
21579
+ queryClient.setQueryData(quoteKey, updatedQuote);
21580
+ }
21581
+ _a.label = 2;
21582
+ case 2: return [2 /*return*/, {}];
21583
+ }
21584
+ });
21585
+ });
21586
+ }
21587
+ var recalculateTaxesEnabled = Boolean(quote) &&
21588
+ open &&
21589
+ hasTaxPlugin &&
21590
+ !taxationRequiredAccountFields &&
21591
+ !isLoadingTaxationRequiredAccountFields &&
21592
+ !isUpdatingQuote;
21593
+ useQuery({
21594
+ queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
21595
+ id: quote === null || quote === void 0 ? void 0 : quote.id,
21596
+ token: token,
21597
+ }),
21598
+ queryFn: recalculateTaxes,
21599
+ // Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
21600
+ enabled: recalculateTaxesEnabled,
21601
+ staleTime: 0,
21602
+ });
21603
+ if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
21604
+ return null;
21605
+ return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50 bunny-overflow-auto", style: {
21606
+ zIndex: 1001,
21607
+ } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-w-full" }, { children: jsx(CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb') }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsx(Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsx("div", __assign({ className: "bunny-w-full bunny-pt-12" }, { children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsx(QuoteCheckout, { account: account, onFail: function (error) {
21608
+ onFail(error);
21609
+ }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: function () { return __awaiter(void 0, void 0, void 0, function () {
21610
+ return __generator(this, function (_a) {
21611
+ switch (_a.label) {
21612
+ case 0:
21613
+ if (!recalculateTaxesEnabled) return [3 /*break*/, 2];
21614
+ return [4 /*yield*/, recalculateTaxes()];
21615
+ case 1:
21616
+ _a.sent();
21617
+ _a.label = 2;
21618
+ case 2: return [2 /*return*/];
21619
+ }
21620
+ });
21621
+ }); } })) : (jsx(PaymentForm, { onFail: function (error) {
21622
+ onFail(error);
21623
+ }, onPaymentSuccess: onSuccess }))] })), jsx(Footer, { className: "bunny-pl-12" })] })) })));
21403
21624
  };
21404
21625
 
21405
21626
  var CheckoutBarInput = function (_a) {
21406
- var disabled = _a.disabled, charge = _a.charge, quantity = _a.quantity, selectedPriceList = _a.selectedPriceList, onQuantityChanged = _a.onQuantityChanged;
21407
- // State
21408
- var _b = useState(false), isTooltipOpen = _b[0], setIsTooltipOpen = _b[1];
21409
- var _c = useState(0), quantityLocal = _c[0], setQuantityLocal = _c[1];
21410
- // Hooks
21627
+ var _b;
21628
+ var disabled = _a.disabled, charge = _a.charge, quantity = _a.quantity, onQuantityChanged = _a.onQuantityChanged;
21629
+ var _c = useState(false), isTooltipOpen = _c[0], setIsTooltipOpen = _c[1];
21411
21630
  var isMobile = useIsMobile();
21412
- var quoteChangeDebounce = useCallback(lodashExports.debounce(function (newQuantity) { return __awaiter(void 0, void 0, void 0, function () {
21413
- return __generator(this, function (_a) {
21414
- onQuantityChanged(newQuantity);
21415
- return [2 /*return*/];
21416
- });
21417
- }); }, 1000), []);
21418
- useEffect(function () {
21419
- setQuantityLocal(quantity);
21420
- }, [quantity]);
21421
21631
  useEffect(function () {
21422
21632
  setTimeout(function () {
21423
21633
  setIsTooltipOpen(true);
@@ -21426,18 +21636,14 @@ var CheckoutBarInput = function (_a) {
21426
21636
  setIsTooltipOpen(false);
21427
21637
  }, 6000);
21428
21638
  }, []);
21429
- if (!(charge === null || charge === void 0 ? void 0 : charge.feature))
21430
- return null;
21431
- return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isMobile ? "bunny-justify-between" : "") }, { children: [jsx(QuantityLabel, { activeCharge: charge }), jsx(Tooltip, __assign({ onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
21639
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isMobile ? 'bunny-justify-between' : '') }, { children: [jsx(QuantityLabel, { activeCharge: charge }), jsx(Tooltip, __assign({ onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
21432
21640
  body: {
21433
- paddingTop: "0.75rem",
21434
- paddingBottom: "0.75rem",
21641
+ paddingTop: '0.75rem',
21642
+ paddingBottom: '0.75rem',
21435
21643
  },
21436
- } }, { children: jsx(Input, { className: isMobile ? "text-right" : "", disabled: disabled || !selectedPriceList || !charge.selfServiceQuantity, onChange: function (e) {
21437
- var quantity = Number(e.target.value);
21438
- setQuantityLocal(quantity);
21439
- quoteChangeDebounce(quantity);
21440
- }, min: charge === null || charge === void 0 ? void 0 : charge.quantityMin, max: charge === null || charge === void 0 ? void 0 : charge.quantityMax, style: { minWidth: "120px" }, type: "number", value: quantityLocal, required: true }) }))] })));
21644
+ } }, { children: jsx(Input, { id: "".concat((_b = charge.name) === null || _b === void 0 ? void 0 : _b.toLowerCase().replace(/ /g, '-'), "-quantity-input"), className: isMobile ? 'text-right' : '', disabled: disabled, onChange: function (e) {
21645
+ onQuantityChanged(Number(e.target.value));
21646
+ }, min: charge === null || charge === void 0 ? void 0 : charge.quantityMin, max: charge === null || charge === void 0 ? void 0 : charge.quantityMax, style: { minWidth: '120px' }, type: "number", value: quantity, required: true }) }))] })));
21441
21647
  };
21442
21648
  var QuantityLabel = function (_a) {
21443
21649
  var _b;
@@ -21445,25 +21651,10 @@ var QuantityLabel = function (_a) {
21445
21651
  var featureName = (_b = activeCharge.feature) === null || _b === void 0 ? void 0 : _b.name;
21446
21652
  var pluralizedFeatureName = (StringUtils.isStringPluralized(featureName) || !featureName
21447
21653
  ? featureName
21448
- : StringUtils.pluralizeEntityName(featureName)) || "";
21449
- return (jsx("span", __assign({ className: "bunny-text-slate-500 bunny-font-medium", style: { fontSize: "11px" } }, { children: pluralizedFeatureName.toUpperCase() })));
21654
+ : StringUtils.pluralizeEntityName(featureName)) || '';
21655
+ return (jsx("span", __assign({ className: "bunny-text-slate-500 bunny-font-medium", style: { fontSize: '11px' } }, { children: pluralizedFeatureName.toUpperCase() })));
21450
21656
  };
21451
21657
 
21452
- function isAddonPurchased(featureAddon, currentSubscription) {
21453
- 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; });
21454
- if (!purchasedFeatureAddons)
21455
- return false;
21456
- return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
21457
- }
21458
- function priceListHasUnpurchasedFeatureAddons(priceList, currentSubscription) {
21459
- var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
21460
- 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; });
21461
- var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
21462
- 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; }));
21463
- });
21464
- return unpurchasedFeatureAddons.length > 0;
21465
- }
21466
-
21467
21658
  var periodMonthsConverter = function (period) {
21468
21659
  if (period === 0)
21469
21660
  return BillingPeriod.ONCE;
@@ -21506,7 +21697,10 @@ var canShowQuantitiesInput = function (charge, subscription) {
21506
21697
  return shouldProcessCharge;
21507
21698
  };
21508
21699
  var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
21509
- var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
21700
+ if (!editedSubscription || editedSubscription.quantity === undefined) {
21701
+ return { charges: [], quoteChange: undefined };
21702
+ }
21703
+ var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === editedSubscription.subscription.priceList.id; });
21510
21704
  var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
21511
21705
  var charges = [
21512
21706
  {
@@ -21591,6 +21785,38 @@ var getApplicablePriceTier = function (charge, currencyId, priceDecimals) {
21591
21785
  : "".concat(formatCurrency(selectedTier.price, currencyId, priceDecimals));
21592
21786
  };
21593
21787
 
21788
+ var ADDON_INDENTATION = 64;
21789
+ function findNonAddonSubscriptions(subscriptions) {
21790
+ return subscriptions.filter(function (subscription) {
21791
+ return (subscription.priceList.plan.addon === false || subscription.priceList.plan.addon === null) &&
21792
+ findParentSubscription(subscription, subscriptions) === undefined;
21793
+ });
21794
+ }
21795
+ function findAddonSubscriptions(parentSubscription, subscriptions) {
21796
+ var _a;
21797
+ var addonSubscriptionsIds = (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.map(function (addonSubscription) { return addonSubscription.id; });
21798
+ return subscriptions.filter(function (subscription) { return addonSubscriptionsIds === null || addonSubscriptionsIds === void 0 ? void 0 : addonSubscriptionsIds.includes(subscription.id); });
21799
+ }
21800
+ function findParentSubscription(subscription, subscriptions) {
21801
+ return subscriptions.find(function (parentSubscription) {
21802
+ var _a;
21803
+ return (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.some(function (addonSubscription) { return addonSubscription.id === subscription.id; });
21804
+ });
21805
+ }
21806
+ function hasUnpurchasedAddonPlans(priceList, currentSubscription) {
21807
+ var addonPlans = priceList.plan.addonPlans;
21808
+ var purchasedAddonPlans = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.addonSubscriptions;
21809
+ var unpurchasedAddonPlans = addonPlans === null || addonPlans === void 0 ? void 0 : addonPlans.filter(function (addonPlan) {
21810
+ return !(purchasedAddonPlans === null || purchasedAddonPlans === void 0 ? void 0 : purchasedAddonPlans.some(function (purchasedAddonPlan) { return purchasedAddonPlan.plan.id === addonPlan.id; }));
21811
+ });
21812
+ return unpurchasedAddonPlans && unpurchasedAddonPlans.length > 0;
21813
+ }
21814
+ // ID Cucumber will use to find the addon plan switch
21815
+ function addonPlanSwitchTestId(addonPlan) {
21816
+ var name = addonPlan.name.toLowerCase().replace(/ /g, '-');
21817
+ return "addon-plan-switch-".concat(name);
21818
+ }
21819
+
21594
21820
  var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
21595
21821
  // Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
21596
21822
  var createPlanDescription = function (priceList) {
@@ -21636,11 +21862,9 @@ var getActivePlanPriceData = function (priceList, selectedPriceList) {
21636
21862
  };
21637
21863
  };
21638
21864
  var isPriceListDisabled = function (_a) {
21639
- var _b;
21640
21865
  var priceList = _a.priceList, upgradingSubscription = _a.upgradingSubscription;
21641
- var canPurchaseFeatureAddons = priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21642
- // TODO: rename hasPlanAddons to canPurchasePlanAddons and check whether we can purchase plan addons
21643
- var hasPlanAddons = (((_b = priceList.plan.addonPlans) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0;
21866
+ var canPurchaseFeatureAddons = hasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21867
+ var canPurchasePlanAddons = hasUnpurchasedAddonPlans(priceList, upgradingSubscription);
21644
21868
  var existingSubscriptionInTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
21645
21869
  var isUpgradingSubscriptionPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21646
21870
  // When should priceList be disabled?
@@ -21650,7 +21874,7 @@ var isPriceListDisabled = function (_a) {
21650
21874
  // AND cannot purchase add-on plans
21651
21875
  // AND selfServiceBuy is false
21652
21876
  if (isUpgradingSubscriptionPriceList) {
21653
- return !existingSubscriptionInTrial && !canPurchaseFeatureAddons && !hasPlanAddons;
21877
+ return !existingSubscriptionInTrial && !canPurchaseFeatureAddons && !canPurchasePlanAddons;
21654
21878
  }
21655
21879
  return false;
21656
21880
  };
@@ -21685,8 +21909,7 @@ var CheckoutBarSummarySection = function (_a) {
21685
21909
  var open = _a.open, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription;
21686
21910
  // Context
21687
21911
  var apiHost = useContext(BunnyContext).apiHost;
21688
- var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
21689
- var _c = useContext(PlanManagerQuoteContext), quote = _c.quote, isQuotePending = _c.isQuotePending, isAddonPlanLoading = _c.isAddonPlanLoading, isFeatureAddonsLoading = _c.isFeatureAddonsLoading;
21912
+ var _c = useContext(QuoteContext), quote = _c.quote, isQuotePending = _c.isQuotePending, isUpdatingQuote = _c.isUpdatingQuote;
21690
21913
  var accountId = useContext(PaymentContext).accountId;
21691
21914
  // Hooks
21692
21915
  var token = useToken();
@@ -21706,60 +21929,28 @@ var CheckoutBarSummarySection = function (_a) {
21706
21929
  });
21707
21930
  // When should checkout button be disabled?
21708
21931
  var isUpgradingSubscription = selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
21709
- var disableCheckoutButton = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
21710
- !selectedPriceList ||
21711
- isFetching ||
21712
- !isUpgradingSubscription ||
21713
- open);
21932
+ var disableCheckoutButton = Boolean(!selectedPriceList || isFetching || !isUpgradingSubscription || open);
21714
21933
  var checkoutButtonDisabled = (quote === null || quote === void 0 ? void 0 : quote.amountDue) && (quote === null || quote === void 0 ? void 0 : quote.amountDue) > 0 ? false : disableCheckoutButton;
21715
21934
  var activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21716
21935
  var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === ChargeType.USAGE;
21717
21936
  var hasPaymentPlugins = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length);
21718
- 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
21937
+ 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: isQuotePending || isUpdatingQuote, tooltipText: !hasPaymentPlugins
21719
21938
  ? 'Cannot checkout. No valid payment plugins found. Please contact your administrator.'
21720
21939
  : undefined })] })));
21721
21940
  };
21722
21941
 
21723
- var PlanPickerCheckoutBarWrapper = function (_a) {
21724
- var editingQuote = _a.editingQuote, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21725
- // Context
21726
- var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
21727
- var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
21728
- if (!selectedPriceList)
21729
- return null;
21730
- return (jsx(PlanPickerCheckoutBar, { editingQuote: editingQuote, handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
21731
- };
21732
21942
  var PlanPickerCheckoutBar = function (_a) {
21733
- var editingQuote = _a.editingQuote, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21943
+ var selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21734
21944
  // Context
21735
21945
  var _b = useContext(SubscriptionsContext), upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
21736
- var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
21737
- var apiHost = useContext(BunnyContext).apiHost;
21738
- var quote = useContext(PlanManagerQuoteContext).quote;
21946
+ var _c = useContext(QuoteContext), quote = _c.quote, onChangeQuantity = _c.onChangeQuantity, getFeatureQuantity = _c.getFeatureQuantity, isFeatureAddonsLoading = _c.isFeatureAddonsLoading, isUpdatingQuote = _c.isUpdatingQuote;
21739
21947
  // Local state
21740
- var _c = useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
21948
+ var _d = useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
21741
21949
  // Hooks
21742
21950
  var token = useToken();
21743
21951
  var showSuccessNotification = useSuccessNotification();
21744
21952
  var queryClient = useQueryClient();
21745
21953
  var isMobile = useIsMobile();
21746
- var defaultPaymentMethod = usePaymentMethod({
21747
- token: token,
21748
- apiHost: apiHost,
21749
- }).defaultPaymentMethod;
21750
- // Mutations
21751
- var updateCharge = useMutation({
21752
- mutationFn: quoteChargeUpdate,
21753
- onSuccess: function () {
21754
- queryClient.invalidateQueries({
21755
- queryKey: QueryKeyFactory.default.createObjectKey({
21756
- objectName: 'editingQuote',
21757
- id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
21758
- token: token,
21759
- }),
21760
- });
21761
- },
21762
- }).mutate;
21763
21954
  var handleCheckoutSuccess = function () {
21764
21955
  queryClient.invalidateQueries({
21765
21956
  queryKey: QueryKeyFactory.default.createTableKey({
@@ -21774,57 +21965,31 @@ var PlanPickerCheckoutBar = function (_a) {
21774
21965
  showSuccessNotification('Your subscription has been created', 'Checkout successful');
21775
21966
  onCheckoutSuccess();
21776
21967
  };
21777
- function onChangeQuantity(chargeId, quantity) {
21778
- 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); });
21779
- var quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) {
21780
- var _a;
21781
- return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === chargeId;
21782
- });
21783
- if (!token) {
21784
- console.error('token is undefined');
21785
- return;
21786
- }
21787
- if (!quoteCharge) {
21788
- console.error('quoteCharge not found');
21789
- return;
21790
- }
21791
- updateCharge({
21792
- quoteChargeId: quoteCharge.id,
21793
- quantity: quantity,
21794
- apiHost: apiHost,
21795
- token: token,
21796
- });
21797
- }
21798
- // Reset query key on unmount
21799
- useEffect(function () {
21800
- return function () {
21801
- queryClient.invalidateQueries({
21802
- queryKey: QueryKeyFactory.default.calculatedPricesKey({
21803
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21804
- quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
21805
- token: token,
21806
- }),
21807
- });
21808
- };
21809
- }, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
21810
21968
  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) {
21811
- var _a;
21812
- 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); });
21813
- var chargeQuantity = (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceList) === null || _a === void 0 ? void 0 : _a.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); })) === null || _a === void 0 ? void 0 : _a.quantity;
21814
- if (charge.chargeType === ChargeType.USAGE)
21969
+ var _a, _b;
21970
+ if (!canEditChargeQuantity(charge))
21815
21971
  return null;
21816
- if (!quote)
21972
+ if (!((_a = charge.feature) === null || _a === void 0 ? void 0 : _a.id))
21973
+ throw new Error('Charge feature is undefined');
21974
+ var isFeatureAddon = charge.featureAddon;
21975
+ var quantity = getFeatureQuantity((_b = charge.feature) === null || _b === void 0 ? void 0 : _b.id, charge.id);
21976
+ var maybeIsChargeLoading = isFeatureAddon && isFeatureAddonsLoading;
21977
+ var showInput = quantity && selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
21978
+ if (!showInput)
21817
21979
  return null;
21818
- if (!chargeQuantity)
21980
+ // if charge is a feature addon, and a corresponding quote charge is not found in quote, return null
21981
+ if (isFeatureAddon && !featureAddonInQuote(selectedPriceList, charge, quote)) {
21819
21982
  return null;
21820
- return (jsx(CheckoutBarInput, { disabled: !chargeQuantity, charge: charge, quantity: chargeQuantity !== null && chargeQuantity !== void 0 ? chargeQuantity : 0, selectedPriceList: selectedPriceList, onQuantityChanged: function (quantity) {
21983
+ }
21984
+ var isDisabled = !quote || maybeIsChargeLoading || !selectedPriceList || !charge.selfServiceQuantity;
21985
+ return (jsx(CheckoutBarInput, { disabled: isDisabled, charge: charge, quantity: quantity, onQuantityChanged: function (quantity) {
21821
21986
  onChangeQuantity(charge.id, quantity);
21822
21987
  } }, index));
21823
- }) })), 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 })] })));
21988
+ }) })), 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, token: token, isUpdatingQuote: isUpdatingQuote })] })));
21824
21989
  };
21825
21990
 
21826
21991
  // WARNING: There is a preview button on APP that will need to be changed if this query is changed
21827
- 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 }";
21992
+ 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 addon\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 id\n }\n }\n }\n }\n }";
21828
21993
  var getPriceListChangeOptions = function (_a) {
21829
21994
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
21830
21995
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21886,37 +22051,6 @@ var StyledRadioGroup = styled.div(templateObject_2 || (templateObject_2 = __make
21886
22051
  });
21887
22052
  var templateObject_1$4, templateObject_2;
21888
22053
 
21889
- var calculateNewQuantity = function (priceList, currentQuantity) {
21890
- if (currentQuantity === void 0) { currentQuantity = 1; }
21891
- var priceListRecurringCharge = priceList === null || priceList === void 0 ? void 0 : priceList.charges.find(function (priceListCharge) {
21892
- return priceListCharge.chargeType === "RECURRING" ||
21893
- priceListCharge.chargeType === "USAGE";
21894
- });
21895
- var quantityMax = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMax) || Number.POSITIVE_INFINITY;
21896
- var quantityMin = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMin) || Number.NEGATIVE_INFINITY;
21897
- var selfServiceQuantity = priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.selfServiceQuantity;
21898
- // If self service quantity is disabled, return the min quantity
21899
- if (!selfServiceQuantity && quantityMin) {
21900
- return quantityMin;
21901
- }
21902
- // If the current quantity is greater than the max quantity, return the max quantity
21903
- else if (currentQuantity > quantityMax) {
21904
- return quantityMax;
21905
- }
21906
- // If the current quantity is less than the min quantity, return the min quantity
21907
- else if (currentQuantity < quantityMin) {
21908
- return quantityMin;
21909
- }
21910
- // If the current quantity is between the min and max quantity, return the current quantity
21911
- else if (currentQuantity <= quantityMax && currentQuantity >= quantityMin) {
21912
- return currentQuantity;
21913
- }
21914
- // If all else fails, return 1
21915
- else {
21916
- return 1;
21917
- }
21918
- };
21919
-
21920
22054
  var NextPriceListButton = function (_a) {
21921
22055
  var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21922
22056
  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 () {
@@ -22058,31 +22192,6 @@ var PriceListCardTitle = function (_a) {
22058
22192
  : ' ' }))), 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 }))] })));
22059
22193
  };
22060
22194
 
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
22195
  var PLAN_GRID_PADDING = 4;
22087
22196
  var PlanPickerGridCell = function (_a) {
22088
22197
  var children = _a.children, noBorder = _a.noBorder;
@@ -22093,18 +22202,14 @@ var PlanPickerGridCell = function (_a) {
22093
22202
  };
22094
22203
 
22095
22204
  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
- }
22205
+ 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, onClickPriceListCard = _a.onClickPriceListCard;
22101
22206
  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
22207
  if (!disableSelectCurrentPlan) {
22103
22208
  if (priceList.plan.pricingStyle === PricingStyle.CONTACT_US) {
22104
22209
  window.open(priceList.plan.contactUsUrl, '_blank');
22105
22210
  }
22106
22211
  else {
22107
- handleChangePriceList(priceList);
22212
+ onClickPriceListCard === null || onClickPriceListCard === void 0 ? void 0 : onClickPriceListCard(priceList);
22108
22213
  }
22109
22214
  }
22110
22215
  }, style: {
@@ -22118,24 +22223,23 @@ var CheckIcon = function (_a) {
22118
22223
  };
22119
22224
 
22120
22225
  var PriceListCardMobile = function (_a) {
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;
22226
+ var description = _a.description, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays, disableOnClickPriceListCard = _a.disableOnClickPriceListCard, onClickPriceListCard = _a.onClickPriceListCard;
22122
22227
  var brandColor = useContext(BrandContext).brandColor;
22123
- var onChangePriceList = useContext(PriceListSelectorContext).onChangePriceList;
22124
22228
  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 () {
22125
- if (!disableOnClick)
22126
- onChangePriceList(priceList);
22229
+ if (!disableOnClickPriceListCard)
22230
+ onClickPriceListCard === null || onClickPriceListCard === void 0 ? void 0 : onClickPriceListCard(priceList);
22127
22231
  }, style: {
22128
22232
  minWidth: '220px',
22129
22233
  borderColor: isSelected ? brandColor : SLATE_200,
22130
22234
  } }, { children: [isSelected && (jsx("div", __assign({ className: "bunny-absolute", style: {
22131
22235
  top: '10px',
22132
22236
  right: '10px',
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 })] }))] })));
22237
+ } }, { 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: disableOnClickPriceListCard, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
22134
22238
  };
22135
22239
 
22136
22240
  var PriceListCard = function (_a) {
22137
22241
  var _b;
22138
- var hideButton = _a.hideButton, isSelected = _a.isSelected, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, noBorder = _a.noBorder;
22242
+ var hideButton = _a.hideButton, isSelected = _a.isSelected, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, noBorder = _a.noBorder, onClickPriceListCard = _a.onClickPriceListCard;
22139
22243
  // Context
22140
22244
  var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
22141
22245
  var isMobile = useIsMobile();
@@ -22159,7 +22263,9 @@ var PriceListCard = function (_a) {
22159
22263
  return null;
22160
22264
  }
22161
22265
  var feature = activeCharge.feature;
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 }));
22266
+ return isMobile ? (jsx(PriceListCardMobile, { description: description, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan,
22267
+ // TODO: naming mismatch disableOnClickPriceListCard vs disableSelectCurrentPlan, maybe also functionality mismatch? (ignore for now, mobile won't ever show this currently)
22268
+ disableOnClickPriceListCard: disableSelectCurrentPlan, onClickPriceListCard: onClickPriceListCard })) : (jsx(PriceListCardDesktop, { hideButton: hideButton, description: description, disableSelectCurrentPlan: disableSelectCurrentPlan, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, noBorder: noBorder, onClickPriceListCard: onClickPriceListCard }));
22163
22269
  };
22164
22270
 
22165
22271
  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");
@@ -22221,7 +22327,7 @@ var quoteChargeDelete = function (_a) {
22221
22327
 
22222
22328
  var useQuoteUpdateFeatureAddon = function (quote, featureAddon) {
22223
22329
  var apiHost = useContext(BunnyContext).apiHost;
22224
- var _a = useContext(PlanManagerQuoteContext), addFeatureAddonLoading = _a.addFeatureAddonLoading, removeFeatureAddonLoading = _a.removeFeatureAddonLoading;
22330
+ var _a = useContext(QuoteContext), addFeatureAddonLoading = _a.addFeatureAddonLoading, removeFeatureAddonLoading = _a.removeFeatureAddonLoading;
22225
22331
  var token = useToken();
22226
22332
  var queryClient = useQueryClient();
22227
22333
  var addedQuoteChargeId = useRef();
@@ -22235,7 +22341,7 @@ var useQuoteUpdateFeatureAddon = function (quote, featureAddon) {
22235
22341
  }
22236
22342
  var _b = useMutation({
22237
22343
  mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
22238
- var quoteCharge;
22344
+ var quoteChangeId, quoteCharge;
22239
22345
  return __generator(this, function (_a) {
22240
22346
  switch (_a.label) {
22241
22347
  case 0:
@@ -22243,9 +22349,11 @@ var useQuoteUpdateFeatureAddon = function (quote, featureAddon) {
22243
22349
  throw new Error('Token is required');
22244
22350
  if (!quote)
22245
22351
  throw new Error('Editing quote is required');
22352
+ quoteChangeId = findQuoteChangeForFeatureAddon(quote);
22353
+ if (!quoteChangeId)
22354
+ throw new Error('No available quote change for feature add-on');
22246
22355
  return [4 /*yield*/, quoteChargeCreate({
22247
- // TODO: get the correct quoteChangeId
22248
- quoteChangeId: quote === null || quote === void 0 ? void 0 : quote.quoteChanges[quote.quoteChanges.length - 1].id,
22356
+ quoteChangeId: quoteChangeId.id,
22249
22357
  priceListChargeId: featureAddon.id,
22250
22358
  startDate: quote === null || quote === void 0 ? void 0 : quote.startDate,
22251
22359
  apiHost: apiHost,
@@ -22353,24 +22461,23 @@ function FeatureAddonsList(_a) {
22353
22461
  }) }));
22354
22462
  }
22355
22463
  function FeatureAddonRow(_a) {
22356
- var _b, _c;
22464
+ var _b;
22357
22465
  var featureAddon = _a.featureAddon, priceList = _a.priceList;
22358
- var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
22359
22466
  var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
22360
- var quote = useContext(PlanManagerQuoteContext).quote;
22467
+ var _c = useContext(QuoteContext), quote = _c.quote, selectedPriceList = _c.selectedPriceList;
22361
22468
  var _d = useQuoteUpdateFeatureAddon(quote, featureAddon), handleAddFeatureAddon = _d.handleAddFeatureAddon, handleRemoveFeatureAddon = _d.handleRemoveFeatureAddon, isPending = _d.isPending, isChecked = _d.isChecked;
22362
22469
  var brandColor = useContext(BrandContext).brandColor;
22363
- var isPriceListSelected = ((_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id) === priceList.id;
22470
+ var isPriceListSelected = (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id) === priceList.id;
22364
22471
  var isPurchased = isAddonPurchased(featureAddon, upgradingSubscription);
22365
22472
  var isDisabled = !isPriceListSelected || isPurchased;
22366
22473
  var checked = isChecked || isPurchased;
22367
22474
  var tooltipContent = (jsxs(Fragment, { children: [jsx("div", { children: formatCurrency(featureAddon.basePrice, priceList.currencyId) }), featureAddon.chargeType === ChargeType.RECURRING && (jsx("div", { children: PriceDescriptionString({
22368
- unitName: (_c = featureAddon.feature) === null || _c === void 0 ? void 0 : _c.unitName,
22475
+ unitName: (_b = featureAddon.feature) === null || _b === void 0 ? void 0 : _b.unitName,
22369
22476
  showPriceAsMonthly: priceList.showPriceAsMonthly,
22370
22477
  periodMonths: priceList.periodMonths,
22371
22478
  doesPlanHaveFlatFeeCharges: false,
22372
22479
  }) }))] }));
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) {
22480
+ 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, { id: featureAddonSwitchTestId(featureAddon), size: "small", loading: isPending, disabled: isDisabled || !quote, checked: checked, onChange: function (checked) {
22374
22481
  if (checked) {
22375
22482
  handleAddFeatureAddon();
22376
22483
  }
@@ -22613,6 +22720,7 @@ var FeatureTitle = function (_a) {
22613
22720
  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 })));
22614
22721
  };
22615
22722
 
22723
+ var showErrorNotification = useErrorNotification();
22616
22724
  var PlanAddonsCard = function (_a) {
22617
22725
  var selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, addonPlans = _a.addonPlans, selectedProduct = _a.selectedProduct, priceListChangeOptions = _a.priceListChangeOptions, selectedBillingPeriod = _a.selectedBillingPeriod;
22618
22726
  var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
@@ -22633,24 +22741,22 @@ var PlanAddonsCard = function (_a) {
22633
22741
  }
22634
22742
  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
22743
  var isPurchased = isAddonPlanPurchased(plan);
22636
- if (selectedBillingPeriod === undefined) {
22637
- return null;
22638
- }
22639
22744
  return (jsx(PlanAddonsCardRow, { plan: plan, selectedPriceList: selectedPriceList, setSelectedAddonPriceList: setSelectedAddonPriceList, isPurchased: isPurchased || false, selectedBillingPeriod: selectedBillingPeriod, priceListChangeOptions: priceListChangeOptions }));
22640
22745
  }) }))] })));
22641
22746
  };
22642
22747
  function PlanAddonsCardRow(_a) {
22643
22748
  var _b, _c;
22644
22749
  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;
22750
+ var _d = useContext(QuoteContext), quote = _d.quote, setIsAddonPlanLoading = _d.setIsAddonPlanLoading;
22646
22751
  var _e = useToggleAddonPlan(quote, plan, billingPeriodConverter(selectedBillingPeriod), selectedPriceList, setIsAddonPlanLoading), isPending = _e.isPending, addedQuoteChange = _e.addedQuoteChange, addAddonQuoteChange = _e.addAddonQuoteChange, deleteQuoteChange = _e.deleteQuoteChange;
22647
22752
  var addonPriceListId = (_b = plan.priceLists.find(function (priceList) { return priceList.periodMonths === billingPeriodConverter(selectedBillingPeriod); })) === null || _b === void 0 ? void 0 : _b.id;
22648
22753
  var addonPriceList = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists.find(function (priceList) { return priceList.id === addonPriceListId; });
22649
22754
  var activeCharge = (_c = getActivePlanPriceData(addonPriceList, addonPriceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
22650
22755
  if (!addonPriceList) {
22756
+ showErrorNotification('Addon price list not found', 'Client Error');
22651
22757
  return null;
22652
22758
  }
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) {
22759
+ 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, { id: addonPlanSwitchTestId(plan), loading: isPending, checked: addedQuoteChange || isPurchased, onChange: function (checked) {
22654
22760
  if (checked) {
22655
22761
  addAddonQuoteChange();
22656
22762
  }
@@ -22668,9 +22774,43 @@ function AddonPlanModal(_a) {
22668
22774
  } }, { 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
22775
  }
22670
22776
 
22777
+ var ADDON_PLANS_QUERY = function () { return "\n query PriceList($id: ID!) {\n priceList (id: $id) {\n addonPlans {\n addon\n basePrice\n code\n contactUsLabel\n contactUsUrl\n description\n id\n isVisible\n name\n position\n pricingDescription\n pricingStyle\n productId\n selfServiceBuy\n selfServiceCancel\n selfServiceRenew\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 }\n }\n"; };
22778
+ var getAddonPlans = function (_a) {
22779
+ var token = _a.token, id = _a.id, apiHost = _a.apiHost;
22780
+ return __awaiter(void 0, void 0, void 0, function () {
22781
+ var response;
22782
+ var _b;
22783
+ return __generator(this, function (_c) {
22784
+ switch (_c.label) {
22785
+ case 0: return [4 /*yield*/, gqlRequest({
22786
+ query: ADDON_PLANS_QUERY(),
22787
+ token: token,
22788
+ vars: { id: id },
22789
+ apiHost: apiHost,
22790
+ })];
22791
+ case 1:
22792
+ response = _c.sent();
22793
+ return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.priceList) === null || _b === void 0 ? void 0 : _b.addonPlans];
22794
+ }
22795
+ });
22796
+ });
22797
+ };
22798
+
22671
22799
  var PriceListGridDesktop = function (_a) {
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;
22800
+ 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, onClickPriceListCard = _a.onClickPriceListCard;
22801
+ var token = useToken();
22802
+ var apiHost = useContext(BunnyContext).apiHost;
22803
+ var addonPlans = useQuery({
22804
+ queryKey: ['addonPlans', selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id],
22805
+ queryFn: function () {
22806
+ if (!(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
22807
+ throw new Error('Selected price list ID is required');
22808
+ }
22809
+ var addonPlans = getAddonPlans({ id: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, token: token, apiHost: apiHost });
22810
+ return addonPlans;
22811
+ },
22812
+ enabled: !!(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id),
22813
+ }).data;
22674
22814
  var displayPriceLists = useMemo(function () {
22675
22815
  return getAvailablePlansAndPriceLists({
22676
22816
  availablePriceLists: availablePriceLists,
@@ -22681,6 +22821,9 @@ var PriceListGridDesktop = function (_a) {
22681
22821
  }, [availablePriceLists, priceListChangeOptions, priceListStart]).displayPriceLists;
22682
22822
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22683
22823
  var plansToDisplay = Math.min((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3, availablePriceLists.length);
22824
+ var hasFeatureAddons = displayPriceLists.some(function (priceList) {
22825
+ return priceList.charges.some(function (charge) { return charge.featureAddon; });
22826
+ });
22684
22827
  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
22828
  gridTemplateColumns: everythingInPlus
22686
22829
  ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
@@ -22690,8 +22833,8 @@ var PriceListGridDesktop = function (_a) {
22690
22833
  var doesPrevPriceListExist = displayPriceLists[index - 1];
22691
22834
  if (!priceList)
22692
22835
  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] })));
22836
+ return (jsx(PriceListCard, { onClickPriceListCard: onClickPriceListCard, isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22837
+ }), (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 }))] }))] }))] })), selectedPriceList && addonPlans && selectedBillingPeriod ? (jsx(PlanAddonsCard, { selectedPriceList: selectedPriceList, subscriptions: subscriptions, addonPlans: addonPlans, selectedProduct: selectedProduct, priceListChangeOptions: priceListChangeOptions, selectedBillingPeriod: selectedBillingPeriod })) : null] })));
22695
22838
  };
22696
22839
 
22697
22840
  var Text$9 = Typography.Text;
@@ -22705,13 +22848,13 @@ var PriceListCardFeature = function (_a) {
22705
22848
 
22706
22849
  var PriceListGridMobile = function (_a) {
22707
22850
  var _b, _c, _d, _e;
22708
- var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
22851
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays, onClickPriceListCard = _a.onClickPriceListCard;
22709
22852
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22710
22853
  var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
22711
22854
  var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
22712
22855
  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; });
22713
22856
  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) {
22714
- return (jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22857
+ return (jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays, onClickPriceListCard: onClickPriceListCard }, index));
22715
22858
  }) })), jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
22716
22859
  ? everythingInPlusString({ priceList: prevPriceList })
22717
22860
  : '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)); }) }))] }));
@@ -22719,24 +22862,27 @@ var PriceListGridMobile = function (_a) {
22719
22862
 
22720
22863
  var PriceListGrid = function (_a) {
22721
22864
  var _b, _c;
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;
22865
+ 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, onClickPriceListCard = _a.onClickPriceListCard;
22723
22866
  // Hooks
22724
22867
  var isMobile = useIsMobile();
22725
22868
  // Derived state
22726
22869
  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); });
22727
22870
  var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), 'days');
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 }));
22871
+ return isMobile ? (jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays,
22872
+ // TODO: add selectedBillingPeriod={selectedBillingPeriod} here too (ignore for now, mobile won't ever show this currently)
22873
+ onClickPriceListCard: onClickPriceListCard })) : (jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays, selectedBillingPeriod: selectedBillingPeriod, onClickPriceListCard: onClickPriceListCard }));
22729
22874
  };
22730
22875
 
22731
22876
  var createAvailableBillingPeriods = function (priceLists, selectedProduct) {
22732
22877
  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); });
22733
22878
  };
22879
+ var showInfoNotification = useInfoNotification();
22734
22880
  var PriceListSelector = function (_a) {
22735
22881
  var _b;
22736
- var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions;
22882
+ var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, priceListChangeOptions = _a.priceListChangeOptions, subscriptions = _a.subscriptions;
22737
22883
  // Context
22738
22884
  var isInPreviewMode = useContext(SubscriptionsContext).isInPreviewMode;
22739
- var _c = useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22885
+ var _c = useContext(QuoteContext), selectedPriceList = _c.selectedPriceList, onChangeSelectedPriceList = _c.onChangeSelectedPriceList, onClearQuote = _c.onClearQuote;
22740
22886
  var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
22741
22887
  // Local state
22742
22888
  var _d = useState(), selectedProduct = _d[0], setSelectedProduct = _d[1];
@@ -22753,16 +22899,15 @@ var PriceListSelector = function (_a) {
22753
22899
  }, [priceListChangeOptions, selectedBillingPeriod, selectedProduct]);
22754
22900
  // Handlers
22755
22901
  var onChangeBillingPeriod = useCallback(function (billingPeriod) {
22756
- var _a, _b;
22902
+ var _a;
22757
22903
  setSelectedBillingPeriod(billingPeriod);
22758
22904
  setPriceListStart(0);
22759
- if ((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) &&
22760
- billingPeriod !== periodMonthsConverter((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.periodMonths)) {
22761
- var availablePriceLists_1 = ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return periodMonthsConverter(priceList.periodMonths) === billingPeriod; })) || [];
22905
+ if (selectedPriceList &&
22906
+ billingPeriod !== periodMonthsConverter(selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.periodMonths)) {
22907
+ var availablePriceLists_1 = ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) { return periodMonthsConverter(priceList.periodMonths) === billingPeriod; })) || [];
22762
22908
  var newSelectedPriceList = availablePriceLists_1.find(function (priceList) {
22763
- var _a;
22764
22909
  return periodMonthsConverter(priceList.periodMonths) === billingPeriod &&
22765
- priceList.plan.id === ((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.plan.id) &&
22910
+ priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id) &&
22766
22911
  !isPriceListDisabled({
22767
22912
  priceList: priceList,
22768
22913
  upgradingSubscription: upgradingSubscription,
@@ -22770,19 +22915,16 @@ var PriceListSelector = function (_a) {
22770
22915
  });
22771
22916
  var isPriceListCurrentSubscription = newSelectedPriceList && (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
22772
22917
  if (newSelectedPriceList && !isPriceListCurrentSubscription) {
22773
- setQuotePreviewData({
22774
- priceList: newSelectedPriceList,
22775
- quantity: calculateNewQuantity(newSelectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
22776
- });
22918
+ onChangeSelectedPriceList(newSelectedPriceList);
22777
22919
  }
22778
22920
  else if (isPriceListCurrentSubscription) {
22779
- setQuotePreviewData({
22780
- priceList: newSelectedPriceList,
22781
- quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
22782
- });
22921
+ onChangeSelectedPriceList(newSelectedPriceList);
22922
+ }
22923
+ else {
22924
+ onClearQuote();
22783
22925
  }
22784
22926
  }
22785
- }, [quotePreviewData, priceListChangeOptions, upgradingSubscription, setQuotePreviewData]);
22927
+ }, [selectedPriceList, priceListChangeOptions, upgradingSubscription]);
22786
22928
  var onChangeProduct = useCallback(function (product) {
22787
22929
  var newAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, product);
22788
22930
  if (!(newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods.includes(billingPeriodConverter(selectedBillingPeriod)))) {
@@ -22828,7 +22970,7 @@ var PriceListSelector = function (_a) {
22828
22970
  // Set initial price list and initial quantity in quote preview data
22829
22971
  // Will also set the initial price list and quantity if the billing period is changed
22830
22972
  useEffect(function () {
22831
- var _a, _b, _c;
22973
+ var _a;
22832
22974
  var initialAvailablePriceLists = ((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) {
22833
22975
  return periodMonthsConverter(priceList.periodMonths) === initialBillingPeriod &&
22834
22976
  priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
@@ -22842,15 +22984,16 @@ var PriceListSelector = function (_a) {
22842
22984
  priceList: initialPriceList,
22843
22985
  upgradingSubscription: upgradingSubscription,
22844
22986
  }) &&
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;
22847
- setQuotePreviewData({
22848
- priceList: initialPriceList,
22849
- quantity: calculateNewQuantity(initialPriceList, initialQuantity),
22850
- });
22987
+ !selectedPriceList) {
22988
+ onChangeSelectedPriceList(initialPriceList);
22851
22989
  }
22852
22990
  }, [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 })] }));
22991
+ var onClickPriceListCard = useCallback(function (selectedPriceList) {
22992
+ if (isInPreviewMode)
22993
+ return showInfoNotification('You are in preview mode');
22994
+ return onChangeSelectedPriceList(selectedPriceList);
22995
+ }, [isInPreviewMode, showInfoNotification, onChangeSelectedPriceList]);
22996
+ 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, onClickPriceListCard: onClickPriceListCard })] }));
22854
22997
  };
22855
22998
 
22856
22999
  var PlanPicker = function () {
@@ -22859,7 +23002,6 @@ var PlanPicker = function () {
22859
23002
  var token = useToken();
22860
23003
  var apiHost = useContext(BunnyContext).apiHost;
22861
23004
  var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, upgradingSubscription = _b.upgradingSubscription;
22862
- var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
22863
23005
  // Queries
22864
23006
  var _c = useQuery({
22865
23007
  queryKey: QueryKeyFactory.default.createTableKey({
@@ -22884,7 +23026,7 @@ var PlanPicker = function () {
22884
23026
  },
22885
23027
  enabled: !areSubscriptionsLoading,
22886
23028
  }), priceListChangeOptions = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
22887
- 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 })) }));
23029
+ return (jsx(Fragment, { 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, subscriptions: subscriptions })) }));
22888
23030
  };
22889
23031
 
22890
23032
  var Text$8 = Typography.Text;
@@ -22900,36 +23042,22 @@ var PlanManager = function (_a) {
22900
23042
  // Context
22901
23043
  var token = useToken();
22902
23044
  var apiHost = useContext(BunnyContext).apiHost;
22903
- var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, upgradingSubscription = _b.upgradingSubscription, setUpgradingSubscription = _b.setUpgradingSubscription, subscriptionUpgradeId = _b.subscriptionUpgradeId, className = _b.className;
22904
- var _c = useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
23045
+ var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, className = _b.className;
23046
+ var _c = useContext(QuoteContext), onClearQuote = _c.onClearQuote, selectedPriceList = _c.selectedPriceList;
22905
23047
  // Local state
22906
- var _d = useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
22907
- var _e = useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
22908
- var _f = useState(false), isSticky = _f[0], setIsSticky = _f[1];
23048
+ var _d = useState(false), isSticky = _d[0], setIsSticky = _d[1];
22909
23049
  var stickyRef = useRef(null);
22910
23050
  // Hooks
22911
- var queryClient = useQueryClient();
22912
- var showSuccessNotification = useSuccessNotification();
22913
23051
  var showInfoNotification = useInfoNotification();
22914
- var defaultPaymentMethod = usePaymentMethod({
22915
- token: token,
22916
- apiHost: apiHost,
22917
- }).defaultPaymentMethod;
22918
23052
  // Queries
22919
- var _g = useQuery({
23053
+ var subscriptionsAreLoading = useQuery({
22920
23054
  queryKey: QueryKeyFactory.default.createTableKey({
22921
23055
  pluralType: 'subscriptions',
22922
23056
  token: token,
22923
23057
  }),
22924
23058
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
22925
23059
  enabled: false,
22926
- }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
22927
- useEffect(function () {
22928
- if (subscriptionUpgradeId && !upgradingSubscription) {
22929
- var subscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) { return subscription.id === subscriptionUpgradeId; });
22930
- setUpgradingSubscription(subscription);
22931
- }
22932
- }, [setUpgradingSubscription, subscriptionUpgradeId, subscriptions, upgradingSubscription]);
23060
+ }).isLoading;
22933
23061
  useEffect(function () {
22934
23062
  var observer = new IntersectionObserver(function (_a) {
22935
23063
  var entry = _a[0];
@@ -22949,35 +23077,14 @@ var PlanManager = function (_a) {
22949
23077
  observer.unobserve(el);
22950
23078
  };
22951
23079
  }, []);
22952
- // Handlers
22953
- var onSuccess = function () {
22954
- setEditingQuoteData(undefined);
22955
- queryClient.invalidateQueries({
22956
- queryKey: QueryKeyFactory.default.transactionsKey({ token: token }),
22957
- });
22958
- queryClient.invalidateQueries({
22959
- queryKey: QueryKeyFactory.default.createTableKey({
22960
- pluralType: 'subscriptions',
22961
- token: token,
22962
- }),
22963
- });
22964
- showSuccessNotification('Your plan has been updated', 'Payment successful');
22965
- setPayModalVisible(false);
22966
- };
22967
- var onCancel = function () {
22968
- setPayModalVisible(false);
22969
- };
22970
- var onFail = function (error) {
22971
- handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
22972
- };
22973
23080
  if (subscriptionsAreLoading && !isInPreviewMode)
22974
23081
  return jsx(Fragment, {});
22975
- return (jsx("div", __assign({ className: "".concat(className) }, { children: jsxs(PlanManagerQuoteProvider, __assign({ editingQuoteData: editingQuoteData, setEditingQuoteData: setEditingQuoteData }, { children: [jsx(PreviewModeAdvisary, { isInPreviewMode: isInPreviewMode }), jsx(PageTitle, { onGoBack: function () {
22976
- if (isInPreviewMode)
22977
- return showInfoNotification('You are in preview mode');
22978
- setQuotePreviewData(undefined);
22979
- onChangePlanCancel();
22980
- }, 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(); } }) }))] })) })));
23082
+ return (jsxs("div", __assign({ className: "".concat(className) }, { children: [jsx(PreviewModeAdvisary, { isInPreviewMode: isInPreviewMode }), jsx(PageTitle, { onGoBack: function () {
23083
+ if (isInPreviewMode)
23084
+ return showInfoNotification('You are in preview mode');
23085
+ onClearQuote();
23086
+ onChangePlanCancel();
23087
+ }, title: "Change plan" }), jsx(PlanPicker, {}), 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: selectedPriceList && (jsx(PlanPickerCheckoutBar, { selectedPriceList: selectedPriceList, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } })) }))] })));
22981
23088
  };
22982
23089
 
22983
23090
  var useCancelSubscription = function () {
@@ -22996,25 +23103,6 @@ var useCancelSubscription = function () {
22996
23103
  }); };
22997
23104
  };
22998
23105
 
22999
- var ADDON_INDENTATION = 64;
23000
- function findNonAddonSubscriptions(subscriptions) {
23001
- return subscriptions.filter(function (subscription) {
23002
- return (subscription.priceList.plan.addon === false || subscription.priceList.plan.addon === null) &&
23003
- findParentSubscription(subscription, subscriptions) === undefined;
23004
- });
23005
- }
23006
- function findAddonSubscriptions(parentSubscription, subscriptions) {
23007
- var _a;
23008
- var addonSubscriptionsIds = (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.map(function (addonSubscription) { return addonSubscription.id; });
23009
- return subscriptions.filter(function (subscription) { return addonSubscriptionsIds === null || addonSubscriptionsIds === void 0 ? void 0 : addonSubscriptionsIds.includes(subscription.id); });
23010
- }
23011
- function findParentSubscription(subscription, subscriptions) {
23012
- return subscriptions.find(function (parentSubscription) {
23013
- var _a;
23014
- return (_a = parentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.some(function (addonSubscription) { return addonSubscription.id === subscription.id; });
23015
- });
23016
- }
23017
-
23018
23106
  var AddonIndentation = function (_a) {
23019
23107
  var isLast = _a.isLast, indentation = _a.indentation, verticalMargin = _a.verticalMargin;
23020
23108
  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 } }))] })));
@@ -23152,16 +23240,20 @@ var FeatureBarChart = function (_a) {
23152
23240
  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"])));
23153
23241
  var templateObject_1$2;
23154
23242
 
23155
- var SubscriptionCardActions = function (_a) {
23156
- var _b;
23157
- var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
23243
+ var usePriceListChangeOptions = function (onChangePlanClick) {
23158
23244
  var apiHost = useContext(BunnyContext).apiHost;
23159
23245
  var token = useToken();
23160
- var isPaymentMethodLoading = usePaymentMethod({
23161
- accountId: subscription.accountId,
23162
- token: token,
23163
- apiHost: apiHost,
23164
- }).isLoading;
23246
+ var _a = useQuery({
23247
+ queryKey: QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
23248
+ queryFn: function () { return getPriceListChangeOptions({ apiHost: apiHost, token: token }); },
23249
+ enabled: Boolean(onChangePlanClick),
23250
+ }), priceListChangeOptions = _a.data, arePriceListChangeOptionsLoading = _a.isLoading;
23251
+ return { priceListChangeOptions: priceListChangeOptions, arePriceListChangeOptionsLoading: arePriceListChangeOptionsLoading };
23252
+ };
23253
+
23254
+ var SubscriptionCardActions = function (_a) {
23255
+ var _b;
23256
+ var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription, isPaymentMethodLoading = _a.isPaymentMethodLoading;
23165
23257
  // Derived state
23166
23258
  var isSelfServiceCancelable = subscription.plan.selfServiceCancel;
23167
23259
  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; });
@@ -23209,18 +23301,38 @@ var getSubscriptionStatusText = function (subscription) {
23209
23301
  };
23210
23302
  var SubscriptionCardHeader = function (_a) {
23211
23303
  var _b, _c, _d, _e;
23212
- var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
23304
+ var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscription = _a.subscription;
23305
+ // Context
23213
23306
  var darkMode = useContext(BunnyContext).darkMode;
23214
23307
  var brandColor = useContext(BrandContext).brandColor;
23215
23308
  var subscriptionProductNameStyle = useContext(SubscriptionsContext).subscriptionProductNameStyle;
23216
- var isMobile = useIsMobile();
23217
23309
  // Derived state
23218
23310
  var trialDaysLeft = subscription === null || subscription === void 0 ? void 0 : subscription.daysLeftInTrial;
23219
23311
  var isTrial = isSubscriptionTrial(subscription);
23220
23312
  return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: {
23221
23313
  backgroundColor: darkMode ? 'var(--row-background-dark)' : '',
23222
- } }, { 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 }))] }))] })));
23314
+ } }, { 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)") : ''] }))] }))] })), jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: jsx(SubscriptionStatusAndActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }) }))] })));
23223
23315
  };
23316
+ function SubscriptionStatusAndActions(_a) {
23317
+ var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscription = _a.subscription;
23318
+ // Context
23319
+ var apiHost = useContext(BunnyContext).apiHost;
23320
+ // Hooks
23321
+ var token = useToken();
23322
+ var isMobile = useIsMobile();
23323
+ var _b = usePriceListChangeOptions(onChangePlanClick), priceListChangeOptions = _b.priceListChangeOptions, arePriceListChangeOptionsLoading = _b.arePriceListChangeOptionsLoading;
23324
+ var isPaymentMethodLoading = usePaymentMethod({
23325
+ accountId: subscription.accountId,
23326
+ token: token,
23327
+ apiHost: apiHost,
23328
+ }).isLoading;
23329
+ // Derived state
23330
+ var cardActionsVisible = !isMobile;
23331
+ var showStatusSkeleton = arePriceListChangeOptionsLoading && cardActionsVisible;
23332
+ var showActionsSkeleton = arePriceListChangeOptionsLoading && !priceListChangeOptions;
23333
+ return (jsxs(Fragment, { children: [showStatusSkeleton ? (jsx(Skeleton.Input, { active: true, size: "small", style: { width: 180 } })) : (jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) }))), cardActionsVisible &&
23334
+ (showActionsSkeleton ? (jsx(Skeleton.Button, { active: true, size: "default", style: { width: 100 } })) : (jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription, isPaymentMethodLoading: isPaymentMethodLoading })))] }));
23335
+ }
23224
23336
 
23225
23337
  var SubscriptionChargeTotal = function (_a) {
23226
23338
  var charge = _a.charge, subscription = _a.subscription;
@@ -23360,12 +23472,12 @@ var ADDON_CARD_COLUMNS = [
23360
23472
  ];
23361
23473
  var SubscriptionCardDesktop = function (_a) {
23362
23474
  var _b;
23363
- var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription, isAddon = _a.isAddon;
23475
+ var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscription = _a.subscription, isAddon = _a.isAddon;
23364
23476
  var shadow = useContext(SubscriptionsContext).shadow;
23365
23477
  // Derived state
23366
23478
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
23367
23479
  var CARD_COLUMNS = isAddon ? ADDON_CARD_COLUMNS : NON_ADDON_CARD_COLUMNS;
23368
- 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: {
23480
+ return (jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : '') }, { children: [jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }), jsx(Divider, { className: "bunny-my-4", style: {
23369
23481
  gridColumn: '1 / 5',
23370
23482
  width: 'calc(100% + 32px)',
23371
23483
  transform: 'translateX(-16px)',
@@ -23480,7 +23592,7 @@ var SubscriptionCard = function (_a) {
23480
23592
  };
23481
23593
 
23482
23594
  var SubscriptionsList = function (_a) {
23483
- var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscriptions = _a.subscriptions;
23595
+ var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscriptions = _a.subscriptions;
23484
23596
  var isMobile = useIsMobile();
23485
23597
  var nonAddonSubscriptions = findNonAddonSubscriptions(subscriptions);
23486
23598
  return (jsx(Fragment, { children: nonAddonSubscriptions === null || nonAddonSubscriptions === void 0 ? void 0 : nonAddonSubscriptions.map(function (subscription, subscriptionIndex) {
@@ -23488,26 +23600,46 @@ var SubscriptionsList = function (_a) {
23488
23600
  return null;
23489
23601
  if (isMobile)
23490
23602
  return (jsxs(Fragment, { children: [jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex), jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, hideExpired: hideExpired })] }));
23491
- 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 })] }));
23603
+ return (jsxs(Fragment, { children: [jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }, subscriptionIndex), jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, hideExpired: hideExpired })] }));
23492
23604
  }) }));
23493
23605
  };
23494
23606
 
23495
23607
  var SubscriptionsListContainer = function (_a) {
23496
23608
  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;
23497
23609
  // Context
23498
- var apiHost = useContext(BunnyContext).apiHost;
23499
23610
  var gap = useContext(SubscriptionsContext).gap;
23500
- var token = useToken();
23501
- // Queries
23502
- var _c = useQuery({
23503
- queryKey: QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
23504
- queryFn: function () { return getPriceListChangeOptions({ apiHost: apiHost, token: token }); },
23505
- enabled: Boolean(onChangePlanClick),
23506
- }), priceListChangeOptions = _c.data, arePriceListChangeOptionsLoading = _c.isLoading;
23507
- if (subscriptionsAreLoading ||
23508
- (Boolean(onChangePlanClick) ? arePriceListChangeOptionsLoading : false))
23611
+ if (subscriptionsAreLoading)
23509
23612
  return jsx(Fragment, {});
23510
- 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") }) })))) }));
23613
+ 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, 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") }) })))) }));
23614
+ };
23615
+
23616
+ var HideExpiredToggle = function (_a) {
23617
+ var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired;
23618
+ var isMobile = useIsMobile();
23619
+ var secondaryColor = useContext(BrandContext).secondaryColor;
23620
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 bunny-pl-4" }, { children: [!isMobile && jsx(Divider, { className: "bunny-h-5", type: "vertical" }), jsx(StyledCheckbox, { children: jsx(Checkbox, __assign({ checked: hideExpired, onChange: function (e) { return setHideExpired(e.target.checked); }, style: {
23621
+ color: secondaryColor,
23622
+ } }, { children: isMobile ? 'Hide inactive' : 'Hide inactive subscriptions' })) })] })));
23623
+ };
23624
+ var StyledCheckbox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .ant-checkbox-wrapper span {\n padding-inline-end: 0 !important;\n }\n"], ["\n .ant-checkbox-wrapper span {\n padding-inline-end: 0 !important;\n }\n"])));
23625
+ var templateObject_1;
23626
+
23627
+ var ChangeQuantitiesButton = function (_a) {
23628
+ var setQuantityDrawerOpen = _a.setQuantityDrawerOpen;
23629
+ return (jsx(Button, __assign({ onClick: function () {
23630
+ setQuantityDrawerOpen(true);
23631
+ }, type: "default" }, { children: "Change quantities" })));
23632
+ };
23633
+
23634
+ var SubscriptionsNavigation = function (_a) {
23635
+ var expiredSwitchVisible = _a.expiredSwitchVisible, hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, setQuantityDrawerOpen = _a.setQuantityDrawerOpen, subscriptions = _a.subscriptions;
23636
+ // Hooks
23637
+ var isMobile = useIsMobile();
23638
+ // Derived state
23639
+ var canShowChangeQuantitiesButton = canShowChangeQuantities({
23640
+ subscriptions: subscriptions,
23641
+ });
23642
+ 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, { setQuantityDrawerOpen: setQuantityDrawerOpen })) }))] }));
23511
23643
  };
23512
23644
 
23513
23645
  var Text$3 = Typography.Text;
@@ -23522,13 +23654,12 @@ var formatDateForApi = function (date) {
23522
23654
  return date.format('YYYY-MM-DD');
23523
23655
  };
23524
23656
  var QuantityInput = function (_a) {
23525
- var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, subscriptions = _a.subscriptions;
23657
+ var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, subscriptions = _a.subscriptions, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
23526
23658
  // Context
23527
23659
  var token = useToken();
23528
23660
  var apiHost = useContext(BunnyContext).apiHost;
23529
- var _b = useContext(SubscriptionsContext), updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId;
23530
23661
  // Local state
23531
- var _c = useState(), editedSubscription = _c[0], setEditedSubscription = _c[1];
23662
+ var _b = useState(), editedSubscription = _b[0], setEditedSubscription = _b[1];
23532
23663
  // Hooks
23533
23664
  var queryClient = useQueryClient();
23534
23665
  var createSubscriptionQuote = useCreateSubscriptionQuote();
@@ -23612,7 +23743,8 @@ var QuantityInput = function (_a) {
23612
23743
  return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined && editedSubscription.quantity <= quantity;
23613
23744
  };
23614
23745
  var onChangeQuantity = function (chargeIndex, value, priceListChargeId, subscription, subscriptionIndex) {
23615
- var quantity = isNaN(parseInt(value)) ? 0 : parseInt(value);
23746
+ // Handle empty string - don't convert to 0, keep it as undefined
23747
+ var quantity = value === '' ? undefined : isNaN(parseInt(value)) ? 0 : parseInt(value);
23616
23748
  setEditedSubscription({
23617
23749
  chargeIndex: chargeIndex,
23618
23750
  subscriptionIndex: subscriptionIndex,
@@ -23620,15 +23752,16 @@ var QuantityInput = function (_a) {
23620
23752
  quantity: quantity,
23621
23753
  subscription: subscription,
23622
23754
  });
23623
- if (quantity !== charge.quantity) {
23755
+ if (quantity !== undefined && quantity !== charge.quantity) {
23624
23756
  setUpdatingChargeQuantityId(charge.id);
23625
23757
  }
23626
23758
  else {
23627
23759
  setUpdatingChargeQuantityId(undefined);
23760
+ setEditingQuoteData(undefined);
23628
23761
  }
23629
23762
  };
23630
23763
  var handleSubscriptionUpdate = function (editedSubscription) {
23631
- if (!editedSubscription)
23764
+ if (!editedSubscription || editedSubscription.quantity === undefined)
23632
23765
  return;
23633
23766
  // If we are not editing a quote, we create a new one
23634
23767
  if (!editingQuote) {
@@ -23646,7 +23779,7 @@ var QuantityInput = function (_a) {
23646
23779
  else {
23647
23780
  // If we are editing a quote, we update the quote change
23648
23781
  var _a = createQuoteParams(editingQuote, charge.quantity, editedSubscription), charges = _a.charges, quoteChange = _a.quoteChange;
23649
- if (quoteChange && charges[0].quantity > 0) {
23782
+ if (quoteChange && charges.length > 0 && charges[0].quantity > 0) {
23650
23783
  updateQuote.mutate({
23651
23784
  charges: charges,
23652
23785
  quoteChangeId: quoteChange.id,
@@ -23699,10 +23832,11 @@ var QuantityInput = function (_a) {
23699
23832
  var Text$2 = Typography.Text;
23700
23833
  var QuantityChangeGridRow = function (_a) {
23701
23834
  var _b;
23702
- var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge;
23835
+ var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
23703
23836
  if (!canShowQuantitiesInput(subscriptionCharge, subscription))
23704
23837
  return null;
23705
- 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" })] }));
23838
+ var brandColor = useContext(BrandContext).brandColor;
23839
+ return (jsxs(Fragment, { children: [jsx(Text$2, __assign({ className: "bunny-font-medium bunny-col-span-full", style: { fontSize: '11px', color: brandColor } }, { 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, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsx("div", {})] })), jsx(Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
23706
23840
  };
23707
23841
 
23708
23842
  var QuantityChangeGridTitle = function (_a) {
@@ -23732,7 +23866,7 @@ var QuoteChangeSummarySection = function (_a) {
23732
23866
  var QUANTITY_CHANGE_HEADER_TITLE = 'Update unit quantity';
23733
23867
  var QUANTITY_CHANGE_HEADER_DESCRIPTION = 'Adjust quantities below. The change will take effect immediately after checkout has been completed.';
23734
23868
  var QuantityChangeDrawerDesktop = function (_a) {
23735
- var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions;
23869
+ var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
23736
23870
  var _b = useState(open), openLocal = _b[0], setOpenLocal = _b[1];
23737
23871
  var isMobile = useIsMobile();
23738
23872
  useEffect(function () {
@@ -23777,40 +23911,67 @@ var QuantityChangeDrawerDesktop = function (_a) {
23777
23911
  (!isTrial && charge.trial) ||
23778
23912
  ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'USAGE')
23779
23913
  return null;
23780
- return (jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions }, chargeIndex));
23914
+ return (jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }, chargeIndex));
23781
23915
  }) }), index));
23782
23916
  })] })), jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData })] })));
23783
23917
  };
23784
23918
 
23785
- var HideExpiredToggle = function (_a) {
23786
- var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired;
23787
- var isMobile = useIsMobile();
23788
- var secondaryColor = useContext(BrandContext).secondaryColor;
23789
- return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 bunny-pl-4" }, { children: [!isMobile && jsx(Divider, { className: "bunny-h-5", type: "vertical" }), jsx(StyledCheckbox, { children: jsx(Checkbox, __assign({ checked: hideExpired, onChange: function (e) { return setHideExpired(e.target.checked); }, style: {
23790
- color: secondaryColor,
23791
- } }, { children: isMobile ? 'Hide inactive' : 'Hide inactive subscriptions' })) })] })));
23792
- };
23793
- var StyledCheckbox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .ant-checkbox-wrapper span {\n padding-inline-end: 0 !important;\n }\n"], ["\n .ant-checkbox-wrapper span {\n padding-inline-end: 0 !important;\n }\n"])));
23794
- var templateObject_1;
23795
-
23796
- var ChangeQuantitiesButton = function (_a) {
23797
- var canShowChangeQuantitiesButton = _a.canShowChangeQuantitiesButton, setQuantityDrawerOpen = _a.setQuantityDrawerOpen;
23798
- if (!canShowChangeQuantitiesButton)
23799
- return null;
23800
- return (jsx(Button, __assign({ onClick: function () {
23801
- setQuantityDrawerOpen(true);
23802
- }, type: "default" }, { children: "Change quantities" })));
23803
- };
23804
-
23805
- var SubscriptionsNavigation = function (_a) {
23806
- var expiredSwitchVisible = _a.expiredSwitchVisible, hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, setQuantityDrawerOpen = _a.setQuantityDrawerOpen, subscriptions = _a.subscriptions;
23807
- // Hooks
23808
- var isMobile = useIsMobile();
23809
- // Derived state
23810
- var canShowChangeQuantitiesButton = canShowChangeQuantities({
23811
- subscriptions: subscriptions,
23812
- });
23813
- 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 })) }))] }));
23919
+ var QuantityDrawerContainer = function (_a) {
23920
+ var subscriptions = _a.subscriptions, quantityDrawerOpen = _a.quantityDrawerOpen, setQuantityDrawerOpen = _a.setQuantityDrawerOpen, handlePortalErrors = _a.handlePortalErrors, setHideExpiredState = _a.setHideExpiredState;
23921
+ var apiHost = useContext(BunnyContext).apiHost;
23922
+ var token = useToken();
23923
+ var queryClient = useQueryClient();
23924
+ var showSuccessNotification = useSuccessNotification();
23925
+ // State management
23926
+ var _b = useState(), editingQuoteData = _b[0], setEditingQuoteData = _b[1];
23927
+ var _c = useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
23928
+ var _d = useState(undefined), updatingChargeQuantityId = _d[0], setUpdatingChargeQuantityId = _d[1];
23929
+ // Quote query
23930
+ var quote = useQuery({
23931
+ queryKey: QueryKeyFactory.default.createObjectKey({
23932
+ id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
23933
+ objectName: 'editingQuote',
23934
+ token: token,
23935
+ }),
23936
+ queryFn: function () {
23937
+ return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost }) : undefined;
23938
+ },
23939
+ enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
23940
+ }).data;
23941
+ // Handlers
23942
+ var onSuccess = function () {
23943
+ setQuantityDrawerOpen(false);
23944
+ setEditingQuoteData(undefined);
23945
+ queryClient.invalidateQueries({
23946
+ queryKey: QueryKeyFactory.default.transactionsKey({ token: token }),
23947
+ });
23948
+ queryClient.invalidateQueries({
23949
+ queryKey: QueryKeyFactory.default.createTableKey({
23950
+ pluralType: 'subscriptions',
23951
+ token: token,
23952
+ }),
23953
+ });
23954
+ showSuccessNotification('Your plan has been updated', 'Payment successful');
23955
+ setPayModalVisible(false);
23956
+ setHideExpiredState(true);
23957
+ setUpdatingChargeQuantityId(undefined);
23958
+ };
23959
+ var onCancel = function () {
23960
+ setPayModalVisible(false);
23961
+ };
23962
+ var onFail = function (error) {
23963
+ handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
23964
+ };
23965
+ var handleDrawerClose = function () {
23966
+ if (updatingChargeQuantityId) {
23967
+ setUpdatingChargeQuantityId(undefined);
23968
+ }
23969
+ setQuantityDrawerOpen(false);
23970
+ };
23971
+ var handleOpenCheckout = function () {
23972
+ setPayModalVisible(true);
23973
+ };
23974
+ return (jsxs(Fragment, { children: [jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: handleDrawerClose, open: quantityDrawerOpen, openCheckout: handleOpenCheckout, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: false })] }));
23814
23975
  };
23815
23976
 
23816
23977
  var Text$1 = Typography.Text;
@@ -23826,8 +23987,6 @@ var SubscriptionsWrapper = function (_a) {
23826
23987
  };
23827
23988
  var styles = __assign(__assign({}, defaultStyles), userStyles);
23828
23989
  var _f = useState(undefined), upgradingSubscription = _f[0], setUpgradingSubscription = _f[1];
23829
- var _g = useState(undefined), updatingChargeQuantityId = _g[0], setUpdatingChargeQuantityId = _g[1];
23830
- var _h = useState(null), subscriptionUpgradeId = _h[0], setSubscriptionUpgradeId = _h[1];
23831
23990
  return (jsx(SubscriptionsContext.Provider, __assign({ value: {
23832
23991
  gap: styles.gap,
23833
23992
  shadow: styles.shadow,
@@ -23838,55 +23997,34 @@ var SubscriptionsWrapper = function (_a) {
23838
23997
  hideExpired: hideExpired,
23839
23998
  upgradingSubscription: upgradingSubscription,
23840
23999
  setUpgradingSubscription: setUpgradingSubscription,
23841
- updatingChargeQuantityId: updatingChargeQuantityId,
23842
- setUpdatingChargeQuantityId: setUpdatingChargeQuantityId,
23843
- subscriptionUpgradeId: subscriptionUpgradeId,
23844
- setSubscriptionUpgradeId: setSubscriptionUpgradeId,
23845
- } }, { children: jsx(QuotePreviewProvider, { children: jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) }) })));
24000
+ } }, { children: jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) })));
23846
24001
  };
23847
24002
  var Subscriptions = function (_a) {
23848
24003
  var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, noSubscriptionsComponent = _a.noSubscriptionsComponent, hideTitle = _a.hideTitle, hideExpiredToggle = _a.hideExpiredToggle;
23849
24004
  // Context
23850
24005
  var token = useToken();
23851
24006
  var apiHost = useContext(BunnyContext).apiHost;
23852
- var _b = useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _b.setSubscriptionUpgradeId, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired;
24007
+ var _b = useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired;
23853
24008
  // Local state
23854
- var _c = useState(), editingQuoteData = _c[0], setEditingQuoteData = _c[1];
23855
- var _d = useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
23856
- var _e = useState(true), hideExpiredState = _e[0], setHideExpiredState = _e[1];
24009
+ var _c = useState(true), hideExpiredState = _c[0], setHideExpiredState = _c[1];
24010
+ var _d = useState(false), expiredSwitchVisible = _d[0], setExpiredSwitchVisible = _d[1];
24011
+ var _e = useState(false), isChangingPlan = _e[0], setIsChangingPlan = _e[1];
23857
24012
  var _f = useState(false), quantityDrawerOpen = _f[0], setQuantityDrawerOpen = _f[1];
23858
- var _g = useState(false), expiredSwitchVisible = _g[0], setExpiredSwitchVisible = _g[1];
23859
- var _h = useState(false), isChangingPlan = _h[0], setIsChangingPlan = _h[1];
24013
+ // Derived state
23860
24014
  var hideExpired = hideExpiredOverride !== null && hideExpiredOverride !== void 0 ? hideExpiredOverride : hideExpiredState;
23861
24015
  // Hooks
23862
24016
  var queryClient = useQueryClient();
23863
24017
  var showSuccessNotification = useSuccessNotification();
23864
- var quoteDelete = useQuoteDelete();
23865
24018
  var isMobile = useIsMobile();
23866
- var defaultPaymentMethod = usePaymentMethod({
23867
- token: token,
23868
- apiHost: apiHost,
23869
- }).defaultPaymentMethod;
23870
24019
  var cancelSubscription = useCancelSubscription();
23871
24020
  // Queries
23872
- var quote = useQuery({
23873
- queryKey: QueryKeyFactory.default.createObjectKey({
23874
- id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
23875
- objectName: 'editingQuote',
23876
- token: token,
23877
- }),
23878
- queryFn: function () {
23879
- return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost }) : undefined;
23880
- },
23881
- enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
23882
- }).data;
23883
- var _j = useQuery({
24021
+ var _g = useQuery({
23884
24022
  queryKey: QueryKeyFactory.default.createTableKey({
23885
24023
  pluralType: 'subscriptions',
23886
24024
  token: token,
23887
24025
  }),
23888
24026
  queryFn: function () { return getSubscriptions({ token: token, apiHost: apiHost }); },
23889
- }), subscriptions = _j.data, subscriptionsAreLoading = _j.isLoading;
24027
+ }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
23890
24028
  // Mutations
23891
24029
  var subscriptionCancel = useMutation({
23892
24030
  mutationFn: function (subscription) {
@@ -23905,50 +24043,13 @@ var Subscriptions = function (_a) {
23905
24043
  // Handlers
23906
24044
  var onChangePlanClick = function (subscription) {
23907
24045
  if (subscription) {
23908
- setSubscriptionUpgradeId(subscription.id);
23909
24046
  setUpgradingSubscription(subscription);
23910
24047
  }
23911
- else {
23912
- setSubscriptionUpgradeId(null);
23913
- setUpgradingSubscription(undefined);
23914
- }
23915
24048
  setIsChangingPlan(true);
23916
24049
  };
23917
24050
  var onCancelSubscriptionClick = function (subscription) {
23918
24051
  subscriptionCancel.mutate(subscription);
23919
24052
  };
23920
- var onSuccess = function () {
23921
- setQuantityDrawerOpen(false);
23922
- setEditingQuoteData(undefined);
23923
- queryClient.invalidateQueries({
23924
- queryKey: QueryKeyFactory.default.transactionsKey({ token: token }),
23925
- });
23926
- queryClient.invalidateQueries({
23927
- queryKey: QueryKeyFactory.default.createTableKey({
23928
- pluralType: 'subscriptions',
23929
- token: token,
23930
- }),
23931
- });
23932
- showSuccessNotification('Your plan has been updated', 'Payment successful');
23933
- setPayModalVisible(false);
23934
- setHideExpiredState(true);
23935
- };
23936
- var onCancel = function () {
23937
- setPayModalVisible(false);
23938
- };
23939
- var onFail = function (error) {
23940
- handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error);
23941
- };
23942
- var onClose = function () {
23943
- if (editingQuoteData) {
23944
- quoteDelete(editingQuoteData.id, apiHost, token);
23945
- setEditingQuoteData(undefined);
23946
- }
23947
- if (updatingChargeQuantityId) {
23948
- setUpdatingChargeQuantityId(undefined);
23949
- }
23950
- setQuantityDrawerOpen(false);
23951
- };
23952
24053
  var allSubscriptionsExpired = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.every(function (subscription) {
23953
24054
  var _a, _b;
23954
24055
  return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
@@ -23968,11 +24069,11 @@ var Subscriptions = function (_a) {
23968
24069
  setExpiredSwitchVisible(true);
23969
24070
  }, [hasExpiredOrCanceledSubscriptions, subscriptions]);
23970
24071
  if (isChangingPlan || isInPreviewMode) {
23971
- return (jsx(PlanManager, { onChangePlanCancel: function () {
23972
- setIsChangingPlan(false);
23973
- }, handlePortalErrors: handlePortalErrors }));
24072
+ return (jsx(QuoteProvider, { children: jsx(PlanManager, { onChangePlanCancel: function () {
24073
+ setIsChangingPlan(false);
24074
+ }, handlePortalErrors: handlePortalErrors }) }));
23974
24075
  }
23975
- 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 })] })));
24076
+ 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(QuantityDrawerContainer, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setHideExpiredState: setHideExpiredState })] })));
23976
24077
  };
23977
24078
  var PageHeaderWithActions = function (_a) {
23978
24079
  var children = _a.children, title = _a.title;
@@ -24014,7 +24115,6 @@ var billingDetailsUpdate = function (_a) {
24014
24115
  });
24015
24116
  };
24016
24117
 
24017
- // TODO: move this to common
24018
24118
  var billingDetailsQuery = function () {
24019
24119
  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}";
24020
24120
  };
@@ -24219,9 +24319,6 @@ var PaymentFormSection = function (_a) {
24219
24319
  var onTokenExpired = useContext(BunnyContext).onTokenExpired;
24220
24320
  var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
24221
24321
  var showSuccessNotification = useSuccessNotification();
24222
- var token = useToken();
24223
- var account = useCurrentUserData(token).account;
24224
- var currencyId = account === null || account === void 0 ? void 0 : account.currencyId;
24225
24322
  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) {
24226
24323
  handleAllErrorFormats(error);
24227
24324
  }, onSavePaymentMethod: function (response) {
@@ -24231,7 +24328,7 @@ var PaymentFormSection = function (_a) {
24231
24328
  // TODO: onSavePaymentMethod(response: any) should be cleaned up to have a response type (not any)
24232
24329
  // and work with both stripe and demo pay requests
24233
24330
  onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
24234
- }, currencyId: currencyId }) })));
24331
+ } }) })));
24235
24332
  };
24236
24333
 
24237
24334
  export { BillingDetails, BunnyProvider, Footer, Invoice, MiniCreditCard, PaymentForm, Quote, Quotes, Signup, SubscriptionsWrapper as Subscriptions, Transactions };