@bunnyapp/components 1.6.0-beta.15 → 1.6.0-beta.16
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.
- package/dist/cjs/index.js +290 -120
- package/dist/cjs/types/src/components/BunnyProvider.d.ts +0 -2
- package/dist/cjs/types/src/components/Subscriptions/Subscriptions.d.ts +0 -4
- package/dist/cjs/types/src/components/Subscriptions/SubscriptionsListContainer.d.ts +0 -4
- package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridRow.d.ts +1 -5
- package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/QuantityDrawer.d.ts +1 -4
- package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/QuoteChangeSummarySection.d.ts +11 -6
- package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/context/quoteIdContext.d.ts +5 -0
- package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/fragments/{QuantityDrawerQuoteFragment.d.ts → QuantityDrawer_QuoteFragment.d.ts} +4 -0
- package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/hooks/useQuoteQueryData.d.ts +3 -3
- package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/hooks/useSetQuoteQueryData.d.ts +2 -2
- package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +1 -6
- package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/{QuantityInput.d.ts → quantityInput/QuantityInput.d.ts} +1 -8
- package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/quantityInput/fragments/QuantityInput_QuoteFragment.d.ts +27 -0
- package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/utils/utils.d.ts +2 -1
- package/dist/cjs/types/src/hooks/useAllErrorFormats.d.ts +1 -0
- package/dist/cjs/types/src/hooks/useCreateQueryClient.d.ts +2 -0
- package/dist/cjs/types/src/utils/createStateContext.d.ts +11 -0
- package/dist/cjs/types/src/utils/pricePickerUtils.d.ts +1 -1
- package/dist/esm/index.js +297 -127
- package/dist/esm/types/src/components/BunnyProvider.d.ts +0 -2
- package/dist/esm/types/src/components/Subscriptions/Subscriptions.d.ts +0 -4
- package/dist/esm/types/src/components/Subscriptions/SubscriptionsListContainer.d.ts +0 -4
- package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridRow.d.ts +1 -5
- package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/QuantityDrawer.d.ts +1 -4
- package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/QuoteChangeSummarySection.d.ts +11 -6
- package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/context/quoteIdContext.d.ts +5 -0
- package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/fragments/{QuantityDrawerQuoteFragment.d.ts → QuantityDrawer_QuoteFragment.d.ts} +4 -0
- package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/hooks/useQuoteQueryData.d.ts +3 -3
- package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/hooks/useSetQuoteQueryData.d.ts +2 -2
- package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +1 -6
- package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/{QuantityInput.d.ts → quantityInput/QuantityInput.d.ts} +1 -8
- package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/quantityInput/fragments/QuantityInput_QuoteFragment.d.ts +27 -0
- package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/utils/utils.d.ts +2 -1
- package/dist/esm/types/src/hooks/useAllErrorFormats.d.ts +1 -0
- package/dist/esm/types/src/hooks/useCreateQueryClient.d.ts +2 -0
- package/dist/esm/types/src/utils/createStateContext.d.ts +11 -0
- package/dist/esm/types/src/utils/pricePickerUtils.d.ts +1 -1
- package/package.json +1 -1
- package/dist/cjs/types/src/utils/GraphQLClient.d.ts +0 -2
- package/dist/esm/types/src/utils/GraphQLClient.d.ts +0 -2
- /package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/{queries → mutations}/quoteChargeCreate.d.ts +0 -0
- /package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/{queries → mutations}/quoteChargeUpdate.d.ts +0 -0
- /package/dist/cjs/types/src/components/Subscriptions/quantityChangeDrawer/{queries → mutations}/quoteSubscriptionUpdate.d.ts +0 -0
- /package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/{queries → mutations}/quoteChargeCreate.d.ts +0 -0
- /package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/{queries → mutations}/quoteChargeUpdate.d.ts +0 -0
- /package/dist/esm/types/src/components/Subscriptions/quantityChangeDrawer/{queries → mutations}/quoteSubscriptionUpdate.d.ts +0 -0
package/dist/esm/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, Fragment as Fragment$1 } from 'react';
|
|
2
|
+
import { isValidElement, createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, Fragment as Fragment$1 } from 'react';
|
|
3
3
|
import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
|
|
4
|
-
import {
|
|
4
|
+
import { useErrorNotification, DEFAULT_CONFIG, createClientDevHeaders as createClientDevHeaders$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, QueryKeyFactory as QueryKeyFactory$1, useIsMobile, isColorTooDark, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, request as request$1, PRIMARY_COLOR, invokePlugin, useAllErrorFormats as useAllErrorFormats$1, formatCurrency as formatCurrency$1, GRAY_500, GRAY_200, useSuccessNotification, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, QuoteChangeKind, SLATE_500, Lists, getAccount, StringUtils, SubscriptionState as SubscriptionState$2, ChargeType, PERIOD_LABELS, MODAL_MAX_HEIGHT, DataInterval, PricingStyle, SLATE_100 } from '@bunnyapp/common';
|
|
5
5
|
import { ConfigProvider, Spin, Typography, Button, theme as theme$1, Tag, Dropdown, Input, Modal, Checkbox, Skeleton, Collapse, Form, Tooltip, Drawer, Card as Card$1, Select, Divider, Image, Popconfirm, Table, Radio, Space, Switch } from 'antd';
|
|
6
6
|
import { Markup } from 'interweave';
|
|
7
|
-
import request
|
|
7
|
+
import request from 'graphql-request';
|
|
8
8
|
import { QueryClient, QueryClientProvider, useQuery, useQueryClient, useMutation, keepPreviousData } from '@tanstack/react-query';
|
|
9
9
|
import theme from 'antd/lib/theme/index.js';
|
|
10
10
|
import { RecoilRoot } from 'recoil';
|
|
@@ -49,8 +49,99 @@ function styleInject(css, ref) {
|
|
|
49
49
|
var css_248z = ":root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n box-sizing: border-box;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n position: fixed;\n}\n.bunny-absolute {\n position: absolute;\n}\n.bunny-relative {\n position: relative;\n}\n.bunny-sticky {\n position: sticky;\n}\n.bunny-bottom-0 {\n bottom: 0px;\n}\n.bunny-bottom-4 {\n bottom: 1rem;\n}\n.bunny-left-0 {\n left: 0px;\n}\n.bunny-right-0 {\n right: 0px;\n}\n.bunny-top-0 {\n top: 0px;\n}\n.bunny-col-span-1 {\n grid-column: span 1 / span 1;\n}\n.bunny-col-span-full {\n grid-column: 1 / -1;\n}\n.bunny-m-0 {\n margin: 0px;\n}\n.bunny-mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.bunny-mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.bunny-mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.bunny-my-0 {\n margin-top: 0px;\n margin-bottom: 0px;\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-3 {\n margin-bottom: 0.75rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-ml-auto {\n margin-left: auto;\n}\n.bunny-mt-0 {\n margin-top: 0px;\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-mt-5 {\n margin-top: 1.25rem;\n}\n.bunny-box-border {\n box-sizing: border-box;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-0\\.5 {\n height: 0.125rem;\n}\n.bunny-h-1\\/2 {\n height: 50%;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-h-screen {\n height: 100vh;\n}\n.bunny-max-h-\\[calc\\(100vh-10rem\\)\\] {\n max-height: calc(100vh - 10rem);\n}\n.bunny-min-h-0 {\n min-height: 0px;\n}\n.bunny-w-0\\.5 {\n width: 0.125rem;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-3\\/5 {\n width: 60%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-w-screen {\n width: 100vw;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-flex-wrap {\n flex-wrap: wrap;\n}\n.bunny-items-start {\n align-items: flex-start;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-y-auto {\n overflow-y: auto;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-text-nowrap {\n text-wrap: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-gray-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-transparent {\n background-color: transparent;\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-2 {\n padding: 0.5rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-12 {\n padding-left: 3rem;\n padding-right: 3rem;\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-1 {\n padding-left: 0.25rem;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pr-4 {\n padding-right: 1rem;\n}\n.bunny-pt-1 {\n padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-\\[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-start {\n text-align: start;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem;\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-sm\\/5 {\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-text-xs\\/3 {\n font-size: 0.75rem;\n line-height: 0.75rem;\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-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.hover\\:bunny-text-orange-400:hover {\n --tw-text-opacity: 1;\n color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n margin: 0 !important;\n}\n.bunny-components .ant-upload {\n border-radius: 0.5rem !important;\n}\n.bunny-components .ant-row {\n margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n font-size: 0.875rem !important;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n border: none !important;\n}\n.bunny-components .ant-form-item {\n margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n text-transform: none !important;\n font-size: 0.75rem;\n padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n width: 100%;\n color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n font-size: 11px;\n min-height: 11px;\n line-height: 11px;\n padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n font-size: smaller;\n}\n.bunny-components .ant-tree {\n font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-page-header {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n}\n.bunny-components .ant-tag {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 14px;\n font-weight: 500;\n white-space: nowrap;\n padding-inline-start: 0.625rem;\n padding-inline-end: 0.625rem;\n margin: 0;\n}\n.bunny-components .ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n color: #6b7280 !important;\n background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.bunny-components .ant-picker {\n width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n background: #f8fafc;\n}\n.bunny-components .vista-link {\n color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n text-decoration: underline;\n cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n padding: 0;\n text-align: center;\n font-size: 0.875rem !important;\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n display: flex !important;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n background: #eef0f2 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n border: none;\n}\n.bunny-components .ant-btn {\n box-shadow: none;\n text-shadow: none;\n outline: none !important;\n line-height: 1;\n font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n color: #94a3b8;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n background-color: rgba(113, 125, 148, 0.1) !important;\n border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n display: flex !important;\n align-items: center;\n}\n.bunny-components .ant-select-item {\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n display: flex;\n align-items: center;\n white-space: nowrap !important;\n overflow: visible !important;\n text-overflow: default !important;\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n display: none;\n}\n.bunny-components .ant-layout-header {\n height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n width: inherit;\n position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n gap: 4px !important;\n}\n.bunny-components .group {\n display: flex;\n flex-direction: row;\n flex-flow: row wrap;\n box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n top: 96px !important;\n animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n color: #ffffff;\n background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n border-color: #ff5833 !important;\n background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n border-bottom: 2px solid transparent !important;\n padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n display: none !important;\n}\n.bunny-components .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n border-radius: 8px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n font-size: 14px !important;\n overflow-wrap: break-word;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff5833 !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
|
|
50
50
|
styleInject(css_248z);
|
|
51
51
|
|
|
52
|
+
const IGNORE_ERRORS = ['Invalid or missing authorization', '["Not found"]'];
|
|
53
|
+
/**
|
|
54
|
+
* Extracts errors from nested data structure
|
|
55
|
+
* @param data - The response data object
|
|
56
|
+
* @param mutationName - The mutation/query name to look for
|
|
57
|
+
* @returns Array of error messages or null
|
|
58
|
+
*/
|
|
59
|
+
const extractNestedErrors = (data, mutationName) => {
|
|
60
|
+
if (!data || !mutationName)
|
|
61
|
+
return null;
|
|
62
|
+
const mutationData = data[mutationName];
|
|
63
|
+
if (!mutationData)
|
|
64
|
+
return null;
|
|
65
|
+
const errors = mutationData.errors;
|
|
66
|
+
if (!errors)
|
|
67
|
+
return null;
|
|
68
|
+
// Handle stringified JSON array
|
|
69
|
+
if (typeof errors === 'string') {
|
|
70
|
+
try {
|
|
71
|
+
const parsedErrors = JSON.parse(errors);
|
|
72
|
+
return Array.isArray(parsedErrors) ? parsedErrors : [parsedErrors];
|
|
73
|
+
}
|
|
74
|
+
catch (_a) {
|
|
75
|
+
return [errors];
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
// Handle array of errors
|
|
79
|
+
if (Array.isArray(errors)) {
|
|
80
|
+
return errors;
|
|
81
|
+
}
|
|
82
|
+
return null;
|
|
83
|
+
};
|
|
84
|
+
const useAllErrorFormats = () => {
|
|
85
|
+
const showErrorNotification = useErrorNotification();
|
|
86
|
+
return (error, mutationName) => {
|
|
87
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
88
|
+
// Fall back to existing error handling logic
|
|
89
|
+
const responseErrors = ((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors) || null;
|
|
90
|
+
if (IGNORE_ERRORS.includes((_d = (_c = (_b = error === null || error === void 0 ? void 0 : error.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.message)) {
|
|
91
|
+
return error;
|
|
92
|
+
}
|
|
93
|
+
// For errors like this:
|
|
94
|
+
// {
|
|
95
|
+
// "data": {
|
|
96
|
+
// "accountReset": {
|
|
97
|
+
// "errors": "[\"Missing required permission: write, can't access mutation AccountReset\"]"
|
|
98
|
+
// }
|
|
99
|
+
// }
|
|
100
|
+
// }
|
|
101
|
+
if ((error === null || error === void 0 ? void 0 : error.data) && mutationName) {
|
|
102
|
+
const nestedErrors = extractNestedErrors(error.data, mutationName);
|
|
103
|
+
if (nestedErrors && nestedErrors.length > 0) {
|
|
104
|
+
// Check if we should ignore these errors
|
|
105
|
+
if (IGNORE_ERRORS.some(ignoreError => nestedErrors.includes(ignoreError))) {
|
|
106
|
+
return error;
|
|
107
|
+
}
|
|
108
|
+
// Show each nested error
|
|
109
|
+
for (const errorMessage of nestedErrors) {
|
|
110
|
+
showErrorNotification(errorMessage, null);
|
|
111
|
+
}
|
|
112
|
+
return error;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
if (responseErrors) {
|
|
116
|
+
for (let index in responseErrors) {
|
|
117
|
+
const error = (_e = responseErrors[index]) === null || _e === void 0 ? void 0 : _e.message;
|
|
118
|
+
showErrorNotification(error, null);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
else if ((_f = error === null || error === void 0 ? void 0 : error.response) === null || _f === void 0 ? void 0 : _f.error) {
|
|
122
|
+
showErrorNotification(error.response.exception, error.response.error);
|
|
123
|
+
}
|
|
124
|
+
else if ((error === null || error === void 0 ? void 0 : error.constructor) === Array) {
|
|
125
|
+
for (let index in error)
|
|
126
|
+
showErrorNotification(error[index].message, null);
|
|
127
|
+
}
|
|
128
|
+
else if ((_g = error === null || error === void 0 ? void 0 : error.response) === null || _g === void 0 ? void 0 : _g.message) {
|
|
129
|
+
showErrorNotification(error.response.message);
|
|
130
|
+
}
|
|
131
|
+
else if (error === null || error === void 0 ? void 0 : error.message) {
|
|
132
|
+
showErrorNotification(error.message);
|
|
133
|
+
}
|
|
134
|
+
else if (typeof error === 'string' || (error !== null && isValidElement(error))) {
|
|
135
|
+
showErrorNotification(error);
|
|
136
|
+
}
|
|
137
|
+
else {
|
|
138
|
+
showErrorNotification('Unknown error notification', null);
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
};
|
|
142
|
+
|
|
52
143
|
// This will be replaced at build time by rollup-plugin-replace
|
|
53
|
-
const PACKAGE_VERSION = '1.6.0-beta.
|
|
144
|
+
const PACKAGE_VERSION = '1.6.0-beta.15';
|
|
54
145
|
const createRequestHeaders = (token) => {
|
|
55
146
|
const headers = createClientDevHeaders({ token });
|
|
56
147
|
// Add the components version header
|
|
@@ -69,15 +160,22 @@ const useGraphQLRequest = () => async (query, apiHost, token, variables) => {
|
|
|
69
160
|
}
|
|
70
161
|
};
|
|
71
162
|
const gqlRequest = async ({ query, apiHost, token, vars, isInPreviewMode, }) => {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
163
|
+
const handleAllErrorFormats = useAllErrorFormats();
|
|
164
|
+
try {
|
|
165
|
+
const { graphqlEndpoint } = DEFAULT_CONFIG;
|
|
166
|
+
const baseHeaders = createClientDevHeaders({
|
|
167
|
+
token: isInPreviewMode ? undefined : token,
|
|
168
|
+
componentsVersion: PACKAGE_VERSION,
|
|
169
|
+
});
|
|
170
|
+
const requestHeaders = {
|
|
171
|
+
...baseHeaders,
|
|
172
|
+
};
|
|
173
|
+
return await request(`${apiHost}${graphqlEndpoint}`, query, vars, requestHeaders);
|
|
174
|
+
}
|
|
175
|
+
catch (error) {
|
|
176
|
+
handleAllErrorFormats(error);
|
|
177
|
+
return null;
|
|
178
|
+
}
|
|
81
179
|
};
|
|
82
180
|
const createClientDevHeaders = ({ token, componentsVersion, }) => {
|
|
83
181
|
return createClientDevHeaders$1({
|
|
@@ -166,22 +264,12 @@ const getBranding = async ({ token, apiHost }) => {
|
|
|
166
264
|
return response === null || response === void 0 ? void 0 : response.entityBranding;
|
|
167
265
|
};
|
|
168
266
|
|
|
169
|
-
const createGraphQLClient = (apiHost, token) => new GraphQLClient(apiHost + "/graphql", {
|
|
170
|
-
headers: token
|
|
171
|
-
? {
|
|
172
|
-
Authorization: token,
|
|
173
|
-
}
|
|
174
|
-
: undefined,
|
|
175
|
-
});
|
|
176
|
-
|
|
177
267
|
const BunnyContext = createContext({});
|
|
178
268
|
const extraQueryClient = new QueryClient();
|
|
179
269
|
// Every component shares similar props and functionality, which this wrapper handles.
|
|
180
270
|
function BunnyProvider({ children, darkMode = false, queryClient, apiHost, token, onTokenExpired, configProviderProps, }) {
|
|
181
|
-
const graphQLClient = createGraphQLClient(apiHost || '', token);
|
|
182
271
|
return (jsx(BunnyContext.Provider, { value: {
|
|
183
272
|
darkMode,
|
|
184
|
-
graphQLClient,
|
|
185
273
|
apiHost,
|
|
186
274
|
token,
|
|
187
275
|
onTokenExpired,
|
|
@@ -935,7 +1023,7 @@ function usePay({ onPaymentSuccess, onPaymentError, quote, invoice, storedPaymen
|
|
|
935
1023
|
return { pay };
|
|
936
1024
|
}
|
|
937
1025
|
|
|
938
|
-
const handleAllErrorFormats = useAllErrorFormats();
|
|
1026
|
+
const handleAllErrorFormats = useAllErrorFormats$1();
|
|
939
1027
|
const showErrorNotification$5 = useErrorNotification();
|
|
940
1028
|
const ActualCheckoutFooter = ({ quote, invoice, onPaymentSuccess, onPaymentHoldSuccess, plugin, paymentHoldOptions, }) => {
|
|
941
1029
|
const isMobile = useIsMobile();
|
|
@@ -19102,7 +19190,7 @@ function ActualInvoice({ hidePaymentForm }) {
|
|
|
19102
19190
|
const token = useToken();
|
|
19103
19191
|
// Hooks
|
|
19104
19192
|
const showSuccessNotification = useSuccessNotification();
|
|
19105
|
-
const handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
|
|
19193
|
+
const handleAllErrorFormats = useAllErrorFormats$1(onTokenExpired);
|
|
19106
19194
|
// Queries
|
|
19107
19195
|
const { data: formattedInvoice } = useQuery({
|
|
19108
19196
|
queryKey: QueryKeyFactory$1.default.createFormattedInvoiceKey({ id, token }),
|
|
@@ -19463,7 +19551,7 @@ const PandadocPollingModal = ({ isVisible, setVisible, id }) => {
|
|
|
19463
19551
|
}, apiHost || '', () => {
|
|
19464
19552
|
console.log('graphQLMutation onError not yet implemented');
|
|
19465
19553
|
});
|
|
19466
|
-
const handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
|
|
19554
|
+
const handleAllErrorFormats = useAllErrorFormats$1(onTokenExpired);
|
|
19467
19555
|
const [numberOfPolls, setNumberOfPolls] = useState(0);
|
|
19468
19556
|
const [infoMessage, setInfoMessage] = useState('');
|
|
19469
19557
|
useEffect(() => {
|
|
@@ -20007,7 +20095,7 @@ function Transactions({ transactionComponent, showSearchBar = true, showTitle =
|
|
|
20007
20095
|
const token = useToken();
|
|
20008
20096
|
// Local state
|
|
20009
20097
|
const [search, setSearch] = useState('');
|
|
20010
|
-
const filterValue = filter || (search.length > 0 ? `filter: "transaction.
|
|
20098
|
+
const filterValue = filter || (search.length > 0 ? `filter: "transaction.amount is ${Number(search)}"` : '');
|
|
20011
20099
|
// Queries
|
|
20012
20100
|
const { data } = useQuery({
|
|
20013
20101
|
queryKey: ['transactions', token, filterValue],
|
|
@@ -20078,11 +20166,13 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
|
|
|
20078
20166
|
}
|
|
20079
20167
|
return (jsxs("div", { style: style, children: [jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsx(Text$q, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsx("div", {}) // Empty div so justify-between works
|
|
20080
20168
|
), showSearchBar && (jsx("div", { className: `${isMobile ? 'bunny-w-full' : ''}`, children: jsx(Input, { className: searchBarClassName ? searchBarClassName : '', onChange: e => {
|
|
20081
|
-
|
|
20169
|
+
const value = e.target.value;
|
|
20170
|
+
// Allow empty string, numbers, and decimal point
|
|
20171
|
+
if (value !== '' && (isNaN(Number(value)) || !/^-?\d*\.?\d*$/.test(value))) {
|
|
20082
20172
|
return;
|
|
20083
20173
|
}
|
|
20084
|
-
onSearchValueChanged(
|
|
20085
|
-
}, prefix: jsx(SearchOutlined, {}), placeholder: "Search by
|
|
20174
|
+
onSearchValueChanged(value);
|
|
20175
|
+
}, prefix: jsx(SearchOutlined, {}), placeholder: "Search by amount", style: {
|
|
20086
20176
|
minWidth: '300px',
|
|
20087
20177
|
}, value: search }) }))] })) : null, jsx("div", { className: `bunny-grid bunny-w-full bunny-rounded-md bunny-overflow-auto ${shadow}`, style: {
|
|
20088
20178
|
gridTemplateColumns: gridTemplateColumns(),
|
|
@@ -22461,18 +22551,57 @@ const DrawerHeader = ({ description, onClose, title, closeButtonClassName, }) =>
|
|
|
22461
22551
|
return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-4", children: [jsxs("div", { className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2", children: [jsx(Text$j, { className: "bunny-text-xl bunny-font-normal", children: title }), onClose ? (jsx("button", { id: "closePayment", onClick: onClose, className: closeButtonClassName, children: jsx(CloseOutlined, {}) })) : null] }), description && jsx("div", { className: "bunny-text-sm bunny-font-medium", children: description })] }));
|
|
22462
22552
|
};
|
|
22463
22553
|
|
|
22464
|
-
|
|
22465
|
-
|
|
22466
|
-
|
|
22467
|
-
|
|
22468
|
-
|
|
22469
|
-
|
|
22554
|
+
/**
|
|
22555
|
+
* Creates a context and provider for a state value
|
|
22556
|
+
* @param useValue - A function that returns the state value
|
|
22557
|
+
* @returns A tuple containing the provider and the context value
|
|
22558
|
+
* @example take a look at how this is used in the quoteIdContext in the QuantityDrawer
|
|
22559
|
+
*/
|
|
22560
|
+
const createStateContext = (useValue) => {
|
|
22561
|
+
const StateContext = createContext(null);
|
|
22562
|
+
const StateProvider = ({ initialValue, children, }) => jsxs(StateContext.Provider, { value: useValue(initialValue), children: [" ", children, " "] });
|
|
22563
|
+
const useContextState = () => {
|
|
22564
|
+
const value = useContext(StateContext);
|
|
22565
|
+
if (value === null) {
|
|
22566
|
+
throw new Error('Provider missing');
|
|
22567
|
+
}
|
|
22568
|
+
return value;
|
|
22569
|
+
};
|
|
22570
|
+
return [StateProvider, useContextState];
|
|
22571
|
+
};
|
|
22572
|
+
|
|
22573
|
+
const useQuoteIdState = (id) => useState(id);
|
|
22574
|
+
const [QuoteIdProvider, useQuoteId] = createStateContext(useQuoteIdState);
|
|
22575
|
+
|
|
22576
|
+
const useQuoteQueryData = (quoteId) => {
|
|
22577
|
+
const token = useToken();
|
|
22578
|
+
const { data } = useQuery({
|
|
22579
|
+
queryKey: QueryKeyFactory$1.default.createObjectKey({
|
|
22580
|
+
id: quoteId,
|
|
22581
|
+
objectName: 'editingQuote',
|
|
22582
|
+
token,
|
|
22583
|
+
}),
|
|
22584
|
+
queryFn: () => {
|
|
22585
|
+
// This queryFn should never be called if data is set via setQueryData
|
|
22586
|
+
// If called, it means data doesn't exist - return undefined
|
|
22587
|
+
// In practice, data should always be set via setQueryData before this hook is used
|
|
22588
|
+
return undefined;
|
|
22589
|
+
},
|
|
22590
|
+
enabled: false,
|
|
22591
|
+
staleTime: Infinity, // Never consider data stale, only use cache
|
|
22592
|
+
gcTime: Infinity, // Never garbage collect this data
|
|
22593
|
+
// Don't refetch if data exists in cache
|
|
22594
|
+
refetchOnMount: false,
|
|
22595
|
+
refetchOnWindowFocus: false,
|
|
22596
|
+
refetchOnReconnect: false,
|
|
22597
|
+
});
|
|
22598
|
+
return data;
|
|
22599
|
+
};
|
|
22470
22600
|
|
|
22471
22601
|
const useSetQuoteQueryData = () => {
|
|
22472
22602
|
const token = useToken();
|
|
22473
22603
|
const queryClient = useQueryClient();
|
|
22474
|
-
const setQuoteQueryData = (quoteId,
|
|
22475
|
-
const quote = readFragment(QuantityDrawer_QuoteFragment, maskedQuote);
|
|
22604
|
+
const setQuoteQueryData = (quoteId, quote) => {
|
|
22476
22605
|
queryClient.setQueryData(QueryKeyFactory$1.default.createObjectKey({
|
|
22477
22606
|
id: quoteId,
|
|
22478
22607
|
objectName: 'editingQuote',
|
|
@@ -22482,6 +22611,58 @@ const useSetQuoteQueryData = () => {
|
|
|
22482
22611
|
return { setQuoteQueryData };
|
|
22483
22612
|
};
|
|
22484
22613
|
|
|
22614
|
+
const QuantityInput_QuoteFragment = t(`
|
|
22615
|
+
fragment QuantityInput_QuoteFragment on Quote {
|
|
22616
|
+
id
|
|
22617
|
+
quoteChanges {
|
|
22618
|
+
id
|
|
22619
|
+
priceList {
|
|
22620
|
+
id
|
|
22621
|
+
}
|
|
22622
|
+
charges {
|
|
22623
|
+
id
|
|
22624
|
+
priceListCharge {
|
|
22625
|
+
id
|
|
22626
|
+
}
|
|
22627
|
+
}
|
|
22628
|
+
subscription {
|
|
22629
|
+
charges {
|
|
22630
|
+
id
|
|
22631
|
+
priceListCharge {
|
|
22632
|
+
id
|
|
22633
|
+
}
|
|
22634
|
+
}
|
|
22635
|
+
}
|
|
22636
|
+
}
|
|
22637
|
+
}
|
|
22638
|
+
`, []);
|
|
22639
|
+
|
|
22640
|
+
const QuoteChangeSummarySection_QuoteFragment = t(`
|
|
22641
|
+
fragment QuoteChangeSummarySection_QuoteFragment on Quote {
|
|
22642
|
+
id
|
|
22643
|
+
amountDue
|
|
22644
|
+
amount
|
|
22645
|
+
currencyId
|
|
22646
|
+
}
|
|
22647
|
+
`, []);
|
|
22648
|
+
const QuoteChangeSummarySection = ({ openCheckout, errorUpdatingQuantity, }) => {
|
|
22649
|
+
const isMobile = useIsMobile();
|
|
22650
|
+
const [quoteId] = useQuoteId();
|
|
22651
|
+
const maskedQuote = useQuoteQueryData(quoteId);
|
|
22652
|
+
const quote = readFragment(QuoteChangeSummarySection_QuoteFragment, maskedQuote);
|
|
22653
|
+
const disabled = !quoteId || !quote || errorUpdatingQuantity;
|
|
22654
|
+
return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-end", children: [quote && !disabled && (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-mb-8", children: [jsx("div", { className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2", children: "TOTAL" }), jsx("div", { className: `bunny-text-right ${isMobile ? 'bunny-text-2xl' : 'bunny-text-xl'}`, children: formatCurrency$1(getQuoteAmountDue(quote), (quote === null || quote === void 0 ? void 0 : quote.currencyId) || '') })] })), jsx("div", { className: `bunny-flex bunny-items-center bunny-justify-end ${isMobile ? 'bunny-w-full' : ''}`, children: jsx(Button, { className: "bunny-w-full", onClick: openCheckout, disabled: disabled, size: isMobile ? 'large' : 'middle', type: "primary", children: "Proceed to checkout" }) })] }));
|
|
22655
|
+
};
|
|
22656
|
+
|
|
22657
|
+
const QuantityDrawer_QuoteFragment = t(`
|
|
22658
|
+
fragment QuantityDrawer_QuoteFragment on Quote {
|
|
22659
|
+
id
|
|
22660
|
+
...Checkout_QuoteFragment
|
|
22661
|
+
...QuantityInput_QuoteFragment
|
|
22662
|
+
...QuoteChangeSummarySection_QuoteFragment
|
|
22663
|
+
}
|
|
22664
|
+
`, [Checkout_QuoteFragment, QuantityInput_QuoteFragment, QuoteChangeSummarySection_QuoteFragment]);
|
|
22665
|
+
|
|
22485
22666
|
const mutation$4 = t(`
|
|
22486
22667
|
mutation QuoteChargeCreate(
|
|
22487
22668
|
$quoteChangeId: ID!
|
|
@@ -22516,12 +22697,9 @@ const mutation$4 = t(`
|
|
|
22516
22697
|
}
|
|
22517
22698
|
`, [QuantityDrawer_QuoteFragment]);
|
|
22518
22699
|
const quoteChargeCreate$1 = async ({ price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId, token, apiHost, }) => {
|
|
22519
|
-
var _a
|
|
22700
|
+
var _a;
|
|
22520
22701
|
const response = await execute(mutation$4, { apiHost, token }, { price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId });
|
|
22521
|
-
|
|
22522
|
-
throw new Error(response.quoteChargeCreate.errors[0]);
|
|
22523
|
-
}
|
|
22524
|
-
return (_b = response.quoteChargeCreate) === null || _b === void 0 ? void 0 : _b.quoteCharge;
|
|
22702
|
+
return (_a = response.quoteChargeCreate) === null || _a === void 0 ? void 0 : _a.quoteCharge;
|
|
22525
22703
|
};
|
|
22526
22704
|
|
|
22527
22705
|
const mutation$3 = t(`
|
|
@@ -22598,6 +22776,7 @@ const CanShowQuantitiesInput_SubscriptionChargeFragment = t(`
|
|
|
22598
22776
|
pricingModel
|
|
22599
22777
|
expired
|
|
22600
22778
|
selfServiceQuantity
|
|
22779
|
+
kind
|
|
22601
22780
|
}
|
|
22602
22781
|
`);
|
|
22603
22782
|
const CanShowQuantitiesInput_SubscriptionFragment = t(`
|
|
@@ -22607,7 +22786,7 @@ const CanShowQuantitiesInput_SubscriptionFragment = t(`
|
|
|
22607
22786
|
priceList {
|
|
22608
22787
|
id
|
|
22609
22788
|
}
|
|
22610
|
-
|
|
22789
|
+
currentCharges {
|
|
22611
22790
|
...CanShowQuantitiesInput_SubscriptionChargeFragment
|
|
22612
22791
|
}
|
|
22613
22792
|
}
|
|
@@ -22626,12 +22805,14 @@ const canShowQuantitiesInput = ({ charge: maskedCharge, subscription: maskedSubs
|
|
|
22626
22805
|
const isPendingSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'PENDING';
|
|
22627
22806
|
const isTrialSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'TRIAL';
|
|
22628
22807
|
const isFlatPricing = (charge === null || charge === void 0 ? void 0 : charge.pricingModel) === 'FLAT';
|
|
22629
|
-
const
|
|
22808
|
+
const isDiscount = (charge === null || charge === void 0 ? void 0 : charge.kind) === 'DISCOUNT' || (charge === null || charge === void 0 ? void 0 : charge.kind) === 'FREE_PERIOD_DISCOUNT';
|
|
22809
|
+
const quantityChangeAllowed = (isActiveSubscription || isPendingSubscription) &&
|
|
22810
|
+
!isDiscount &&
|
|
22811
|
+
!isTrialSubscription &&
|
|
22630
22812
|
!isFlatPricing &&
|
|
22631
22813
|
(charge === null || charge === void 0 ? void 0 : charge.selfServiceQuantity) &&
|
|
22632
22814
|
!(charge === null || charge === void 0 ? void 0 : charge.expired);
|
|
22633
|
-
|
|
22634
|
-
return shouldProcessCharge;
|
|
22815
|
+
return quantityChangeAllowed;
|
|
22635
22816
|
};
|
|
22636
22817
|
const canShowChangeQuantities = ({ subscriptions, }) => {
|
|
22637
22818
|
return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(maskedSubscription => {
|
|
@@ -22639,7 +22820,7 @@ const canShowChangeQuantities = ({ subscriptions, }) => {
|
|
|
22639
22820
|
if (!maskedSubscription)
|
|
22640
22821
|
return false;
|
|
22641
22822
|
const subscription = readFragment(CanShowQuantitiesInput_SubscriptionFragment, maskedSubscription);
|
|
22642
|
-
return (_a = subscription === null || subscription === void 0 ? void 0 : subscription.
|
|
22823
|
+
return (_a = subscription === null || subscription === void 0 ? void 0 : subscription.currentCharges) === null || _a === void 0 ? void 0 : _a.some(charge => {
|
|
22643
22824
|
return canShowQuantitiesInput({ charge, subscription: maskedSubscription });
|
|
22644
22825
|
});
|
|
22645
22826
|
});
|
|
@@ -22672,15 +22853,18 @@ const QuantityInput_SubscriptionFragment = t(`
|
|
|
22672
22853
|
CanShowQuantitiesInput_SubscriptionFragment,
|
|
22673
22854
|
]);
|
|
22674
22855
|
const DEBOUNCE_TIME$1 = 1000;
|
|
22675
|
-
const QuantityInput = ({ charge: maskedCharge,
|
|
22856
|
+
const QuantityInput = ({ charge: maskedCharge, subscription: maskedSubscription, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }) => {
|
|
22676
22857
|
// Context
|
|
22677
22858
|
const token = useToken();
|
|
22678
22859
|
const { apiHost } = useContext(BunnyContext);
|
|
22860
|
+
const [quoteId, setQuoteId] = useQuoteId();
|
|
22861
|
+
const maskedQuote = useQuoteQueryData(quoteId);
|
|
22679
22862
|
// Local state
|
|
22680
22863
|
const [quantity, setQuantity] = useState();
|
|
22681
|
-
//
|
|
22864
|
+
// Read fragments
|
|
22682
22865
|
const charge = readFragment(QuantityInput_SubscriptionChargeFragment, maskedCharge);
|
|
22683
22866
|
const subscription = readFragment(QuantityInput_SubscriptionFragment, maskedSubscription);
|
|
22867
|
+
const quote = readFragment(QuantityInput_QuoteFragment, maskedQuote);
|
|
22684
22868
|
// Hooks
|
|
22685
22869
|
const showErrorNotification = useErrorNotification();
|
|
22686
22870
|
const { setQuoteQueryData } = useSetQuoteQueryData();
|
|
@@ -22700,9 +22884,15 @@ const QuantityInput = ({ charge: maskedCharge, editingQuote, editingQuoteId, set
|
|
|
22700
22884
|
mutationFn: quoteChargeCreate$1,
|
|
22701
22885
|
onSuccess: response => {
|
|
22702
22886
|
var _a, _b;
|
|
22703
|
-
if (!
|
|
22704
|
-
throw new Error('
|
|
22705
|
-
|
|
22887
|
+
if (!quoteId)
|
|
22888
|
+
throw new Error('quoteId is required');
|
|
22889
|
+
if ((_a = response === null || response === void 0 ? void 0 : response.quoteChange) === null || _a === void 0 ? void 0 : _a.quote) {
|
|
22890
|
+
setQuoteQueryData(quoteId, (_b = response === null || response === void 0 ? void 0 : response.quoteChange) === null || _b === void 0 ? void 0 : _b.quote);
|
|
22891
|
+
}
|
|
22892
|
+
setErrorUpdatingQuantity(false);
|
|
22893
|
+
},
|
|
22894
|
+
onError: () => {
|
|
22895
|
+
setErrorUpdatingQuantity(true);
|
|
22706
22896
|
},
|
|
22707
22897
|
});
|
|
22708
22898
|
const createQuote = useMutation({
|
|
@@ -22711,16 +22901,15 @@ const QuantityInput = ({ charge: maskedCharge, editingQuote, editingQuoteId, set
|
|
|
22711
22901
|
var _a, _b, _c;
|
|
22712
22902
|
if (!(quote === null || quote === void 0 ? void 0 : quote.id))
|
|
22713
22903
|
throw new Error('quote id is required');
|
|
22714
|
-
|
|
22715
|
-
|
|
22716
|
-
isTrial: (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'TRIAL',
|
|
22717
|
-
});
|
|
22904
|
+
setQuoteId(quote === null || quote === void 0 ? void 0 : quote.id);
|
|
22905
|
+
setQuoteQueryData(quote === null || quote === void 0 ? void 0 : quote.id, quote);
|
|
22718
22906
|
const quoteChange = (_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.find(quoteChange => { var _a, _b; return ((_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.priceList) === null || _a === void 0 ? void 0 : _a.id) === ((_b = subscription.priceList) === null || _b === void 0 ? void 0 : _b.id); });
|
|
22719
22907
|
const subscriptionCharge = (_c = (_b = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.subscription) === null || _b === void 0 ? void 0 : _b.charges) === null || _c === void 0 ? void 0 : _c.find(subscriptionCharge => { var _a; return ((_a = subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === charge.priceListChargeId; });
|
|
22720
22908
|
if (!(quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id))
|
|
22721
22909
|
throw new Error('quoteChange id is required');
|
|
22722
22910
|
if (!(subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.id))
|
|
22723
22911
|
throw new Error('subscriptionCharge id is required');
|
|
22912
|
+
setErrorUpdatingQuantity(false);
|
|
22724
22913
|
createCharge({
|
|
22725
22914
|
apiHost,
|
|
22726
22915
|
quantity,
|
|
@@ -22730,15 +22919,24 @@ const QuantityInput = ({ charge: maskedCharge, editingQuote, editingQuoteId, set
|
|
|
22730
22919
|
token,
|
|
22731
22920
|
});
|
|
22732
22921
|
},
|
|
22922
|
+
onError: () => {
|
|
22923
|
+
setErrorUpdatingQuantity(true);
|
|
22924
|
+
},
|
|
22733
22925
|
});
|
|
22734
22926
|
const updateQuoteCharge = useMutation({
|
|
22735
|
-
mutationFn: ({ quoteChargeId, quantity }) =>
|
|
22927
|
+
mutationFn: ({ quoteChargeId, quantity, }) => {
|
|
22928
|
+
if (!quoteChargeId)
|
|
22929
|
+
throw new Error('quoteChargeId is required');
|
|
22930
|
+
return quoteChargeUpdate(quoteChargeId, quantity, apiHost, token);
|
|
22931
|
+
},
|
|
22736
22932
|
onSuccess: response => {
|
|
22737
22933
|
var _a;
|
|
22738
22934
|
const quote = (_a = response === null || response === void 0 ? void 0 : response.quoteChange) === null || _a === void 0 ? void 0 : _a.quote;
|
|
22739
|
-
if (!
|
|
22740
|
-
throw new Error('
|
|
22741
|
-
|
|
22935
|
+
if (!quoteId)
|
|
22936
|
+
throw new Error('quoteId is required');
|
|
22937
|
+
if (quote) {
|
|
22938
|
+
setQuoteQueryData(quoteId, quote);
|
|
22939
|
+
}
|
|
22742
22940
|
setErrorUpdatingQuantity(false);
|
|
22743
22941
|
},
|
|
22744
22942
|
onError: () => {
|
|
@@ -22762,29 +22960,44 @@ const QuantityInput = ({ charge: maskedCharge, editingQuote, editingQuoteId, set
|
|
|
22762
22960
|
setUpdatingChargeQuantityId(getUpdatingChargeQuantityId(charge.priceListChargeId, subscription.id));
|
|
22763
22961
|
const quantityDelta = quantity - ((_a = charge.quantity) !== null && _a !== void 0 ? _a : 0);
|
|
22764
22962
|
debouncedQuantityUpdate.cancel();
|
|
22765
|
-
debouncedQuantityUpdate(charge.priceListChargeId, quantityDelta, subscription.id,
|
|
22766
|
-
editingQuoteId);
|
|
22963
|
+
debouncedQuantityUpdate(charge.priceListChargeId, quantityDelta, quantity, subscription.id, quote, quoteId);
|
|
22767
22964
|
}
|
|
22768
22965
|
};
|
|
22769
|
-
const debouncedQuantityUpdate = useCallback(lodashExports.debounce((priceListChargeId, quantityDelta, subscriptionId, quote,
|
|
22966
|
+
const debouncedQuantityUpdate = useCallback(lodashExports.debounce((priceListChargeId, quantityDelta, quantity, subscriptionId, quote, quoteId) => {
|
|
22967
|
+
var _a, _b, _c;
|
|
22770
22968
|
if (quantityDelta === 0) {
|
|
22771
22969
|
setErrorUpdatingQuantity(true);
|
|
22772
22970
|
showErrorNotification('New quantity cannot be the same as current');
|
|
22773
22971
|
return;
|
|
22774
22972
|
}
|
|
22775
22973
|
// If we are not editing a quote, we create a new one
|
|
22776
|
-
if (
|
|
22974
|
+
if (quoteId === undefined) {
|
|
22777
22975
|
createQuote.mutate(subscriptionId);
|
|
22778
22976
|
}
|
|
22779
22977
|
else {
|
|
22780
|
-
const quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(quoteChange => { var _a; return quoteChange.priceList.id === ((
|
|
22781
|
-
const quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(charge => charge.priceListCharge.id === priceListChargeId);
|
|
22978
|
+
const quoteChange = (_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.find(quoteChange => { var _a, _b; return ((_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.priceList) === null || _a === void 0 ? void 0 : _a.id) === ((_b = subscription.priceList) === null || _b === void 0 ? void 0 : _b.id); });
|
|
22979
|
+
const quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(charge => { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListChargeId; });
|
|
22782
22980
|
if (quoteCharge) {
|
|
22783
22981
|
updateQuoteCharge.mutate({
|
|
22784
22982
|
quoteChargeId: quoteCharge.id,
|
|
22785
22983
|
quantity: quantityDelta,
|
|
22786
22984
|
});
|
|
22787
22985
|
}
|
|
22986
|
+
else {
|
|
22987
|
+
const subscriptionCharge = (_c = (_b = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.subscription) === null || _b === void 0 ? void 0 : _b.charges) === null || _c === void 0 ? void 0 : _c.find(subscriptionCharge => { var _a; return ((_a = subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListChargeId; });
|
|
22988
|
+
if (!(subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.id))
|
|
22989
|
+
throw new Error('subscriptionCharge id is required');
|
|
22990
|
+
if (!(quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id))
|
|
22991
|
+
throw new Error('quoteChange id is required');
|
|
22992
|
+
createCharge({
|
|
22993
|
+
apiHost,
|
|
22994
|
+
quantity, // This is a new charge so use quantity instead of quantityDelta
|
|
22995
|
+
quoteChangeId: quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id,
|
|
22996
|
+
startDate: formatDateForApi(dayjs()),
|
|
22997
|
+
subscriptionChargeId: subscriptionCharge.id,
|
|
22998
|
+
token,
|
|
22999
|
+
});
|
|
23000
|
+
}
|
|
22788
23001
|
}
|
|
22789
23002
|
}, DEBOUNCE_TIME$1), []);
|
|
22790
23003
|
return (jsx(Fragment, { children: jsx(Input, { className: "bunny-text-right", disabled: quantityDisabled, onChange: e => {
|
|
@@ -22824,37 +23037,19 @@ const QuantityChangeGridRow_SubscriptionFragment = t(`
|
|
|
22824
23037
|
QuantityInput_SubscriptionFragment,
|
|
22825
23038
|
]);
|
|
22826
23039
|
const { Text: Text$i } = Typography;
|
|
22827
|
-
const QuantityChangeGridRow = ({
|
|
23040
|
+
const QuantityChangeGridRow = ({ subscription: maskedSubscription, subscriptionCharge: maskedSubscriptionCharge, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }) => {
|
|
22828
23041
|
var _a, _b;
|
|
22829
23042
|
const subscription = readFragment(QuantityChangeGridRow_SubscriptionFragment, maskedSubscription);
|
|
22830
23043
|
const charge = readFragment(QuantityChangeGridRow_SubscriptionChargeFragment, maskedSubscriptionCharge);
|
|
22831
23044
|
if (!canShowQuantitiesInput({ charge, subscription }))
|
|
22832
23045
|
return null;
|
|
22833
23046
|
const { brandColor } = useContext(BrandContext);
|
|
22834
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-1", children: [jsx(Text$i, { className: "bunny-font-medium bunny-text-sm bunny-col-span-full", style: { color: brandColor }, children: (_a = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _a === void 0 ? void 0 : _a.name }), jsx(Text$i, { className: "bunny-text-sm", children: (_b = charge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })] }), jsx(Text$i, { className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-sm bunny-text-gray-900", children: charge.quantity }), jsxs("div", { className: "bunny-flex bunny-flex-col bunny-justify-center bunny-items-end", children: [jsx(QuantityInput, { charge: charge,
|
|
23047
|
+
return (jsxs(Fragment, { children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-1", children: [jsx(Text$i, { className: "bunny-font-medium bunny-text-sm bunny-col-span-full", style: { color: brandColor }, children: (_a = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _a === void 0 ? void 0 : _a.name }), jsx(Text$i, { className: "bunny-text-sm", children: (_b = charge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })] }), jsx(Text$i, { className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-sm bunny-text-gray-900", children: charge.quantity }), jsxs("div", { className: "bunny-flex bunny-flex-col bunny-justify-center bunny-items-end", children: [jsx(QuantityInput, { charge: charge, subscription: subscription, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }), jsx("div", {})] }), jsx(Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
|
|
22835
23048
|
};
|
|
22836
23049
|
|
|
22837
23050
|
const { Text: Text$h } = Typography;
|
|
22838
23051
|
const QuantityChangeGridTitle = ({ children, right }) => (jsx(Text$h, { className: `bunny-font-medium bunny-text-sm bunny-text-slate-600 ${right ? 'bunny-text-right' : 'bunny-text-left'}`, children: children }));
|
|
22839
23052
|
|
|
22840
|
-
const QuoteChangeSummarySection = ({ editingQuote, editingQuoteData, openCheckout, setEditingQuoteData, errorUpdatingQuantity, }) => {
|
|
22841
|
-
const { apiHost } = useContext(BunnyContext);
|
|
22842
|
-
const isMobile = useIsMobile();
|
|
22843
|
-
const token = useToken();
|
|
22844
|
-
const showSuccessNotification = useSuccessNotification();
|
|
22845
|
-
const trialUpgradeMutation = useMutation({
|
|
22846
|
-
mutationFn: (quoteId) => checkout({ quoteId, token, apiHost }),
|
|
22847
|
-
onSuccess: () => {
|
|
22848
|
-
setEditingQuoteData(undefined);
|
|
22849
|
-
showSuccessNotification('Subscription updated successfully');
|
|
22850
|
-
},
|
|
22851
|
-
});
|
|
22852
|
-
const disabled = !editingQuoteData || !editingQuote || errorUpdatingQuantity;
|
|
22853
|
-
return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-end", children: [editingQuote && !disabled && (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-mb-8", children: [jsx("div", { className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2", children: "TOTAL" }), jsx("div", { className: `bunny-text-right ${isMobile ? 'bunny-text-2xl' : 'bunny-text-xl'}`, children: formatCurrency$1(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || '') })] })), jsx("div", { className: `bunny-flex bunny-items-center bunny-justify-end ${isMobile ? 'bunny-w-full' : ''}`, children: jsx(Button, { className: "bunny-w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
|
|
22854
|
-
? () => trialUpgradeMutation.mutate(editingQuoteData.id)
|
|
22855
|
-
: openCheckout, disabled: disabled, size: isMobile ? 'large' : 'middle', type: "primary", children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? 'Activate Trial' : 'Proceed to checkout' }) })] }));
|
|
22856
|
-
};
|
|
22857
|
-
|
|
22858
23053
|
const QUANTITY_CHANGE_HEADER_TITLE = 'Update quantities';
|
|
22859
23054
|
const QUANTITY_CHANGE_HEADER_DESCRIPTION = 'Adjust quantities below. The change will take effect immediately after checkout has been completed.';
|
|
22860
23055
|
const QuantityDrawerDesktop_SubscriptionFragment = t(`
|
|
@@ -22866,7 +23061,7 @@ const QuantityDrawerDesktop_SubscriptionFragment = t(`
|
|
|
22866
23061
|
...QuantityChangeGridRow_SubscriptionFragment
|
|
22867
23062
|
}
|
|
22868
23063
|
`, [QuantityChangeGridRow_SubscriptionFragment, QuantityChangeGridRow_SubscriptionChargeFragment]);
|
|
22869
|
-
const QuantityChangeDrawerDesktop = ({
|
|
23064
|
+
const QuantityChangeDrawerDesktop = ({ onClose, open, openCheckout, subscriptions, setUpdatingChargeQuantityId, updatingChargeQuantityId, }) => {
|
|
22870
23065
|
const [openLocal, setOpenLocal] = useState(open);
|
|
22871
23066
|
const [errorUpdatingQuantity, setErrorUpdatingQuantity] = useState(false);
|
|
22872
23067
|
const isMobile = useIsMobile();
|
|
@@ -22908,9 +23103,9 @@ const QuantityChangeDrawerDesktop = ({ editingQuote, editingQuoteData, onClose,
|
|
|
22908
23103
|
return (jsx("div", { className: "bunny-contents", children: (_a = subscription === null || subscription === void 0 ? void 0 : subscription.currentCharges) === null || _a === void 0 ? void 0 : _a.map((charge, chargeIndex) => {
|
|
22909
23104
|
if (charge.chargeType === 'USAGE')
|
|
22910
23105
|
return null;
|
|
22911
|
-
return (jsx(QuantityChangeGridRow, {
|
|
23106
|
+
return (jsx(QuantityChangeGridRow, { subscription: subscription, subscriptionCharge: charge, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }, chargeIndex));
|
|
22912
23107
|
}) }, index));
|
|
22913
|
-
})] }), jsx(QuoteChangeSummarySection, {
|
|
23108
|
+
})] }), jsx(QuoteChangeSummarySection, { openCheckout: openCheckout, errorUpdatingQuantity: errorUpdatingQuantity })] }));
|
|
22914
23109
|
};
|
|
22915
23110
|
|
|
22916
23111
|
function invalidateSubscriptionsQueryKeys(queryClient, token) {
|
|
@@ -22934,45 +23129,19 @@ function invalidateSubscriptionsQueryKeys(queryClient, token) {
|
|
|
22934
23129
|
});
|
|
22935
23130
|
}
|
|
22936
23131
|
|
|
22937
|
-
const
|
|
22938
|
-
const token = useToken();
|
|
22939
|
-
const { data } = useQuery({
|
|
22940
|
-
queryKey: QueryKeyFactory$1.default.createObjectKey({
|
|
22941
|
-
id: quoteId,
|
|
22942
|
-
objectName: 'editingQuote',
|
|
22943
|
-
token,
|
|
22944
|
-
}),
|
|
22945
|
-
queryFn: () => {
|
|
22946
|
-
// This queryFn should never be called if data is set via setQueryData
|
|
22947
|
-
// If called, it means data doesn't exist - return undefined
|
|
22948
|
-
// In practice, data should always be set via setQueryData before this hook is used
|
|
22949
|
-
return undefined;
|
|
22950
|
-
},
|
|
22951
|
-
enabled: false,
|
|
22952
|
-
staleTime: Infinity, // Never consider data stale, only use cache
|
|
22953
|
-
gcTime: Infinity, // Never garbage collect this data
|
|
22954
|
-
// Don't refetch if data exists in cache
|
|
22955
|
-
refetchOnMount: false,
|
|
22956
|
-
refetchOnWindowFocus: false,
|
|
22957
|
-
refetchOnReconnect: false,
|
|
22958
|
-
});
|
|
22959
|
-
return data;
|
|
22960
|
-
};
|
|
22961
|
-
|
|
22962
|
-
const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
|
|
23132
|
+
const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
|
|
22963
23133
|
const token = useToken();
|
|
22964
23134
|
const queryClient = useQueryClient();
|
|
22965
23135
|
const showSuccessNotification = useSuccessNotification();
|
|
22966
23136
|
// State management
|
|
22967
|
-
const [
|
|
23137
|
+
const [quoteId, setQuoteId] = useQuoteId();
|
|
22968
23138
|
const [payModalVisible, setPayModalVisible] = useState(false);
|
|
22969
23139
|
const [updatingChargeQuantityId, setUpdatingChargeQuantityId] = useState(undefined);
|
|
22970
|
-
const
|
|
22971
|
-
const quote = readFragment(QuantityDrawer_QuoteFragment, maskedQuote);
|
|
23140
|
+
const quote = useQuoteQueryData(quoteId);
|
|
22972
23141
|
// Handlers
|
|
22973
23142
|
const onSuccess = () => {
|
|
22974
23143
|
setQuantityDrawerOpen(false);
|
|
22975
|
-
|
|
23144
|
+
setQuoteId(undefined);
|
|
22976
23145
|
queryClient.invalidateQueries({
|
|
22977
23146
|
queryKey: QueryKeyFactory$1.default.transactionsKey({ token }),
|
|
22978
23147
|
});
|
|
@@ -22991,14 +23160,17 @@ const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOp
|
|
|
22991
23160
|
const handleDrawerClose = () => {
|
|
22992
23161
|
if (updatingChargeQuantityId) {
|
|
22993
23162
|
setUpdatingChargeQuantityId(undefined);
|
|
22994
|
-
|
|
23163
|
+
setQuoteId(undefined);
|
|
22995
23164
|
}
|
|
22996
23165
|
setQuantityDrawerOpen(false);
|
|
22997
23166
|
};
|
|
22998
23167
|
const handleOpenCheckout = () => {
|
|
22999
23168
|
setPayModalVisible(true);
|
|
23000
23169
|
};
|
|
23001
|
-
return (jsxs(Fragment, { children: [jsx(QuantityChangeDrawerDesktop, {
|
|
23170
|
+
return (jsxs(Fragment, { children: [jsx(QuantityChangeDrawerDesktop, { onClose: handleDrawerClose, open: quantityDrawerOpen, openCheckout: handleOpenCheckout, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: false })] }));
|
|
23171
|
+
};
|
|
23172
|
+
const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
|
|
23173
|
+
return (jsx(QuoteIdProvider, { children: jsx(QuantityDrawerContent, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setShowInactive: setShowInactive }) }));
|
|
23002
23174
|
};
|
|
23003
23175
|
|
|
23004
23176
|
const useCancelSubscription = () => {
|
|
@@ -24820,6 +24992,7 @@ mutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endD
|
|
|
24820
24992
|
|
|
24821
24993
|
`;
|
|
24822
24994
|
const quoteChargeCreate = async ({ price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId, token, apiHost, }) => {
|
|
24995
|
+
var _a;
|
|
24823
24996
|
const response = await gqlRequest({
|
|
24824
24997
|
query: QUOTE_CHARGE_CREATE,
|
|
24825
24998
|
vars: {
|
|
@@ -24833,10 +25006,7 @@ const quoteChargeCreate = async ({ price, priceListChargeId, quantity, quoteChan
|
|
|
24833
25006
|
apiHost,
|
|
24834
25007
|
token,
|
|
24835
25008
|
});
|
|
24836
|
-
|
|
24837
|
-
throw new Error(response.errors[0].message);
|
|
24838
|
-
}
|
|
24839
|
-
return response.quoteChargeCreate.quoteCharge;
|
|
25009
|
+
return (_a = response === null || response === void 0 ? void 0 : response.quoteChargeCreate) === null || _a === void 0 ? void 0 : _a.quoteCharge;
|
|
24840
25010
|
};
|
|
24841
25011
|
|
|
24842
25012
|
const mutation = t(`
|
|
@@ -26294,7 +26464,7 @@ const ResponsiveDivider = () => {
|
|
|
26294
26464
|
const PaymentFormSection = ({ hideBillingDetailsForm, isUpgradeFromTrial, onSavePaymentMethod, }) => {
|
|
26295
26465
|
const isMobile = useIsMobile();
|
|
26296
26466
|
const { onTokenExpired } = useContext(BunnyContext);
|
|
26297
|
-
const handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
|
|
26467
|
+
const handleAllErrorFormats = useAllErrorFormats$1(onTokenExpired);
|
|
26298
26468
|
const showSuccessNotification = useSuccessNotification();
|
|
26299
26469
|
return (jsx("div", { className: `${isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4'} bunny-flex bunny-justify-center`, children: jsx(PaymentForm, { onFail: (error) => {
|
|
26300
26470
|
handleAllErrorFormats(error);
|