@bunnyapp/components 1.0.62 → 1.0.64-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/dist/cjs/index.js +799 -355
  2. package/dist/cjs/src/components/CustomizedAntdComponents/Tag.d.ts +3 -1
  3. package/dist/cjs/src/components/DocumentTemplatePreview.d.ts +4 -0
  4. package/dist/cjs/src/components/Invoice/InvoiceQuoteView.d.ts +2 -1
  5. package/dist/cjs/src/components/PaymentForm/CheckoutFooter.d.ts +7 -2
  6. package/dist/cjs/src/components/PaymentForm/DemoPay/hooks/useApproveHold.d.ts +13 -0
  7. package/dist/cjs/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +1 -1
  8. package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +6 -1
  9. package/dist/cjs/src/components/PaymentForm/Stripe/hooks/useApproveHold.d.ts +13 -0
  10. package/dist/cjs/src/components/PaymentForm/Stripe/stripeUtils.d.ts +9 -2
  11. package/dist/cjs/src/components/Quote/AcceptQuoteModal.d.ts +2 -1
  12. package/dist/cjs/src/components/Quote/PaymentHoldModal.d.ts +7 -0
  13. package/dist/cjs/src/components/Quote/Quote.stories.d.ts +70 -116
  14. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/NextPriceListButton.d.ts +2 -2
  15. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts +1 -1
  16. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +1 -1
  17. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +1 -1
  18. package/dist/cjs/src/components/Subscriptions/SubscriptionsListContainer.d.ts +2 -2
  19. package/dist/cjs/src/components/Subscriptions/TieredDisplayDropdown.d.ts +8 -0
  20. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionChargeTotal.d.ts +1 -1
  21. package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionChargeUnitPrice.d.ts +3 -3
  22. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +1 -1
  23. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionCardMobile/SubscriptionCardMobile.d.ts +1 -1
  24. package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +7 -4
  25. package/dist/cjs/src/enums/BillingPeriodConverter.d.ts +8 -0
  26. package/dist/cjs/src/graphql/queries/getQuoteFirstInvoice.d.ts +7 -0
  27. package/dist/cjs/src/graphql/queries/getTransactions.d.ts +1 -1
  28. package/dist/cjs/src/hooks/quotes/useSendAcceptQuote.d.ts +3 -2
  29. package/dist/cjs/src/hooks/usePlugins.d.ts +1 -1
  30. package/dist/cjs/src/mocks/handlers.d.ts +1 -1
  31. package/dist/cjs/src/styles/AntdOverrides.d.ts +3 -0
  32. package/dist/cjs/src/styles/constants.d.ts +4 -0
  33. package/dist/cjs/src/utils/stringUtils.d.ts +1 -0
  34. package/dist/esm/index.js +802 -359
  35. package/dist/esm/src/components/CustomizedAntdComponents/Tag.d.ts +3 -1
  36. package/dist/esm/src/components/DocumentTemplatePreview.d.ts +4 -0
  37. package/dist/esm/src/components/Invoice/InvoiceQuoteView.d.ts +2 -1
  38. package/dist/esm/src/components/PaymentForm/CheckoutFooter.d.ts +7 -2
  39. package/dist/esm/src/components/PaymentForm/DemoPay/hooks/useApproveHold.d.ts +13 -0
  40. package/dist/esm/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +1 -1
  41. package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +6 -1
  42. package/dist/esm/src/components/PaymentForm/Stripe/hooks/useApproveHold.d.ts +13 -0
  43. package/dist/esm/src/components/PaymentForm/Stripe/stripeUtils.d.ts +9 -2
  44. package/dist/esm/src/components/Quote/AcceptQuoteModal.d.ts +2 -1
  45. package/dist/esm/src/components/Quote/PaymentHoldModal.d.ts +7 -0
  46. package/dist/esm/src/components/Quote/Quote.stories.d.ts +70 -116
  47. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/NextPriceListButton.d.ts +2 -2
  48. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts +1 -1
  49. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +1 -1
  50. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +1 -1
  51. package/dist/esm/src/components/Subscriptions/SubscriptionsListContainer.d.ts +2 -2
  52. package/dist/esm/src/components/Subscriptions/TieredDisplayDropdown.d.ts +8 -0
  53. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionChargeTotal.d.ts +1 -1
  54. package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionChargeUnitPrice.d.ts +3 -3
  55. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +1 -1
  56. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionCardMobile/SubscriptionCardMobile.d.ts +1 -1
  57. package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +7 -4
  58. package/dist/esm/src/enums/BillingPeriodConverter.d.ts +8 -0
  59. package/dist/esm/src/graphql/queries/getQuoteFirstInvoice.d.ts +7 -0
  60. package/dist/esm/src/graphql/queries/getTransactions.d.ts +1 -1
  61. package/dist/esm/src/hooks/quotes/useSendAcceptQuote.d.ts +3 -2
  62. package/dist/esm/src/hooks/usePlugins.d.ts +1 -1
  63. package/dist/esm/src/mocks/handlers.d.ts +1 -1
  64. package/dist/esm/src/styles/AntdOverrides.d.ts +3 -0
  65. package/dist/esm/src/styles/constants.d.ts +4 -0
  66. package/dist/esm/src/utils/stringUtils.d.ts +1 -0
  67. package/dist/index.d.ts +6 -1
  68. package/package.json +3 -2
  69. package/dist/cjs/src/graphql/queries/getPlanChangeOptions.d.ts +0 -8
  70. package/dist/esm/src/graphql/queries/getPlanChangeOptions.d.ts +0 -8
package/dist/esm/index.js CHANGED
@@ -1,16 +1,17 @@
1
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
1
+ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import { createContext, useEffect, useContext, useMemo, useState, useCallback, useRef } from 'react';
3
3
  import { Markup } from 'interweave';
4
- import { ConfigProvider, Button, Tag, Typography, Dropdown, Input, Checkbox, Collapse, Skeleton, Modal, Form, Drawer, Card as Card$1, Image, Divider, Select, Tooltip, Radio, Space, Popconfirm } from 'antd';
4
+ import { ConfigProvider, Spin, Button, Tag, Typography, Dropdown, Input, Checkbox, Skeleton, Collapse, Modal, Form, Tooltip, Drawer, Card as Card$1, Image, Divider, Select, Radio, Space, Popconfirm, Table } from 'antd';
5
5
  import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CheckCircleFilled, CloseOutlined, ArrowLeftOutlined } 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, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory, useIsMobile, isColorTooDark, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, useAllErrorFormats, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useErrorNotification, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, getPlugins, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR, sortSubscriptionCharges, Lists, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, useInfoNotification, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS, SubscriptionChargeKind } from '@bunnyapp/common';
8
- import { QueryClient, QueryClientProvider, useQuery, useQueryClient, keepPreviousData, useMutation } from '@tanstack/react-query';
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, useErrorNotification, invokePlugin, useAllErrorFormats, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, request as request$1, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR as PRIMARY_COLOR$1, sortSubscriptionCharges, Lists, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, useInfoNotification, MODAL_MAX_HEIGHT, DataInterval, QuoteChangeKind, TAG_COLORS } from '@bunnyapp/common';
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';
11
11
  import request, { GraphQLClient } from 'graphql-request';
12
12
  import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
13
13
  import { loadStripe } from '@stripe/stripe-js/pure/index.js';
14
+ import parse from 'html-react-parser';
14
15
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
15
16
  import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
16
17
  import { BarChart, ResponsiveContainer, XAxis, Tooltip as Tooltip$1, Bar, Rectangle } from 'recharts';
@@ -44,7 +45,7 @@ function styleInject(css, ref) {
44
45
  }
45
46
  }
46
47
 
47
- var css_248z = ".ant-popover {\n z-index: 1050;\n}\n.ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n}\n.ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ant-btn-link:disabled {\n color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n background-color: transparent !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n color: #232323 !important;\n font-size: 14px !important;\n word-break: break-all !important;\n overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff6e1c !important;\n font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-menu-submenu::after {\n display: none !important;\n}\n:root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n box-sizing: border-box;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n position: fixed;\n}\n.bunny-absolute {\n position: absolute;\n}\n.bunny-relative {\n position: relative;\n}\n.bunny-sticky {\n position: sticky;\n}\n.bunny-bottom-0 {\n bottom: 0px;\n}\n.bunny-bottom-4 {\n bottom: 1rem;\n}\n.bunny-left-0 {\n left: 0px;\n}\n.bunny-right-0 {\n right: 0px;\n}\n.bunny-top-0 {\n top: 0px;\n}\n.bunny-col-span-full {\n grid-column: 1 / -1;\n}\n.bunny-m-0 {\n margin: 0px;\n}\n.bunny-mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.bunny-mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n margin-top: 6rem;\n margin-bottom: 6rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n margin-top: 6rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-1\\/2 {\n height: 50%;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-h-screen {\n height: 100vh;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-3\\/5 {\n width: 60%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-w-screen {\n width: 100vw;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-items-start {\n align-items: flex-start;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-2 {\n padding: 0.5rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pb-8 {\n padding-bottom: 2rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pr-4 {\n padding-right: 1rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
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-full {\n grid-column: 1 / -1;\n}\n.bunny-m-0 {\n margin: 0px;\n}\n.bunny-mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.bunny-mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n margin-top: 6rem;\n margin-bottom: 6rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n margin-top: 6rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-1\\/2 {\n height: 50%;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-h-screen {\n height: 100vh;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-3\\/5 {\n width: 60%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-w-screen {\n width: 100vw;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-items-start {\n align-items: flex-start;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-2 {\n padding: 0.5rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pb-8 {\n padding-bottom: 2rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pr-4 {\n padding-right: 1rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-0 {\n margin-top: 0px;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.mr-4 {\n margin-right: 1rem;\n}\n.mb-0 {\n margin-bottom: 0px;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.bg-red-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
48
49
  styleInject(css_248z);
49
50
 
50
51
  /******************************************************************************
@@ -142,18 +143,11 @@ var BrandContext = createContext({
142
143
  });
143
144
 
144
145
  // This will be replaced at build time by rollup-plugin-replace
145
- var PACKAGE_VERSION = '1.0.61';
146
+ var PACKAGE_VERSION = '1.0.64-beta.2';
146
147
  var createRequestHeaders = function (token) {
147
- var _a;
148
- var bearerToken = token ? "Bearer ".concat(token) : null;
149
- var headers = (_a = {
150
- 'Content-type': 'application/json; charset=utf-8'
151
- },
152
- _a[X_BUNNY_COMPONENTS_VERSION_HEADER_NAME] = PACKAGE_VERSION,
153
- _a);
154
- if (bearerToken) {
155
- headers['Authorization'] = bearerToken;
156
- }
148
+ var headers = createClientDevHeaders(token);
149
+ // Add the components version header
150
+ headers[X_BUNNY_COMPONENTS_VERSION_HEADER_NAME] = PACKAGE_VERSION;
157
151
  return headers;
158
152
  };
159
153
  var getGraphQLBaseURL = function (apiHost) {
@@ -223,6 +217,14 @@ var createGraphQLClient = function (apiHost, token) {
223
217
  });
224
218
  };
225
219
 
220
+ var BLUE_GRAY_HEX = '#717D94';
221
+ var CHARCOAL_GRAY = '#232323';
222
+ var PRIMARY_COLOR = '#FF5833';
223
+ var SECONDARY_SUCCESS_COLOR = '#00B76A';
224
+
225
+ var AntdOverrides = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n && .ant-popover {\n z-index: 1050;\n }\n && .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n\n gap: 0.5rem;\n max-width: 300px;\n }\n && .ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n }\n && .ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n && .ant-btn-link:disabled {\n color: ", ";\n }\n && .ant-btn-link:disabled:hover {\n background-color: transparent;\n }\n\n && .ant-notification {\n width: min-content;\n }\n && .ant-notification-topRight {\n right: 0;\n left: 0;\n margin-left: auto;\n margin-right: auto;\n }\n && .ant-notification-notice-wrapper {\n width: 350px;\n overflow: hidden;\n }\n && .ant-notification-notice {\n padding: 16px;\n width: 350px;\n\n display: flex;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08),\n 0px 3px 5px rgba(0, 0, 0, 0.16);\n }\n\n && .ant-notification-notice-description {\n padding: 0 14px 0 0;\n color: ", ";\n font-size: 14px;\n overflow-wrap: break-word;\n }\n\n && .ant-notification-notice-success {\n background-color: #edfffa;\n }\n && .ant-notification-notice-error {\n background-color: #fff8f4;\n }\n && .ant-notification-notice-error .ant-notification-notice-message {\n color: ", ";\n font-weight: 500;\n }\n && .ant-notification-notice-error .ant-notification-notice-icon {\n color: ", ";\n }\n\n && .ant-notification-notice-success .ant-notification-notice-message {\n color: ", ";\n font-weight: 500;\n }\n && .ant-notification-notice-success .ant-notification-notice-icon {\n color: ", ";\n }\n\n && .ant-notification-notice-message {\n margin-bottom: 0;\n }\n\n && .ant-notification-notice-close {\n top: 16px;\n right: 16px;\n }\n\n && .ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex;\n align-items: center;\n }\n && .ant-menu-submenu::after {\n display: none;\n }\n"], ["\n && .ant-popover {\n z-index: 1050;\n }\n && .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n\n gap: 0.5rem;\n max-width: 300px;\n }\n && .ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n }\n && .ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n && .ant-btn-link:disabled {\n color: ", ";\n }\n && .ant-btn-link:disabled:hover {\n background-color: transparent;\n }\n\n && .ant-notification {\n width: min-content;\n }\n && .ant-notification-topRight {\n right: 0;\n left: 0;\n margin-left: auto;\n margin-right: auto;\n }\n && .ant-notification-notice-wrapper {\n width: 350px;\n overflow: hidden;\n }\n && .ant-notification-notice {\n padding: 16px;\n width: 350px;\n\n display: flex;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08),\n 0px 3px 5px rgba(0, 0, 0, 0.16);\n }\n\n && .ant-notification-notice-description {\n padding: 0 14px 0 0;\n color: ", ";\n font-size: 14px;\n overflow-wrap: break-word;\n }\n\n && .ant-notification-notice-success {\n background-color: #edfffa;\n }\n && .ant-notification-notice-error {\n background-color: #fff8f4;\n }\n && .ant-notification-notice-error .ant-notification-notice-message {\n color: ", ";\n font-weight: 500;\n }\n && .ant-notification-notice-error .ant-notification-notice-icon {\n color: ", ";\n }\n\n && .ant-notification-notice-success .ant-notification-notice-message {\n color: ", ";\n font-weight: 500;\n }\n && .ant-notification-notice-success .ant-notification-notice-icon {\n color: ", ";\n }\n\n && .ant-notification-notice-message {\n margin-bottom: 0;\n }\n\n && .ant-notification-notice-close {\n top: 16px;\n right: 16px;\n }\n\n && .ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex;\n align-items: center;\n }\n && .ant-menu-submenu::after {\n display: none;\n }\n"])), BLUE_GRAY_HEX, CHARCOAL_GRAY, PRIMARY_COLOR, PRIMARY_COLOR, SECONDARY_SUCCESS_COLOR, SECONDARY_SUCCESS_COLOR);
226
+ var templateObject_1$d;
227
+
226
228
  var BunnyContext = createContext({});
227
229
  var extraQueryClient = new QueryClient();
228
230
  // Every component shares similar props and functionality, which this wrapper handles.
@@ -244,7 +246,7 @@ function BunnyProvider(_a) {
244
246
  apiHost: apiHost,
245
247
  token: token,
246
248
  onTokenExpired: onTokenExpired,
247
- } }, { children: jsx(QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children: jsx("div", __assign({ className: "bunny-component-wrapper" }, { children: children })) })) })) })));
249
+ } }, { children: jsx(QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children: jsx(AntdOverrides, __assign({ className: "bunny-component-wrapper" }, { children: children })) })) })) })));
248
250
  }
249
251
  function ContextualWrapper(_a) {
250
252
  var children = _a.children, darkMode = _a.darkMode, configProviderProps = _a.configProviderProps;
@@ -313,18 +315,15 @@ var useAjax = function (onError) {
313
315
  case 0: return [4 /*yield*/, fetch(url, {
314
316
  method: method,
315
317
  body: bodyData,
316
- headers: {
317
- "Content-type": "application/json; charset=utf-8",
318
- Authorization: "Bearer ".concat(token),
319
- },
318
+ headers: createClientDevHeaders(token),
320
319
  })];
321
320
  case 1:
322
321
  response = _a.sent();
323
322
  if (response.status !== 200 && response.status !== 201) {
324
323
  return [2 /*return*/, response.json().then(function (data) {
325
324
  if (response.status === 401) {
326
- console.error("expired token");
327
- onError === null || onError === void 0 ? void 0 : onError("expired token");
325
+ console.error('expired token');
326
+ onError === null || onError === void 0 ? void 0 : onError('expired token');
328
327
  }
329
328
  else {
330
329
  throw new Error(data === null || data === void 0 ? void 0 : data.message);
@@ -340,7 +339,7 @@ var useAjax = function (onError) {
340
339
  var useDownloadFile = function (id, onError) {
341
340
  var ajax = useAjax(onError);
342
341
  return function (url, token) {
343
- return ajax(url + (id ? "?id=".concat(id) : ""), "GET", function (rsp) { return __awaiter(void 0, void 0, void 0, function () {
342
+ return ajax(url + (id ? "?id=".concat(id) : ''), 'GET', function (rsp) { return __awaiter(void 0, void 0, void 0, function () {
344
343
  var blob, file, contentDisposition, anchor, filenameRegex, matches;
345
344
  return __generator(this, function (_a) {
346
345
  switch (_a.label) {
@@ -348,15 +347,14 @@ var useDownloadFile = function (id, onError) {
348
347
  case 1:
349
348
  blob = _a.sent();
350
349
  file = window.URL.createObjectURL(blob);
351
- contentDisposition = rsp.headers.get("content-disposition");
352
- anchor = document.createElement("a");
350
+ contentDisposition = rsp.headers.get('content-disposition');
351
+ anchor = document.createElement('a');
353
352
  anchor.href = file;
354
- if (contentDisposition &&
355
- contentDisposition.indexOf("attachment") !== -1) {
353
+ if (contentDisposition && contentDisposition.indexOf('attachment') !== -1) {
356
354
  filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
357
355
  matches = filenameRegex.exec(contentDisposition);
358
356
  if (matches != null && matches[1]) {
359
- anchor.setAttribute("download", matches[1].replace(/['"]/g, ""));
357
+ anchor.setAttribute('download', matches[1].replace(/['"]/g, ''));
360
358
  }
361
359
  }
362
360
  anchor.click();
@@ -379,9 +377,59 @@ function useToken() {
379
377
  return overrideToken || tokenFromContext;
380
378
  }
381
379
 
382
- var MarkupContainer = defaultStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
380
+ var DocumentTemplatePreview = function (_a) {
381
+ var targetUrl = _a.targetUrl;
382
+ var _b = useState(null), pdfUrl = _b[0], setPdfUrl = _b[1];
383
+ var queryClient = useQueryClient();
384
+ var queryKey = useMemo(function () { return ['documentTemplatePreview', targetUrl]; }, [targetUrl]);
385
+ // Clear previous data when component mounts or id changes
386
+ useEffect(function () {
387
+ // Remove any existing data for this query
388
+ queryClient.removeQueries({ queryKey: queryKey });
389
+ }, [queryClient, queryKey]);
390
+ var _c = useQuery({
391
+ queryKey: queryKey,
392
+ queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
393
+ var response, blob;
394
+ return __generator(this, function (_a) {
395
+ switch (_a.label) {
396
+ case 0: return [4 /*yield*/, fetch(targetUrl)];
397
+ case 1:
398
+ response = _a.sent();
399
+ if (!response.ok) {
400
+ throw new Error('Failed to fetch PDF');
401
+ }
402
+ return [4 /*yield*/, response.blob()];
403
+ case 2:
404
+ blob = _a.sent();
405
+ return [2 /*return*/, blob];
406
+ }
407
+ });
408
+ }); },
409
+ enabled: !!targetUrl,
410
+ }), data = _c.data, isLoading = _c.isLoading;
411
+ useEffect(function () {
412
+ if (data) {
413
+ var url_1 = URL.createObjectURL(data);
414
+ setPdfUrl(url_1);
415
+ // Cleanup function to revoke the object URL
416
+ return function () {
417
+ URL.revokeObjectURL(url_1);
418
+ };
419
+ }
420
+ }, [data]);
421
+ if (isLoading) {
422
+ return (jsx("div", __assign({ className: "flex items-center justify-center h-96" }, { children: jsx(Spin, {}) })));
423
+ }
424
+ if (!pdfUrl) {
425
+ return jsx(Fragment, {});
426
+ }
427
+ return (jsx("div", __assign({ className: "document-template-preview max-w-[1280px] mx-auto bg-white rounded p-4" }, { children: jsx("iframe", { src: pdfUrl, width: "100%", height: "800px", style: { border: 'none' }, title: "Document Template Preview" }) })));
428
+ };
429
+
430
+ var MarkupContainer = defaultStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
383
431
  var InvoiceQuoteView = function (_a) {
384
- var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError;
432
+ var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError, targetUrl = _a.targetUrl;
385
433
  var downloadFile = useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
386
434
  var secondaryColor = useContext(BrandContext).secondaryColor;
387
435
  var apiHost = useContext(BunnyContext).apiHost;
@@ -393,11 +441,11 @@ var InvoiceQuoteView = function (_a) {
393
441
  color: secondaryColor,
394
442
  }, type: "link" }, { children: backButtonName || 'Back' }))) : null }), !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () {
395
443
  return downloadFile(apiHost + '/api/pdf/invoice/' + formattedInvoice.id, token);
396
- } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [jsx(Markup, { content: html }), children] }))) : (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
444
+ } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] }))) : (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
397
445
  minWidth: '750px',
398
- } }, { children: [jsx(Markup, { content: html }), children] })))] })));
446
+ } }, { children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] })))] })));
399
447
  };
