@bunnyapp/components 1.0.68 → 1.0.72
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 +520 -410
- package/dist/cjs/src/components/BillingDetails/BillingDetailsForm.d.ts +1 -1
- package/dist/cjs/src/components/Checkout/Checkout.d.ts +1 -3
- package/dist/cjs/src/components/Checkout/checkoutUtils.d.ts +1 -1
- package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +2 -1
- package/dist/cjs/src/components/Quote/AcceptQuoteModal.d.ts +1 -1
- package/dist/cjs/src/components/Quote/Quote.stories.d.ts +5 -5
- package/dist/cjs/src/components/Signup/CheckoutSummary.d.ts +11 -0
- package/dist/cjs/src/components/Signup/PaymentForms.d.ts +6 -0
- package/dist/cjs/src/components/Signup/Signup.d.ts +1 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanManager.d.ts +0 -4
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +2 -1
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +1 -1
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/BillingPeriodSelector.d.ts +2 -2
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +1 -1
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts +1 -1
- package/dist/cjs/src/components/Subscriptions/Subscriptions.stories.d.ts +2 -2
- package/dist/cjs/src/components/Subscriptions/SubscriptionsContext.d.ts +2 -1
- package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuantityInput.d.ts +1 -1
- package/dist/cjs/src/components/Transactions/Transactions.d.ts +5 -5
- package/dist/cjs/src/contexts/PaymentContext.d.ts +1 -1
- package/dist/cjs/src/graphql/mutations/accountSignup.d.ts +1 -2
- package/dist/cjs/src/graphql/mutations/quoteAccountSignup.d.ts +3 -2
- package/dist/cjs/src/graphql/mutations/quoteChangeAddCoupon.d.ts +8 -0
- package/dist/cjs/src/graphql/mutations/quoteChangeRemoveCoupon.d.ts +8 -0
- package/dist/cjs/src/hooks/quotes/useSendAcceptQuote.d.ts +1 -2
- package/dist/cjs/src/hooks/usePaymentPlugins.d.ts +24 -3
- package/dist/cjs/src/styles/constants.d.ts +0 -3
- package/dist/esm/index.js +526 -397
- package/dist/esm/src/components/BillingDetails/BillingDetailsForm.d.ts +1 -1
- package/dist/esm/src/components/Checkout/Checkout.d.ts +1 -3
- package/dist/esm/src/components/Checkout/checkoutUtils.d.ts +1 -1
- package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +2 -1
- package/dist/esm/src/components/Quote/AcceptQuoteModal.d.ts +1 -1
- package/dist/esm/src/components/Quote/Quote.stories.d.ts +5 -5
- package/dist/esm/src/components/Signup/CheckoutSummary.d.ts +11 -0
- package/dist/esm/src/components/Signup/PaymentForms.d.ts +6 -0
- package/dist/esm/src/components/Signup/Signup.d.ts +1 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanManager.d.ts +0 -4
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +2 -1
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +1 -1
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/BillingPeriodSelector.d.ts +2 -2
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +1 -1
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts +1 -1
- package/dist/esm/src/components/Subscriptions/Subscriptions.stories.d.ts +2 -2
- package/dist/esm/src/components/Subscriptions/SubscriptionsContext.d.ts +2 -1
- package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuantityInput.d.ts +1 -1
- package/dist/esm/src/components/Transactions/Transactions.d.ts +5 -5
- package/dist/esm/src/contexts/PaymentContext.d.ts +1 -1
- package/dist/esm/src/graphql/mutations/accountSignup.d.ts +1 -2
- package/dist/esm/src/graphql/mutations/quoteAccountSignup.d.ts +3 -2
- package/dist/esm/src/graphql/mutations/quoteChangeAddCoupon.d.ts +8 -0
- package/dist/esm/src/graphql/mutations/quoteChangeRemoveCoupon.d.ts +8 -0
- package/dist/esm/src/hooks/quotes/useSendAcceptQuote.d.ts +1 -2
- package/dist/esm/src/hooks/usePaymentPlugins.d.ts +24 -3
- package/dist/esm/src/styles/constants.d.ts +0 -3
- package/dist/index.d.ts +3 -4
- package/package.json +4 -6
- package/dist/cjs/src/graphql/mutations/quoteAddCoupon.d.ts +0 -8
- package/dist/cjs/src/styles/AntdOverrides.d.ts +0 -3
- package/dist/esm/src/graphql/mutations/quoteAddCoupon.d.ts +0 -8
- package/dist/esm/src/styles/AntdOverrides.d.ts +0 -3
package/dist/esm/index.js
CHANGED
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, useEffect, useContext, useMemo, useState,
|
|
2
|
+
import { createContext, useEffect, useContext, useMemo, useState, useRef, useCallback } from 'react';
|
|
3
3
|
import { Markup } from 'interweave';
|
|
4
|
-
import { ConfigProvider, Spin, Button, Tag, Typography, Dropdown, Input, Checkbox, Skeleton, Collapse, Modal, Form, Tooltip, Drawer, Card as Card$1,
|
|
4
|
+
import { ConfigProvider, Spin, Button, Tag, Typography, Dropdown, Input, Checkbox, Skeleton, Collapse, Modal, Form, Tooltip, Drawer, Card as Card$1, Divider, Select, Image, 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, 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
|
|
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, useInfoNotification, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR, Lists, sortSubscriptionCharges, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, MODAL_MAX_HEIGHT, DataInterval, QuoteChangeKind, TAG_COLORS } from '@bunnyapp/common';
|
|
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';
|
|
11
11
|
import request, { GraphQLClient } from 'graphql-request';
|
|
12
|
-
import { RPConfig, RPProvider, RPDefaultLayout, RPPages } from '@pdf-viewer/react';
|
|
12
|
+
import { RPConfig, RPProvider, RPDefaultLayout, RPPages, useZoomContext } from '@pdf-viewer/react';
|
|
13
13
|
import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
|
|
14
14
|
import { loadStripe } from '@stripe/stripe-js/pure/index.js';
|
|
15
|
-
import parse from 'html-react-parser';
|
|
16
15
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
17
16
|
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
|
|
18
17
|
import { BarChart, ResponsiveContainer, XAxis, Tooltip as Tooltip$1, Bar, Rectangle } from 'recharts';
|
|
@@ -46,7 +45,7 @@ function styleInject(css, ref) {
|
|
|
46
45
|
}
|
|
47
46
|
}
|
|
48
47
|
|
|
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-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
|
+
var css_248z = ":root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n box-sizing: border-box;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n position: fixed;\n}\n.bunny-absolute {\n position: absolute;\n}\n.bunny-relative {\n position: relative;\n}\n.bunny-sticky {\n position: sticky;\n}\n.bunny-bottom-0 {\n bottom: 0px;\n}\n.bunny-bottom-4 {\n bottom: 1rem;\n}\n.bunny-left-0 {\n left: 0px;\n}\n.bunny-right-0 {\n right: 0px;\n}\n.bunny-top-0 {\n top: 0px;\n}\n.bunny-col-span-1 {\n grid-column: span 1 / span 1;\n}\n.bunny-col-span-full {\n grid-column: 1 / -1;\n}\n.bunny-m-0 {\n margin: 0px;\n}\n.bunny-mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.bunny-mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n margin-top: 6rem;\n margin-bottom: 6rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-my-0 {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n.bunny-my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\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-1 {\n margin-top: 0.25rem;\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-mb-5 {\n margin-bottom: 1.25rem;\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-min-h-0 {\n min-height: 0px;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-3\\/5 {\n width: 60%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-w-screen {\n width: 100vw;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-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-bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / 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-p-6 {\n padding: 1.5rem;\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-pl-2 {\n padding-left: 0.5rem;\n}\n.bunny-pl-12 {\n padding-left: 3rem;\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-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.hover\\:bunny-text-orange-400:hover {\n --tw-text-opacity: 1;\n color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n margin: 0 !important;\n}\n.bunny-components .ant-upload {\n border-radius: 0.5rem !important;\n}\n.bunny-components .ant-checkbox-inner {\n border-color: #cccccc;\n}\n.bunny-components .ant-row {\n margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n font-size: 0.875rem !important;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n border: none !important;\n}\n.bunny-components .ant-form-item {\n margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n text-transform: none !important;\n font-size: 0.75rem;\n padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n width: 100%;\n color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n font-size: 11px;\n min-height: 11px;\n line-height: 11px;\n padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n font-size: smaller;\n}\n.bunny-components .ant-tree {\n font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-page-header {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n}\n.bunny-components .ant-tag {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 14px;\n font-weight: 500;\n white-space: nowrap;\n padding-inline-start: 0.625rem;\n padding-inline-end: 0.625rem;\n margin: 0;\n}\n.bunny-components .ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n color: #6b7280 !important;\n background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.bunny-components .ant-picker {\n width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n background: #f8fafc;\n}\n.bunny-components .vista-link {\n color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n text-decoration: underline;\n cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n padding: 0;\n text-align: center;\n font-size: 0.875rem !important;\n width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n display: flex !important;\n align-items: center;\n justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n background: #eef0f2 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n border: none;\n}\n.bunny-components .ant-btn {\n box-shadow: none;\n text-shadow: none;\n outline: none !important;\n line-height: 1;\n font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n color: #94a3b8;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n background-color: rgba(113, 125, 148, 0.1) !important;\n border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n display: flex !important;\n align-items: center;\n}\n.bunny-components .ant-select-item {\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n display: flex;\n align-items: center;\n white-space: nowrap !important;\n overflow: visible !important;\n text-overflow: default !important;\n font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n display: none;\n}\n.bunny-components .ant-layout-header {\n height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n width: inherit;\n position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n gap: 4px !important;\n}\n.bunny-components .group {\n display: flex;\n flex-direction: row;\n flex-flow: row wrap;\n box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n top: 96px !important;\n animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n color: #ffffff;\n background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n border-color: #ff5833 !important;\n background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n border-bottom: 2px solid transparent !important;\n padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n display: none !important;\n}\n.bunny-components .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n border-radius: 8px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n font-size: 14px !important;\n overflow-wrap: break-word;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff5833 !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500 !important;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
|
|
50
49
|
styleInject(css_248z);
|
|
51
50
|
|
|
52
51
|
/******************************************************************************
|
|
@@ -144,7 +143,7 @@ var BrandContext = createContext({
|
|
|
144
143
|
});
|
|
145
144
|
|
|
146
145
|
// This will be replaced at build time by rollup-plugin-replace
|
|
147
|
-
var PACKAGE_VERSION = '1.0.
|
|
146
|
+
var PACKAGE_VERSION = '1.0.71';
|
|
148
147
|
var createRequestHeaders = function (token) {
|
|
149
148
|
var headers = createClientDevHeaders(token);
|
|
150
149
|
// Add the components version header
|
|
@@ -188,7 +187,7 @@ var gqlRequest = function (_a) {
|
|
|
188
187
|
});
|
|
189
188
|
};
|
|
190
189
|
|
|
191
|
-
var MUTATION$
|
|
190
|
+
var MUTATION$b = "\n query entityBranding {\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }\n";
|
|
192
191
|
var getBranding = function (_a) {
|
|
193
192
|
var token = _a.token, apiHost = _a.apiHost;
|
|
194
193
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -196,7 +195,7 @@ var getBranding = function (_a) {
|
|
|
196
195
|
return __generator(this, function (_b) {
|
|
197
196
|
switch (_b.label) {
|
|
198
197
|
case 0: return [4 /*yield*/, gqlRequest({
|
|
199
|
-
query: MUTATION$
|
|
198
|
+
query: MUTATION$b,
|
|
200
199
|
token: token,
|
|
201
200
|
apiHost: apiHost,
|
|
202
201
|
})];
|
|
@@ -218,14 +217,6 @@ var createGraphQLClient = function (apiHost, token) {
|
|
|
218
217
|
});
|
|
219
218
|
};
|
|
220
219
|
|
|
221
|
-
var BLUE_GRAY_HEX = '#717D94';
|
|
222
|
-
var CHARCOAL_GRAY = '#232323';
|
|
223
|
-
var PRIMARY_COLOR = '#FF5833';
|
|
224
|
-
var SECONDARY_SUCCESS_COLOR = '#00B76A';
|
|
225
|
-
|
|
226
|
-
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);
|
|
227
|
-
var templateObject_1$d;
|
|
228
|
-
|
|
229
220
|
var BunnyContext = createContext({});
|
|
230
221
|
var extraQueryClient = new QueryClient();
|
|
231
222
|
// Every component shares similar props and functionality, which this wrapper handles.
|
|
@@ -247,7 +238,7 @@ function BunnyProvider(_a) {
|
|
|
247
238
|
apiHost: apiHost,
|
|
248
239
|
token: token,
|
|
249
240
|
onTokenExpired: onTokenExpired,
|
|
250
|
-
} }, { children: jsx(QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children:
|
|
241
|
+
} }, { children: jsx(QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children: children })) })) })));
|
|
251
242
|
}
|
|
252
243
|
function ContextualWrapper(_a) {
|
|
253
244
|
var children = _a.children, darkMode = _a.darkMode, configProviderProps = _a.configProviderProps;
|
|
@@ -305,7 +296,7 @@ function ContextualWrapper(_a) {
|
|
|
305
296
|
itemMarginBottom: 0,
|
|
306
297
|
verticalLabelPadding: '4px',
|
|
307
298
|
},
|
|
308
|
-
} }, configProviderProps) }, { children: children })) })) }));
|
|
299
|
+
} }, configProviderProps) }, { children: jsx("div", __assign({ className: "bunny-components bunny-contents" }, { children: children })) })) })) }));
|
|
309
300
|
}
|
|
310
301
|
|
|
311
302
|
var useAjax = function (onError) {
|
|
@@ -379,6 +370,19 @@ function useToken() {
|
|
|
379
370
|
}
|
|
380
371
|
|
|
381
372
|
var LISENSE_KEY = 'eyJkYXRhIjoiZXlKMElqb2liM0puWVc1cGVtRjBhVzl1SWl3aVlYWjFJam94TnpneU5ETXhPVGs1TENKa2JTSTZJbUoxYm01NUxtTnZiU0lzSW00aU9pSmhOV1F5TWpKaFpXTTNOelF5TkdFNUlpd2laWGh3SWpveE56WTJORFEzT1RrNUxDSmtiWFFpT2lKM2FXeGtZMkZ5WkNKOSIsInNpZ25hdHVyZSI6ImdJWW5BYWp0WW1aSHV1b1RrTkZCZnRGYjEzUTJOZXZwQXlKRmszdy9STDNUa08rRXZYWlV0MDZxenBrZWdOK1A4TXlkbFY1aityemQvM1VpYlB5SW1VSzAweHZSVk5hS29EOXB0cVpkbjR5SWRRdE1pU1NjZ0J1K1RkM0NXM2FONVNrdlNJVDEyTGpBMnVVYll2RmJ6RFpMci9hODkwa05sT0NQZURoVjMyd0w3R0NrTnV2Z1MyZlk5Mis0L25FdUdvZXBZR0RPN0Ryb3NaOGVlbnJ6b1BsQ044T204eFlMNXJxdUkvS2xLVTVYaGN0allrdzBTR0FlL0pDR1dTN1dLTDAvYmFvbS9GS1ltNU91VmlzcmlDVlc2UXgvbzBnTGE4bUtXLytMb3pNaHdFemdtU2I2S0xERzZpTEVPL0czQ2pYN2p2dTU1NEc4OUx2aW1BaE5BQT09In0=';
|
|
373
|
+
// Custom zoom layout component that uses useZoomContext
|
|
374
|
+
var CustomZoomLayout = function () {
|
|
375
|
+
// Consume from the controller provider
|
|
376
|
+
var _a = useZoomContext(), currentZoom = _a.currentZoom, setZoomLevel = _a.setZoomLevel;
|
|
377
|
+
var mountTimeRef = useRef(Date.now());
|
|
378
|
+
// Set default zoom to 100% once the document is loaded
|
|
379
|
+
useEffect(function () {
|
|
380
|
+
if (currentZoom < 1 && Date.now() - mountTimeRef.current < 3000) {
|
|
381
|
+
setZoomLevel(100);
|
|
382
|
+
}
|
|
383
|
+
}, [currentZoom, setZoomLevel]);
|
|
384
|
+
return jsx(Fragment, {});
|
|
385
|
+
};
|
|
382
386
|
var DocumentTemplatePreview = function (_a) {
|
|
383
387
|
var targetUrl = _a.targetUrl;
|
|
384
388
|
var _b = useState(null), pdfUrl = _b[0], setPdfUrl = _b[1];
|
|
@@ -426,16 +430,16 @@ var DocumentTemplatePreview = function (_a) {
|
|
|
426
430
|
if (!pdfUrl) {
|
|
427
431
|
return jsx(Fragment, {});
|
|
428
432
|
}
|
|
429
|
-
return (jsx("div", __assign({ className: "bunny-rounded bunny-w-full bunny-overflow-hidden bunny-grow bunny-min-h-0" }, { children: jsx(RPConfig, __assign({ licenseKey: LISENSE_KEY }, { children:
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
433
|
+
return (jsx("div", __assign({ className: "bunny-rounded bunny-w-full bunny-overflow-hidden bunny-grow bunny-min-h-0" }, { children: jsx(RPConfig, __assign({ licenseKey: LISENSE_KEY }, { children: jsxs(RPProvider, __assign({ src: pdfUrl }, { children: [jsx(CustomZoomLayout, {}), jsx(RPDefaultLayout, __assign({ style: {
|
|
434
|
+
width: '100%',
|
|
435
|
+
height: '100%',
|
|
436
|
+
}, slots: {
|
|
437
|
+
openFileTool: false,
|
|
438
|
+
downloadTool: false,
|
|
439
|
+
} }, { children: jsx(RPPages, {}) }))] })) })) })));
|
|
436
440
|
};
|
|
437
441
|
|
|
438
|
-
var MarkupContainer = defaultStyled.div(templateObject_1$
|
|
442
|
+
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"])));
|
|
439
443
|
var InvoiceQuoteView = function (_a) {
|
|
440
444
|
var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError, targetUrl = _a.targetUrl;
|
|
441
445
|
var downloadFile = useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
|
|
@@ -453,7 +457,7 @@ var InvoiceQuoteView = function (_a) {
|
|
|
453
457
|
minWidth: '750px',
|
|
454
458
|
} }, { children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] })))] })));
|
|
455
459
|
};
|
|
456
|
-
var templateObject_1$
|
|
460
|
+
var templateObject_1$b;
|
|
457
461
|
|
|
458
462
|
var fetchPDF = function (apiHost, documentUuid, documentType, token) { return __awaiter(void 0, void 0, void 0, function () {
|
|
459
463
|
var response;
|
|
@@ -501,6 +505,41 @@ function LegacyDocument(_a) {
|
|
|
501
505
|
}, title: "Invoice PDF", width: "100%" }));
|
|
502
506
|
}
|
|
503
507
|
|
|
508
|
+
var MUTATION$a = "\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";
|
|
509
|
+
var checkout = function (_a) {
|
|
510
|
+
var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
|
|
511
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
512
|
+
var mutationVars, response, errors;
|
|
513
|
+
return __generator(this, function (_b) {
|
|
514
|
+
switch (_b.label) {
|
|
515
|
+
case 0:
|
|
516
|
+
mutationVars = {
|
|
517
|
+
quoteId: quoteId,
|
|
518
|
+
invoiceId: invoiceId,
|
|
519
|
+
paymentMethodId: paymentMethodId,
|
|
520
|
+
};
|
|
521
|
+
if (paymentMethodData) {
|
|
522
|
+
mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
|
|
523
|
+
}
|
|
524
|
+
return [4 /*yield*/, gqlRequest({
|
|
525
|
+
query: MUTATION$a,
|
|
526
|
+
token: token,
|
|
527
|
+
vars: mutationVars,
|
|
528
|
+
apiHost: apiHost,
|
|
529
|
+
})];
|
|
530
|
+
case 1:
|
|
531
|
+
response = _b.sent();
|
|
532
|
+
errors = (response === null || response === void 0 ? void 0 : response.checkout).errors;
|
|
533
|
+
if (errors)
|
|
534
|
+
throw errors;
|
|
535
|
+
return [2 /*return*/, {
|
|
536
|
+
savePaymentMethod: paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.savePaymentMethod,
|
|
537
|
+
}];
|
|
538
|
+
}
|
|
539
|
+
});
|
|
540
|
+
});
|
|
541
|
+
};
|
|
542
|
+
|
|
504
543
|
var paymentMethodsQuery = function (filter) { return "query paymentMethods {\n paymentMethods ".concat(filter ? "(".concat(filter, ")") : '', " {\n nodes {\n id\n pluginId\n accountId\n expirationDate\n plugin {\n guid\n id\n }\n state\n metadata {\n issuer\n identifier\n kind\n description\n icon\n type\n }\n isDefault\n }\n }\n}"); };
|
|
505
544
|
var getPaymentMethods = function (_a) {
|
|
506
545
|
var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
|
|
@@ -540,11 +579,15 @@ var usePaymentMethod = function (_a) {
|
|
|
540
579
|
};
|
|
541
580
|
|
|
542
581
|
var filterPaymentPlugins = function (plugins) {
|
|
582
|
+
return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) { var _a, _b; return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'payment' && ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'valid'; });
|
|
583
|
+
};
|
|
584
|
+
var filterPaymentPluginsByEntity = function (plugins, selectedEntityId) {
|
|
543
585
|
return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
|
|
544
|
-
var _a, _b
|
|
545
|
-
return
|
|
546
|
-
|
|
547
|
-
((
|
|
586
|
+
var _a, _b;
|
|
587
|
+
return selectedEntityId === undefined ||
|
|
588
|
+
selectedEntityId === null ||
|
|
589
|
+
((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(selectedEntityId)) ||
|
|
590
|
+
((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0;
|
|
548
591
|
});
|
|
549
592
|
};
|
|
550
593
|
var MUTATION$9 = "{\n paymentPlugins {\n enabled\n entities\n guid\n hidden\n id\n name\n status\n type\n webhookEnabled\n components\n }\n}";
|
|
@@ -573,19 +616,18 @@ var getPaymentPlugins = function (_a) {
|
|
|
573
616
|
});
|
|
574
617
|
};
|
|
575
618
|
var usePaymentPlugins = function (_a) {
|
|
576
|
-
var apiHost = _a.apiHost, token = _a.token;
|
|
619
|
+
var apiHost = _a.apiHost, token = _a.token, selectedEntityId = _a.selectedEntityId;
|
|
577
620
|
var _b = useQuery({
|
|
578
621
|
queryKey: ['paymentPlugins', token],
|
|
579
622
|
queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token }); },
|
|
580
623
|
staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
|
|
581
624
|
}), paymentPlugins = _b.data, isFetched = _b.isFetched;
|
|
582
625
|
var filteredPaymentPlugins = filterPaymentPlugins(paymentPlugins);
|
|
583
|
-
var
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
});
|
|
626
|
+
var filteredPaymentPluginsByEntity = selectedEntityId
|
|
627
|
+
? filterPaymentPluginsByEntity(filteredPaymentPlugins, selectedEntityId)
|
|
628
|
+
: filteredPaymentPlugins;
|
|
587
629
|
return {
|
|
588
|
-
paymentPlugins:
|
|
630
|
+
paymentPlugins: filteredPaymentPluginsByEntity,
|
|
589
631
|
isFetched: isFetched,
|
|
590
632
|
};
|
|
591
633
|
};
|
|
@@ -594,41 +636,6 @@ var getQuoteAmountDue = function (quote) {
|
|
|
594
636
|
return quote.amountDue || quote.amount;
|
|
595
637
|
};
|
|
596
638
|
|
|
597
|
-
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";
|
|
598
|
-
var checkout = function (_a) {
|
|
599
|
-
var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
|
|
600
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
|
601
|
-
var mutationVars, response, errors;
|
|
602
|
-
return __generator(this, function (_b) {
|
|
603
|
-
switch (_b.label) {
|
|
604
|
-
case 0:
|
|
605
|
-
mutationVars = {
|
|
606
|
-
quoteId: quoteId,
|
|
607
|
-
invoiceId: invoiceId,
|
|
608
|
-
paymentMethodId: paymentMethodId,
|
|
609
|
-
};
|
|
610
|
-
if (paymentMethodData) {
|
|
611
|
-
mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
|
|
612
|
-
}
|
|
613
|
-
return [4 /*yield*/, gqlRequest({
|
|
614
|
-
query: MUTATION$8,
|
|
615
|
-
token: token,
|
|
616
|
-
vars: mutationVars,
|
|
617
|
-
apiHost: apiHost,
|
|
618
|
-
})];
|
|
619
|
-
case 1:
|
|
620
|
-
response = _b.sent();
|
|
621
|
-
errors = (response === null || response === void 0 ? void 0 : response.checkout).errors;
|
|
622
|
-
if (errors)
|
|
623
|
-
throw errors;
|
|
624
|
-
return [2 /*return*/, {
|
|
625
|
-
savePaymentMethod: paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.savePaymentMethod,
|
|
626
|
-
}];
|
|
627
|
-
}
|
|
628
|
-
});
|
|
629
|
-
});
|
|
630
|
-
};
|
|
631
|
-
|
|
632
639
|
function usePay$1(_a) {
|
|
633
640
|
var _this = this;
|
|
634
641
|
var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice, storedPaymentMethod = _a.storedPaymentMethod, plugin = _a.plugin;
|
|
@@ -18303,9 +18310,7 @@ var lodashExports = requireLodash();
|
|
|
18303
18310
|
var Card = function (_a) {
|
|
18304
18311
|
var children = _a.children, className = _a.className, style = _a.style;
|
|
18305
18312
|
var darkMode = useContext(BunnyContext).darkMode;
|
|
18306
|
-
return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-rounded-md
|
|
18307
|
-
? "var(--row-background-dark)"
|
|
18308
|
-
: "var(--row-background)" }) }, { children: children })));
|
|
18313
|
+
return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-rounded-md ".concat(className), style: __assign(__assign({}, style), { backgroundColor: darkMode ? 'var(--row-background-dark)' : 'var(--row-background)' }) }, { children: children })));
|
|
18309
18314
|
};
|
|
18310
18315
|
|
|
18311
18316
|
var tagStyleMap = {
|
|
@@ -18729,7 +18734,7 @@ var DemoPayForm = function (_a) {
|
|
|
18729
18734
|
cvc: '',
|
|
18730
18735
|
}), cardDetails = _d[0], setCardDetails = _d[1];
|
|
18731
18736
|
var onSave = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
18732
|
-
var error_1;
|
|
18737
|
+
var error_1, errorResponse;
|
|
18733
18738
|
return __generator(this, function (_a) {
|
|
18734
18739
|
switch (_a.label) {
|
|
18735
18740
|
case 0:
|
|
@@ -18745,7 +18750,12 @@ var DemoPayForm = function (_a) {
|
|
|
18745
18750
|
return [3 /*break*/, 3];
|
|
18746
18751
|
case 2:
|
|
18747
18752
|
error_1 = _a.sent();
|
|
18748
|
-
|
|
18753
|
+
errorResponse = {
|
|
18754
|
+
response: {
|
|
18755
|
+
message: error_1.message,
|
|
18756
|
+
},
|
|
18757
|
+
};
|
|
18758
|
+
onFail(errorResponse);
|
|
18749
18759
|
return [3 /*break*/, 3];
|
|
18750
18760
|
case 3: return [2 /*return*/];
|
|
18751
18761
|
}
|
|
@@ -18772,14 +18782,14 @@ var DemoPayForm = function (_a) {
|
|
|
18772
18782
|
};
|
|
18773
18783
|
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 })] })));
|
|
18774
18784
|
};
|
|
18775
|
-
var StyledInputs = defaultStyled.div(templateObject_1$
|
|
18785
|
+
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) {
|
|
18776
18786
|
var darkMode = _a.darkMode;
|
|
18777
18787
|
return darkMode ? 'var(--row-background-dark)' : 'white';
|
|
18778
18788
|
}, function (_a) {
|
|
18779
18789
|
var darkMode = _a.darkMode;
|
|
18780
18790
|
return darkMode ? GRAY_500 : GRAY_200;
|
|
18781
18791
|
});
|
|
18782
|
-
var templateObject_1$
|
|
18792
|
+
var templateObject_1$a;
|
|
18783
18793
|
|
|
18784
18794
|
function useSave(_a) {
|
|
18785
18795
|
var _this = this;
|
|
@@ -18939,7 +18949,7 @@ var PaymentOption = function (_a) {
|
|
|
18939
18949
|
? "var(--row-background-dark) border-gray-500"
|
|
18940
18950
|
: '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" }))] })));
|
|
18941
18951
|
};
|
|
18942
|
-
var PaymentOptionContainer = defaultStyled.div(templateObject_1$
|
|
18952
|
+
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) {
|
|
18943
18953
|
var $brandColor = _a.$brandColor, $selected = _a.$selected;
|
|
18944
18954
|
return $selected &&
|
|
18945
18955
|
"\n border-color: ".concat($brandColor, ";\n ");
|
|
@@ -18947,7 +18957,7 @@ var PaymentOptionContainer = defaultStyled.div(templateObject_1$a || (templateOb
|
|
|
18947
18957
|
var $brandColor = _a.$brandColor;
|
|
18948
18958
|
return $brandColor;
|
|
18949
18959
|
});
|
|
18950
|
-
var templateObject_1$
|
|
18960
|
+
var templateObject_1$9;
|
|
18951
18961
|
|
|
18952
18962
|
function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRemovePaymentMethod, onError) {
|
|
18953
18963
|
var _this = this;
|
|
@@ -19058,7 +19068,7 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
|
|
|
19058
19068
|
var showErrorNotification$1 = useErrorNotification();
|
|
19059
19069
|
var PaymentForm = function (_a) {
|
|
19060
19070
|
var _b;
|
|
19061
|
-
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;
|
|
19071
|
+
var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, entityId = _a.entityId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, paymentHoldOptions = _a.paymentHoldOptions;
|
|
19062
19072
|
// Local state
|
|
19063
19073
|
var _c = useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
|
|
19064
19074
|
// Simple hooks
|
|
@@ -19072,8 +19082,9 @@ var PaymentForm = function (_a) {
|
|
|
19072
19082
|
apiHost: apiHost,
|
|
19073
19083
|
}), storedPaymentMethods = _d.paymentMethods, defaultPaymentMethod = _d.defaultPaymentMethod, isPaymentMethodLoading = _d.isLoading;
|
|
19074
19084
|
// Complex hooks
|
|
19075
|
-
var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, token: token }).paymentPlugins;
|
|
19085
|
+
var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, selectedEntityId: entityId, token: token }).paymentPlugins;
|
|
19076
19086
|
var selectedPaymentMethodPlugin = useMemo(function () {
|
|
19087
|
+
// TODO: consolate PluginData and PaymentPlugin into one type. Needs to be done on API side.
|
|
19077
19088
|
return paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
|
|
19078
19089
|
}, [paymentPlugins, defaultPaymentMethod]);
|
|
19079
19090
|
// Derived state
|
|
@@ -19082,6 +19093,7 @@ var PaymentForm = function (_a) {
|
|
|
19082
19093
|
var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) ||
|
|
19083
19094
|
(invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
|
|
19084
19095
|
currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
|
|
19096
|
+
var paymentRequired = quote ? getQuoteAmountDue(quote) > 0 : true;
|
|
19085
19097
|
// Custom hooks
|
|
19086
19098
|
var _e = useSetDefaultPaymentMethod(paymentPlugins || [], apiHost, token, accountId, function (message) {
|
|
19087
19099
|
showErrorNotification$1(message, 'Error setting default payment method');
|
|
@@ -19098,9 +19110,29 @@ var PaymentForm = function (_a) {
|
|
|
19098
19110
|
var _f = usePaymentMethodSelectorPlugin({
|
|
19099
19111
|
defaultPaymentMethod: defaultPaymentMethod,
|
|
19100
19112
|
defaultPaymentMethodPlugin: defaultPaymentMethodPlugin,
|
|
19101
|
-
paymentMethodAllowedPlugins: paymentPlugins,
|
|
19113
|
+
paymentMethodAllowedPlugins: paymentPlugins || [],
|
|
19102
19114
|
}), selectorPaymentMethodPlugin = _f.selectorPaymentMethodPlugin, setSelectorPaymentMethodPlugin = _f.setSelectorPaymentMethodPlugin;
|
|
19103
19115
|
var selectedPaymentPluginIsManualPayment = (selectorPaymentMethodPlugin === null || selectorPaymentMethodPlugin === void 0 ? void 0 : selectorPaymentMethodPlugin.name) === 'Manual Payment';
|
|
19116
|
+
// Mutations
|
|
19117
|
+
var _g = useMutation({
|
|
19118
|
+
mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
19119
|
+
return __generator(this, function (_a) {
|
|
19120
|
+
switch (_a.label) {
|
|
19121
|
+
case 0:
|
|
19122
|
+
if (!quote)
|
|
19123
|
+
throw new Error('Quote is required');
|
|
19124
|
+
if (paymentRequired)
|
|
19125
|
+
throw new Error('Payment is required');
|
|
19126
|
+
return [4 /*yield*/, checkout({ quoteId: quote.id, token: token, apiHost: apiHost })];
|
|
19127
|
+
case 1: return [2 /*return*/, _a.sent()];
|
|
19128
|
+
}
|
|
19129
|
+
});
|
|
19130
|
+
}); },
|
|
19131
|
+
onSuccess: function () {
|
|
19132
|
+
handlePaymentSuccess();
|
|
19133
|
+
},
|
|
19134
|
+
onError: onFail,
|
|
19135
|
+
}), checkoutNoPayment = _g.mutate, isCheckingOutNoPayment = _g.isPending;
|
|
19104
19136
|
var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], apiHost, token, accountId, onRemovePaymentMethod, function (message) {
|
|
19105
19137
|
showErrorNotification$1(message, 'Error removing payment method');
|
|
19106
19138
|
});
|
|
@@ -19137,14 +19169,14 @@ var PaymentForm = function (_a) {
|
|
|
19137
19169
|
storedPaymentMethods: storedPaymentMethods,
|
|
19138
19170
|
defaultPaymentMethod: defaultPaymentMethod,
|
|
19139
19171
|
customCheckoutFunction: customCheckoutFunction,
|
|
19140
|
-
} }, { 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: [
|
|
19141
|
-
|
|
19142
|
-
|
|
19143
|
-
|
|
19144
|
-
|
|
19145
|
-
|
|
19146
|
-
|
|
19147
|
-
|
|
19172
|
+
} }, { 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: jsx(Fragment, { children: paymentRequired ? (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: [
|
|
19173
|
+
{
|
|
19174
|
+
key: '1',
|
|
19175
|
+
showArrow: false,
|
|
19176
|
+
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,
|
|
19177
|
+
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 }) })))] }))),
|
|
19178
|
+
},
|
|
19179
|
+
] }), paying && !selectedPaymentPluginIsManualPayment ? (jsx(Fragment, { children: defaultPaymentMethod ? (jsx("div", __assign({ className: "bunny-px-4" }, { children: jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethodPlugin, onPaymentHoldSuccess: onPaymentHoldSuccess, paymentHoldOptions: paymentHoldOptions }) }))) : null })) : null] })) : (jsx(Button, __assign({ style: { margin: '0 16px' }, loading: isCheckingOutNoPayment, onClick: function () { return checkoutNoPayment(); }, type: "primary" }, { children: isCheckingOutNoPayment ? 'Processing...' : 'Complete Order' }))) }) })) })) })));
|
|
19148
19180
|
};
|
|
19149
19181
|
function StripeWrapper(_a) {
|
|
19150
19182
|
var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
|
|
@@ -19152,6 +19184,15 @@ function StripeWrapper(_a) {
|
|
|
19152
19184
|
return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: children })));
|
|
19153
19185
|
}
|
|
19154
19186
|
|
|
19187
|
+
var useCurrentUserData = function () {
|
|
19188
|
+
var queryClient = useQueryClient();
|
|
19189
|
+
var token = useToken();
|
|
19190
|
+
var currentUser = queryClient.getQueryData(QueryKeyFactory.default.currentUserKey(token));
|
|
19191
|
+
if (!currentUser)
|
|
19192
|
+
return {};
|
|
19193
|
+
return currentUser;
|
|
19194
|
+
};
|
|
19195
|
+
|
|
19155
19196
|
function Invoice(_a) {
|
|
19156
19197
|
var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onInvoiceLoaded = _a.onInvoiceLoaded;
|
|
19157
19198
|
return (jsx(InvoiceQuoteContext.Provider, __assign({ value: {
|
|
@@ -19171,9 +19212,10 @@ function ActualInvoice() {
|
|
|
19171
19212
|
// Context
|
|
19172
19213
|
var queryClient = useQueryClient();
|
|
19173
19214
|
var _a = useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess, className = _a.className;
|
|
19174
|
-
var _b = useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired;
|
|
19215
|
+
var _b = useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired;
|
|
19175
19216
|
var _c = useContext(InvoiceQuoteContext), hideDownloadButton = _c.hideDownloadButton, onInvoiceLoaded = _c.onInvoiceLoaded;
|
|
19176
19217
|
var token = useToken();
|
|
19218
|
+
var entityId = useCurrentUserData().entityId;
|
|
19177
19219
|
// Hooks
|
|
19178
19220
|
var showSuccessNotification = useSuccessNotification();
|
|
19179
19221
|
var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
|
|
@@ -19209,10 +19251,10 @@ function ActualInvoice() {
|
|
|
19209
19251
|
}, [formattedInvoice]);
|
|
19210
19252
|
if (!formattedInvoice)
|
|
19211
19253
|
return jsx(Fragment, {});
|
|
19212
|
-
return (jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-gap-6
|
|
19254
|
+
return (jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
|
|
19213
19255
|
}
|
|
19214
19256
|
|
|
19215
|
-
var MUTATION$
|
|
19257
|
+
var MUTATION$8 = function (id) { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n quote {\n documentTemplateId\n documents { id filename size date url }\n firstInvoice {\n id\n state\n }\n payableId\n id\n payToAccept\n currentPaymentHold {\n createdAt\n expiresAt\n id\n updatedAt\n paymentMethod {\n accountId\n createdAt\n expirationDate\n failureCode\n id\n isDefault\n lastSuccess\n paymentType\n pluginId\n state\n updatedAt\n metadata {\n description\n expiration\n icon\n identifier\n issuer\n kind\n }\n }\n }\n }\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"; };
|
|
19216
19258
|
var getFormattedQuote = function (_a) {
|
|
19217
19259
|
var id = _a.id, token = _a.token, apiHost = _a.apiHost;
|
|
19218
19260
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -19220,7 +19262,7 @@ var getFormattedQuote = function (_a) {
|
|
|
19220
19262
|
return __generator(this, function (_b) {
|
|
19221
19263
|
switch (_b.label) {
|
|
19222
19264
|
case 0: return [4 /*yield*/, gqlRequest({
|
|
19223
|
-
query: MUTATION$
|
|
19265
|
+
query: MUTATION$8(),
|
|
19224
19266
|
token: token,
|
|
19225
19267
|
apiHost: apiHost,
|
|
19226
19268
|
vars: { id: id },
|
|
@@ -19258,9 +19300,9 @@ var usePlugins = function (_a) {
|
|
|
19258
19300
|
return response;
|
|
19259
19301
|
};
|
|
19260
19302
|
var getPlugins = function (_a) {
|
|
19261
|
-
var
|
|
19303
|
+
var token = _a.token, apiHost = _a.apiHost;
|
|
19262
19304
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
19263
|
-
var response, plugins,
|
|
19305
|
+
var response, plugins, error;
|
|
19264
19306
|
return __generator(this, function (_b) {
|
|
19265
19307
|
switch (_b.label) {
|
|
19266
19308
|
case 0: return [4 /*yield*/, request$1({
|
|
@@ -19274,12 +19316,7 @@ var getPlugins = function (_a) {
|
|
|
19274
19316
|
return [4 /*yield*/, response.json()];
|
|
19275
19317
|
case 2:
|
|
19276
19318
|
plugins = _b.sent();
|
|
19277
|
-
|
|
19278
|
-
var _a, _b;
|
|
19279
|
-
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;
|
|
19280
|
-
return result;
|
|
19281
|
-
});
|
|
19282
|
-
return [2 /*return*/, filteredPlugins];
|
|
19319
|
+
return [2 /*return*/, plugins];
|
|
19283
19320
|
case 3: return [4 /*yield*/, response.json()];
|
|
19284
19321
|
case 4:
|
|
19285
19322
|
error = _b.sent();
|
|
@@ -19330,72 +19367,46 @@ var quoteAccept = function (_a) {
|
|
|
19330
19367
|
};
|
|
19331
19368
|
// export default quoteAccept;
|
|
19332
19369
|
var useSendAcceptQuote = function (_a) {
|
|
19333
|
-
|
|
19370
|
+
var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
|
|
19334
19371
|
// Hooks
|
|
19335
19372
|
var graphQLMutation = useGraphQLmutation(function () {
|
|
19336
|
-
console.log(
|
|
19337
|
-
}, apiHost ||
|
|
19338
|
-
console.log(
|
|
19373
|
+
console.log('navigate in useGraphQLmutation in useSendAcceptQuote is not yet implemented');
|
|
19374
|
+
}, apiHost || '', function () {
|
|
19375
|
+
console.log('onError in useGraphQLmutation in useSendAcceptQuote is not yet implemented');
|
|
19339
19376
|
});
|
|
19340
19377
|
var signingPlugins = useSigningPlugins({ apiHost: apiHost, token: token });
|
|
19341
19378
|
var queryClient = useQueryClient();
|
|
19379
|
+
var showInfoNotification = useInfoNotification();
|
|
19342
19380
|
// Local state
|
|
19343
19381
|
var _b = useState(false), acceptBoxVisible = _b[0], setAcceptBoxVisible = _b[1];
|
|
19344
19382
|
var _c = useState(false), isAccepting = _c[0], setIsAccepting = _c[1];
|
|
19345
19383
|
// Pandadoc polling modal state
|
|
19346
19384
|
var _d = useState(false), pandadocPollingModalVisible = _d[0], setPandadocPollingModalVisible = _d[1];
|
|
19347
19385
|
var redirectForSigning = function () {
|
|
19348
|
-
var mutation = "mutation quoteSigningUrlCreate($quoteId: ID) {\n quoteSigningUrlCreate(quoteId: $quoteId) {\n redirectUri\n pluginClientId\n pluginShortName\n errors\n }\n }";
|
|
19386
|
+
var mutation = "mutation quoteSigningUrlCreate($quoteId: ID) {\n quoteSigningUrlCreate(quoteId: $quoteId) {\n redirectUri\n pluginClientId\n pluginShortName\n message\n errors\n }\n }";
|
|
19349
19387
|
var variables = {
|
|
19350
19388
|
quoteId: quoteId,
|
|
19351
19389
|
};
|
|
19352
19390
|
graphQLMutation(mutation, variables, function (rsp) {
|
|
19353
19391
|
if (rsp.errors)
|
|
19354
|
-
console.log(
|
|
19392
|
+
console.log('rsp.errors', rsp.errors);
|
|
19355
19393
|
else {
|
|
19356
|
-
|
|
19357
|
-
|
|
19394
|
+
var _a = rsp.data.quoteSigningUrlCreate, redirectUri = _a.redirectUri, message = _a.message, pluginShortName = _a.pluginShortName;
|
|
19395
|
+
if (redirectUri) {
|
|
19396
|
+
// If redirectUri exists, redirect the browser
|
|
19397
|
+
window.location.href = redirectUri;
|
|
19358
19398
|
}
|
|
19359
|
-
else if (
|
|
19399
|
+
else if (pluginShortName === 'pandadoc') {
|
|
19360
19400
|
setPandadocPollingModalVisible(true);
|
|
19361
19401
|
}
|
|
19362
|
-
else {
|
|
19363
|
-
|
|
19402
|
+
else if (message) {
|
|
19403
|
+
// If redirectUri is nil but message exists, display the message as notification
|
|
19404
|
+
showInfoNotification(message, 'Signing Information');
|
|
19405
|
+
setIsAccepting(false);
|
|
19364
19406
|
}
|
|
19365
19407
|
}
|
|
19366
19408
|
}, token);
|
|
19367
19409
|
};
|
|
19368
|
-
var openDropboxSignModal = function (clientId, url) { return __awaiter(void 0, void 0, void 0, function () {
|
|
19369
|
-
var HelloSign, client;
|
|
19370
|
-
return __generator(this, function (_a) {
|
|
19371
|
-
switch (_a.label) {
|
|
19372
|
-
case 0:
|
|
19373
|
-
if (typeof window === "undefined") {
|
|
19374
|
-
return [2 /*return*/];
|
|
19375
|
-
}
|
|
19376
|
-
return [4 /*yield*/, import('hellosign-embedded')];
|
|
19377
|
-
case 1:
|
|
19378
|
-
HelloSign = (_a.sent()).default;
|
|
19379
|
-
client = new HelloSign({
|
|
19380
|
-
clientId: clientId,
|
|
19381
|
-
});
|
|
19382
|
-
client.on("sign", function (data) {
|
|
19383
|
-
queryClient.refetchQueries({
|
|
19384
|
-
queryKey: QueryKeyFactory.default.createQuoteKey({
|
|
19385
|
-
id: quoteId,
|
|
19386
|
-
token: token,
|
|
19387
|
-
}),
|
|
19388
|
-
});
|
|
19389
|
-
});
|
|
19390
|
-
// Open the DropboxSign modal
|
|
19391
|
-
client.open(url, {
|
|
19392
|
-
clientId: clientId,
|
|
19393
|
-
skipDomainVerification: false, // Set true for development testing
|
|
19394
|
-
});
|
|
19395
|
-
return [2 /*return*/];
|
|
19396
|
-
}
|
|
19397
|
-
});
|
|
19398
|
-
}); };
|
|
19399
19410
|
var _e = useMutation({
|
|
19400
19411
|
mutationFn: function (changedFormItems) { return __awaiter(void 0, void 0, void 0, function () {
|
|
19401
19412
|
return __generator(this, function (_a) {
|
|
@@ -19503,11 +19514,11 @@ var PandadocPollingModal = function (_a) {
|
|
|
19503
19514
|
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 }))] })));
|
|
19504
19515
|
};
|
|
19505
19516
|
|
|
19506
|
-
var ModalOverrideBrandStylings = defaultStyled(Modal)(templateObject_1$
|
|
19517
|
+
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"])));
|
|
19507
19518
|
var StyledModal$1 = function (props) {
|
|
19508
19519
|
return jsx(ModalOverrideBrandStylings, __assign({ closable: false }, props));
|
|
19509
19520
|
};
|
|
19510
|
-
var templateObject_1$
|
|
19521
|
+
var templateObject_1$8;
|
|
19511
19522
|
|
|
19512
19523
|
var useFocusFirstInput = function (_a) {
|
|
19513
19524
|
var firstInputRef = _a.firstInputRef, isVisible = _a.isVisible;
|
|
@@ -19521,6 +19532,9 @@ var AcceptQuoteModal = function (_a) {
|
|
|
19521
19532
|
var acceptBoxVisible = _a.acceptBoxVisible, formattedQuote = _a.formattedQuote, sendAccept = _a.sendAccept, setAcceptBoxVisible = _a.setAcceptBoxVisible, setIsAccepting = _a.setIsAccepting, isSendAcceptPending = _a.isSendAcceptPending;
|
|
19522
19533
|
// Refs
|
|
19523
19534
|
var firstInputRef = useRef(null);
|
|
19535
|
+
var apiHost = useContext(BunnyContext).apiHost;
|
|
19536
|
+
var token = useToken();
|
|
19537
|
+
var signingPlugins = useSigningPlugins({ apiHost: apiHost, token: token });
|
|
19524
19538
|
// Hooks
|
|
19525
19539
|
var form = Form.useForm()[0];
|
|
19526
19540
|
useFocusFirstInput({ firstInputRef: firstInputRef, isVisible: acceptBoxVisible });
|
|
@@ -19529,7 +19543,7 @@ var AcceptQuoteModal = function (_a) {
|
|
|
19529
19543
|
var createRules = function (required, title) {
|
|
19530
19544
|
return required ? [{ required: true, message: "".concat(title, " is required") }] : [];
|
|
19531
19545
|
};
|
|
19532
|
-
return (jsx(StyledModal$1, __assign({ centered: true, okText: isSendAcceptPending ?
|
|
19546
|
+
return (jsx(StyledModal$1, __assign({ centered: true, okText: isSendAcceptPending ? 'Accepting...' : 'Accept', okButtonProps: {
|
|
19533
19547
|
loading: isSendAcceptPending,
|
|
19534
19548
|
disabled: isSendAcceptPending,
|
|
19535
19549
|
}, onCancel: function () {
|
|
@@ -19542,16 +19556,7 @@ var AcceptQuoteModal = function (_a) {
|
|
|
19542
19556
|
sendAccept(changedFields);
|
|
19543
19557
|
})
|
|
19544
19558
|
.catch(function () { });
|
|
19545
|
-
}, open: acceptBoxVisible, title:
|
|
19546
|
-
};
|
|
19547
|
-
|
|
19548
|
-
var useCurrentUserData = function () {
|
|
19549
|
-
var queryClient = useQueryClient();
|
|
19550
|
-
var token = useToken();
|
|
19551
|
-
var currentUser = queryClient.getQueryData(QueryKeyFactory.default.currentUserKey(token));
|
|
19552
|
-
if (!currentUser)
|
|
19553
|
-
return {};
|
|
19554
|
-
return currentUser;
|
|
19559
|
+
}, open: acceptBoxVisible, title: (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length) ? 'Start signing' : '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, {}) })))] })) })));
|
|
19555
19560
|
};
|
|
19556
19561
|
|
|
19557
19562
|
var Title$2 = Typography.Title;
|
|
@@ -19560,10 +19565,10 @@ var PaymentHoldModal = function (_a) {
|
|
|
19560
19565
|
var visible = _a.visible, setVisible = _a.setVisible, quote = _a.quote;
|
|
19561
19566
|
var queryClient = useQueryClient();
|
|
19562
19567
|
var token = useToken();
|
|
19563
|
-
var
|
|
19568
|
+
var entityId = useCurrentUserData().entityId;
|
|
19564
19569
|
return (jsxs(StyledModal$1, __assign({ centered: true, onCancel: function () {
|
|
19565
19570
|
setVisible(false);
|
|
19566
|
-
}, 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, {
|
|
19571
|
+
}, footer: null, open: visible, width: 600 }, { children: [jsx(Title$2, __assign({ className: "mt-4 pb-4 mx-4", level: 5 }, { children: "Pay to accept" })), jsx("div", __assign({ className: "mb-4" }, { children: jsx(PaymentForm, { entityId: entityId, quote: {
|
|
19567
19572
|
amount: quote.amount,
|
|
19568
19573
|
currencyId: quote.currency,
|
|
19569
19574
|
id: quote.quote.id,
|
|
@@ -19587,7 +19592,7 @@ var PaymentHoldModal = function (_a) {
|
|
|
19587
19592
|
};
|
|
19588
19593
|
|
|
19589
19594
|
var Text$n = Typography.Text;
|
|
19590
|
-
defaultStyled.div(templateObject_1$
|
|
19595
|
+
defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
|
|
19591
19596
|
function Quote(_a) {
|
|
19592
19597
|
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;
|
|
19593
19598
|
return (jsx(InvoiceQuoteContext.Provider, __assign({ value: {
|
|
@@ -19619,11 +19624,11 @@ function ActualQuote() {
|
|
|
19619
19624
|
var _this = this;
|
|
19620
19625
|
var _a, _b, _c, _d;
|
|
19621
19626
|
// Context
|
|
19622
|
-
var
|
|
19627
|
+
var apiHost = useContext(BunnyContext).apiHost;
|
|
19623
19628
|
var token = useToken();
|
|
19624
|
-
var
|
|
19629
|
+
var _e = useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton, onQuoteLoaded = _e.onQuoteLoaded;
|
|
19625
19630
|
// Queries
|
|
19626
|
-
var
|
|
19631
|
+
var _f = useQuery({
|
|
19627
19632
|
queryKey: QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
|
|
19628
19633
|
queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
|
|
19629
19634
|
var error_1;
|
|
@@ -19642,15 +19647,14 @@ function ActualQuote() {
|
|
|
19642
19647
|
});
|
|
19643
19648
|
}); },
|
|
19644
19649
|
placeholderData: keepPreviousData,
|
|
19645
|
-
}), data =
|
|
19650
|
+
}), data = _f.data, isLoading = _f.isLoading;
|
|
19646
19651
|
var formattedQuote = data;
|
|
19647
19652
|
// Hooks
|
|
19648
|
-
var
|
|
19653
|
+
var _g = useSendAcceptQuote({
|
|
19649
19654
|
token: token,
|
|
19650
|
-
onTokenExpired: onTokenExpired,
|
|
19651
19655
|
apiHost: apiHost,
|
|
19652
19656
|
quoteId: id,
|
|
19653
|
-
}), acceptBoxVisible =
|
|
19657
|
+
}), acceptBoxVisible = _g.acceptBoxVisible, isAccepting = _g.isAccepting, sendAccept = _g.sendAccept, setAcceptBoxVisible = _g.setAcceptBoxVisible, setIsAccepting = _g.setIsAccepting, startAcceptance = _g.startAcceptance, pandadocPollingModalVisible = _g.pandadocPollingModalVisible, setPandadocPollingModalVisible = _g.setPandadocPollingModalVisible, isSendAcceptPending = _g.isSendAcceptPending;
|
|
19654
19658
|
useSigningComplete({ data: formattedQuote, token: token });
|
|
19655
19659
|
var isMobile = useIsMobile();
|
|
19656
19660
|
var showErrorNotification = useErrorNotification();
|
|
@@ -19660,7 +19664,7 @@ function ActualQuote() {
|
|
|
19660
19664
|
}
|
|
19661
19665
|
}, [formattedQuote]);
|
|
19662
19666
|
// Payment hold stuff here
|
|
19663
|
-
var
|
|
19667
|
+
var _h = useQuotePaymentHold(formattedQuote), paymentHoldModalVisible = _h.paymentHoldModalVisible, setPaymentHoldModalVisible = _h.setPaymentHoldModalVisible, shouldDoPaymentHold = _h.shouldDoPaymentHold, paymentHoldCompleted = _h.paymentHoldCompleted, paymentHold = _h.paymentHold;
|
|
19664
19668
|
var handleClickAccept = function () {
|
|
19665
19669
|
if (shouldDoPaymentHold && !paymentHoldCompleted) {
|
|
19666
19670
|
setPaymentHoldModalVisible(true);
|
|
@@ -19692,9 +19696,14 @@ function QuoteButtons(_a) {
|
|
|
19692
19696
|
var entityBranding = useContext(BrandContext);
|
|
19693
19697
|
var downloadFile = useDownloadFile(id);
|
|
19694
19698
|
var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
|
|
19699
|
+
var signingPlugins = useSigningPlugins({ apiHost: apiHost, token: token });
|
|
19695
19700
|
return (jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
|
|
19696
19701
|
color: entityBranding.secondaryColor,
|
|
19697
|
-
} }, { 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
|
|
19702
|
+
} }, { 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
|
|
19703
|
+
? 'Quote is expired'
|
|
19704
|
+
: (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length)
|
|
19705
|
+
? 'Start signing'
|
|
19706
|
+
: 'Accept quote' }))) : null }))] })))] })));
|
|
19698
19707
|
}
|
|
19699
19708
|
function PaymentHoldDisplay(_a) {
|
|
19700
19709
|
var _b, _c, _d, _e;
|
|
@@ -19706,7 +19715,7 @@ function PaymentHoldDisplay(_a) {
|
|
|
19706
19715
|
var expirationDate = paymentHold.expiresAt ? formatDate(paymentHold.expiresAt) : 'N/A';
|
|
19707
19716
|
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] })) }) })));
|
|
19708
19717
|
}
|
|
19709
|
-
var templateObject_1$
|
|
19718
|
+
var templateObject_1$7;
|
|
19710
19719
|
|
|
19711
19720
|
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 }"); };
|
|
19712
19721
|
var getQuotes = function (_a) {
|
|
@@ -19823,17 +19832,17 @@ var TransactionGridCell = defaultStyled.div.withConfig({
|
|
|
19823
19832
|
shouldForwardProp: function (prop) {
|
|
19824
19833
|
return !["gridColumn", "padding", "right"].includes(prop);
|
|
19825
19834
|
},
|
|
19826
|
-
})(templateObject_1$
|
|
19835
|
+
})(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) {
|
|
19827
19836
|
return props.right ? "flex-end" : "flex-start";
|
|
19828
19837
|
}, function (props) {
|
|
19829
19838
|
return props.right ? "right" : "left";
|
|
19830
19839
|
}, SLATE_600);
|
|
19831
|
-
var templateObject_1$
|
|
19840
|
+
var templateObject_1$6;
|
|
19832
19841
|
|
|
19833
19842
|
var Text$l = Typography.Text;
|
|
19834
19843
|
var TransactionsEmptyState = function () {
|
|
19835
19844
|
var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
|
|
19836
|
-
return (jsx(Text$l, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage ||
|
|
19845
|
+
return (jsx(Text$l, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || 'There are no transactions' })));
|
|
19837
19846
|
};
|
|
19838
19847
|
|
|
19839
19848
|
var Text$k = Typography.Text;
|
|
@@ -19931,14 +19940,14 @@ var TransactionsListMobile = function (_a) {
|
|
|
19931
19940
|
var Text$h = Typography.Text;
|
|
19932
19941
|
var DISPLAY_WIDTH = 1200;
|
|
19933
19942
|
function Transactions(_a) {
|
|
19934
|
-
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 ?
|
|
19943
|
+
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 ? [
|
|
19935
19944
|
TransactionKind.INVOICE,
|
|
19936
19945
|
TransactionKind.PAYMENT,
|
|
19937
19946
|
TransactionKind.REFUND,
|
|
19938
19947
|
TransactionKind.WRITE_OFF,
|
|
19939
19948
|
] : _j, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage, filterTransactions = _a.filterTransactions, _k = _a.sortTransactions, sortTransactions = _k === void 0 ? function (a, b) {
|
|
19940
19949
|
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
|
|
19941
|
-
} : _k, _l = _a.transactionDateType, transactionDateType = _l === void 0 ?
|
|
19950
|
+
} : _k, _l = _a.transactionDateType, transactionDateType = _l === void 0 ? 'createdAt' : _l;
|
|
19942
19951
|
var contextValues = {
|
|
19943
19952
|
showSearchBar: showSearchBar,
|
|
19944
19953
|
showTitle: showTitle,
|
|
@@ -19962,12 +19971,11 @@ function Transactions(_a) {
|
|
|
19962
19971
|
var apiHost = useContext(BunnyContext).apiHost;
|
|
19963
19972
|
var token = useToken();
|
|
19964
19973
|
// Local state
|
|
19965
|
-
var _m = useState(
|
|
19966
|
-
var filterValue = filter ||
|
|
19967
|
-
(search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
|
|
19974
|
+
var _m = useState(''), search = _m[0], setSearch = _m[1];
|
|
19975
|
+
var filterValue = filter || (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : '');
|
|
19968
19976
|
// Queries
|
|
19969
19977
|
var data = useQuery({
|
|
19970
|
-
queryKey: [
|
|
19978
|
+
queryKey: ['transactions', token, filterValue],
|
|
19971
19979
|
queryFn: function () { return getTransactions(filterValue, apiHost, token); },
|
|
19972
19980
|
placeholderData: keepPreviousData,
|
|
19973
19981
|
}).data;
|
|
@@ -19984,8 +19992,7 @@ function TransactionsDisplay(_a) {
|
|
|
19984
19992
|
var _e = useState(null), selectedTransaction = _e[0], setSelectedTransaction = _e[1];
|
|
19985
19993
|
var _f = useState(false), drawerOpen = _f[0], setDrawerOpen = _f[1];
|
|
19986
19994
|
var updatedTransactions = (_c = (_b = transactions === null || transactions === void 0 ? void 0 : transactions.filter(function (transaction) {
|
|
19987
|
-
return !kindsToShow ||
|
|
19988
|
-
kindsToShow.includes(transaction.kind);
|
|
19995
|
+
return !kindsToShow || kindsToShow.includes(transaction.kind);
|
|
19989
19996
|
})) === null || _b === void 0 ? void 0 : _b.filter(filterTransactions || (function () { return true; }))) === null || _c === void 0 ? void 0 : _c.sort(sortTransactions || (function () { return 0; }));
|
|
19990
19997
|
// Hooks
|
|
19991
19998
|
var isMobile = useIsMobile();
|
|
@@ -20002,38 +20009,38 @@ function TransactionsDisplay(_a) {
|
|
|
20002
20009
|
var gridTemplateColumns = function () {
|
|
20003
20010
|
var templateColumns = [];
|
|
20004
20011
|
if (isMobile) {
|
|
20005
|
-
if (columns.includes(
|
|
20006
|
-
columns.includes(
|
|
20007
|
-
columns.includes(
|
|
20008
|
-
columns.includes(
|
|
20009
|
-
templateColumns.push(
|
|
20012
|
+
if (columns.includes('date') ||
|
|
20013
|
+
columns.includes('title') ||
|
|
20014
|
+
columns.includes('state') ||
|
|
20015
|
+
columns.includes('amount')) {
|
|
20016
|
+
templateColumns.push('auto');
|
|
20010
20017
|
}
|
|
20011
|
-
if (columns.includes(
|
|
20012
|
-
templateColumns.push(
|
|
20018
|
+
if (columns.includes('download')) {
|
|
20019
|
+
templateColumns.push('auto');
|
|
20013
20020
|
}
|
|
20014
20021
|
}
|
|
20015
20022
|
else {
|
|
20016
|
-
var leftColumns = [
|
|
20023
|
+
var leftColumns = ['accountName', 'date', 'title'].filter(function (column) {
|
|
20017
20024
|
return columns.includes(column);
|
|
20018
20025
|
}).length;
|
|
20019
20026
|
// The rightmost column (for left columns) should be 3fr, the rest should be auto
|
|
20020
20027
|
if (leftColumns === 0 || leftColumns === 1) {
|
|
20021
|
-
templateColumns.push(
|
|
20028
|
+
templateColumns.push('3fr');
|
|
20022
20029
|
}
|
|
20023
20030
|
else {
|
|
20024
|
-
templateColumns.push.apply(templateColumns, __spreadArray(__spreadArray([], Array(leftColumns - 1).fill(
|
|
20031
|
+
templateColumns.push.apply(templateColumns, __spreadArray(__spreadArray([], Array(leftColumns - 1).fill('auto'), false), ['3fr'], false));
|
|
20025
20032
|
}
|
|
20026
20033
|
// Right columns are only auto
|
|
20027
|
-
var rightColumns = [
|
|
20034
|
+
var rightColumns = ['download', 'state', 'amount'].filter(function (column) {
|
|
20028
20035
|
return columns.includes(column);
|
|
20029
20036
|
}).length;
|
|
20030
|
-
templateColumns.push.apply(templateColumns, Array(rightColumns).fill(
|
|
20037
|
+
templateColumns.push.apply(templateColumns, Array(rightColumns).fill('auto'));
|
|
20031
20038
|
}
|
|
20032
|
-
return templateColumns.join(
|
|
20039
|
+
return templateColumns.join(' ');
|
|
20033
20040
|
};
|
|
20034
20041
|
var drawerTitle = function () {
|
|
20035
20042
|
if (!selectedTransaction)
|
|
20036
|
-
return
|
|
20043
|
+
return '';
|
|
20037
20044
|
var kind = selectedTransaction.kind.toLowerCase();
|
|
20038
20045
|
return kind.charAt(0).toUpperCase() + kind.slice(1);
|
|
20039
20046
|
};
|
|
@@ -20041,20 +20048,18 @@ function TransactionsDisplay(_a) {
|
|
|
20041
20048
|
onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
|
|
20042
20049
|
setDrawerOpen(false);
|
|
20043
20050
|
}
|
|
20044
|
-
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 ?
|
|
20045
|
-
), showSearchBar && (jsx("div", __assign({ className: "".concat(isMobile ?
|
|
20046
|
-
? searchBarClassName
|
|
20047
|
-
: "border border-slate-200", onChange: function (e) {
|
|
20051
|
+
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
|
|
20052
|
+
), showSearchBar && (jsx("div", __assign({ className: "".concat(isMobile ? 'bunny-w-full' : '') }, { children: jsx(Input, { className: searchBarClassName ? searchBarClassName : '', onChange: function (e) {
|
|
20048
20053
|
if (isNaN(Number(e.target.value))) {
|
|
20049
20054
|
return;
|
|
20050
20055
|
}
|
|
20051
20056
|
onSearchValueChanged(e.target.value);
|
|
20052
|
-
}, prefix: jsx(SearchOutlined, {}), placeholder: "Search by id #", style: {
|
|
20053
|
-
minWidth:
|
|
20057
|
+
}, prefix: !search && jsx(SearchOutlined, {}), placeholder: "Search by id #", style: {
|
|
20058
|
+
minWidth: '300px',
|
|
20054
20059
|
}, value: search }) })))] }))) : null, jsx("div", __assign({ className: "bunny-grid bunny-w-full bunny-rounded-md bunny-overflow-auto ".concat(shadow), style: {
|
|
20055
20060
|
gridTemplateColumns: gridTemplateColumns(),
|
|
20056
|
-
backgroundColor: "var(--row-background".concat(darkMode ?
|
|
20057
|
-
} }, { children: isMobile ? (jsx(TransactionsListMobile, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) : (jsx(TransactionsListDesktop, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) }))] })), useModal ? (jsx(Modal, __assign({ title: drawerTitle(), open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null }, { children: jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) ||
|
|
20061
|
+
backgroundColor: "var(--row-background".concat(darkMode ? '-dark' : '', ")"),
|
|
20062
|
+
} }, { children: isMobile ? (jsx(TransactionsListMobile, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) : (jsx(TransactionsListDesktop, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) }))] })), useModal ? (jsx(Modal, __assign({ title: drawerTitle(), open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null }, { children: jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || '' }) }))) : (jsx(Drawer, __assign({ title: drawerTitle(), onClose: handleDisplayClose, open: drawerOpen, width: DISPLAY_WIDTH }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === 'INVOICE' ? (jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxs(Card$1, __assign({ className: "bunny-shadow-md" }, { children: [jsx(Typography.Title, __assign({ level: 2, className: "bunny-mb-4" }, { children: "Transaction Details" })), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Amount:" }), ' ', jsx(Typography.Text, { children: formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || 'USD') })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Description:" }), ' ', jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Kind:" }), ' ', jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "State:" }), ' ', jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
|
|
20058
20063
|
}
|
|
20059
20064
|
|
|
20060
20065
|
function Quotes(_a) {
|
|
@@ -20159,9 +20164,9 @@ function QuotesWrapper() {
|
|
|
20159
20164
|
return (jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
|
|
20160
20165
|
}
|
|
20161
20166
|
|
|
20162
|
-
var MUTATION$
|
|
20167
|
+
var MUTATION$7 = function () { return "\nmutation AccountSignup (\n $pluginId: String!,\n $paymentMethodId: String,\n $priceListCode: String!,\n $accountId: ID!,\n $quoteId: ID!,\n) {\n accountSignup(\n pluginId: $pluginId,\n paymentMethodId: $paymentMethodId,\n priceListCode: $priceListCode,\n accountId: $accountId,\n quoteId: $quoteId,\n ) {\n errors\n quote {\n accountId\n amount\n amountDue\n applicationDate\n applied\n backdatedPeriods\n backdatedQuote\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceImmediately\n invoiceImmediatelyAvailable\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n number\n ownerId\n payableId\n periodAmount\n poNumber\n requiresApproval\n smallUnitAmountDue\n splitInvoice\n startDate\n state\n subtotal\n taxAmount\n taxCode\n updatedAt\n uuid\n }\n }\n}"; };
|
|
20163
20168
|
var accountSignup = function (_a) {
|
|
20164
|
-
var token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode
|
|
20169
|
+
var token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
|
|
20165
20170
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
20166
20171
|
var vars, response, errors;
|
|
20167
20172
|
var _b;
|
|
@@ -20175,10 +20180,9 @@ var accountSignup = function (_a) {
|
|
|
20175
20180
|
pluginId: pluginId,
|
|
20176
20181
|
paymentMethodId: paymentMethodId,
|
|
20177
20182
|
priceListCode: priceListCode,
|
|
20178
|
-
entityId: entityId,
|
|
20179
20183
|
};
|
|
20180
20184
|
return [4 /*yield*/, gqlRequest({
|
|
20181
|
-
query: MUTATION$
|
|
20185
|
+
query: MUTATION$7(),
|
|
20182
20186
|
token: token,
|
|
20183
20187
|
vars: vars,
|
|
20184
20188
|
apiHost: apiHost,
|
|
@@ -20194,9 +20198,9 @@ var accountSignup = function (_a) {
|
|
|
20194
20198
|
});
|
|
20195
20199
|
};
|
|
20196
20200
|
|
|
20197
|
-
var MUTATION$
|
|
20201
|
+
var MUTATION$6 = function () { return "\nmutation QuoteAccountSignup (\n $accountName: String!,\n $billingContact: ContactAttributes!,\n $priceListCode: String!,\n $billingDetails: BillingDetailsAttributes\n) {\n quoteAccountSignup(\n priceListCode: $priceListCode,\n accountName: $accountName,\n billingContact: $billingContact,\n billingDetails: $billingDetails\n ) {\n account {\n id\n }\n quote {\n accountId\n amount\n amountDue\n applicationDate\n applied\n backdatedPeriods\n backdatedQuote\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceImmediately\n invoiceImmediatelyAvailable\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n number\n ownerId\n payableId\n periodAmount\n poNumber\n requiresApproval\n smallUnitAmountDue\n splitInvoice\n startDate\n state\n subtotal\n taxAmount\n taxCode\n updatedAt\n uuid\n }\n tenant {\n code\n }\n portalSessionToken\n errors\n }\n}"; };
|
|
20198
20202
|
var quoteAccountSignup = function (_a) {
|
|
20199
|
-
var token = _a.token, apiHost = _a.apiHost, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact,
|
|
20203
|
+
var token = _a.token, apiHost = _a.apiHost, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact, billingDetails = _a.billingDetails;
|
|
20200
20204
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
20201
20205
|
var vars, response, errors;
|
|
20202
20206
|
var _b;
|
|
@@ -20207,10 +20211,10 @@ var quoteAccountSignup = function (_a) {
|
|
|
20207
20211
|
priceListCode: priceListCode,
|
|
20208
20212
|
accountName: accountName,
|
|
20209
20213
|
billingContact: billingContact,
|
|
20210
|
-
|
|
20214
|
+
billingDetails: billingDetails,
|
|
20211
20215
|
};
|
|
20212
20216
|
return [4 /*yield*/, gqlRequest({
|
|
20213
|
-
query: MUTATION$
|
|
20217
|
+
query: MUTATION$6(),
|
|
20214
20218
|
token: token,
|
|
20215
20219
|
vars: vars,
|
|
20216
20220
|
apiHost: apiHost,
|
|
@@ -20226,18 +20230,18 @@ var quoteAccountSignup = function (_a) {
|
|
|
20226
20230
|
});
|
|
20227
20231
|
};
|
|
20228
20232
|
|
|
20229
|
-
var MUTATION$
|
|
20230
|
-
var
|
|
20231
|
-
var
|
|
20233
|
+
var MUTATION$5 = "mutation quoteChangeAddCoupon($couponCode: String!, $quoteChangeId: ID!) {\n quoteChangeAddCoupon(couponCode: $couponCode, quoteChangeId: $quoteChangeId) {\n quoteChange {\n id\n charges {\n id\n amount\n couponId\n }\n }\n }\n}";
|
|
20234
|
+
var quoteChangeAddCoupon = function (_a) {
|
|
20235
|
+
var quoteChangeId = _a.quoteChangeId, couponCode = _a.couponCode, token = _a.token, apiHost = _a.apiHost;
|
|
20232
20236
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
20233
20237
|
var vars, response, errors;
|
|
20234
20238
|
var _b;
|
|
20235
20239
|
return __generator(this, function (_c) {
|
|
20236
20240
|
switch (_c.label) {
|
|
20237
20241
|
case 0:
|
|
20238
|
-
vars = {
|
|
20239
|
-
return [4 /*yield*/, gqlRequest({
|
|
20240
|
-
query: MUTATION$
|
|
20242
|
+
vars = { couponCode: couponCode, quoteChangeId: quoteChangeId };
|
|
20243
|
+
return [4 /*yield*/, gqlRequest$1({
|
|
20244
|
+
query: MUTATION$5,
|
|
20241
20245
|
token: token,
|
|
20242
20246
|
vars: vars,
|
|
20243
20247
|
apiHost: apiHost,
|
|
@@ -20253,6 +20257,60 @@ var quoteAddCoupon = function (_a) {
|
|
|
20253
20257
|
});
|
|
20254
20258
|
};
|
|
20255
20259
|
|
|
20260
|
+
var MUTATION$4 = "mutation quoteChangeRemoveCoupon($quoteChangeId: ID!, $couponCode: String!) {\n quoteChangeRemoveCoupon(quoteChangeId: $quoteChangeId, couponCode: $couponCode) {\n errors\n }\n}\n";
|
|
20261
|
+
var quoteChangeRemoveCoupon = function (_a) {
|
|
20262
|
+
var quoteChangeId = _a.quoteChangeId, couponCode = _a.couponCode, token = _a.token, apiHost = _a.apiHost;
|
|
20263
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
20264
|
+
var vars, response, errors;
|
|
20265
|
+
var _b;
|
|
20266
|
+
return __generator(this, function (_c) {
|
|
20267
|
+
switch (_c.label) {
|
|
20268
|
+
case 0:
|
|
20269
|
+
vars = { couponCode: couponCode, quoteChangeId: quoteChangeId };
|
|
20270
|
+
return [4 /*yield*/, gqlRequest$1({
|
|
20271
|
+
query: MUTATION$4,
|
|
20272
|
+
token: token,
|
|
20273
|
+
vars: vars,
|
|
20274
|
+
apiHost: apiHost,
|
|
20275
|
+
})];
|
|
20276
|
+
case 1:
|
|
20277
|
+
response = _c.sent();
|
|
20278
|
+
errors = (_b = response === null || response === void 0 ? void 0 : response.quoteChangeRemoveCoupon) === null || _b === void 0 ? void 0 : _b.errors;
|
|
20279
|
+
if (errors)
|
|
20280
|
+
throw errors;
|
|
20281
|
+
return [2 /*return*/, response.quote];
|
|
20282
|
+
}
|
|
20283
|
+
});
|
|
20284
|
+
});
|
|
20285
|
+
};
|
|
20286
|
+
|
|
20287
|
+
var QUOTE_RECALCULATE_TAXES = "\n mutation QuoteRecalculateTaxes($id: ID!) {\n quoteRecalculateTaxes(id: $id) {\n quote {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n amountsByPeriod {\n amount\n startDate\n }\n quoteChanges {\n currencyId\n id\n kind\n charges {\n subtotal\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n coupon {\n couponCode\n }\n quantity\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n }\n }\n errors\n }\n }\n";
|
|
20288
|
+
var quoteRecalculateTaxes = function (_a) {
|
|
20289
|
+
var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
|
|
20290
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
20291
|
+
var vars, response, errors;
|
|
20292
|
+
var _b, _c;
|
|
20293
|
+
return __generator(this, function (_d) {
|
|
20294
|
+
switch (_d.label) {
|
|
20295
|
+
case 0:
|
|
20296
|
+
vars = { id: quoteId };
|
|
20297
|
+
return [4 /*yield*/, gqlRequest$1({
|
|
20298
|
+
query: QUOTE_RECALCULATE_TAXES,
|
|
20299
|
+
token: token,
|
|
20300
|
+
vars: vars,
|
|
20301
|
+
apiHost: apiHost,
|
|
20302
|
+
})];
|
|
20303
|
+
case 1:
|
|
20304
|
+
response = _d.sent();
|
|
20305
|
+
errors = (_b = response === null || response === void 0 ? void 0 : response.quoteRecalculateTaxes) === null || _b === void 0 ? void 0 : _b.errors;
|
|
20306
|
+
if (errors)
|
|
20307
|
+
throw errors;
|
|
20308
|
+
return [2 /*return*/, (_c = response.quoteRecalculateTaxes) === null || _c === void 0 ? void 0 : _c.quote];
|
|
20309
|
+
}
|
|
20310
|
+
});
|
|
20311
|
+
});
|
|
20312
|
+
};
|
|
20313
|
+
|
|
20256
20314
|
var MUTATION$3 = function () { return "\nquery PriceList($code: String!) {\n priceList (code: $code) {\n basePrice\n code\n createdAt\n currencyId\n id\n isVisible\n name\n periodMonths\n planId\n priceDescription\n productId\n product {\n name\n }\n sku\n trialAllowed\n trialLengthDays\n updatedAt\n }\n}"; };
|
|
20257
20315
|
var getPriceList = function (_a) {
|
|
20258
20316
|
var token = _a.token, code = _a.code, apiHost = _a.apiHost;
|
|
@@ -20274,7 +20332,7 @@ var getPriceList = function (_a) {
|
|
|
20274
20332
|
});
|
|
20275
20333
|
};
|
|
20276
20334
|
|
|
20277
|
-
var QUOTE_QUERY = function (id) { return "\n query quote {\n quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n amountsByPeriod {\n amount\n startDate\n }\n quoteChanges {\n currencyId\n id\n kind\n charges {\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n
|
|
20335
|
+
var QUOTE_QUERY = function (id) { return "\n query quote {\n quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n amountsByPeriod {\n amount\n startDate\n }\n quoteChanges {\n currencyId\n id\n kind\n charges {\n subtotal\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n coupon {\n couponCode\n }\n quantity\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
|
|
20278
20336
|
var getQuote = function (_a) {
|
|
20279
20337
|
var id = _a.id, token = _a.token, apiHost = _a.apiHost;
|
|
20280
20338
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -20310,49 +20368,95 @@ var Footer = function (_a) {
|
|
|
20310
20368
|
var BunnyMarketingLink = function () {
|
|
20311
20369
|
var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
|
|
20312
20370
|
var isMobile = useIsMobile();
|
|
20313
|
-
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
|
|
20371
|
+
return (jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsx(Text$g, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) }))] })) })) })));
|
|
20372
|
+
};
|
|
20373
|
+
var StyedLink = styled.a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n"])), SLATE_400, SLATE_500);
|
|
20374
|
+
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);
|
|
20375
|
+
var templateObject_1$5, templateObject_2$1;
|
|
20376
|
+
|
|
20377
|
+
function CouponEditor(_a) {
|
|
20378
|
+
var className = _a.className, onAddCoupon = _a.onAddCoupon, isAddingCoupon = _a.isAddingCoupon;
|
|
20379
|
+
// Local state
|
|
20380
|
+
var _b = useState(''), couponCode = _b[0], setCouponCode = _b[1];
|
|
20381
|
+
function handleAddCoupon() {
|
|
20382
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
20383
|
+
return __generator(this, function (_a) {
|
|
20384
|
+
onAddCoupon(couponCode);
|
|
20385
|
+
setCouponCode('');
|
|
20386
|
+
return [2 /*return*/];
|
|
20387
|
+
});
|
|
20388
|
+
});
|
|
20389
|
+
}
|
|
20390
|
+
return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(className) }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2" }, { children: [jsx(Input, { value: couponCode, onChange: function (e) { return setCouponCode(e.target.value); }, placeholder: "Coupon code", disabled: isAddingCoupon }), jsx(Button, __assign({ loading: isAddingCoupon, type: "primary", onClick: handleAddCoupon }, { children: "Apply" }))] })) })));
|
|
20391
|
+
}
|
|
20392
|
+
|
|
20393
|
+
var Text$f = Typography.Text;
|
|
20394
|
+
function CheckoutSummary(_a) {
|
|
20395
|
+
var quote = _a.quote, className = _a.className, onAddCoupon = _a.onAddCoupon, onRemoveCoupon = _a.onRemoveCoupon, isRemovingCoupon = _a.isRemovingCoupon, priceListData = _a.priceListData, isAddingCoupon = _a.isAddingCoupon;
|
|
20396
|
+
return (jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxs(Text$f, { children: [jsxs("div", __assign({ className: "bunny-text-lg bunny-font-medium bunny-mb-4" }, { children: ["Checkout summary - ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.product.name, " ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.name] })), jsx("div", __assign({ className: "bunny-space-y-4" }, { children: quote === null || quote === void 0 ? void 0 : quote.quoteChanges.map(function (quoteChange) {
|
|
20397
|
+
return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
|
|
20398
|
+
var _a;
|
|
20399
|
+
var multiplier = charge.kind === 'COUPON' ? -1 : 1;
|
|
20400
|
+
return (jsxs("div", __assign({ className: "bunny-grid bunny-grid-cols-3 bunny-gap-4 bunny-items-center" }, { children: [jsx("div", __assign({ className: "bunny-col-span-1" }, { children: charge.name })), jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-center" }, { children: ((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode) ? (jsx("div", __assign({ onClick: function () {
|
|
20401
|
+
var _a, _b;
|
|
20402
|
+
if (isRemovingCoupon) {
|
|
20403
|
+
return;
|
|
20404
|
+
}
|
|
20405
|
+
if (!((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode)) {
|
|
20406
|
+
throw new Error('Coupon code not found');
|
|
20407
|
+
}
|
|
20408
|
+
onRemoveCoupon((_b = charge.coupon) === null || _b === void 0 ? void 0 : _b.couponCode);
|
|
20409
|
+
}, className: "bunny-text-orange-500 hover:bunny-text-orange-400 bunny-cursor-pointer" }, { children: "Remove" }))) : (jsx("div", { children: charge.quantity })) })), jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-right" }, { children: formatCurrency(multiplier * (charge.subtotal || 0), charge.currencyId) }))] }), charge.id));
|
|
20410
|
+
});
|
|
20411
|
+
}) })), jsx(CheckoutSummaryDivider, {}), jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Subtotal" }), jsx("div", { children: formatCurrency(quote.subtotal, quote.currencyId) })] })), jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Taxes" }), jsx("div", { children: formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsx(CheckoutSummaryDivider, {}), jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Total" }), jsx("div", { children: formatCurrency(quote.amountDue, quote.currencyId) })] }))] }), jsx(CouponEditor, { className: "bunny-w-full", quote: quote, onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon })] })));
|
|
20412
|
+
}
|
|
20413
|
+
var CheckoutSummaryDivider = function () {
|
|
20414
|
+
return (jsx("div", __assign({ className: "bunny-my-2" }, { children: jsx(Divider, { className: "m-0" }) })));
|
|
20314
20415
|
};
|
|
20315
|
-
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);
|
|
20316
|
-
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);
|
|
20317
|
-
var templateObject_1$6, templateObject_2$1;
|
|
20318
20416
|
|
|
20319
20417
|
var Title$1 = Typography.Title;
|
|
20320
20418
|
function PaymentForms(_a) {
|
|
20321
20419
|
var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction;
|
|
20322
|
-
var
|
|
20323
|
-
return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsxs(Fragment, { children: [jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Payment" })), jsx(PaymentForm, {
|
|
20420
|
+
var entityId = useCurrentUserData().entityId;
|
|
20421
|
+
return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsxs(Fragment, { children: [jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Payment" })), jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction })] })) : null })) : (jsxs(Fragment, { children: [jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Signup" })), jsx(InitialSignupForm, { className: "bunny-px-4", onSubmit: handleSubmit, submitting: proceedingToPayment })] })) }));
|
|
20324
20422
|
}
|
|
20325
20423
|
function InitialSignupForm(_a) {
|
|
20326
20424
|
var className = _a.className, onSubmit = _a.onSubmit, submitting = _a.submitting;
|
|
20327
20425
|
var form = Form.useForm()[0];
|
|
20426
|
+
var isMobile = useIsMobile();
|
|
20328
20427
|
function handleSubmit() {
|
|
20329
20428
|
form.validateFields({ validateOnly: false }).then(function () {
|
|
20330
20429
|
onSubmit(form.getFieldsValue());
|
|
20331
20430
|
});
|
|
20332
20431
|
}
|
|
20333
|
-
return (jsx(Form, __assign({ className: "bunny-flex bunny-flex-col bunny-h-full bunny-w-full ".concat(className), form: form, layout: "vertical", autoComplete: "off" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-2" }, { children: [jsx(Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: 'First name is required' }] }, { children: jsx(Input, { placeholder: "First name" }) })), jsx(Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: 'Last name is required' }] }, { children: jsx(Input, { placeholder: "Last name" }) })), jsx(Form.Item, __assign({ name: "email", rules: [
|
|
20334
|
-
|
|
20335
|
-
|
|
20336
|
-
|
|
20432
|
+
return (jsx(Form, __assign({ className: "bunny-flex bunny-flex-col bunny-h-full bunny-w-full ".concat(className), form: form, layout: "vertical", autoComplete: "off" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-2" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsx(Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: 'First name is required' }], className: "bunny-flex-1" }, { children: jsx(Input, { placeholder: "First name" }) })), jsx(Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: 'Last name is required' }], className: "bunny-flex-1" }, { children: jsx(Input, { placeholder: "Last name" }) }))] })), jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsx(Form.Item, __assign({ name: "email", rules: [
|
|
20433
|
+
{ required: true, message: 'Email is required' },
|
|
20434
|
+
{ type: 'email', message: 'Please enter a valid email' },
|
|
20435
|
+
], className: "bunny-flex-1" }, { children: jsx(Input, { placeholder: "Email" }) })), jsx(Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Company name is required' }], className: "bunny-flex-1" }, { children: jsx(Input, { placeholder: "Company name" }) }))] })), jsx("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsx(Form.Item, __assign({ name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsx(Select, { className: "bunny-w-full", options: Lists.COUNTRY_LIST, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
|
|
20436
|
+
var _a, _b;
|
|
20437
|
+
return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
|
|
20438
|
+
((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
|
|
20439
|
+
} }) })) })) })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full" }, { children: "Proceed to payment" })) })] })) })));
|
|
20337
20440
|
}
|
|
20338
20441
|
|
|
20339
|
-
var Title = Typography.Title, Text$
|
|
20442
|
+
var Title = Typography.Title, Text$e = Typography.Text;
|
|
20340
20443
|
function PaymentSuccessDisplay(_a) {
|
|
20341
20444
|
var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
|
|
20342
|
-
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$
|
|
20445
|
+
return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxs(Text$e, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
|
|
20343
20446
|
}
|
|
20344
20447
|
|
|
20345
|
-
var Text$
|
|
20448
|
+
var Text$d = Typography.Text;
|
|
20346
20449
|
function PriceListDisplay(_a) {
|
|
20347
20450
|
var priceListData = _a.priceListData;
|
|
20348
20451
|
if (!priceListData)
|
|
20349
20452
|
return null;
|
|
20350
|
-
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$
|
|
20453
|
+
return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxs(Text$d, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxs(Text$d, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [formatCurrency(priceListData.basePrice, priceListData.currencyId), " / month"] }))] })), priceListData.trialAllowed ? (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxs(Text$d, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$d, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
|
|
20351
20454
|
}
|
|
20352
20455
|
|
|
20353
20456
|
var showErrorNotification = useErrorNotification();
|
|
20457
|
+
var showSuccessNotification = useSuccessNotification();
|
|
20354
20458
|
function Signup(_a) {
|
|
20355
|
-
var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, couponCode = _a.couponCode, className = _a.className, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, style = _a.style
|
|
20459
|
+
var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, couponCode = _a.couponCode, className = _a.className, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, style = _a.style;
|
|
20356
20460
|
// Hooks
|
|
20357
20461
|
var apiHost = useContext(BunnyContext).apiHost;
|
|
20358
20462
|
var tokenFromContexts = useToken();
|
|
@@ -20362,8 +20466,7 @@ function Signup(_a) {
|
|
|
20362
20466
|
var _d = useState(undefined), accountId = _d[0], setAccountId = _d[1];
|
|
20363
20467
|
var _e = useState(undefined), portalSessionToken = _e[0], setPortalSessionToken = _e[1];
|
|
20364
20468
|
var token = portalSessionToken || tokenFromContexts;
|
|
20365
|
-
var _f = useState(false),
|
|
20366
|
-
var _g = useState(false), purchaseSucceeded = _g[0], setPurchaseSucceeded = _g[1];
|
|
20469
|
+
var _f = useState(false), purchaseSucceeded = _f[0], setPurchaseSucceeded = _f[1];
|
|
20367
20470
|
var defaultCouponAppliedRef = useRef(undefined);
|
|
20368
20471
|
var defaultPaymentMethod = usePaymentMethod({
|
|
20369
20472
|
accountId: accountId,
|
|
@@ -20371,6 +20474,71 @@ function Signup(_a) {
|
|
|
20371
20474
|
apiHost: apiHost,
|
|
20372
20475
|
}).defaultPaymentMethod;
|
|
20373
20476
|
var queryClient = useQueryClient();
|
|
20477
|
+
var recalculateTaxes = useMutation({
|
|
20478
|
+
mutationFn: function () {
|
|
20479
|
+
if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
|
|
20480
|
+
throw new Error('Quote ID is required');
|
|
20481
|
+
}
|
|
20482
|
+
return quoteRecalculateTaxes({ token: token, apiHost: apiHost, quoteId: quote.id });
|
|
20483
|
+
},
|
|
20484
|
+
onError: function (error) {
|
|
20485
|
+
if (!error[0].message.includes('Ensure that you have a taxation plugin')) {
|
|
20486
|
+
showErrorNotification(error.message);
|
|
20487
|
+
}
|
|
20488
|
+
},
|
|
20489
|
+
onSuccess: function (quote) {
|
|
20490
|
+
queryClient.setQueryData(['quote', initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id], quote);
|
|
20491
|
+
queryClient.invalidateQueries({
|
|
20492
|
+
queryKey: ['quote', initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id],
|
|
20493
|
+
});
|
|
20494
|
+
},
|
|
20495
|
+
}).mutate;
|
|
20496
|
+
var _g = useMutation({
|
|
20497
|
+
mutationFn: function (formData) {
|
|
20498
|
+
return quoteAccountSignup({
|
|
20499
|
+
token: token,
|
|
20500
|
+
apiHost: apiHost,
|
|
20501
|
+
priceListCode: priceListCode,
|
|
20502
|
+
accountName: formData.accountName,
|
|
20503
|
+
billingContact: {
|
|
20504
|
+
firstName: formData.firstName,
|
|
20505
|
+
lastName: formData.lastName,
|
|
20506
|
+
email: formData.email,
|
|
20507
|
+
},
|
|
20508
|
+
billingDetails: {
|
|
20509
|
+
billingCountry: formData.billingCountry,
|
|
20510
|
+
// TODO: add these billing details back for Avalara and AFC taxation plugins.
|
|
20511
|
+
// billingState: formData.billingState,
|
|
20512
|
+
// billingCity: formData.billingCity,
|
|
20513
|
+
// billingZip: formData.billingZip,
|
|
20514
|
+
// billingStreet: formData.billingStreet,
|
|
20515
|
+
// taxNumber: formData.taxNumber,
|
|
20516
|
+
},
|
|
20517
|
+
});
|
|
20518
|
+
},
|
|
20519
|
+
onSuccess: function (data) {
|
|
20520
|
+
setAccountId(data.account.id);
|
|
20521
|
+
setPortalSessionToken(data.portalSessionToken);
|
|
20522
|
+
// We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
|
|
20523
|
+
// to instead use paymentMethods from portalSessionToken.
|
|
20524
|
+
queryClient.invalidateQueries({
|
|
20525
|
+
queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
|
|
20526
|
+
accountId: accountId,
|
|
20527
|
+
token: token,
|
|
20528
|
+
}),
|
|
20529
|
+
});
|
|
20530
|
+
setInitialQuote(data.quote);
|
|
20531
|
+
},
|
|
20532
|
+
onError: function (error) {
|
|
20533
|
+
var errorMessage = error.response.errors[0].message;
|
|
20534
|
+
if (errorMessage.includes("Address couldn't be validated")) {
|
|
20535
|
+
showErrorNotification('Please enter a valid billing address');
|
|
20536
|
+
}
|
|
20537
|
+
else {
|
|
20538
|
+
showErrorNotification(errorMessage);
|
|
20539
|
+
}
|
|
20540
|
+
},
|
|
20541
|
+
}), quoteAccountSignupMutate = _g.mutate, isSigningUp = _g.isPending;
|
|
20374
20542
|
// Queries
|
|
20375
20543
|
var _h = useQuery({
|
|
20376
20544
|
queryKey: ['priceList', priceListCode],
|
|
@@ -20389,30 +20557,63 @@ function Signup(_a) {
|
|
|
20389
20557
|
var quote = data || initialQuote;
|
|
20390
20558
|
var _k = useMutation({
|
|
20391
20559
|
mutationFn: function (couponCode) {
|
|
20560
|
+
var _a;
|
|
20392
20561
|
if (!quote) {
|
|
20393
20562
|
throw new Error('Quote is required');
|
|
20394
20563
|
}
|
|
20395
20564
|
if (!token) {
|
|
20396
20565
|
throw new Error('Token is required');
|
|
20397
20566
|
}
|
|
20398
|
-
|
|
20399
|
-
|
|
20567
|
+
if (!((_a = quote.quoteChanges[0]) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
20568
|
+
throw new Error('Quote change ID is required');
|
|
20569
|
+
}
|
|
20570
|
+
return quoteChangeAddCoupon({
|
|
20571
|
+
quoteChangeId: quote.quoteChanges[0].id,
|
|
20400
20572
|
couponCode: couponCode,
|
|
20401
20573
|
apiHost: apiHost,
|
|
20402
20574
|
token: token,
|
|
20403
20575
|
});
|
|
20404
20576
|
},
|
|
20405
20577
|
onSuccess: function () {
|
|
20406
|
-
queryClient.
|
|
20578
|
+
queryClient.invalidateQueries({
|
|
20407
20579
|
queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
|
|
20408
20580
|
});
|
|
20409
20581
|
showSuccessNotification('Coupon applied');
|
|
20582
|
+
recalculateTaxes();
|
|
20410
20583
|
},
|
|
20411
20584
|
onError: function (error) {
|
|
20412
20585
|
var _a, _b;
|
|
20413
20586
|
showErrorNotification((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
|
|
20414
20587
|
},
|
|
20415
20588
|
}), addCoupon = _k.mutate, isAddingCoupon = _k.isPending;
|
|
20589
|
+
var _l = useMutation({
|
|
20590
|
+
mutationFn: function (couponCode) {
|
|
20591
|
+
var _a;
|
|
20592
|
+
if (!quote) {
|
|
20593
|
+
throw new Error('Quote is required');
|
|
20594
|
+
}
|
|
20595
|
+
if (!((_a = quote.quoteChanges[0]) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
20596
|
+
throw new Error('Quote change ID is required');
|
|
20597
|
+
}
|
|
20598
|
+
return quoteChangeRemoveCoupon({
|
|
20599
|
+
quoteChangeId: quote.quoteChanges[0].id,
|
|
20600
|
+
couponCode: couponCode,
|
|
20601
|
+
apiHost: apiHost,
|
|
20602
|
+
token: token,
|
|
20603
|
+
});
|
|
20604
|
+
},
|
|
20605
|
+
onSuccess: function () {
|
|
20606
|
+
showSuccessNotification('Coupon removed');
|
|
20607
|
+
recalculateTaxes();
|
|
20608
|
+
queryClient.invalidateQueries({
|
|
20609
|
+
queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
|
|
20610
|
+
});
|
|
20611
|
+
},
|
|
20612
|
+
onError: function (error) {
|
|
20613
|
+
var _a, _b;
|
|
20614
|
+
showErrorNotification((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error removing coupon');
|
|
20615
|
+
},
|
|
20616
|
+
}), removeCoupon = _l.mutate, isRemovingCoupon = _l.isPending;
|
|
20416
20617
|
// Handle default coupon application
|
|
20417
20618
|
useEffect(function () {
|
|
20418
20619
|
if (couponCode && (quote === null || quote === void 0 ? void 0 : quote.id) && defaultCouponAppliedRef.current !== couponCode) {
|
|
@@ -20422,46 +20623,9 @@ function Signup(_a) {
|
|
|
20422
20623
|
}, [couponCode, quote === null || quote === void 0 ? void 0 : quote.id]);
|
|
20423
20624
|
function handleSubmit(formData) {
|
|
20424
20625
|
return __awaiter(this, void 0, void 0, function () {
|
|
20425
|
-
var data_1, error_1;
|
|
20426
20626
|
return __generator(this, function (_a) {
|
|
20427
|
-
|
|
20428
|
-
|
|
20429
|
-
_a.trys.push([0, 2, , 3]);
|
|
20430
|
-
setProceedingToPayment(true);
|
|
20431
|
-
return [4 /*yield*/, quoteAccountSignup({
|
|
20432
|
-
token: token,
|
|
20433
|
-
apiHost: apiHost,
|
|
20434
|
-
priceListCode: priceListCode,
|
|
20435
|
-
accountName: formData.accountName,
|
|
20436
|
-
billingContact: {
|
|
20437
|
-
firstName: formData.firstName,
|
|
20438
|
-
lastName: formData.lastName,
|
|
20439
|
-
email: formData.email,
|
|
20440
|
-
},
|
|
20441
|
-
entityId: entityId,
|
|
20442
|
-
})];
|
|
20443
|
-
case 1:
|
|
20444
|
-
data_1 = _a.sent();
|
|
20445
|
-
setAccountId(data_1.account.id);
|
|
20446
|
-
setPortalSessionToken(data_1.portalSessionToken);
|
|
20447
|
-
// We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
|
|
20448
|
-
// to instead use paymentMethods from portalSessionToken.
|
|
20449
|
-
queryClient.invalidateQueries({
|
|
20450
|
-
queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
|
|
20451
|
-
accountId: accountId,
|
|
20452
|
-
token: token,
|
|
20453
|
-
}),
|
|
20454
|
-
});
|
|
20455
|
-
setProceedingToPayment(false);
|
|
20456
|
-
setInitialQuote(data_1.quote);
|
|
20457
|
-
return [3 /*break*/, 3];
|
|
20458
|
-
case 2:
|
|
20459
|
-
error_1 = _a.sent();
|
|
20460
|
-
setProceedingToPayment(false);
|
|
20461
|
-
showErrorNotification(error_1.response.message);
|
|
20462
|
-
return [3 /*break*/, 3];
|
|
20463
|
-
case 3: return [2 /*return*/];
|
|
20464
|
-
}
|
|
20627
|
+
quoteAccountSignupMutate(formData);
|
|
20628
|
+
return [2 /*return*/];
|
|
20465
20629
|
});
|
|
20466
20630
|
});
|
|
20467
20631
|
}
|
|
@@ -20498,7 +20662,6 @@ function Signup(_a) {
|
|
|
20498
20662
|
pluginId: plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(),
|
|
20499
20663
|
priceListCode: priceListCode,
|
|
20500
20664
|
accountId: accountId,
|
|
20501
|
-
entityId: entityId,
|
|
20502
20665
|
})];
|
|
20503
20666
|
case 1: return [2 /*return*/, _a.sent()];
|
|
20504
20667
|
}
|
|
@@ -20506,28 +20669,20 @@ function Signup(_a) {
|
|
|
20506
20669
|
});
|
|
20507
20670
|
}
|
|
20508
20671
|
function handlePaymentFail(error) {
|
|
20509
|
-
|
|
20672
|
+
var _a;
|
|
20673
|
+
showErrorNotification((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.message);
|
|
20510
20674
|
}
|
|
20675
|
+
useEffect(function () {
|
|
20676
|
+
if (initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id) {
|
|
20677
|
+
recalculateTaxes();
|
|
20678
|
+
}
|
|
20679
|
+
}, [initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id]);
|
|
20511
20680
|
if (purchaseSucceeded) {
|
|
20512
20681
|
return (jsx(Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsx("div", __assign({ className: "bunny-w-screen bunny-flex bunny-items-start bunny-pt-[25vh]" }, { children: jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "bunny-w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId }) }))) : (jsx("div", { children: "No currency ID found from Quote" })) }));
|
|
20513
20682
|
}
|
|
20514
|
-
return (jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col' : 'bunny-flex-row', " bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ").concat(shadow, " ").concat(className), style: style }, { children: [jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full', " bunny-justify-center") }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24" }, { children: [jsx("div", { children: topNavImageUrl.length > 0 && (jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false })) }), data ? (jsx(CheckoutSummary, { quote: data, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, priceListData: priceListData, isAddingCoupon: isAddingCoupon })) : (jsx("div", __assign({ className: "bunny-h-full" }, { children: isLoadingPriceList ? (jsx(Skeleton, { active: true })) : (jsx(PriceListDisplay, { priceListData: priceListData })) }))), jsx(Footer, {})] })) })), jsx("div", __assign({ className: "bunny-flex bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full', " bunny-items-center"), style: {
|
|
20683
|
+
return (jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col' : 'bunny-flex-row', " bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ").concat(shadow, " ").concat(className), style: style }, { children: [jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full', " bunny-justify-center") }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24" }, { children: [jsx("div", { children: topNavImageUrl.length > 0 && (jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false })) }), data ? (jsx(CheckoutSummary, { quote: data, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, onRemoveCoupon: removeCoupon, isRemovingCoupon: isRemovingCoupon, priceListData: priceListData, isAddingCoupon: isAddingCoupon })) : (jsx("div", __assign({ className: "bunny-h-full" }, { children: isLoadingPriceList ? (jsx(Skeleton, { active: true })) : (jsx(PriceListDisplay, { priceListData: priceListData })) }))), jsx(Footer, {})] })) })), jsx("div", __assign({ className: "bunny-flex bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full', " bunny-items-center"), style: {
|
|
20515
20684
|
boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
|
|
20516
|
-
} }, { 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:
|
|
20517
|
-
}
|
|
20518
|
-
var Text$d = Typography.Text;
|
|
20519
|
-
var CheckoutSummaryDivider = function () {
|
|
20520
|
-
return (jsx("div", __assign({ className: "bunny-my-2" }, { children: jsx(Divider, { className: "m-0" }) })));
|
|
20521
|
-
};
|
|
20522
|
-
var showSuccessNotification = useSuccessNotification();
|
|
20523
|
-
function CheckoutSummary(_a) {
|
|
20524
|
-
var quote = _a.quote, className = _a.className; _a.onAddCoupon; var priceListData = _a.priceListData; _a.isAddingCoupon;
|
|
20525
|
-
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) {
|
|
20526
|
-
return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
|
|
20527
|
-
var multiplier = charge.kind === 'COUPON' ? -1 : 1;
|
|
20528
|
-
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));
|
|
20529
|
-
});
|
|
20530
|
-
}) })), jsx(CheckoutSummaryDivider, {}), jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Subtotal" }), jsx("div", { children: formatCurrency(quote.amountDue, quote.currencyId) })] })), jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Taxes" }), jsx("div", { children: formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsx(CheckoutSummaryDivider, {}), jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsx("div", { children: "Total" }), jsx("div", { children: formatCurrency(quote.amountDue + quote.taxAmount, quote.currencyId) })] }))] }), false ] })));
|
|
20685
|
+
} }, { children: isLoadingPriceList ? (jsx(Skeleton, { active: true, className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" })) : (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" }, { children: jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) }))) }))] })));
|
|
20531
20686
|
}
|
|
20532
20687
|
|
|
20533
20688
|
var useQuoteSubscriptionUpgrade = function () {
|
|
@@ -20616,35 +20771,6 @@ var pageWrapperClassName = function (isMobile) {
|
|
|
20616
20771
|
return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
|
|
20617
20772
|
};
|
|
20618
20773
|
|
|
20619
|
-
var QUOTE_FIELDS = "quote {\n formattedQuote {\n html\n }\n acceptedByName\n acceptedByTitle\n accountId\n amount\n amountDue\n applicationDate\n applied\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n ownerId\n periodAmount\n poNumber\n requiresApproval\n startDate\n state\n subtotal\n taxAmount\n updatedAt\n uuid\n amountsByPeriod {\n amount\n id\n name\n }\n endDateOptions {\n endDate\n label\n }\n invoiceUntilOptions {\n endDate\n label\n }\n quoteChanges {\n currencyId\n id\n kind\n charges {\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n billingPeriodAmounts { id amount prorationRate }\n chargeType\n couponId\n createdAt\n currencyId\n discount\n endDate\n feature { id name code isUnit unitName }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n couponId\n price\n priceDecimals\n priceTiers { starts price }\n pricingModel\n prorationRate\n quantity\n quantityMax\n quantityMin\n startDate\n tieredAveragePrice\n updatedAt\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n }\n}";
|
|
20620
|
-
|
|
20621
|
-
var QUOTE_RECALCULATE_TAXES = "\n mutation QuoteRecalculateTaxes($id: ID!) {\n quoteRecalculateTaxes(id: $id) {\n ".concat(QUOTE_FIELDS, "\n errors\n }\n }\n");
|
|
20622
|
-
var quoteRecalculateTaxes = function (_a) {
|
|
20623
|
-
var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
|
|
20624
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
|
20625
|
-
var vars, response, errors;
|
|
20626
|
-
var _b, _c;
|
|
20627
|
-
return __generator(this, function (_d) {
|
|
20628
|
-
switch (_d.label) {
|
|
20629
|
-
case 0:
|
|
20630
|
-
vars = { id: quoteId };
|
|
20631
|
-
return [4 /*yield*/, gqlRequest({
|
|
20632
|
-
query: QUOTE_RECALCULATE_TAXES,
|
|
20633
|
-
token: token,
|
|
20634
|
-
vars: vars,
|
|
20635
|
-
apiHost: apiHost,
|
|
20636
|
-
})];
|
|
20637
|
-
case 1:
|
|
20638
|
-
response = _d.sent();
|
|
20639
|
-
errors = (_b = response === null || response === void 0 ? void 0 : response.quoteRecalculateTaxes) === null || _b === void 0 ? void 0 : _b.errors;
|
|
20640
|
-
if (errors)
|
|
20641
|
-
throw errors;
|
|
20642
|
-
return [2 /*return*/, (_c = response.quoteRecalculateTaxes) === null || _c === void 0 ? void 0 : _c.quote];
|
|
20643
|
-
}
|
|
20644
|
-
});
|
|
20645
|
-
});
|
|
20646
|
-
};
|
|
20647
|
-
|
|
20648
20774
|
var MUTATION$2 = "{\n currentUser {\n taxationRequiredAccountFields\n }\n}";
|
|
20649
20775
|
var getTaxationRequiredAccountFields = function (_a) {
|
|
20650
20776
|
var apiHost = _a.apiHost, token = _a.token;
|
|
@@ -20756,6 +20882,7 @@ var QuoteCheckout = function (_a) {
|
|
|
20756
20882
|
var isMobile = useIsMobile();
|
|
20757
20883
|
var _b = useState(false), isSaving = _b[0], setIsSaving = _b[1];
|
|
20758
20884
|
var paymentRequired = getQuoteAmountDue(quote) > 0;
|
|
20885
|
+
var entityId = useCurrentUserData().entityId;
|
|
20759
20886
|
var checkoutMutation = useMutation({
|
|
20760
20887
|
mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
20761
20888
|
return __generator(this, function (_a) {
|
|
@@ -20785,7 +20912,7 @@ var QuoteCheckout = function (_a) {
|
|
|
20785
20912
|
}
|
|
20786
20913
|
if (taxationRequiredAccountFields)
|
|
20787
20914
|
return (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsx(TaxationForm, { account: account, quote: quote }) })));
|
|
20788
|
-
return (jsx(Fragment, { children: paymentRequired ? (jsx(PaymentForm, {
|
|
20915
|
+
return (jsx(Fragment, { children: paymentRequired ? (jsx(PaymentForm, { entityId: entityId, onFail: onFail, onPaymentSuccess: onSuccess, quote: quote })) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsx(Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
|
|
20789
20916
|
};
|
|
20790
20917
|
var PaymentFormWrapper = function (_a) {
|
|
20791
20918
|
var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
|
|
@@ -20802,9 +20929,10 @@ var PaymentFormWrapper = function (_a) {
|
|
|
20802
20929
|
var queryKeyFactory = QueryKeyFactory.default;
|
|
20803
20930
|
var Checkout = function (_a) {
|
|
20804
20931
|
var _b, _c;
|
|
20805
|
-
var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList
|
|
20932
|
+
var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList;
|
|
20806
20933
|
var apiHost = useContext(BunnyContext).apiHost;
|
|
20807
20934
|
var isMobile = useIsMobile();
|
|
20935
|
+
var token = useToken();
|
|
20808
20936
|
var hasTaxPlugin = useHasTaxPlugin({
|
|
20809
20937
|
apiHost: apiHost,
|
|
20810
20938
|
token: token,
|
|
@@ -20878,7 +21006,7 @@ var Checkout = function (_a) {
|
|
|
20878
21006
|
onFail(error);
|
|
20879
21007
|
}, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsx(PaymentForm, { onFail: function (error) {
|
|
20880
21008
|
onFail(error);
|
|
20881
|
-
}, onPaymentSuccess: onSuccess }))] })), jsx(Footer, {})] })) })));
|
|
21009
|
+
}, onPaymentSuccess: onSuccess }))] })), jsx(Footer, { className: "bunny-pl-12" })] })) })));
|
|
20882
21010
|
};
|
|
20883
21011
|
|
|
20884
21012
|
var PageTitle = function (_a) {
|
|
@@ -21252,11 +21380,11 @@ var PlanPickerCheckoutBar = function (_a) {
|
|
|
21252
21380
|
return (jsx(CheckoutBarInput, { disabled: !chargeQuantity, charge: charge, quantity: chargeQuantity !== null && chargeQuantity !== void 0 ? chargeQuantity : 0, selectedPriceList: selectedPriceList, onQuantityChanged: function (quantity) {
|
|
21253
21381
|
onChangeQuantity(charge.id, quantity);
|
|
21254
21382
|
} }, index));
|
|
21255
|
-
}) })), jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsx(Checkout, {
|
|
21383
|
+
}) })), jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
|
|
21256
21384
|
};
|
|
21257
21385
|
|
|
21258
21386
|
// WARNING: There is a preview button on APP that will need to be changed if this query is changed
|
|
21259
|
-
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 }";
|
|
21387
|
+
var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n showPriceAsMonthly\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n 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 }";
|
|
21260
21388
|
var getPriceListChangeOptions = function (_a) {
|
|
21261
21389
|
var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
|
|
21262
21390
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -21340,17 +21468,13 @@ var BillingPeriodSelector = function (_a) {
|
|
|
21340
21468
|
}) })) }))] }))] })));
|
|
21341
21469
|
};
|
|
21342
21470
|
var ProductRadioStyled = styled.div.withConfig({
|
|
21343
|
-
shouldForwardProp: function (prop) { return ![
|
|
21344
|
-
})(templateObject_1$
|
|
21345
|
-
return props.brandColor ? props.brandColor : "black";
|
|
21346
|
-
}, function (props) {
|
|
21347
|
-
return props.brandColor ? props.brandColor : "black";
|
|
21348
|
-
});
|
|
21471
|
+
shouldForwardProp: function (prop) { return !['brandColor'].includes(prop); },
|
|
21472
|
+
})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"], ["\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n border-color: ", " !important;\n color: ", " !important;\n }\n"])), function (props) { return (props.brandColor ? props.brandColor : 'black'); }, function (props) { return (props.brandColor ? props.brandColor : 'black'); });
|
|
21349
21473
|
var StyledRadioGroup = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .ant-radio-group {\n display: flex !important;\n align-items: center !important;\n padding: 4px !important;\n background-color: ", " !important;\n border-radius: 6px !important;\n width: ", " !important;\n border: none !important;\n }\n .ant-radio-button-wrapper {\n flex-grow: 1 !important;\n z-index: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n border-color: transparent !important;\n border-radius: 4px !important;\n > span {\n font-size: 11px !important;\n }\n }\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n background: transparent !important;\n }\n .ant-radio-button-wrapper::before {\n display: none !important;\n }\n"], ["\n .ant-radio-group {\n display: flex !important;\n align-items: center !important;\n padding: 4px !important;\n background-color: ", " !important;\n border-radius: 6px !important;\n width: ", " !important;\n border: none !important;\n }\n .ant-radio-button-wrapper {\n flex-grow: 1 !important;\n z-index: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n border-color: transparent !important;\n border-radius: 4px !important;\n > span {\n font-size: 11px !important;\n }\n }\n .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n background: transparent !important;\n }\n .ant-radio-button-wrapper::before {\n display: none !important;\n }\n"])), GRAY_200, function (_a) {
|
|
21350
21474
|
var $isMobile = _a.$isMobile;
|
|
21351
|
-
return $isMobile ?
|
|
21475
|
+
return ($isMobile ? '100%' : 'min-content');
|
|
21352
21476
|
});
|
|
21353
|
-
var templateObject_1$
|
|
21477
|
+
var templateObject_1$4, templateObject_2;
|
|
21354
21478
|
|
|
21355
21479
|
var PriceListCardTitle = function (_a) {
|
|
21356
21480
|
var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
|
|
@@ -21360,10 +21484,30 @@ var PriceListCardTitle = function (_a) {
|
|
|
21360
21484
|
: " " }))), jsx("div", __assign({ className: "bunny-font-medium bunny-text-center ".concat(isMobile ? "bunny-text-slate-500" : "bunny-text-orange-600"), style: { fontSize: "20px" } }, { children: priceList.plan.name }))] })));
|
|
21361
21485
|
};
|
|
21362
21486
|
|
|
21487
|
+
var getPrice = function (priceList) {
|
|
21488
|
+
if (priceList.showPriceAsMonthly) {
|
|
21489
|
+
return priceList.monthlyBasePrice;
|
|
21490
|
+
}
|
|
21491
|
+
return priceList.basePrice;
|
|
21492
|
+
};
|
|
21493
|
+
var calculatePriceDecimals = function (priceList) {
|
|
21494
|
+
if (priceList.plan.pricingStyle === PricingStyle.PRICED) {
|
|
21495
|
+
var decimalPart = getPrice(priceList).toString().split('.')[1];
|
|
21496
|
+
if (!decimalPart)
|
|
21497
|
+
return 0;
|
|
21498
|
+
// If decimal part consists only of zeros, return 0
|
|
21499
|
+
if (parseInt(decimalPart) === 0) {
|
|
21500
|
+
return 0;
|
|
21501
|
+
}
|
|
21502
|
+
return undefined;
|
|
21503
|
+
}
|
|
21504
|
+
return 0;
|
|
21505
|
+
};
|
|
21363
21506
|
var PriceListCardPrice = function (_a) {
|
|
21364
21507
|
var priceList = _a.priceList;
|
|
21508
|
+
var priceDecimals = calculatePriceDecimals(priceList);
|
|
21365
21509
|
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
|
|
21366
|
-
? formatCurrency(priceList
|
|
21510
|
+
? formatCurrency(getPrice(priceList), priceList.currencyId, priceDecimals)
|
|
21367
21511
|
: priceList.plan.pricingStyle === PricingStyle.CONTACT_US
|
|
21368
21512
|
? ''
|
|
21369
21513
|
: 'Free' })));
|
|
@@ -21372,10 +21516,7 @@ var PriceListCardPrice = function (_a) {
|
|
|
21372
21516
|
var Text$c = Typography.Text;
|
|
21373
21517
|
var PriceListCardDescription = function (_a) {
|
|
21374
21518
|
var description = _a.description;
|
|
21375
|
-
|
|
21376
|
-
if (!description)
|
|
21377
|
-
return null;
|
|
21378
|
-
return jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: htmlParsedDescription }));
|
|
21519
|
+
return (jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: jsx(Markup, { content: description }) })));
|
|
21379
21520
|
};
|
|
21380
21521
|
|
|
21381
21522
|
var BillingPeriodConverter;
|
|
@@ -21402,7 +21543,9 @@ var PriceListCardPriceDescription = function (_a) {
|
|
|
21402
21543
|
fontSize: isMobile ? '13px' : '12px',
|
|
21403
21544
|
} }, { 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
|
|
21404
21545
|
? "".concat(feature.unitName.toLowerCase(), " / ")
|
|
21405
|
-
: ''
|
|
21546
|
+
: '').concat(priceList.showPriceAsMonthly
|
|
21547
|
+
? 'month'
|
|
21548
|
+
: PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)])) })), 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)]] })))] }));
|
|
21406
21549
|
};
|
|
21407
21550
|
|
|
21408
21551
|
var CheckIcon = function (_a) {
|
|
@@ -21426,12 +21569,10 @@ var PriceListCardButton = function (_a) {
|
|
|
21426
21569
|
return priceList.plan.contactUsLabel;
|
|
21427
21570
|
return 'Select';
|
|
21428
21571
|
};
|
|
21429
|
-
return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end" }, { children: jsx(
|
|
21572
|
+
return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end" }, { children: jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsx(Button, __assign({ className: "bunny-w-full", disabled: disableOnClick, style: {
|
|
21430
21573
|
maxWidth: '240px',
|
|
21431
21574
|
}, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
|
|
21432
21575
|
};
|
|
21433
|
-
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);
|
|
21434
|
-
var templateObject_1$4;
|
|
21435
21576
|
|
|
21436
21577
|
var PriceListCardMobile = function (_a) {
|
|
21437
21578
|
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;
|
|
@@ -21440,11 +21581,11 @@ var PriceListCardMobile = function (_a) {
|
|
|
21440
21581
|
if (!disableOnClick)
|
|
21441
21582
|
onClick(priceList);
|
|
21442
21583
|
}, style: {
|
|
21443
|
-
minWidth:
|
|
21584
|
+
minWidth: '220px',
|
|
21444
21585
|
borderColor: isSelected ? brandColor : SLATE_200,
|
|
21445
21586
|
} }, { children: [isSelected && (jsx("div", __assign({ className: "bunny-absolute", style: {
|
|
21446
|
-
top:
|
|
21447
|
-
right:
|
|
21587
|
+
top: '10px',
|
|
21588
|
+
right: '10px',
|
|
21448
21589
|
} }, { children: jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardPrice, { priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
|
|
21449
21590
|
};
|
|
21450
21591
|
|
|
@@ -21900,7 +22041,6 @@ var PlanManager = function (_a) {
|
|
|
21900
22041
|
var queryClient = useQueryClient();
|
|
21901
22042
|
var showSuccessNotification = useSuccessNotification();
|
|
21902
22043
|
var showInfoNotification = useInfoNotification();
|
|
21903
|
-
var isMobile = useIsMobile();
|
|
21904
22044
|
var defaultPaymentMethod = usePaymentMethod({
|
|
21905
22045
|
token: token,
|
|
21906
22046
|
apiHost: apiHost,
|
|
@@ -21952,8 +22092,8 @@ var PlanManager = function (_a) {
|
|
|
21952
22092
|
}, []);
|
|
21953
22093
|
function handleSetEditingQuoteData(quoteId, isTrial) {
|
|
21954
22094
|
setEditingQuoteData({
|
|
21955
|
-
id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
|
|
21956
|
-
isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial),
|
|
22095
|
+
id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) || '',
|
|
22096
|
+
isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) || false,
|
|
21957
22097
|
});
|
|
21958
22098
|
}
|
|
21959
22099
|
// Handlers
|
|
@@ -21984,7 +22124,7 @@ var PlanManager = function (_a) {
|
|
|
21984
22124
|
return showInfoNotification('You are in preview mode');
|
|
21985
22125
|
setQuotePreviewData(undefined);
|
|
21986
22126
|
onChangePlanCancel();
|
|
21987
|
-
}, title: "Change plan" }), jsx(PlanPicker, {}), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token,
|
|
22127
|
+
}, title: "Change plan" }), jsx(PlanPicker, {}), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsx("div", { ref: stickyRef }), jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsx(PlanPickerCheckoutBarWrapper, { editingQuote: editingQuoteData, setEditingQuoteData: handleSetEditingQuoteData, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
|
|
21988
22128
|
};
|
|
21989
22129
|
|
|
21990
22130
|
var useCancelSubscription = function () {
|
|
@@ -22546,6 +22686,11 @@ var quoteChargeCreate = function (_a) {
|
|
|
22546
22686
|
});
|
|
22547
22687
|
};
|
|
22548
22688
|
|
|
22689
|
+
var formatDateForApi = function (date) {
|
|
22690
|
+
if (typeof date === 'string')
|
|
22691
|
+
date = dayjs(date);
|
|
22692
|
+
return date.format('YYYY-MM-DD');
|
|
22693
|
+
};
|
|
22549
22694
|
var QuantityInput = function (_a) {
|
|
22550
22695
|
var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, subscriptions = _a.subscriptions;
|
|
22551
22696
|
// Context
|
|
@@ -22566,17 +22711,14 @@ var QuantityInput = function (_a) {
|
|
|
22566
22711
|
(updatingChargeQuantityId && updatingChargeQuantityId !== charge.id) ||
|
|
22567
22712
|
// If the subscription is not self-service, we disable the quantity input
|
|
22568
22713
|
!charge.selfServiceQuantity;
|
|
22569
|
-
var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined
|
|
22570
|
-
? ""
|
|
22571
|
-
: editedSubscription.quantity;
|
|
22714
|
+
var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined ? '' : editedSubscription.quantity;
|
|
22572
22715
|
// Mutations
|
|
22573
22716
|
var createCharge = useMutation({
|
|
22574
22717
|
mutationFn: quoteChargeCreate,
|
|
22575
22718
|
onSuccess: function (response) {
|
|
22576
22719
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
22577
22720
|
if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
|
|
22578
|
-
var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
|
|
22579
|
-
SubscriptionState$2.TRIAL;
|
|
22721
|
+
var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
|
|
22580
22722
|
setEditingQuoteData({
|
|
22581
22723
|
id: (_e = (_d = (_c = response.quoteChargeCreate) === null || _c === void 0 ? void 0 : _c.quoteCharge) === null || _d === void 0 ? void 0 : _d.quoteChange) === null || _e === void 0 ? void 0 : _e.quoteId,
|
|
22582
22724
|
isTrial: isTrial,
|
|
@@ -22585,7 +22727,7 @@ var QuantityInput = function (_a) {
|
|
|
22585
22727
|
queryClient.invalidateQueries({
|
|
22586
22728
|
queryKey: QueryKeyFactory.default.createObjectKey({
|
|
22587
22729
|
id: (_h = (_g = (_f = response.quoteChargeCreate) === null || _f === void 0 ? void 0 : _f.quoteCharge) === null || _g === void 0 ? void 0 : _g.quoteChange) === null || _h === void 0 ? void 0 : _h.quoteId,
|
|
22588
|
-
objectName:
|
|
22730
|
+
objectName: 'editingQuote',
|
|
22589
22731
|
token: token,
|
|
22590
22732
|
}),
|
|
22591
22733
|
});
|
|
@@ -22598,17 +22740,14 @@ var QuantityInput = function (_a) {
|
|
|
22598
22740
|
onSuccess: function (subscriptionUpdateData) {
|
|
22599
22741
|
var _a, _b;
|
|
22600
22742
|
var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
|
|
22601
|
-
var quoteChange = quote.quoteChanges.find(function (quoteChange) {
|
|
22602
|
-
return quoteChange.priceList.id ===
|
|
22603
|
-
(editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id);
|
|
22604
|
-
});
|
|
22743
|
+
var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
|
|
22605
22744
|
var subscriptionCharge = (_b = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.subscription) === null || _b === void 0 ? void 0 : _b.charges.find(function (charge) { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.chargeId); });
|
|
22606
22745
|
if (subscriptionCharge && quoteChange && editedSubscription) {
|
|
22607
22746
|
createCharge({
|
|
22608
22747
|
apiHost: apiHost,
|
|
22609
22748
|
quantity: editedSubscription.quantity,
|
|
22610
22749
|
quoteChangeId: quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id,
|
|
22611
|
-
startDate:
|
|
22750
|
+
startDate: formatDateForApi(dayjs()),
|
|
22612
22751
|
subscriptionChargeId: subscriptionCharge.id,
|
|
22613
22752
|
token: token,
|
|
22614
22753
|
});
|
|
@@ -22623,8 +22762,7 @@ var QuantityInput = function (_a) {
|
|
|
22623
22762
|
onSuccess: function (response) {
|
|
22624
22763
|
var _a, _b, _c, _d, _e, _f;
|
|
22625
22764
|
if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
|
|
22626
|
-
var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
|
|
22627
|
-
SubscriptionState$2.TRIAL;
|
|
22765
|
+
var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
|
|
22628
22766
|
setEditingQuoteData({
|
|
22629
22767
|
id: (_d = (_c = response.quoteChangeUpdate) === null || _c === void 0 ? void 0 : _c.quoteChange) === null || _d === void 0 ? void 0 : _d.quoteId,
|
|
22630
22768
|
isTrial: isTrial,
|
|
@@ -22633,7 +22771,7 @@ var QuantityInput = function (_a) {
|
|
|
22633
22771
|
queryClient.invalidateQueries({
|
|
22634
22772
|
queryKey: QueryKeyFactory.default.createObjectKey({
|
|
22635
22773
|
id: (_f = (_e = response.quoteChangeUpdate) === null || _e === void 0 ? void 0 : _e.quoteChange) === null || _f === void 0 ? void 0 : _f.quoteId,
|
|
22636
|
-
objectName:
|
|
22774
|
+
objectName: 'editingQuote',
|
|
22637
22775
|
token: token,
|
|
22638
22776
|
}),
|
|
22639
22777
|
});
|
|
@@ -22641,8 +22779,7 @@ var QuantityInput = function (_a) {
|
|
|
22641
22779
|
});
|
|
22642
22780
|
// Handlers
|
|
22643
22781
|
var isQuantityLowerThanOriginal = function (quantity) {
|
|
22644
|
-
return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined &&
|
|
22645
|
-
editedSubscription.quantity <= quantity;
|
|
22782
|
+
return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined && editedSubscription.quantity <= quantity;
|
|
22646
22783
|
};
|
|
22647
22784
|
var onChangeQuantity = function (chargeIndex, value, priceListChargeId, subscription, subscriptionIndex) {
|
|
22648
22785
|
var quantity = isNaN(parseInt(value)) ? 0 : parseInt(value);
|
|
@@ -22721,12 +22858,12 @@ var QuantityInput = function (_a) {
|
|
|
22721
22858
|
// eslint-disable-next-line
|
|
22722
22859
|
}, [editedSubscription]);
|
|
22723
22860
|
return (jsx(Fragment, { children: jsx(Input, { className: "bunny-text-right", disabled: quantityDisabled, onBlur: function () {
|
|
22724
|
-
if (typeof value ===
|
|
22725
|
-
showErrorNotification(
|
|
22861
|
+
if (typeof value === 'number' && value < charge.quantity) {
|
|
22862
|
+
showErrorNotification('New value is less than the original quantity. This is not allowed');
|
|
22726
22863
|
}
|
|
22727
22864
|
}, onChange: function (e) {
|
|
22728
22865
|
onChangeQuantity(chargeIndex, e.target.value, charge.priceListChargeId, subscription, subscriptionIndex);
|
|
22729
|
-
}, status: isQuantityLowerThanOriginal(charge.quantity) ?
|
|
22866
|
+
}, status: isQuantityLowerThanOriginal(charge.quantity) ? 'error' : '', style: { width: '96px' }, value: value }) }));
|
|
22730
22867
|
};
|
|
22731
22868
|
|
|
22732
22869
|
var Text$2 = Typography.Text;
|
|
@@ -23008,7 +23145,7 @@ var Subscriptions = function (_a) {
|
|
|
23008
23145
|
setIsChangingPlan(false);
|
|
23009
23146
|
}, handlePortalErrors: handlePortalErrors }));
|
|
23010
23147
|
}
|
|
23011
|
-
return (jsxs("div", __assign({ className:
|
|
23148
|
+
return (jsxs("div", __assign({ className: className }, { children: [!hideTitle ? jsx(PageTitle, { title: 'Subscriptions' }) : null, jsx(PageHeaderWithActions, __assign({ title: jsx(Fragment, { children: !hideExpiredToggle && (jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod })] })));
|
|
23012
23149
|
};
|
|
23013
23150
|
var PageHeaderWithActions = function (_a) {
|
|
23014
23151
|
var children = _a.children, title = _a.title;
|
|
@@ -23128,7 +23265,7 @@ function BillingDetailsSection(_a) {
|
|
|
23128
23265
|
});
|
|
23129
23266
|
}); },
|
|
23130
23267
|
onSuccess: function () {
|
|
23131
|
-
showSuccessNotification(
|
|
23268
|
+
showSuccessNotification('Your account details have been saved');
|
|
23132
23269
|
queryClient.invalidateQueries({
|
|
23133
23270
|
queryKey: QueryKeyFactory.default.taxationRequiredAccountFieldsKey({
|
|
23134
23271
|
token: token,
|
|
@@ -23199,10 +23336,10 @@ function BillingDetailsSection(_a) {
|
|
|
23199
23336
|
case 2:
|
|
23200
23337
|
error_1 = _a.sent();
|
|
23201
23338
|
if (error_1 instanceof Error) {
|
|
23202
|
-
showErrorNotification(
|
|
23339
|
+
showErrorNotification('Failed to update account', error_1.message);
|
|
23203
23340
|
}
|
|
23204
23341
|
else {
|
|
23205
|
-
showErrorNotification(
|
|
23342
|
+
showErrorNotification('Please fill out all required fields');
|
|
23206
23343
|
}
|
|
23207
23344
|
return [3 /*break*/, 4];
|
|
23208
23345
|
case 3:
|
|
@@ -23216,29 +23353,21 @@ function BillingDetailsSection(_a) {
|
|
|
23216
23353
|
});
|
|
23217
23354
|
}); };
|
|
23218
23355
|
var filteredCountryList = useMemo(function () {
|
|
23219
|
-
return countryListFilter
|
|
23220
|
-
? Lists.COUNTRY_LIST.filter(countryListFilter)
|
|
23221
|
-
: Lists.COUNTRY_LIST;
|
|
23356
|
+
return countryListFilter ? Lists.COUNTRY_LIST.filter(countryListFilter) : Lists.COUNTRY_LIST;
|
|
23222
23357
|
}, [countryListFilter]);
|
|
23223
|
-
return (jsx("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ?
|
|
23224
|
-
{ required: true, message: "Street address is required" },
|
|
23225
|
-
] }, { children: jsx(Input, {}) })), jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsx(Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: "City is required" }], className: "bunny-flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: "Zipcode is required" }], className: "bunny-flex-1" }, { children: jsx(Input, {}) }))] })), jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-row bunny-pb-2" : "bunny-flex-row", " bunny-gap-4") }, { children: [jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsx(Form.Item, __assign({ label: "State", name: "billingState", rules: [
|
|
23358
|
+
return (jsx("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? 'bunny-w-full' : 'bunny-w-1/2') }, { children: jsxs("div", __assign({ className: "bunny-px-4" }, { children: [jsxs(Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: [jsx("div", __assign({ className: "bunny-mb-2" }, { children: jsx(Text, __assign({ className: "bunny-font-medium bunny-text-lg" }, { children: (billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.name) || 'No company name' })) })), jsxs(Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsx(Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [{ required: true, message: 'Street address is required' }] }, { children: jsx(Input, {}) })), jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsx(Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: 'City is required' }], className: "bunny-flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: 'Zipcode is required' }], className: "bunny-flex-1" }, { children: jsx(Input, {}) }))] })), jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: [jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsx(Form.Item, __assign({ label: "State", name: "billingState", rules: [
|
|
23226
23359
|
{
|
|
23227
23360
|
required: false,
|
|
23228
23361
|
},
|
|
23229
|
-
] }, { children: jsx(Input, {}) })) })), jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsx(Form.Item, __assign({ label: "Country", name: "billingCountry", rules: [{ required: true, message:
|
|
23362
|
+
] }, { children: jsx(Input, {}) })) })), jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsx(Form.Item, __assign({ label: "Country", name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsx(Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
|
|
23230
23363
|
var _a, _b;
|
|
23231
|
-
return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a :
|
|
23232
|
-
.toLowerCase()
|
|
23233
|
-
.includes(input.toLowerCase()) ||
|
|
23234
|
-
((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "")
|
|
23235
|
-
.toLowerCase()
|
|
23236
|
-
.includes(input.toLowerCase());
|
|
23364
|
+
return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
|
|
23365
|
+
((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
|
|
23237
23366
|
} }) })) }))] })), jsx(Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
|
|
23238
23367
|
{
|
|
23239
23368
|
required: true,
|
|
23240
|
-
message:
|
|
23241
|
-
type:
|
|
23369
|
+
message: 'Email is required',
|
|
23370
|
+
type: 'email',
|
|
23242
23371
|
},
|
|
23243
23372
|
] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }] }, { children: jsx(Input, {}) }))] }))] })), jsx(Button, __assign({ disabled: !isFormEdited || isUpdatingBillingDetails || !formIsValid, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails }, { children: "Save" }))] })) })));
|
|
23244
23373
|
}
|
|
@@ -23247,7 +23376,7 @@ var BillingDetails = function (_a) {
|
|
|
23247
23376
|
var _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? 'shadow-md' : _c, className = _a.className, _d = _a.hidePaymentMethodForm, hidePaymentMethodForm = _d === void 0 ? false : _d, _e = _a.hideBillingDetailsForm, hideBillingDetailsForm = _e === void 0 ? false : _e, countryListFilter = _a.countryListFilter;
|
|
23248
23377
|
// Hooks
|
|
23249
23378
|
var isMobile = useIsMobile();
|
|
23250
|
-
return (jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-
|
|
23379
|
+
return (jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-py-2 bunny-my-2 ".concat(isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row', " bunny-gap-4") }, { children: [!hideBillingDetailsForm ? (jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm })) : null] })) })));
|
|
23251
23380
|
};
|
|
23252
23381
|
var WrapperComponent = function (_a) {
|
|
23253
23382
|
var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;
|
|
@@ -23263,8 +23392,8 @@ var PaymentFormSection = function (_a) {
|
|
|
23263
23392
|
var onTokenExpired = useContext(BunnyContext).onTokenExpired;
|
|
23264
23393
|
var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
|
|
23265
23394
|
var showSuccessNotification = useSuccessNotification();
|
|
23266
|
-
useCurrentUserData().
|
|
23267
|
-
return (jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsx(PaymentForm, { onFail: function (error) {
|
|
23395
|
+
var entityId = useCurrentUserData().entityId;
|
|
23396
|
+
return (jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
|
|
23268
23397
|
handleAllErrorFormats(error);
|
|
23269
23398
|
}, onSavePaymentMethod: function () {
|
|
23270
23399
|
showSuccessNotification('Your payment method has been saved');
|