@bunnyapp/components 1.0.44 → 1.0.45
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 +2347 -522
- package/dist/cjs/src/components/Footer/BunnyFooterIcon.d.ts +4 -0
- package/dist/cjs/src/components/Footer/Footer.d.ts +4 -0
- package/dist/cjs/src/components/Quote/Quote.stories.d.ts +10 -10
- package/dist/cjs/src/components/Subscriptions/CheckIcon.d.ts +5 -0
- package/dist/cjs/src/components/Subscriptions/PageTitle.d.ts +5 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanManager.d.ts +5 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/NextPriceListButton.d.ts +8 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +7 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +15 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListSelector.d.ts +11 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarInput.d.ts +8 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +12 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutButton.d.ts +6 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutPrice.d.ts +7 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +5 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/BillingPeriodSelector.d.ts +11 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +6 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/FeatureGridCell.d.ts +7 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +7 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanPickerGridCell.d.ts +6 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +14 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +15 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/consts.d.ts +1 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/planManagerUtils.d.ts +2 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +14 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +11 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +12 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +10 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +9 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts +4 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardFeature.d.ts +6 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +6 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +7 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardTitle.d.ts +7 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +10 -0
- package/dist/cjs/src/components/Subscriptions/PlanManager/PreviewModeAdvisary.d.ts +4 -0
- package/dist/cjs/src/components/Subscriptions/SubscriptionRequests.d.ts +2 -0
- package/dist/cjs/src/components/Subscriptions/Subscriptions.d.ts +10 -12
- package/dist/cjs/src/components/Subscriptions/SubscriptionsContext.d.ts +13 -0
- package/dist/cjs/src/components/Subscriptions/SubscriptionsListContainer.d.ts +16 -0
- package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridRow.d.ts +11 -0
- package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridTitle.d.ts +6 -0
- package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuantityInput.d.ts +21 -0
- package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuoteChangeSummarySection.d.ts +9 -0
- package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +14 -0
- package/dist/cjs/src/components/Subscriptions/subscriptionsList/ChangeQuantitiesButton.d.ts +5 -0
- package/dist/cjs/src/components/Subscriptions/subscriptionsList/HideExpiredToggle.d.ts +6 -0
- package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionsNavigation.d.ts +9 -0
- package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +5 -2
- package/dist/cjs/src/components/index.d.ts +0 -1
- package/dist/cjs/src/graphql/QuoteRequests.d.ts +6 -0
- package/dist/cjs/src/graphql/mutations/quoteCompose.d.ts +1 -1
- package/dist/cjs/src/graphql/queries/getPortalPreviewQuery.d.ts +2 -0
- package/dist/cjs/src/graphql/queries/getQuote.d.ts +7 -0
- package/dist/cjs/src/hooks/useCurrentUserData.d.ts +2 -0
- package/dist/cjs/src/index.d.ts +0 -1
- package/dist/cjs/src/utils/apiUtils.d.ts +2 -0
- package/dist/cjs/src/utils/pricePickerUtils.d.ts +5 -0
- package/dist/esm/index.js +2350 -523
- package/dist/esm/src/components/Footer/BunnyFooterIcon.d.ts +4 -0
- package/dist/esm/src/components/Footer/Footer.d.ts +4 -0
- package/dist/esm/src/components/Quote/Quote.stories.d.ts +10 -10
- package/dist/esm/src/components/Subscriptions/CheckIcon.d.ts +5 -0
- package/dist/esm/src/components/Subscriptions/PageTitle.d.ts +5 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanManager.d.ts +5 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/NextPriceListButton.d.ts +8 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +7 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +15 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListSelector.d.ts +11 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarInput.d.ts +8 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +12 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutButton.d.ts +6 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutPrice.d.ts +7 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/PlanPickerCheckoutBar.d.ts +5 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/BillingPeriodSelector.d.ts +11 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +6 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/FeatureGridCell.d.ts +7 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +7 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanPickerGridCell.d.ts +6 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +14 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +15 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/consts.d.ts +1 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/planManagerUtils.d.ts +2 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +14 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +11 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +12 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +10 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +9 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts +4 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardFeature.d.ts +6 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +6 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +7 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardTitle.d.ts +7 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +10 -0
- package/dist/esm/src/components/Subscriptions/PlanManager/PreviewModeAdvisary.d.ts +4 -0
- package/dist/esm/src/components/Subscriptions/SubscriptionRequests.d.ts +2 -0
- package/dist/esm/src/components/Subscriptions/Subscriptions.d.ts +10 -12
- package/dist/esm/src/components/Subscriptions/SubscriptionsContext.d.ts +13 -0
- package/dist/esm/src/components/Subscriptions/SubscriptionsListContainer.d.ts +16 -0
- package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridRow.d.ts +11 -0
- package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridTitle.d.ts +6 -0
- package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuantityInput.d.ts +21 -0
- package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuoteChangeSummarySection.d.ts +9 -0
- package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/quantityChangeDrawerDesktop/QuantityChangeDrawerDesktop.d.ts +14 -0
- package/dist/esm/src/components/Subscriptions/subscriptionsList/ChangeQuantitiesButton.d.ts +5 -0
- package/dist/esm/src/components/Subscriptions/subscriptionsList/HideExpiredToggle.d.ts +6 -0
- package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionsNavigation.d.ts +9 -0
- package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts +5 -2
- package/dist/esm/src/components/index.d.ts +0 -1
- package/dist/esm/src/graphql/QuoteRequests.d.ts +6 -0
- package/dist/esm/src/graphql/mutations/quoteCompose.d.ts +1 -1
- package/dist/esm/src/graphql/queries/getPortalPreviewQuery.d.ts +2 -0
- package/dist/esm/src/graphql/queries/getQuote.d.ts +7 -0
- package/dist/esm/src/hooks/useCurrentUserData.d.ts +2 -0
- package/dist/esm/src/index.d.ts +0 -1
- package/dist/esm/src/utils/apiUtils.d.ts +2 -0
- package/dist/esm/src/utils/pricePickerUtils.d.ts +5 -0
- package/dist/index.d.ts +10 -42
- package/package.json +2 -2
- package/dist/cjs/src/components/Checkout/index.d.ts +0 -2
- package/dist/cjs/src/graphql/mutations/quoteSubscriptionReinstate.d.ts +0 -7
- package/dist/cjs/src/hooks/index.d.ts +0 -1
- package/dist/cjs/src/utils/quoteInvoiceUtils.d.ts +0 -6
- package/dist/esm/src/components/Checkout/index.d.ts +0 -2
- package/dist/esm/src/graphql/mutations/quoteSubscriptionReinstate.d.ts +0 -7
- package/dist/esm/src/hooks/index.d.ts +0 -1
- package/dist/esm/src/utils/quoteInvoiceUtils.d.ts +0 -6
package/dist/cjs/index.js
CHANGED
|
@@ -12,9 +12,11 @@ var common = require('@bunnyapp/common');
|
|
|
12
12
|
var reactQuery = require('@tanstack/react-query');
|
|
13
13
|
var theme = require('antd/lib/theme/index.js');
|
|
14
14
|
var recoil = require('recoil');
|
|
15
|
-
var
|
|
15
|
+
var request = require('graphql-request');
|
|
16
16
|
var reactStripeJs = require('@stripe/react-stripe-js');
|
|
17
17
|
var index_js = require('@stripe/stripe-js/pure/index.js');
|
|
18
|
+
var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
19
|
+
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
|
|
18
20
|
var recharts = require('recharts');
|
|
19
21
|
var lodashEs = require('lodash-es');
|
|
20
22
|
var pkg = require('pluralize');
|
|
@@ -41,6 +43,7 @@ function _interopNamespace(e) {
|
|
|
41
43
|
|
|
42
44
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
43
45
|
var theme__default = /*#__PURE__*/_interopDefaultLegacy(theme);
|
|
46
|
+
var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
|
|
44
47
|
var pkg__default = /*#__PURE__*/_interopDefaultLegacy(pkg);
|
|
45
48
|
|
|
46
49
|
function styleInject(css, ref) {
|
|
@@ -70,7 +73,7 @@ function styleInject(css, ref) {
|
|
|
70
73
|
}
|
|
71
74
|
}
|
|
72
75
|
|
|
73
|
-
var css_248z = ".ant-divider-horizontal {\n margin: 0;\n}\n.ant-divider-horizontal {\n margin: 0;\n}\n.ant-tag {\n border: none;\n border-radius: 14px;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-weight: 500;\n white-space: nowrap;\n margin: 0;\n}\n.ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.ant-popover {\n z-index: 1050;\n}\n.ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n}\n.ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ant-btn-link:disabled {\n color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n background-color: transparent !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n color: #232323 !important;\n font-size: 14px !important;\n word-break: break-all !important;\n overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff6e1c !important;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-menu-submenu::after {\n display: none !important;\n}\n:root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n height: 1px;\n min-width: 128px;\n background: #717d94;\n}\n.plan-step-number {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n border: 1px solid #717d94;\n background: white;\n width: 24px;\n height: 24px;\n color: #717d94;\n}\n.plan-step-number.active {\n border: none;\n color: white;\n background: #ff6e1c;\n}\n.hidden {\n display: none;\n}\n.cardElement {\n padding: 8px 11px;\n border: 1px solid #e5e7eb;\n background-color: white;\n font-family: Inter !important;\n}\n.tooltip {\n visibility: hidden;\n position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.show-on-hover {\n opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n opacity: 1;\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#form-element #finix-form-container .field-holder label {\n color: #717d94 !important;\n font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n height: 34px !important;\n}\n#form-element #finix-form-container .field {\n margin-top: 0 !important;\n padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n font-size: 11px !important;\n color: #ff4d4f !important;\n}\n.icon-path {\n transition: fill 0.3s;\n}\n.shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.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 .shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .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.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.bottom-0 {\n bottom: 0px;\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.m-0 {\n margin: 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-4 {\n margin-bottom: 1rem;\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-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\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.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-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\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-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-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.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-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.pb-1 {\n padding-bottom: 0.25rem;\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-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-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-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.font-light {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-medium {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-bold {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\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* {\n margin: 0;\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\nbody {\n color: #232323;\n background-color: #f8fafc;\n}\nth {\n font-weight: normal;\n}\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\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";
|
|
76
|
+
var css_248z = ".ant-divider-horizontal {\n margin: 0;\n}\n.ant-divider-horizontal {\n margin: 0;\n}\n.ant-tag {\n border: none;\n border-radius: 14px;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-weight: 500;\n white-space: nowrap;\n margin: 0;\n}\n.ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.ant-popover {\n z-index: 1050;\n}\n.ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n}\n.ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ant-btn-link:disabled {\n color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n background-color: transparent !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n color: #232323 !important;\n font-size: 14px !important;\n word-break: break-all !important;\n overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff6e1c !important;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-menu-submenu::after {\n display: none !important;\n}\n:root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n height: 1px;\n min-width: 128px;\n background: #717d94;\n}\n.plan-step-number {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n border: 1px solid #717d94;\n background: white;\n width: 24px;\n height: 24px;\n color: #717d94;\n}\n.plan-step-number.active {\n border: none;\n color: white;\n background: #ff6e1c;\n}\n.hidden {\n display: none;\n}\n.cardElement {\n padding: 8px 11px;\n border: 1px solid #e5e7eb;\n background-color: white;\n font-family: Inter !important;\n}\n.tooltip {\n visibility: hidden;\n position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.show-on-hover {\n opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n opacity: 1;\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#form-element #finix-form-container .field-holder label {\n color: #717d94 !important;\n font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n height: 34px !important;\n}\n#form-element #finix-form-container .field {\n margin-top: 0 !important;\n padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n font-size: 11px !important;\n color: #ff4d4f !important;\n}\n.icon-path {\n transition: fill 0.3s;\n}\n.shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.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 .shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .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.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.\\!container {\n width: 100% !important;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n .\\!container {\n max-width: 768px !important;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n .\\!container {\n max-width: 1024px !important;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n .\\!container {\n max-width: 1280px !important;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n .\\!container {\n max-width: 1536px !important;\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.bottom-0 {\n bottom: 0px;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.bottom-16 {\n bottom: 4rem;\n}\n.bottom-8 {\n bottom: 2rem;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.top-32 {\n top: 8rem;\n}\n.top-16 {\n top: 4rem;\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-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.mx-8 {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\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.h-10 {\n height: 2.5rem;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\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.w-10 {\n width: 2.5rem;\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.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / 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.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-16 {\n padding: 4rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.p-48 {\n padding: 12rem;\n}\n.p-44 {\n padding: 11rem;\n}\n.px-12 {\n padding-left: 3rem;\n padding-right: 3rem;\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.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.px-16 {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n.px-32 {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n.px-48 {\n padding-left: 12rem;\n padding-right: 12rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.px-0 {\n padding-left: 0px;\n padding-right: 0px;\n}\n.px-10 {\n padding-left: 2.5rem;\n padding-right: 2.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.pl-1 {\n padding-left: 0.25rem;\n}\n.pb-32 {\n padding-bottom: 8rem;\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-all {\n transition-property: all;\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-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.font-light {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-medium {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-bold {\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\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* {\n margin: 0;\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\nbody {\n color: #232323;\n background-color: #f8fafc;\n}\nth {\n font-weight: normal;\n}\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\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";
|
|
74
77
|
styleInject(css_248z);
|
|
75
78
|
|
|
76
79
|
/******************************************************************************
|
|
@@ -167,7 +170,7 @@ var BrandContext = react.createContext({
|
|
|
167
170
|
topNavImageUrl: common.DEFAULT_TOP_NAV_IMAGE_URL,
|
|
168
171
|
});
|
|
169
172
|
|
|
170
|
-
var MUTATION$
|
|
173
|
+
var MUTATION$9 = "\n query entityBranding {\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }\n";
|
|
171
174
|
var getBranding = function (_a) {
|
|
172
175
|
var token = _a.token, apiHost = _a.apiHost;
|
|
173
176
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -175,7 +178,7 @@ var getBranding = function (_a) {
|
|
|
175
178
|
return __generator(this, function (_b) {
|
|
176
179
|
switch (_b.label) {
|
|
177
180
|
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
178
|
-
query: MUTATION$
|
|
181
|
+
query: MUTATION$9,
|
|
179
182
|
token: token,
|
|
180
183
|
apiHost: apiHost,
|
|
181
184
|
})];
|
|
@@ -188,7 +191,7 @@ var getBranding = function (_a) {
|
|
|
188
191
|
};
|
|
189
192
|
|
|
190
193
|
var createGraphQLClient = function (apiHost, token) {
|
|
191
|
-
return new
|
|
194
|
+
return new request.GraphQLClient(apiHost + "/graphql", {
|
|
192
195
|
headers: token
|
|
193
196
|
? {
|
|
194
197
|
Authorization: token,
|
|
@@ -232,7 +235,9 @@ function ContextualWrapper(_a) {
|
|
|
232
235
|
var entityBranding = react.useMemo(function () {
|
|
233
236
|
var _a;
|
|
234
237
|
// This is to determine if the secondary color should be white or black
|
|
235
|
-
var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor)
|
|
238
|
+
var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor)
|
|
239
|
+
? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16))
|
|
240
|
+
: common.DEFAULT_BRAND_COLOR;
|
|
236
241
|
var secondaryColor = common.DEFAULT_SECONDARY_COLOR;
|
|
237
242
|
if (!isMobile && common.isColorTooDark(branding === null || branding === void 0 ? void 0 : branding.accentColor))
|
|
238
243
|
secondaryColor = "#ffffff";
|
|
@@ -267,11 +272,17 @@ function ContextualWrapper(_a) {
|
|
|
267
272
|
boxShadowSecondary: "none",
|
|
268
273
|
fontWeight: "normal",
|
|
269
274
|
contentFontSizeLG: 14,
|
|
270
|
-
colorBgContainerDisabled: darkMode
|
|
271
|
-
|
|
275
|
+
colorBgContainerDisabled: darkMode
|
|
276
|
+
? "var(--row-background-dark)"
|
|
277
|
+
: "#eef0f2",
|
|
278
|
+
borderColorDisabled: darkMode
|
|
279
|
+
? "var(--row-background-dark)"
|
|
280
|
+
: "#eef0f2",
|
|
272
281
|
},
|
|
273
282
|
Drawer: {
|
|
274
|
-
colorBgElevated: darkMode
|
|
283
|
+
colorBgElevated: darkMode
|
|
284
|
+
? "var(--row-background-dark)"
|
|
285
|
+
: common.SLATE_50,
|
|
275
286
|
},
|
|
276
287
|
Divider: {
|
|
277
288
|
colorSplit: darkMode ? common.SLATE_400 : common.SLATE_200,
|
|
@@ -367,7 +378,7 @@ function useToken() {
|
|
|
367
378
|
return overrideToken || tokenFromContext;
|
|
368
379
|
}
|
|
369
380
|
|
|
370
|
-
var MarkupContainer = defaultStyled.div(templateObject_1$
|
|
381
|
+
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"])));
|
|
371
382
|
var InvoiceQuoteView = function (_a) {
|
|
372
383
|
var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError;
|
|
373
384
|
var downloadFile = useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
|
|
@@ -385,7 +396,7 @@ var InvoiceQuoteView = function (_a) {
|
|
|
385
396
|
minWidth: "750px",
|
|
386
397
|
} }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] })))] })));
|
|
387
398
|
};
|
|
388
|
-
var templateObject_1$
|
|
399
|
+
var templateObject_1$b;
|
|
389
400
|
|
|
390
401
|
var fetchPDF = function (apiEndpoint, invoiceUuid, token) { return __awaiter(void 0, void 0, void 0, function () {
|
|
391
402
|
var response;
|
|
@@ -515,7 +526,7 @@ var getQuoteAmountDue = function (quote) {
|
|
|
515
526
|
return quote.amountDue;
|
|
516
527
|
};
|
|
517
528
|
|
|
518
|
-
var MUTATION$
|
|
529
|
+
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";
|
|
519
530
|
var checkout = function (_a) {
|
|
520
531
|
var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
|
|
521
532
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -532,7 +543,7 @@ var checkout = function (_a) {
|
|
|
532
543
|
mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
|
|
533
544
|
}
|
|
534
545
|
return [4 /*yield*/, common.gqlRequest({
|
|
535
|
-
query: MUTATION$
|
|
546
|
+
query: MUTATION$8,
|
|
536
547
|
token: token,
|
|
537
548
|
vars: mutationVars,
|
|
538
549
|
apiHost: apiHost,
|
|
@@ -751,13 +762,13 @@ var PlusIcon = function (_a) {
|
|
|
751
762
|
return (jsxRuntime.jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
|
|
752
763
|
};
|
|
753
764
|
|
|
754
|
-
var Text$
|
|
765
|
+
var Text$p = antd.Typography.Text;
|
|
755
766
|
var CreditCard = function (_a) {
|
|
756
767
|
var _b;
|
|
757
768
|
var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d;
|
|
758
769
|
var isMobile = common.useIsMobile();
|
|
759
770
|
var Wrapper = cardEnabled ? Card : "div";
|
|
760
|
-
return (jsxRuntime.jsxs(Wrapper, __assign({ className: "".concat(cardEnabled ? shadow : "", " m-0") }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$
|
|
771
|
+
return (jsxRuntime.jsxs(Wrapper, __assign({ className: "".concat(cardEnabled ? shadow : "", " m-0") }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$p, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier })] })), jsxRuntime.jsx(antd.Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(antd.Divider, {}), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(CardAttribute, { title: "EXPIRATION", value: expirationDate(paymentMethodData) }), isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
|
|
761
772
|
};
|
|
762
773
|
var MiniCreditCard = function (_a) {
|
|
763
774
|
var _b;
|
|
@@ -769,7 +780,7 @@ var MiniCreditCard = function (_a) {
|
|
|
769
780
|
var backgroundColor = react.useMemo(function () {
|
|
770
781
|
return darkMode ? "var(--row-background-alternate)" : "bg-slate-50";
|
|
771
782
|
}, [darkMode]);
|
|
772
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$
|
|
783
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$p, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier }), jsxRuntime.jsx(antd.Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })) })), !hideRemoveButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove" })) })))] })) : (jsxRuntime.jsxs("div", __assign({ className: "flex flex-row gap-2 items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$p, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: "No payment method selected" })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" })] }))) })));
|
|
773
784
|
};
|
|
774
785
|
var CardImage = function (_a) {
|
|
775
786
|
var _b, _c;
|
|
@@ -788,7 +799,7 @@ var CardImage = function (_a) {
|
|
|
788
799
|
};
|
|
789
800
|
var CardAttribute = function (_a) {
|
|
790
801
|
var title = _a.title, value = _a.value;
|
|
791
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.jsx(Text$
|
|
802
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.jsx(Text$p, { children: value })] })));
|
|
792
803
|
};
|
|
793
804
|
var CardActions = function (_a) {
|
|
794
805
|
var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
|
|
@@ -969,7 +980,7 @@ function useSave$1(_a) {
|
|
|
969
980
|
return { save: save, isSaving: isSaving };
|
|
970
981
|
}
|
|
971
982
|
|
|
972
|
-
var Text$
|
|
983
|
+
var Text$o = antd.Typography.Text;
|
|
973
984
|
var TEST_CARD = "4242424242424242";
|
|
974
985
|
var DemoPayForm = function (_a) {
|
|
975
986
|
var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
|
|
@@ -1030,16 +1041,16 @@ var DemoPayForm = function (_a) {
|
|
|
1030
1041
|
var onCardCvcChange = function (cvc) {
|
|
1031
1042
|
setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
|
|
1032
1043
|
};
|
|
1033
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$
|
|
1044
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$o, __assign({ className: "text-xs" }, { children: "DemoPay is for testing only." })), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
|
|
1034
1045
|
};
|
|
1035
|
-
var StyledInputs = defaultStyled.div(templateObject_1$
|
|
1046
|
+
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) {
|
|
1036
1047
|
var darkMode = _a.darkMode;
|
|
1037
1048
|
return darkMode ? "var(--row-background-dark)" : "white";
|
|
1038
1049
|
}, function (_a) {
|
|
1039
1050
|
var darkMode = _a.darkMode;
|
|
1040
1051
|
return darkMode ? common.GRAY_500 : common.GRAY_200;
|
|
1041
1052
|
});
|
|
1042
|
-
var templateObject_1$
|
|
1053
|
+
var templateObject_1$a;
|
|
1043
1054
|
|
|
1044
1055
|
var createPaymentMethod = function (_a) {
|
|
1045
1056
|
var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
|
|
@@ -1138,7 +1149,7 @@ function useSave(_a) {
|
|
|
1138
1149
|
var save = function (_a) {
|
|
1139
1150
|
var plugin = _a.plugin;
|
|
1140
1151
|
return __awaiter(_this, void 0, void 0, function () {
|
|
1141
|
-
var submitError, response, clientSecret, intentResponse, paymentMethodId, paymentMethodResponse;
|
|
1152
|
+
var submitError, response, clientSecret, intentResponse, paymentMethodId, paymentMethodResponse, error_1;
|
|
1142
1153
|
var _b, _c;
|
|
1143
1154
|
return __generator(this, function (_d) {
|
|
1144
1155
|
switch (_d.label) {
|
|
@@ -1199,9 +1210,8 @@ function useSave(_a) {
|
|
|
1199
1210
|
});
|
|
1200
1211
|
return [3 /*break*/, 7];
|
|
1201
1212
|
case 5:
|
|
1202
|
-
_d.sent();
|
|
1203
|
-
|
|
1204
|
-
console.log("fancy error right here");
|
|
1213
|
+
error_1 = _d.sent();
|
|
1214
|
+
console.error(error_1);
|
|
1205
1215
|
return [3 /*break*/, 7];
|
|
1206
1216
|
case 6:
|
|
1207
1217
|
setIsSaving(false);
|
|
@@ -1273,7 +1283,7 @@ var CardIcon = function () {
|
|
|
1273
1283
|
return (jsxRuntime.jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
|
|
1274
1284
|
};
|
|
1275
1285
|
|
|
1276
|
-
var Text$
|
|
1286
|
+
var Text$n = antd.Typography.Text;
|
|
1277
1287
|
var PaymentMethodSelector = function (_a) {
|
|
1278
1288
|
var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
|
|
1279
1289
|
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsxRuntime.jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
|
|
@@ -1286,9 +1296,9 @@ var PaymentOption = function (_a) {
|
|
|
1286
1296
|
var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
|
|
1287
1297
|
return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "flex justify-between items-center w-full cursor-pointer py-2 px-4 rounded border-solid ".concat(darkMode
|
|
1288
1298
|
? "var(--row-background-dark) border-gray-500"
|
|
1289
|
-
: "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsxRuntime.jsx(Text$
|
|
1299
|
+
: "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsxRuntime.jsx(Text$n, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
|
|
1290
1300
|
};
|
|
1291
|
-
var PaymentOptionContainer = defaultStyled.div(templateObject_1$
|
|
1301
|
+
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) {
|
|
1292
1302
|
var $brandColor = _a.$brandColor, $selected = _a.$selected;
|
|
1293
1303
|
return $selected &&
|
|
1294
1304
|
"\n border-color: ".concat($brandColor, ";\n ");
|
|
@@ -1296,7 +1306,7 @@ var PaymentOptionContainer = defaultStyled.div(templateObject_1$5 || (templateOb
|
|
|
1296
1306
|
var $brandColor = _a.$brandColor;
|
|
1297
1307
|
return $brandColor;
|
|
1298
1308
|
});
|
|
1299
|
-
var templateObject_1$
|
|
1309
|
+
var templateObject_1$9;
|
|
1300
1310
|
|
|
1301
1311
|
function useRemovePaymentMethod(paymentPlugins, apiHost, entityId, token, accountId) {
|
|
1302
1312
|
var _this = this;
|
|
@@ -1481,7 +1491,7 @@ function ActualInvoice() {
|
|
|
1481
1491
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsxRuntime.jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost, token: token }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice, graphQLClient: graphQLClient }) })))] })) }));
|
|
1482
1492
|
}
|
|
1483
1493
|
|
|
1484
|
-
var MUTATION$
|
|
1494
|
+
var MUTATION$7 = function (id) { return "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n object { documents { id filename size date url } }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"; };
|
|
1485
1495
|
var getFormattedQuote = function (_a) {
|
|
1486
1496
|
var id = _a.id, token = _a.token, apiHost = _a.apiHost;
|
|
1487
1497
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -1489,7 +1499,7 @@ var getFormattedQuote = function (_a) {
|
|
|
1489
1499
|
return __generator(this, function (_b) {
|
|
1490
1500
|
switch (_b.label) {
|
|
1491
1501
|
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
1492
|
-
query: MUTATION$
|
|
1502
|
+
query: MUTATION$7(),
|
|
1493
1503
|
token: token,
|
|
1494
1504
|
apiHost: apiHost,
|
|
1495
1505
|
vars: { id: id },
|
|
@@ -1567,10 +1577,16 @@ var useSendAcceptQuote = function (_a) {
|
|
|
1567
1577
|
});
|
|
1568
1578
|
client.on("sign", function (data) {
|
|
1569
1579
|
queryClient.refetchQueries({
|
|
1570
|
-
queryKey: common.QueryKeyFactory.default.createQuoteKey({
|
|
1580
|
+
queryKey: common.QueryKeyFactory.default.createQuoteKey({
|
|
1581
|
+
id: quoteId,
|
|
1582
|
+
token: token,
|
|
1583
|
+
}),
|
|
1571
1584
|
});
|
|
1572
1585
|
queryClient.refetchQueries({
|
|
1573
|
-
queryKey: common.QueryKeyFactory.default.createQuoteKey({
|
|
1586
|
+
queryKey: common.QueryKeyFactory.default.createQuoteKey({
|
|
1587
|
+
id: quoteId,
|
|
1588
|
+
token: token,
|
|
1589
|
+
}),
|
|
1574
1590
|
});
|
|
1575
1591
|
});
|
|
1576
1592
|
// Open the DropboxSign modal
|
|
@@ -1591,10 +1607,16 @@ var useSendAcceptQuote = function (_a) {
|
|
|
1591
1607
|
else {
|
|
1592
1608
|
setAcceptBoxVisible(false);
|
|
1593
1609
|
queryClient.invalidateQueries({
|
|
1594
|
-
queryKey: common.QueryKeyFactory.default.createQuoteKey({
|
|
1610
|
+
queryKey: common.QueryKeyFactory.default.createQuoteKey({
|
|
1611
|
+
id: quoteId,
|
|
1612
|
+
token: token,
|
|
1613
|
+
}),
|
|
1595
1614
|
});
|
|
1596
1615
|
queryClient.invalidateQueries({
|
|
1597
|
-
queryKey: common.QueryKeyFactory.default.createQuoteKey({
|
|
1616
|
+
queryKey: common.QueryKeyFactory.default.createQuoteKey({
|
|
1617
|
+
id: quoteId,
|
|
1618
|
+
token: token,
|
|
1619
|
+
}),
|
|
1598
1620
|
});
|
|
1599
1621
|
}
|
|
1600
1622
|
}, token);
|
|
@@ -1684,11 +1706,11 @@ var PandadocPollingModal = function (_a) {
|
|
|
1684
1706
|
return (jsxRuntime.jsxs(antd.Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxRuntime.jsxs("div", __assign({ className: "py-4 text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsxRuntime.jsx("div", __assign({ className: "text-center" }, { children: infoMessage }))] })));
|
|
1685
1707
|
};
|
|
1686
1708
|
|
|
1687
|
-
var ModalOverrideBrandStylings = defaultStyled(antd.Modal)(templateObject_1$
|
|
1709
|
+
var ModalOverrideBrandStylings = defaultStyled(antd.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 .ant-modal-title {\n font-family: ", ";\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 .ant-modal-title {\n font-family: ", ";\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"])), common.MARK_PRO);
|
|
1688
1710
|
var StyledModal$1 = function (props) {
|
|
1689
1711
|
return jsxRuntime.jsx(ModalOverrideBrandStylings, __assign({ closable: false }, props));
|
|
1690
1712
|
};
|
|
1691
|
-
var templateObject_1$
|
|
1713
|
+
var templateObject_1$8;
|
|
1692
1714
|
|
|
1693
1715
|
var useFocusFirstInput = function (_a) {
|
|
1694
1716
|
var firstInputRef = _a.firstInputRef, isVisible = _a.isVisible;
|
|
@@ -1723,8 +1745,8 @@ var AcceptQuoteModal = function (_a) {
|
|
|
1723
1745
|
}, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: true, ref: firstInputRef }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsxRuntime.jsx(antd.Input, {}) })), taxNumberRequired && (jsxRuntime.jsx(antd.Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsxRuntime.jsx(antd.Input, {}) })))] })) })));
|
|
1724
1746
|
};
|
|
1725
1747
|
|
|
1726
|
-
var Text$
|
|
1727
|
-
defaultStyled.div(templateObject_1$
|
|
1748
|
+
var Text$m = antd.Typography.Text;
|
|
1749
|
+
defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
|
|
1728
1750
|
function Quote(_a) {
|
|
1729
1751
|
var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _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;
|
|
1730
1752
|
return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
|
|
@@ -1795,11 +1817,15 @@ function ActualQuote(_a) {
|
|
|
1795
1817
|
var isAccepted = formattedQuote.state === "ACCEPTED";
|
|
1796
1818
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
|
|
1797
1819
|
color: entityBranding.secondaryColor,
|
|
1798
|
-
} }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$
|
|
1820
|
+
} }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$m, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile
|
|
1821
|
+
? "flex w-full justify-end gap-2"
|
|
1822
|
+
: "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
|
|
1823
|
+
return downloadFile(apiHost + "/api/pdf/quote", token);
|
|
1824
|
+
} }, { children: "Download" }))) : null, !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] })))] })), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
|
|
1799
1825
|
return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
|
|
1800
1826
|
}) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
|
|
1801
1827
|
}
|
|
1802
|
-
var templateObject_1$
|
|
1828
|
+
var templateObject_1$7;
|
|
1803
1829
|
|
|
1804
1830
|
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 }"); };
|
|
1805
1831
|
var getQuotes = function (_a) {
|
|
@@ -19097,13 +19123,12 @@ var getColor = function (state) {
|
|
|
19097
19123
|
}
|
|
19098
19124
|
};
|
|
19099
19125
|
|
|
19100
|
-
var Text$
|
|
19126
|
+
var Text$l = antd.Typography.Text;
|
|
19101
19127
|
var TransactionDate = function (_a) {
|
|
19102
19128
|
var date = _a.date;
|
|
19103
|
-
return jsxRuntime.jsx(Text$
|
|
19129
|
+
return jsxRuntime.jsx(Text$l, __assign({ className: "text-sm" }, { children: common.formatDate(date) }));
|
|
19104
19130
|
};
|
|
19105
19131
|
|
|
19106
|
-
// TODO: delete
|
|
19107
19132
|
var ArrowDownToLine = function (_a) {
|
|
19108
19133
|
var className = _a.className, _b = _a.color, color = _b === void 0 ? common.SLATE_600 : _b;
|
|
19109
19134
|
return (jsxRuntime.jsxs("svg", __assign({ className: className, fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M8 11.3333V2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M4 7.33301L8 11.333L12 7.33301", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M12.6654 14H3.33203", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
|
|
@@ -19131,17 +19156,17 @@ var TransactionGridCell = defaultStyled.div.withConfig({
|
|
|
19131
19156
|
shouldForwardProp: function (prop) {
|
|
19132
19157
|
return !["gridColumn", "padding", "right"].includes(prop);
|
|
19133
19158
|
},
|
|
19134
|
-
})(templateObject_1$
|
|
19159
|
+
})(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) {
|
|
19135
19160
|
return props.right ? "flex-end" : "flex-start";
|
|
19136
19161
|
}, function (props) {
|
|
19137
19162
|
return props.right ? "right" : "left";
|
|
19138
19163
|
}, common.SLATE_600);
|
|
19139
|
-
var templateObject_1$
|
|
19164
|
+
var templateObject_1$6;
|
|
19140
19165
|
|
|
19141
|
-
var Text$
|
|
19166
|
+
var Text$k = antd.Typography.Text;
|
|
19142
19167
|
var TransactionsEmptyState = function () {
|
|
19143
19168
|
var noTransactionsMessage = react.useContext(TransactionsListContext).noTransactionsMessage;
|
|
19144
|
-
return (jsxRuntime.jsx(Text$
|
|
19169
|
+
return (jsxRuntime.jsx(Text$k, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
|
|
19145
19170
|
};
|
|
19146
19171
|
|
|
19147
19172
|
var isInvoice = function (transaction) {
|
|
@@ -19174,7 +19199,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
|
|
|
19174
19199
|
}
|
|
19175
19200
|
}
|
|
19176
19201
|
|
|
19177
|
-
var Text$
|
|
19202
|
+
var Text$j = antd.Typography.Text;
|
|
19178
19203
|
var TransactionsListDesktop = function (_a) {
|
|
19179
19204
|
var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
|
|
19180
19205
|
var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
|
|
@@ -19203,11 +19228,11 @@ var TransactionsListDesktop = function (_a) {
|
|
|
19203
19228
|
!showState &&
|
|
19204
19229
|
!showAmount &&
|
|
19205
19230
|
!showDownload &&
|
|
19206
|
-
!showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$
|
|
19231
|
+
!showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$j, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
|
|
19207
19232
|
}) }));
|
|
19208
19233
|
};
|
|
19209
19234
|
|
|
19210
|
-
var Text$
|
|
19235
|
+
var Text$i = antd.Typography.Text;
|
|
19211
19236
|
var TransactionsListMobile = function (_a) {
|
|
19212
19237
|
var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
|
|
19213
19238
|
var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
|
|
@@ -19230,12 +19255,12 @@ var TransactionsListMobile = function (_a) {
|
|
|
19230
19255
|
backgroundColor: index % 2 === 0
|
|
19231
19256
|
? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
|
|
19232
19257
|
: "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
|
|
19233
|
-
} }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$
|
|
19258
|
+
} }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$i, { children: common.formatCurrency(transaction.transactionable.amount ||
|
|
19234
19259
|
transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
|
|
19235
19260
|
}) }));
|
|
19236
19261
|
};
|
|
19237
19262
|
|
|
19238
|
-
var Text$
|
|
19263
|
+
var Text$h = antd.Typography.Text;
|
|
19239
19264
|
var DISPLAY_WIDTH = 1200;
|
|
19240
19265
|
function Transactions(_a) {
|
|
19241
19266
|
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 ? [
|
|
@@ -19349,7 +19374,7 @@ function TransactionsDisplay(_a) {
|
|
|
19349
19374
|
onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
|
|
19350
19375
|
setDrawerOpen(false);
|
|
19351
19376
|
}
|
|
19352
|
-
return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full shadow-padding-xb gap-2 ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-1" : "flex-row items-center", " justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$
|
|
19377
|
+
return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full shadow-padding-xb gap-2 ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-1" : "flex-row items-center", " justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$h, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
|
|
19353
19378
|
), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "") }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
|
|
19354
19379
|
? searchBarClassName
|
|
19355
19380
|
: "border border-slate-200", onChange: function (e) {
|
|
@@ -19495,10 +19520,10 @@ var getBillingDetails = function (_a) {
|
|
|
19495
19520
|
});
|
|
19496
19521
|
};
|
|
19497
19522
|
|
|
19498
|
-
var Text$
|
|
19523
|
+
var Text$g = antd.Typography.Text;
|
|
19499
19524
|
var DrawerHeader = function (_a) {
|
|
19500
19525
|
var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
|
|
19501
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx(Text$
|
|
19526
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx(Text$g, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
|
|
19502
19527
|
};
|
|
19503
19528
|
|
|
19504
19529
|
var PaymentMethod = function (_a) {
|
|
@@ -19564,515 +19589,1100 @@ var PaymentMethodDisplay = function (_a) {
|
|
|
19564
19589
|
}, title: jsxRuntime.jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method", closeButtonClassName: "ant-drawer-close" }) }, { children: children })));
|
|
19565
19590
|
};
|
|
19566
19591
|
|
|
19567
|
-
var
|
|
19568
|
-
|
|
19569
|
-
|
|
19570
|
-
|
|
19571
|
-
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 id\n priceListId\n charges {\n amount\n amountsByPeriod { amount startDate }\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 invoiceLineText\n name\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 }\n }\n}";
|
|
19572
|
-
|
|
19573
|
-
var QUOTE_RECALCULATE_TAXES = "\n mutation QuoteRecalculateTaxes($id: ID!) {\n quoteRecalculateTaxes(id: $id) {\n ".concat(QUOTE_FIELDS, "\n errors\n }\n }\n");
|
|
19574
|
-
var quoteRecalculateTaxes = function (_a) {
|
|
19575
|
-
var quoteId = _a.quoteId, token = _a.token, apiHost = _a.apiHost;
|
|
19592
|
+
var MUTATION$6 = function () { return "\nmutation AccountSignup (\n $entityId: ID!,\n $pluginId: String!,\n $paymentMethodId: String,\n $priceListCode: String!,\n $accountId: ID!,\n $quoteId: ID!\n) {\n accountSignup(\n entityId: $entityId,\n pluginId: $pluginId,\n paymentMethodId: $paymentMethodId,\n priceListCode: $priceListCode,\n accountId: $accountId,\n quoteId: $quoteId\n ) {\n errors\n quote {\n acceptedByName\n acceptedByTitle\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}"; };
|
|
19593
|
+
var accountSignup = function (_a) {
|
|
19594
|
+
var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
|
|
19576
19595
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
19577
19596
|
var vars, response, errors;
|
|
19578
|
-
var _b
|
|
19579
|
-
return __generator(this, function (
|
|
19580
|
-
switch (
|
|
19597
|
+
var _b;
|
|
19598
|
+
return __generator(this, function (_c) {
|
|
19599
|
+
switch (_c.label) {
|
|
19581
19600
|
case 0:
|
|
19582
|
-
vars = {
|
|
19601
|
+
vars = {
|
|
19602
|
+
entityId: entityId,
|
|
19603
|
+
accountId: accountId,
|
|
19604
|
+
quoteId: quoteId,
|
|
19605
|
+
paymentToken: paymentToken,
|
|
19606
|
+
pluginId: pluginId,
|
|
19607
|
+
paymentMethodId: paymentMethodId,
|
|
19608
|
+
priceListCode: priceListCode,
|
|
19609
|
+
};
|
|
19583
19610
|
return [4 /*yield*/, common.gqlRequest({
|
|
19584
|
-
query:
|
|
19611
|
+
query: MUTATION$6(),
|
|
19585
19612
|
token: token,
|
|
19586
19613
|
vars: vars,
|
|
19587
19614
|
apiHost: apiHost,
|
|
19588
19615
|
})];
|
|
19589
19616
|
case 1:
|
|
19590
|
-
response =
|
|
19591
|
-
errors = (_b = response === null || response === void 0 ? void 0 : response.
|
|
19617
|
+
response = _c.sent();
|
|
19618
|
+
errors = (_b = response === null || response === void 0 ? void 0 : response.accountSignup) === null || _b === void 0 ? void 0 : _b.errors;
|
|
19592
19619
|
if (errors)
|
|
19593
19620
|
throw errors;
|
|
19594
|
-
return [2 /*return*/,
|
|
19595
|
-
}
|
|
19596
|
-
});
|
|
19597
|
-
});
|
|
19598
|
-
};
|
|
19599
|
-
|
|
19600
|
-
var MUTATION$5 = "{\n currentUser {\n taxationRequiredAccountFields\n }\n}";
|
|
19601
|
-
var getTaxationRequiredAccountFields = function (_a) {
|
|
19602
|
-
var token = _a.token, apiHost = _a.apiHost;
|
|
19603
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
|
19604
|
-
var response;
|
|
19605
|
-
var _b, _c;
|
|
19606
|
-
return __generator(this, function (_d) {
|
|
19607
|
-
switch (_d.label) {
|
|
19608
|
-
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
19609
|
-
query: MUTATION$5,
|
|
19610
|
-
token: token,
|
|
19611
|
-
apiHost: apiHost,
|
|
19612
|
-
})];
|
|
19613
|
-
case 1:
|
|
19614
|
-
response = _d.sent();
|
|
19615
|
-
return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
|
|
19616
|
-
? response.currentUser
|
|
19617
|
-
.taxationRequiredAccountFields
|
|
19618
|
-
: null];
|
|
19621
|
+
return [2 /*return*/, response === null || response === void 0 ? void 0 : response.accountSignup];
|
|
19619
19622
|
}
|
|
19620
19623
|
});
|
|
19621
19624
|
});
|
|
19622
19625
|
};
|
|
19623
19626
|
|
|
19624
|
-
var
|
|
19625
|
-
|
|
19626
|
-
var
|
|
19627
|
-
entityId: entityId,
|
|
19628
|
-
apiHost: apiHost,
|
|
19629
|
-
token: token,
|
|
19630
|
-
}).data;
|
|
19631
|
-
return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
|
|
19632
|
-
};
|
|
19633
|
-
|
|
19634
|
-
var MUTATION$4 = "\nmutation accountUpdate(\n $id: ID!,\n $attributes: AccountAttributes!) {\n accountUpdate(\n id: $id,\n attributes: $attributes\n ) {\n account {\n id\n billingCountry\n billingState\n billingStreet\n billingCity\n billingZip\n name\n }\n errors\n }\n }\n";
|
|
19635
|
-
var accountUpdate = function (_a) {
|
|
19636
|
-
var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
|
|
19627
|
+
var MUTATION$5 = function () { return "\nmutation QuoteAccountSignup (\n $accountName: String!,\n $billingContact: ContactAttributes!,\n $entityId: ID!,\n $priceListCode: String!\n) {\n quoteAccountSignup(\n entityId: $entityId,\n priceListCode: $priceListCode,\n accountName: $accountName,\n billingContact: $billingContact\n ) {\n account {\n id\n }\n quote {\n acceptedByName\n acceptedByTitle\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}"; };
|
|
19628
|
+
var quoteAccountSignup = function (_a) {
|
|
19629
|
+
var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
|
|
19637
19630
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
19638
19631
|
var vars, response, errors;
|
|
19639
19632
|
var _b;
|
|
19640
19633
|
return __generator(this, function (_c) {
|
|
19641
19634
|
switch (_c.label) {
|
|
19642
19635
|
case 0:
|
|
19643
|
-
vars = {
|
|
19636
|
+
vars = {
|
|
19637
|
+
entityId: entityId,
|
|
19638
|
+
priceListCode: priceListCode,
|
|
19639
|
+
accountName: accountName,
|
|
19640
|
+
billingContact: billingContact,
|
|
19641
|
+
};
|
|
19644
19642
|
return [4 /*yield*/, common.gqlRequest({
|
|
19645
|
-
query: MUTATION$
|
|
19643
|
+
query: MUTATION$5(),
|
|
19646
19644
|
token: token,
|
|
19647
19645
|
vars: vars,
|
|
19648
19646
|
apiHost: apiHost,
|
|
19649
19647
|
})];
|
|
19650
19648
|
case 1:
|
|
19651
19649
|
response = _c.sent();
|
|
19652
|
-
errors = (_b = response === null || response === void 0 ? void 0 : response.
|
|
19650
|
+
errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAccountSignup) === null || _b === void 0 ? void 0 : _b.errors;
|
|
19653
19651
|
if (errors)
|
|
19654
19652
|
throw errors;
|
|
19655
|
-
return [2 /*return*/, response.
|
|
19653
|
+
return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quoteAccountSignup];
|
|
19656
19654
|
}
|
|
19657
19655
|
});
|
|
19658
19656
|
});
|
|
19659
19657
|
};
|
|
19660
19658
|
|
|
19661
|
-
var
|
|
19662
|
-
var
|
|
19663
|
-
var
|
|
19664
|
-
|
|
19665
|
-
|
|
19659
|
+
var MUTATION$4 = 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 sku\n trialAllowed\n trialLengthDays\n updatedAt\n }\n}"; };
|
|
19660
|
+
var getPriceList = function (_a) {
|
|
19661
|
+
var token = _a.token, code = _a.code, apiHost = _a.apiHost;
|
|
19662
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
19663
|
+
var response;
|
|
19664
|
+
return __generator(this, function (_b) {
|
|
19665
|
+
switch (_b.label) {
|
|
19666
|
+
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
19667
|
+
query: MUTATION$4(),
|
|
19668
|
+
token: token,
|
|
19669
|
+
vars: { code: code },
|
|
19670
|
+
apiHost: apiHost,
|
|
19671
|
+
})];
|
|
19672
|
+
case 1:
|
|
19673
|
+
response = _b.sent();
|
|
19674
|
+
return [2 /*return*/, response === null || response === void 0 ? void 0 : response.priceList];
|
|
19675
|
+
}
|
|
19676
|
+
});
|
|
19677
|
+
});
|
|
19678
|
+
};
|
|
19679
|
+
|
|
19680
|
+
function PaymentForms(_a) {
|
|
19681
|
+
var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, entityId = _a.entityId, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction;
|
|
19666
19682
|
var apiHost = react.useContext(BunnyContext).apiHost;
|
|
19667
|
-
|
|
19683
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, graphQLClient: createGraphQLClient(apiHost, overrideToken), customCheckoutFunction: customCheckoutFunction })) : null })) : (jsxRuntime.jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
|
|
19684
|
+
}
|
|
19685
|
+
function InitialSignupForm(_a) {
|
|
19686
|
+
var onSubmit = _a.onSubmit, submitting = _a.submitting;
|
|
19668
19687
|
var form = antd.Form.useForm()[0];
|
|
19669
|
-
|
|
19670
|
-
|
|
19671
|
-
|
|
19672
|
-
|
|
19688
|
+
function handleSubmit() {
|
|
19689
|
+
form.validateFields({ validateOnly: false }).then(function () {
|
|
19690
|
+
onSubmit(form.getFieldsValue());
|
|
19691
|
+
});
|
|
19692
|
+
}
|
|
19693
|
+
return (jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col justify-between h-full w-full", form: form, layout: "vertical", autoComplete: "off" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: "Please input your first name!" }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: "Please input your last name!" }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "email", rules: [
|
|
19694
|
+
{ required: true, message: "Please input your email!" },
|
|
19695
|
+
{ type: "email", message: "Please enter a valid email!" },
|
|
19696
|
+
] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [
|
|
19697
|
+
{ required: true, message: "Please input your company name!" },
|
|
19698
|
+
] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
|
|
19699
|
+
}
|
|
19700
|
+
|
|
19701
|
+
var Title = antd.Typography.Title, Text$f = antd.Typography.Text;
|
|
19702
|
+
function PaymentSuccessDisplay(_a) {
|
|
19703
|
+
var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
|
|
19704
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$f, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
|
|
19705
|
+
}
|
|
19706
|
+
|
|
19707
|
+
var Text$e = antd.Typography.Text;
|
|
19708
|
+
function PriceListDisplay(_a) {
|
|
19709
|
+
var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
|
|
19710
|
+
if (!priceListData)
|
|
19711
|
+
return null;
|
|
19712
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsx(Text$e, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$e, __assign({ className: "font-bold text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$e, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
|
|
19713
|
+
}
|
|
19714
|
+
|
|
19715
|
+
var showErrorNotification = common.useErrorNotification();
|
|
19716
|
+
function Signup(_a) {
|
|
19717
|
+
var companyName = _a.companyName, entityId = _a.entityId, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, style = _a.style;
|
|
19718
|
+
// Hooks
|
|
19719
|
+
var _d = react.useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
|
|
19720
|
+
var tokenFromContexts = useToken();
|
|
19721
|
+
var isMobile = common.useIsMobile();
|
|
19722
|
+
var topNavImageUrl = react.useContext(BrandContext).topNavImageUrl;
|
|
19723
|
+
var _e = react.useState(undefined), quote = _e[0], setQuote = _e[1];
|
|
19724
|
+
var _f = react.useState(undefined), accountId = _f[0], setAccountId = _f[1];
|
|
19725
|
+
var _g = react.useState(undefined), portalSessionToken = _g[0], setPortalSessionToken = _g[1];
|
|
19726
|
+
var token = portalSessionToken || tokenFromContexts;
|
|
19727
|
+
var _h = react.useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
|
|
19728
|
+
var _j = react.useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
|
|
19729
|
+
var _k = react.useState(undefined), paymentMethodGraphQLClient = _k[0], setPaymentMethodGraphQLClient = _k[1];
|
|
19730
|
+
var paymentMethod = usePaymentMethod({
|
|
19731
|
+
accountId: accountId,
|
|
19732
|
+
entityId: entityId,
|
|
19733
|
+
graphQLClient: paymentMethodGraphQLClient || graphQLClient,
|
|
19734
|
+
token: token,
|
|
19735
|
+
}).data;
|
|
19736
|
+
var queryClient = reactQuery.useQueryClient();
|
|
19737
|
+
// Queries
|
|
19738
|
+
var priceListData = reactQuery.useQuery({
|
|
19739
|
+
queryKey: ["priceList", priceListCode],
|
|
19740
|
+
queryFn: function () { return getPriceList({ token: token, apiHost: apiHost, code: priceListCode }); },
|
|
19741
|
+
}).data;
|
|
19742
|
+
function handleSubmit(formData) {
|
|
19743
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
19744
|
+
var data, error_1;
|
|
19673
19745
|
return __generator(this, function (_a) {
|
|
19674
19746
|
switch (_a.label) {
|
|
19675
|
-
case 0:
|
|
19676
|
-
|
|
19677
|
-
|
|
19678
|
-
|
|
19679
|
-
|
|
19680
|
-
|
|
19747
|
+
case 0:
|
|
19748
|
+
_a.trys.push([0, 2, , 3]);
|
|
19749
|
+
setProceedingToPayment(true);
|
|
19750
|
+
return [4 /*yield*/, quoteAccountSignup({
|
|
19751
|
+
token: token,
|
|
19752
|
+
apiHost: apiHost,
|
|
19753
|
+
entityId: entityId,
|
|
19754
|
+
priceListCode: priceListCode,
|
|
19755
|
+
accountName: formData.accountName,
|
|
19756
|
+
billingContact: {
|
|
19757
|
+
firstName: formData.firstName,
|
|
19758
|
+
lastName: formData.lastName,
|
|
19759
|
+
email: formData.email,
|
|
19760
|
+
},
|
|
19761
|
+
})];
|
|
19681
19762
|
case 1:
|
|
19682
|
-
|
|
19683
|
-
|
|
19763
|
+
data = _a.sent();
|
|
19764
|
+
setAccountId(data.account.id);
|
|
19765
|
+
setPortalSessionToken(data.portalSessionToken);
|
|
19766
|
+
setPaymentMethodGraphQLClient(createGraphQLClient(apiHost, data.portalSessionToken));
|
|
19767
|
+
// We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
|
|
19768
|
+
// to instead use paymentMethods from portalSessionToken.
|
|
19769
|
+
queryClient.invalidateQueries({
|
|
19770
|
+
queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
|
|
19771
|
+
entityId: entityId,
|
|
19772
|
+
token: token,
|
|
19773
|
+
}),
|
|
19774
|
+
});
|
|
19775
|
+
setProceedingToPayment(false);
|
|
19776
|
+
setQuote(data.quote);
|
|
19777
|
+
return [3 /*break*/, 3];
|
|
19778
|
+
case 2:
|
|
19779
|
+
error_1 = _a.sent();
|
|
19780
|
+
setProceedingToPayment(false);
|
|
19781
|
+
showErrorNotification(error_1.response.message);
|
|
19782
|
+
return [3 /*break*/, 3];
|
|
19783
|
+
case 3: return [2 /*return*/];
|
|
19684
19784
|
}
|
|
19685
19785
|
});
|
|
19686
|
-
});
|
|
19687
|
-
|
|
19688
|
-
|
|
19689
|
-
|
|
19786
|
+
});
|
|
19787
|
+
}
|
|
19788
|
+
function handlePaymentSuccess() {
|
|
19789
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
19790
|
+
return __generator(this, function (_a) {
|
|
19791
|
+
setPurchaseSucceeded(true);
|
|
19792
|
+
return [2 /*return*/];
|
|
19690
19793
|
});
|
|
19691
|
-
}
|
|
19692
|
-
}
|
|
19693
|
-
|
|
19694
|
-
|
|
19695
|
-
return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
|
|
19696
|
-
((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
|
|
19697
|
-
} }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Zip" }) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
|
|
19698
|
-
};
|
|
19699
|
-
var FormBillingState = function (_a) {
|
|
19700
|
-
_a.form;
|
|
19701
|
-
var billingCountry = antd.Form.useWatch("billingCountry");
|
|
19702
|
-
var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
|
|
19703
|
-
return (jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "State" }) })));
|
|
19704
|
-
};
|
|
19705
|
-
|
|
19706
|
-
var QuoteCheckout = function (_a) {
|
|
19707
|
-
var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, entityId = _a.entityId;
|
|
19708
|
-
var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
|
|
19709
|
-
var token = useToken();
|
|
19710
|
-
var isMobile = common.useIsMobile();
|
|
19711
|
-
var _c = react.useState(false), isSaving = _c[0], setIsSaving = _c[1];
|
|
19712
|
-
var paymentRequired = getQuoteAmountDue(quote) > 0;
|
|
19713
|
-
var checkoutMutation = reactQuery.useMutation({
|
|
19714
|
-
mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
19794
|
+
});
|
|
19795
|
+
}
|
|
19796
|
+
function accountSignupFunction(plugin) {
|
|
19797
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
19715
19798
|
return __generator(this, function (_a) {
|
|
19716
19799
|
switch (_a.label) {
|
|
19717
19800
|
case 0:
|
|
19718
|
-
if (!
|
|
19719
|
-
throw new Error("
|
|
19720
|
-
|
|
19721
|
-
|
|
19722
|
-
|
|
19801
|
+
if (!portalSessionToken) {
|
|
19802
|
+
throw new Error("Portal session token is required");
|
|
19803
|
+
}
|
|
19804
|
+
if (!accountId) {
|
|
19805
|
+
throw new Error("Account ID is required");
|
|
19806
|
+
}
|
|
19807
|
+
if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
|
|
19808
|
+
throw new Error("Plugin ID is required");
|
|
19809
|
+
}
|
|
19810
|
+
if (!(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id)) {
|
|
19811
|
+
throw new Error("Payment method ID is required");
|
|
19812
|
+
}
|
|
19813
|
+
return [4 /*yield*/, accountSignup({
|
|
19814
|
+
token: portalSessionToken,
|
|
19815
|
+
apiHost: apiHost,
|
|
19816
|
+
entityId: entityId,
|
|
19817
|
+
quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
|
|
19818
|
+
paymentMethodId: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
|
|
19819
|
+
pluginId: plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(),
|
|
19820
|
+
priceListCode: priceListCode,
|
|
19821
|
+
accountId: accountId,
|
|
19822
|
+
})];
|
|
19723
19823
|
case 1: return [2 /*return*/, _a.sent()];
|
|
19724
19824
|
}
|
|
19725
19825
|
});
|
|
19726
|
-
}); },
|
|
19727
|
-
onSuccess: onSuccess,
|
|
19728
|
-
onError: onFail,
|
|
19729
|
-
});
|
|
19730
|
-
function handleCheckoutNoPayment() {
|
|
19731
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
19732
|
-
return __generator(this, function (_a) {
|
|
19733
|
-
setIsSaving(true);
|
|
19734
|
-
checkoutMutation.mutate();
|
|
19735
|
-
setIsSaving(false);
|
|
19736
|
-
return [2 /*return*/];
|
|
19737
|
-
});
|
|
19738
19826
|
});
|
|
19739
19827
|
}
|
|
19740
|
-
|
|
19741
|
-
|
|
19742
|
-
|
|
19828
|
+
function handlePaymentFail(error) {
|
|
19829
|
+
showErrorNotification(error.response.message);
|
|
19830
|
+
}
|
|
19831
|
+
var WrapperComponent = function (_a) {
|
|
19832
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
19833
|
+
return isCardEnabled ? (jsxRuntime.jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsxRuntime.jsx("div", __assign({ className: className, style: style }, { children: children })));
|
|
19834
|
+
};
|
|
19835
|
+
return (jsxRuntime.jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "flex ".concat(isMobile
|
|
19836
|
+
? "items-center justify-center my-12"
|
|
19837
|
+
: "w-1/2 items-center justify-center my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
|
|
19838
|
+
}
|
|
19839
|
+
|
|
19840
|
+
var createRequestHeaders = function (token) {
|
|
19841
|
+
var bearerToken = "Bearer ".concat(token);
|
|
19842
|
+
var headers = {
|
|
19843
|
+
"Content-type": "application/json; charset=utf-8",
|
|
19844
|
+
};
|
|
19845
|
+
headers["Authorization"] = bearerToken;
|
|
19846
|
+
return headers;
|
|
19743
19847
|
};
|
|
19744
|
-
var
|
|
19745
|
-
|
|
19746
|
-
var isMobile = common.useIsMobile();
|
|
19747
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-6 shrink-0 ".concat(isMobile ? "w-full shadow-padding-xb" : "", " ").concat(className), style: __assign({}, (isMobile
|
|
19748
|
-
? setMaxHeight
|
|
19749
|
-
? { maxHeight: "60vh" }
|
|
19750
|
-
: {}
|
|
19751
|
-
: {
|
|
19752
|
-
width: "350px",
|
|
19753
|
-
})) }, { children: children })));
|
|
19848
|
+
var getGraphQLBaseURL = function (apiHost) {
|
|
19849
|
+
return "".concat(apiHost, "/graphql");
|
|
19754
19850
|
};
|
|
19755
|
-
|
|
19756
|
-
|
|
19757
|
-
var
|
|
19758
|
-
|
|
19759
|
-
|
|
19760
|
-
|
|
19761
|
-
|
|
19762
|
-
|
|
19763
|
-
|
|
19764
|
-
|
|
19765
|
-
|
|
19766
|
-
|
|
19767
|
-
|
|
19768
|
-
|
|
19769
|
-
|
|
19770
|
-
|
|
19771
|
-
queryFn: function () { return getTaxationRequiredAccountFields({ token: token, apiHost: apiHost }); },
|
|
19772
|
-
enabled: Boolean(quote),
|
|
19773
|
-
staleTime: 0,
|
|
19774
|
-
}), taxationRequiredAccountFields = _f.data, isLoadingTaxationRequiredAccountFields = _f.isLoading;
|
|
19775
|
-
var _g = reactQuery.useQuery({
|
|
19776
|
-
queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
|
|
19777
|
-
queryFn: function () { return (quote === null || quote === void 0 ? void 0 : quote.accountId) && common.getAccount({ id: quote.accountId, token: token, apiHost: apiHost }); },
|
|
19778
|
-
enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
|
|
19779
|
-
}), account = _g.data, isLoadingAccount = _g.isLoading;
|
|
19780
|
-
reactQuery.useQuery({
|
|
19781
|
-
queryKey: queryKeyFactory.createQuoteTaxCalculateKey({ id: quote === null || quote === void 0 ? void 0 : quote.id, token: token }),
|
|
19782
|
-
queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
19783
|
-
var updatedQuote, quoteKey, calculatedPricesKey;
|
|
19784
|
-
return __generator(this, function (_a) {
|
|
19785
|
-
switch (_a.label) {
|
|
19786
|
-
case 0:
|
|
19787
|
-
if (!quote) return [3 /*break*/, 2];
|
|
19788
|
-
return [4 /*yield*/, quoteRecalculateTaxes({
|
|
19789
|
-
quoteId: quote.id,
|
|
19790
|
-
token: token,
|
|
19791
|
-
apiHost: apiHost,
|
|
19792
|
-
})];
|
|
19793
|
-
case 1:
|
|
19794
|
-
updatedQuote = _a.sent();
|
|
19795
|
-
if (updatedQuote) {
|
|
19796
|
-
quoteKey = queryKeyFactory.createObjectKey({ objectName: "editingQuote", id: updatedQuote.id, token: token });
|
|
19797
|
-
calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
|
|
19798
|
-
quantity: quantity,
|
|
19799
|
-
priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
|
|
19800
|
-
token: token,
|
|
19801
|
-
});
|
|
19802
|
-
queryClient.setQueryData(quoteKey, updatedQuote);
|
|
19803
|
-
queryClient.setQueryData(calculatedPricesKey, updatedQuote);
|
|
19804
|
-
}
|
|
19805
|
-
_a.label = 2;
|
|
19806
|
-
case 2: return [2 /*return*/, {}];
|
|
19807
|
-
}
|
|
19808
|
-
});
|
|
19809
|
-
}); },
|
|
19810
|
-
// Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
|
|
19811
|
-
enabled: Boolean(quote) &&
|
|
19812
|
-
open &&
|
|
19813
|
-
hasTaxPlugin &&
|
|
19814
|
-
!taxationRequiredAccountFields &&
|
|
19815
|
-
!isLoadingTaxationRequiredAccountFields,
|
|
19816
|
-
staleTime: 0,
|
|
19817
|
-
});
|
|
19818
|
-
if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
|
|
19819
|
-
return null;
|
|
19820
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 bg-slate-50 overflow-auto", style: {
|
|
19821
|
-
zIndex: 1001,
|
|
19822
|
-
} }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "text-base shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "flex-col" : "shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "" })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsxRuntime.jsx(antd.Divider, { className: "h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "w-full pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice, graphQLClient: graphQLClient }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, entityId: entityId, onFail: function (error) {
|
|
19823
|
-
onFail(error);
|
|
19824
|
-
}, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
|
|
19825
|
-
onFail(error);
|
|
19826
|
-
}, onPaymentSuccess: onSuccess, graphQLClient: graphQLClient }))] }))] })) })));
|
|
19851
|
+
var useGraphQLRequest = function () {
|
|
19852
|
+
return function (query, token, apiHost, variables) { return __awaiter(void 0, void 0, void 0, function () {
|
|
19853
|
+
var error_1;
|
|
19854
|
+
return __generator(this, function (_a) {
|
|
19855
|
+
switch (_a.label) {
|
|
19856
|
+
case 0:
|
|
19857
|
+
_a.trys.push([0, 2, , 3]);
|
|
19858
|
+
return [4 /*yield*/, request__default["default"](getGraphQLBaseURL(apiHost), query, variables, createRequestHeaders(token))];
|
|
19859
|
+
case 1: return [2 /*return*/, _a.sent()];
|
|
19860
|
+
case 2:
|
|
19861
|
+
error_1 = _a.sent();
|
|
19862
|
+
throw error_1;
|
|
19863
|
+
case 3: return [2 /*return*/];
|
|
19864
|
+
}
|
|
19865
|
+
});
|
|
19866
|
+
}); };
|
|
19827
19867
|
};
|
|
19828
19868
|
|
|
19829
|
-
var
|
|
19830
|
-
var
|
|
19831
|
-
|
|
19832
|
-
|
|
19833
|
-
|
|
19834
|
-
|
|
19835
|
-
|
|
19836
|
-
|
|
19837
|
-
|
|
19838
|
-
vars = {
|
|
19839
|
-
entityId: entityId,
|
|
19840
|
-
accountId: accountId,
|
|
19841
|
-
quoteId: quoteId,
|
|
19842
|
-
paymentToken: paymentToken,
|
|
19843
|
-
pluginId: pluginId,
|
|
19844
|
-
paymentMethodId: paymentMethodId,
|
|
19845
|
-
priceListCode: priceListCode,
|
|
19846
|
-
};
|
|
19847
|
-
return [4 /*yield*/, common.gqlRequest({
|
|
19848
|
-
query: MUTATION$3(),
|
|
19849
|
-
token: token,
|
|
19850
|
-
vars: vars,
|
|
19851
|
-
apiHost: apiHost,
|
|
19852
|
-
})];
|
|
19869
|
+
var useCreateSubscriptionQuote = function () {
|
|
19870
|
+
var graphQLRequest = useGraphQLRequest();
|
|
19871
|
+
return function (subscriptionIds, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
|
|
19872
|
+
var data;
|
|
19873
|
+
return __generator(this, function (_a) {
|
|
19874
|
+
switch (_a.label) {
|
|
19875
|
+
case 0: return [4 /*yield*/, graphQLRequest("\n mutation quoteSubscriptionUpdate(\n $subscriptionIds: [ID!]!,\n ) {\n quoteSubscriptionUpdate(\n subscriptionIds: $subscriptionIds,\n ) {\n quote {\n id\n quoteChanges {\n id\n priceList {\n id\n }\n charges {\n id\n priceListCharge {\n id\n }\n }\n }\n }\n }\n }\n ", token, apiHost, {
|
|
19876
|
+
subscriptionIds: subscriptionIds,
|
|
19877
|
+
})];
|
|
19853
19878
|
case 1:
|
|
19854
|
-
|
|
19855
|
-
|
|
19856
|
-
if (errors)
|
|
19857
|
-
throw errors;
|
|
19858
|
-
return [2 /*return*/, response === null || response === void 0 ? void 0 : response.accountSignup];
|
|
19879
|
+
data = _a.sent();
|
|
19880
|
+
return [2 /*return*/, data];
|
|
19859
19881
|
}
|
|
19860
19882
|
});
|
|
19861
|
-
});
|
|
19883
|
+
}); };
|
|
19862
19884
|
};
|
|
19863
|
-
|
|
19864
|
-
var
|
|
19865
|
-
|
|
19866
|
-
|
|
19867
|
-
|
|
19868
|
-
|
|
19869
|
-
|
|
19870
|
-
return __generator(this, function (_c) {
|
|
19871
|
-
switch (_c.label) {
|
|
19872
|
-
case 0:
|
|
19873
|
-
vars = {
|
|
19874
|
-
entityId: entityId,
|
|
19875
|
-
priceListCode: priceListCode,
|
|
19876
|
-
accountName: accountName,
|
|
19877
|
-
billingContact: billingContact,
|
|
19878
|
-
};
|
|
19879
|
-
return [4 /*yield*/, common.gqlRequest({
|
|
19880
|
-
query: MUTATION$2(),
|
|
19881
|
-
token: token,
|
|
19882
|
-
vars: vars,
|
|
19883
|
-
apiHost: apiHost,
|
|
19884
|
-
})];
|
|
19885
|
+
var useQuoteChangeUpdate = function () {
|
|
19886
|
+
var graphQLRequest = useGraphQLRequest();
|
|
19887
|
+
return function (charges, quoteChangeId, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
|
|
19888
|
+
var response;
|
|
19889
|
+
return __generator(this, function (_a) {
|
|
19890
|
+
switch (_a.label) {
|
|
19891
|
+
case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {\n quoteChangeUpdate(id:$id, charges:$charges) {\n quoteChange { id quoteId }\n errors\n }\n }", token, apiHost, { charges: charges, id: quoteChangeId })];
|
|
19885
19892
|
case 1:
|
|
19886
|
-
response =
|
|
19887
|
-
|
|
19888
|
-
if (errors)
|
|
19889
|
-
throw errors;
|
|
19890
|
-
return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quoteAccountSignup];
|
|
19893
|
+
response = _a.sent();
|
|
19894
|
+
return [2 /*return*/, response];
|
|
19891
19895
|
}
|
|
19892
19896
|
});
|
|
19893
|
-
});
|
|
19897
|
+
}); };
|
|
19898
|
+
};
|
|
19899
|
+
var useQuoteDelete = function () {
|
|
19900
|
+
var graphQLRequest = useGraphQLRequest();
|
|
19901
|
+
return function (quoteId, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
|
|
19902
|
+
var response;
|
|
19903
|
+
return __generator(this, function (_a) {
|
|
19904
|
+
switch (_a.label) {
|
|
19905
|
+
case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteDelete($id: ID!) {\n quoteDelete(id: $id) {\n errors\n }\n }", token, apiHost, { id: quoteId })];
|
|
19906
|
+
case 1:
|
|
19907
|
+
response = _a.sent();
|
|
19908
|
+
return [2 /*return*/, response];
|
|
19909
|
+
}
|
|
19910
|
+
});
|
|
19911
|
+
}); };
|
|
19894
19912
|
};
|
|
19895
19913
|
|
|
19896
|
-
var
|
|
19897
|
-
var
|
|
19898
|
-
var
|
|
19914
|
+
var QUOTE_QUERY = function (id) { return "\n query quote {\n quote(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 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 quantity\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
|
|
19915
|
+
var getQuote = function (_a) {
|
|
19916
|
+
var id = _a.id, token = _a.token, apiHost = _a.apiHost;
|
|
19899
19917
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
19900
19918
|
var response;
|
|
19901
19919
|
return __generator(this, function (_b) {
|
|
19902
19920
|
switch (_b.label) {
|
|
19903
19921
|
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
19904
|
-
query:
|
|
19922
|
+
query: QUOTE_QUERY(id),
|
|
19905
19923
|
token: token,
|
|
19906
|
-
vars: {
|
|
19924
|
+
vars: {},
|
|
19907
19925
|
apiHost: apiHost,
|
|
19908
19926
|
})];
|
|
19909
19927
|
case 1:
|
|
19910
19928
|
response = _b.sent();
|
|
19911
|
-
return [2 /*return*/, response === null || response === void 0 ? void 0 : response.
|
|
19929
|
+
return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
|
|
19912
19930
|
}
|
|
19913
19931
|
});
|
|
19914
19932
|
});
|
|
19915
19933
|
};
|
|
19916
19934
|
|
|
19917
|
-
|
|
19918
|
-
|
|
19919
|
-
var apiHost =
|
|
19920
|
-
return (
|
|
19921
|
-
|
|
19922
|
-
|
|
19923
|
-
|
|
19924
|
-
|
|
19925
|
-
|
|
19926
|
-
|
|
19927
|
-
|
|
19935
|
+
var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
|
|
19936
|
+
var getSubscriptions = function (_a) {
|
|
19937
|
+
var apiHost = _a.apiHost, entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
|
|
19938
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
19939
|
+
var response, combinedSubscriptions;
|
|
19940
|
+
var _b, _c;
|
|
19941
|
+
return __generator(this, function (_d) {
|
|
19942
|
+
switch (_d.label) {
|
|
19943
|
+
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
19944
|
+
isInPreviewMode: isInPreviewMode,
|
|
19945
|
+
query: SUBSCRIPTIONS_QUERY,
|
|
19946
|
+
token: token,
|
|
19947
|
+
vars: { entityId: entityId },
|
|
19948
|
+
apiHost: apiHost,
|
|
19949
|
+
})];
|
|
19950
|
+
case 1:
|
|
19951
|
+
response = _d.sent();
|
|
19952
|
+
combinedSubscriptions = (_c = (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (subscription) { return (__assign(__assign({}, subscription), { charges: common.sortSubscriptionCharges(subscription.charges) })); });
|
|
19953
|
+
return [2 /*return*/, combinedSubscriptions];
|
|
19954
|
+
}
|
|
19928
19955
|
});
|
|
19929
|
-
}
|
|
19930
|
-
|
|
19931
|
-
{ required: true, message: "Please input your email!" },
|
|
19932
|
-
{ type: "email", message: "Please enter a valid email!" },
|
|
19933
|
-
] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [
|
|
19934
|
-
{ required: true, message: "Please input your company name!" },
|
|
19935
|
-
] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
|
|
19936
|
-
}
|
|
19956
|
+
});
|
|
19957
|
+
};
|
|
19937
19958
|
|
|
19938
|
-
var
|
|
19939
|
-
|
|
19940
|
-
|
|
19941
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$4, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
|
|
19942
|
-
}
|
|
19959
|
+
var pageWrapperClassName = function (isMobile) {
|
|
19960
|
+
return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
|
|
19961
|
+
};
|
|
19943
19962
|
|
|
19944
|
-
var
|
|
19945
|
-
|
|
19946
|
-
|
|
19947
|
-
|
|
19948
|
-
|
|
19949
|
-
|
|
19950
|
-
|
|
19963
|
+
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 id\n priceListId\n charges {\n amount\n amountsByPeriod { amount startDate }\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 invoiceLineText\n name\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 }\n }\n}";
|
|
19964
|
+
var MUTATION$3 = "\nmutation quoteCompose($quoteId: ID, $priceListId: ID, $subscriptionId: ID, $quantity: Int, $accountId: ID) {\n quoteCompose(quoteId: $quoteId, priceListId: $priceListId, subscriptionId: $subscriptionId, quantity: $quantity, accountId: $accountId) {\n ".concat(QUOTE_FIELDS, "\n }\n}\n");
|
|
19965
|
+
var quoteCompose = function (_a) {
|
|
19966
|
+
var quoteId = _a.quoteId, priceListId = _a.priceListId, subscriptionId = _a.subscriptionId, quantity = _a.quantity, accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost;
|
|
19967
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
19968
|
+
var vars, response, _b, errors, quote;
|
|
19969
|
+
return __generator(this, function (_c) {
|
|
19970
|
+
switch (_c.label) {
|
|
19971
|
+
case 0:
|
|
19972
|
+
vars = { quoteId: quoteId, priceListId: priceListId, subscriptionId: subscriptionId, quantity: quantity, accountId: accountId };
|
|
19973
|
+
return [4 /*yield*/, common.gqlRequest({
|
|
19974
|
+
query: MUTATION$3,
|
|
19975
|
+
token: token,
|
|
19976
|
+
vars: vars,
|
|
19977
|
+
apiHost: apiHost,
|
|
19978
|
+
})];
|
|
19979
|
+
case 1:
|
|
19980
|
+
response = _c.sent();
|
|
19981
|
+
_b = response === null || response === void 0 ? void 0 : response.quoteCompose, errors = _b.errors, quote = _b.quote;
|
|
19982
|
+
if (errors)
|
|
19983
|
+
throw errors;
|
|
19984
|
+
return [2 /*return*/, quote];
|
|
19985
|
+
}
|
|
19986
|
+
});
|
|
19987
|
+
});
|
|
19988
|
+
};
|
|
19951
19989
|
|
|
19952
|
-
var
|
|
19953
|
-
function
|
|
19954
|
-
var
|
|
19990
|
+
var QUOTE_RECALCULATE_TAXES = "\n mutation QuoteRecalculateTaxes($id: ID!) {\n quoteRecalculateTaxes(id: $id) {\n ".concat(QUOTE_FIELDS, "\n errors\n }\n }\n");
|
|
19991
|
+
var quoteRecalculateTaxes = function (_a) {
|
|
19992
|
+
var quoteId = _a.quoteId, token = _a.token, apiHost = _a.apiHost;
|
|
19993
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
19994
|
+
var vars, response, errors;
|
|
19995
|
+
var _b, _c;
|
|
19996
|
+
return __generator(this, function (_d) {
|
|
19997
|
+
switch (_d.label) {
|
|
19998
|
+
case 0:
|
|
19999
|
+
vars = { id: quoteId };
|
|
20000
|
+
return [4 /*yield*/, common.gqlRequest({
|
|
20001
|
+
query: QUOTE_RECALCULATE_TAXES,
|
|
20002
|
+
token: token,
|
|
20003
|
+
vars: vars,
|
|
20004
|
+
apiHost: apiHost,
|
|
20005
|
+
})];
|
|
20006
|
+
case 1:
|
|
20007
|
+
response = _d.sent();
|
|
20008
|
+
errors = (_b = response === null || response === void 0 ? void 0 : response.quoteRecalculateTaxes) === null || _b === void 0 ? void 0 : _b.errors;
|
|
20009
|
+
if (errors)
|
|
20010
|
+
throw errors;
|
|
20011
|
+
return [2 /*return*/, (_c = response.quoteRecalculateTaxes) === null || _c === void 0 ? void 0 : _c.quote];
|
|
20012
|
+
}
|
|
20013
|
+
});
|
|
20014
|
+
});
|
|
20015
|
+
};
|
|
20016
|
+
|
|
20017
|
+
var MUTATION$2 = "{\n currentUser {\n taxationRequiredAccountFields\n }\n}";
|
|
20018
|
+
var getTaxationRequiredAccountFields = function (_a) {
|
|
20019
|
+
var token = _a.token, apiHost = _a.apiHost;
|
|
20020
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
20021
|
+
var response;
|
|
20022
|
+
var _b, _c;
|
|
20023
|
+
return __generator(this, function (_d) {
|
|
20024
|
+
switch (_d.label) {
|
|
20025
|
+
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
20026
|
+
query: MUTATION$2,
|
|
20027
|
+
token: token,
|
|
20028
|
+
apiHost: apiHost,
|
|
20029
|
+
})];
|
|
20030
|
+
case 1:
|
|
20031
|
+
response = _d.sent();
|
|
20032
|
+
return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
|
|
20033
|
+
? response.currentUser
|
|
20034
|
+
.taxationRequiredAccountFields
|
|
20035
|
+
: null];
|
|
20036
|
+
}
|
|
20037
|
+
});
|
|
20038
|
+
});
|
|
20039
|
+
};
|
|
20040
|
+
|
|
20041
|
+
var useHasTaxPlugin = function (_a) {
|
|
20042
|
+
var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
|
|
20043
|
+
var plugins = usePlugins({
|
|
20044
|
+
entityId: entityId,
|
|
20045
|
+
apiHost: apiHost,
|
|
20046
|
+
token: token,
|
|
20047
|
+
}).data;
|
|
20048
|
+
return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
|
|
20049
|
+
};
|
|
20050
|
+
|
|
20051
|
+
var MUTATION$1 = "\nmutation accountUpdate(\n $id: ID!,\n $attributes: AccountAttributes!) {\n accountUpdate(\n id: $id,\n attributes: $attributes\n ) {\n account {\n id\n billingCountry\n billingState\n billingStreet\n billingCity\n billingZip\n name\n }\n errors\n }\n }\n";
|
|
20052
|
+
var accountUpdate = function (_a) {
|
|
20053
|
+
var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
|
|
20054
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
20055
|
+
var vars, response, errors;
|
|
20056
|
+
var _b;
|
|
20057
|
+
return __generator(this, function (_c) {
|
|
20058
|
+
switch (_c.label) {
|
|
20059
|
+
case 0:
|
|
20060
|
+
vars = { id: accountId, attributes: attributes };
|
|
20061
|
+
return [4 /*yield*/, common.gqlRequest({
|
|
20062
|
+
query: MUTATION$1,
|
|
20063
|
+
token: token,
|
|
20064
|
+
vars: vars,
|
|
20065
|
+
apiHost: apiHost,
|
|
20066
|
+
})];
|
|
20067
|
+
case 1:
|
|
20068
|
+
response = _c.sent();
|
|
20069
|
+
errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
|
|
20070
|
+
if (errors)
|
|
20071
|
+
throw errors;
|
|
20072
|
+
return [2 /*return*/, response.accountUpdate];
|
|
20073
|
+
}
|
|
20074
|
+
});
|
|
20075
|
+
});
|
|
20076
|
+
};
|
|
20077
|
+
|
|
20078
|
+
var COUNTRIES_REQUIRING_STATE = ["US", "CA"];
|
|
20079
|
+
var TaxationForm = function (_a) {
|
|
20080
|
+
var account = _a.account, quote = _a.quote;
|
|
19955
20081
|
// Hooks
|
|
19956
|
-
var
|
|
19957
|
-
var
|
|
20082
|
+
var queryClient = reactQuery.useQueryClient();
|
|
20083
|
+
var apiHost = react.useContext(BunnyContext).apiHost;
|
|
20084
|
+
var token = useToken();
|
|
20085
|
+
var form = antd.Form.useForm()[0];
|
|
20086
|
+
// Mutations
|
|
20087
|
+
var _b = reactQuery.useMutation({
|
|
20088
|
+
mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
|
|
20089
|
+
var account;
|
|
20090
|
+
return __generator(this, function (_a) {
|
|
20091
|
+
switch (_a.label) {
|
|
20092
|
+
case 0: return [4 /*yield*/, accountUpdate({
|
|
20093
|
+
accountId: quote.accountId,
|
|
20094
|
+
attributes: changedFormData,
|
|
20095
|
+
token: token,
|
|
20096
|
+
apiHost: apiHost,
|
|
20097
|
+
})];
|
|
20098
|
+
case 1:
|
|
20099
|
+
account = _a.sent();
|
|
20100
|
+
return [2 /*return*/, account];
|
|
20101
|
+
}
|
|
20102
|
+
});
|
|
20103
|
+
}); },
|
|
20104
|
+
onSuccess: function () {
|
|
20105
|
+
queryClient.invalidateQueries({
|
|
20106
|
+
queryKey: ["getTaxationRequiredAccountFields", token],
|
|
20107
|
+
});
|
|
20108
|
+
},
|
|
20109
|
+
}), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
|
|
20110
|
+
return (jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Street" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "City" }) })), jsxRuntime.jsx(FormBillingState, { form: form }), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsxRuntime.jsx(antd.Select, { options: common.Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
|
|
20111
|
+
var _a, _b;
|
|
20112
|
+
return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
|
|
20113
|
+
((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
|
|
20114
|
+
} }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Zip" }) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
|
|
20115
|
+
};
|
|
20116
|
+
var FormBillingState = function (_a) {
|
|
20117
|
+
_a.form;
|
|
20118
|
+
var billingCountry = antd.Form.useWatch("billingCountry");
|
|
20119
|
+
var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
|
|
20120
|
+
return (jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "State" }) })));
|
|
20121
|
+
};
|
|
20122
|
+
|
|
20123
|
+
var QuoteCheckout = function (_a) {
|
|
20124
|
+
var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, entityId = _a.entityId;
|
|
20125
|
+
var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
|
|
20126
|
+
var token = useToken();
|
|
19958
20127
|
var isMobile = common.useIsMobile();
|
|
19959
|
-
var
|
|
19960
|
-
var
|
|
19961
|
-
var
|
|
19962
|
-
|
|
19963
|
-
|
|
19964
|
-
|
|
19965
|
-
|
|
19966
|
-
|
|
19967
|
-
|
|
19968
|
-
|
|
20128
|
+
var _c = react.useState(false), isSaving = _c[0], setIsSaving = _c[1];
|
|
20129
|
+
var paymentRequired = getQuoteAmountDue(quote) > 0;
|
|
20130
|
+
var checkoutMutation = reactQuery.useMutation({
|
|
20131
|
+
mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
20132
|
+
return __generator(this, function (_a) {
|
|
20133
|
+
switch (_a.label) {
|
|
20134
|
+
case 0:
|
|
20135
|
+
if (!quote)
|
|
20136
|
+
throw new Error("Quote is required");
|
|
20137
|
+
if (paymentRequired)
|
|
20138
|
+
throw new Error("Payment is required");
|
|
20139
|
+
return [4 /*yield*/, checkout({ quoteId: quote.id, token: token, apiHost: apiHost })];
|
|
20140
|
+
case 1: return [2 /*return*/, _a.sent()];
|
|
20141
|
+
}
|
|
20142
|
+
});
|
|
20143
|
+
}); },
|
|
20144
|
+
onSuccess: onSuccess,
|
|
20145
|
+
onError: onFail,
|
|
20146
|
+
});
|
|
20147
|
+
function handleCheckoutNoPayment() {
|
|
20148
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
20149
|
+
return __generator(this, function (_a) {
|
|
20150
|
+
setIsSaving(true);
|
|
20151
|
+
checkoutMutation.mutate();
|
|
20152
|
+
setIsSaving(false);
|
|
20153
|
+
return [2 /*return*/];
|
|
20154
|
+
});
|
|
20155
|
+
});
|
|
20156
|
+
}
|
|
20157
|
+
if (taxationRequiredAccountFields)
|
|
20158
|
+
return (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
|
|
20159
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: onFail, onPaymentSuccess: onSuccess, quote: quote, graphQLClient: graphQLClient })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "shadow-padding-x" : "") }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsxRuntime.jsx("div", __assign({ className: "text-xs text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
|
|
20160
|
+
};
|
|
20161
|
+
var PaymentFormWrapper = function (_a) {
|
|
20162
|
+
var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
|
|
20163
|
+
var isMobile = common.useIsMobile();
|
|
20164
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-6 shrink-0 ".concat(isMobile ? "w-full shadow-padding-xb" : "", " ").concat(className), style: __assign({}, (isMobile
|
|
20165
|
+
? setMaxHeight
|
|
20166
|
+
? { maxHeight: "60vh" }
|
|
20167
|
+
: {}
|
|
20168
|
+
: {
|
|
20169
|
+
width: "350px",
|
|
20170
|
+
})) }, { children: children })));
|
|
20171
|
+
};
|
|
20172
|
+
|
|
20173
|
+
var queryKeyFactory = common.QueryKeyFactory.default;
|
|
20174
|
+
var Checkout = function (_a) {
|
|
20175
|
+
var _b, _c;
|
|
20176
|
+
var entityId = _a.entityId, onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, token = _a.token, _d = _a.quantity, quantity = _d === void 0 ? 0 : _d;
|
|
20177
|
+
var _e = react.useContext(BunnyContext), apiHost = _e.apiHost, graphQLClient = _e.graphQLClient;
|
|
20178
|
+
var isMobile = common.useIsMobile();
|
|
20179
|
+
var hasTaxPlugin = useHasTaxPlugin({
|
|
19969
20180
|
entityId: entityId,
|
|
19970
|
-
|
|
20181
|
+
apiHost: apiHost,
|
|
19971
20182
|
token: token,
|
|
19972
|
-
})
|
|
20183
|
+
});
|
|
19973
20184
|
var queryClient = reactQuery.useQueryClient();
|
|
19974
20185
|
// Queries
|
|
19975
|
-
var
|
|
19976
|
-
queryKey: ["
|
|
19977
|
-
queryFn: function () { return
|
|
19978
|
-
|
|
19979
|
-
|
|
19980
|
-
|
|
19981
|
-
|
|
20186
|
+
var _f = reactQuery.useQuery({
|
|
20187
|
+
queryKey: ["getTaxationRequiredAccountFields", token],
|
|
20188
|
+
queryFn: function () { return getTaxationRequiredAccountFields({ token: token, apiHost: apiHost }); },
|
|
20189
|
+
enabled: Boolean(quote),
|
|
20190
|
+
staleTime: 0,
|
|
20191
|
+
}), taxationRequiredAccountFields = _f.data, isLoadingTaxationRequiredAccountFields = _f.isLoading;
|
|
20192
|
+
var _g = reactQuery.useQuery({
|
|
20193
|
+
queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
|
|
20194
|
+
queryFn: function () {
|
|
20195
|
+
return (quote === null || quote === void 0 ? void 0 : quote.accountId) && common.getAccount({ id: quote.accountId, token: token, apiHost: apiHost });
|
|
20196
|
+
},
|
|
20197
|
+
enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
|
|
20198
|
+
((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
|
|
20199
|
+
}), account = _g.data, isLoadingAccount = _g.isLoading;
|
|
20200
|
+
reactQuery.useQuery({
|
|
20201
|
+
queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
|
|
20202
|
+
id: quote === null || quote === void 0 ? void 0 : quote.id,
|
|
20203
|
+
token: token,
|
|
20204
|
+
}),
|
|
20205
|
+
queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
20206
|
+
var updatedQuote, quoteKey, calculatedPricesKey;
|
|
19982
20207
|
return __generator(this, function (_a) {
|
|
19983
20208
|
switch (_a.label) {
|
|
19984
20209
|
case 0:
|
|
19985
|
-
|
|
19986
|
-
|
|
19987
|
-
|
|
20210
|
+
if (!quote) return [3 /*break*/, 2];
|
|
20211
|
+
return [4 /*yield*/, quoteRecalculateTaxes({
|
|
20212
|
+
quoteId: quote.id,
|
|
19988
20213
|
token: token,
|
|
19989
20214
|
apiHost: apiHost,
|
|
19990
|
-
entityId: entityId,
|
|
19991
|
-
priceListCode: priceListCode,
|
|
19992
|
-
accountName: formData.accountName,
|
|
19993
|
-
billingContact: {
|
|
19994
|
-
firstName: formData.firstName,
|
|
19995
|
-
lastName: formData.lastName,
|
|
19996
|
-
email: formData.email,
|
|
19997
|
-
},
|
|
19998
20215
|
})];
|
|
19999
20216
|
case 1:
|
|
20000
|
-
|
|
20001
|
-
|
|
20002
|
-
|
|
20003
|
-
|
|
20004
|
-
|
|
20005
|
-
// to instead use paymentMethods from portalSessionToken.
|
|
20006
|
-
queryClient.invalidateQueries({
|
|
20007
|
-
queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
|
|
20008
|
-
entityId: entityId,
|
|
20217
|
+
updatedQuote = _a.sent();
|
|
20218
|
+
if (updatedQuote) {
|
|
20219
|
+
quoteKey = queryKeyFactory.createObjectKey({
|
|
20220
|
+
objectName: "editingQuote",
|
|
20221
|
+
id: updatedQuote.id,
|
|
20009
20222
|
token: token,
|
|
20010
|
-
})
|
|
20011
|
-
|
|
20012
|
-
|
|
20013
|
-
|
|
20014
|
-
|
|
20015
|
-
|
|
20016
|
-
|
|
20017
|
-
|
|
20018
|
-
|
|
20019
|
-
|
|
20020
|
-
case
|
|
20223
|
+
});
|
|
20224
|
+
calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
|
|
20225
|
+
quantity: quantity,
|
|
20226
|
+
priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
|
|
20227
|
+
token: token,
|
|
20228
|
+
});
|
|
20229
|
+
queryClient.setQueryData(quoteKey, updatedQuote);
|
|
20230
|
+
queryClient.setQueryData(calculatedPricesKey, updatedQuote);
|
|
20231
|
+
}
|
|
20232
|
+
_a.label = 2;
|
|
20233
|
+
case 2: return [2 /*return*/, {}];
|
|
20021
20234
|
}
|
|
20022
20235
|
});
|
|
20023
|
-
});
|
|
20236
|
+
}); },
|
|
20237
|
+
// Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
|
|
20238
|
+
enabled: Boolean(quote) &&
|
|
20239
|
+
open &&
|
|
20240
|
+
hasTaxPlugin &&
|
|
20241
|
+
!taxationRequiredAccountFields &&
|
|
20242
|
+
!isLoadingTaxationRequiredAccountFields,
|
|
20243
|
+
staleTime: 0,
|
|
20244
|
+
});
|
|
20245
|
+
if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
|
|
20246
|
+
return null;
|
|
20247
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 bg-slate-50 overflow-auto", style: {
|
|
20248
|
+
zIndex: 1001,
|
|
20249
|
+
} }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "text-base shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "flex-col" : "shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "" })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsxRuntime.jsx(antd.Divider, { className: "h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "w-full pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice, graphQLClient: graphQLClient }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, entityId: entityId, onFail: function (error) {
|
|
20250
|
+
onFail(error);
|
|
20251
|
+
}, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
|
|
20252
|
+
onFail(error);
|
|
20253
|
+
}, onPaymentSuccess: onSuccess, graphQLClient: graphQLClient }))] }))] })) })));
|
|
20254
|
+
};
|
|
20255
|
+
|
|
20256
|
+
var useCurrentUserData = function () {
|
|
20257
|
+
var queryClient = reactQuery.useQueryClient();
|
|
20258
|
+
var token = useToken();
|
|
20259
|
+
var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
|
|
20260
|
+
if (!currentUser)
|
|
20261
|
+
return {};
|
|
20262
|
+
return currentUser;
|
|
20263
|
+
};
|
|
20264
|
+
|
|
20265
|
+
var BunnyFooterIcon = function (_a) {
|
|
20266
|
+
var color = _a.color;
|
|
20267
|
+
return (jsxRuntime.jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsxRuntime.jsx("path", { className: "icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsxRuntime.jsx("path", { className: "icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
|
|
20268
|
+
};
|
|
20269
|
+
|
|
20270
|
+
var SubscriptionsContext = react.createContext({});
|
|
20271
|
+
|
|
20272
|
+
var Footer = function (_a) {
|
|
20273
|
+
var className = _a.className;
|
|
20274
|
+
// Context
|
|
20275
|
+
var quotePreviewData = react.useContext(SubscriptionsContext).quotePreviewData;
|
|
20276
|
+
var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
|
|
20277
|
+
var isMobile = common.useIsMobile();
|
|
20278
|
+
var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
|
|
20279
|
+
if (selectedPriceList && isMobile)
|
|
20280
|
+
return null;
|
|
20281
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(isMobile ? "flex-col gap-2 grow" : "", " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
|
|
20282
|
+
};
|
|
20283
|
+
var BunnyMarketingLink = function () {
|
|
20284
|
+
var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
|
|
20285
|
+
var isMobile = common.useIsMobile();
|
|
20286
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsxRuntime.jsx("div", __assign({ style: { paddingTop: "5px" } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
|
|
20287
|
+
};
|
|
20288
|
+
var StyedLink = styled__default["default"].a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n font-family: Inter;\n text-decoration: none;\n font-size: 14px;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n font-family: Inter;\n text-decoration: none;\n font-size: 14px;\n"])), common.SLATE_400, common.SLATE_500);
|
|
20289
|
+
var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n &:hover {\n color: ", " !important;\n }\n"], ["\n &:hover {\n color: ", " !important;\n }\n"])), common.PRIMARY_COLOR);
|
|
20290
|
+
var templateObject_1$5, templateObject_2$1;
|
|
20291
|
+
|
|
20292
|
+
var PageTitle = function (_a) {
|
|
20293
|
+
var onGoBack = _a.onGoBack, title = _a.title;
|
|
20294
|
+
var isMobile = common.useIsMobile();
|
|
20295
|
+
var secondaryColor = react.useContext(BrandContext).secondaryColor;
|
|
20296
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-3 font-medium", style: {
|
|
20297
|
+
fontSize: "28px",
|
|
20298
|
+
paddingBottom: isMobile ? "22px" : "56px",
|
|
20299
|
+
color: secondaryColor,
|
|
20300
|
+
} }, { children: [onGoBack && (jsxRuntime.jsx(icons.ArrowLeftOutlined, { onClick: onGoBack, style: {
|
|
20301
|
+
fontSize: "20px",
|
|
20302
|
+
cursor: "pointer",
|
|
20303
|
+
} })), title] })));
|
|
20304
|
+
};
|
|
20305
|
+
|
|
20306
|
+
var calculateNewQuantity = function (priceList, currentQuantity) {
|
|
20307
|
+
if (currentQuantity === void 0) { currentQuantity = 1; }
|
|
20308
|
+
var priceListRecurringCharge = priceList === null || priceList === void 0 ? void 0 : priceList.charges.find(function (priceListCharge) {
|
|
20309
|
+
return priceListCharge.chargeType === "RECURRING" ||
|
|
20310
|
+
priceListCharge.chargeType === "USAGE";
|
|
20311
|
+
});
|
|
20312
|
+
var quantityMax = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMax) || Number.POSITIVE_INFINITY;
|
|
20313
|
+
var quantityMin = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMin) || Number.NEGATIVE_INFINITY;
|
|
20314
|
+
var selfServiceQuantity = priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.selfServiceQuantity;
|
|
20315
|
+
// If self service quantity is disabled, return the min quantity
|
|
20316
|
+
if (!selfServiceQuantity && quantityMin) {
|
|
20317
|
+
return quantityMin;
|
|
20024
20318
|
}
|
|
20025
|
-
|
|
20026
|
-
|
|
20027
|
-
|
|
20028
|
-
|
|
20029
|
-
|
|
20319
|
+
// If the current quantity is greater than the max quantity, return the max quantity
|
|
20320
|
+
else if (currentQuantity > quantityMax) {
|
|
20321
|
+
return quantityMax;
|
|
20322
|
+
}
|
|
20323
|
+
// If the current quantity is less than the min quantity, return the min quantity
|
|
20324
|
+
else if (currentQuantity < quantityMin) {
|
|
20325
|
+
return quantityMin;
|
|
20326
|
+
}
|
|
20327
|
+
// If the current quantity is between the min and max quantity, return the current quantity
|
|
20328
|
+
else if (currentQuantity <= quantityMax && currentQuantity >= quantityMin) {
|
|
20329
|
+
return currentQuantity;
|
|
20330
|
+
}
|
|
20331
|
+
// If all else fails, return 1
|
|
20332
|
+
else {
|
|
20333
|
+
return 1;
|
|
20334
|
+
}
|
|
20335
|
+
};
|
|
20336
|
+
|
|
20337
|
+
var CheckoutBarInput = function (_a) {
|
|
20338
|
+
var charge = _a.charge, quantity = _a.quantity, selectedPriceList = _a.selectedPriceList, setQuantity = _a.setQuantity;
|
|
20339
|
+
var _b = react.useState(false), isTooltipOpen = _b[0], setIsTooltipOpen = _b[1];
|
|
20340
|
+
// Context
|
|
20341
|
+
var _c = react.useContext(SubscriptionsContext), setQuotePreviewData = _c.setQuotePreviewData, quotePreviewData = _c.quotePreviewData;
|
|
20342
|
+
// Hooks
|
|
20343
|
+
var isMobile = common.useIsMobile();
|
|
20344
|
+
// Handlers
|
|
20345
|
+
var onChangeQuantity = function (quantity) {
|
|
20346
|
+
if (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) {
|
|
20347
|
+
setQuotePreviewData({
|
|
20348
|
+
priceList: quotePreviewData.priceList,
|
|
20349
|
+
quantity: calculateNewQuantity(quotePreviewData.priceList, quantity),
|
|
20030
20350
|
});
|
|
20351
|
+
}
|
|
20352
|
+
else {
|
|
20353
|
+
console.error("No price list found in quote preview data");
|
|
20354
|
+
}
|
|
20355
|
+
};
|
|
20356
|
+
var onBlurUsers = function (e) {
|
|
20357
|
+
var amount = Number(e.target.value);
|
|
20358
|
+
if (!amount) {
|
|
20359
|
+
onChangeQuantity(1);
|
|
20360
|
+
}
|
|
20361
|
+
};
|
|
20362
|
+
// Quantity debounce
|
|
20363
|
+
// eslint-disable-next-line
|
|
20364
|
+
var quoteChangeDebounce = react.useCallback(lodashExports.debounce(function (newQuantity) { return __awaiter(void 0, void 0, void 0, function () {
|
|
20365
|
+
return __generator(this, function (_a) {
|
|
20366
|
+
onChangeQuantity(newQuantity);
|
|
20367
|
+
return [2 /*return*/];
|
|
20031
20368
|
});
|
|
20369
|
+
}); }, 1000), []);
|
|
20370
|
+
react.useEffect(function () {
|
|
20371
|
+
setTimeout(function () {
|
|
20372
|
+
setIsTooltipOpen(true);
|
|
20373
|
+
}, 1000);
|
|
20374
|
+
setTimeout(function () {
|
|
20375
|
+
setIsTooltipOpen(false);
|
|
20376
|
+
}, 6000);
|
|
20377
|
+
}, []);
|
|
20378
|
+
if (!(charge === null || charge === void 0 ? void 0 : charge.feature))
|
|
20379
|
+
return null;
|
|
20380
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2 ".concat(isMobile ? "justify-between" : "") }, { children: [jsxRuntime.jsx(QuantityLabel, { activeCharge: charge }), jsxRuntime.jsx(antd.Tooltip, __assign({ onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
|
|
20381
|
+
body: {
|
|
20382
|
+
paddingTop: "0.75rem",
|
|
20383
|
+
paddingBottom: "0.75rem",
|
|
20384
|
+
},
|
|
20385
|
+
} }, { children: jsxRuntime.jsx(antd.Input, { className: isMobile ? "text-right" : "", disabled: !selectedPriceList || !charge.selfServiceQuantity, onBlur: onBlurUsers, onChange: function (e) {
|
|
20386
|
+
var quantity = Number(e.target.value);
|
|
20387
|
+
setQuantity(quantity);
|
|
20388
|
+
quoteChangeDebounce(quantity);
|
|
20389
|
+
}, min: charge === null || charge === void 0 ? void 0 : charge.quantityMin, max: charge === null || charge === void 0 ? void 0 : charge.quantityMax, style: { minWidth: "120px" }, type: "number", value: quantity, required: true }) }))] })));
|
|
20390
|
+
};
|
|
20391
|
+
var QuantityLabel = function (_a) {
|
|
20392
|
+
var _b;
|
|
20393
|
+
var activeCharge = _a.activeCharge;
|
|
20394
|
+
var featureName = (_b = activeCharge.feature) === null || _b === void 0 ? void 0 : _b.name;
|
|
20395
|
+
var pluralizedFeatureName = (common.StringUtils.isStringPluralized(featureName) || !featureName
|
|
20396
|
+
? featureName
|
|
20397
|
+
: common.StringUtils.pluralizeEntityName(featureName)) || "";
|
|
20398
|
+
return (jsxRuntime.jsx("span", __assign({ className: "text-slate-500 font-medium", style: { fontSize: "11px" } }, { children: pluralizedFeatureName.toUpperCase() })));
|
|
20399
|
+
};
|
|
20400
|
+
|
|
20401
|
+
var periodMonthsConverter = function (period) {
|
|
20402
|
+
if (period === 0)
|
|
20403
|
+
return common.BillingPeriod.ONCE;
|
|
20404
|
+
else if (period === 1)
|
|
20405
|
+
return common.BillingPeriod.MONTHLY;
|
|
20406
|
+
else if (period === 3)
|
|
20407
|
+
return common.BillingPeriod.QUARTERLY;
|
|
20408
|
+
else if (period === 6)
|
|
20409
|
+
return common.BillingPeriod.SEMI_ANNUALLY;
|
|
20410
|
+
else
|
|
20411
|
+
return common.BillingPeriod.ANNUALLY;
|
|
20412
|
+
};
|
|
20413
|
+
var billingPeriodConverter = function (period) {
|
|
20414
|
+
if (period === common.BillingPeriod.ONCE)
|
|
20415
|
+
return 0;
|
|
20416
|
+
else if (period === common.BillingPeriod.MONTHLY)
|
|
20417
|
+
return 1;
|
|
20418
|
+
else if (period === common.BillingPeriod.QUARTERLY)
|
|
20419
|
+
return 3;
|
|
20420
|
+
else if (period === common.BillingPeriod.SEMI_ANNUALLY)
|
|
20421
|
+
return 6;
|
|
20422
|
+
else
|
|
20423
|
+
return 12;
|
|
20424
|
+
};
|
|
20425
|
+
|
|
20426
|
+
var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
|
|
20427
|
+
// Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
|
|
20428
|
+
var createPlanDescription = function (plan) {
|
|
20429
|
+
return (plan.description || "").replace(removeHTMLTagsRegex, function (x, y) {
|
|
20430
|
+
return y ? " & " : "";
|
|
20431
|
+
});
|
|
20432
|
+
};
|
|
20433
|
+
var getActivePlanPriceData = function (plan, selectedPriceList) {
|
|
20434
|
+
if (!plan) {
|
|
20435
|
+
return;
|
|
20032
20436
|
}
|
|
20033
|
-
|
|
20034
|
-
|
|
20035
|
-
|
|
20036
|
-
|
|
20037
|
-
|
|
20038
|
-
|
|
20039
|
-
|
|
20040
|
-
|
|
20041
|
-
|
|
20042
|
-
|
|
20043
|
-
|
|
20044
|
-
|
|
20045
|
-
|
|
20046
|
-
|
|
20047
|
-
|
|
20048
|
-
|
|
20049
|
-
|
|
20050
|
-
|
|
20051
|
-
|
|
20052
|
-
|
|
20053
|
-
|
|
20054
|
-
|
|
20055
|
-
|
|
20056
|
-
|
|
20057
|
-
|
|
20058
|
-
|
|
20059
|
-
|
|
20060
|
-
|
|
20437
|
+
// If a period option is selected, return the charge that matches the selected period option
|
|
20438
|
+
var activeBillingPLCharge;
|
|
20439
|
+
// Default to first price list charge
|
|
20440
|
+
var lowestPLCharge;
|
|
20441
|
+
// Find the lowest price list charge with a billing period that matches the selected period option
|
|
20442
|
+
for (var i = 0; i < plan.priceLists.length; i++) {
|
|
20443
|
+
var priceList = plan.priceLists[i];
|
|
20444
|
+
if (priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
|
|
20445
|
+
activeBillingPLCharge = priceList.charges[0];
|
|
20446
|
+
break;
|
|
20447
|
+
}
|
|
20448
|
+
for (var j = 0; j < priceList.charges.length; j++) {
|
|
20449
|
+
var charge = priceList.charges[j];
|
|
20450
|
+
if (charge.chargeType === common.ChargeType.USAGE)
|
|
20451
|
+
continue;
|
|
20452
|
+
if (activeBillingPLCharge) {
|
|
20453
|
+
// If we already found a charge with the same billing period check if this charge is lower
|
|
20454
|
+
if (charge.basePrice < activeBillingPLCharge.basePrice &&
|
|
20455
|
+
charge.billingPeriod === (activeBillingPLCharge === null || activeBillingPLCharge === void 0 ? void 0 : activeBillingPLCharge.billingPeriod)) {
|
|
20456
|
+
activeBillingPLCharge = charge;
|
|
20457
|
+
}
|
|
20458
|
+
}
|
|
20459
|
+
// If a period option is selected, only return the charge if it matches the selected period option
|
|
20460
|
+
else if (selectedPriceList &&
|
|
20461
|
+
charge.billingPeriod ===
|
|
20462
|
+
periodMonthsConverter(selectedPriceList.periodMonths)) {
|
|
20463
|
+
activeBillingPLCharge = charge;
|
|
20464
|
+
}
|
|
20465
|
+
// Otherwise, return the lowest price list charge
|
|
20466
|
+
else if (charge.basePrice < ((lowestPLCharge === null || lowestPLCharge === void 0 ? void 0 : lowestPLCharge.basePrice) || -1)) {
|
|
20467
|
+
lowestPLCharge = charge;
|
|
20468
|
+
}
|
|
20469
|
+
}
|
|
20470
|
+
}
|
|
20471
|
+
return {
|
|
20472
|
+
activeCharge: activeBillingPLCharge || lowestPLCharge,
|
|
20473
|
+
};
|
|
20474
|
+
};
|
|
20475
|
+
var isPriceListDisabled = function (_a) {
|
|
20476
|
+
var priceList = _a.priceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
|
|
20477
|
+
var disableOnClick = false;
|
|
20478
|
+
// Plan already has a subscription
|
|
20479
|
+
var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
|
|
20480
|
+
var _a, _b;
|
|
20481
|
+
return subscription.plan.id === priceList.plan.id &&
|
|
20482
|
+
((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== common.SubscriptionState.CANCELED &&
|
|
20483
|
+
((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== common.SubscriptionState.EXPIRED;
|
|
20484
|
+
});
|
|
20485
|
+
var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
|
|
20486
|
+
// Is this plan the one that the user is upgrading from
|
|
20487
|
+
var isUpgradingPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id;
|
|
20488
|
+
if ((subscriptionPlan && !isUpgradingPlan) ||
|
|
20489
|
+
isPriceListCurrentSubscription) {
|
|
20490
|
+
disableOnClick = true;
|
|
20491
|
+
}
|
|
20492
|
+
return disableOnClick;
|
|
20493
|
+
};
|
|
20494
|
+
|
|
20495
|
+
var CheckoutButton = function (_a) {
|
|
20496
|
+
var checkoutButtonDisabled = _a.checkoutButtonDisabled, onClickCheckout = _a.onClickCheckout, loading = _a.loading;
|
|
20497
|
+
var isMobile = common.useIsMobile();
|
|
20498
|
+
return (jsxRuntime.jsx(antd.Button, __assign({ className: isMobile ? "w-full" : "", disabled: checkoutButtonDisabled, onClick: onClickCheckout, size: isMobile ? "large" : "middle", type: "primary", loading: loading }, { children: "Proceed to checkout" })));
|
|
20499
|
+
};
|
|
20500
|
+
|
|
20501
|
+
var CheckoutPrice = function (_a) {
|
|
20502
|
+
var isUsage = _a.isUsage, quote = _a.quote, selectedPriceList = _a.selectedPriceList;
|
|
20503
|
+
var isMobile = common.useIsMobile();
|
|
20504
|
+
if (!isUsage && (!selectedPriceList || (quote === null || quote === void 0 ? void 0 : quote.periodAmount) === undefined))
|
|
20505
|
+
return null;
|
|
20506
|
+
return (jsxRuntime.jsx("div", __assign({ className: "font-medium ".concat(isMobile ? "text-2xl" : "") }, { children: isUsage
|
|
20507
|
+
? "Usage based pricing"
|
|
20508
|
+
: selectedPriceList && (quote === null || quote === void 0 ? void 0 : quote.periodAmount) !== undefined
|
|
20509
|
+
? "".concat(common.formatCurrency(quote.periodAmount, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.currencyId, 0), " / ").concat(common.PERIOD_LABELS[periodMonthsConverter(selectedPriceList.periodMonths)])
|
|
20510
|
+
: "" })));
|
|
20511
|
+
};
|
|
20512
|
+
|
|
20513
|
+
var CheckoutBarSummarySection = function (_a) {
|
|
20514
|
+
var _b, _c;
|
|
20515
|
+
var open = _a.open, quantityLocal = _a.quantityLocal, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, entityId = _a.entityId, upgradingSubscription = _a.upgradingSubscription, quotePreviewData = _a.quotePreviewData;
|
|
20516
|
+
// Context
|
|
20517
|
+
var apiHost = react.useContext(BunnyContext).apiHost;
|
|
20518
|
+
// Hooks
|
|
20519
|
+
var token = useToken();
|
|
20520
|
+
var paymentMethodAllowedPlugins = usePaymentPlugins({
|
|
20521
|
+
entityId: entityId,
|
|
20522
|
+
apiHost: apiHost,
|
|
20523
|
+
token: token,
|
|
20524
|
+
}).paymentMethodAllowedPlugins;
|
|
20525
|
+
var queryClient = reactQuery.useQueryClient();
|
|
20526
|
+
var isMobile = common.useIsMobile();
|
|
20527
|
+
// Derived state
|
|
20528
|
+
var isFetching = queryClient.isFetching({
|
|
20529
|
+
queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({
|
|
20530
|
+
subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
|
|
20531
|
+
token: token,
|
|
20532
|
+
}),
|
|
20533
|
+
});
|
|
20534
|
+
var checkoutButtonDisabled = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
|
|
20535
|
+
!selectedPriceList ||
|
|
20536
|
+
quantityLocal !== quotePreviewData.quantity ||
|
|
20537
|
+
isFetching ||
|
|
20538
|
+
selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) ||
|
|
20539
|
+
open);
|
|
20540
|
+
var planChangeOptions = queryClient.getQueryData(common.QueryKeyFactory.default.planChangeOptionsKey({
|
|
20541
|
+
subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
|
|
20542
|
+
token: token,
|
|
20543
|
+
}));
|
|
20544
|
+
var selectedPlan = (_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.find(function (plan) { return plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id); });
|
|
20545
|
+
var activeCharge = (_c = getActivePlanPriceData(selectedPlan, selectedPriceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
|
|
20546
|
+
var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === common.ChargeType.USAGE;
|
|
20547
|
+
var hasPaymentMethodsOrIsFree = Boolean(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.length) ||
|
|
20548
|
+
Boolean(quote && getQuoteAmountDue(quote) === 0);
|
|
20549
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4 ".concat(isMobile ? "flex-col" : "") }, { children: [quote && (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "items-center justify-between w-full" : "flex-col") }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-500 font-medium text-right", style: { fontSize: "11px" } }, { children: "TOTAL" })), jsxRuntime.jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] }))), hasPaymentMethodsOrIsFree && (jsxRuntime.jsx(CheckoutButton, { checkoutButtonDisabled: checkoutButtonDisabled, onClickCheckout: onClickCheckout, loading: !quote }))] })));
|
|
20550
|
+
};
|
|
20551
|
+
|
|
20552
|
+
var PlanPickerCheckoutBarWrapper = function (_a) {
|
|
20553
|
+
var handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
|
|
20554
|
+
// Context
|
|
20555
|
+
var quotePreviewData = react.useContext(SubscriptionsContext).quotePreviewData;
|
|
20556
|
+
var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
|
|
20557
|
+
if (!selectedPriceList)
|
|
20558
|
+
return null;
|
|
20559
|
+
return (jsxRuntime.jsx(PlanPickerCheckoutBar, { handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
|
|
20560
|
+
};
|
|
20561
|
+
var PlanPickerCheckoutBar = function (_a) {
|
|
20562
|
+
var _b;
|
|
20563
|
+
var selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
|
|
20564
|
+
// Context
|
|
20565
|
+
var token = useToken();
|
|
20566
|
+
var _c = react.useContext(SubscriptionsContext), entityId = _c.entityId, quotePreviewData = _c.quotePreviewData, upgradingSubscription = _c.upgradingSubscription, shadow = _c.shadow;
|
|
20567
|
+
var _d = react.useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
|
|
20568
|
+
// Local state
|
|
20569
|
+
var _e = react.useState(0), quantityLocal = _e[0], setQuantity = _e[1];
|
|
20570
|
+
var _f = react.useState(0), prevQuantity = _f[0], setPrevQuantity = _f[1];
|
|
20571
|
+
var _g = react.useState(false), payModalVisible = _g[0], setPayModalVisible = _g[1];
|
|
20572
|
+
// Hooks
|
|
20573
|
+
var showSuccessNotification = common.useSuccessNotification();
|
|
20574
|
+
var queryClient = reactQuery.useQueryClient();
|
|
20575
|
+
var isMobile = common.useIsMobile();
|
|
20576
|
+
var storedPaymentMethod = usePaymentMethod({
|
|
20577
|
+
graphQLClient: graphQLClient,
|
|
20578
|
+
token: token,
|
|
20579
|
+
}).data;
|
|
20580
|
+
// Quote ID ref
|
|
20581
|
+
var quoteIdRef = react.useRef();
|
|
20582
|
+
// Queries
|
|
20583
|
+
var _h = reactQuery.useQuery({
|
|
20584
|
+
queryKey: common.QueryKeyFactory.default.calculatedPricesKey({
|
|
20585
|
+
quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
|
|
20586
|
+
priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
|
|
20587
|
+
token: token,
|
|
20588
|
+
}),
|
|
20589
|
+
queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
20590
|
+
var quote;
|
|
20591
|
+
var _a;
|
|
20592
|
+
return __generator(this, function (_b) {
|
|
20593
|
+
switch (_b.label) {
|
|
20594
|
+
case 0: return [4 /*yield*/, quoteCompose({
|
|
20595
|
+
priceListId: (_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.id,
|
|
20596
|
+
quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
|
|
20597
|
+
quoteId: quoteIdRef.current,
|
|
20598
|
+
subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
|
|
20599
|
+
token: token,
|
|
20600
|
+
apiHost: apiHost,
|
|
20601
|
+
})];
|
|
20602
|
+
case 1:
|
|
20603
|
+
quote = _b.sent();
|
|
20604
|
+
quoteIdRef.current = quote === null || quote === void 0 ? void 0 : quote.id;
|
|
20605
|
+
return [2 /*return*/, quote];
|
|
20061
20606
|
}
|
|
20062
20607
|
});
|
|
20608
|
+
}); },
|
|
20609
|
+
// 'enabled' is commented out for HACKY FIX
|
|
20610
|
+
// enabled: Boolean(
|
|
20611
|
+
// quotePreviewData?.priceList?.id &&
|
|
20612
|
+
// selectedPriceList &&
|
|
20613
|
+
// selectedPriceList.id !== upgradingSubscription?.priceList.id
|
|
20614
|
+
// ),
|
|
20615
|
+
enabled: false,
|
|
20616
|
+
placeholderData: reactQuery.keepPreviousData,
|
|
20617
|
+
}), quote = _h.data, refetch = _h.refetch;
|
|
20618
|
+
// TODO: eventually solve this hacky fix
|
|
20619
|
+
// THIS IS NOT OKAY (we couldn't find any other solution on short notice)
|
|
20620
|
+
// HACKY FIX START
|
|
20621
|
+
// Essentially this useEffect is doing the work useQuery is supposed to do, but isn't doing properly.
|
|
20622
|
+
react.useEffect(function () {
|
|
20623
|
+
var _a;
|
|
20624
|
+
if (((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.id) &&
|
|
20625
|
+
selectedPriceList &&
|
|
20626
|
+
selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id)) {
|
|
20627
|
+
refetch();
|
|
20628
|
+
}
|
|
20629
|
+
}, [
|
|
20630
|
+
(_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id,
|
|
20631
|
+
quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
|
|
20632
|
+
refetch,
|
|
20633
|
+
selectedPriceList,
|
|
20634
|
+
selectedPriceList.id,
|
|
20635
|
+
upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id,
|
|
20636
|
+
]);
|
|
20637
|
+
// HACKY FIX END
|
|
20638
|
+
var handleCheckoutSuccess = function () {
|
|
20639
|
+
queryClient.invalidateQueries({
|
|
20640
|
+
queryKey: common.QueryKeyFactory.default.createTableKey({
|
|
20641
|
+
filterString: "entityId=".concat(entityId),
|
|
20642
|
+
pluralType: "subscriptions",
|
|
20643
|
+
token: token,
|
|
20644
|
+
}),
|
|
20645
|
+
});
|
|
20646
|
+
queryClient.invalidateQueries({
|
|
20647
|
+
queryKey: common.QueryKeyFactory.default.transactionsKey({ token: token }),
|
|
20063
20648
|
});
|
|
20064
|
-
|
|
20065
|
-
|
|
20066
|
-
|
|
20067
|
-
}
|
|
20068
|
-
var WrapperComponent = function (_a) {
|
|
20069
|
-
var children = _a.children, className = _a.className, style = _a.style;
|
|
20070
|
-
return isCardEnabled ? (jsxRuntime.jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsxRuntime.jsx("div", __assign({ className: className, style: style }, { children: children })));
|
|
20649
|
+
setPayModalVisible(false);
|
|
20650
|
+
showSuccessNotification("Your subscription has been created", "Checkout successful");
|
|
20651
|
+
onCheckoutSuccess();
|
|
20071
20652
|
};
|
|
20072
|
-
|
|
20073
|
-
|
|
20074
|
-
|
|
20075
|
-
|
|
20653
|
+
var onCheckoutFail = function (error) {
|
|
20654
|
+
handlePortalErrors(error);
|
|
20655
|
+
};
|
|
20656
|
+
// Set quantity from quote preview data
|
|
20657
|
+
react.useEffect(function () {
|
|
20658
|
+
if ((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) &&
|
|
20659
|
+
prevQuantity !== quotePreviewData.quantity) {
|
|
20660
|
+
setQuantity(quotePreviewData.quantity);
|
|
20661
|
+
setPrevQuantity(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity);
|
|
20662
|
+
}
|
|
20663
|
+
}, [
|
|
20664
|
+
prevQuantity,
|
|
20665
|
+
quantityLocal,
|
|
20666
|
+
quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
|
|
20667
|
+
setPrevQuantity,
|
|
20668
|
+
setQuantity,
|
|
20669
|
+
]);
|
|
20670
|
+
// Reset query key on unmount
|
|
20671
|
+
react.useEffect(function () {
|
|
20672
|
+
return function () {
|
|
20673
|
+
queryClient.invalidateQueries({
|
|
20674
|
+
queryKey: common.QueryKeyFactory.default.calculatedPricesKey({
|
|
20675
|
+
priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
|
|
20676
|
+
quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
|
|
20677
|
+
token: token,
|
|
20678
|
+
}),
|
|
20679
|
+
});
|
|
20680
|
+
};
|
|
20681
|
+
}, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
|
|
20682
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-4" : "flex-row", " my-2 p-4 justify-between bg-white rounded-md ").concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "flex flex-col" : "flex", " gap-4") }, { children: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.map(function (charge, index) {
|
|
20683
|
+
return (jsxRuntime.jsx(CheckoutBarInput, { charge: charge, quantity: quantityLocal || 0, selectedPriceList: selectedPriceList, setQuantity: setQuantity }, index));
|
|
20684
|
+
}) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quantityLocal: quantityLocal, quote: quote, selectedPriceList: selectedPriceList, entityId: entityId, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsxRuntime.jsx(Checkout, { entityId: entityId, isMobile: isMobile, onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quantity: quantityLocal, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: storedPaymentMethod, token: token })] })));
|
|
20685
|
+
};
|
|
20076
20686
|
|
|
20077
20687
|
// WARNING: There is a preview button on APP that will need to be changed if this query is changed
|
|
20078
20688
|
var PLAN_CHANGE_OPTIONS_QUERY = "\n query planChangeOptions($subscriptionId: ID) {\n planChangeOptions(subscriptionId: $subscriptionId) {\n products {\n everythingInPlus\n id\n name\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n plans {\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 priceLists {\n basePrice\n id\n currencyId\n periodMonths\n plan {\n id\n position\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 productId\n }\n }\n }";
|
|
@@ -20101,40 +20711,786 @@ var getPlanChangeOptions = function (_a) {
|
|
|
20101
20711
|
return [2 /*return*/, planChangeOptions];
|
|
20102
20712
|
}
|
|
20103
20713
|
});
|
|
20104
|
-
});
|
|
20714
|
+
});
|
|
20715
|
+
};
|
|
20716
|
+
|
|
20717
|
+
var portalPreviewQuery = function (id) { return "\nquery portalPreviewQuery {\n product(id: ".concat(id, ") {\n everythingInPlus\n id\n name\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n plans(filter: \"plan.productId is ").concat(id, "\") {\n nodes {\n\t\t\tcode\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 priceLists {\n basePrice\n id\n currencyId\n periodMonths\n plan {\n id\n position\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 }\n}"); };
|
|
20718
|
+
var getPortalPreviewData = function (id, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
|
|
20719
|
+
var response;
|
|
20720
|
+
return __generator(this, function (_a) {
|
|
20721
|
+
switch (_a.label) {
|
|
20722
|
+
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
20723
|
+
isInPreviewMode: true,
|
|
20724
|
+
query: portalPreviewQuery(id),
|
|
20725
|
+
token: token || "",
|
|
20726
|
+
apiHost: apiHost,
|
|
20727
|
+
})];
|
|
20728
|
+
case 1:
|
|
20729
|
+
response = _a.sent();
|
|
20730
|
+
if (response.product && response.plans) {
|
|
20731
|
+
response.plans = response.plans.nodes;
|
|
20732
|
+
response.products = [response.product];
|
|
20733
|
+
delete response.product;
|
|
20734
|
+
// Sort plans by position
|
|
20735
|
+
if (response.plans) {
|
|
20736
|
+
response.plans.sort(function (a, b) { return a.position - b.position; });
|
|
20737
|
+
}
|
|
20738
|
+
return [2 /*return*/, response];
|
|
20739
|
+
}
|
|
20740
|
+
else
|
|
20741
|
+
throw response;
|
|
20742
|
+
}
|
|
20743
|
+
});
|
|
20744
|
+
}); };
|
|
20745
|
+
|
|
20746
|
+
var ErrorView = function (_a) {
|
|
20747
|
+
var children = _a.children, message = _a.message;
|
|
20748
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsxRuntime.jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
|
|
20749
|
+
};
|
|
20750
|
+
|
|
20751
|
+
var BillingPeriodSelector = function (_a) {
|
|
20752
|
+
var availableBillingPeriods = _a.availableBillingPeriods, onChangeBillingPeriod = _a.onChangeBillingPeriod, products = _a.products, selectedBillingPeriod = _a.selectedBillingPeriod, selectedProduct = _a.selectedProduct, onChangeProduct = _a.onChangeProduct;
|
|
20753
|
+
var _b = react.useContext(BrandContext), secondaryColor = _b.secondaryColor, brandColor = _b.brandColor;
|
|
20754
|
+
var isMobile = common.useIsMobile();
|
|
20755
|
+
if (!availableBillingPeriods || (availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.length) < 2)
|
|
20756
|
+
return null;
|
|
20757
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-8 pb-6" }, { children: [(products === null || products === void 0 ? void 0 : products.length) && products.length > 1 && (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "font-medium text-xs", style: {
|
|
20758
|
+
color: secondaryColor,
|
|
20759
|
+
} }, { children: "Select product" })), jsxRuntime.jsx(ProductRadioStyled, __assign({ brandColor: brandColor }, { children: jsxRuntime.jsx(antd.Radio.Group, __assign({ onChange: function (e) {
|
|
20760
|
+
onChangeProduct(products === null || products === void 0 ? void 0 : products.find(function (product) { return product.id === e.target.value; }));
|
|
20761
|
+
}, value: selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id, buttonStyle: "solid" }, { children: jsxRuntime.jsx(antd.Space, __assign({ className: "gap-2" }, { children: products === null || products === void 0 ? void 0 : products.map(function (product) { return (jsxRuntime.jsx(antd.Radio.Button, __assign({ value: product.id }, { children: product.name }), product.id)); }) })) })) }))] }))), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full gap-2" }, { children: [!isMobile && (jsxRuntime.jsx("div", __assign({ className: "font-medium text-xs", style: {
|
|
20762
|
+
color: secondaryColor,
|
|
20763
|
+
} }, { children: "Subscription term" }))), jsxRuntime.jsx(StyledRadioGroup, __assign({ className: "w-full", "$isMobile": isMobile }, { children: jsxRuntime.jsx(antd.Radio.Group, __assign({ onChange: function (e) {
|
|
20764
|
+
onChangeBillingPeriod(e.target.value);
|
|
20765
|
+
}, value: selectedBillingPeriod, size: "small", buttonStyle: "solid" }, { children: availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.map(function (periodMonth, index) {
|
|
20766
|
+
return (jsxRuntime.jsx(antd.Radio.Button, __assign({ value: periodMonthsConverter(periodMonth) }, { children: periodMonthsConverter(periodMonth) }), index));
|
|
20767
|
+
}) })) }))] }))] })));
|
|
20768
|
+
};
|
|
20769
|
+
var ProductRadioStyled = styled__default["default"].div.withConfig({
|
|
20770
|
+
shouldForwardProp: function (prop) { return !["brandColor"].includes(prop); },
|
|
20771
|
+
})(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) {
|
|
20772
|
+
return props.brandColor ? props.brandColor : "black";
|
|
20773
|
+
}, function (props) {
|
|
20774
|
+
return props.brandColor ? props.brandColor : "black";
|
|
20775
|
+
});
|
|
20776
|
+
var StyledRadioGroup = styled__default["default"].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"])), common.GRAY_200, function (_a) {
|
|
20777
|
+
var $isMobile = _a.$isMobile;
|
|
20778
|
+
return $isMobile ? "100%" : "min-content";
|
|
20779
|
+
});
|
|
20780
|
+
var templateObject_1$4, templateObject_2;
|
|
20781
|
+
|
|
20782
|
+
var NextPriceListButton = function (_a) {
|
|
20783
|
+
var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart;
|
|
20784
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "absolute flex gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
|
|
20785
|
+
setPriceListStart(function (prev) {
|
|
20786
|
+
var newValue = prev - 1;
|
|
20787
|
+
if (newValue < 0) {
|
|
20788
|
+
return prev;
|
|
20789
|
+
}
|
|
20790
|
+
return newValue;
|
|
20791
|
+
});
|
|
20792
|
+
}, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - 3 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
|
|
20793
|
+
return setPriceListStart(function (prev) {
|
|
20794
|
+
var newValue = prev + 1;
|
|
20795
|
+
if (newValue >= availablePriceLists.length) {
|
|
20796
|
+
return prev;
|
|
20797
|
+
}
|
|
20798
|
+
return newValue;
|
|
20799
|
+
});
|
|
20800
|
+
}, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
|
|
20801
|
+
};
|
|
20802
|
+
|
|
20803
|
+
var getAvailablePlansAndPriceLists = function (_a) {
|
|
20804
|
+
var availablePriceLists = _a.availablePriceLists, planChangeOptions = _a.planChangeOptions, priceListStart = _a.priceListStart;
|
|
20805
|
+
var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + 3);
|
|
20806
|
+
var availablePlansArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (priceList) {
|
|
20807
|
+
var _a;
|
|
20808
|
+
var plan = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.find(function (plan) { return plan.id === priceList.plan.id; });
|
|
20809
|
+
return plan;
|
|
20810
|
+
});
|
|
20811
|
+
return {
|
|
20812
|
+
availablePlansArray: availablePlansArray,
|
|
20813
|
+
displayPriceLists: displayPriceLists,
|
|
20814
|
+
};
|
|
20815
|
+
};
|
|
20816
|
+
var everythingInPlusString = function (_a) {
|
|
20817
|
+
var plan = _a.plan;
|
|
20818
|
+
return "Everything in ".concat(plan.name, ", plus");
|
|
20819
|
+
};
|
|
20820
|
+
|
|
20821
|
+
var PLAN_GRID_PADDING = 4;
|
|
20822
|
+
var PlanPickerGridCell = function (_a) {
|
|
20823
|
+
var children = _a.children, noBorder = _a.noBorder;
|
|
20824
|
+
var isMobile = common.useIsMobile();
|
|
20825
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col", style: isMobile
|
|
20826
|
+
? {}
|
|
20827
|
+
: __assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })) }, { children: [jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: children })), !isMobile && jsxRuntime.jsx(antd.Divider, {})] })));
|
|
20828
|
+
};
|
|
20829
|
+
|
|
20830
|
+
var PriceListCardTitle = function (_a) {
|
|
20831
|
+
var plan = _a.plan, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
|
|
20832
|
+
var isMobile = common.useIsMobile();
|
|
20833
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-4" }, { children: [Boolean(trialRemainingDays) && (jsxRuntime.jsx("div", __assign({ className: "font-medium text-secondary", style: { height: "1rem" } }, { children: isPriceListCurrentSubscription
|
|
20834
|
+
? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
|
|
20835
|
+
: " " }))), jsxRuntime.jsx("div", __assign({ className: "font-medium text-center ".concat(isMobile ? "text-slate-500" : "text-orange-600"), style: { fontSize: "20px" } }, { children: plan.name }))] })));
|
|
20836
|
+
};
|
|
20837
|
+
|
|
20838
|
+
var Text$d = antd.Typography.Text;
|
|
20839
|
+
var PriceListCardDescription = function (_a) {
|
|
20840
|
+
var description = _a.description;
|
|
20841
|
+
if (!description)
|
|
20842
|
+
return null;
|
|
20843
|
+
return jsxRuntime.jsx(Text$d, __assign({ className: "text-center" }, { children: description }));
|
|
20844
|
+
};
|
|
20845
|
+
|
|
20846
|
+
var PriceListCardPrice = function (_a) {
|
|
20847
|
+
var plan = _a.plan, priceList = _a.priceList;
|
|
20848
|
+
return (jsxRuntime.jsx("div", __assign({ className: "font-medium text-center text-gray-900", style: { fontSize: "32px" } }, { children: !plan.pricingStyle || plan.pricingStyle === common.PricingStyle.PRICED
|
|
20849
|
+
? common.formatCurrency(priceList.basePrice, priceList.currencyId, 0)
|
|
20850
|
+
: plan.pricingStyle === common.PricingStyle.CONTACT_US
|
|
20851
|
+
? ""
|
|
20852
|
+
: "Free" })));
|
|
20853
|
+
};
|
|
20854
|
+
|
|
20855
|
+
var Text$c = antd.Typography.Text;
|
|
20856
|
+
var PriceListCardPriceDescription = function (_a) {
|
|
20857
|
+
var feature = _a.feature, plan = _a.plan, priceList = _a.priceList;
|
|
20858
|
+
var isMobile = common.useIsMobile();
|
|
20859
|
+
var doesPlanHaveFlatFeeCharges = plan.priceLists.some(function (priceList) {
|
|
20860
|
+
return priceList.charges.some(function (charge) {
|
|
20861
|
+
return charge.pricingModel === common.PricingModel.FLAT && charge.basePrice > 0;
|
|
20862
|
+
});
|
|
20863
|
+
});
|
|
20864
|
+
if (priceList.periodMonths <= 0 || plan.pricingStyle !== common.PricingStyle.PRICED)
|
|
20865
|
+
return null;
|
|
20866
|
+
return (jsxRuntime.jsx(Text$c, __assign({ className: "text-center text-gray-900", style: {
|
|
20867
|
+
fontSize: isMobile ? "13px" : "12px",
|
|
20868
|
+
} }, { children: plan.pricingDescription
|
|
20869
|
+
? plan.pricingDescription
|
|
20870
|
+
: "per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
|
|
20871
|
+
? "".concat(feature.unitName.toLowerCase(), " / ")
|
|
20872
|
+
: "").concat(common.PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)]) })));
|
|
20873
|
+
};
|
|
20874
|
+
|
|
20875
|
+
var PriceListCardButton = function (_a) {
|
|
20876
|
+
var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, plan = _a.plan, subscriptionPlan = _a.subscriptionPlan;
|
|
20877
|
+
// Context
|
|
20878
|
+
var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
|
|
20879
|
+
var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === plan.id &&
|
|
20880
|
+
!isPriceListCurrentSubscription;
|
|
20881
|
+
var createButtonText = function () {
|
|
20882
|
+
if (isPriceListCurrentSubscription)
|
|
20883
|
+
return "Current";
|
|
20884
|
+
if (isSelected)
|
|
20885
|
+
return "Selected";
|
|
20886
|
+
if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
|
|
20887
|
+
return "Subscribed";
|
|
20888
|
+
if (plan.pricingStyle === common.PricingStyle.CONTACT_US)
|
|
20889
|
+
return plan.contactUsLabel;
|
|
20890
|
+
return "Select";
|
|
20891
|
+
};
|
|
20892
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col grow w-full justify-end" }, { children: jsxRuntime.jsx(StyledCardButton, __assign({ className: "flex justify-center w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: disableOnClick, style: {
|
|
20893
|
+
maxWidth: "240px",
|
|
20894
|
+
}, type: isSelected ? "primary" : "default" }, { children: createButtonText() })) })) })));
|
|
20895
|
+
};
|
|
20896
|
+
var StyledCardButton = styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"], ["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"])), common.SLATE_200, common.SLATE_600);
|
|
20897
|
+
var templateObject_1$3;
|
|
20898
|
+
|
|
20899
|
+
var PriceListCardDesktop = function (_a) {
|
|
20900
|
+
var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, plan = _a.plan, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
|
|
20901
|
+
return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-between w-full rounded-md gap-4 pt-6 px-4 pb-4 ".concat(disableOnClick ? "" : "cursor-pointer"), onClick: function () {
|
|
20902
|
+
if (!disableOnClick) {
|
|
20903
|
+
if (plan.pricingStyle === common.PricingStyle.CONTACT_US) {
|
|
20904
|
+
window.open(plan.contactUsUrl, "_blank");
|
|
20905
|
+
}
|
|
20906
|
+
else
|
|
20907
|
+
onClick(priceList);
|
|
20908
|
+
}
|
|
20909
|
+
}, style: {
|
|
20910
|
+
height: "100%",
|
|
20911
|
+
maxWidth: "440px",
|
|
20912
|
+
} }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, plan: plan, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { plan: plan, priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, plan: plan, priceList: priceList })] }))] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, plan: plan, subscriptionPlan: subscriptionPlan })] })) }));
|
|
20913
|
+
};
|
|
20914
|
+
|
|
20915
|
+
var CheckIcon = function (_a) {
|
|
20916
|
+
var backgroundColor = _a.backgroundColor, size = _a.size;
|
|
20917
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsxRuntime.jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
|
|
20918
|
+
};
|
|
20919
|
+
|
|
20920
|
+
var PriceListCardMobile = function (_a) {
|
|
20921
|
+
var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, plan = _a.plan, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
|
|
20922
|
+
var brandColor = react.useContext(BrandContext).brandColor;
|
|
20923
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col border-2 border-solid rounded-lg p-4", onClick: function () {
|
|
20924
|
+
if (!disableOnClick)
|
|
20925
|
+
onClick(priceList);
|
|
20926
|
+
}, style: {
|
|
20927
|
+
minWidth: "220px",
|
|
20928
|
+
borderColor: isSelected ? brandColor : common.SLATE_200,
|
|
20929
|
+
} }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "absolute", style: {
|
|
20930
|
+
top: "10px",
|
|
20931
|
+
right: "10px",
|
|
20932
|
+
} }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center grow gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, plan: plan, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { plan: plan, priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, plan: plan, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, plan: plan, subscriptionPlan: subscriptionPlan })] }))] })));
|
|
20933
|
+
};
|
|
20934
|
+
|
|
20935
|
+
var PriceListCard = function (_a) {
|
|
20936
|
+
var _b;
|
|
20937
|
+
var isSelected = _a.isSelected, onClick = _a.onClick, plan = _a.plan, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
|
|
20938
|
+
// Context
|
|
20939
|
+
var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
|
|
20940
|
+
var isMobile = common.useIsMobile();
|
|
20941
|
+
if (!plan) {
|
|
20942
|
+
return null;
|
|
20943
|
+
}
|
|
20944
|
+
// Derived state
|
|
20945
|
+
var description = createPlanDescription(plan);
|
|
20946
|
+
// Get the active price list charge for this plan
|
|
20947
|
+
var activeCharge = (_b = getActivePlanPriceData(plan, priceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
|
|
20948
|
+
// Is the price list the current price list for the upgradingSubscription
|
|
20949
|
+
var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
|
|
20950
|
+
var disableOnClick = isPriceListDisabled({
|
|
20951
|
+
priceList: priceList,
|
|
20952
|
+
subscriptions: subscriptions,
|
|
20953
|
+
upgradingSubscription: upgradingSubscription,
|
|
20954
|
+
});
|
|
20955
|
+
var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
|
|
20956
|
+
var _a, _b;
|
|
20957
|
+
return subscription.plan.id === plan.id &&
|
|
20958
|
+
((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== common.SubscriptionState.CANCELED &&
|
|
20959
|
+
((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== common.SubscriptionState.EXPIRED;
|
|
20960
|
+
});
|
|
20961
|
+
if (!activeCharge) {
|
|
20962
|
+
return null;
|
|
20963
|
+
}
|
|
20964
|
+
var feature = activeCharge.feature;
|
|
20965
|
+
return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, plan: plan, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsxRuntime.jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, plan: plan, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
|
|
20966
|
+
};
|
|
20967
|
+
|
|
20968
|
+
var PLANS_TO_DISPLAY = 3;
|
|
20969
|
+
|
|
20970
|
+
var Text$b = antd.Typography.Text;
|
|
20971
|
+
var filterUniqueFeatures = function (_a) {
|
|
20972
|
+
// Remove any features that in previous plans if everythingInPlus is true
|
|
20973
|
+
var availablePlansArray = _a.availablePlansArray;
|
|
20974
|
+
var uniqueFeatures = new Set();
|
|
20975
|
+
var updatedPlansArray = availablePlansArray.map(function (plan) {
|
|
20976
|
+
var _a;
|
|
20977
|
+
var updatedPlanFeatures = (_a = plan.planFeatures) === null || _a === void 0 ? void 0 : _a.filter(function (feature) {
|
|
20978
|
+
if (uniqueFeatures.has(feature.featureId)) {
|
|
20979
|
+
return false;
|
|
20980
|
+
}
|
|
20981
|
+
else {
|
|
20982
|
+
uniqueFeatures.add(feature.featureId);
|
|
20983
|
+
return true;
|
|
20984
|
+
}
|
|
20985
|
+
});
|
|
20986
|
+
return __assign(__assign({}, plan), { planFeatures: updatedPlanFeatures });
|
|
20987
|
+
});
|
|
20988
|
+
return updatedPlansArray;
|
|
20989
|
+
};
|
|
20990
|
+
var EverythingPlanFeatures = function (_a) {
|
|
20991
|
+
var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct;
|
|
20992
|
+
var brandColor = react.useContext(BrandContext).brandColor;
|
|
20993
|
+
var uniquePlanFeatures = filterUniqueFeatures({ availablePlansArray: availablePlansArray });
|
|
20994
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, planIndex) {
|
|
20995
|
+
var plan = uniquePlanFeatures[planIndex];
|
|
20996
|
+
var prevPlan = availablePlansArray[planIndex - 1];
|
|
20997
|
+
if (!plan)
|
|
20998
|
+
return (jsxRuntime.jsx("div", { style: prevPlan ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
|
|
20999
|
+
if (!plan.planFeatures)
|
|
21000
|
+
return jsxRuntime.jsx("div", {}, planIndex);
|
|
21001
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: plan.planFeatures.map(function (planFeature, planFeatureIndex) {
|
|
21002
|
+
var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
|
|
21003
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [prevPlan &&
|
|
21004
|
+
everythingInPlus &&
|
|
21005
|
+
planIndex > 0 &&
|
|
21006
|
+
planFeatureIndex === 0 && (jsxRuntime.jsx(Text$b, __assign({ className: "font-medium", style: { fontSize: "13px" } }, { children: everythingInPlusString({ plan: prevPlan }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex gap-1 text-gray-600", style: { fontSize: "13px" } }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$b, { children: planFeature.feature.name })] }))] }), planFeatureIndex));
|
|
21007
|
+
}) }), planIndex));
|
|
21008
|
+
}) }));
|
|
21009
|
+
};
|
|
21010
|
+
|
|
21011
|
+
var shouldColorRow = function (_a) {
|
|
21012
|
+
var isFeatureGroup = _a.isFeatureGroup, rowIndex = _a.rowIndex;
|
|
21013
|
+
return !isFeatureGroup && rowIndex % 2 === 1;
|
|
21014
|
+
};
|
|
21015
|
+
var FeatureGridCell = function (_a) {
|
|
21016
|
+
var children = _a.children, isFeatureGroup = _a.isFeatureGroup, noBorder = _a.noBorder, rowIndex = _a.rowIndex;
|
|
21017
|
+
return (jsxRuntime.jsx("div", __assign({ className: "px-".concat(PLAN_GRID_PADDING, " py-2"), style: __assign(__assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })), (shouldColorRow({
|
|
21018
|
+
isFeatureGroup: isFeatureGroup,
|
|
21019
|
+
rowIndex: rowIndex,
|
|
21020
|
+
})
|
|
21021
|
+
? { backgroundColor: common.SLATE_100 }
|
|
21022
|
+
: {})) }, { children: children })));
|
|
21023
|
+
};
|
|
21024
|
+
|
|
21025
|
+
var Text$a = antd.Typography.Text;
|
|
21026
|
+
var PlanFeatures = function (_a) {
|
|
21027
|
+
var _b;
|
|
21028
|
+
var availablePlansArray = _a.availablePlansArray, plans = _a.plans, selectedProduct = _a.selectedProduct;
|
|
21029
|
+
var featureGroupCounter = react.useRef(0);
|
|
21030
|
+
var visibleFeatureCounter = react.useRef(1);
|
|
21031
|
+
var brandColor = react.useContext(BrandContext).brandColor;
|
|
21032
|
+
if (!plans)
|
|
21033
|
+
return null;
|
|
21034
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_b = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.features) === null || _b === void 0 ? void 0 : _b.map(function (feature, featureIndex) {
|
|
21035
|
+
if (!selectedProduct.features)
|
|
21036
|
+
return null;
|
|
21037
|
+
var isFeatureGroup = (feature === null || feature === void 0 ? void 0 : feature.kind) === "GROUP";
|
|
21038
|
+
if (!feature.isVisible)
|
|
21039
|
+
return null;
|
|
21040
|
+
// Initialize the feature group counter and the visible feature counter
|
|
21041
|
+
if (featureIndex === 0) {
|
|
21042
|
+
featureGroupCounter.current = 0;
|
|
21043
|
+
visibleFeatureCounter.current = 1;
|
|
21044
|
+
}
|
|
21045
|
+
var rowIndex = visibleFeatureCounter.current;
|
|
21046
|
+
// Increment the feature group counter if the feature is a group
|
|
21047
|
+
if (isFeatureGroup) {
|
|
21048
|
+
if (rowIndex % 2 === 1)
|
|
21049
|
+
featureGroupCounter.current = featureGroupCounter.current + 1;
|
|
21050
|
+
}
|
|
21051
|
+
// Increment the row index by the feature group counter
|
|
21052
|
+
rowIndex = rowIndex + featureGroupCounter.current;
|
|
21053
|
+
// Increment the visible feature counter
|
|
21054
|
+
visibleFeatureCounter.current = visibleFeatureCounter.current + 1;
|
|
21055
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsxRuntime.jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, columnIndex) {
|
|
21056
|
+
var _a;
|
|
21057
|
+
var plan = availablePlansArray[columnIndex];
|
|
21058
|
+
var doesHavePrevPlan = availablePlansArray[columnIndex - 1];
|
|
21059
|
+
columnIndex = columnIndex + 1;
|
|
21060
|
+
// Check if the plan has the feature
|
|
21061
|
+
var planFeature = (_a = plan === null || plan === void 0 ? void 0 : plan.planFeatures) === null || _a === void 0 ? void 0 : _a.find(function (f) { return f.featureId === (feature === null || feature === void 0 ? void 0 : feature.id); });
|
|
21062
|
+
if (!plan)
|
|
21063
|
+
return (jsxRuntime.jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
|
|
21064
|
+
if (isFeatureGroup)
|
|
21065
|
+
return (jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex));
|
|
21066
|
+
return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "flex justify-center text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$a, __assign({ className: "text-gray" }, { children: "-" }))) })) }), columnIndex));
|
|
21067
|
+
})] }), rowIndex));
|
|
21068
|
+
}) }));
|
|
21069
|
+
};
|
|
21070
|
+
var FeatureTitle = function (_a) {
|
|
21071
|
+
var _b;
|
|
21072
|
+
var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
|
|
21073
|
+
return (jsxRuntime.jsx(Text$a, __assign({ className: " ".concat(isFeatureGroup ? "text-slate-500 font-medium pt-4" : ""), style: __assign({}, (isFeatureGroup ? { fontSize: "11px" } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
|
|
21074
|
+
};
|
|
21075
|
+
|
|
21076
|
+
var PriceListGridDesktop = function (_a) {
|
|
21077
|
+
var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, priceListStart = _a.priceListStart, selectedPlan = _a.selectedPlan, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
|
|
21078
|
+
// Context
|
|
21079
|
+
var shadow = react.useContext(SubscriptionsContext).shadow;
|
|
21080
|
+
var _b = react.useMemo(function () {
|
|
21081
|
+
return getAvailablePlansAndPriceLists({
|
|
21082
|
+
availablePriceLists: availablePriceLists,
|
|
21083
|
+
planChangeOptions: planChangeOptions,
|
|
21084
|
+
priceListStart: priceListStart,
|
|
21085
|
+
});
|
|
21086
|
+
}, [availablePriceLists, planChangeOptions, priceListStart]), availablePlansArray = _b.availablePlansArray, displayPriceLists = _b.displayPriceLists;
|
|
21087
|
+
var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
|
|
21088
|
+
return (jsxRuntime.jsx("div", __assign({ className: "" }, { children: jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col h-full rounded-md overflow-hidden bg-white ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "grid w-full", style: {
|
|
21089
|
+
gridTemplateColumns: everythingInPlus
|
|
21090
|
+
? "repeat(3, minmax(120px, 1fr))"
|
|
21091
|
+
: "minmax(auto, 400px) repeat(3, minmax(120px, 1fr))",
|
|
21092
|
+
} }, { children: [!everythingInPlus && jsxRuntime.jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, index) {
|
|
21093
|
+
var _a;
|
|
21094
|
+
var priceList = displayPriceLists[index];
|
|
21095
|
+
var doesPrevPriceListExist = displayPriceLists[index - 1];
|
|
21096
|
+
if (!priceList)
|
|
21097
|
+
return (jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index));
|
|
21098
|
+
var plan = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.find(function (plan) { return plan.id === priceList.plan.id; });
|
|
21099
|
+
return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.id), onClick: onChangePriceList, plan: plan, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
|
|
21100
|
+
}), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { availablePlansArray: availablePlansArray, selectedProduct: selectedProduct })) : (jsxRuntime.jsx(PlanFeatures, { availablePlansArray: availablePlansArray, plans: planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct: selectedProduct }))] }))] })) })));
|
|
21101
|
+
};
|
|
21102
|
+
|
|
21103
|
+
var Text$9 = antd.Typography.Text;
|
|
21104
|
+
var PriceListCardFeature = function (_a) {
|
|
21105
|
+
var feature = _a.feature, index = _a.index;
|
|
21106
|
+
var brandColor = react.useContext(BrandContext).brandColor;
|
|
21107
|
+
if (feature.kind === "GROUP")
|
|
21108
|
+
return jsxRuntime.jsx(Text$9, __assign({ className: "font-medium base-text" }, { children: feature.name }));
|
|
21109
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$9, __assign({ className: "text-gray-600" }, { children: feature.name }))] }), index));
|
|
21110
|
+
};
|
|
21111
|
+
|
|
21112
|
+
var Text$8 = antd.Typography.Text;
|
|
21113
|
+
var PriceListGridMobile = function (_a) {
|
|
21114
|
+
var _b, _c, _d;
|
|
21115
|
+
var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, selectedPlan = _a.selectedPlan, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
|
|
21116
|
+
var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
|
|
21117
|
+
var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.plan.id === (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.id); });
|
|
21118
|
+
var prevPlanId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.plan.id;
|
|
21119
|
+
var prevPlan = (_c = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _c === void 0 ? void 0 : _c.find(function (plan) { return plan.id === prevPlanId; });
|
|
21120
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex gap-4 overflow-auto shadow-padding-xb", style: { flexShrink: 0 } }, { children: availablePriceLists.map(function (priceList, index) {
|
|
21121
|
+
var _a;
|
|
21122
|
+
var plan = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.find(function (plan) { return plan.id === priceList.plan.id; });
|
|
21123
|
+
return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.id), onClick: onChangePriceList, plan: plan, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
|
|
21124
|
+
}) })), jsxRuntime.jsx(Text$8, __assign({ className: "text-slate-500 pt-5 pb-4 shadow-padding-x" }, { children: everythingInPlus && prevPlan
|
|
21125
|
+
? everythingInPlusString({ plan: prevPlan })
|
|
21126
|
+
: "Features" })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 overflow-auto shadow-padding-x" }, { children: (_d = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.features) === null || _d === void 0 ? void 0 : _d.map(function (feature, index) { return (jsxRuntime.jsx(PriceListCardFeature, { feature: feature, index: index }, index)); }) }))] }));
|
|
21127
|
+
};
|
|
21128
|
+
|
|
21129
|
+
var PriceListGrid = function (_a) {
|
|
21130
|
+
var _b, _c;
|
|
21131
|
+
var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, upgradingSubscriptionState = _a.upgradingSubscriptionState;
|
|
21132
|
+
// Hooks
|
|
21133
|
+
var isMobile = common.useIsMobile();
|
|
21134
|
+
// Derived state
|
|
21135
|
+
var currentPlan = (_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.find(function (plan) { return plan.id === (upgradingSubscriptionState === null || upgradingSubscriptionState === void 0 ? void 0 : upgradingSubscriptionState.plan.id); });
|
|
21136
|
+
var selectedPlan = (_c = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _c === void 0 ? void 0 : _c.find(function (plan) { return plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id); });
|
|
21137
|
+
var trialRemainingDays = dayjs(currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.trialEndDate).diff(dayjs(), "days");
|
|
21138
|
+
return isMobile ? (jsxRuntime.jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, selectedPlan: selectedPlan, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsxRuntime.jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, priceListStart: priceListStart, selectedPlan: selectedPlan, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }));
|
|
21139
|
+
};
|
|
21140
|
+
|
|
21141
|
+
var createAvailableBillingPeriods = function (plans, selectedProduct) {
|
|
21142
|
+
return plans === null || plans === void 0 ? void 0 : plans.flatMap(function (plan) {
|
|
21143
|
+
return plan.priceLists
|
|
21144
|
+
.filter(function (priceList) { return priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id); })
|
|
21145
|
+
.map(function (priceList) { return priceList.periodMonths; });
|
|
21146
|
+
}).sort(function (a, b) { return a - b; }).filter(function (currentValue, index, array) { return index === array.indexOf(currentValue); });
|
|
21147
|
+
};
|
|
21148
|
+
var PriceListSelector = function (_a) {
|
|
21149
|
+
var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
|
|
21150
|
+
// Context
|
|
21151
|
+
var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
|
|
21152
|
+
// Local state
|
|
21153
|
+
var _c = react.useState(), selectedProduct = _c[0], setSelectedProduct = _c[1];
|
|
21154
|
+
var _d = react.useState(), selectedBillingPeriod = _d[0], setSelectedBillingPeriod = _d[1];
|
|
21155
|
+
var _e = react.useState(0), priceListStart = _e[0], setPriceListStart = _e[1];
|
|
21156
|
+
// Derived state
|
|
21157
|
+
var availableBillingPeriods = react.useMemo(function () {
|
|
21158
|
+
return createAvailableBillingPeriods(planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct);
|
|
21159
|
+
}, [planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct]);
|
|
21160
|
+
var availablePriceLists = react.useMemo(function () {
|
|
21161
|
+
var _a;
|
|
21162
|
+
return (((_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.flatMap(function (plan) {
|
|
21163
|
+
return plan.priceLists.filter(function (priceList) {
|
|
21164
|
+
return periodMonthsConverter(priceList.periodMonths) ===
|
|
21165
|
+
selectedBillingPeriod &&
|
|
21166
|
+
priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id);
|
|
21167
|
+
});
|
|
21168
|
+
})) || []);
|
|
21169
|
+
}, [planChangeOptions, selectedBillingPeriod, selectedProduct]);
|
|
21170
|
+
// Handlers
|
|
21171
|
+
var onChangeBillingPeriod = react.useCallback(function (billingPeriod) {
|
|
21172
|
+
var _a, _b;
|
|
21173
|
+
setSelectedBillingPeriod(billingPeriod);
|
|
21174
|
+
setPriceListStart(0);
|
|
21175
|
+
if ((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) &&
|
|
21176
|
+
billingPeriod !==
|
|
21177
|
+
periodMonthsConverter((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.periodMonths)) {
|
|
21178
|
+
var availablePriceLists_1 = ((_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.flatMap(function (plan) {
|
|
21179
|
+
return plan.priceLists.filter(function (priceList) {
|
|
21180
|
+
return periodMonthsConverter(priceList.periodMonths) === billingPeriod;
|
|
21181
|
+
});
|
|
21182
|
+
})) || [];
|
|
21183
|
+
var newSelectedPriceList = availablePriceLists_1.find(function (priceList) {
|
|
21184
|
+
var _a;
|
|
21185
|
+
return periodMonthsConverter(priceList.periodMonths) === billingPeriod &&
|
|
21186
|
+
priceList.plan.id === ((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.plan.id) &&
|
|
21187
|
+
!isPriceListDisabled({
|
|
21188
|
+
priceList: priceList,
|
|
21189
|
+
subscriptions: subscriptions,
|
|
21190
|
+
upgradingSubscription: upgradingSubscription,
|
|
21191
|
+
});
|
|
21192
|
+
});
|
|
21193
|
+
var isPriceListCurrentSubscription = newSelectedPriceList &&
|
|
21194
|
+
(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
|
|
21195
|
+
if (newSelectedPriceList && !isPriceListCurrentSubscription) {
|
|
21196
|
+
setQuotePreviewData({
|
|
21197
|
+
priceList: newSelectedPriceList,
|
|
21198
|
+
quantity: calculateNewQuantity(newSelectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
|
|
21199
|
+
});
|
|
21200
|
+
}
|
|
21201
|
+
else if (isPriceListCurrentSubscription) {
|
|
21202
|
+
setQuotePreviewData({
|
|
21203
|
+
quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
|
|
21204
|
+
});
|
|
21205
|
+
}
|
|
21206
|
+
}
|
|
21207
|
+
}, [
|
|
21208
|
+
quotePreviewData,
|
|
21209
|
+
planChangeOptions,
|
|
21210
|
+
subscriptions,
|
|
21211
|
+
upgradingSubscription,
|
|
21212
|
+
setQuotePreviewData,
|
|
21213
|
+
]);
|
|
21214
|
+
var onChangeProduct = react.useCallback(function (product) {
|
|
21215
|
+
var newAvailableBillingPeriods = createAvailableBillingPeriods(planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, product);
|
|
21216
|
+
if (!(newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods.includes(billingPeriodConverter(selectedBillingPeriod)))) {
|
|
21217
|
+
onChangeBillingPeriod(periodMonthsConverter((newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods[0]) !== undefined
|
|
21218
|
+
? newAvailableBillingPeriods[0]
|
|
21219
|
+
: 1));
|
|
21220
|
+
}
|
|
21221
|
+
setSelectedProduct(product);
|
|
21222
|
+
}, [planChangeOptions, selectedBillingPeriod, onChangeBillingPeriod]);
|
|
21223
|
+
// Default settings
|
|
21224
|
+
react.useEffect(function () {
|
|
21225
|
+
var _a, _b, _c, _d;
|
|
21226
|
+
if (arePlanChangeOptionsLoading ||
|
|
21227
|
+
areSubscriptionsLoading ||
|
|
21228
|
+
!planChangeOptions ||
|
|
21229
|
+
selectedBillingPeriod ||
|
|
21230
|
+
selectedProduct ||
|
|
21231
|
+
selectedPriceList)
|
|
21232
|
+
return;
|
|
21233
|
+
var initialProduct = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.products) === null || _a === void 0 ? void 0 : _a[0];
|
|
21234
|
+
var initialAvailableBillingPeriods = createAvailableBillingPeriods(planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, initialProduct);
|
|
21235
|
+
var initialBillingPeriod;
|
|
21236
|
+
if ((upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) &&
|
|
21237
|
+
(initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods.includes(billingPeriodConverter(periodMonthsConverter(upgradingSubscription.priceList.periodMonths))))) {
|
|
21238
|
+
initialBillingPeriod = periodMonthsConverter(upgradingSubscription.priceList.periodMonths);
|
|
21239
|
+
}
|
|
21240
|
+
else {
|
|
21241
|
+
initialBillingPeriod = periodMonthsConverter((initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods[0]) || 1);
|
|
21242
|
+
}
|
|
21243
|
+
var initialAvailablePriceLists = ((_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.flatMap(function (plan) {
|
|
21244
|
+
return plan.priceLists.filter(function (priceList) {
|
|
21245
|
+
return periodMonthsConverter(priceList.periodMonths) ===
|
|
21246
|
+
initialBillingPeriod &&
|
|
21247
|
+
priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
|
|
21248
|
+
});
|
|
21249
|
+
})) || [];
|
|
21250
|
+
var initialPriceList;
|
|
21251
|
+
var initialQuantity = (_d = (_c = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.quantity;
|
|
21252
|
+
if (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) {
|
|
21253
|
+
initialPriceList = initialAvailablePriceLists.find(function (priceList) { return priceList.id === upgradingSubscription.priceList.id; });
|
|
21254
|
+
}
|
|
21255
|
+
if (initialBillingPeriod)
|
|
21256
|
+
setSelectedBillingPeriod(initialBillingPeriod);
|
|
21257
|
+
if (initialProduct)
|
|
21258
|
+
setSelectedProduct(initialProduct);
|
|
21259
|
+
if (initialPriceList &&
|
|
21260
|
+
!isInPreviewMode &&
|
|
21261
|
+
!isPriceListDisabled({
|
|
21262
|
+
priceList: initialPriceList,
|
|
21263
|
+
subscriptions: subscriptions,
|
|
21264
|
+
upgradingSubscription: upgradingSubscription,
|
|
21265
|
+
})) {
|
|
21266
|
+
setQuotePreviewData({
|
|
21267
|
+
priceList: initialPriceList,
|
|
21268
|
+
quantity: calculateNewQuantity(initialPriceList, initialQuantity),
|
|
21269
|
+
});
|
|
21270
|
+
}
|
|
21271
|
+
}, [
|
|
21272
|
+
arePlanChangeOptionsLoading,
|
|
21273
|
+
areSubscriptionsLoading,
|
|
21274
|
+
isInPreviewMode,
|
|
21275
|
+
planChangeOptions,
|
|
21276
|
+
selectedBillingPeriod,
|
|
21277
|
+
selectedPriceList,
|
|
21278
|
+
selectedProduct,
|
|
21279
|
+
setQuotePreviewData,
|
|
21280
|
+
subscriptions,
|
|
21281
|
+
upgradingSubscription,
|
|
21282
|
+
]);
|
|
21283
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsxRuntime.jsx(PriceListGrid, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription })] }));
|
|
21284
|
+
};
|
|
21285
|
+
|
|
21286
|
+
var PlanPicker = function () {
|
|
21287
|
+
var _a;
|
|
21288
|
+
// Context
|
|
21289
|
+
var token = useToken();
|
|
21290
|
+
var apiHost = react.useContext(BunnyContext).apiHost;
|
|
21291
|
+
var _b = react.useContext(SubscriptionsContext), entityId = _b.entityId, isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData, upgradingSubscription = _b.upgradingSubscription;
|
|
21292
|
+
// Hooks
|
|
21293
|
+
var queryClient = reactQuery.useQueryClient();
|
|
21294
|
+
var showInfoNotification = common.useInfoNotification();
|
|
21295
|
+
// Queries
|
|
21296
|
+
var _c = reactQuery.useQuery({
|
|
21297
|
+
queryKey: common.QueryKeyFactory.default.createTableKey({
|
|
21298
|
+
filterString: "entityId=".concat(entityId),
|
|
21299
|
+
pluralType: "subscriptions",
|
|
21300
|
+
token: token,
|
|
21301
|
+
}),
|
|
21302
|
+
queryFn: function () {
|
|
21303
|
+
return getSubscriptions({ entityId: entityId, isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost });
|
|
21304
|
+
},
|
|
21305
|
+
enabled: Boolean(entityId),
|
|
21306
|
+
}), subscriptions = _c.data, areSubscriptionsLoading = _c.isLoading;
|
|
21307
|
+
var _d = reactQuery.useQuery({
|
|
21308
|
+
queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({
|
|
21309
|
+
subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
|
|
21310
|
+
token: token,
|
|
21311
|
+
}),
|
|
21312
|
+
queryFn: function () {
|
|
21313
|
+
return getPlanChangeOptions({
|
|
21314
|
+
isInPreviewMode: isInPreviewMode,
|
|
21315
|
+
token: token,
|
|
21316
|
+
upgradingSubscription: upgradingSubscription,
|
|
21317
|
+
apiHost: apiHost,
|
|
21318
|
+
});
|
|
21319
|
+
},
|
|
21320
|
+
enabled: !areSubscriptionsLoading,
|
|
21321
|
+
}), data = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
|
|
21322
|
+
var previewDataQuery = reactQuery.useQuery({
|
|
21323
|
+
queryKey: common.QueryKeyFactory.default.createTableKey({
|
|
21324
|
+
pluralType: "portalPreview",
|
|
21325
|
+
filterString: productId || "",
|
|
21326
|
+
token: token,
|
|
21327
|
+
}),
|
|
21328
|
+
queryFn: function () { return getPortalPreviewData(productId || "", apiHost, token); },
|
|
21329
|
+
enabled: isInPreviewMode,
|
|
21330
|
+
});
|
|
21331
|
+
var planChangeOptions = react.useMemo(function () {
|
|
21332
|
+
return isInPreviewMode ? previewDataQuery.data : data;
|
|
21333
|
+
}, [isInPreviewMode, previewDataQuery.data, data]);
|
|
21334
|
+
// Handlers
|
|
21335
|
+
var onChangePriceList = react.useCallback(function (selectedPriceList) {
|
|
21336
|
+
if (isInPreviewMode)
|
|
21337
|
+
return showInfoNotification("You are in preview mode");
|
|
21338
|
+
return setQuotePreviewData({
|
|
21339
|
+
priceList: selectedPriceList,
|
|
21340
|
+
quantity: calculateNewQuantity(selectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
|
|
21341
|
+
});
|
|
21342
|
+
}, [isInPreviewMode, setQuotePreviewData, showInfoNotification]);
|
|
21343
|
+
// Reset quote preview data when the plan picker is unmounted
|
|
21344
|
+
react.useEffect(function () {
|
|
21345
|
+
return function () {
|
|
21346
|
+
setQuotePreviewData({});
|
|
21347
|
+
};
|
|
21348
|
+
}, [setQuotePreviewData]);
|
|
21349
|
+
if (queryClient.getQueryData(common.QueryKeyFactory.default.planChangeOptionsKey({
|
|
21350
|
+
subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
|
|
21351
|
+
token: token,
|
|
21352
|
+
})) === undefined) {
|
|
21353
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
21354
|
+
}
|
|
21355
|
+
else if (((_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.length) === 0) {
|
|
21356
|
+
return jsxRuntime.jsx(ErrorView, { message: "There are no plans available" });
|
|
21357
|
+
}
|
|
21358
|
+
return (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
|
|
21359
|
+
};
|
|
21360
|
+
|
|
21361
|
+
var Text$7 = antd.Typography.Text;
|
|
21362
|
+
var PreviewModeAdvisary = function (_a) {
|
|
21363
|
+
var isInPreviewMode = _a.isInPreviewMode;
|
|
21364
|
+
if (!isInPreviewMode)
|
|
21365
|
+
return null;
|
|
21366
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex justify-center w-full rounded" }, { children: jsxRuntime.jsx(Text$7, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
|
|
21367
|
+
};
|
|
21368
|
+
|
|
21369
|
+
var PlanManager = function (_a) {
|
|
21370
|
+
var onChangePlanCancel = _a.onChangePlanCancel, handlePortalErrors = _a.handlePortalErrors;
|
|
21371
|
+
// Context
|
|
21372
|
+
var token = useToken();
|
|
21373
|
+
var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
|
|
21374
|
+
var _c = react.useContext(SubscriptionsContext), entityId = _c.entityId, isInPreviewMode = _c.isInPreviewMode, upgradingSubscription = _c.upgradingSubscription, setUpgradingSubscription = _c.setUpgradingSubscription, subscriptionUpgradeId = _c.subscriptionUpgradeId, setQuotePreviewData = _c.setQuotePreviewData, quotePreviewData = _c.quotePreviewData, className = _c.className;
|
|
21375
|
+
// Local state
|
|
21376
|
+
var _d = react.useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
|
|
21377
|
+
var _e = react.useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
|
|
21378
|
+
var _f = react.useState(false), isSticky = _f[0], setIsSticky = _f[1];
|
|
21379
|
+
var stickyRef = react.useRef(null);
|
|
21380
|
+
// Hooks
|
|
21381
|
+
var queryClient = reactQuery.useQueryClient();
|
|
21382
|
+
var showSuccessNotification = common.useSuccessNotification();
|
|
21383
|
+
var showInfoNotification = common.useInfoNotification();
|
|
21384
|
+
var isMobile = common.useIsMobile();
|
|
21385
|
+
var storedPaymentMethod = usePaymentMethod({
|
|
21386
|
+
graphQLClient: graphQLClient,
|
|
21387
|
+
token: token,
|
|
21388
|
+
}).data;
|
|
21389
|
+
// Queries
|
|
21390
|
+
var _g = reactQuery.useQuery({
|
|
21391
|
+
queryKey: common.QueryKeyFactory.default.createTableKey({
|
|
21392
|
+
filterString: "entityId=".concat(entityId),
|
|
21393
|
+
pluralType: "subscriptions",
|
|
21394
|
+
token: token,
|
|
21395
|
+
}),
|
|
21396
|
+
queryFn: function () {
|
|
21397
|
+
return getSubscriptions({ entityId: entityId, isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost });
|
|
21398
|
+
},
|
|
21399
|
+
enabled: Boolean(entityId),
|
|
21400
|
+
}), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
|
|
21401
|
+
var quote = reactQuery.useQuery({
|
|
21402
|
+
queryKey: common.QueryKeyFactory.default.createObjectKey({
|
|
21403
|
+
id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
|
|
21404
|
+
objectName: "editingQuote",
|
|
21405
|
+
token: token,
|
|
21406
|
+
}),
|
|
21407
|
+
queryFn: function () {
|
|
21408
|
+
return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id)
|
|
21409
|
+
? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost })
|
|
21410
|
+
: undefined;
|
|
21411
|
+
},
|
|
21412
|
+
enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
|
|
21413
|
+
}).data;
|
|
21414
|
+
react.useEffect(function () {
|
|
21415
|
+
if (subscriptionUpgradeId && !upgradingSubscription) {
|
|
21416
|
+
var subscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
|
|
21417
|
+
return subscription.id === subscriptionUpgradeId;
|
|
21418
|
+
});
|
|
21419
|
+
setUpgradingSubscription(subscription);
|
|
21420
|
+
}
|
|
21421
|
+
}, [
|
|
21422
|
+
setUpgradingSubscription,
|
|
21423
|
+
subscriptionUpgradeId,
|
|
21424
|
+
subscriptions,
|
|
21425
|
+
upgradingSubscription,
|
|
21426
|
+
]);
|
|
21427
|
+
react.useEffect(function () {
|
|
21428
|
+
var observer = new IntersectionObserver(function (_a) {
|
|
21429
|
+
var entry = _a[0];
|
|
21430
|
+
setIsSticky(!entry.isIntersecting);
|
|
21431
|
+
}, {
|
|
21432
|
+
root: null,
|
|
21433
|
+
// 300px margin from top so that we don't transition to sticky when scrolling up to PlanPickerCheckoutBar from bottom of page
|
|
21434
|
+
// 20px margin from bottom so PlanPickerCheckoutBar resizes at the right time
|
|
21435
|
+
rootMargin: "300px 0px -20px 0px",
|
|
21436
|
+
threshold: 1.0,
|
|
21437
|
+
});
|
|
21438
|
+
var el = stickyRef.current;
|
|
21439
|
+
if (el)
|
|
21440
|
+
observer.observe(el);
|
|
21441
|
+
return function () {
|
|
21442
|
+
if (el)
|
|
21443
|
+
observer.unobserve(el);
|
|
21444
|
+
};
|
|
21445
|
+
}, []);
|
|
21446
|
+
// Handlers
|
|
21447
|
+
var onSuccess = function () {
|
|
21448
|
+
setEditingQuoteData(undefined);
|
|
21449
|
+
queryClient.invalidateQueries({
|
|
21450
|
+
queryKey: common.QueryKeyFactory.default.transactionsKey({ token: token }),
|
|
21451
|
+
});
|
|
21452
|
+
queryClient.invalidateQueries({
|
|
21453
|
+
queryKey: common.QueryKeyFactory.default.createTableKey({
|
|
21454
|
+
filterString: "entityId=".concat(entityId),
|
|
21455
|
+
pluralType: "subscriptions",
|
|
21456
|
+
token: token,
|
|
21457
|
+
}),
|
|
21458
|
+
});
|
|
21459
|
+
showSuccessNotification("Your plan has been updated", "Payment successful");
|
|
21460
|
+
setPayModalVisible(false);
|
|
21461
|
+
};
|
|
21462
|
+
var onCancel = function () {
|
|
21463
|
+
setPayModalVisible(false);
|
|
21464
|
+
};
|
|
21465
|
+
var onFail = function (error) {
|
|
21466
|
+
handlePortalErrors(error);
|
|
21467
|
+
};
|
|
21468
|
+
if (subscriptionsAreLoading && !isInPreviewMode)
|
|
21469
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
21470
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className, " px-8") }, { children: [jsxRuntime.jsx(PreviewModeAdvisary, { isInPreviewMode: isInPreviewMode }), jsxRuntime.jsx(PageTitle, { onGoBack: function () {
|
|
21471
|
+
if (isInPreviewMode)
|
|
21472
|
+
return showInfoNotification("You are in preview mode");
|
|
21473
|
+
setQuotePreviewData(undefined);
|
|
21474
|
+
onChangePlanCancel();
|
|
21475
|
+
}, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { entityId: entityId, onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: storedPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "sticky bottom-4 transition-[margin] duration-300 ".concat(isSticky ? "mx-4" : "mx-0") }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) })), jsxRuntime.jsx(Footer, {})] })));
|
|
20105
21476
|
};
|
|
20106
21477
|
|
|
20107
|
-
var
|
|
20108
|
-
var
|
|
20109
|
-
|
|
20110
|
-
|
|
20111
|
-
var
|
|
20112
|
-
|
|
20113
|
-
|
|
20114
|
-
|
|
20115
|
-
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
20116
|
-
isInPreviewMode: isInPreviewMode,
|
|
20117
|
-
query: SUBSCRIPTIONS_QUERY,
|
|
20118
|
-
token: token,
|
|
20119
|
-
vars: { entityId: entityId },
|
|
20120
|
-
apiHost: apiHost,
|
|
20121
|
-
})];
|
|
21478
|
+
var useCancelSubscription = function () {
|
|
21479
|
+
var graphQLRequest = useGraphQLRequest();
|
|
21480
|
+
return function (subscriptionIds, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
|
|
21481
|
+
var data;
|
|
21482
|
+
var _a;
|
|
21483
|
+
return __generator(this, function (_b) {
|
|
21484
|
+
switch (_b.label) {
|
|
21485
|
+
case 0: return [4 /*yield*/, graphQLRequest("\n mutation SubscriptionCancel($subscriptionIds: [ID!]!) {\n subscriptionCancel(ids: $subscriptionIds) {\n subscriptions {\n accountId\n state\n }\n }\n }", token, apiHost, { subscriptionIds: subscriptionIds })];
|
|
20122
21486
|
case 1:
|
|
20123
|
-
|
|
20124
|
-
|
|
20125
|
-
return [2 /*return*/, combinedSubscriptions];
|
|
21487
|
+
data = _b.sent();
|
|
21488
|
+
return [2 /*return*/, (_a = data === null || data === void 0 ? void 0 : data.subscriptions) === null || _a === void 0 ? void 0 : _a.nodes];
|
|
20126
21489
|
}
|
|
20127
21490
|
});
|
|
20128
|
-
});
|
|
20129
|
-
};
|
|
20130
|
-
|
|
20131
|
-
var ErrorView = function (_a) {
|
|
20132
|
-
var children = _a.children, message = _a.message;
|
|
20133
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsxRuntime.jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
|
|
21491
|
+
}); };
|
|
20134
21492
|
};
|
|
20135
21493
|
|
|
20136
|
-
var SubscriptionsContext = react.createContext({});
|
|
20137
|
-
|
|
20138
21494
|
var SubscriptionState;
|
|
20139
21495
|
(function (SubscriptionState) {
|
|
20140
21496
|
SubscriptionState["ACTIVE"] = "ACTIVE";
|
|
@@ -20174,7 +21530,7 @@ var getFeatureUsage = function (_a) {
|
|
|
20174
21530
|
});
|
|
20175
21531
|
};
|
|
20176
21532
|
|
|
20177
|
-
var StyledModal = defaultStyled(antd.Modal)(templateObject_1$
|
|
21533
|
+
var StyledModal = defaultStyled(antd.Modal)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n z-index: 2000;\n\n .ant-modal-content {\n overflow: hidden;\n padding: 0 !important;\n }\n .ant-modal-body {\n height: min-content;\n max-height: ", ";\n overflow: auto;\n display: flex;\n flex-direction: column;\n padding: 0;\n }\n .ant-modal-footer {\n padding: 0 1.5rem 1.5rem;\n }\n"], ["\n z-index: 2000;\n\n .ant-modal-content {\n overflow: hidden;\n padding: 0 !important;\n }\n .ant-modal-body {\n height: min-content;\n max-height: ", ";\n overflow: auto;\n display: flex;\n flex-direction: column;\n padding: 0;\n }\n .ant-modal-footer {\n padding: 0 1.5rem 1.5rem;\n }\n"])), common.MODAL_MAX_HEIGHT);
|
|
20178
21534
|
var HeaderModalWrapper = function (props) {
|
|
20179
21535
|
var children = props.children, description = props.description, title = props.title;
|
|
20180
21536
|
var modalProps = react.useMemo(function () {
|
|
@@ -20186,7 +21542,7 @@ var HeaderModalWrapper = function (props) {
|
|
|
20186
21542
|
width: "75%",
|
|
20187
21543
|
} }, { children: description })))] }))), children] })));
|
|
20188
21544
|
};
|
|
20189
|
-
var templateObject_1$
|
|
21545
|
+
var templateObject_1$2;
|
|
20190
21546
|
|
|
20191
21547
|
var isPlural = pkg__default["default"].isPlural;
|
|
20192
21548
|
var getDateFormat = function (dataInterval) {
|
|
@@ -20264,9 +21620,46 @@ var FeatureBarChart = function (_a) {
|
|
|
20264
21620
|
position: { y: -62 },
|
|
20265
21621
|
}))), jsxRuntime.jsx(recharts.Bar, { dataKey: featureName, fill: brandColor, activeBar: jsxRuntime.jsx(recharts.Rectangle, { fill: brandColor }) })] })));
|
|
20266
21622
|
};
|
|
20267
|
-
var StyledBarChart = defaultStyled(recharts.BarChart)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .recharts-surface {\n overflow: visible;\n }\n"], ["\n .recharts-surface {\n overflow: visible;\n }\n"])));
|
|
20268
|
-
var templateObject_1;
|
|
21623
|
+
var StyledBarChart = defaultStyled(recharts.BarChart)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n .recharts-surface {\n overflow: visible;\n }\n"], ["\n .recharts-surface {\n overflow: visible;\n }\n"])));
|
|
21624
|
+
var templateObject_1$1;
|
|
20269
21625
|
|
|
21626
|
+
var canShowQuantitiesInput = function (charge, subscription) {
|
|
21627
|
+
// Check if the subscription is active, pending, or in trial,
|
|
21628
|
+
// the pricing model is not flat,
|
|
21629
|
+
// and if it's not a trial, also check if the current charge is the last one in the subscription.
|
|
21630
|
+
var _a, _b, _c;
|
|
21631
|
+
var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE;
|
|
21632
|
+
var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
|
|
21633
|
+
var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL;
|
|
21634
|
+
var isFlatPricing = charge.pricingModel === "FLAT";
|
|
21635
|
+
var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
|
|
21636
|
+
!isFlatPricing &&
|
|
21637
|
+
charge.selfServiceQuantity &&
|
|
21638
|
+
!charge.expired;
|
|
21639
|
+
// Now you can use the value of shouldProcessCharge to determine whether to process the charge.
|
|
21640
|
+
return shouldProcessCharge;
|
|
21641
|
+
};
|
|
21642
|
+
var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
|
|
21643
|
+
var quoteChange = quote.quoteChanges.find(function (quoteChange) {
|
|
21644
|
+
return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id);
|
|
21645
|
+
});
|
|
21646
|
+
var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
|
|
21647
|
+
var charges = [
|
|
21648
|
+
{
|
|
21649
|
+
id: quoteChangeCharge.id,
|
|
21650
|
+
quantity: editedSubscription.quantity - subscriptionQuantity,
|
|
21651
|
+
},
|
|
21652
|
+
];
|
|
21653
|
+
return { charges: charges, quoteChange: quoteChange };
|
|
21654
|
+
};
|
|
21655
|
+
var canShowChangeQuantities = function (_a) {
|
|
21656
|
+
var subscriptions = _a.subscriptions;
|
|
21657
|
+
return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
|
|
21658
|
+
return subscription.charges.some(function (charge, chargeIndex) {
|
|
21659
|
+
return canShowQuantitiesInput(charge, subscription);
|
|
21660
|
+
});
|
|
21661
|
+
});
|
|
21662
|
+
};
|
|
20270
21663
|
var isSubscriptionNotActive = function (subscription) {
|
|
20271
21664
|
var _a, _b;
|
|
20272
21665
|
return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
|
|
@@ -20289,7 +21682,7 @@ var SubscriptionCardActions = function (_a) {
|
|
|
20289
21682
|
canShowSubscriptionActions(subscription) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [canShowCancelButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "p-0", type: "link" }, { children: "Cancel subscription" })) }))), canShowChangePlanButton && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL ? (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Upgrade" }))) : null;
|
|
20290
21683
|
};
|
|
20291
21684
|
|
|
20292
|
-
var Text$
|
|
21685
|
+
var Text$6 = antd.Typography.Text;
|
|
20293
21686
|
var getSubscriptionStatusText = function (subscription) {
|
|
20294
21687
|
var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
|
|
20295
21688
|
if (cancellationDate &&
|
|
@@ -20318,7 +21711,7 @@ var SubscriptionCardHeader = function (_a) {
|
|
|
20318
21711
|
var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
|
|
20319
21712
|
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between", style: {
|
|
20320
21713
|
backgroundColor: darkMode ? "var(--row-background-dark)" : "",
|
|
20321
|
-
} }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(
|
|
21714
|
+
} }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$6, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsxRuntime.jsx(Text$6, __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(antd.Tag, __assign({ className: "ant-tag-".concat(common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()]) }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx(Text$6, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile &&
|
|
20322
21715
|
planChangeOptions &&
|
|
20323
21716
|
onChangePlanClick &&
|
|
20324
21717
|
onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscription: subscription }))] }))] })));
|
|
@@ -20346,6 +21739,7 @@ var SubscriptionChargeTotal = function (_a) {
|
|
|
20346
21739
|
: "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
|
|
20347
21740
|
};
|
|
20348
21741
|
|
|
21742
|
+
var Text$5 = antd.Typography.Text;
|
|
20349
21743
|
var SubscriptionChargeUnitPrice = function (_a) {
|
|
20350
21744
|
var charge = _a.charge, subscription = _a.subscription;
|
|
20351
21745
|
var darkMode = react.useContext(BunnyContext).darkMode;
|
|
@@ -20368,22 +21762,23 @@ var SubscriptionChargeUnitPrice = function (_a) {
|
|
|
20368
21762
|
}) })) })));
|
|
20369
21763
|
}, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsxRuntime.jsx("div", __assign({ className: "cursor-pointer underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "Hide tiers" : "Show tiers" })) })));
|
|
20370
21764
|
else if (charge.chargeType === common.ChargeType.USAGE || charge.trial)
|
|
20371
|
-
return jsxRuntime.jsx(
|
|
21765
|
+
return jsxRuntime.jsx(Text$5, { children: "-" });
|
|
20372
21766
|
else if (isDiscount)
|
|
20373
21767
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["-", common.formatCurrency(charge.discountedPrice, subscription.currencyId)] }));
|
|
20374
21768
|
else
|
|
20375
21769
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: common.formatCurrency(charge.discountedPrice, subscription.currencyId) }));
|
|
20376
21770
|
};
|
|
20377
21771
|
|
|
21772
|
+
var Text$4 = antd.Typography.Text;
|
|
20378
21773
|
var SubscriptionCardColumnHeaders = function (_a) {
|
|
20379
21774
|
var columns = _a.columns;
|
|
20380
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(
|
|
21775
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(Text$4, __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
|
|
20381
21776
|
};
|
|
20382
21777
|
|
|
20383
|
-
var Text$
|
|
21778
|
+
var Text$3 = antd.Typography.Text;
|
|
20384
21779
|
var SubscriptionsListCell = function (_a) {
|
|
20385
21780
|
var children = _a.children, className = _a.className, gridColumn = _a.gridColumn, right = _a.right, style = _a.style;
|
|
20386
|
-
return (jsxRuntime.jsx(Text$
|
|
21781
|
+
return (jsxRuntime.jsx(Text$3, __assign({ className: "flex items-center text-sm whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
|
|
20387
21782
|
};
|
|
20388
21783
|
|
|
20389
21784
|
var CARD_COLUMNS = [
|
|
@@ -20470,10 +21865,10 @@ var SubscriptionCardDesktopRow = function (_a) {
|
|
|
20470
21865
|
: (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
|
|
20471
21866
|
};
|
|
20472
21867
|
|
|
20473
|
-
var Text = antd.Typography.Text;
|
|
21868
|
+
var Text$2 = antd.Typography.Text;
|
|
20474
21869
|
var SubscriptionCardCellMobile = function (_a) {
|
|
20475
21870
|
var children = _a.children, className = _a.className, style = _a.style;
|
|
20476
|
-
return (jsxRuntime.jsx(Text, __assign({ className: className, style: style }, { children: children })));
|
|
21871
|
+
return (jsxRuntime.jsx(Text$2, __assign({ className: className, style: style }, { children: children })));
|
|
20477
21872
|
};
|
|
20478
21873
|
|
|
20479
21874
|
var CHARGE_COLUMNS = [
|
|
@@ -20534,21 +21929,367 @@ var SubscriptionsList = function (_a) {
|
|
|
20534
21929
|
}) }));
|
|
20535
21930
|
};
|
|
20536
21931
|
|
|
20537
|
-
|
|
20538
|
-
|
|
21932
|
+
// Extra props to pass in
|
|
21933
|
+
// - previewMode: boolean
|
|
21934
|
+
// - productId: string
|
|
21935
|
+
var SubscriptionsListContainer = function (_a) {
|
|
21936
|
+
var companyName = _a.companyName, _b = _a.hideExpired, hideExpired = _b === void 0 ? false : _b, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, onChangePlanClick = _a.onChangePlanClick, noSubscriptionsComponent = _a.noSubscriptionsComponent, subscriptions = _a.subscriptions, subscriptionsAreLoading = _a.subscriptionsAreLoading;
|
|
21937
|
+
// Context
|
|
21938
|
+
var apiHost = react.useContext(BunnyContext).apiHost;
|
|
21939
|
+
var gap = react.useContext(SubscriptionsContext).gap;
|
|
21940
|
+
var token = useToken();
|
|
21941
|
+
// Queries
|
|
21942
|
+
var _c = reactQuery.useQuery({
|
|
21943
|
+
queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
|
|
21944
|
+
queryFn: function () { return getPlanChangeOptions({ token: token, apiHost: apiHost }); },
|
|
21945
|
+
enabled: Boolean(onChangePlanClick),
|
|
21946
|
+
}), planChangeOptions = _c.data, arePlanChangeOptionsLoading = _c.isLoading;
|
|
21947
|
+
if (subscriptionsAreLoading ||
|
|
21948
|
+
(Boolean(onChangePlanClick) ? arePlanChangeOptionsLoading : false))
|
|
21949
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
21950
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink overflow-auto") }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscriptions: subscriptions })) : (noSubscriptionsComponent || (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) })));
|
|
21951
|
+
};
|
|
21952
|
+
|
|
21953
|
+
var QuantityInput = function (_a) {
|
|
21954
|
+
var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, subscriptions = _a.subscriptions;
|
|
21955
|
+
// Context
|
|
21956
|
+
var token = useToken();
|
|
21957
|
+
var apiHost = react.useContext(BunnyContext).apiHost;
|
|
21958
|
+
var _b = react.useContext(SubscriptionsContext), updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId;
|
|
21959
|
+
// Local state
|
|
21960
|
+
var _c = react.useState(), editedSubscription = _c[0], setEditedSubscription = _c[1];
|
|
21961
|
+
// Hooks
|
|
21962
|
+
var queryClient = reactQuery.useQueryClient();
|
|
21963
|
+
var createSubscriptionQuote = useCreateSubscriptionQuote();
|
|
21964
|
+
var quoteChangeUpdate = useQuoteChangeUpdate();
|
|
21965
|
+
var isMobile = common.useIsMobile();
|
|
21966
|
+
var showErrorNotification = common.useErrorNotification();
|
|
21967
|
+
var quantityDisabled =
|
|
21968
|
+
// If we are editing a quote, we disable the quantity input
|
|
21969
|
+
// If we don't have a editedSubscription, we disable the quantity input
|
|
21970
|
+
(updatingChargeQuantityId && updatingChargeQuantityId !== charge.id) ||
|
|
21971
|
+
// If the subscription is not self-service, we disable the quantity input
|
|
21972
|
+
!charge.selfServiceQuantity;
|
|
21973
|
+
var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined
|
|
21974
|
+
? ""
|
|
21975
|
+
: editedSubscription.quantity;
|
|
21976
|
+
// Mutations
|
|
21977
|
+
var createQuote = reactQuery.useMutation({
|
|
21978
|
+
mutationFn: function (subscriptionIds) {
|
|
21979
|
+
return createSubscriptionQuote(subscriptionIds, token, apiHost);
|
|
21980
|
+
},
|
|
21981
|
+
onSuccess: function (subscriptionUpdateData) {
|
|
21982
|
+
var _a;
|
|
21983
|
+
var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
|
|
21984
|
+
var _b = createQuoteParams(quote, charge.quantity, editedSubscription), charges = _b.charges, quoteChange = _b.quoteChange;
|
|
21985
|
+
if (quoteChange && charges[0].quantity > 0) {
|
|
21986
|
+
updateQuote.mutate({
|
|
21987
|
+
charges: charges,
|
|
21988
|
+
quoteChangeId: quoteChange.id,
|
|
21989
|
+
});
|
|
21990
|
+
}
|
|
21991
|
+
},
|
|
21992
|
+
});
|
|
21993
|
+
var updateQuote = reactQuery.useMutation({
|
|
21994
|
+
mutationFn: function (_a) {
|
|
21995
|
+
var charges = _a.charges, quoteChangeId = _a.quoteChangeId;
|
|
21996
|
+
return quoteChangeUpdate(charges, quoteChangeId, token, apiHost);
|
|
21997
|
+
},
|
|
21998
|
+
onSuccess: function (response) {
|
|
21999
|
+
var _a, _b, _c, _d, _e, _f;
|
|
22000
|
+
if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
|
|
22001
|
+
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()) ===
|
|
22002
|
+
common.SubscriptionState.TRIAL;
|
|
22003
|
+
setEditingQuoteData({
|
|
22004
|
+
id: (_d = (_c = response.quoteChangeUpdate) === null || _c === void 0 ? void 0 : _c.quoteChange) === null || _d === void 0 ? void 0 : _d.quoteId,
|
|
22005
|
+
isTrial: isTrial,
|
|
22006
|
+
});
|
|
22007
|
+
}
|
|
22008
|
+
queryClient.invalidateQueries({
|
|
22009
|
+
queryKey: common.QueryKeyFactory.default.createObjectKey({
|
|
22010
|
+
id: (_f = (_e = response.quoteChangeUpdate) === null || _e === void 0 ? void 0 : _e.quoteChange) === null || _f === void 0 ? void 0 : _f.quoteId,
|
|
22011
|
+
objectName: "editingQuote",
|
|
22012
|
+
token: token,
|
|
22013
|
+
}),
|
|
22014
|
+
});
|
|
22015
|
+
},
|
|
22016
|
+
});
|
|
22017
|
+
// Handlers
|
|
22018
|
+
var isQuantityLowerThanOriginal = function (quantity) {
|
|
22019
|
+
return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined &&
|
|
22020
|
+
editedSubscription.quantity <= quantity;
|
|
22021
|
+
};
|
|
22022
|
+
var onChangeQuantity = function (chargeIndex, value, priceListChargeId, subscription, subscriptionIndex) {
|
|
22023
|
+
var quantity = isNaN(parseInt(value)) ? 0 : parseInt(value);
|
|
22024
|
+
setEditedSubscription({
|
|
22025
|
+
chargeIndex: chargeIndex,
|
|
22026
|
+
subscriptionIndex: subscriptionIndex,
|
|
22027
|
+
chargeId: priceListChargeId,
|
|
22028
|
+
quantity: quantity,
|
|
22029
|
+
subscription: subscription,
|
|
22030
|
+
});
|
|
22031
|
+
if (quantity !== charge.quantity) {
|
|
22032
|
+
setUpdatingChargeQuantityId(charge.id);
|
|
22033
|
+
}
|
|
22034
|
+
else {
|
|
22035
|
+
setUpdatingChargeQuantityId(undefined);
|
|
22036
|
+
}
|
|
22037
|
+
};
|
|
22038
|
+
var handleSubscriptionUpdate = function (editedSubscription) {
|
|
22039
|
+
if (!editedSubscription)
|
|
22040
|
+
return;
|
|
22041
|
+
// If we are not editing a quote, we create a new one
|
|
22042
|
+
if (!editingQuote) {
|
|
22043
|
+
var subscriptionIds = [];
|
|
22044
|
+
var charge_1 = subscriptions[editedSubscription.subscriptionIndex].charges[editedSubscription.chargeIndex];
|
|
22045
|
+
if (isQuantityLowerThanOriginal(charge_1.quantity)) {
|
|
22046
|
+
// If the quantity is lower than the original, we remove the quote
|
|
22047
|
+
setEditingQuoteData(undefined);
|
|
22048
|
+
setUpdatingChargeQuantityId(undefined);
|
|
22049
|
+
return;
|
|
22050
|
+
}
|
|
22051
|
+
subscriptionIds.push(editedSubscription.subscription.id);
|
|
22052
|
+
createQuote.mutate(subscriptionIds);
|
|
22053
|
+
}
|
|
22054
|
+
else {
|
|
22055
|
+
// If we are editing a quote, we update the quote change
|
|
22056
|
+
var _a = createQuoteParams(editingQuote, charge.quantity, editedSubscription), charges = _a.charges, quoteChange = _a.quoteChange;
|
|
22057
|
+
if (quoteChange && charges[0].quantity > 0) {
|
|
22058
|
+
updateQuote.mutate({
|
|
22059
|
+
charges: charges,
|
|
22060
|
+
quoteChangeId: quoteChange.id,
|
|
22061
|
+
});
|
|
22062
|
+
}
|
|
22063
|
+
else {
|
|
22064
|
+
// Reset the editing quote data and the updating charge quantity ID to their initial states
|
|
22065
|
+
setEditingQuoteData(undefined);
|
|
22066
|
+
setUpdatingChargeQuantityId(undefined);
|
|
22067
|
+
}
|
|
22068
|
+
}
|
|
22069
|
+
};
|
|
22070
|
+
// Initial subscription quantity if is on mobile
|
|
22071
|
+
react.useEffect(function () {
|
|
22072
|
+
if (isMobile && !editedSubscription && !quantityDisabled) {
|
|
22073
|
+
setEditedSubscription({
|
|
22074
|
+
chargeIndex: chargeIndex,
|
|
22075
|
+
subscriptionIndex: subscriptionIndex,
|
|
22076
|
+
chargeId: charge.priceListChargeId,
|
|
22077
|
+
quantity: charge.quantity,
|
|
22078
|
+
subscription: subscription,
|
|
22079
|
+
});
|
|
22080
|
+
}
|
|
22081
|
+
}, [
|
|
22082
|
+
charge,
|
|
22083
|
+
chargeIndex,
|
|
22084
|
+
editedSubscription,
|
|
22085
|
+
isMobile,
|
|
22086
|
+
quantityDisabled,
|
|
22087
|
+
subscription,
|
|
22088
|
+
subscriptionIndex,
|
|
22089
|
+
]);
|
|
22090
|
+
// Edit subscription debounce
|
|
22091
|
+
react.useEffect(function () {
|
|
22092
|
+
var debounce = setTimeout(function () {
|
|
22093
|
+
handleSubscriptionUpdate(editedSubscription);
|
|
22094
|
+
}, 1000);
|
|
22095
|
+
return function () { return clearTimeout(debounce); };
|
|
22096
|
+
// eslint-disable-next-line
|
|
22097
|
+
}, [editedSubscription]);
|
|
22098
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(antd.Input, { className: "text-right", disabled: quantityDisabled, onBlur: function () {
|
|
22099
|
+
if (typeof value === "number" && value < charge.quantity) {
|
|
22100
|
+
showErrorNotification("New value is less than the original quantity. This is not allowed");
|
|
22101
|
+
}
|
|
22102
|
+
}, onChange: function (e) {
|
|
22103
|
+
onChangeQuantity(chargeIndex, e.target.value, charge.priceListChargeId, subscription, subscriptionIndex);
|
|
22104
|
+
}, status: isQuantityLowerThanOriginal(charge.quantity) ? "error" : "", style: { width: "96px" }, value: value }) }));
|
|
22105
|
+
};
|
|
22106
|
+
|
|
22107
|
+
var Text$1 = antd.Typography.Text;
|
|
22108
|
+
var QuantityChangeGridRow = function (_a) {
|
|
22109
|
+
var _b;
|
|
22110
|
+
var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge;
|
|
22111
|
+
if (!canShowQuantitiesInput(subscriptionCharge, subscription))
|
|
22112
|
+
return null;
|
|
22113
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$1, __assign({ className: "font-medium text-orange-600 col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$1, __assign({ className: "font-medium text-base text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$1, __assign({ className: "flex items-center justify-end font-medium text-base text-gray-900" }, { children: subscriptionCharge.quantity })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-end" }, { children: [jsxRuntime.jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions }), jsxRuntime.jsx("div", {})] })), jsxRuntime.jsx(antd.Divider, { className: "col-span-full my-2" })] }));
|
|
22114
|
+
};
|
|
22115
|
+
|
|
22116
|
+
var QuantityChangeGridTitle = function (_a) {
|
|
22117
|
+
var children = _a.children, right = _a.right;
|
|
22118
|
+
return (jsxRuntime.jsx("div", __assign({ className: "font-medium text-slate-600 ".concat(right ? "text-right" : "text-left"), style: { fontSize: "11px" } }, { children: children })));
|
|
22119
|
+
};
|
|
22120
|
+
|
|
22121
|
+
var QuoteChangeSummarySection = function (_a) {
|
|
22122
|
+
var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData;
|
|
22123
|
+
var apiHost = react.useContext(BunnyContext).apiHost;
|
|
22124
|
+
var isMobile = common.useIsMobile();
|
|
22125
|
+
var token = useToken();
|
|
22126
|
+
// const apiHost = getApiHost();
|
|
22127
|
+
var showSuccessNotification = common.useSuccessNotification();
|
|
22128
|
+
var trialUpgradeMutation = reactQuery.useMutation({
|
|
22129
|
+
mutationFn: function (quoteId) { return checkout({ quoteId: quoteId, token: token, apiHost: apiHost }); },
|
|
22130
|
+
onSuccess: function () {
|
|
22131
|
+
setEditingQuoteData(undefined);
|
|
22132
|
+
showSuccessNotification("Subscription updated successfully");
|
|
22133
|
+
},
|
|
22134
|
+
});
|
|
22135
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-end" }, { children: [editingQuote && (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-500 text-right text-xs mb-2" }, { children: "TOTAL" })), jsxRuntime.jsx("div", __assign({ className: "text-right ".concat(isMobile ? "text-2xl" : "text-xl") }, { children: common.formatCurrency(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || "") }))] }))), jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-end ".concat(isMobile ? "w-full" : "") }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
|
|
22136
|
+
? function () { return trialUpgradeMutation.mutate(editingQuoteData.id); }
|
|
22137
|
+
: openCheckout, disabled: !editingQuoteData, size: isMobile ? "large" : "middle", type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? "Activate Trial" : "Proceed to checkout" })) }))] })));
|
|
22138
|
+
};
|
|
22139
|
+
|
|
22140
|
+
var QUANTITY_CHANGE_HEADER_TITLE = "Update unit quantity";
|
|
22141
|
+
var QUANTITY_CHANGE_HEADER_DESCRIPTION = "Adjust quantities below. The change will take effect immediately after checkout has been completed.";
|
|
22142
|
+
var QuantityChangeDrawerDesktop = function (_a) {
|
|
22143
|
+
var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions;
|
|
22144
|
+
var _b = react.useState(open), openLocal = _b[0], setOpenLocal = _b[1];
|
|
22145
|
+
var isMobile = common.useIsMobile();
|
|
22146
|
+
react.useEffect(function () {
|
|
22147
|
+
var timeoutId;
|
|
22148
|
+
if (!open) {
|
|
22149
|
+
timeoutId = setTimeout(function () {
|
|
22150
|
+
setOpenLocal(false);
|
|
22151
|
+
}, 300); // Delay to allow for close animation
|
|
22152
|
+
}
|
|
22153
|
+
else {
|
|
22154
|
+
setOpenLocal(true);
|
|
22155
|
+
}
|
|
22156
|
+
return function () { return clearTimeout(timeoutId); };
|
|
22157
|
+
}, [open]);
|
|
22158
|
+
if (!openLocal)
|
|
22159
|
+
return null;
|
|
22160
|
+
return (jsxRuntime.jsxs(antd.Drawer, __assign({ closeIcon: null, destroyOnClose: true, onClose: onClose, open: open, styles: isMobile
|
|
22161
|
+
? {
|
|
22162
|
+
body: {
|
|
22163
|
+
padding: "1rem",
|
|
22164
|
+
overflow: "hidden",
|
|
22165
|
+
background: common.SLATE_50,
|
|
22166
|
+
},
|
|
22167
|
+
wrapper: {
|
|
22168
|
+
width: "100vw",
|
|
22169
|
+
},
|
|
22170
|
+
}
|
|
22171
|
+
: {
|
|
22172
|
+
wrapper: {
|
|
22173
|
+
minWidth: "600px",
|
|
22174
|
+
},
|
|
22175
|
+
}, title: jsxRuntime.jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "grid pb-4", style: {
|
|
22176
|
+
gridTemplateColumns: "2fr 1fr 1fr",
|
|
22177
|
+
rowGap: "0.75rem",
|
|
22178
|
+
columnGap: "1rem",
|
|
22179
|
+
} }, { children: [jsxRuntime.jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsxRuntime.jsx(antd.Divider, { className: "col-span-full py-2" }), subscriptions.map(function (subscription, index) {
|
|
22180
|
+
var _a;
|
|
22181
|
+
var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
|
|
22182
|
+
return (jsxRuntime.jsx("div", __assign({ className: "contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
|
|
22183
|
+
if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
|
|
22184
|
+
return null;
|
|
22185
|
+
return (jsxRuntime.jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions }, chargeIndex));
|
|
22186
|
+
}) }), index));
|
|
22187
|
+
})] })), jsxRuntime.jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData })] })));
|
|
22188
|
+
};
|
|
22189
|
+
|
|
22190
|
+
var HideExpiredToggle = function (_a) {
|
|
22191
|
+
var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired; _a.visible;
|
|
22192
|
+
var isMobile = common.useIsMobile();
|
|
22193
|
+
var secondaryColor = react.useContext(BrandContext).secondaryColor;
|
|
22194
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4 pl-4" }, { children: [!isMobile && jsxRuntime.jsx(antd.Divider, { className: "h-5", type: "vertical" }), jsxRuntime.jsx(StyledCheckbox, { children: jsxRuntime.jsx(antd.Checkbox, __assign({ checked: hideExpired, onChange: function (e) { return setHideExpired(e.target.checked); }, style: {
|
|
22195
|
+
color: secondaryColor,
|
|
22196
|
+
} }, { children: isMobile ? "Hide inactive" : "Hide inactive subscriptions" })) })] })));
|
|
22197
|
+
};
|
|
22198
|
+
var StyledCheckbox = styled__default["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .ant-checkbox-wrapper span {\n padding-inline-end: 0 !important;\n }\n"], ["\n .ant-checkbox-wrapper span {\n padding-inline-end: 0 !important;\n }\n"])));
|
|
22199
|
+
var templateObject_1;
|
|
22200
|
+
|
|
22201
|
+
var ChangeQuantitiesButton = function (_a) {
|
|
22202
|
+
var canShowChangeQuantitiesButton = _a.canShowChangeQuantitiesButton, setQuantityDrawerOpen = _a.setQuantityDrawerOpen;
|
|
22203
|
+
if (!canShowChangeQuantitiesButton)
|
|
22204
|
+
return null;
|
|
22205
|
+
return (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () {
|
|
22206
|
+
setQuantityDrawerOpen(true);
|
|
22207
|
+
}, type: "default" }, { children: "Change quantities" })));
|
|
22208
|
+
};
|
|
22209
|
+
|
|
22210
|
+
var SubscriptionsNavigation = function (_a) {
|
|
22211
|
+
var expiredSwitchVisible = _a.expiredSwitchVisible, hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, setQuantityDrawerOpen = _a.setQuantityDrawerOpen, subscriptions = _a.subscriptions;
|
|
22212
|
+
// Hooks
|
|
22213
|
+
var isMobile = common.useIsMobile();
|
|
22214
|
+
// Derived state
|
|
22215
|
+
var canShowChangeQuantitiesButton = canShowChangeQuantities({
|
|
22216
|
+
subscriptions: subscriptions,
|
|
22217
|
+
});
|
|
22218
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, visible: expiredSwitchVisible })), jsxRuntime.jsx("div", __assign({ className: "flex grow gap-2 ".concat(isMobile ? "flex-col" : "justify-end") }, { children: canShowChangeQuantitiesButton && (jsxRuntime.jsx(ChangeQuantitiesButton, { canShowChangeQuantitiesButton: canShowChangeQuantitiesButton, setQuantityDrawerOpen: setQuantityDrawerOpen })) }))] }));
|
|
22219
|
+
};
|
|
22220
|
+
|
|
22221
|
+
var Text = antd.Typography.Text;
|
|
22222
|
+
var SubscriptionsWrapper = function (_a) {
|
|
22223
|
+
var handlePortalErrors = _a.handlePortalErrors, entityId = _a.entityId, companyName = _a.companyName, _b = _a.isInPreviewMode, isInPreviewMode = _b === void 0 ? false : _b, productId = _a.productId, className = _a.className, _c = _a.styles, userStyles = _c === void 0 ? {} : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d;
|
|
22224
|
+
var defaultStyles = {
|
|
20539
22225
|
gap: 4,
|
|
20540
22226
|
shadow: "sm",
|
|
20541
22227
|
subscriptionProductNameStyle: {
|
|
20542
22228
|
fontSize: "11px",
|
|
20543
22229
|
fontWeight: 500,
|
|
20544
22230
|
},
|
|
20545
|
-
}
|
|
20546
|
-
var
|
|
22231
|
+
};
|
|
22232
|
+
var styles = __assign(__assign({}, defaultStyles), userStyles);
|
|
22233
|
+
var _e = react.useState(undefined), upgradingSubscription = _e[0], setUpgradingSubscription = _e[1];
|
|
22234
|
+
var _f = react.useState(undefined), updatingChargeQuantityId = _f[0], setUpdatingChargeQuantityId = _f[1];
|
|
22235
|
+
var _g = react.useState(undefined), quotePreviewData = _g[0], setQuotePreviewData = _g[1];
|
|
22236
|
+
var _h = react.useState(null), subscriptionUpgradeId = _h[0], setSubscriptionUpgradeId = _h[1];
|
|
22237
|
+
return (jsxRuntime.jsx(SubscriptionsContext.Provider, __assign({ value: {
|
|
22238
|
+
gap: styles.gap,
|
|
22239
|
+
shadow: styles.shadow,
|
|
22240
|
+
className: className,
|
|
22241
|
+
subscriptionProductNameStyle: styles.subscriptionProductNameStyle,
|
|
22242
|
+
productId: productId,
|
|
22243
|
+
entityId: entityId,
|
|
22244
|
+
isInPreviewMode: isInPreviewMode,
|
|
22245
|
+
upgradingSubscription: upgradingSubscription,
|
|
22246
|
+
setUpgradingSubscription: setUpgradingSubscription,
|
|
22247
|
+
updatingChargeQuantityId: updatingChargeQuantityId,
|
|
22248
|
+
setUpdatingChargeQuantityId: setUpdatingChargeQuantityId,
|
|
22249
|
+
quotePreviewData: quotePreviewData,
|
|
22250
|
+
setQuotePreviewData: setQuotePreviewData,
|
|
22251
|
+
subscriptionUpgradeId: subscriptionUpgradeId,
|
|
22252
|
+
setSubscriptionUpgradeId: setSubscriptionUpgradeId,
|
|
22253
|
+
} }, { children: jsxRuntime.jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle }) })));
|
|
22254
|
+
};
|
|
22255
|
+
var Subscriptions = function (_a) {
|
|
22256
|
+
var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, noSubscriptionsComponent = _a.noSubscriptionsComponent, hideTitle = _a.hideTitle;
|
|
20547
22257
|
// Context
|
|
20548
|
-
var apiHost = react.useContext(BunnyContext).apiHost;
|
|
20549
22258
|
var token = useToken();
|
|
22259
|
+
var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
|
|
22260
|
+
var _c = react.useContext(SubscriptionsContext), entityId = _c.entityId, setUpgradingSubscription = _c.setUpgradingSubscription, updatingChargeQuantityId = _c.updatingChargeQuantityId, setUpdatingChargeQuantityId = _c.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _c.setSubscriptionUpgradeId, className = _c.className, isInPreviewMode = _c.isInPreviewMode;
|
|
22261
|
+
// Local state
|
|
22262
|
+
var _d = react.useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
|
|
22263
|
+
var _e = react.useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
|
|
22264
|
+
var _f = react.useState(true), hideExpired = _f[0], setHideExpired = _f[1];
|
|
22265
|
+
var _g = react.useState(false), quantityDrawerOpen = _g[0], setQuantityDrawerOpen = _g[1];
|
|
22266
|
+
var _h = react.useState(false), expiredSwitchVisible = _h[0], setExpiredSwitchVisible = _h[1];
|
|
22267
|
+
var _j = react.useState(false), isChangingPlan = _j[0], setIsChangingPlan = _j[1];
|
|
22268
|
+
// Hooks
|
|
22269
|
+
var queryClient = reactQuery.useQueryClient();
|
|
22270
|
+
var showSuccessNotification = common.useSuccessNotification();
|
|
22271
|
+
var quoteDelete = useQuoteDelete();
|
|
22272
|
+
var isMobile = common.useIsMobile();
|
|
22273
|
+
var storedPaymentMethod = usePaymentMethod({
|
|
22274
|
+
graphQLClient: graphQLClient,
|
|
22275
|
+
token: token,
|
|
22276
|
+
}).data;
|
|
22277
|
+
var cancelSubscription = useCancelSubscription();
|
|
20550
22278
|
// Queries
|
|
20551
|
-
var
|
|
22279
|
+
var quote = reactQuery.useQuery({
|
|
22280
|
+
queryKey: common.QueryKeyFactory.default.createObjectKey({
|
|
22281
|
+
id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
|
|
22282
|
+
objectName: "editingQuote",
|
|
22283
|
+
token: token,
|
|
22284
|
+
}),
|
|
22285
|
+
queryFn: function () {
|
|
22286
|
+
return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id)
|
|
22287
|
+
? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost })
|
|
22288
|
+
: undefined;
|
|
22289
|
+
},
|
|
22290
|
+
enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
|
|
22291
|
+
}).data;
|
|
22292
|
+
var _k = reactQuery.useQuery({
|
|
20552
22293
|
queryKey: common.QueryKeyFactory.default.createTableKey({
|
|
20553
22294
|
filterString: "entityId=".concat(entityId),
|
|
20554
22295
|
pluralType: "subscriptions",
|
|
@@ -20556,23 +22297,110 @@ var Subscriptions = function (_a) {
|
|
|
20556
22297
|
}),
|
|
20557
22298
|
queryFn: function () { return getSubscriptions({ entityId: entityId, token: token, apiHost: apiHost }); },
|
|
20558
22299
|
enabled: Boolean(entityId),
|
|
20559
|
-
}), subscriptions =
|
|
20560
|
-
|
|
20561
|
-
|
|
20562
|
-
|
|
20563
|
-
|
|
20564
|
-
|
|
22300
|
+
}), subscriptions = _k.data, subscriptionsAreLoading = _k.isLoading;
|
|
22301
|
+
// Mutations
|
|
22302
|
+
var subscriptionCancel = reactQuery.useMutation({
|
|
22303
|
+
mutationFn: function (subscription) {
|
|
22304
|
+
return cancelSubscription([subscription.id], token, apiHost);
|
|
22305
|
+
},
|
|
22306
|
+
onSuccess: function () {
|
|
22307
|
+
queryClient.invalidateQueries({
|
|
22308
|
+
queryKey: common.QueryKeyFactory.default.createTableKey({
|
|
22309
|
+
filterString: "entityId=".concat(entityId),
|
|
22310
|
+
pluralType: "subscriptions",
|
|
22311
|
+
token: token,
|
|
22312
|
+
}),
|
|
22313
|
+
});
|
|
22314
|
+
showSuccessNotification("Subscription canceled");
|
|
22315
|
+
},
|
|
22316
|
+
});
|
|
22317
|
+
// Handlers
|
|
22318
|
+
var onChangePlanClick = function (subscription) {
|
|
22319
|
+
if (subscription) {
|
|
22320
|
+
setSubscriptionUpgradeId(subscription.id);
|
|
22321
|
+
setUpgradingSubscription(subscription);
|
|
22322
|
+
}
|
|
22323
|
+
else {
|
|
22324
|
+
setSubscriptionUpgradeId(null);
|
|
22325
|
+
setUpgradingSubscription(undefined);
|
|
22326
|
+
}
|
|
22327
|
+
console.log("setIsChangingPlan true");
|
|
22328
|
+
setIsChangingPlan(true);
|
|
22329
|
+
};
|
|
22330
|
+
var onCancelSubscriptionClick = function (subscription) {
|
|
22331
|
+
subscriptionCancel.mutate(subscription);
|
|
22332
|
+
};
|
|
22333
|
+
var onSuccess = function () {
|
|
22334
|
+
setQuantityDrawerOpen(false);
|
|
22335
|
+
setEditingQuoteData(undefined);
|
|
22336
|
+
queryClient.invalidateQueries({
|
|
22337
|
+
queryKey: common.QueryKeyFactory.default.transactionsKey({ token: token }),
|
|
22338
|
+
});
|
|
22339
|
+
queryClient.invalidateQueries({
|
|
22340
|
+
queryKey: common.QueryKeyFactory.default.createTableKey({
|
|
22341
|
+
filterString: "entityId=".concat(entityId),
|
|
22342
|
+
pluralType: "subscriptions",
|
|
22343
|
+
token: token,
|
|
22344
|
+
}),
|
|
22345
|
+
});
|
|
22346
|
+
showSuccessNotification("Your plan has been updated", "Payment successful");
|
|
22347
|
+
setPayModalVisible(false);
|
|
22348
|
+
setHideExpired(true);
|
|
22349
|
+
};
|
|
22350
|
+
var onCancel = function () {
|
|
22351
|
+
setPayModalVisible(false);
|
|
22352
|
+
};
|
|
22353
|
+
var onFail = function (error) {
|
|
22354
|
+
handlePortalErrors(error);
|
|
22355
|
+
};
|
|
22356
|
+
var onClose = function () {
|
|
22357
|
+
if (editingQuoteData) {
|
|
22358
|
+
quoteDelete(editingQuoteData.id, token, apiHost);
|
|
22359
|
+
setEditingQuoteData(undefined);
|
|
22360
|
+
}
|
|
22361
|
+
if (updatingChargeQuantityId) {
|
|
22362
|
+
setUpdatingChargeQuantityId(undefined);
|
|
22363
|
+
}
|
|
22364
|
+
setQuantityDrawerOpen(false);
|
|
22365
|
+
};
|
|
22366
|
+
var allSubscriptionsExpired = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.every(function (subscription) {
|
|
22367
|
+
var _a, _b;
|
|
22368
|
+
return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
|
|
22369
|
+
((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.CANCELED;
|
|
22370
|
+
});
|
|
22371
|
+
var hasExpiredOrCanceledSubscriptions = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
|
|
22372
|
+
var _a, _b;
|
|
22373
|
+
return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
|
|
22374
|
+
((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.CANCELED;
|
|
22375
|
+
});
|
|
20565
22376
|
react.useEffect(function () {
|
|
20566
|
-
if (subscriptions)
|
|
20567
|
-
|
|
20568
|
-
}, [subscriptions]);
|
|
20569
|
-
|
|
20570
|
-
|
|
20571
|
-
|
|
20572
|
-
|
|
20573
|
-
|
|
20574
|
-
|
|
20575
|
-
|
|
22377
|
+
if (allSubscriptionsExpired && subscriptions.length > 0)
|
|
22378
|
+
setHideExpired(false);
|
|
22379
|
+
}, [allSubscriptionsExpired, subscriptions]);
|
|
22380
|
+
react.useEffect(function () {
|
|
22381
|
+
if (hasExpiredOrCanceledSubscriptions && subscriptions.length > 0)
|
|
22382
|
+
setExpiredSwitchVisible(true);
|
|
22383
|
+
}, [hasExpiredOrCanceledSubscriptions, subscriptions]);
|
|
22384
|
+
react.useEffect(function () {
|
|
22385
|
+
console.log("isChangingPlan", isChangingPlan);
|
|
22386
|
+
}, [isChangingPlan]);
|
|
22387
|
+
if (isChangingPlan || isInPreviewMode) {
|
|
22388
|
+
return (jsxRuntime.jsx(PlanManager, { onChangePlanCancel: function () {
|
|
22389
|
+
console.log("setIsChangingPlan false");
|
|
22390
|
+
setIsChangingPlan(false);
|
|
22391
|
+
}, handlePortalErrors: handlePortalErrors }));
|
|
22392
|
+
}
|
|
22393
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className, " px-8") }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: "Subscriptions" }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsxs(Text, __assign({ className: "flex items-center justify-between", style: { minWidth: "137px" } }, { children: [hideExpired ? "Active subscriptions" : "All subscriptions", isMobile && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, visible: expiredSwitchVisible }))] })) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "pt-4 pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(Footer, {}), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { entityId: entityId, onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: storedPaymentMethod })] })));
|
|
22394
|
+
};
|
|
22395
|
+
var PageHeaderWithActions = function (_a) {
|
|
22396
|
+
var children = _a.children, title = _a.title;
|
|
22397
|
+
var isMobile = common.useIsMobile();
|
|
22398
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex pb-4 ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsxRuntime.jsx(PageSubTitle, { title: title }), children] })));
|
|
22399
|
+
};
|
|
22400
|
+
var PageSubTitle = function (_a) {
|
|
22401
|
+
var title = _a.title;
|
|
22402
|
+
var secondaryColor = react.useContext(BrandContext).secondaryColor;
|
|
22403
|
+
return (jsxRuntime.jsx("div", __assign({ className: "shrink-0 font-medium", style: { color: secondaryColor } }, { children: title })));
|
|
20576
22404
|
};
|
|
20577
22405
|
|
|
20578
22406
|
var MUTATION = "\nmutation BillingDetailsUpdate(\n $attributes: BillingDetailsAttributes!) {\n billingDetailsUpdate(\n attributes: $attributes\n ) {\n billingDetails {\n billingCity\n billingContact {\n email\n }\n billingCountry\n billingState\n billingStreet\n billingZip\n name\n taxNumber\n }\n errors\n }\n }\n";
|
|
@@ -20783,14 +22611,11 @@ var PaymentFormSection = function (_a) {
|
|
|
20783
22611
|
|
|
20784
22612
|
exports.BillingDetails = BillingDetails;
|
|
20785
22613
|
exports.BunnyProvider = BunnyProvider;
|
|
20786
|
-
exports.Checkout = Checkout;
|
|
20787
22614
|
exports.Invoice = Invoice;
|
|
20788
22615
|
exports.PaymentForm = PaymentForm;
|
|
20789
22616
|
exports.PaymentMethod = PaymentMethod;
|
|
20790
22617
|
exports.Quote = Quote;
|
|
20791
22618
|
exports.Quotes = Quotes;
|
|
20792
22619
|
exports.Signup = Signup;
|
|
20793
|
-
exports.Subscriptions =
|
|
22620
|
+
exports.Subscriptions = SubscriptionsWrapper;
|
|
20794
22621
|
exports.Transactions = Transactions;
|
|
20795
|
-
exports.getQuoteAmountDue = getQuoteAmountDue;
|
|
20796
|
-
exports.usePaymentMethod = usePaymentMethod;
|