400
- var templateObject_1$b;
448
+ var templateObject_1$c;
401
449
 
402
450
  var fetchPDF = function (apiHost, documentUuid, documentType, token) { return __awaiter(void 0, void 0, void 0, function () {
403
451
  var response;
@@ -408,9 +456,7 @@ var fetchPDF = function (apiHost, documentUuid, documentType, token) { return __
408
456
  throw new Error('Invoice ID is required to fetch PDF');
409
457
  }
410
458
  return [4 /*yield*/, fetch("".concat(apiHost, "/api/legacy_documents/").concat(documentUuid, "?type=").concat(documentType), {
411
- headers: {
412
- Authorization: "Bearer ".concat(token),
413
- },
459
+ headers: createClientDevHeaders(token),
414
460
  })];
415
461
  case 1:
416
462
  response = _a.sent();
@@ -537,7 +583,7 @@ var usePaymentPlugins = function (_a) {
537
583
  };
538
584
 
539
585
  var getQuoteAmountDue = function (quote) {
540
- return quote.amountDue;
586
+ return quote.amountDue || quote.amount;
541
587
  };
542
588
 
543
589
  var MUTATION$8 = "\n mutation checkout(\n $invoiceId: ID,\n $quoteId: ID,\n $paymentMethodId: ID,\n $paymentMethodData: CheckoutPaymentMethodAttributes\n ) {\n checkout(\n invoiceId: $invoiceId,\n quoteId: $quoteId,\n paymentMethodId: $paymentMethodId,\n paymentMethodData: $paymentMethodData\n ) {\n invoice {\n id\n state\n amount\n amountDue\n }\n payment {\n id\n state\n amount\n }\n paymentApplication {\n id\n invoiceId\n paymentId\n }\n transaction {\n id\n amount\n }\n }\n }\n";
@@ -622,6 +668,212 @@ function usePay$1(_a) {
622
668
  return { pay: pay };
623
669
  }
624
670
 
671
+ var createPaymentMethod = function (_a) {
672
+ var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
673
+ return __awaiter(void 0, void 0, void 0, function () {
674
+ var response;
675
+ return __generator(this, function (_b) {
676
+ switch (_b.label) {
677
+ case 0: return [4 /*yield*/, invokePlugin({
678
+ plugin: plugin,
679
+ method: 'store_payment_method',
680
+ payload: {
681
+ payment_method_id: paymentMethodId,
682
+ account_id: accountId,
683
+ },
684
+ token: token,
685
+ apiHost: apiHost,
686
+ })];
687
+ case 1:
688
+ response = _b.sent();
689
+ if (response.status !== 'success')
690
+ throw new Error(response.message || 'Unknown error');
691
+ return [2 /*return*/, response];
692
+ }
693
+ });
694
+ });
695
+ };
696
+ var createSetupIntent = function (plugin, apiHost, token, accountId) {
697
+ return invokePlugin({
698
+ plugin: plugin,
699
+ method: 'create_setup_intent',
700
+ token: token,
701
+ apiHost: apiHost,
702
+ payload: {
703
+ account_id: accountId,
704
+ },
705
+ });
706
+ };
707
+ var createPaymentHold = function (_a) {
708
+ var quote = _a.quote, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, paymentMethodId = _a.paymentMethodId;
709
+ return __awaiter(void 0, void 0, void 0, function () {
710
+ var payload, response;
711
+ return __generator(this, function (_b) {
712
+ switch (_b.label) {
713
+ case 0:
714
+ payload = {
715
+ quote_id: quote.id,
716
+ amount: quote.amount,
717
+ payment_method_id: paymentMethodId,
718
+ };
719
+ return [4 /*yield*/, invokePlugin({
720
+ plugin: plugin,
721
+ method: 'create_payment_hold',
722
+ payload: payload,
723
+ token: token,
724
+ apiHost: apiHost,
725
+ })];
726
+ case 1:
727
+ response = _b.sent();
728
+ if (response.status !== 'success')
729
+ throw new Error(response.message || 'Unknown error');
730
+ return [2 /*return*/, response];
731
+ }
732
+ });
733
+ });
734
+ };
735
+ var fetchStripeKey = function (plugin, apiHost, token, accountId) { return __awaiter(void 0, void 0, void 0, function () {
736
+ var response;
737
+ return __generator(this, function (_a) {
738
+ switch (_a.label) {
739
+ case 0: return [4 /*yield*/, invokePlugin({
740
+ plugin: plugin,
741
+ method: 'retrieve_config',
742
+ token: token,
743
+ apiHost: apiHost,
744
+ payload: {
745
+ account_id: accountId,
746
+ },
747
+ })];
748
+ case 1:
749
+ response = _a.sent();
750
+ return [2 /*return*/, response];
751
+ }
752
+ });
753
+ }); };
754
+ loadStripe.setLoadParameters({ advancedFraudSignals: false });
755
+ var useStripePlugin = function (plugin, apiHost, currencyId, token, accountId) {
756
+ var _a = useState(null), stripe = _a[0], setStripe = _a[1];
757
+ var showErrorNotification = useErrorNotification();
758
+ var options = {
759
+ mode: 'setup',
760
+ currency: currencyId,
761
+ setupFutureUsage: 'off_session',
762
+ };
763
+ useEffect(function () {
764
+ var _a, _b;
765
+ if (!plugin)
766
+ return;
767
+ if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== 'StripePayment')
768
+ return;
769
+ fetchStripeKey(plugin, apiHost || '', token, accountId)
770
+ .then(function (_a) {
771
+ var payload = _a.payload;
772
+ return loadStripe(payload.publishable_key).then(setStripe);
773
+ })
774
+ .catch(function (error) {
775
+ console.error('Caught Error in fetching stripe key: ', error);
776
+ showErrorNotification(error.message, 'Unexpected Error fetching key');
777
+ });
778
+ // eslint-disable-next-line
779
+ }, [plugin, token]);
780
+ return { stripe: stripe, options: options };
781
+ };
782
+
783
+ function useApproveHold$1(_a) {
784
+ var _this = this;
785
+ var onApproveHoldSuccess = _a.onApproveHoldSuccess, onApproveHoldError = _a.onApproveHoldError;
786
+ // Hooks
787
+ var _b = useState(false), isSaving = _b[0], setIsSaving = _b[1];
788
+ var apiHost = useContext(BunnyContext).apiHost;
789
+ var token = useToken();
790
+ var approveHold = function (_a) {
791
+ var plugin = _a.plugin, quote = _a.quote, paymentMethodId = _a.paymentMethodId;
792
+ return __awaiter(_this, void 0, void 0, function () {
793
+ var response, error_1;
794
+ return __generator(this, function (_b) {
795
+ switch (_b.label) {
796
+ case 0:
797
+ _b.trys.push([0, 2, 3, 4]);
798
+ if (!token)
799
+ throw new Error("Token couldn't be retrieved");
800
+ setIsSaving(true);
801
+ return [4 /*yield*/, createPaymentHold({
802
+ quote: quote,
803
+ plugin: plugin,
804
+ token: token,
805
+ apiHost: apiHost,
806
+ paymentMethodId: paymentMethodId,
807
+ })];
808
+ case 1:
809
+ response = _b.sent();
810
+ if (response.status !== 'success')
811
+ throw new Error(response === null || response === void 0 ? void 0 : response.message);
812
+ onApproveHoldSuccess === null || onApproveHoldSuccess === void 0 ? void 0 : onApproveHoldSuccess(response);
813
+ return [3 /*break*/, 4];
814
+ case 2:
815
+ error_1 = _b.sent();
816
+ console.error(error_1);
817
+ onApproveHoldError === null || onApproveHoldError === void 0 ? void 0 : onApproveHoldError(error_1);
818
+ return [3 /*break*/, 4];
819
+ case 3:
820
+ setIsSaving(false);
821
+ return [7 /*endfinally*/];
822
+ case 4: return [2 /*return*/];
823
+ }
824
+ });
825
+ });
826
+ };
827
+ return { approveHold: approveHold, isSaving: isSaving };
828
+ }
829
+
830
+ function useApproveHold(_a) {
831
+ var _this = this;
832
+ var onApproveHoldSuccess = _a.onApproveHoldSuccess, onApproveHoldError = _a.onApproveHoldError;
833
+ // Hooks
834
+ var _b = useState(false), isSaving = _b[0], setIsSaving = _b[1];
835
+ var apiHost = useContext(BunnyContext).apiHost;
836
+ var token = useToken();
837
+ var approveHold = function (_a) {
838
+ var plugin = _a.plugin, quote = _a.quote, paymentMethodId = _a.paymentMethodId;
839
+ return __awaiter(_this, void 0, void 0, function () {
840
+ var response, error_1;
841
+ return __generator(this, function (_b) {
842
+ switch (_b.label) {
843
+ case 0:
844
+ _b.trys.push([0, 2, 3, 4]);
845
+ if (!token)
846
+ throw new Error("Token couldn't be retrieved");
847
+ setIsSaving(true);
848
+ return [4 /*yield*/, createPaymentHold({
849
+ quote: quote,
850
+ plugin: plugin,
851
+ token: token,
852
+ apiHost: apiHost,
853
+ paymentMethodId: paymentMethodId,
854
+ })];
855
+ case 1:
856
+ response = _b.sent();
857
+ if (response.status !== 'success')
858
+ throw new Error(response === null || response === void 0 ? void 0 : response.message);
859
+ onApproveHoldSuccess === null || onApproveHoldSuccess === void 0 ? void 0 : onApproveHoldSuccess(response);
860
+ return [3 /*break*/, 4];
861
+ case 2:
862
+ error_1 = _b.sent();
863
+ console.error(error_1);
864
+ onApproveHoldError === null || onApproveHoldError === void 0 ? void 0 : onApproveHoldError(error_1);
865
+ return [3 /*break*/, 4];
866
+ case 3:
867
+ setIsSaving(false);
868
+ return [7 /*endfinally*/];
869
+ case 4: return [2 /*return*/];
870
+ }
871
+ });
872
+ });
873
+ };
874
+ return { approveHold: approveHold, isSaving: isSaving };
875
+ }
876
+
625
877
  function usePay(_a) {
626
878
  var _this = this;
627
879
  var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice, storedPaymentMethod = _a.storedPaymentMethod, plugin = _a.plugin;
@@ -665,8 +917,9 @@ function usePay(_a) {
665
917
  }
666
918
 
667
919
  var handleAllErrorFormats = useAllErrorFormats();
920
+ var showErrorNotification$2 = useErrorNotification();
668
921
  var ActualCheckoutFooter = function (_a) {
669
- var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess; _a.noPadding; var plugin = _a.plugin;
922
+ var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, noPadding = _a.noPadding, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
670
923
  var isMobile = useIsMobile();
671
924
  var _b = useState(false), isPaying = _b[0], setIsPaying = _b[1];
672
925
  var defaultPaymentMethod = useContext(PaymentContext).defaultPaymentMethod;
@@ -695,6 +948,70 @@ var ActualCheckoutFooter = function (_a) {
695
948
  storedPaymentMethod: defaultPaymentMethod,
696
949
  plugin: plugin,
697
950
  }).pay;
951
+ // Approve hold hooks
952
+ var approveHoldStripe = useApproveHold$1({
953
+ onApproveHoldSuccess: function (response) {
954
+ onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
955
+ },
956
+ onApproveHoldError: function (error) {
957
+ setIsPaying(false);
958
+ handleAllErrorFormats(error);
959
+ },
960
+ }).approveHold;
961
+ var approveHoldDemoPay = useApproveHold({
962
+ onApproveHoldSuccess: function (response) {
963
+ onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
964
+ },
965
+ onApproveHoldError: function (error) {
966
+ setIsPaying(false);
967
+ handleAllErrorFormats(error);
968
+ },
969
+ }).approveHold;
970
+ var handleApproveHold = function () { return __awaiter(void 0, void 0, void 0, function () {
971
+ var _a;
972
+ var _b, _c, _d, _e;
973
+ return __generator(this, function (_f) {
974
+ switch (_f.label) {
975
+ case 0:
976
+ if (!plugin)
977
+ return [2 /*return*/, console.error('plugin is undefined')];
978
+ if (!quote)
979
+ return [2 /*return*/, console.error('quote is undefined')];
980
+ if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id))
981
+ return [2 /*return*/, console.error('defaultPaymentMethod is undefined')];
982
+ _a = (_c = (_b = plugin.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name;
983
+ switch (_a) {
984
+ case 'StripePayment': return [3 /*break*/, 1];
985
+ case 'DemoPayPayment': return [3 /*break*/, 3];
986
+ }
987
+ return [3 /*break*/, 5];
988
+ case 1:
989
+ setIsPaying(true);
990
+ return [4 /*yield*/, approveHoldStripe({
991
+ plugin: plugin,
992
+ quote: quote,
993
+ paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
994
+ })];
995
+ case 2:
996
+ _f.sent();
997
+ return [3 /*break*/, 6];
998
+ case 3:
999
+ setIsPaying(true);
1000
+ return [4 /*yield*/, approveHoldDemoPay({
1001
+ plugin: plugin,
1002
+ quote: quote,
1003
+ paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
1004
+ })];
1005
+ case 4:
1006
+ _f.sent();
1007
+ return [3 /*break*/, 6];
1008
+ case 5:
1009
+ showErrorNotification$2("Payment holds are not supported by ".concat((_e = (_d = plugin.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name));
1010
+ return [3 /*break*/, 6];
1011
+ case 6: return [2 /*return*/];
1012
+ }
1013
+ });
1014
+ }); };
698
1015
  var handlePaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
699
1016
  var _a;
700
1017
  var _b, _c;
@@ -723,16 +1040,21 @@ var ActualCheckoutFooter = function (_a) {
723
1040
  }
724
1041
  });
725
1042
  }); };
1043
+ if (paymentHoldOptions === null || paymentHoldOptions === void 0 ? void 0 : paymentHoldOptions.payToAccept) {
1044
+ return (jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? '' : '') }, { children: jsx(Button, __assign({ className: "w-full", disabled: isPaying, onClick: function () {
1045
+ handleApproveHold();
1046
+ }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Approving hold for' : 'Approve hold for', " ").concat(amountDue && currencyId ? formatCurrency(amountDue, currencyId) : '') })) })));
1047
+ }
726
1048
  return (jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-gap-2" }, { children: jsx(Button, __assign({ className: "bunny-w-full", disabled: isPaying, onClick: function () {
727
1049
  setIsPaying(true);
728
1050
  handlePaymentSubmit();
729
1051
  }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Paying' : 'Pay', " ").concat(amountDue && currencyId ? formatCurrency(amountDue, currencyId) : '') })) })));
730
1052
  };
731
1053
  var CheckoutFooter = function (_a) {
732
- var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, noPadding = _a.noPadding, plugin = _a.plugin;
1054
+ var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, noPadding = _a.noPadding, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
733
1055
  if (!plugin)
734
1056
  return null;
735
- return (jsx(ActualCheckoutFooter, { plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, noPadding: noPadding }));
1057
+ return (jsx(ActualCheckoutFooter, { paymentHoldOptions: paymentHoldOptions, plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, noPadding: noPadding }));
736
1058
  };
737
1059
 
738
1060
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -17979,31 +18301,31 @@ var Card = function (_a) {
17979
18301
  };
17980
18302
 
17981
18303
  var tagStyleMap = {
17982
- blue: { color: "var(--bunny-blue-500)", background: "var(--bunny-blue-200)" },
18304
+ blue: { color: 'var(--bunny-blue-500)', background: 'var(--bunny-blue-200)' },
17983
18305
  green: {
17984
- color: "var(--bunny-green-600)",
17985
- background: "var(--bunny-green-200)",
18306
+ color: 'var(--bunny-green-600)',
18307
+ background: 'var(--bunny-green-200)',
17986
18308
  },
17987
- red: { color: "var(--bunny-red-500)", background: "var(--bunny-red-200)" },
18309
+ red: { color: 'var(--bunny-red-500)', background: 'var(--bunny-red-200)' },
17988
18310
  orange: {
17989
- color: "var(--bunny-orange-500)",
17990
- background: "var(--bunny-orange-200)",
18311
+ color: 'var(--bunny-orange-500)',
18312
+ background: 'var(--bunny-orange-200)',
17991
18313
  },
17992
18314
  yellow: {
17993
- color: "var(--bunny-yellow-500)",
17994
- background: "var(--bunny-yellow-200)",
18315
+ color: 'var(--bunny-yellow-500)',
18316
+ background: 'var(--bunny-yellow-200)',
17995
18317
  },
17996
18318
  purple: {
17997
- color: "var(--bunny-purple-500)",
17998
- background: "var(--bunny-purple-200)",
18319
+ color: 'var(--bunny-purple-500)',
18320
+ background: 'var(--bunny-purple-200)',
17999
18321
  },
18000
- black: { color: "white", background: "var(--bunny-black)" },
18322
+ black: { color: 'white', background: 'var(--bunny-black)' },
18001
18323
  };
18002
18324
  // This component provides custom styling for antd Tag components without using antd overwrites.
18003
18325
  // Please use this component instead of the antd Tag component directly to maintain consistent styling.
18004
18326
  var CustomizedTag = function (_a) {
18005
- var children = _a.children, color = _a.color, className = _a.className;
18006
- return (jsx(Tag, __assign({ color: color, style: color ? tagStyleMap[color] : undefined, className: "bunny-m-0 bunny-font-medium bunny-rounded-full bunny-border-none bunny-whitespace-nowrap ".concat(className) }, { children: children })));
18327
+ var children = _a.children, color = _a.color, className = _a.className, style = _a.style;
18328
+ return (jsx(Tag, __assign({ color: color, style: __assign(__assign({}, (color ? tagStyleMap[color] : undefined)), style), className: "bunny-m-0 bunny-font-medium bunny-rounded-full bunny-border-none bunny-whitespace-nowrap ".concat(className) }, { children: children })));
18007
18329
  };
18008
18330
 
18009
18331
  var Amex = function (_a) {
@@ -18056,7 +18378,7 @@ var Visa = function (_a) {
18056
18378
  return (jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.2505 32.5165H17.0099L13.8299 20.3847C13.679 19.8267 13.3585 19.3333 12.8871 19.1008C11.7106 18.5165 10.4142 18.0514 9 17.8169V17.3498H15.8313C16.7742 17.3498 17.4813 18.0514 17.5991 18.8663L19.2491 27.6173L23.4877 17.3498H27.6104L21.2505 32.5165ZM29.9675 32.5165H25.9626L29.2604 17.3498H33.2653L29.9675 32.5165ZM38.4467 21.5514C38.5646 20.7346 39.2717 20.2675 40.0967 20.2675C41.3931 20.1502 42.8052 20.3848 43.9838 20.9671L44.6909 17.7016C43.5123 17.2345 42.216 17 41.0395 17C37.1524 17 34.3239 19.1008 34.3239 22.0165C34.3239 24.2346 36.3274 25.3992 37.7417 26.1008C39.2717 26.8004 39.861 27.2675 39.7431 27.9671C39.7431 29.0165 38.5646 29.4836 37.3881 29.4836C35.9739 29.4836 34.5596 29.1338 33.2653 28.5494L32.5582 31.8169C33.9724 32.3992 35.5025 32.6338 36.9167 32.6338C41.2752 32.749 43.9838 30.6502 43.9838 27.5C43.9838 23.5329 38.4467 23.3004 38.4467 21.5514ZM58 32.5165L54.82 17.3498H51.4044C50.6972 17.3498 49.9901 17.8169 49.7544 18.5165L43.8659 32.5165H47.9887L48.8116 30.3004H53.8772L54.3486 32.5165H58ZM51.9936 21.4342L53.1701 27.1502H49.8723L51.9936 21.4342Z", fill: "#172B85" })] })));
18057
18379
  };
18058
18380
 
18059
- var Text$r = Typography.Text;
18381
+ var Text$q = Typography.Text;
18060
18382
  var MiniCreditCard = function (_a) {
18061
18383
  var className = _a.className, buttons = _a.buttons, _b = _a.hideDropdownMenu, hideDropdownMenu = _b === void 0 ? false : _b, _c = _a.hideDefaultTag, hideDefaultTag = _c === void 0 ? false : _c, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData, onClickSetDefault = _a.onClickSetDefault, id = _a.id;
18062
18384
  var darkMode = useContext(BunnyContext).darkMode;
@@ -18067,7 +18389,7 @@ var MiniCreditCard = function (_a) {
18067
18389
  return darkMode ? 'var(--row-background-alternate)' : 'bg-slate-50';
18068
18390
  }, [darkMode]);
18069
18391
  var isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
18070
- return (jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxs(Fragment, { children: [jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Issuer, { paymentMethodData: paymentMethodData }), jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsx("div", { children: isDefault ? (jsx(Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsx(Fragment, { children: !hideDropdownMenu && (jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsx(CreditCardOutlined, {}), jsx(Text$r, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsx(Button, { disabled: true, type: "link" }), buttons] }))) })));
18392
+ return (jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxs(Fragment, { children: [jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Issuer, { paymentMethodData: paymentMethodData }), jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsx("div", { children: isDefault ? (jsx(Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsx(Fragment, { children: !hideDropdownMenu && (jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsx(CreditCardOutlined, {}), jsx(Text$q, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsx(Button, { disabled: true, type: "link" }), buttons] }))) })));
18071
18393
  };
18072
18394
  var Identifier = function (_a) {
18073
18395
  var _b, _c, _d;
@@ -18076,9 +18398,9 @@ var Identifier = function (_a) {
18076
18398
  return null;
18077
18399
  }
18078
18400
  if (((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.type) === 'cashapp') {
18079
- return jsx(Text$r, { children: "Cashapp" });
18401
+ return jsx(Text$q, { children: "Cashapp" });
18080
18402
  }
18081
- return (jsxs("div", { children: [jsx(Text$r, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsx(Text$r, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
18403
+ return (jsxs("div", { children: [jsx(Text$q, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsx(Text$q, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
18082
18404
  };
18083
18405
  var Issuer = function (_a) {
18084
18406
  var _b;
@@ -18087,7 +18409,7 @@ var Issuer = function (_a) {
18087
18409
  var issuer = (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer;
18088
18410
  if (issuer.length == 0 || list.includes(issuer.toLowerCase()))
18089
18411
  return null;
18090
- return jsx(Text$r, { children: lodashExports.capitalize(issuer) });
18412
+ return jsx(Text$q, { children: lodashExports.capitalize(issuer) });
18091
18413
  };
18092
18414
  var DropdownMenu = function (_a) {
18093
18415
  var setDefault = _a.setDefault, remove = _a.remove, isDefault = _a.isDefault, id = _a.id;
@@ -18378,7 +18700,7 @@ function useSave$1(_a) {
18378
18700
  return { save: save, isSaving: isSaving };
18379
18701
  }
18380
18702
 
18381
- var Text$q = Typography.Text;
18703
+ var Text$p = Typography.Text;
18382
18704
  var TEST_CARD = '4242424242424242';
18383
18705
  var DemoPayForm = function (_a) {
18384
18706
  var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -18440,100 +18762,16 @@ var DemoPayForm = function (_a) {
18440
18762
  var onCardCvcChange = function (cvc) {
18441
18763
  setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
18442
18764
  };
18443
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsx(Text$q, { children: "DemoPay is for testing only." }), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
18765
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsx(Text$p, { children: "DemoPay is for testing only." }), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
18444
18766
  };
18445
- var StyledInputs = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"], ["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"])), function (_a) {
18767
+ var StyledInputs = defaultStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"], ["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"])), function (_a) {
18446
18768
  var darkMode = _a.darkMode;
18447
18769
  return darkMode ? 'var(--row-background-dark)' : 'white';
18448
18770
  }, function (_a) {
18449
18771
  var darkMode = _a.darkMode;
18450
18772
  return darkMode ? GRAY_500 : GRAY_200;
18451
18773
  });
18452
- var templateObject_1$a;
18453
-
18454
- var createPaymentMethod = function (_a) {
18455
- var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
18456
- return __awaiter(void 0, void 0, void 0, function () {
18457
- var response;
18458
- return __generator(this, function (_b) {
18459
- switch (_b.label) {
18460
- case 0: return [4 /*yield*/, invokePlugin({
18461
- plugin: plugin,
18462
- method: "store_payment_method",
18463
- payload: {
18464
- payment_method_id: paymentMethodId,
18465
- account_id: accountId,
18466
- },
18467
- token: token,
18468
- apiHost: apiHost,
18469
- })];
18470
- case 1:
18471
- response = _b.sent();
18472
- if (response.status !== "success")
18473
- throw new Error(response.message || "Unknown error");
18474
- return [2 /*return*/, response];
18475
- }
18476
- });
18477
- });
18478
- };
18479
- var createSetupIntent = function (plugin, apiHost, token, accountId) {
18480
- return invokePlugin({
18481
- plugin: plugin,
18482
- method: "create_setup_intent",
18483
- token: token,
18484
- apiHost: apiHost,
18485
- payload: {
18486
- account_id: accountId,
18487
- },
18488
- });
18489
- };
18490
- var fetchStripeKey = function (plugin, apiHost, token, accountId) { return __awaiter(void 0, void 0, void 0, function () {
18491
- var response;
18492
- return __generator(this, function (_a) {
18493
- switch (_a.label) {
18494
- case 0: return [4 /*yield*/, invokePlugin({
18495
- plugin: plugin,
18496
- method: "retrieve_config",
18497
- token: token,
18498
- apiHost: apiHost,
18499
- payload: {
18500
- account_id: accountId,
18501
- },
18502
- })];
18503
- case 1:
18504
- response = _a.sent();
18505
- return [2 /*return*/, response];
18506
- }
18507
- });
18508
- }); };
18509
- loadStripe.setLoadParameters({ advancedFraudSignals: false });
18510
- var useStripePlugin = function (plugin, apiHost, currencyId, token, accountId) {
18511
- var _a = useState(null), stripe = _a[0], setStripe = _a[1];
18512
- var showErrorNotification = useErrorNotification();
18513
- var options = {
18514
- mode: "setup",
18515
- currency: currencyId,
18516
- setupFutureUsage: "off_session",
18517
- };
18518
- useEffect(function () {
18519
- var _a, _b;
18520
- if (!plugin)
18521
- return;
18522
- if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== "StripePayment")
18523
- return;
18524
- fetchStripeKey(plugin, apiHost || "", token, accountId)
18525
- .then(function (_a) {
18526
- var payload = _a.payload;
18527
- return loadStripe(payload.publishable_key).then(setStripe);
18528
- })
18529
- .catch(function (error) {
18530
- console.error("Caught Error in fetching stripe key: ", error);
18531
- showErrorNotification(error.message, "Unexpected Error fetching key");
18532
- });
18533
- // eslint-disable-next-line
18534
- }, [plugin, token]);
18535
- return { stripe: stripe, options: options };
18536
- };
18774
+ var templateObject_1$b;
18537
18775
 
18538
18776
  function useSave(_a) {
18539
18777
  var _this = this;
@@ -18676,7 +18914,7 @@ var CardIcon = function (_a) {
18676
18914
  return (jsxs("svg", __assign({ className: className, width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1.5 7.5H16.5", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
18677
18915
  };
18678
18916
 
18679
- var Text$p = Typography.Text;
18917
+ var Text$o = Typography.Text;
18680
18918
  var PaymentMethodSelector = function (_a) {
18681
18919
  var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
18682
18920
  return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
@@ -18689,9 +18927,9 @@ var PaymentOption = function (_a) {
18689
18927
  var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
18690
18928
  return (jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ".concat(darkMode
18691
18929
  ? "var(--row-background-dark) border-gray-500"
18692
- : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$p, { children: name })] })), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] })));
18930
+ : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$o, { children: name })] })), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] })));
18693
18931
  };
18694
- var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"], ["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"])), function (_a) {
18932
+ var PaymentOptionContainer = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"], ["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"])), function (_a) {
18695
18933
  var $brandColor = _a.$brandColor, $selected = _a.$selected;
18696
18934
  return $selected &&
18697
18935
  "\n border-color: ".concat($brandColor, ";\n ");
@@ -18699,7 +18937,7 @@ var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateOb
18699
18937
  var $brandColor = _a.$brandColor;
18700
18938
  return $brandColor;
18701
18939
  });
18702
- var templateObject_1$9;
18940
+ var templateObject_1$a;
18703
18941
 
18704
18942
  function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRemovePaymentMethod, onError) {
18705
18943
  var _this = this;
@@ -18807,11 +19045,10 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
18807
19045
  return { setDefaultPaymentMethod: setDefaultPaymentMethod, loading: loading };
18808
19046
  }
18809
19047
 
18810
- var Panel = Collapse.Panel;
18811
19048
  var showErrorNotification$1 = useErrorNotification();
18812
19049
  var PaymentForm = function (_a) {
18813
19050
  var _b;
18814
- var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId;
19051
+ 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;
18815
19052
  // Local state
18816
19053
  var _c = useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
18817
19054
  // Simple hooks
@@ -18890,7 +19127,14 @@ var PaymentForm = function (_a) {
18890
19127
  storedPaymentMethods: storedPaymentMethods,
18891
19128
  defaultPaymentMethod: defaultPaymentMethod,
18892
19129
  customCheckoutFunction: customCheckoutFunction,
18893
- } }, { children: jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsx(Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsx(Panel, __assign({ header: jsx(Fragment, { children: !showPaymentMethodForm ? (jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsx(Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null }), showArrow: false }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] })) }), "1") })), paying && !selectedPaymentPluginIsManualPayment ? (jsx(Fragment, { children: defaultPaymentMethod ? (jsx("div", __assign({ className: "bunny-px-4" }, { children: jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethodPlugin }) }))) : null })) : null] }) })) })) })));
19130
+ } }, { children: jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsx(Collapse, { bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyOnHidden: true, items: [
19131
+ {
19132
+ key: '1',
19133
+ showArrow: false,
19134
+ label: !showPaymentMethodForm ? (jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsx(Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null,
19135
+ children: (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] }))),
19136
+ },
19137
+ ] }), paying && !selectedPaymentPluginIsManualPayment ? (jsx(Fragment, { children: defaultPaymentMethod && selectedPaymentMethodPlugin ? (jsx("div", __assign({ className: "bunny-px-4" }, { children: jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, plugin: selectedPaymentMethodPlugin, paymentHoldOptions: paymentHoldOptions }) }))) : null })) : null] }) })) })) })));
18894
19138
  };
18895
19139
  function StripeWrapper(_a) {
18896
19140
  var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
@@ -18958,7 +19202,7 @@ function ActualInvoice() {
18958
19202
  return (jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 bunny-overflow-hidden ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
18959
19203
  }
18960
19204
 
18961
- var MUTATION$7 = function (id) { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n object { documents { id filename size date url } }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"; };
19205
+ var MUTATION$7 = function (id) { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n quote {\n documentTemplateId\n documents { id filename size date url }\n firstInvoice {\n id\n state\n }\n payableId\n id\n payToAccept\n currentPaymentHold {\n createdAt\n expiresAt\n id\n updatedAt\n paymentMethod {\n accountId\n createdAt\n expirationDate\n failureCode\n id\n isDefault\n lastSuccess\n paymentType\n pluginId\n state\n updatedAt\n metadata {\n description\n expiration\n icon\n identifier\n issuer\n kind\n }\n }\n }\n }\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"; };
18962
19206
  var getFormattedQuote = function (_a) {
18963
19207
  var id = _a.id, token = _a.token, apiHost = _a.apiHost;
18964
19208
  return __awaiter(void 0, void 0, void 0, function () {
@@ -18985,7 +19229,7 @@ var getFormattedQuote = function (_a) {
18985
19229
  var usePlugins = function (_a) {
18986
19230
  var apiHost = _a.apiHost, token = _a.token;
18987
19231
  var response = useQuery({
18988
- queryKey: QueryKeyFactory.default.pluginsKey(token || ""),
19232
+ queryKey: QueryKeyFactory.default.pluginsKey(token || ''),
18989
19233
  queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
18990
19234
  var plugins;
18991
19235
  return __generator(this, function (_a) {
@@ -19003,6 +19247,37 @@ var usePlugins = function (_a) {
19003
19247
  });
19004
19248
  return response;
19005
19249
  };
19250
+ var getPlugins = function (_a) {
19251
+ var entityId = _a.entityId, token = _a.token, apiHost = _a.apiHost;
19252
+ return __awaiter(void 0, void 0, void 0, function () {
19253
+ var response, plugins, filteredPlugins, error;
19254
+ return __generator(this, function (_b) {
19255
+ switch (_b.label) {
19256
+ case 0: return [4 /*yield*/, request$1({
19257
+ endpoint: "/plugins",
19258
+ token: token,
19259
+ apiHost: apiHost,
19260
+ })];
19261
+ case 1:
19262
+ response = _b.sent();
19263
+ if (!response.ok) return [3 /*break*/, 3];
19264
+ return [4 /*yield*/, response.json()];
19265
+ case 2:
19266
+ plugins = _b.sent();
19267
+ filteredPlugins = plugins.filter(function (plugin) {
19268
+ var _a, _b;
19269
+ var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) || ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 || !entityId;
19270
+ return result;
19271
+ });
19272
+ return [2 /*return*/, filteredPlugins];
19273
+ case 3: return [4 /*yield*/, response.json()];
19274
+ case 4:
19275
+ error = _b.sent();
19276
+ throw error;
19277
+ }
19278
+ });
19279
+ });
19280
+ };
19006
19281
 
19007
19282
  var filterSigningPlugins = function (plugins) {
19008
19283
  return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
@@ -19017,15 +19292,41 @@ var useSigningPlugins = function (_a) {
19017
19292
  return filterSigningPlugins(plugins.data);
19018
19293
  };
19019
19294
 
19295
+ var QUOTE_ACCEPT = "\n mutation quoteAccept($name: String!, $title: String!, $poNumber: String, $taxNumber: String, $quoteId: ID) {\n quoteAccept(name: $name, title: $title, poNumber: $poNumber, taxNumber: $taxNumber, quoteId: $quoteId) {\n errors\n }\n }\n";
19296
+ var quoteAccept = function (_a) {
19297
+ var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token, changedFormItems = _a.changedFormItems;
19298
+ return __awaiter(void 0, void 0, void 0, function () {
19299
+ var vars, response, errors;
19300
+ var _b, _c;
19301
+ return __generator(this, function (_d) {
19302
+ switch (_d.label) {
19303
+ case 0:
19304
+ vars = __assign(__assign({}, changedFormItems), { quoteId: quoteId });
19305
+ return [4 /*yield*/, gqlRequest$1({
19306
+ query: QUOTE_ACCEPT,
19307
+ token: token,
19308
+ vars: vars,
19309
+ apiHost: apiHost,
19310
+ })];
19311
+ case 1:
19312
+ response = _d.sent();
19313
+ errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAccept) === null || _b === void 0 ? void 0 : _b.errors;
19314
+ if (errors)
19315
+ throw errors;
19316
+ return [2 /*return*/, (_c = response.quoteAccept) === null || _c === void 0 ? void 0 : _c.quote];
19317
+ }
19318
+ });
19319
+ });
19320
+ };
19321
+ // export default quoteAccept;
19020
19322
  var useSendAcceptQuote = function (_a) {
19021
- var onTokenExpired = _a.onTokenExpired, quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
19323
+ _a.onTokenExpired; var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
19022
19324
  // Hooks
19023
19325
  var graphQLMutation = useGraphQLmutation(function () {
19024
19326
  console.log("navigate in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
19025
19327
  }, apiHost || "", function () {
19026
19328
  console.log("onError in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
19027
19329
  });
19028
- var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
19029
19330
  var signingPlugins = useSigningPlugins({ apiHost: apiHost, token: token });
19030
19331
  var queryClient = useQueryClient();
19031
19332
  // Local state
@@ -19075,12 +19376,6 @@ var useSendAcceptQuote = function (_a) {
19075
19376
  token: token,
19076
19377
  }),
19077
19378
  });
19078
- queryClient.refetchQueries({
19079
- queryKey: QueryKeyFactory.default.createQuoteKey({
19080
- id: quoteId,
19081
- token: token,
19082
- }),
19083
- });
19084
19379
  });
19085
19380
  // Open the DropboxSign modal
19086
19381
  client.open(url, {
@@ -19091,29 +19386,27 @@ var useSendAcceptQuote = function (_a) {
19091
19386
  }
19092
19387
  });
19093
19388
  }); };
19094
- var sendAccept = function (changedFormItems) {
19095
- var mutation = "mutation quoteAccept($name: String!, $title: String!, $poNumber: String, $taxNumber: String, $quoteId: ID) {\n quoteAccept(name: $name, title: $title, poNumber: $poNumber, taxNumber: $taxNumber, quoteId: $quoteId) {\n errors\n }\n }";
19096
- var variables = __assign(__assign({}, changedFormItems), { quoteId: quoteId });
19097
- graphQLMutation(mutation, variables, function (rsp) {
19098
- if (rsp.errors)
19099
- handleAllErrorFormats(rsp.errors);
19100
- else {
19101
- setAcceptBoxVisible(false);
19102
- queryClient.invalidateQueries({
19103
- queryKey: QueryKeyFactory.default.createQuoteKey({
19104
- id: quoteId,
19105
- token: token,
19106
- }),
19107
- });
19108
- queryClient.invalidateQueries({
19109
- queryKey: QueryKeyFactory.default.createQuoteKey({
19110
- id: quoteId,
19389
+ var _e = useMutation({
19390
+ mutationFn: function (changedFormItems) { return __awaiter(void 0, void 0, void 0, function () {
19391
+ return __generator(this, function (_a) {
19392
+ return [2 /*return*/, quoteAccept({
19393
+ quoteId: quoteId,
19394
+ apiHost: apiHost,
19111
19395
  token: token,
19112
- }),
19113
- });
19114
- }
19115
- }, token);
19116
- };
19396
+ changedFormItems: changedFormItems,
19397
+ })];
19398
+ });
19399
+ }); },
19400
+ onSuccess: function () {
19401
+ setAcceptBoxVisible(false);
19402
+ queryClient.invalidateQueries({
19403
+ queryKey: QueryKeyFactory.default.createQuoteKey({
19404
+ id: quoteId,
19405
+ token: token,
19406
+ }),
19407
+ });
19408
+ },
19409
+ }), sendAcceptMutation = _e.mutate, isSendAcceptPending = _e.isPending;
19117
19410
  var startAcceptance = function () {
19118
19411
  setIsAccepting(true);
19119
19412
  if (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length) {
@@ -19126,12 +19419,13 @@ var useSendAcceptQuote = function (_a) {
19126
19419
  return {
19127
19420
  acceptBoxVisible: acceptBoxVisible,
19128
19421
  isAccepting: isAccepting,
19129
- sendAccept: sendAccept,
19422
+ sendAccept: sendAcceptMutation,
19130
19423
  setAcceptBoxVisible: setAcceptBoxVisible,
19131
19424
  setIsAccepting: setIsAccepting,
19132
19425
  startAcceptance: startAcceptance,
19133
19426
  pandadocPollingModalVisible: pandadocPollingModalVisible,
19134
19427
  setPandadocPollingModalVisible: setPandadocPollingModalVisible,
19428
+ isSendAcceptPending: isSendAcceptPending,
19135
19429
  };
19136
19430
  };
19137
19431
 
@@ -19199,11 +19493,11 @@ var PandadocPollingModal = function (_a) {
19199
19493
  return (jsxs(Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxs("div", __assign({ className: "bunny-py-4 bunny-text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsx("div", __assign({ className: "bunny-text-center" }, { children: infoMessage }))] })));
19200
19494
  };
19201
19495
 
19202
- var ModalOverrideBrandStylings = defaultStyled(Modal)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n .ant-modal-content {\n border-radius: 0.75rem;\n overflow: hidden;\n padding: 0 !important;\n }\n\n .ant-modal-header {\n border-bottom: none;\n padding: 1.5rem 1.5rem 0;\n margin: 0 !important;\n }\n .ant-modal-body {\n padding: 1rem 1.5rem 1.5rem;\n }\n .ant-modal-footer {\n border-top: none;\n padding: 0 1.5rem 1.5rem;\n margin: 0 !important;\n }\n"], ["\n .ant-modal-content {\n border-radius: 0.75rem;\n overflow: hidden;\n padding: 0 !important;\n }\n\n .ant-modal-header {\n border-bottom: none;\n padding: 1.5rem 1.5rem 0;\n margin: 0 !important;\n }\n .ant-modal-body {\n padding: 1rem 1.5rem 1.5rem;\n }\n .ant-modal-footer {\n border-top: none;\n padding: 0 1.5rem 1.5rem;\n margin: 0 !important;\n }\n"])));
19496
+ var ModalOverrideBrandStylings = defaultStyled(Modal)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n .ant-modal-content {\n border-radius: 0.75rem;\n overflow: hidden;\n padding: 0 !important;\n }\n\n .ant-modal-header {\n border-bottom: none;\n padding: 1.5rem 1.5rem 0;\n margin: 0 !important;\n }\n .ant-modal-body {\n padding: 1rem 1.5rem 1.5rem;\n }\n .ant-modal-footer {\n border-top: none;\n padding: 0 1.5rem 1.5rem;\n margin: 0 !important;\n }\n"], ["\n .ant-modal-content {\n border-radius: 0.75rem;\n overflow: hidden;\n padding: 0 !important;\n }\n\n .ant-modal-header {\n border-bottom: none;\n padding: 1.5rem 1.5rem 0;\n margin: 0 !important;\n }\n .ant-modal-body {\n padding: 1rem 1.5rem 1.5rem;\n }\n .ant-modal-footer {\n border-top: none;\n padding: 0 1.5rem 1.5rem;\n margin: 0 !important;\n }\n"])));
19203
19497
  var StyledModal$1 = function (props) {
19204
19498
  return jsx(ModalOverrideBrandStylings, __assign({ closable: false }, props));
19205
19499
  };
19206
- var templateObject_1$8;
19500
+ var templateObject_1$9;
19207
19501
 
19208
19502
  var useFocusFirstInput = function (_a) {
19209
19503
  var firstInputRef = _a.firstInputRef, isVisible = _a.isVisible;
@@ -19214,7 +19508,7 @@ var useFocusFirstInput = function (_a) {
19214
19508
  };
19215
19509
 
19216
19510
  var AcceptQuoteModal = function (_a) {
19217
- var acceptBoxVisible = _a.acceptBoxVisible, formattedQuote = _a.formattedQuote, sendAccept = _a.sendAccept, setAcceptBoxVisible = _a.setAcceptBoxVisible, setIsAccepting = _a.setIsAccepting;
19511
+ var acceptBoxVisible = _a.acceptBoxVisible, formattedQuote = _a.formattedQuote, sendAccept = _a.sendAccept, setAcceptBoxVisible = _a.setAcceptBoxVisible, setIsAccepting = _a.setIsAccepting, isSendAcceptPending = _a.isSendAcceptPending;
19218
19512
  // Refs
19219
19513
  var firstInputRef = useRef(null);
19220
19514
  // Hooks
@@ -19225,7 +19519,10 @@ var AcceptQuoteModal = function (_a) {
19225
19519
  var createRules = function (required, title) {
19226
19520
  return required ? [{ required: true, message: "".concat(title, " is required") }] : [];
19227
19521
  };
19228
- return (jsx(StyledModal$1, __assign({ centered: true, okText: "Accept", onCancel: function () {
19522
+ return (jsx(StyledModal$1, __assign({ centered: true, okText: isSendAcceptPending ? "Accepting..." : "Accept", okButtonProps: {
19523
+ loading: isSendAcceptPending,
19524
+ disabled: isSendAcceptPending,
19525
+ }, onCancel: function () {
19229
19526
  setAcceptBoxVisible(false);
19230
19527
  setIsAccepting(false);
19231
19528
  }, onOk: function () {
@@ -19238,8 +19535,39 @@ var AcceptQuoteModal = function (_a) {
19238
19535
  }, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxs(Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical" }, { children: [jsx(Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsx(Input, { autoFocus: true, ref: firstInputRef }) })), jsx(Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsx(Input, {}) })), taxNumberRequired && (jsx(Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsx(Input, {}) })))] })) })));
19239
19536
  };
19240
19537
 
19241
- var Text$o = Typography.Text;
19242
- defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
19538
+ var Title$2 = Typography.Title;
19539
+ var showSuccessNotification$1 = useSuccessNotification();
19540
+ var PaymentHoldModal = function (_a) {
19541
+ var visible = _a.visible, setVisible = _a.setVisible, quote = _a.quote;
19542
+ var queryClient = useQueryClient();
19543
+ var token = useToken();
19544
+ return (jsxs(StyledModal$1, __assign({ centered: true, onCancel: function () {
19545
+ setVisible(false);
19546
+ }, footer: null, open: visible, width: 600 }, { children: [jsx(Title$2, __assign({ className: "mt-4 pb-4 mx-4", level: 5 }, { children: "Pay to accept" })), jsx("div", __assign({ className: "mb-4" }, { children: jsx(PaymentForm, { quote: {
19547
+ amount: quote.amount,
19548
+ currencyId: quote.currency,
19549
+ id: quote.quote.id,
19550
+ }, paymentHoldOptions: {
19551
+ payToAccept: true,
19552
+ amountToHold: quote.amount,
19553
+ }, onFail: function () {
19554
+ setVisible(false);
19555
+ }, onPaymentSuccess: function () {
19556
+ setVisible(false);
19557
+ }, onPaymentHoldSuccess: function () {
19558
+ setVisible(false);
19559
+ showSuccessNotification$1("Approved payment hold for ".concat(formatCurrency(quote.amount, quote.currency)));
19560
+ queryClient.invalidateQueries({
19561
+ queryKey: QueryKeyFactory.default.createQuoteKey({
19562
+ id: quote.id,
19563
+ token: token,
19564
+ }),
19565
+ });
19566
+ } }) }))] })));
19567
+ };
19568
+
19569
+ var Text$n = Typography.Text;
19570
+ defaultStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
19243
19571
  function Quote(_a) {
19244
19572
  var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onQuoteLoaded = _a.onQuoteLoaded;
19245
19573
  return (jsx(InvoiceQuoteContext.Provider, __assign({ value: {
@@ -19253,16 +19581,29 @@ function Quote(_a) {
19253
19581
  onQuoteLoaded: onQuoteLoaded,
19254
19582
  } }, { children: jsx(ActualQuote, {}) })));
19255
19583
  }
19584
+ // TODO: dissolve this hook
19585
+ var useQuotePaymentHold = function (formattedQuote) {
19586
+ var _a, _b;
19587
+ var _c = useState(false), paymentHoldModalVisible = _c[0], setPaymentHoldModalVisible = _c[1];
19588
+ var shouldDoPaymentHold = ((_a = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _a === void 0 ? void 0 : _a.payToAccept) == true;
19589
+ var currentPaymentHold = (_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.currentPaymentHold;
19590
+ return {
19591
+ paymentHold: currentPaymentHold,
19592
+ paymentHoldModalVisible: paymentHoldModalVisible,
19593
+ setPaymentHoldModalVisible: setPaymentHoldModalVisible,
19594
+ shouldDoPaymentHold: shouldDoPaymentHold,
19595
+ paymentHoldCompleted: currentPaymentHold ? true : false,
19596
+ };
19597
+ };
19256
19598
  function ActualQuote() {
19257
19599
  var _this = this;
19258
- var _a, _b;
19600
+ var _a, _b, _c, _d;
19259
19601
  // Context
19260
- var _c = useContext(BunnyContext), apiHost = _c.apiHost, onTokenExpired = _c.onTokenExpired;
19602
+ var _e = useContext(BunnyContext), apiHost = _e.apiHost, onTokenExpired = _e.onTokenExpired;
19261
19603
  var token = useToken();
19262
- var entityBranding = useContext(BrandContext);
19263
- var _d = useContext(InvoiceQuoteContext), className = _d.className, id = _d.id, hideDownloadButton = _d.hideDownloadButton, onQuoteLoaded = _d.onQuoteLoaded;
19604
+ var _f = useContext(InvoiceQuoteContext), className = _f.className, id = _f.id, hideDownloadButton = _f.hideDownloadButton, onQuoteLoaded = _f.onQuoteLoaded;
19264
19605
  // Queries
19265
- var _e = useQuery({
19606
+ var _g = useQuery({
19266
19607
  queryKey: QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
19267
19608
  queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
19268
19609
  var error_1;
@@ -19281,17 +19622,15 @@ function ActualQuote() {
19281
19622
  });
19282
19623
  }); },
19283
19624
  placeholderData: keepPreviousData,
19284
- }), data = _e.data, isLoading = _e.isLoading;
19625
+ }), data = _g.data, isLoading = _g.isLoading;
19285
19626
  var formattedQuote = data;
19286
19627
  // Hooks
19287
- var downloadFile = useDownloadFile(id);
19288
- var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
19289
- var _f = useSendAcceptQuote({
19628
+ var _h = useSendAcceptQuote({
19290
19629
  token: token,
19291
19630
  onTokenExpired: onTokenExpired,
19292
19631
  apiHost: apiHost,
19293
19632
  quoteId: id,
19294
- }), acceptBoxVisible = _f.acceptBoxVisible, isAccepting = _f.isAccepting, sendAccept = _f.sendAccept, setAcceptBoxVisible = _f.setAcceptBoxVisible, setIsAccepting = _f.setIsAccepting, startAcceptance = _f.startAcceptance, pandadocPollingModalVisible = _f.pandadocPollingModalVisible, setPandadocPollingModalVisible = _f.setPandadocPollingModalVisible;
19633
+ }), acceptBoxVisible = _h.acceptBoxVisible, isAccepting = _h.isAccepting, sendAccept = _h.sendAccept, setAcceptBoxVisible = _h.setAcceptBoxVisible, setIsAccepting = _h.setIsAccepting, startAcceptance = _h.startAcceptance, pandadocPollingModalVisible = _h.pandadocPollingModalVisible, setPandadocPollingModalVisible = _h.setPandadocPollingModalVisible, isSendAcceptPending = _h.isSendAcceptPending;
19295
19634
  useSigningComplete({ data: formattedQuote, token: token });
19296
19635
  var isMobile = useIsMobile();
19297
19636
  var showErrorNotification = useErrorNotification();
@@ -19300,18 +19639,54 @@ function ActualQuote() {
19300
19639
  onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote);
19301
19640
  }
19302
19641
  }, [formattedQuote]);
19642
+ // Payment hold stuff here
19643
+ var _j = useQuotePaymentHold(formattedQuote), paymentHoldModalVisible = _j.paymentHoldModalVisible, setPaymentHoldModalVisible = _j.setPaymentHoldModalVisible, shouldDoPaymentHold = _j.shouldDoPaymentHold, paymentHoldCompleted = _j.paymentHoldCompleted, paymentHold = _j.paymentHold;
19644
+ var handleClickAccept = function () {
19645
+ if (shouldDoPaymentHold && !paymentHoldCompleted) {
19646
+ setPaymentHoldModalVisible(true);
19647
+ }
19648
+ else {
19649
+ startAcceptance();
19650
+ }
19651
+ };
19303
19652
  if (!formattedQuote || isLoading) {
19304
19653
  return jsx(Fragment, {});
19305
19654
  }
19306
19655
  // Derived state
19307
19656
  var isAccepted = formattedQuote.state === 'ACCEPTED';
19308
- return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-end bunny-items-center bunny-gap-4", id: "acceptance", style: {
19309
- color: entityBranding.secondaryColor,
19310
- } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$o, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [!isMobile && !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, !isAccepted ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? 'Quote is expired' : 'Accept quote' }))) : null] })))] })), jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_b = (_a = formattedQuote.object) === null || _a === void 0 ? void 0 : _a.documents) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
19657
+ var firstInvoice = (_a = formattedQuote.quote) === null || _a === void 0 ? void 0 : _a.firstInvoice;
19658
+ if ((firstInvoice === null || firstInvoice === void 0 ? void 0 : firstInvoice.state) === 'PAID' && paymentHoldCompleted) {
19659
+ return jsx(Invoice, { id: firstInvoice.id });
19660
+ }
19661
+ return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.documentTemplateId)
19662
+ ? "".concat(apiHost, "/api/pdf/quote/").concat(formattedQuote.quote.id)
19663
+ : undefined }, { children: ((_d = (_c = formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.quote.documents.map(function (doc, index) {
19311
19664
  return (jsx(Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
19312
- }) }))) : null }))] })), jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
19665
+ }) }))) : 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 })] }));
19313
19666
  }
19314
- var templateObject_1$7;
19667
+ // TODO: clean up the logic here. Its quite confusing
19668
+ function QuoteButtons(_a) {
19669
+ 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;
19670
+ var apiHost = useContext(BunnyContext).apiHost;
19671
+ var token = useToken();
19672
+ var entityBranding = useContext(BrandContext);
19673
+ var downloadFile = useDownloadFile(id);
19674
+ var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
19675
+ return (jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
19676
+ color: entityBranding.secondaryColor,
19677
+ } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$n, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [paymentHold ? (jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsx(Button, __assign({ disabled: isExpired, onClick: function () { return setPaymentHoldModalVisible(true); }, type: "primary" }, { children: "Pay to accept" }))) : (jsx(Fragment, { children: !isAccepted ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary" }, { children: isExpired ? 'Quote is expired' : 'Accept quote' }))) : null }))] })))] })));
19678
+ }
19679
+ function PaymentHoldDisplay(_a) {
19680
+ var _b, _c, _d, _e;
19681
+ var paymentHold = _a.paymentHold, currency = _a.currency, amount = _a.amount;
19682
+ var paymentMethod = ((_c = (_b = paymentHold.paymentMethod) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.identifier)
19683
+ ? (_e = (_d = paymentHold.paymentMethod) === null || _d === void 0 ? void 0 : _d.metadata) === null || _e === void 0 ? void 0 : _e.identifier
19684
+ : 'N/A';
19685
+ var formattedAmount = currency ? formatCurrency(amount, currency) : 'N/A';
19686
+ var expirationDate = paymentHold.expiresAt ? formatDate(paymentHold.expiresAt) : 'N/A';
19687
+ return (jsx(Tooltip, __assign({ title: "".concat(formattedAmount, " will be charged to ").concat(paymentMethod, " once the quote is accepted. Hold will be released on ").concat(expirationDate, " if not accepted.") }, { children: jsx(Fragment, { children: jsxs(CustomizedTag, __assign({ color: 'orange', className: "rounded-md", style: { padding: 6 } }, { children: ["Hold of ", formattedAmount, " on ****", paymentMethod] })) }) })));
19688
+ }
19689
+ var templateObject_1$8;
19315
19690
 
19316
19691
  var QUOTES_QUERY = function (filter) { return "\n query quotes {\n quotes ".concat(filter ? "(".concat(filter, ")") : '', " {\n pageInfo {\n startCursor\n endCursor\n hasNextPage\n hasPreviousPage\n }\n nodes {\n id\n name\n account {\n name\n id\n }\n applicationDate\n state\n createdAt\n expiresAt\n currencyId\n amount\n number\n }\n }\n }"); };
19317
19692
  var getQuotes = function (_a) {
@@ -19334,17 +19709,14 @@ var getQuotes = function (_a) {
19334
19709
  });
19335
19710
  };
19336
19711
 
19337
- var transactionMutation = function (filter) { return "\nquery transactions {\n transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n nodes {\n amount\n createdAt\n currencyId\n description\n id\n kind\n state\n transactionableId\n transactionable {\n ...on Payment { amount }\n ...on Invoice { amount number dueAt issuedAt isLegacy }\n ...on CreditNote { amount number issuedAt }\n }\n account {\n name\n id\n }\n }\n }\n}"); };
19712
+ var transactionMutation = function (filter) { return "\nquery transactions {\n transactions ".concat(filter ? "(".concat(filter, ")") : '', " {\n nodes {\n amount\n createdAt\n currencyId\n description\n id\n kind\n state\n transactionableId\n transactionable {\n ...on Payment { amount }\n ...on Invoice { amount number dueAt issuedAt isLegacy }\n ...on CreditNote { amount number issuedAt }\n }\n account {\n name\n id\n }\n }\n }\n}"); };
19338
19713
  var getTransactions = function (filter, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
19339
19714
  var response, _a, data, errors;
19340
19715
  return __generator(this, function (_b) {
19341
19716
  switch (_b.label) {
19342
- case 0: return [4 /*yield*/, fetch(apiHost + "/graphql", {
19343
- method: "POST",
19344
- headers: {
19345
- "Content-type": "application/json; charset=utf-8",
19346
- Authorization: "Bearer ".concat(token),
19347
- },
19717
+ case 0: return [4 /*yield*/, fetch(apiHost + '/graphql', {
19718
+ method: 'POST',
19719
+ headers: createClientDevHeaders(token),
19348
19720
  body: JSON.stringify({
19349
19721
  query: transactionMutation(filter),
19350
19722
  }),
@@ -19398,10 +19770,10 @@ var getColor = function (state) {
19398
19770
  }
19399
19771
  };
19400
19772
 
19401
- var Text$n = Typography.Text;
19773
+ var Text$m = Typography.Text;
19402
19774
  var TransactionDate = function (_a) {
19403
19775
  var date = _a.date;
19404
- return jsx(Text$n, __assign({ className: "bunny-text-sm" }, { children: formatDate(date) }));
19776
+ return jsx(Text$m, __assign({ className: "bunny-text-sm" }, { children: formatDate(date) }));
19405
19777
  };
19406
19778
 
19407
19779
  var ArrowDownToLine = function (_a) {
@@ -19431,20 +19803,20 @@ var TransactionGridCell = defaultStyled.div.withConfig({
19431
19803
  shouldForwardProp: function (prop) {
19432
19804
  return !["gridColumn", "padding", "right"].includes(prop);
19433
19805
  },
19434
- })(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n ", "\n\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n text-align: ", ";\n white-space: nowrap;\n font-size: 14px;\n color: ", ";\n\n background-color: inherit;\n\n padding: 1rem;\n min-width: 48px;\n"], ["\n ", "\n\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n text-align: ", ";\n white-space: nowrap;\n font-size: 14px;\n color: ", ";\n\n background-color: inherit;\n\n padding: 1rem;\n min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) {
19806
+ })(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n ", "\n\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n text-align: ", ";\n white-space: nowrap;\n font-size: 14px;\n color: ", ";\n\n background-color: inherit;\n\n padding: 1rem;\n min-width: 48px;\n"], ["\n ", "\n\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n text-align: ", ";\n white-space: nowrap;\n font-size: 14px;\n color: ", ";\n\n background-color: inherit;\n\n padding: 1rem;\n min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) {
19435
19807
  return props.right ? "flex-end" : "flex-start";
19436
19808
  }, function (props) {
19437
19809
  return props.right ? "right" : "left";
19438
19810
  }, SLATE_600);
19439
- var templateObject_1$6;
19811
+ var templateObject_1$7;
19440
19812
 
19441
- var Text$m = Typography.Text;
19813
+ var Text$l = Typography.Text;
19442
19814
  var TransactionsEmptyState = function () {
19443
19815
  var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
19444
- return (jsx(Text$m, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
19816
+ return (jsx(Text$l, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
19445
19817
  };
19446
19818
 
19447
- var Text$l = Typography.Text;
19819
+ var Text$k = Typography.Text;
19448
19820
  var isInvoice = function (transaction) {
19449
19821
  return transaction.kind === "INVOICE";
19450
19822
  };
@@ -19456,7 +19828,7 @@ var TransactionRowTitle = function (_a) {
19456
19828
  if (!isInvoice(transaction) && !isQuote(transaction)) {
19457
19829
  return jsx(Fragment, {});
19458
19830
  }
19459
- return (jsx(Text$l, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19831
+ return (jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
19460
19832
  };
19461
19833
 
19462
19834
  function transactionDateToDisplay(transaction, transactionDateType) {
@@ -19475,7 +19847,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
19475
19847
  }
19476
19848
  }
19477
19849
 
19478
- var Text$k = Typography.Text;
19850
+ var Text$j = Typography.Text;
19479
19851
  var TransactionsListDesktop = function (_a) {
19480
19852
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19481
19853
  var _b = useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19504,11 +19876,11 @@ var TransactionsListDesktop = function (_a) {
19504
19876
  !showState &&
19505
19877
  !showAmount &&
19506
19878
  !showDownload &&
19507
- !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$k, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsx(Text$k, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(Text$k, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsx(TransactionGridCell, { right: false })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$k, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
19879
+ !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsx(TransactionGridCell, { right: false })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$j, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
19508
19880
  }) }));
19509
19881
  };
19510
19882
 
19511
- var Text$j = Typography.Text;
19883
+ var Text$i = Typography.Text;
19512
19884
  var TransactionsListMobile = function (_a) {
19513
19885
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
19514
19886
  var _b = useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19531,12 +19903,12 @@ var TransactionsListMobile = function (_a) {
19531
19903
  backgroundColor: index % 2 === 0
19532
19904
  ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
19533
19905
  : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
19534
- } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] }))), jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$j, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$j, { children: "\u00B7" }), showAmount && (jsx(Text$j, { children: formatCurrency(transaction.transactionable.amount ||
19906
+ } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] }))), jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$i, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$i, { children: "\u00B7" }), showAmount && (jsx(Text$i, { children: formatCurrency(transaction.transactionable.amount ||
19535
19907
  transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
19536
19908
  }) }));
19537
19909
  };
19538
19910
 
19539
- var Text$i = Typography.Text;
19911
+ var Text$h = Typography.Text;
19540
19912
  var DISPLAY_WIDTH = 1200;
19541
19913
  function Transactions(_a) {
19542
19914
  var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date", "title", "state", "amount", "download"] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? "shadow-md" : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
@@ -19649,7 +20021,7 @@ function TransactionsDisplay(_a) {
19649
20021
  onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
19650
20022
  setDrawerOpen(false);
19651
20023
  }
19652
- return (jsxs("div", __assign({ style: style }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? "bunny-overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col bunny-gap-1" : "bunny-flex-row bunny-items-center", " bunny-justify-between") }, { children: [showTitle ? (jsx(Text$i, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsx("div", {}) // Empty div so justify-between works
20024
+ return (jsxs("div", __assign({ style: style }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? "bunny-overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col bunny-gap-1" : "bunny-flex-row bunny-items-center", " bunny-justify-between") }, { children: [showTitle ? (jsx(Text$h, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsx("div", {}) // Empty div so justify-between works
19653
20025
  ), showSearchBar && (jsx("div", __assign({ className: "".concat(isMobile ? "bunny-w-full" : "") }, { children: jsx(Input, { className: searchBarClassName
19654
20026
  ? searchBarClassName
19655
20027
  : "border border-slate-200", onChange: function (e) {
@@ -19917,7 +20289,7 @@ var BunnyFooterIcon = function (_a) {
19917
20289
  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" }) })) })] })));
19918
20290
  };
19919
20291
 
19920
- var Text$h = Typography.Text;
20292
+ var Text$g = Typography.Text;
19921
20293
  var Footer = function (_a) {
19922
20294
  var className = _a.className;
19923
20295
  var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
@@ -19927,11 +20299,11 @@ var Footer = function (_a) {
19927
20299
  var BunnyMarketingLink = function () {
19928
20300
  var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
19929
20301
  var isMobile = useIsMobile();
19930
- return (jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsx(Text$h, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) }))] })) })) })));
20302
+ return (jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsx(Text$g, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR$1 : SLATE_400 }) }))] })) })) })));
19931
20303
  };
19932
- var StyedLink = styled.a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n font-size: 14px;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n font-size: 14px;\n"])), SLATE_400, SLATE_500);
19933
- 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);
19934
- var templateObject_1$5, templateObject_2$1;
20304
+ var StyedLink = styled.a(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n font-size: 14px;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n font-size: 14px;\n"])), SLATE_400, SLATE_500);
20305
+ 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$1);
20306
+ var templateObject_1$6, templateObject_2$1;
19935
20307
 
19936
20308
  var Title$1 = Typography.Title;
19937
20309
  function PaymentForms(_a) {
@@ -19952,18 +20324,18 @@ function InitialSignupForm(_a) {
19952
20324
  ] }, { children: jsx(Input, { placeholder: "Email" }) })), jsx(Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Company name is required' }] }, { children: jsx(Input, { placeholder: "Company name" }) })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full" }, { children: "Proceed to payment" })) })] })) })));
19953
20325
  }
19954
20326
 
19955
- var Title = Typography.Title, Text$g = Typography.Text;
20327
+ var Title = Typography.Title, Text$f = Typography.Text;
19956
20328
  function PaymentSuccessDisplay(_a) {
19957
20329
  var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
19958
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxs(Text$g, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
20330
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxs(Text$f, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
19959
20331
  }
19960
20332
 
19961
- var Text$f = Typography.Text;
20333
+ var Text$e = Typography.Text;
19962
20334
  function PriceListDisplay(_a) {
19963
20335
  var priceListData = _a.priceListData;
19964
20336
  if (!priceListData)
19965
20337
  return null;
19966
- 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$f, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxs(Text$f, __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$f, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$f, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
20338
+ 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] })));
19967
20339
  }
19968
20340
 
19969
20341
  var showErrorNotification = useErrorNotification();
@@ -20131,14 +20503,14 @@ function Signup(_a) {
20131
20503
  boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
20132
20504
  } }, { 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: isLoadingQuote ? undefined : quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) }))) }))] })));
20133
20505
  }
20134
- var Text$e = Typography.Text;
20506
+ var Text$d = Typography.Text;
20135
20507
  var CheckoutSummaryDivider = function () {
20136
20508
  return (jsx("div", __assign({ className: "bunny-my-2" }, { children: jsx(Divider, { className: "m-0" }) })));
20137
20509
  };
20138
20510
  var showSuccessNotification = useSuccessNotification();
20139
20511
  function CheckoutSummary(_a) {
20140
20512
  var quote = _a.quote, className = _a.className; _a.onAddCoupon; var priceListData = _a.priceListData; _a.isAddingCoupon;
20141
- return (jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxs(Text$e, { 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) {
20513
+ return (jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxs(Text$d, { 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) {
20142
20514
  return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
20143
20515
  var multiplier = charge.kind === 'COUPON' ? -1 : 1;
20144
20516
  return (jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: charge.name }), jsx("div", { children: charge.quantity }), jsx("div", { children: formatCurrency(multiplier * charge.amount, charge.currencyId) })] }), charge.id));
@@ -20872,7 +21244,7 @@ var PlanPickerCheckoutBar = function (_a) {
20872
21244
  };
20873
21245
 
20874
21246
  // WARNING: There is a preview button on APP that will need to be changed if this query is changed
20875
- var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n basePrice\n id\n currencyId\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
21247
+ var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
20876
21248
  var getPriceListChangeOptions = function (_a) {
20877
21249
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
20878
21250
  return __awaiter(void 0, void 0, void 0, function () {
@@ -20957,7 +21329,7 @@ var BillingPeriodSelector = function (_a) {
20957
21329
  };
20958
21330
  var ProductRadioStyled = styled.div.withConfig({
20959
21331
  shouldForwardProp: function (prop) { return !["brandColor"].includes(prop); },
20960
- })(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"], ["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"])), function (props) {
21332
+ })(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"], ["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"])), function (props) {
20961
21333
  return props.brandColor ? props.brandColor : "black";
20962
21334
  }, function (props) {
20963
21335
  return props.brandColor ? props.brandColor : "black";
@@ -20966,7 +21338,7 @@ var StyledRadioGroup = styled.div(templateObject_2 || (templateObject_2 = __make
20966
21338
  var $isMobile = _a.$isMobile;
20967
21339
  return $isMobile ? "100%" : "min-content";
20968
21340
  });
20969
- var templateObject_1$4, templateObject_2;
21341
+ var templateObject_1$5, templateObject_2;
20970
21342
 
20971
21343
  var PriceListCardTitle = function (_a) {
20972
21344
  var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
@@ -20978,35 +21350,47 @@ var PriceListCardTitle = function (_a) {
20978
21350
 
20979
21351
  var PriceListCardPrice = function (_a) {
20980
21352
  var priceList = _a.priceList;
20981
- return (jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: "32px" } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === PricingStyle.PRICED
20982
- ? formatCurrency(priceList.basePrice, priceList.currencyId, 0)
21353
+ return (jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: '32px' } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === PricingStyle.PRICED
21354
+ ? formatCurrency(priceList.monthlyBasePrice, priceList.currencyId, 0)
20983
21355
  : priceList.plan.pricingStyle === PricingStyle.CONTACT_US
20984
- ? ""
20985
- : "Free" })));
21356
+ ? ''
21357
+ : 'Free' })));
20986
21358
  };
20987
21359
 
20988
- var Text$d = Typography.Text;
21360
+ var Text$c = Typography.Text;
20989
21361
  var PriceListCardDescription = function (_a) {
20990
21362
  var description = _a.description;
21363
+ var htmlParsedDescription = parse(description || '');
20991
21364
  if (!description)
20992
21365
  return null;
20993
- return jsx(Text$d, __assign({ className: "bunny-text-center" }, { children: description }));
21366
+ return jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: htmlParsedDescription }));
20994
21367
  };
20995
21368
 
20996
- var Text$c = Typography.Text;
21369
+ var BillingPeriodConverter;
21370
+ (function (BillingPeriodConverter) {
21371
+ BillingPeriodConverter["ONCE"] = "once";
21372
+ BillingPeriodConverter["MONTHLY"] = "monthly";
21373
+ BillingPeriodConverter["ANNUAL"] = "annually";
21374
+ BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
21375
+ BillingPeriodConverter["QUARTERLY"] = "quarterly";
21376
+ })(BillingPeriodConverter || (BillingPeriodConverter = {}));
21377
+ var BillingPeriodConverter$1 = BillingPeriodConverter;
21378
+
21379
+ var isEmptyHtml = function (html) {
21380
+ return /^<[^>]*>(\s*)<\/[^>]*>$/.test(html);
21381
+ };
21382
+ var Text$b = Typography.Text;
20997
21383
  var PriceListCardPriceDescription = function (_a) {
20998
21384
  var feature = _a.feature, priceList = _a.priceList;
20999
21385
  var isMobile = useIsMobile();
21000
21386
  var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === PricingModel.FLAT && charge.basePrice > 0; });
21001
21387
  if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== PricingStyle.PRICED)
21002
21388
  return null;
21003
- return (jsx(Text$c, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
21004
- fontSize: isMobile ? "13px" : "12px",
21005
- } }, { children: priceList.plan.pricingDescription
21006
- ? priceList.plan.pricingDescription
21007
- : "per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
21008
- ? "".concat(feature.unitName.toLowerCase(), " / ")
21009
- : "").concat(PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)]) })));
21389
+ return (jsxs(Fragment, { children: [jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
21390
+ fontSize: isMobile ? '13px' : '12px',
21391
+ } }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsx(Markup, { content: priceList.plan.pricingDescription })) : ("per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
21392
+ ? "".concat(feature.unitName.toLowerCase(), " / ")
21393
+ : '', "month")) })), priceList.periodMonths > 1 && (jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
21010
21394
  };
21011
21395
 
21012
21396
  var CheckIcon = function (_a) {
@@ -21034,8 +21418,8 @@ var PriceListCardButton = function (_a) {
21034
21418
  maxWidth: '240px',
21035
21419
  }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
21036
21420
  };
21037
- var StyledCardButton = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"], ["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"])), SLATE_200, SLATE_600);
21038
- var templateObject_1$3;
21421
+ var StyledCardButton = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"], ["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"])), SLATE_200, SLATE_600);
21422
+ var templateObject_1$4;
21039
21423
 
21040
21424
  var PriceListCardMobile = function (_a) {
21041
21425
  var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
@@ -21106,13 +21490,13 @@ var PriceListCard = function (_a) {
21106
21490
  return isMobile ? (jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
21107
21491
  };
21108
21492
 
21109
- var Text$b = Typography.Text;
21493
+ var Text$a = Typography.Text;
21110
21494
  var PriceListCardFeature = function (_a) {
21111
21495
  var index = _a.index, planFeature = _a.planFeature;
21112
21496
  var brandColor = useContext(BrandContext).brandColor;
21113
21497
  if (planFeature.feature.kind === "GROUP")
21114
- return jsx(Text$b, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
21115
- return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsx(Text$b, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
21498
+ return jsx(Text$a, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
21499
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsx(Text$a, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
21116
21500
  };
21117
21501
 
21118
21502
  var getAvailablePlansAndPriceLists = function (_a) {
@@ -21149,7 +21533,7 @@ var PriceListGridMobile = function (_a) {
21149
21533
 
21150
21534
  var NextPriceListButton = function (_a) {
21151
21535
  var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21152
- return (jsxs("div", __assign({ className: "bunny-absolute bunny-flex bunny-gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { 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 () {
21536
+ 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 () {
21153
21537
  setPriceListStart(function (prev) {
21154
21538
  var newValue = prev - 1;
21155
21539
  if (newValue < 0) {
@@ -21157,7 +21541,7 @@ var NextPriceListButton = function (_a) {
21157
21541
  }
21158
21542
  return newValue;
21159
21543
  });
21160
- }, style: { width: "22px", height: "22px" } }, { children: jsx(FontAwesomeIcon, { icon: faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (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 () {
21544
+ }, style: { width: '22px', height: '22px' } }, { children: jsx(FontAwesomeIcon, { icon: faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (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 () {
21161
21545
  return setPriceListStart(function (prev) {
21162
21546
  var newValue = prev + 1;
21163
21547
  if (newValue >= availablePriceLists.length) {
@@ -21165,7 +21549,7 @@ var NextPriceListButton = function (_a) {
21165
21549
  }
21166
21550
  return newValue;
21167
21551
  });
21168
- }, style: { width: "22px", height: "22px" } }, { children: jsx(FontAwesomeIcon, { icon: faChevronRight }) })))] })));
21552
+ }, style: { width: '22px', height: '22px' } }, { children: jsx(FontAwesomeIcon, { icon: faChevronRight }) })))] })));
21169
21553
  };
21170
21554
 
21171
21555
  var filterUniqueFeatures = function (_a) {
@@ -21219,7 +21603,7 @@ var FeatureGridCell = function (_a) {
21219
21603
  : {})) }, { children: children })));
21220
21604
  };
21221
21605
 
21222
- var Text$a = Typography.Text;
21606
+ var Text$9 = Typography.Text;
21223
21607
  var PlanFeatures = function (_a) {
21224
21608
  var _b;
21225
21609
  var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
@@ -21258,14 +21642,14 @@ var PlanFeatures = function (_a) {
21258
21642
  return (jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
21259
21643
  if (isFeatureGroup)
21260
21644
  return jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex);
21261
- return (jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsx(Text$a, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
21645
+ return (jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsx(Text$9, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
21262
21646
  })] }), rowIndex));
21263
21647
  }) }));
21264
21648
  };
21265
21649
  var FeatureTitle = function (_a) {
21266
21650
  var _b;
21267
21651
  var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
21268
- 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 })));
21652
+ return (jsx(Text$9, __assign({ className: " ".concat(isFeatureGroup ? 'bunny-text-slate-500 bunny-font-medium bunny-pt-4' : ''), style: __assign({}, (isFeatureGroup ? { fontSize: '11px' } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
21269
21653
  };
21270
21654
 
21271
21655
  var PriceListGridDesktop = function (_a) {
@@ -21481,12 +21865,12 @@ var PlanPicker = function () {
21481
21865
  return (jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
21482
21866
  };
21483
21867
 
21484
- var Text$9 = Typography.Text;
21868
+ var Text$8 = Typography.Text;
21485
21869
  var PreviewModeAdvisary = function (_a) {
21486
21870
  var isInPreviewMode = _a.isInPreviewMode;
21487
21871
  if (!isInPreviewMode)
21488
21872
  return null;
21489
- return (jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full bunny-rounded" }, { children: jsx(Text$9, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
21873
+ return (jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full bunny-rounded" }, { children: jsx(Text$8, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
21490
21874
  };
21491
21875
 
21492
21876
  var PlanManager = function (_a) {
@@ -21646,7 +22030,7 @@ var getFeatureUsage = function (_a) {
21646
22030
  });
21647
22031
  };
21648
22032
 
21649
- var StyledModal = defaultStyled(Modal)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n z-index: 2000;\n\n .ant-modal-content {\n overflow: hidden;\n padding: 0 !important;\n }\n .ant-modal-body {\n height: min-content;\n max-height: ", ";\n overflow: auto;\n display: flex;\n flex-direction: column;\n padding: 0;\n }\n .ant-modal-footer {\n padding: 0 1.5rem 1.5rem;\n }\n"], ["\n z-index: 2000;\n\n .ant-modal-content {\n overflow: hidden;\n padding: 0 !important;\n }\n .ant-modal-body {\n height: min-content;\n max-height: ", ";\n overflow: auto;\n display: flex;\n flex-direction: column;\n padding: 0;\n }\n .ant-modal-footer {\n padding: 0 1.5rem 1.5rem;\n }\n"])), MODAL_MAX_HEIGHT);
22033
+ var StyledModal = defaultStyled(Modal)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n z-index: 2000;\n\n .ant-modal-content {\n overflow: hidden;\n padding: 0 !important;\n }\n .ant-modal-body {\n height: min-content;\n max-height: ", ";\n overflow: auto;\n display: flex;\n flex-direction: column;\n padding: 0;\n }\n .ant-modal-footer {\n padding: 0 1.5rem 1.5rem;\n }\n"], ["\n z-index: 2000;\n\n .ant-modal-content {\n overflow: hidden;\n padding: 0 !important;\n }\n .ant-modal-body {\n height: min-content;\n max-height: ", ";\n overflow: auto;\n display: flex;\n flex-direction: column;\n padding: 0;\n }\n .ant-modal-footer {\n padding: 0 1.5rem 1.5rem;\n }\n"])), MODAL_MAX_HEIGHT);
21650
22034
  var HeaderModalWrapper = function (props) {
21651
22035
  var children = props.children, description = props.description, title = props.title;
21652
22036
  var modalProps = useMemo(function () {
@@ -21658,7 +22042,7 @@ var HeaderModalWrapper = function (props) {
21658
22042
  width: "75%",
21659
22043
  } }, { children: description })))] }))), children] })));
21660
22044
  };
21661
- var templateObject_1$2;
22045
+ var templateObject_1$3;
21662
22046
 
21663
22047
  var isPlural = pkg.isPlural;
21664
22048
  var getDateFormat = function (dataInterval) {
@@ -21736,8 +22120,8 @@ var FeatureBarChart = function (_a) {
21736
22120
  position: { y: -62 },
21737
22121
  }))), jsx(Bar, { dataKey: featureName, fill: brandColor, activeBar: jsx(Rectangle, { fill: brandColor }) })] })));
21738
22122
  };
21739
- var StyledBarChart = defaultStyled(BarChart)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n .recharts-surface {\n overflow: visible;\n }\n"], ["\n .recharts-surface {\n overflow: visible;\n }\n"])));
21740
- var templateObject_1$1;
22123
+ 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"])));
22124
+ var templateObject_1$2;
21741
22125
 
21742
22126
  var canShowQuantitiesInput = function (charge, subscription) {
21743
22127
  // Check if the subscription is active, pending, or in trial,
@@ -21747,7 +22131,7 @@ var canShowQuantitiesInput = function (charge, subscription) {
21747
22131
  var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE;
21748
22132
  var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
21749
22133
  var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL;
21750
- var isFlatPricing = charge.pricingModel === "FLAT";
22134
+ var isFlatPricing = charge.pricingModel === 'FLAT';
21751
22135
  var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
21752
22136
  !isFlatPricing &&
21753
22137
  charge.selfServiceQuantity &&
@@ -21756,9 +22140,7 @@ var canShowQuantitiesInput = function (charge, subscription) {
21756
22140
  return shouldProcessCharge;
21757
22141
  };
21758
22142
  var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
21759
- var quoteChange = quote.quoteChanges.find(function (quoteChange) {
21760
- return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id);
21761
- });
22143
+ var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
21762
22144
  var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
21763
22145
  var charges = [
21764
22146
  {
@@ -21786,6 +22168,49 @@ var canShowSubscriptionActions = function (subscription) {
21786
22168
  return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE ||
21787
22169
  ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
21788
22170
  };
22171
+ // Helper function to check if charge is a discount
22172
+ var isDiscount = function (kind) {
22173
+ return kind === QuoteChangeKind.DISCOUNT || kind === QuoteChangeKind.FREE_PERIOD_DISCOUNT;
22174
+ };
22175
+ var hasPriceTiers = function (charge) {
22176
+ var _a;
22177
+ return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
22178
+ };
22179
+ var getApplicablePriceTier = function (charge, currencyId) {
22180
+ var _a;
22181
+ if (!((_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length))
22182
+ return '';
22183
+ var selectedTier;
22184
+ // For TIERED pricing model: always show the first tier
22185
+ if (charge.pricingModel === PricingModel.TIERED) {
22186
+ selectedTier = charge.priceTiers[0];
22187
+ }
22188
+ // For VOLUME and BANDS pricing models: find the tier that contains the current quantity
22189
+ else if (charge.pricingModel === PricingModel.VOLUME ||
22190
+ charge.pricingModel === PricingModel.BANDS) {
22191
+ // Find the appropriate tier based on quantity
22192
+ selectedTier = charge.priceTiers.find(function (tier, index) {
22193
+ var nextTier = charge.priceTiers[index + 1];
22194
+ var tierStart = tier.starts;
22195
+ var tierEnd = nextTier ? nextTier.starts - 1 : Infinity;
22196
+ return charge.quantity >= tierStart && charge.quantity <= tierEnd;
22197
+ });
22198
+ // Fallback to first tier if no tier found (shouldn't happen with proper data)
22199
+ selectedTier = selectedTier || charge.priceTiers[0];
22200
+ }
22201
+ // Default fallback for any other pricing models
22202
+ else {
22203
+ selectedTier = charge.priceTiers[0];
22204
+ }
22205
+ if (!selectedTier)
22206
+ return '';
22207
+ // Calculate the tier range for display
22208
+ var tierIndex = charge.priceTiers.indexOf(selectedTier);
22209
+ var starts = selectedTier.starts;
22210
+ var nextTier = charge.priceTiers[tierIndex + 1];
22211
+ var ends = nextTier ? nextTier.starts - 1 : '∞';
22212
+ return "".concat(starts, "-").concat(ends, ": ").concat(formatCurrency(selectedTier.price, currencyId));
22213
+ };
21789
22214
 
21790
22215
  var SubscriptionCardActions = function (_a) {
21791
22216
  var _b, _c;
@@ -21798,7 +22223,7 @@ var SubscriptionCardActions = function (_a) {
21798
22223
  canShowSubscriptionActions(subscription) ? (jsxs(Fragment, { children: [canShowCancelButton && (jsx(Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsx(Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), canShowChangePlanButton && (jsx(Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL ? (jsx(Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Upgrade" }))) : null;
21799
22224
  };
21800
22225
 
21801
- var Text$8 = Typography.Text;
22226
+ var Text$7 = Typography.Text;
21802
22227
  var getSubscriptionStatusText = function (subscription) {
21803
22228
  var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
21804
22229
  if (cancellationDate &&
@@ -21827,59 +22252,81 @@ var SubscriptionCardHeader = function (_a) {
21827
22252
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
21828
22253
  return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: {
21829
22254
  backgroundColor: darkMode ? "var(--row-background-dark)" : "",
21830
- } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsx(Text$8, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsx(Text$8, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name })), jsxs(CustomizedTag, __assign({ color: TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsx(Text$8, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
22255
+ } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsx(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name })), jsxs(CustomizedTag, __assign({ color: TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " 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 && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
21831
22256
  };
21832
22257
 
21833
- var BillingPeriodConverter;
21834
- (function (BillingPeriodConverter) {
21835
- BillingPeriodConverter["ONCE"] = "once";
21836
- BillingPeriodConverter["MONTHLY"] = "monthly";
21837
- BillingPeriodConverter["ANNUAL"] = "annually";
21838
- BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
21839
- BillingPeriodConverter["QUARTERLY"] = "quarterly";
21840
- })(BillingPeriodConverter || (BillingPeriodConverter = {}));
21841
22258
  var SubscriptionChargeTotal = function (_a) {
21842
22259
  var charge = _a.charge, subscription = _a.subscription;
21843
- var billingPeriod = charge.billingPeriod && BillingPeriodConverter[charge.billingPeriod];
22260
+ var billingPeriod = charge.billingPeriod && BillingPeriodConverter$1[charge.billingPeriod];
21844
22261
  var isMobile = useIsMobile();
21845
22262
  var currencyId = subscription.currencyId;
21846
22263
  var formattedDiscountedPrice = formatCurrency(charge.price, currencyId);
21847
22264
  var formattedPeriodPrice = formatCurrency(charge.periodPrice, currencyId);
21848
- return (jsx("div", __assign({ className: "bunny-flex bunny-gap-1 ".concat(isMobile ? "bunny-flex-col" : "") }, { children: charge.chargeType === ChargeType.USAGE || charge.trial
21849
- ? "-"
21850
- : charge.kind === SubscriptionChargeKind.DISCOUNT
22265
+ return (jsx("div", __assign({ className: "bunny-flex bunny-gap-1 ".concat(isMobile ? 'bunny-flex-col' : '') }, { children: charge.chargeType === ChargeType.USAGE || charge.trial
22266
+ ? '-'
22267
+ : charge.kind === QuoteChangeKind.DISCOUNT
21851
22268
  ? "-".concat(formattedDiscountedPrice, " ").concat(billingPeriod)
21852
22269
  : "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
21853
22270
  };
21854
22271
 
21855
- var Text$7 = Typography.Text;
22272
+ var formatNumber = function (num, decimals) {
22273
+ if (decimals === void 0) { decimals = 2; }
22274
+ if (decimals && decimals > 20)
22275
+ decimals = 20;
22276
+ if (num === null || num === undefined || !num.toFixed)
22277
+ return num;
22278
+ if (isNaN(decimals))
22279
+ decimals = 2;
22280
+ return parseFloat(num.toFixed(decimals)).toLocaleString(navigator.language, {
22281
+ minimumFractionDigits: decimals,
22282
+ maximumFractionDigits: decimals,
22283
+ });
22284
+ };
22285
+
22286
+ var StyledTable = styled(Table)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n .ant-table-cell {\n border-bottom: none !important;\n }\n"], ["\n .ant-table-cell {\n border-bottom: none !important;\n }\n"])));
22287
+ var TieredDisplayDropdown = function (_a) {
22288
+ var _b;
22289
+ var charge = _a.charge, currencyId = _a.currencyId, truncatedText = _a.truncatedText;
22290
+ var onlyHasOneTier = ((_b = charge.priceTiers) === null || _b === void 0 ? void 0 : _b.length) === 1;
22291
+ var dropdownTrigger = (jsx("div", __assign({ className: "w-full ".concat(onlyHasOneTier ? '' : 'underline cursor-pointer') }, { children: truncatedText })));
22292
+ if (onlyHasOneTier) {
22293
+ return dropdownTrigger;
22294
+ }
22295
+ return (jsx(Dropdown, __assign({ dropdownRender: function () {
22296
+ return (jsx("div", __assign({ className: "rounded border border-solid border-slate-200 bg-white overflow-hidden" }, { children: jsx(StyledTable, { columns: [
22297
+ {
22298
+ dataIndex: 'starts',
22299
+ title: 'From # of units',
22300
+ align: 'right',
22301
+ render: function (_, record, index) {
22302
+ var _a;
22303
+ record = record;
22304
+ var nextRecord = (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a[index + 1];
22305
+ var starts = record.starts;
22306
+ var ends = (nextRecord === null || nextRecord === void 0 ? void 0 : nextRecord.starts) ? nextRecord.starts - 1 : '∞';
22307
+ return (jsxs(Fragment, { children: [formatNumber(starts, 0), " -", ' ', typeof ends === 'number' ? formatNumber(ends, 0) : '∞'] }));
22308
+ },
22309
+ },
22310
+ {
22311
+ dataIndex: 'price',
22312
+ title: 'Unit price',
22313
+ align: 'right',
22314
+ render: function (value) {
22315
+ return jsx(Fragment, { children: formatCurrency(value, currencyId, charge.priceDecimals) });
22316
+ },
22317
+ },
22318
+ ], dataSource: charge.priceTiers, pagination: false, size: "small" }) })));
22319
+ } }, { children: dropdownTrigger })));
22320
+ };
22321
+ var templateObject_1$1;
22322
+
21856
22323
  var SubscriptionChargeUnitPrice = function (_a) {
21857
- var charge = _a.charge, subscription = _a.subscription;
21858
- var darkMode = useContext(BunnyContext).darkMode;
21859
- var _b = useState(false), showPriceTiers = _b[0], setShowPriceTiers = _b[1];
21860
- var displayPriceTiers = (charge === null || charge === void 0 ? void 0 : charge.priceTiers) && charge.pricingModel === PricingModel.TIERED;
21861
- var isDiscount = (charge === null || charge === void 0 ? void 0 : charge.kind) === SubscriptionChargeKind.DISCOUNT;
21862
- if (displayPriceTiers)
21863
- return (jsx(Dropdown, __assign({ dropdownRender: function () {
21864
- var _a;
21865
- return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-rounded bunny-border bunny-border-solid bunny-border-slate-200 bunny-p-2", style: {
21866
- backgroundColor: darkMode
21867
- ? "var(--row-background-dark)"
21868
- : "var(--row-background)",
21869
- } }, { children: jsx("div", __assign({ className: "bunny-grid bunny-grid-cols-2", style: { columnGap: "0.5rem" } }, { children: (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.map(function (tier, index) {
21870
- var _a, _b, _c;
21871
- var ends = ((_b = (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a[index + 1]) === null || _b === void 0 ? void 0 : _b.starts)
21872
- ? ((_c = charge.priceTiers[index + 1]) === null || _c === void 0 ? void 0 : _c.starts) - 1
21873
- : "∞";
21874
- return (jsxs("div", __assign({ className: "bunny-contents" }, { children: [jsxs("div", __assign({ className: "bunny-whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " :"] })), jsx("div", __assign({ className: "bunny-whitespace-nowrap bunny-text-right" }, { children: formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
21875
- }) })) })));
21876
- }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsx("div", __assign({ className: "bunny-cursor-pointer bunny-underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "Hide tiers" : "Show tiers" })) })));
21877
- else if (charge.chargeType === ChargeType.USAGE || charge.trial)
21878
- return jsx(Text$7, { children: "-" });
21879
- else if (isDiscount)
21880
- return (jsxs(Fragment, { children: ["-", formatCurrency(charge.discountedPrice, subscription.currencyId)] }));
21881
- else
21882
- return (jsx(Fragment, { children: formatCurrency(charge.discountedPrice, subscription.currencyId) }));
22324
+ var charge = _a.charge, currencyId = _a.currencyId;
22325
+ var price = charge.trial
22326
+ ? '-'
22327
+ : formatCurrency(charge.discountedPrice, currencyId, charge.priceDecimals);
22328
+ var isChargeDiscount = isDiscount(charge.kind);
22329
+ return (jsx(Fragment, { children: hasPriceTiers(charge) ? (jsx(TieredDisplayDropdown, { charge: charge, currencyId: currencyId, truncatedText: "".concat(charge.kind === QuoteChangeKind.PRICE_UPDATE ? 'new ' : '').concat(getApplicablePriceTier(charge, currencyId)) })) : isChargeDiscount ? ("-".concat(price)) : (price) }));
21883
22330
  };
21884
22331
 
21885
22332
  var Text$6 = Typography.Text;
@@ -21896,26 +22343,26 @@ var SubscriptionsListCell = function (_a) {
21896
22343
 
21897
22344
  var CARD_COLUMNS = [
21898
22345
  {
21899
- title: "CHARGE",
21900
- width: "minmax(min-content, 26%)",
22346
+ title: 'CHARGE',
22347
+ width: 'minmax(min-content, 26%)',
21901
22348
  },
21902
22349
  {
21903
- title: "PERIOD",
21904
- width: "minmax(min-content, 20%)",
22350
+ title: 'PERIOD',
22351
+ width: 'minmax(min-content, 20%)',
21905
22352
  },
21906
22353
  {
21907
- className: "text-right",
21908
- title: "QUANTITY",
22354
+ className: 'text-right',
22355
+ title: 'QUANTITY',
21909
22356
  width: "minmax(min-content, 18%)",
21910
22357
  },
21911
22358
  {
21912
- className: "text-right",
21913
- title: "UNIT PRICE",
22359
+ className: 'text-right',
22360
+ title: 'UNIT PRICE',
21914
22361
  width: "minmax(min-content, 18%)",
21915
22362
  },
21916
22363
  {
21917
- className: "text-right",
21918
- title: "TOTAL",
22364
+ className: 'text-right',
22365
+ title: 'TOTAL',
21919
22366
  width: "minmax(min-content, 18%)",
21920
22367
  },
21921
22368
  ];
@@ -21925,13 +22372,13 @@ var SubscriptionCardDesktop = function (_a) {
21925
22372
  var shadow = useContext(SubscriptionsContext).shadow;
21926
22373
  // Derived state
21927
22374
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
21928
- 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: {
21929
- gridColumn: "1 / 5",
21930
- width: "calc(100% + 32px)",
21931
- transform: "translateX(-16px)",
22375
+ 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: {
22376
+ gridColumn: '1 / 5',
22377
+ width: 'calc(100% + 32px)',
22378
+ transform: 'translateX(-16px)',
21932
22379
  } }), jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
21933
- gridTemplateColumns: CARD_COLUMNS.map(function (column) { return column.width; }).join(" "),
21934
- rowGap: "0.75rem",
22380
+ gridTemplateColumns: CARD_COLUMNS.map(function (column) { return column.width; }).join(' '),
22381
+ rowGap: '0.75rem',
21935
22382
  } }, { children: [jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), subscription.charges.map(function (charge, chargeIndex) {
21936
22383
  if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
21937
22384
  return null;
@@ -21951,7 +22398,7 @@ var SubscriptionCardDesktopRow = function (_a) {
21951
22398
  var chargePeriod = "".concat(formatDate(charge.startDate), " - ").concat(formatDate(charge.endDate));
21952
22399
  // Queries
21953
22400
  var data = useQuery({
21954
- queryKey: ["getFeatureUsage", charge.id, charge.startDate, charge.endDate],
22401
+ queryKey: ['getFeatureUsage', charge.id, charge.startDate, charge.endDate],
21955
22402
  queryFn: function () {
21956
22403
  return getFeatureUsage({
21957
22404
  endDate: charge.endDate,
@@ -21965,18 +22412,18 @@ var SubscriptionCardDesktopRow = function (_a) {
21965
22412
  }).data;
21966
22413
  var isRampFirstRow = isRamp && chargeIndex === 0;
21967
22414
  var isTrial = charge.trial;
21968
- var isDiscount = charge.kind === SubscriptionChargeKind.DISCOUNT;
22415
+ var isDiscount = charge.kind === QuoteChangeKind.DISCOUNT;
21969
22416
  var dontShowChargeName = (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId) === charge.priceListChargeId &&
21970
22417
  !isDiscount &&
21971
22418
  (!isTrial || prevCharge.trial) &&
21972
22419
  (isTrial || !prevCharge.trial);
21973
- return (jsxs("div", __assign({ className: "bunny-contents" }, { children: [(isRampFirstRow || !isRamp) && (jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? "1/-1" : "1" }, { children: jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isDiscount ? "bunny-pl-4" : "") }, { children: jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : "" }) })) }))), jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsx("div", { children: chargePeriod }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === SubscriptionChargeKind.DISCOUNT
21974
- ? ""
22420
+ return (jsxs("div", __assign({ className: "bunny-contents" }, { children: [(isRampFirstRow || !isRamp) && (jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? '1/-1' : '1' }, { children: jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isDiscount ? 'bunny-pl-4' : '') }, { children: jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : '' }) })) }))), jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsx("div", { children: chargePeriod }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === QuoteChangeKind.DISCOUNT
22421
+ ? ''
21975
22422
  : charge.chargeType === ChargeType.USAGE
21976
22423
  ? data && jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
21977
22424
  : charge.isAmendment
21978
22425
  ? "+".concat((_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString())
21979
- : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
22426
+ : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
21980
22427
  };
21981
22428
 
21982
22429
  var Text$4 = Typography.Text;
@@ -21987,19 +22434,19 @@ var SubscriptionCardCellMobile = function (_a) {
21987
22434
 
21988
22435
  var CHARGE_COLUMNS = [
21989
22436
  {
21990
- title: "CHARGE",
22437
+ title: 'CHARGE',
21991
22438
  },
21992
22439
  {
21993
- className: "text-right",
21994
- title: "QUANTITY",
22440
+ className: 'text-right',
22441
+ title: 'QUANTITY',
21995
22442
  },
21996
22443
  {
21997
- className: "text-right",
21998
- title: "UNIT PRICE",
22444
+ className: 'text-right',
22445
+ title: 'UNIT PRICE',
21999
22446
  },
22000
22447
  {
22001
- className: "text-right",
22002
- title: "TOTAL",
22448
+ className: 'text-right',
22449
+ title: 'TOTAL',
22003
22450
  },
22004
22451
  ];
22005
22452
  var SubscriptionCard = function (_a) {
@@ -22008,26 +22455,22 @@ var SubscriptionCard = function (_a) {
22008
22455
  var darkMode = useContext(BunnyContext).darkMode;
22009
22456
  // Derived state
22010
22457
  var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
22011
- var backgroundColor = darkMode
22012
- ? "var(--row-background-dark)"
22013
- : "var(--row-background)";
22458
+ var backgroundColor = darkMode ? 'var(--row-background-dark)' : 'var(--row-background)';
22014
22459
  return (jsx(Card, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-p-4" }, { children: [jsx(SubscriptionCardHeader, { subscription: subscription }), jsx(Divider, { className: "bunny-my-4", style: {
22015
- gridColumn: "1 / -1",
22016
- width: "calc(100% + 32px)",
22017
- transform: "translateX(-16px)",
22460
+ gridColumn: '1 / -1',
22461
+ width: 'calc(100% + 32px)',
22462
+ transform: 'translateX(-16px)',
22018
22463
  } }), jsxs("div", __assign({ className: "bunny-grid", style: {
22019
- columnGap: "0.5rem",
22464
+ columnGap: '0.5rem',
22020
22465
  gridTemplateColumns: "1fr auto auto auto",
22021
- rowGap: "0.75rem",
22466
+ rowGap: '0.75rem',
22022
22467
  backgroundColor: backgroundColor,
22023
- } }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsx(SubscriptionCardCellMobile, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }), subscription.charges.map(function (charge, chargeIndex) {
22468
+ } }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsx(SubscriptionCardCellMobile, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: '11px' } }, { children: subscriptionColumn.title }), index)); }), subscription.charges.map(function (charge, chargeIndex) {
22024
22469
  if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
22025
22470
  return null;
22026
22471
  var isRamp = charge.isRamp;
22027
22472
  var chargePeriod = "".concat(formatDate(charge.startDate), " - ").concat(formatDate(charge.endDate));
22028
- return (jsxs("div", __assign({ className: "bunny-contents" }, { children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxs(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? "1/-1" : "1" } }, { children: [jsx("span", { children: charge.name }), !isRamp ? " - ".concat(chargePeriod) : ""] }))), isRamp && (jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className }, { children: "- ".concat(chargePeriod) }))), jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[1].className }, { children: charge.kind === SubscriptionChargeKind.DISCOUNT
22029
- ? ""
22030
- : charge.quantity })), jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[2].className }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[3].className }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] }), chargeIndex));
22473
+ return (jsxs("div", __assign({ className: "bunny-contents" }, { children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxs(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? '1/-1' : '1' } }, { children: [jsx("span", { children: charge.name }), !isRamp ? " - ".concat(chargePeriod) : ''] }))), isRamp && (jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className }, { children: "- ".concat(chargePeriod) }))), jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[1].className }, { children: charge.kind === QuoteChangeKind.DISCOUNT ? '' : charge.quantity })), jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[2].className }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[3].className }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] }), chargeIndex));
22031
22474
  })] }))] })) }));
22032
22475
  };
22033
22476