@bunnyapp/components 1.0.56-beta.0.1 → 1.0.56-beta.0.10
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 +258 -236
- package/dist/cjs/playground/main.d.ts +1 -1
- package/dist/cjs/src/components/BillingDetails/BillingDetails.d.ts +2 -2
- package/dist/cjs/src/components/BunnyProvider.d.ts +3 -3
- package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +3 -2
- package/dist/cjs/src/components/PaymentForm/hooks/useAutoSetDefaultPaymentMethod.d.ts +3 -2
- package/dist/cjs/src/components/PaymentForm/useRemovePaymentMethod.d.ts +2 -2
- package/dist/cjs/src/components/PaymentForm/useSetDefaultPaymentMethod.d.ts +2 -2
- package/dist/cjs/src/components/Quote/Quote.d.ts +1 -1
- package/dist/cjs/src/components/Quote/StyledModal.d.ts +1 -1
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +1 -1
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +1 -1
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +1 -1
- package/dist/cjs/src/hooks/usePaymentMethod.d.ts +1 -1
- package/dist/esm/index.js +261 -239
- package/dist/esm/playground/main.d.ts +1 -1
- package/dist/esm/src/components/BillingDetails/BillingDetails.d.ts +2 -2
- package/dist/esm/src/components/BunnyProvider.d.ts +3 -3
- package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +3 -2
- package/dist/esm/src/components/PaymentForm/hooks/useAutoSetDefaultPaymentMethod.d.ts +3 -2
- package/dist/esm/src/components/PaymentForm/useRemovePaymentMethod.d.ts +2 -2
- package/dist/esm/src/components/PaymentForm/useSetDefaultPaymentMethod.d.ts +2 -2
- package/dist/esm/src/components/Quote/Quote.d.ts +1 -1
- package/dist/esm/src/components/Quote/StyledModal.d.ts +1 -1
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +1 -1
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +1 -1
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +1 -1
- package/dist/esm/src/hooks/usePaymentMethod.d.ts +1 -1
- package/dist/index.d.ts +2 -1
- package/package.json +3 -2
package/dist/cjs/index.js
CHANGED
|
@@ -73,7 +73,7 @@ function styleInject(css, ref) {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
var css_248z = ".ant-divider-horizontal {\n margin: 0;\n}\n.ant-divider-horizontal {\n margin: 0;\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 --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n* {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.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.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\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-popover {\n z-index: 1050;\n}\n.ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n}\n.ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ant-btn-link:disabled {\n color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n background-color: transparent !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n color: #232323 !important;\n font-size: 14px !important;\n word-break: break-all !important;\n overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff6e1c !important;\n font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-menu-submenu::after {\n display: none !important;\n}\n:root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n --bunny-blue-500: #3b82f6;\n --bunny-blue-200: #bfdbfe;\n --bunny-green-600: #059669;\n --bunny-green-200: #a7f3d0;\n --bunny-red-500: #ef4444;\n --bunny-red-200: #fecaca;\n --bunny-orange-500: #f97316;\n --bunny-orange-200: #fed7aa;\n --bunny-yellow-500: #f59e0b;\n --bunny-yellow-200: #fde68a;\n --bunny-purple-500: #8b5cf6;\n --bunny-purple-200: #ddd6fe;\n --bunny-black: #000000;\n}\n.hidden {\n display: none;\n}\n.bunny-show-on-hover {\n opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .bunny-shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .bunny-shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n position: fixed;\n}\n.bunny-absolute {\n position: absolute;\n}\n.bunny-relative {\n position: relative;\n}\n.bunny-sticky {\n position: sticky;\n}\n.bunny-bottom-0 {\n bottom: 0px;\n}\n.bunny-bottom-4 {\n bottom: 1rem;\n}\n.bunny-left-0 {\n left: 0px;\n}\n.bunny-right-0 {\n right: 0px;\n}\n.bunny-top-0 {\n top: 0px;\n}\n.bunny-col-span-full {\n grid-column: 1 / -1;\n}\n.bunny-m-0 {\n margin: 0px;\n}\n.bunny-mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.bunny-mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.bunny-my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.bunny-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-w-1\\/2 {\n width: 50%;\n}\n.bunny-w-full {\n width: 100%;\n}\n.bunny-flex-1 {\n flex: 1 1 0%;\n}\n.bunny-shrink {\n flex-shrink: 1;\n}\n.bunny-shrink-0 {\n flex-shrink: 0;\n}\n.bunny-grow {\n flex-grow: 1;\n}\n.bunny-cursor-pointer {\n cursor: pointer;\n}\n.bunny-grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.bunny-flex-row {\n flex-direction: row;\n}\n.bunny-flex-col {\n flex-direction: column;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-2 {\n padding: 0.5rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pb-8 {\n padding-bottom: 2rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-4 {\n padding-left: 1rem;\n}\n.bunny-pt-12 {\n padding-top: 3rem;\n}\n.bunny-pt-2 {\n padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n padding-top: 1rem;\n}\n.bunny-pt-5 {\n padding-top: 1.25rem;\n}\n.bunny-pt-6 {\n padding-top: 1.5rem;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.bunny-invoice-container {\n padding: 0;\n box-sizing: border-box !important;\n line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type='text'],\n input[type='password'],\n input[type='datetime'],\n input[type='datetime-local'],\n input[type='date'],\n input[type='month'],\n input[type='time'],\n input[type='week'],\n input[type='number'],\n input[type='email'],\n input[type='url'],\n input[type='search'],\n input[type='tel'],\n input[type='color'] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
|
|
77
77
|
styleInject(css_248z);
|
|
78
78
|
|
|
79
79
|
/******************************************************************************
|
|
@@ -170,7 +170,7 @@ var BrandContext = react.createContext({
|
|
|
170
170
|
topNavImageUrl: common.DEFAULT_TOP_NAV_IMAGE_URL,
|
|
171
171
|
});
|
|
172
172
|
|
|
173
|
-
var MUTATION$
|
|
173
|
+
var MUTATION$9 = "\n query entityBranding {\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }\n";
|
|
174
174
|
var getBranding = function (_a) {
|
|
175
175
|
var token = _a.token, apiHost = _a.apiHost;
|
|
176
176
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -178,7 +178,7 @@ var getBranding = function (_a) {
|
|
|
178
178
|
return __generator(this, function (_b) {
|
|
179
179
|
switch (_b.label) {
|
|
180
180
|
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
181
|
-
query: MUTATION$
|
|
181
|
+
query: MUTATION$9,
|
|
182
182
|
token: token,
|
|
183
183
|
apiHost: apiHost,
|
|
184
184
|
})];
|
|
@@ -205,28 +205,27 @@ var extraQueryClient = new reactQuery.QueryClient();
|
|
|
205
205
|
// Every component shares similar props and functionality, which this wrapper handles.
|
|
206
206
|
function BunnyProvider(_a) {
|
|
207
207
|
var children = _a.children, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, queryClient = _a.queryClient, apiHost = _a.apiHost, token = _a.token, onTokenExpired = _a.onTokenExpired, configProviderProps = _a.configProviderProps;
|
|
208
|
-
var graphQLClient = createGraphQLClient(apiHost ||
|
|
208
|
+
var graphQLClient = createGraphQLClient(apiHost || '', token);
|
|
209
209
|
react.useEffect(function () {
|
|
210
|
-
var script = document.createElement(
|
|
211
|
-
script.src =
|
|
210
|
+
var script = document.createElement('script');
|
|
211
|
+
script.src = 'https://js.finix.com/v/1/0/6/finix.js';
|
|
212
212
|
script.async = false;
|
|
213
|
-
document.getElementsByTagName(
|
|
213
|
+
document.getElementsByTagName('head')[0].appendChild(script);
|
|
214
214
|
return function () {
|
|
215
|
-
document.getElementsByTagName(
|
|
215
|
+
document.getElementsByTagName('head')[0].removeChild(script);
|
|
216
216
|
};
|
|
217
217
|
}, []);
|
|
218
|
-
return (jsxRuntime.
|
|
218
|
+
return (jsxRuntime.jsx(BunnyContext.Provider, __assign({ value: {
|
|
219
219
|
darkMode: darkMode,
|
|
220
220
|
graphQLClient: graphQLClient,
|
|
221
221
|
apiHost: apiHost,
|
|
222
222
|
token: token,
|
|
223
223
|
onTokenExpired: onTokenExpired,
|
|
224
|
-
} }, { children:
|
|
224
|
+
} }, { children: jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsxRuntime.jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children: children })) })) })));
|
|
225
225
|
}
|
|
226
226
|
function ContextualWrapper(_a) {
|
|
227
227
|
var children = _a.children, darkMode = _a.darkMode, configProviderProps = _a.configProviderProps;
|
|
228
|
-
var _b = react.
|
|
229
|
-
var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, token = _c.token;
|
|
228
|
+
var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, token = _b.token;
|
|
230
229
|
var branding = reactQuery.useQuery({
|
|
231
230
|
queryKey: common.QueryKeyFactory.default.brandingKey(token),
|
|
232
231
|
queryFn: function () { return getBranding({ token: token, apiHost: apiHost }); },
|
|
@@ -236,11 +235,11 @@ function ContextualWrapper(_a) {
|
|
|
236
235
|
var _a;
|
|
237
236
|
// This is to determine if the secondary color should be white or black
|
|
238
237
|
var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor)
|
|
239
|
-
?
|
|
238
|
+
? '#' + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16))
|
|
240
239
|
: common.DEFAULT_BRAND_COLOR;
|
|
241
240
|
var secondaryColor = common.DEFAULT_SECONDARY_COLOR;
|
|
242
241
|
if (!isMobile && common.isColorTooDark(branding === null || branding === void 0 ? void 0 : branding.accentColor))
|
|
243
|
-
secondaryColor =
|
|
242
|
+
secondaryColor = '#ffffff';
|
|
244
243
|
var topNavImageUrl = (branding === null || branding === void 0 ? void 0 : branding.topNavImageUrl) || common.DEFAULT_TOP_NAV_IMAGE_URL;
|
|
245
244
|
var accentColor = (branding === null || branding === void 0 ? void 0 : branding.accentColor) || common.DEFAULT_ACCENT_COLOR;
|
|
246
245
|
return {
|
|
@@ -250,41 +249,27 @@ function ContextualWrapper(_a) {
|
|
|
250
249
|
topNavImageUrl: topNavImageUrl,
|
|
251
250
|
};
|
|
252
251
|
}, [branding, isMobile]);
|
|
253
|
-
// Check if Inter font is loaded
|
|
254
|
-
react.useEffect(function () {
|
|
255
|
-
document.fonts.ready.then(function () {
|
|
256
|
-
setInterFontLoaded(true);
|
|
257
|
-
});
|
|
258
|
-
}, []);
|
|
259
|
-
if (!interFontLoaded)
|
|
260
|
-
return null;
|
|
261
252
|
return (jsxRuntime.jsx(recoil.RecoilRoot, { children: jsxRuntime.jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsxRuntime.jsx(antd.ConfigProvider, __assign({ theme: __assign({ algorithm: darkMode ? theme__default["default"].darkAlgorithm : theme__default["default"].defaultAlgorithm, token: {
|
|
262
253
|
borderRadius: 4,
|
|
263
254
|
colorPrimary: entityBranding.brandColor,
|
|
264
255
|
colorLink: entityBranding.brandColor,
|
|
265
256
|
colorLinkActive: entityBranding.brandColor,
|
|
266
257
|
colorLinkHover: entityBranding.brandColor,
|
|
267
|
-
fontFamily:
|
|
258
|
+
fontFamily: 'inherit',
|
|
268
259
|
colorBorder: common.INPUT_BORDER_COLOR,
|
|
269
260
|
lineHeight: 1,
|
|
270
261
|
fontSize: 14,
|
|
271
262
|
}, components: {
|
|
272
263
|
Button: {
|
|
273
|
-
defaultShadow:
|
|
274
|
-
boxShadowSecondary:
|
|
275
|
-
fontWeight:
|
|
264
|
+
defaultShadow: 'none',
|
|
265
|
+
boxShadowSecondary: 'none',
|
|
266
|
+
fontWeight: 'normal',
|
|
276
267
|
contentFontSizeLG: 14,
|
|
277
|
-
colorBgContainerDisabled: darkMode
|
|
278
|
-
|
|
279
|
-
: "#eef0f2",
|
|
280
|
-
borderColorDisabled: darkMode
|
|
281
|
-
? "var(--row-background-dark)"
|
|
282
|
-
: "#eef0f2",
|
|
268
|
+
colorBgContainerDisabled: darkMode ? 'var(--row-background-dark)' : '#eef0f2',
|
|
269
|
+
borderColorDisabled: darkMode ? 'var(--row-background-dark)' : '#eef0f2',
|
|
283
270
|
},
|
|
284
271
|
Drawer: {
|
|
285
|
-
colorBgElevated: darkMode
|
|
286
|
-
? "var(--row-background-dark)"
|
|
287
|
-
: common.SLATE_50,
|
|
272
|
+
colorBgElevated: darkMode ? 'var(--row-background-dark)' : common.SLATE_50,
|
|
288
273
|
},
|
|
289
274
|
Divider: {
|
|
290
275
|
colorSplit: darkMode ? common.SLATE_400 : common.SLATE_200,
|
|
@@ -292,7 +277,7 @@ function ContextualWrapper(_a) {
|
|
|
292
277
|
},
|
|
293
278
|
Form: {
|
|
294
279
|
itemMarginBottom: 0,
|
|
295
|
-
verticalLabelPadding:
|
|
280
|
+
verticalLabelPadding: '4px',
|
|
296
281
|
},
|
|
297
282
|
} }, configProviderProps) }, { children: children })) })) }));
|
|
298
283
|
}
|
|
@@ -381,11 +366,11 @@ var InvoiceQuoteView = function (_a) {
|
|
|
381
366
|
var _b = react.useContext(InvoiceQuoteContext), shadow = _b.shadow, hideDownloadButton = _b.hideDownloadButton;
|
|
382
367
|
var isMobile = common.useIsMobile();
|
|
383
368
|
var buttonsVisible = formattedInvoice && (!hideDownloadButton || onBackButtonClick);
|
|
384
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full grow ".concat(isMobile ? "overflow-hidden" : "") }, { children: [buttonsVisible ? (jsxRuntime.jsxs("div", __assign({ className: "flex justify-between items-center pb-4 ".concat(isMobile ? "bunny-shadow-padding-x" : ""), id: "acceptance" }, { children: [jsxRuntime.jsx("div", { children: onBackButtonClick ? (jsxRuntime.jsx(antd.Button, __assign({ className: "pl-0", onClick: onBackButtonClick, style: {
|
|
369
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-grow ".concat(isMobile ? "bunny-overflow-hidden" : "") }, { children: [buttonsVisible ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between bunny-items-center bunny-pb-4 ".concat(isMobile ? "bunny-shadow-padding-x" : ""), id: "acceptance" }, { children: [jsxRuntime.jsx("div", { children: onBackButtonClick ? (jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-pl-0", onClick: onBackButtonClick, style: {
|
|
385
370
|
color: secondaryColor,
|
|
386
371
|
}, type: "link" }, { children: backButtonName || "Back" }))) : null }), !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
|
|
387
372
|
return downloadFile(apiHost + "/api/pdf/invoice/" + formattedInvoice.id, token);
|
|
388
|
-
} }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 grow w-full bunny-shadow-padding-xb overflow-auto" }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 p-4 w-full bg-white ".concat(shadow ? shadow : "shadow-md", " rounded-md"), style: {
|
|
373
|
+
} }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : "bunny-shadow-md", " bunny-rounded-md"), style: {
|
|
389
374
|
minWidth: "750px",
|
|
390
375
|
} }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] })))] })));
|
|
391
376
|
};
|
|
@@ -442,16 +427,18 @@ function InvoicePDF(_a) {
|
|
|
442
427
|
}, title: "Invoice PDF", width: "100%" }));
|
|
443
428
|
}
|
|
444
429
|
|
|
445
|
-
var paymentMethodsQuery =
|
|
430
|
+
var paymentMethodsQuery = function (filter) { return "query paymentMethods {\n paymentMethods ".concat(filter ? "(".concat(filter, ")") : '', " {\n nodes {\n id\n disabled\n pluginId\n accountId\n expirationDate\n plugin {\n guid\n id\n }\n state\n metadata {\n issuer\n identifier\n kind\n description\n icon\n }\n isDefault\n }\n }\n}"); };
|
|
446
431
|
var getPaymentMethods = function (_a) {
|
|
447
|
-
var apiHost = _a.apiHost, token = _a.token;
|
|
432
|
+
var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
|
|
448
433
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
449
434
|
var response, paymentMethods;
|
|
450
435
|
var _b;
|
|
451
436
|
return __generator(this, function (_c) {
|
|
452
437
|
switch (_c.label) {
|
|
453
438
|
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
454
|
-
query: paymentMethodsQuery
|
|
439
|
+
query: paymentMethodsQuery(accountId
|
|
440
|
+
? "filter: \"accountId is ".concat(accountId, " && disabled is false\"")
|
|
441
|
+
: 'filter: "disabled is false"'),
|
|
455
442
|
token: token,
|
|
456
443
|
apiHost: apiHost,
|
|
457
444
|
})];
|
|
@@ -470,7 +457,7 @@ var usePaymentMethod = function (_a) {
|
|
|
470
457
|
accountId: accountId,
|
|
471
458
|
token: token,
|
|
472
459
|
}),
|
|
473
|
-
queryFn: function () { return getPaymentMethods({ apiHost: apiHost, token: token }); },
|
|
460
|
+
queryFn: function () { return getPaymentMethods({ apiHost: apiHost, token: token, accountId: accountId }); },
|
|
474
461
|
}), data = _b.data, isLoading = _b.isLoading;
|
|
475
462
|
return {
|
|
476
463
|
paymentMethods: data,
|
|
@@ -479,28 +466,6 @@ var usePaymentMethod = function (_a) {
|
|
|
479
466
|
};
|
|
480
467
|
};
|
|
481
468
|
|
|
482
|
-
var usePlugins = function (_a) {
|
|
483
|
-
var apiHost = _a.apiHost, token = _a.token;
|
|
484
|
-
var response = reactQuery.useQuery({
|
|
485
|
-
queryKey: common.QueryKeyFactory.default.pluginsKey(token || ""),
|
|
486
|
-
queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
487
|
-
var plugins;
|
|
488
|
-
return __generator(this, function (_a) {
|
|
489
|
-
switch (_a.label) {
|
|
490
|
-
case 0: return [4 /*yield*/, common.getPlugins({
|
|
491
|
-
token: token,
|
|
492
|
-
apiHost: apiHost,
|
|
493
|
-
})];
|
|
494
|
-
case 1:
|
|
495
|
-
plugins = _a.sent();
|
|
496
|
-
return [2 /*return*/, plugins];
|
|
497
|
-
}
|
|
498
|
-
});
|
|
499
|
-
}); },
|
|
500
|
-
});
|
|
501
|
-
return response;
|
|
502
|
-
};
|
|
503
|
-
|
|
504
469
|
var filterPaymentPlugins = function (plugins) {
|
|
505
470
|
return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
|
|
506
471
|
var _a, _b, _c, _d;
|
|
@@ -509,19 +474,44 @@ var filterPaymentPlugins = function (plugins) {
|
|
|
509
474
|
((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.frontend) === null || _d === void 0 ? void 0 : _d.length);
|
|
510
475
|
});
|
|
511
476
|
};
|
|
477
|
+
var MUTATION$8 = "{\n paymentPlugins {\n enabled\n entities\n guid\n hidden\n id\n name\n status\n type\n webhookEnabled\n components\n }\n}";
|
|
478
|
+
var getPaymentPlugins = function (_a) {
|
|
479
|
+
var apiHost = _a.apiHost, token = _a.token;
|
|
480
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
481
|
+
var response;
|
|
482
|
+
return __generator(this, function (_b) {
|
|
483
|
+
switch (_b.label) {
|
|
484
|
+
case 0:
|
|
485
|
+
_b.trys.push([0, 2, , 3]);
|
|
486
|
+
return [4 /*yield*/, common.gqlRequest({
|
|
487
|
+
query: MUTATION$8,
|
|
488
|
+
token: token,
|
|
489
|
+
apiHost: apiHost,
|
|
490
|
+
})];
|
|
491
|
+
case 1:
|
|
492
|
+
response = _b.sent();
|
|
493
|
+
return [2 /*return*/, (response === null || response === void 0 ? void 0 : response.paymentPlugins) || []];
|
|
494
|
+
case 2:
|
|
495
|
+
_b.sent();
|
|
496
|
+
return [2 /*return*/, []];
|
|
497
|
+
case 3: return [2 /*return*/];
|
|
498
|
+
}
|
|
499
|
+
});
|
|
500
|
+
});
|
|
501
|
+
};
|
|
512
502
|
var usePaymentPlugins = function (_a) {
|
|
513
503
|
var apiHost = _a.apiHost, token = _a.token;
|
|
514
|
-
var _b =
|
|
515
|
-
|
|
516
|
-
token: token,
|
|
517
|
-
}),
|
|
518
|
-
var
|
|
519
|
-
var paymentMethodAllowedPlugins =
|
|
504
|
+
var _b = reactQuery.useQuery({
|
|
505
|
+
queryKey: ["paymentPlugins", token],
|
|
506
|
+
queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token }); },
|
|
507
|
+
}), paymentPlugins = _b.data, isFetched = _b.isFetched;
|
|
508
|
+
var filteredPaymentPlugins = filterPaymentPlugins(paymentPlugins);
|
|
509
|
+
var paymentMethodAllowedPlugins = filteredPaymentPlugins === null || filteredPaymentPlugins === void 0 ? void 0 : filteredPaymentPlugins.filter(function (plugin) {
|
|
520
510
|
var _a, _b;
|
|
521
511
|
return (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b.some(function (component) { var _a; return (_a = component === null || component === void 0 ? void 0 : component.scenarios) === null || _a === void 0 ? void 0 : _a.includes("admin-payment_method"); });
|
|
522
512
|
});
|
|
523
513
|
return {
|
|
524
|
-
paymentPlugins:
|
|
514
|
+
paymentPlugins: filteredPaymentPlugins,
|
|
525
515
|
paymentMethodAllowedPlugins: paymentMethodAllowedPlugins,
|
|
526
516
|
isFetched: isFetched,
|
|
527
517
|
};
|
|
@@ -714,7 +704,7 @@ var ActualCheckoutFooter = function (_a) {
|
|
|
714
704
|
}
|
|
715
705
|
});
|
|
716
706
|
}); };
|
|
717
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "") }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isPaying, onClick: function () {
|
|
707
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-gap-2 ".concat(noPadding ? "" : "") }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: isPaying, onClick: function () {
|
|
718
708
|
setIsPaying(true);
|
|
719
709
|
handlePaymentSubmit();
|
|
720
710
|
}, size: isMobile ? "large" : "middle", type: "primary" }, { children: "".concat(isPaying ? "Paying" : "Pay", " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : "") })) })));
|
|
@@ -728,14 +718,14 @@ var CheckoutFooter = function (_a) {
|
|
|
728
718
|
|
|
729
719
|
// Automatically sets the default payment method if there is none currently set
|
|
730
720
|
var useAutoSetDefaultPaymentMethod = function (_a) {
|
|
731
|
-
var accountId = _a.accountId, token = _a.token, handleSetDefault = _a.handleSetDefault, setDefaultPaymentMethodLoading = _a.setDefaultPaymentMethodLoading;
|
|
721
|
+
var accountId = _a.accountId, token = _a.token, handleSetDefault = _a.handleSetDefault, setDefaultPaymentMethodLoading = _a.setDefaultPaymentMethodLoading, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
|
|
732
722
|
var queryClient = reactQuery.useQueryClient();
|
|
733
723
|
var apiHost = react.useContext(BunnyContext).apiHost;
|
|
734
|
-
var
|
|
724
|
+
var _c = usePaymentMethod({
|
|
735
725
|
accountId: accountId,
|
|
736
726
|
token: token,
|
|
737
727
|
apiHost: apiHost,
|
|
738
|
-
}), storedPaymentMethods =
|
|
728
|
+
}), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod;
|
|
739
729
|
// Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
|
|
740
730
|
function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
|
|
741
731
|
var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
|
|
@@ -754,7 +744,7 @@ var useAutoSetDefaultPaymentMethod = function (_a) {
|
|
|
754
744
|
}
|
|
755
745
|
}
|
|
756
746
|
react.useEffect(function () {
|
|
757
|
-
if (setDefaultPaymentMethodLoading)
|
|
747
|
+
if (setDefaultPaymentMethodLoading || !enabled)
|
|
758
748
|
return;
|
|
759
749
|
if ((storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) > 0 && !defaultPaymentMethod) {
|
|
760
750
|
handleSetDefault(storedPaymentMethods[0]);
|
|
@@ -822,7 +812,7 @@ var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
|
822
812
|
var Card = function (_a) {
|
|
823
813
|
var children = _a.children, className = _a.className, style = _a.style;
|
|
824
814
|
var darkMode = react.useContext(BunnyContext).darkMode;
|
|
825
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col rounded-md shadow-md ".concat(className), style: __assign(__assign({}, style), { backgroundColor: darkMode
|
|
815
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-rounded-md bunny-shadow-md ".concat(className), style: __assign(__assign({}, style), { backgroundColor: darkMode
|
|
826
816
|
? "var(--row-background-dark)"
|
|
827
817
|
: "var(--row-background)" }) }, { children: children })));
|
|
828
818
|
};
|
|
@@ -852,7 +842,7 @@ var tagStyleMap = {
|
|
|
852
842
|
// Please use this component instead of the antd Tag component directly to maintain consistent styling.
|
|
853
843
|
var CustomizedTag = function (_a) {
|
|
854
844
|
var children = _a.children, color = _a.color, className = _a.className;
|
|
855
|
-
return (jsxRuntime.jsx(antd.Tag, __assign({ color: color, style: color ? tagStyleMap[color] : undefined, className: "m-0 font-medium rounded-full border-none whitespace-nowrap ".concat(className) }, { children: children })));
|
|
845
|
+
return (jsxRuntime.jsx(antd.Tag, __assign({ color: color, style: color ? tagStyleMap[color] : undefined, className: "bunny-m-0 bunny-font-medium bunny-rounded-full bunny-border-none bunny-whitespace-nowrap ".concat(className) }, { children: children })));
|
|
856
846
|
};
|
|
857
847
|
|
|
858
848
|
var Amex = function (_a) {
|
|
@@ -910,7 +900,7 @@ var MiniCreditCard = function (_a) {
|
|
|
910
900
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
911
901
|
}
|
|
912
902
|
var isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
|
|
913
|
-
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"), id: id }, { 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-2 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$p, { children: capitalize((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$p, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$p, { children: (_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.identifier })] }), jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null })] })) })), !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) }))] })) : (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: "12px" } }, { children: "No payment methods" })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" })] }))) })));
|
|
903
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border"), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$p, { children: capitalize((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$p, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$p, { children: (_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.identifier })] }), jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null })] })) })), !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$p, __assign({ className: "bunny-text-slate-400", style: { fontSize: "12px" } }, { children: "No payment methods" })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" })] }))) })));
|
|
914
904
|
};
|
|
915
905
|
var DropdownMenu = function (_a) {
|
|
916
906
|
var setDefault = _a.setDefault, remove = _a.remove, isDefault = _a.isDefault, id = _a.id;
|
|
@@ -967,7 +957,7 @@ var SavePaymentMethodFooter = function (_a) {
|
|
|
967
957
|
var isSaving = _a.isSaving, onSave = _a.onSave, noPadding = _a.noPadding;
|
|
968
958
|
var isMobile = common.useIsMobile();
|
|
969
959
|
var onClickCancel = react.useContext(PaymentContext).onClickCancel;
|
|
970
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: [onClickCancel && (jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", size: isMobile ? "large" : "middle", onClick: function () { return onClickCancel(); } }, { children: "Cancel" }))), jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isSaving, onClick: onSave, size: isMobile ? "large" : "middle", type: "primary" }, { children: isSaving ? "Saving" : "Save" }))] })));
|
|
960
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: [onClickCancel && (jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", size: isMobile ? "large" : "middle", onClick: function () { return onClickCancel(); } }, { children: "Cancel" }))), jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: isSaving, onClick: onSave, size: isMobile ? "large" : "middle", type: "primary" }, { children: isSaving ? "Saving" : "Save" }))] })));
|
|
971
961
|
};
|
|
972
962
|
|
|
973
963
|
var DIGIT_REGEX = /\d/;
|
|
@@ -1041,7 +1031,7 @@ var DemoPayCardCvc = function (_a) {
|
|
|
1041
1031
|
var cvc = event.target.value.replace(/\D/g, "");
|
|
1042
1032
|
onChange(cvc);
|
|
1043
1033
|
};
|
|
1044
|
-
return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { name: "cvc", autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: value, maxLength: 3, placeholder: placeholder || "CVC" }) })));
|
|
1034
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-grow" }, { children: jsxRuntime.jsx(antd.Input, { name: "cvc", autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: value, maxLength: 3, placeholder: placeholder || "CVC" }) })));
|
|
1045
1035
|
};
|
|
1046
1036
|
|
|
1047
1037
|
var CARD_NUMBER_MAX_LENGTH = 19; // Why 19 instead of 16? Because we add spaces
|
|
@@ -1058,7 +1048,7 @@ var DemoPayCardNumber = function (_a) {
|
|
|
1058
1048
|
var number = event.target.value.replace(/\s/g, "");
|
|
1059
1049
|
onChange(number);
|
|
1060
1050
|
};
|
|
1061
|
-
return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { name: "cardNumber", autoFocus: autoFocus, maxLength: CARD_NUMBER_MAX_LENGTH, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, placeholder: placeholder || "Card Number", value: formatCardNumber(value) }) })));
|
|
1051
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-grow" }, { children: jsxRuntime.jsx(antd.Input, { name: "cardNumber", autoFocus: autoFocus, maxLength: CARD_NUMBER_MAX_LENGTH, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, placeholder: placeholder || "Card Number", value: formatCardNumber(value) }) })));
|
|
1062
1052
|
};
|
|
1063
1053
|
|
|
1064
1054
|
var DemoPayExpiry = function (_a) {
|
|
@@ -1071,7 +1061,7 @@ var DemoPayExpiry = function (_a) {
|
|
|
1071
1061
|
var expiry = event.target.value.replace(/\D/g, "");
|
|
1072
1062
|
onChange(expiry);
|
|
1073
1063
|
};
|
|
1074
|
-
return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { name: "expiry", autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: formatCardExpiry(value), maxLength: 5, placeholder: placeholder || "MM/YY" }) })));
|
|
1064
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-grow" }, { children: jsxRuntime.jsx(antd.Input, { name: "expiry", autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: formatCardExpiry(value), maxLength: 5, placeholder: placeholder || "MM/YY" }) })));
|
|
1075
1065
|
};
|
|
1076
1066
|
|
|
1077
1067
|
function useSave$1(_a) {
|
|
@@ -1185,7 +1175,7 @@ var DemoPayForm = function (_a) {
|
|
|
1185
1175
|
var onCardCvcChange = function (cvc) {
|
|
1186
1176
|
setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
|
|
1187
1177
|
};
|
|
1188
|
-
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, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
|
|
1178
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$o, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
|
|
1189
1179
|
};
|
|
1190
1180
|
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) {
|
|
1191
1181
|
var darkMode = _a.darkMode;
|
|
@@ -1427,7 +1417,7 @@ var CardIcon = function () {
|
|
|
1427
1417
|
var Text$n = antd.Typography.Text;
|
|
1428
1418
|
var PaymentMethodSelector = function (_a) {
|
|
1429
1419
|
var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
|
|
1430
|
-
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)); }) })));
|
|
1420
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsxRuntime.jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
|
|
1431
1421
|
};
|
|
1432
1422
|
var PaymentOption = function (_a) {
|
|
1433
1423
|
var selected = _a.selected, paymentPlugin = _a.paymentPlugin, onClick = _a.onClick, name = _a.name;
|
|
@@ -1435,9 +1425,9 @@ var PaymentOption = function (_a) {
|
|
|
1435
1425
|
var darkMode = react.useContext(BunnyContext).darkMode;
|
|
1436
1426
|
var isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("ach");
|
|
1437
1427
|
var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
|
|
1438
|
-
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
|
|
1428
|
+
return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "bunny-flex bunny-justify-between bunny-items-center bunny-w-full bunny-cursor-pointer bunny-py-2 bunny-px-4 bunny-rounded bunny-border-solid ".concat(darkMode
|
|
1439
1429
|
? "var(--row-background-dark) border-gray-500"
|
|
1440
|
-
: "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, {}))] })));
|
|
1430
|
+
: "bunny-bg-slate-50 bunny-border-slate-200", " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-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: "bunny-text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
|
|
1441
1431
|
};
|
|
1442
1432
|
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) {
|
|
1443
1433
|
var $brandColor = _a.$brandColor, $selected = _a.$selected;
|
|
@@ -1449,13 +1439,13 @@ var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateOb
|
|
|
1449
1439
|
});
|
|
1450
1440
|
var templateObject_1$9;
|
|
1451
1441
|
|
|
1452
|
-
function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRemovePaymentMethod) {
|
|
1442
|
+
function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRemovePaymentMethod, onError) {
|
|
1453
1443
|
var _this = this;
|
|
1454
1444
|
var queryClient = reactQuery.useQueryClient();
|
|
1455
1445
|
var showErrorNotification = common.useErrorNotification();
|
|
1456
1446
|
var showSuccessNotification = common.useSuccessNotification();
|
|
1457
1447
|
var removePaymentMethod = react.useCallback(function (data) { return __awaiter(_this, void 0, void 0, function () {
|
|
1458
|
-
var plugin;
|
|
1448
|
+
var plugin, availablePlugins;
|
|
1459
1449
|
return __generator(this, function (_a) {
|
|
1460
1450
|
switch (_a.label) {
|
|
1461
1451
|
case 0:
|
|
@@ -1463,7 +1453,7 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRem
|
|
|
1463
1453
|
if (!(data && plugin)) return [3 /*break*/, 2];
|
|
1464
1454
|
return [4 /*yield*/, common.invokePlugin({
|
|
1465
1455
|
plugin: plugin,
|
|
1466
|
-
method:
|
|
1456
|
+
method: 'remove_payment_method',
|
|
1467
1457
|
payload: {
|
|
1468
1458
|
payment_method_id: data.id,
|
|
1469
1459
|
account_id: accountId,
|
|
@@ -1472,7 +1462,7 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRem
|
|
|
1472
1462
|
apiHost: apiHost,
|
|
1473
1463
|
})
|
|
1474
1464
|
.then(function () {
|
|
1475
|
-
showSuccessNotification(
|
|
1465
|
+
showSuccessNotification('Payment method was removed', 'Success');
|
|
1476
1466
|
// TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
|
|
1477
1467
|
queryClient.invalidateQueries({
|
|
1478
1468
|
queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
|
|
@@ -1483,26 +1473,30 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRem
|
|
|
1483
1473
|
onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod();
|
|
1484
1474
|
})
|
|
1485
1475
|
.catch(function (error) {
|
|
1486
|
-
showErrorNotification(error.message,
|
|
1476
|
+
showErrorNotification(error.message, 'Error removing payment method');
|
|
1487
1477
|
})];
|
|
1488
1478
|
case 1:
|
|
1489
1479
|
_a.sent();
|
|
1490
|
-
|
|
1491
|
-
case 2:
|
|
1480
|
+
return [3 /*break*/, 3];
|
|
1481
|
+
case 2:
|
|
1482
|
+
availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map(function (plugin) { var _a, _b, _c; return (_c = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.name; });
|
|
1483
|
+
onError === null || onError === void 0 ? void 0 : onError("Either the payment method was not found or the plugin was not present. Available plugins: ".concat(availablePlugins === null || availablePlugins === void 0 ? void 0 : availablePlugins.join(', ')));
|
|
1484
|
+
_a.label = 3;
|
|
1485
|
+
case 3: return [2 /*return*/];
|
|
1492
1486
|
}
|
|
1493
1487
|
});
|
|
1494
1488
|
}); }, [paymentPlugins, token, apiHost, queryClient]);
|
|
1495
1489
|
return removePaymentMethod;
|
|
1496
1490
|
}
|
|
1497
1491
|
|
|
1498
|
-
function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId) {
|
|
1492
|
+
function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, onError, onSuccess) {
|
|
1499
1493
|
var _this = this;
|
|
1500
1494
|
var queryClient = reactQuery.useQueryClient();
|
|
1501
1495
|
var showErrorNotification = common.useErrorNotification();
|
|
1502
1496
|
var showSuccessNotification = common.useSuccessNotification();
|
|
1503
1497
|
var _a = react.useState(false), loading = _a[0], setLoading = _a[1];
|
|
1504
1498
|
var setDefaultPaymentMethod = react.useCallback(function (data) { return __awaiter(_this, void 0, void 0, function () {
|
|
1505
|
-
var plugin;
|
|
1499
|
+
var plugin, availablePlugins;
|
|
1506
1500
|
return __generator(this, function (_a) {
|
|
1507
1501
|
switch (_a.label) {
|
|
1508
1502
|
case 0:
|
|
@@ -1511,7 +1505,7 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId) {
|
|
|
1511
1505
|
setLoading(true);
|
|
1512
1506
|
return [4 /*yield*/, common.invokePlugin({
|
|
1513
1507
|
plugin: plugin,
|
|
1514
|
-
method:
|
|
1508
|
+
method: 'assign_default_payment_method',
|
|
1515
1509
|
payload: {
|
|
1516
1510
|
payment_method_id: data.id,
|
|
1517
1511
|
account_id: accountId,
|
|
@@ -1520,7 +1514,8 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId) {
|
|
|
1520
1514
|
apiHost: apiHost,
|
|
1521
1515
|
})
|
|
1522
1516
|
.then(function () {
|
|
1523
|
-
showSuccessNotification("Payment method ".concat(data.metadata.identifier, " was set as default"),
|
|
1517
|
+
showSuccessNotification("Payment method ".concat(data.metadata.identifier, " was set as default"), 'Success');
|
|
1518
|
+
onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
|
|
1524
1519
|
// TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
|
|
1525
1520
|
queryClient.invalidateQueries({
|
|
1526
1521
|
queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
|
|
@@ -1531,15 +1526,19 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId) {
|
|
|
1531
1526
|
})
|
|
1532
1527
|
.catch(function (error) {
|
|
1533
1528
|
setLoading(false);
|
|
1534
|
-
showErrorNotification(error.message,
|
|
1529
|
+
showErrorNotification(error.message, 'Error removing payment method');
|
|
1535
1530
|
})
|
|
1536
1531
|
.finally(function () {
|
|
1537
1532
|
setLoading(false);
|
|
1538
1533
|
})];
|
|
1539
1534
|
case 1:
|
|
1540
1535
|
_a.sent();
|
|
1541
|
-
|
|
1542
|
-
case 2:
|
|
1536
|
+
return [3 /*break*/, 3];
|
|
1537
|
+
case 2:
|
|
1538
|
+
availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map(function (plugin) { var _a, _b, _c; return (_c = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.name; });
|
|
1539
|
+
onError === null || onError === void 0 ? void 0 : onError("Either the payment method was not found or the plugin was not present. Available plugins: ".concat(availablePlugins === null || availablePlugins === void 0 ? void 0 : availablePlugins.join(', ')));
|
|
1540
|
+
_a.label = 3;
|
|
1541
|
+
case 3: return [2 /*return*/];
|
|
1543
1542
|
}
|
|
1544
1543
|
});
|
|
1545
1544
|
}); }, [paymentPlugins, token, apiHost, queryClient]);
|
|
@@ -1547,9 +1546,10 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId) {
|
|
|
1547
1546
|
}
|
|
1548
1547
|
|
|
1549
1548
|
var Panel = antd.Collapse.Panel;
|
|
1549
|
+
var showErrorNotification$1 = common.useErrorNotification();
|
|
1550
1550
|
var PaymentForm = function (_a) {
|
|
1551
1551
|
var _b;
|
|
1552
|
-
var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, customPaymentForms = _a.customPaymentForms, _c = _a.useAllPaymentPlugins, useAllPaymentPlugins = _c === void 0 ? false : _c;
|
|
1552
|
+
var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, customPaymentForms = _a.customPaymentForms, _c = _a.useAllPaymentPlugins, useAllPaymentPlugins = _c === void 0 ? false : _c;
|
|
1553
1553
|
// Local state
|
|
1554
1554
|
var _d = react.useState(false), showPaymentMethodForm = _d[0], setShowPaymentMethodForm = _d[1];
|
|
1555
1555
|
// Simple hooks
|
|
@@ -1580,19 +1580,26 @@ var PaymentForm = function (_a) {
|
|
|
1580
1580
|
(invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
|
|
1581
1581
|
currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
|
|
1582
1582
|
// Custom hooks
|
|
1583
|
-
var _g = useSetDefaultPaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId
|
|
1583
|
+
var _g = useSetDefaultPaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId, function (message) {
|
|
1584
|
+
showErrorNotification$1(message, 'Error setting default payment method');
|
|
1585
|
+
}, function () {
|
|
1586
|
+
onSetDefaultPaymentMethod === null || onSetDefaultPaymentMethod === void 0 ? void 0 : onSetDefaultPaymentMethod();
|
|
1587
|
+
}), handleSetDefault = _g.setDefaultPaymentMethod, setDefaultPaymentMethodLoading = _g.loading;
|
|
1584
1588
|
useAutoSetDefaultPaymentMethod({
|
|
1585
1589
|
accountId: accountId,
|
|
1586
1590
|
token: token,
|
|
1587
1591
|
handleSetDefault: handleSetDefault,
|
|
1588
1592
|
setDefaultPaymentMethodLoading: setDefaultPaymentMethodLoading,
|
|
1593
|
+
enabled: !!paymentMethodAllowedPlugins,
|
|
1589
1594
|
});
|
|
1590
1595
|
var _h = usePaymentMethodSelectorPlugin({
|
|
1591
1596
|
defaultPaymentMethod: defaultPaymentMethod,
|
|
1592
1597
|
defaultPaymentMethodPlugin: defaultPaymentMethodPlugin,
|
|
1593
1598
|
paymentMethodAllowedPlugins: paymentMethodAllowedPlugins,
|
|
1594
1599
|
}), selectorPaymentMethodPlugin = _h.selectorPaymentMethodPlugin, setSelectorPaymentMethodPlugin = _h.setSelectorPaymentMethodPlugin;
|
|
1595
|
-
var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId, onRemovePaymentMethod)
|
|
1600
|
+
var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId, onRemovePaymentMethod, function (message) {
|
|
1601
|
+
showErrorNotification$1(message, 'Error removing payment method');
|
|
1602
|
+
});
|
|
1596
1603
|
var handlePaymentSuccess = function () {
|
|
1597
1604
|
// Hide payment method selector and form
|
|
1598
1605
|
setShowPaymentMethodForm(false);
|
|
@@ -1609,7 +1616,7 @@ var PaymentForm = function (_a) {
|
|
|
1609
1616
|
setShowPaymentMethodForm(false);
|
|
1610
1617
|
};
|
|
1611
1618
|
if (isPaymentMethodLoading) {
|
|
1612
|
-
return jsxRuntime.jsx(antd.Skeleton, { active: true, className: "p-4" });
|
|
1619
|
+
return jsxRuntime.jsx(antd.Skeleton, { active: true, className: "bunny-p-4" });
|
|
1613
1620
|
}
|
|
1614
1621
|
return (jsxRuntime.jsx(PaymentContext.Provider, __assign({ value: {
|
|
1615
1622
|
onClickCancel: function () { return setShowPaymentMethodForm(false); },
|
|
@@ -1618,13 +1625,13 @@ var PaymentForm = function (_a) {
|
|
|
1618
1625
|
storedPaymentMethods: storedPaymentMethods,
|
|
1619
1626
|
defaultPaymentMethod: defaultPaymentMethod,
|
|
1620
1627
|
customCheckoutFunction: customCheckoutFunction,
|
|
1621
|
-
} }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsxRuntime.jsx(antd.Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ?
|
|
1628
|
+
} }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsxRuntime.jsx(antd.Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsxRuntime.jsx(Panel, __assign({ header: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !showPaymentMethodForm ? (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ onClick: function () {
|
|
1622
1629
|
setShowPaymentMethodForm(true);
|
|
1623
|
-
}, type: "default", className: "w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsxRuntime.jsx("div", __assign({ className: "flex flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin, customPaymentForms: customPaymentForms }) })))] })) }), "1") })), paying ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultPaymentMethod ? (jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethodPlugin }) }))) : null })) : null] }) })) })) })));
|
|
1630
|
+
}, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin, customPaymentForms: customPaymentForms }) })))] })) }), "1") })), paying ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultPaymentMethod ? (jsxRuntime.jsx("div", __assign({ className: "bunny-px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethodPlugin }) }))) : null })) : null] }) })) })) })));
|
|
1624
1631
|
};
|
|
1625
1632
|
function StripeWrapper(_a) {
|
|
1626
1633
|
var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
|
|
1627
|
-
var _b = useStripePlugin(plugin, apiHost, currencyId ||
|
|
1634
|
+
var _b = useStripePlugin(plugin, apiHost, currencyId || 'usd', token, accountId), stripe = _b.stripe, options = _b.options;
|
|
1628
1635
|
return (jsxRuntime.jsx(reactStripeJs.Elements, __assign({ options: options, stripe: stripe }, { children: children })));
|
|
1629
1636
|
}
|
|
1630
1637
|
|
|
@@ -1685,7 +1692,7 @@ function ActualInvoice() {
|
|
|
1685
1692
|
}, [formattedInvoice]);
|
|
1686
1693
|
if (!formattedInvoice)
|
|
1687
1694
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
1688
|
-
return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "", " ").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, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
|
|
1695
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? "bunny-flex-col bunny-w-full bunny-overflow-hidden" : "", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-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: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
|
|
1689
1696
|
}
|
|
1690
1697
|
|
|
1691
1698
|
var MUTATION$6 = 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 }"; };
|
|
@@ -1712,6 +1719,28 @@ var getFormattedQuote = function (_a) {
|
|
|
1712
1719
|
});
|
|
1713
1720
|
};
|
|
1714
1721
|
|
|
1722
|
+
var usePlugins = function (_a) {
|
|
1723
|
+
var apiHost = _a.apiHost, token = _a.token;
|
|
1724
|
+
var response = reactQuery.useQuery({
|
|
1725
|
+
queryKey: common.QueryKeyFactory.default.pluginsKey(token || ""),
|
|
1726
|
+
queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
1727
|
+
var plugins;
|
|
1728
|
+
return __generator(this, function (_a) {
|
|
1729
|
+
switch (_a.label) {
|
|
1730
|
+
case 0: return [4 /*yield*/, common.getPlugins({
|
|
1731
|
+
token: token,
|
|
1732
|
+
apiHost: apiHost,
|
|
1733
|
+
})];
|
|
1734
|
+
case 1:
|
|
1735
|
+
plugins = _a.sent();
|
|
1736
|
+
return [2 /*return*/, plugins];
|
|
1737
|
+
}
|
|
1738
|
+
});
|
|
1739
|
+
}); },
|
|
1740
|
+
});
|
|
1741
|
+
return response;
|
|
1742
|
+
};
|
|
1743
|
+
|
|
1715
1744
|
var filterSigningPlugins = function (plugins) {
|
|
1716
1745
|
return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
|
|
1717
1746
|
var _a, _b;
|
|
@@ -1904,10 +1933,10 @@ var PandadocPollingModal = function (_a) {
|
|
|
1904
1933
|
isVisible,
|
|
1905
1934
|
setVisible,
|
|
1906
1935
|
]);
|
|
1907
|
-
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 }))] })));
|
|
1936
|
+
return (jsxRuntime.jsxs(antd.Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-py-4 bunny-text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-center" }, { children: infoMessage }))] })));
|
|
1908
1937
|
};
|
|
1909
1938
|
|
|
1910
|
-
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
|
|
1939
|
+
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\n .ant-modal-header {\n border-bottom: none;\n padding: 1.5rem 1.5rem 0;\n margin: 0 !important;\n }\n .ant-modal-body {\n padding: 1rem 1.5rem 1.5rem;\n }\n .ant-modal-footer {\n border-top: none;\n padding: 0 1.5rem 1.5rem;\n margin: 0 !important;\n }\n"], ["\n .ant-modal-content {\n border-radius: 0.75rem;\n overflow: hidden;\n padding: 0 !important;\n }\n\n .ant-modal-header {\n border-bottom: none;\n padding: 1.5rem 1.5rem 0;\n margin: 0 !important;\n }\n .ant-modal-body {\n padding: 1rem 1.5rem 1.5rem;\n }\n .ant-modal-footer {\n border-top: none;\n padding: 0 1.5rem 1.5rem;\n margin: 0 !important;\n }\n"])));
|
|
1911
1940
|
var StyledModal$1 = function (props) {
|
|
1912
1941
|
return jsxRuntime.jsx(ModalOverrideBrandStylings, __assign({ closable: false }, props));
|
|
1913
1942
|
};
|
|
@@ -1943,13 +1972,13 @@ var AcceptQuoteModal = function (_a) {
|
|
|
1943
1972
|
sendAccept(changedFields);
|
|
1944
1973
|
})
|
|
1945
1974
|
.catch(function () { });
|
|
1946
|
-
}, 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, {}) })))] })) })));
|
|
1975
|
+
}, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-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, {}) })))] })) })));
|
|
1947
1976
|
};
|
|
1948
1977
|
|
|
1949
1978
|
var Text$m = antd.Typography.Text;
|
|
1950
1979
|
defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
|
|
1951
1980
|
function Quote(_a) {
|
|
1952
|
-
var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ?
|
|
1981
|
+
var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onQuoteLoaded = _a.onQuoteLoaded;
|
|
1953
1982
|
return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
|
|
1954
1983
|
id: id,
|
|
1955
1984
|
invoiceQuoteViewComponent: invoiceQuoteViewComponent,
|
|
@@ -2012,14 +2041,10 @@ function ActualQuote() {
|
|
|
2012
2041
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2013
2042
|
}
|
|
2014
2043
|
// Derived state
|
|
2015
|
-
var isAccepted = formattedQuote.state ===
|
|
2016
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ?
|
|
2044
|
+
var isAccepted = formattedQuote.state === 'ACCEPTED';
|
|
2045
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-end bunny-items-center bunny-gap-4", id: "acceptance", style: {
|
|
2017
2046
|
color: entityBranding.secondaryColor,
|
|
2018
|
-
} }, { 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
|
|
2019
|
-
? "flex w-full justify-end gap-2"
|
|
2020
|
-
: "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
|
|
2021
|
-
return downloadFile(apiHost + "/api/pdf/quote", token);
|
|
2022
|
-
} }, { 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: ((_b = (_a = formattedQuote.object) === null || _a === void 0 ? void 0 : _a.documents) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
|
|
2047
|
+
} }, { 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 ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { 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: ((_b = (_a = formattedQuote.object) === null || _a === void 0 ? void 0 : _a.documents) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
|
|
2023
2048
|
return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
|
|
2024
2049
|
}) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
|
|
2025
2050
|
}
|
|
@@ -19324,7 +19349,7 @@ var getColor = function (state) {
|
|
|
19324
19349
|
var Text$l = antd.Typography.Text;
|
|
19325
19350
|
var TransactionDate = function (_a) {
|
|
19326
19351
|
var date = _a.date;
|
|
19327
|
-
return jsxRuntime.jsx(Text$l, __assign({ className: "text-sm" }, { children: common.formatDate(date) }));
|
|
19352
|
+
return jsxRuntime.jsx(Text$l, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
|
|
19328
19353
|
};
|
|
19329
19354
|
|
|
19330
19355
|
var ArrowDownToLine = function (_a) {
|
|
@@ -19364,7 +19389,7 @@ var templateObject_1$6;
|
|
|
19364
19389
|
var Text$k = antd.Typography.Text;
|
|
19365
19390
|
var TransactionsEmptyState = function () {
|
|
19366
19391
|
var noTransactionsMessage = react.useContext(TransactionsListContext).noTransactionsMessage;
|
|
19367
|
-
return (jsxRuntime.jsx(Text$k, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
|
|
19392
|
+
return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
|
|
19368
19393
|
};
|
|
19369
19394
|
|
|
19370
19395
|
var Text$j = antd.Typography.Text;
|
|
@@ -19379,7 +19404,7 @@ var TransactionRowTitle = function (_a) {
|
|
|
19379
19404
|
if (!isInvoice(transaction) && !isQuote(transaction)) {
|
|
19380
19405
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
19381
19406
|
}
|
|
19382
|
-
return (jsxRuntime.jsx(Text$j, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
|
|
19407
|
+
return (jsxRuntime.jsx(Text$j, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
|
|
19383
19408
|
};
|
|
19384
19409
|
|
|
19385
19410
|
function transactionDateToDisplay(transaction, transactionDateType) {
|
|
@@ -19416,7 +19441,7 @@ var TransactionsListDesktop = function (_a) {
|
|
|
19416
19441
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
|
|
19417
19442
|
var _a, _b;
|
|
19418
19443
|
var isClickable = onTransactionClick !== undefined;
|
|
19419
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
|
|
19444
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
|
|
19420
19445
|
onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
|
|
19421
19446
|
}, style: {
|
|
19422
19447
|
backgroundColor: index % 2 === 0
|
|
@@ -19427,7 +19452,7 @@ var TransactionsListDesktop = function (_a) {
|
|
|
19427
19452
|
!showState &&
|
|
19428
19453
|
!showAmount &&
|
|
19429
19454
|
!showDownload &&
|
|
19430
|
-
!showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$i, { 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$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$i, { 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$i, { 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));
|
|
19455
|
+
!showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$i, { 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: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$i, { 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$i, { 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));
|
|
19431
19456
|
}) }));
|
|
19432
19457
|
};
|
|
19433
19458
|
|
|
@@ -19448,13 +19473,13 @@ var TransactionsListMobile = function (_a) {
|
|
|
19448
19473
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
|
|
19449
19474
|
var _a;
|
|
19450
19475
|
var isClickable = transaction.kind === "INVOICE";
|
|
19451
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
|
|
19476
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
|
|
19452
19477
|
onTransactionClick(transaction);
|
|
19453
19478
|
}, style: {
|
|
19454
19479
|
backgroundColor: index % 2 === 0
|
|
19455
19480
|
? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
|
|
19456
19481
|
: "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
|
|
19457
|
-
} }, { 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$h, { 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$h, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$h, { children: common.formatCurrency(transaction.transactionable.amount ||
|
|
19482
|
+
} }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$h, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$h, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$h, { children: common.formatCurrency(transaction.transactionable.amount ||
|
|
19458
19483
|
transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
|
|
19459
19484
|
}) }));
|
|
19460
19485
|
};
|
|
@@ -19572,8 +19597,8 @@ function TransactionsDisplay(_a) {
|
|
|
19572
19597
|
onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
|
|
19573
19598
|
setDrawerOpen(false);
|
|
19574
19599
|
}
|
|
19575
|
-
return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full bunny-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$g, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
|
|
19576
|
-
), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "") }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
|
|
19600
|
+
return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? "bunny-overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col bunny-gap-1" : "bunny-flex-row bunny-items-center", " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$g, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
|
|
19601
|
+
), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-w-full" : "") }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
|
|
19577
19602
|
? searchBarClassName
|
|
19578
19603
|
: "border border-slate-200", onChange: function (e) {
|
|
19579
19604
|
if (isNaN(Number(e.target.value))) {
|
|
@@ -19582,10 +19607,10 @@ function TransactionsDisplay(_a) {
|
|
|
19582
19607
|
onSearchValueChanged(e.target.value);
|
|
19583
19608
|
}, prefix: jsxRuntime.jsx(icons.SearchOutlined, {}), placeholder: "Search by id #", style: {
|
|
19584
19609
|
minWidth: "300px",
|
|
19585
|
-
}, value: search }) })))] }))) : null, jsxRuntime.jsx("div", __assign({ className: "grid w-full rounded-md overflow-auto ".concat(shadow), style: {
|
|
19610
|
+
}, value: search }) })))] }))) : null, jsxRuntime.jsx("div", __assign({ className: "bunny-grid bunny-w-full bunny-rounded-md bunny-overflow-auto ".concat(shadow), style: {
|
|
19586
19611
|
gridTemplateColumns: gridTemplateColumns(),
|
|
19587
19612
|
backgroundColor: "var(--row-background".concat(darkMode ? "-dark" : "", ")"),
|
|
19588
|
-
} }, { children: isMobile ? (jsxRuntime.jsx(TransactionsListMobile, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) : (jsxRuntime.jsx(TransactionsListDesktop, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) }))] })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: drawerTitle(), open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsxRuntime.jsx(antd.Drawer, __assign({ title: drawerTitle(), onClose: handleDisplayClose, open: drawerOpen, width: DISPLAY_WIDTH }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxRuntime.jsxs(antd.Card, __assign({ className: "shadow-md" }, { children: [jsxRuntime.jsx(antd.Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Amount:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: common.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Description:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Kind:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "State:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
|
|
19613
|
+
} }, { children: isMobile ? (jsxRuntime.jsx(TransactionsListMobile, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) : (jsxRuntime.jsx(TransactionsListDesktop, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) }))] })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: drawerTitle(), open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsxRuntime.jsx(antd.Drawer, __assign({ title: drawerTitle(), onClose: handleDisplayClose, open: drawerOpen, width: DISPLAY_WIDTH }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxRuntime.jsxs(antd.Card, __assign({ className: "bunny-shadow-md" }, { children: [jsxRuntime.jsx(antd.Typography.Title, __assign({ level: 2, className: "bunny-mb-4" }, { children: "Transaction Details" })), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Amount:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: common.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Description:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Kind:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "State:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
|
|
19589
19614
|
}
|
|
19590
19615
|
|
|
19591
19616
|
function Quotes(_a) {
|
|
@@ -19791,18 +19816,18 @@ function InitialSignupForm(_a) {
|
|
|
19791
19816
|
onSubmit(form.getFieldsValue());
|
|
19792
19817
|
});
|
|
19793
19818
|
}
|
|
19794
|
-
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: [
|
|
19819
|
+
return (jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-justify-between bunny-h-full bunny-w-full", form: form, layout: "vertical", autoComplete: "off" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-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: [
|
|
19795
19820
|
{ required: true, message: "Please input your email!" },
|
|
19796
19821
|
{ type: "email", message: "Please enter a valid email!" },
|
|
19797
19822
|
] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [
|
|
19798
19823
|
{ required: true, message: "Please input your company name!" },
|
|
19799
|
-
] }, { 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" })) })] })));
|
|
19824
|
+
] }, { 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: "bunny-w-full bunny-mt-4" }, { children: "Proceed to payment" })) })] })));
|
|
19800
19825
|
}
|
|
19801
19826
|
|
|
19802
19827
|
var Title = antd.Typography.Title, Text$f = antd.Typography.Text;
|
|
19803
19828
|
function PaymentSuccessDisplay(_a) {
|
|
19804
19829
|
var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
|
|
19805
|
-
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] })))] })));
|
|
19830
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-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: "bunny-mt-2 bunny-m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$f, __assign({ className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
|
|
19806
19831
|
}
|
|
19807
19832
|
|
|
19808
19833
|
var Text$e = antd.Typography.Text;
|
|
@@ -19810,7 +19835,7 @@ function PriceListDisplay(_a) {
|
|
|
19810
19835
|
var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
|
|
19811
19836
|
if (!priceListData)
|
|
19812
19837
|
return null;
|
|
19813
|
-
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] })) })) }));
|
|
19838
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-justify-between bunny-h-full bunny-my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ style: { fontSize: "16px" }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
|
|
19814
19839
|
}
|
|
19815
19840
|
|
|
19816
19841
|
var showErrorNotification = common.useErrorNotification();
|
|
@@ -19930,9 +19955,9 @@ function Signup(_a) {
|
|
|
19930
19955
|
var children = _a.children, className = _a.className, style = _a.style;
|
|
19931
19956
|
return isCardEnabled ? (jsxRuntime.jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsxRuntime.jsx("div", __assign({ className: className, style: style }, { children: children })));
|
|
19932
19957
|
};
|
|
19933
|
-
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
|
|
19934
|
-
? "items-center justify-center my-12"
|
|
19935
|
-
: "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, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
|
|
19958
|
+
return (jsxRuntime.jsx(WrapperComponent, __assign({ className: "bunny-p-4 bunny-flex bunny-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: "bunny-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: "bunny-flex ".concat(isMobile ? "bunny-flex-col" : "bunny-flex-row", " bunny-h-full bunny-w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col ".concat(isMobile ? "bunny-items-center" : "bunny-w-1/2 bunny-items-center") }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-h-full" : "bunny-my-4") }, { children: jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: isMobile ? undefined : "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex ".concat(isMobile
|
|
19959
|
+
? "bunny-items-center bunny-justify-center bunny-my-12"
|
|
19960
|
+
: "bunny-w-1/2 bunny-items-center bunny-justify-center bunny-my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-w-full" : "bunny-w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
|
|
19936
19961
|
}
|
|
19937
19962
|
|
|
19938
19963
|
var createRequestHeaders = function (token) {
|
|
@@ -20153,14 +20178,14 @@ var Footer = function (_a) {
|
|
|
20153
20178
|
var className = _a.className;
|
|
20154
20179
|
var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
|
|
20155
20180
|
var isMobile = common.useIsMobile();
|
|
20156
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(isMobile ?
|
|
20181
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ".concat(isMobile ? 'bunny-flex-col bunny-gap-2 bunny-grow' : '', " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
|
|
20157
20182
|
};
|
|
20158
20183
|
var BunnyMarketingLink = function () {
|
|
20159
20184
|
var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
|
|
20160
20185
|
var isMobile = common.useIsMobile();
|
|
20161
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ?
|
|
20186
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-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 }) }))] })) })) })));
|
|
20162
20187
|
};
|
|
20163
|
-
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
|
|
20188
|
+
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 text-decoration: none;\n font-size: 14px;\n"], ["\n color: ", ";\n transition: color 0.3s;\n &:hover {\n color: ", ";\n }\n text-decoration: none;\n font-size: 14px;\n"])), common.SLATE_400, common.SLATE_500);
|
|
20164
20189
|
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);
|
|
20165
20190
|
var templateObject_1$5, templateObject_2$1;
|
|
20166
20191
|
|
|
@@ -20223,11 +20248,11 @@ var TaxationForm = function (_a) {
|
|
|
20223
20248
|
});
|
|
20224
20249
|
},
|
|
20225
20250
|
}), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
|
|
20226
|
-
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) {
|
|
20251
|
+
return (jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-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) {
|
|
20227
20252
|
var _a, _b;
|
|
20228
20253
|
return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
|
|
20229
20254
|
((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
|
|
20230
|
-
} }) })), 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" })) })] })));
|
|
20255
|
+
} }) })), 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: "bunny-w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
|
|
20231
20256
|
};
|
|
20232
20257
|
var FormBillingState = function (_a) {
|
|
20233
20258
|
_a.form;
|
|
@@ -20272,12 +20297,12 @@ var QuoteCheckout = function (_a) {
|
|
|
20272
20297
|
}
|
|
20273
20298
|
if (taxationRequiredAccountFields)
|
|
20274
20299
|
return (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
|
|
20275
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "bunny-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" }))] })) }))) }));
|
|
20300
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? "bunny-shadow-padding-x" : "") }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
|
|
20276
20301
|
};
|
|
20277
20302
|
var PaymentFormWrapper = function (_a) {
|
|
20278
20303
|
var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
|
|
20279
20304
|
var isMobile = common.useIsMobile();
|
|
20280
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-6 shrink-0 ".concat(isMobile ? "w-full bunny-shadow-padding-xb" : "", " ").concat(className), style: __assign({}, (isMobile
|
|
20305
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-6 bunny-shrink-0 ".concat(isMobile ? "bunny-w-full bunny-shadow-padding-xb" : "", " ").concat(className), style: __assign({}, (isMobile
|
|
20281
20306
|
? setMaxHeight
|
|
20282
20307
|
? { maxHeight: "60vh" }
|
|
20283
20308
|
: {}
|
|
@@ -20359,9 +20384,9 @@ var Checkout = function (_a) {
|
|
|
20359
20384
|
});
|
|
20360
20385
|
if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
|
|
20361
20386
|
return null;
|
|
20362
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 bg-slate-50 overflow-auto", style: {
|
|
20387
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50 bunny-overflow-auto", style: {
|
|
20363
20388
|
zIndex: 1001,
|
|
20364
|
-
} }, { 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 bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "flex-col" : "bunny-shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (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, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
|
|
20389
|
+
} }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-gap-6 bunny-pt-4 ".concat(isMobile ? "bunny-flex-col" : "bunny-shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (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: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full bunny-pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
|
|
20365
20390
|
onFail(error);
|
|
20366
20391
|
}, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
|
|
20367
20392
|
onFail(error);
|
|
@@ -20372,7 +20397,7 @@ var PageTitle = function (_a) {
|
|
|
20372
20397
|
var onGoBack = _a.onGoBack, title = _a.title;
|
|
20373
20398
|
var isMobile = common.useIsMobile();
|
|
20374
20399
|
var secondaryColor = react.useContext(BrandContext).secondaryColor;
|
|
20375
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-3 font-medium", style: {
|
|
20400
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3 bunny-font-medium", style: {
|
|
20376
20401
|
fontSize: "28px",
|
|
20377
20402
|
paddingBottom: isMobile ? "22px" : "56px",
|
|
20378
20403
|
color: secondaryColor,
|
|
@@ -20432,7 +20457,7 @@ var CheckoutBarInput = function (_a) {
|
|
|
20432
20457
|
}, []);
|
|
20433
20458
|
if (!(charge === null || charge === void 0 ? void 0 : charge.feature))
|
|
20434
20459
|
return null;
|
|
20435
|
-
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: {
|
|
20460
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isMobile ? "bunny-justify-between" : "") }, { children: [jsxRuntime.jsx(QuantityLabel, { activeCharge: charge }), jsxRuntime.jsx(antd.Tooltip, __assign({ onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
|
|
20436
20461
|
body: {
|
|
20437
20462
|
paddingTop: "0.75rem",
|
|
20438
20463
|
paddingBottom: "0.75rem",
|
|
@@ -20450,7 +20475,7 @@ var QuantityLabel = function (_a) {
|
|
|
20450
20475
|
var pluralizedFeatureName = (common.StringUtils.isStringPluralized(featureName) || !featureName
|
|
20451
20476
|
? featureName
|
|
20452
20477
|
: common.StringUtils.pluralizeEntityName(featureName)) || "";
|
|
20453
|
-
return (jsxRuntime.jsx("span", __assign({ className: "text-slate-500 font-medium", style: { fontSize: "11px" } }, { children: pluralizedFeatureName.toUpperCase() })));
|
|
20478
|
+
return (jsxRuntime.jsx("span", __assign({ className: "bunny-text-slate-500 bunny-font-medium", style: { fontSize: "11px" } }, { children: pluralizedFeatureName.toUpperCase() })));
|
|
20454
20479
|
};
|
|
20455
20480
|
|
|
20456
20481
|
var periodMonthsConverter = function (period) {
|
|
@@ -20552,7 +20577,7 @@ var CheckoutPrice = function (_a) {
|
|
|
20552
20577
|
var isMobile = common.useIsMobile();
|
|
20553
20578
|
if (!isUsage && (!selectedPriceList || (quote === null || quote === void 0 ? void 0 : quote.periodAmount) === undefined))
|
|
20554
20579
|
return null;
|
|
20555
|
-
return (jsxRuntime.jsx("div", __assign({ className: "font-medium ".concat(isMobile ? "text-2xl" : "") }, { children: isUsage
|
|
20580
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium ".concat(isMobile ? "bunny-text-2xl" : "") }, { children: isUsage
|
|
20556
20581
|
? "Usage based pricing"
|
|
20557
20582
|
: selectedPriceList && (quote === null || quote === void 0 ? void 0 : quote.periodAmount) !== undefined
|
|
20558
20583
|
? "".concat(common.formatCurrency(quote.periodAmount, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.currencyId, 0), " / ").concat(common.PERIOD_LABELS[periodMonthsConverter(selectedPriceList.periodMonths)])
|
|
@@ -20589,7 +20614,7 @@ var CheckoutBarSummarySection = function (_a) {
|
|
|
20589
20614
|
var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === common.ChargeType.USAGE;
|
|
20590
20615
|
var hasPaymentMethodsOrIsFree = Boolean(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.length) ||
|
|
20591
20616
|
Boolean(quote && getQuoteAmountDue(quote) === 0);
|
|
20592
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4 ".concat(isMobile ?
|
|
20617
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : '') }, { children: [quote && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'items-center justify-between w-full' : 'flex-col') }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-font-medium bunny-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 }))] })));
|
|
20593
20618
|
};
|
|
20594
20619
|
|
|
20595
20620
|
var PlanPickerCheckoutBarWrapper = function (_a) {
|
|
@@ -20724,7 +20749,7 @@ var PlanPickerCheckoutBar = function (_a) {
|
|
|
20724
20749
|
token: token,
|
|
20725
20750
|
});
|
|
20726
20751
|
}
|
|
20727
|
-
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) {
|
|
20752
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "bunny-flex-col bunny-gap-4" : "bunny-flex-row", " my-2 p-4 justify-between bg-white rounded-md ").concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-flex bunny-flex-col" : "bunny-flex", " bunny-gap-4") }, { children: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.map(function (charge, index) {
|
|
20728
20753
|
var _a;
|
|
20729
20754
|
var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
|
|
20730
20755
|
var chargeQuantity = (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceList) === null || _a === void 0 ? void 0 : _a.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); })) === null || _a === void 0 ? void 0 : _a.quantity;
|
|
@@ -20772,7 +20797,7 @@ var getPriceListChangeOptions = function (_a) {
|
|
|
20772
20797
|
|
|
20773
20798
|
var ErrorView = function (_a) {
|
|
20774
20799
|
var children = _a.children, message = _a.message;
|
|
20775
|
-
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] })));
|
|
20800
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full", style: { marginTop: "80px" } }, { children: [jsxRuntime.jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
|
|
20776
20801
|
};
|
|
20777
20802
|
|
|
20778
20803
|
var calculateNewQuantity = function (priceList, currentQuantity) {
|
|
@@ -20812,13 +20837,13 @@ var BillingPeriodSelector = function (_a) {
|
|
|
20812
20837
|
var isMobile = common.useIsMobile();
|
|
20813
20838
|
if (!availableBillingPeriods || (availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.length) < 2)
|
|
20814
20839
|
return null;
|
|
20815
|
-
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: {
|
|
20840
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-8 bunny-pb-6" }, { children: [(products === null || products === void 0 ? void 0 : products.length) && products.length > 1 && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-xs", style: {
|
|
20816
20841
|
color: secondaryColor,
|
|
20817
20842
|
} }, { children: "Select product" })), jsxRuntime.jsx(ProductRadioStyled, __assign({ brandColor: brandColor }, { children: jsxRuntime.jsx(antd.Radio.Group, __assign({ onChange: function (e) {
|
|
20818
20843
|
onChangeProduct(products === null || products === void 0 ? void 0 : products.find(function (product) { return product.id === e.target.value; }));
|
|
20819
|
-
}, 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: {
|
|
20844
|
+
}, value: selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id, buttonStyle: "solid" }, { children: jsxRuntime.jsx(antd.Space, __assign({ className: "bunny-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: "bunny-flex bunny-flex-col bunny-w-full bunny-gap-2" }, { children: [!isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-xs", style: {
|
|
20820
20845
|
color: secondaryColor,
|
|
20821
|
-
} }, { children: "Subscription term" }))), jsxRuntime.jsx(StyledRadioGroup, __assign({ className: "w-full", "$isMobile": isMobile }, { children: jsxRuntime.jsx(antd.Radio.Group, __assign({ onChange: function (e) {
|
|
20846
|
+
} }, { children: "Subscription term" }))), jsxRuntime.jsx(StyledRadioGroup, __assign({ className: "bunny-w-full", "$isMobile": isMobile }, { children: jsxRuntime.jsx(antd.Radio.Group, __assign({ onChange: function (e) {
|
|
20822
20847
|
onChangeBillingPeriod(e.target.value);
|
|
20823
20848
|
}, value: selectedBillingPeriod, size: "small", buttonStyle: "solid" }, { children: availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.map(function (periodMonth, index) {
|
|
20824
20849
|
return (jsxRuntime.jsx(antd.Radio.Button, __assign({ value: periodMonthsConverter(periodMonth) }, { children: periodMonthsConverter(periodMonth) }), index));
|
|
@@ -20840,14 +20865,14 @@ var templateObject_1$4, templateObject_2;
|
|
|
20840
20865
|
var PriceListCardTitle = function (_a) {
|
|
20841
20866
|
var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
|
|
20842
20867
|
var isMobile = common.useIsMobile();
|
|
20843
|
-
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
|
|
20868
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-4" }, { children: [Boolean(trialRemainingDays) && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-secondary", style: { height: "1rem" } }, { children: isPriceListCurrentSubscription
|
|
20844
20869
|
? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
|
|
20845
|
-
: " " }))), jsxRuntime.jsx("div", __assign({ className: "font-medium text-center ".concat(isMobile ? "text-slate-500" : "text-orange-600"), style: { fontSize: "20px" } }, { children: priceList.plan.name }))] })));
|
|
20870
|
+
: " " }))), jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center ".concat(isMobile ? "bunny-text-slate-500" : "bunny-text-orange-600"), style: { fontSize: "20px" } }, { children: priceList.plan.name }))] })));
|
|
20846
20871
|
};
|
|
20847
20872
|
|
|
20848
20873
|
var PriceListCardPrice = function (_a) {
|
|
20849
20874
|
var priceList = _a.priceList;
|
|
20850
|
-
return (jsxRuntime.jsx("div", __assign({ className: "font-medium text-center text-gray-900", style: { fontSize: "32px" } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
|
|
20875
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: "32px" } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
|
|
20851
20876
|
? common.formatCurrency(priceList.basePrice, priceList.currencyId, 0)
|
|
20852
20877
|
: priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US
|
|
20853
20878
|
? ""
|
|
@@ -20859,7 +20884,7 @@ var PriceListCardDescription = function (_a) {
|
|
|
20859
20884
|
var description = _a.description;
|
|
20860
20885
|
if (!description)
|
|
20861
20886
|
return null;
|
|
20862
|
-
return jsxRuntime.jsx(Text$d, __assign({ className: "text-center" }, { children: description }));
|
|
20887
|
+
return jsxRuntime.jsx(Text$d, __assign({ className: "bunny-text-center" }, { children: description }));
|
|
20863
20888
|
};
|
|
20864
20889
|
|
|
20865
20890
|
var Text$c = antd.Typography.Text;
|
|
@@ -20869,7 +20894,7 @@ var PriceListCardPriceDescription = function (_a) {
|
|
|
20869
20894
|
var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === common.PricingModel.FLAT && charge.basePrice > 0; });
|
|
20870
20895
|
if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== common.PricingStyle.PRICED)
|
|
20871
20896
|
return null;
|
|
20872
|
-
return (jsxRuntime.jsx(Text$c, __assign({ className: "text-center text-gray-900", style: {
|
|
20897
|
+
return (jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
|
|
20873
20898
|
fontSize: isMobile ? "13px" : "12px",
|
|
20874
20899
|
} }, { children: priceList.plan.pricingDescription
|
|
20875
20900
|
? priceList.plan.pricingDescription
|
|
@@ -20880,7 +20905,7 @@ var PriceListCardPriceDescription = function (_a) {
|
|
|
20880
20905
|
|
|
20881
20906
|
var CheckIcon = function (_a) {
|
|
20882
20907
|
var backgroundColor = _a.backgroundColor, size = _a.size;
|
|
20883
|
-
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" }) })) })));
|
|
20908
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-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" }) })) })));
|
|
20884
20909
|
};
|
|
20885
20910
|
|
|
20886
20911
|
var PriceListCardButton = function (_a) {
|
|
@@ -20899,7 +20924,7 @@ var PriceListCardButton = function (_a) {
|
|
|
20899
20924
|
return priceList.plan.contactUsLabel;
|
|
20900
20925
|
return "Select";
|
|
20901
20926
|
};
|
|
20902
|
-
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: {
|
|
20927
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end" }, { children: jsxRuntime.jsx(StyledCardButton, __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: disableOnClick, style: {
|
|
20903
20928
|
maxWidth: "240px",
|
|
20904
20929
|
}, type: isSelected ? "primary" : "default" }, { children: createButtonText() })) })) })));
|
|
20905
20930
|
};
|
|
@@ -20909,30 +20934,30 @@ var templateObject_1$3;
|
|
|
20909
20934
|
var PriceListCardMobile = function (_a) {
|
|
20910
20935
|
var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
|
|
20911
20936
|
var brandColor = react.useContext(BrandContext).brandColor;
|
|
20912
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col border-2 border-solid rounded-lg p-4", onClick: function () {
|
|
20937
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-border-2 bunny-border-solid bunny-rounded-lg bunny-p-4", onClick: function () {
|
|
20913
20938
|
if (!disableOnClick)
|
|
20914
20939
|
onClick(priceList);
|
|
20915
20940
|
}, style: {
|
|
20916
20941
|
minWidth: "220px",
|
|
20917
20942
|
borderColor: isSelected ? brandColor : common.SLATE_200,
|
|
20918
|
-
} }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "absolute", style: {
|
|
20943
|
+
} }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "bunny-absolute", style: {
|
|
20919
20944
|
top: "10px",
|
|
20920
20945
|
right: "10px",
|
|
20921
|
-
} }, { 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, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
|
|
20946
|
+
} }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
|
|
20922
20947
|
};
|
|
20923
20948
|
|
|
20924
20949
|
var PLAN_GRID_PADDING = 4;
|
|
20925
20950
|
var PlanPickerGridCell = function (_a) {
|
|
20926
20951
|
var children = _a.children, noBorder = _a.noBorder;
|
|
20927
20952
|
var isMobile = common.useIsMobile();
|
|
20928
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col", style: isMobile
|
|
20953
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col", style: isMobile
|
|
20929
20954
|
? {}
|
|
20930
|
-
: __assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })) }, { children: [jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: children })), !isMobile && jsxRuntime.jsx(antd.Divider, {})] })));
|
|
20955
|
+
: __assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })) }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-grow" }, { children: children })), !isMobile && jsxRuntime.jsx(antd.Divider, {})] })));
|
|
20931
20956
|
};
|
|
20932
20957
|
|
|
20933
20958
|
var PriceListCardDesktop = function (_a) {
|
|
20934
20959
|
var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
|
|
20935
|
-
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 () {
|
|
20960
|
+
return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 bunny-pb-4 ".concat(disableOnClick ? "" : "cursor-pointer"), onClick: function () {
|
|
20936
20961
|
if (!disableOnClick) {
|
|
20937
20962
|
if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US) {
|
|
20938
20963
|
window.open(priceList.plan.contactUsUrl, "_blank");
|
|
@@ -20942,7 +20967,7 @@ var PriceListCardDesktop = function (_a) {
|
|
|
20942
20967
|
}
|
|
20943
20968
|
}, style: {
|
|
20944
20969
|
height: "100%",
|
|
20945
|
-
} }, { 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, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })) }));
|
|
20970
|
+
} }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })) }));
|
|
20946
20971
|
};
|
|
20947
20972
|
|
|
20948
20973
|
var PriceListCard = function (_a) {
|
|
@@ -20980,8 +21005,8 @@ var PriceListCardFeature = function (_a) {
|
|
|
20980
21005
|
var index = _a.index, planFeature = _a.planFeature;
|
|
20981
21006
|
var brandColor = react.useContext(BrandContext).brandColor;
|
|
20982
21007
|
if (planFeature.feature.kind === "GROUP")
|
|
20983
|
-
return jsxRuntime.jsx(Text$b, __assign({ className: "font-medium base-text" }, { children: planFeature.name }));
|
|
20984
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$b, __assign({ className: "text-gray-600" }, { children: planFeature.feature.name }))] }), index));
|
|
21008
|
+
return jsxRuntime.jsx(Text$b, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
|
|
21009
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$b, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
|
|
20985
21010
|
};
|
|
20986
21011
|
|
|
20987
21012
|
var getAvailablePlansAndPriceLists = function (_a) {
|
|
@@ -21009,16 +21034,16 @@ var PriceListGridMobile = function (_a) {
|
|
|
21009
21034
|
var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
|
|
21010
21035
|
var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
|
|
21011
21036
|
var prevPriceList = (_c = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _c === void 0 ? void 0 : _c.find(function (priceList) { return priceList.id === prevPriceListId; });
|
|
21012
|
-
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) {
|
|
21037
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-xb", style: { flexShrink: 0 } }, { children: availablePriceLists.map(function (priceList, index) {
|
|
21013
21038
|
return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
|
|
21014
|
-
}) })), jsxRuntime.jsx("div", __assign({ className: "text-slate-500 pt-5 pb-4 shadow-padding-x" }, { children: everythingInPlus && prevPriceList
|
|
21039
|
+
}) })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
|
|
21015
21040
|
? everythingInPlusString({ priceList: prevPriceList })
|
|
21016
|
-
: "Features" })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 overflow-auto shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsxRuntime.jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
|
|
21041
|
+
: "Features" })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsxRuntime.jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
|
|
21017
21042
|
};
|
|
21018
21043
|
|
|
21019
21044
|
var NextPriceListButton = function (_a) {
|
|
21020
21045
|
var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
|
|
21021
|
-
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 () {
|
|
21046
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-absolute bunny-flex bunny-gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
|
|
21022
21047
|
setPriceListStart(function (prev) {
|
|
21023
21048
|
var newValue = prev - 1;
|
|
21024
21049
|
if (newValue < 0) {
|
|
@@ -21026,7 +21051,7 @@ var NextPriceListButton = function (_a) {
|
|
|
21026
21051
|
}
|
|
21027
21052
|
return newValue;
|
|
21028
21053
|
});
|
|
21029
|
-
}, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
|
|
21054
|
+
}, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
|
|
21030
21055
|
return setPriceListStart(function (prev) {
|
|
21031
21056
|
var newValue = prev + 1;
|
|
21032
21057
|
if (newValue >= availablePriceLists.length) {
|
|
@@ -21067,12 +21092,9 @@ var EverythingPlanFeatures = function (_a) {
|
|
|
21067
21092
|
return (jsxRuntime.jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
|
|
21068
21093
|
if (!priceList.plan.planFeatures)
|
|
21069
21094
|
return jsxRuntime.jsx("div", {}, planIndex);
|
|
21070
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
|
|
21095
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
|
|
21071
21096
|
var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
|
|
21072
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [prevPriceList &&
|
|
21073
|
-
everythingInPlus &&
|
|
21074
|
-
planIndex > 0 &&
|
|
21075
|
-
planFeatureIndex === 0 && (jsxRuntime.jsx("div", __assign({ className: "font-medium", style: { fontSize: "13px" } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex gap-1 text-gray-600", style: { fontSize: "13px" } }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
|
|
21097
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [prevPriceList && everythingInPlus && planIndex > 0 && planFeatureIndex === 0 && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium", style: { fontSize: '13px' } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
|
|
21076
21098
|
}) }), planIndex));
|
|
21077
21099
|
}) }));
|
|
21078
21100
|
};
|
|
@@ -21083,7 +21105,7 @@ var shouldColorRow = function (_a) {
|
|
|
21083
21105
|
};
|
|
21084
21106
|
var FeatureGridCell = function (_a) {
|
|
21085
21107
|
var children = _a.children, isFeatureGroup = _a.isFeatureGroup, noBorder = _a.noBorder, rowIndex = _a.rowIndex;
|
|
21086
|
-
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({
|
|
21108
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-px-".concat(PLAN_GRID_PADDING, " bunny-py-2"), style: __assign(__assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })), (shouldColorRow({
|
|
21087
21109
|
isFeatureGroup: isFeatureGroup,
|
|
21088
21110
|
rowIndex: rowIndex,
|
|
21089
21111
|
})
|
|
@@ -21101,7 +21123,7 @@ var PlanFeatures = function (_a) {
|
|
|
21101
21123
|
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) {
|
|
21102
21124
|
if (!selectedProduct.features)
|
|
21103
21125
|
return null;
|
|
21104
|
-
var isFeatureGroup = (feature === null || feature === void 0 ? void 0 : feature.kind) ===
|
|
21126
|
+
var isFeatureGroup = (feature === null || feature === void 0 ? void 0 : feature.kind) === 'GROUP';
|
|
21105
21127
|
if (!feature.isVisible)
|
|
21106
21128
|
return null;
|
|
21107
21129
|
// Initialize the feature group counter and the visible feature counter
|
|
@@ -21119,7 +21141,7 @@ var PlanFeatures = function (_a) {
|
|
|
21119
21141
|
rowIndex = rowIndex + featureGroupCounter.current;
|
|
21120
21142
|
// Increment the visible feature counter
|
|
21121
21143
|
visibleFeatureCounter.current = visibleFeatureCounter.current + 1;
|
|
21122
|
-
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(plansToDisplay), true).map(function (_, columnIndex) {
|
|
21144
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [jsxRuntime.jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsxRuntime.jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(plansToDisplay), true).map(function (_, columnIndex) {
|
|
21123
21145
|
var _a;
|
|
21124
21146
|
var plan = availablePlansArray[columnIndex];
|
|
21125
21147
|
var doesHavePrevPlan = availablePlansArray[columnIndex - 1];
|
|
@@ -21129,15 +21151,15 @@ var PlanFeatures = function (_a) {
|
|
|
21129
21151
|
if (!plan)
|
|
21130
21152
|
return (jsxRuntime.jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
|
|
21131
21153
|
if (isFeatureGroup)
|
|
21132
|
-
return
|
|
21133
|
-
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));
|
|
21154
|
+
return jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex);
|
|
21155
|
+
return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$a, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
|
|
21134
21156
|
})] }), rowIndex));
|
|
21135
21157
|
}) }));
|
|
21136
21158
|
};
|
|
21137
21159
|
var FeatureTitle = function (_a) {
|
|
21138
21160
|
var _b;
|
|
21139
21161
|
var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
|
|
21140
|
-
return (jsxRuntime.jsx(Text$a, __assign({ className: " ".concat(isFeatureGroup ?
|
|
21162
|
+
return (jsxRuntime.jsx(Text$a, __assign({ className: " ".concat(isFeatureGroup ? 'bunny-text-slate-500 bunny-font-medium bunny-pt-4' : ''), style: __assign({}, (isFeatureGroup ? { fontSize: '11px' } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
|
|
21141
21163
|
};
|
|
21142
21164
|
|
|
21143
21165
|
var PriceListGridDesktop = function (_a) {
|
|
@@ -21152,7 +21174,7 @@ var PriceListGridDesktop = function (_a) {
|
|
|
21152
21174
|
}, [availablePriceLists, priceListChangeOptions, priceListStart]), availablePlansArray = _b.availablePlansArray, displayPriceLists = _b.displayPriceLists;
|
|
21153
21175
|
var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
|
|
21154
21176
|
var plansToDisplay = Math.min((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3, availablePriceLists.length);
|
|
21155
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col rounded-md shadow overflow-hidden bg-white" }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "grid w-full", style: {
|
|
21177
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-rounded-md bunny-shadow bunny-overflow-hidden bunny-bg-white" }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
|
|
21156
21178
|
gridTemplateColumns: everythingInPlus
|
|
21157
21179
|
? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
|
|
21158
21180
|
: "minmax(auto, 400px) repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))"),
|
|
@@ -21358,7 +21380,7 @@ var PreviewModeAdvisary = function (_a) {
|
|
|
21358
21380
|
var isInPreviewMode = _a.isInPreviewMode;
|
|
21359
21381
|
if (!isInPreviewMode)
|
|
21360
21382
|
return null;
|
|
21361
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex justify-center w-full rounded" }, { children: jsxRuntime.jsx(Text$9, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
|
|
21383
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full bunny-rounded" }, { children: jsxRuntime.jsx(Text$9, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
|
|
21362
21384
|
};
|
|
21363
21385
|
|
|
21364
21386
|
var PlanManager = function (_a) {
|
|
@@ -21463,7 +21485,7 @@ var PlanManager = function (_a) {
|
|
|
21463
21485
|
return showInfoNotification("You are in preview mode");
|
|
21464
21486
|
setQuotePreviewData(undefined);
|
|
21465
21487
|
onChangePlanCancel();
|
|
21466
|
-
}, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), 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(); } }) }))] })));
|
|
21488
|
+
}, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? "bunny-mx-4" : "bunny-mx-0") }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
|
|
21467
21489
|
};
|
|
21468
21490
|
|
|
21469
21491
|
var useCancelSubscription = function () {
|
|
@@ -21527,7 +21549,7 @@ var HeaderModalWrapper = function (props) {
|
|
|
21527
21549
|
var modalProps = react.useMemo(function () {
|
|
21528
21550
|
return lodashEs.omit(props, ["children", "description", "hideHeader", "title"]);
|
|
21529
21551
|
}, [props]);
|
|
21530
|
-
return (jsxRuntime.jsxs(StyledModal, __assign({}, modalProps, { destroyOnClose: true, maskClosable: false }, { children: [(description || title) && (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4 px-6 py-6", style: { backgroundColor: common.SLATE_50 } }, { children: [title && (jsxRuntime.jsx("div", __assign({ className: "font-medium", style: { fontSize: "17px" } }, { children: title }))), description && (jsxRuntime.jsx("div", __assign({ style: {
|
|
21552
|
+
return (jsxRuntime.jsxs(StyledModal, __assign({}, modalProps, { destroyOnClose: true, maskClosable: false }, { children: [(description || title) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-px-6 bunny-py-6", style: { backgroundColor: common.SLATE_50 } }, { children: [title && (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium", style: { fontSize: "17px" } }, { children: title }))), description && (jsxRuntime.jsx("div", __assign({ style: {
|
|
21531
21553
|
color: common.SLATE_500,
|
|
21532
21554
|
lineHeight: "150%",
|
|
21533
21555
|
width: "75%",
|
|
@@ -21592,13 +21614,13 @@ var FeatureUsageGraph = function (_a) {
|
|
|
21592
21614
|
} }, { children: jsxRuntime.jsx(FeatureBarChart, { data: basicViewData, featureName: featureName, height: 36, width: 120 }) })), jsxRuntime.jsx(HeaderModalWrapper, __assign({ footer: null, open: isModalOpen, onCancel: function (e) {
|
|
21593
21615
|
e.stopPropagation();
|
|
21594
21616
|
setIsModalOpen(false);
|
|
21595
|
-
}, title: "Usage for period ".concat(dayjs(charge.startDate).format("MMM DD, YYYY"), " - ").concat(dayjs(charge.endDate).format("MMM DD, YYYY")) }, { children: jsxRuntime.jsx("div", __assign({ className: "py-4 px-6 overflow-visible" }, { children: jsxRuntime.jsx(recharts.ResponsiveContainer, __assign({ width: "100%", height: 200 }, { children: jsxRuntime.jsx(FeatureBarChart, { data: detailedViewData, displayXAxis: true, featureName: featureName }) })) })) }))] })));
|
|
21617
|
+
}, title: "Usage for period ".concat(dayjs(charge.startDate).format("MMM DD, YYYY"), " - ").concat(dayjs(charge.endDate).format("MMM DD, YYYY")) }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-py-4 bunny-px-6 bunny-overflow-visible" }, { children: jsxRuntime.jsx(recharts.ResponsiveContainer, __assign({ width: "100%", height: 200 }, { children: jsxRuntime.jsx(FeatureBarChart, { data: detailedViewData, displayXAxis: true, featureName: featureName }) })) })) }))] })));
|
|
21596
21618
|
};
|
|
21597
21619
|
var FeatureBarChart = function (_a) {
|
|
21598
21620
|
var data = _a.data, displayXAxis = _a.displayXAxis, featureName = _a.featureName, height = _a.height, width = _a.width;
|
|
21599
21621
|
// Context
|
|
21600
21622
|
var brandColor = react.useContext(BrandContext).brandColor;
|
|
21601
|
-
return (jsxRuntime.jsxs(StyledBarChart, __assign({ width: width, height: height, data: data }, { children: [jsxRuntime.jsx(recharts.XAxis, __assign({ className: "text-xs", dataKey: "label" }, (displayXAxis
|
|
21623
|
+
return (jsxRuntime.jsxs(StyledBarChart, __assign({ width: width, height: height, data: data }, { children: [jsxRuntime.jsx(recharts.XAxis, __assign({ className: "bunny-text-xs", dataKey: "label" }, (displayXAxis
|
|
21602
21624
|
? {}
|
|
21603
21625
|
: {
|
|
21604
21626
|
tickFormatter: function () { return ""; },
|
|
@@ -21670,7 +21692,7 @@ var SubscriptionCardActions = function (_a) {
|
|
|
21670
21692
|
var productPlans = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return priceList.product.id === subscription.product.id; });
|
|
21671
21693
|
var canShowChangePlanButton = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
|
|
21672
21694
|
return (canShowChangePlanButton || canShowCancelButton) &&
|
|
21673
|
-
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;
|
|
21695
|
+
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: "bunny-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;
|
|
21674
21696
|
};
|
|
21675
21697
|
|
|
21676
21698
|
var Text$8 = antd.Typography.Text;
|
|
@@ -21700,9 +21722,9 @@ var SubscriptionCardHeader = function (_a) {
|
|
|
21700
21722
|
// Derived state
|
|
21701
21723
|
var trialDaysLeft = dayjs(subscription.trialEndDate).diff(dayjs(), "days");
|
|
21702
21724
|
var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
|
|
21703
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between", style: {
|
|
21725
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: {
|
|
21704
21726
|
backgroundColor: darkMode ? "var(--row-background-dark)" : "",
|
|
21705
|
-
} }, { 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$8, __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$8, __assign({ className: "text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: 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$8, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
|
|
21727
|
+
} }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$8, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsxRuntime.jsx(Text$8, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: 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: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsxRuntime.jsx(Text$8, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
|
|
21706
21728
|
};
|
|
21707
21729
|
|
|
21708
21730
|
var BillingPeriodConverter;
|
|
@@ -21720,7 +21742,7 @@ var SubscriptionChargeTotal = function (_a) {
|
|
|
21720
21742
|
var currencyId = subscription.currencyId;
|
|
21721
21743
|
var formattedDiscountedPrice = common.formatCurrency(charge.price, currencyId);
|
|
21722
21744
|
var formattedPeriodPrice = common.formatCurrency(charge.periodPrice, currencyId);
|
|
21723
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex gap-1 ".concat(isMobile ? "flex-col" : "") }, { children: charge.chargeType === common.ChargeType.USAGE || charge.trial
|
|
21745
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-gap-1 ".concat(isMobile ? "bunny-flex-col" : "") }, { children: charge.chargeType === common.ChargeType.USAGE || charge.trial
|
|
21724
21746
|
? "-"
|
|
21725
21747
|
: charge.kind === common.SubscriptionChargeKind.DISCOUNT
|
|
21726
21748
|
? "-".concat(formattedDiscountedPrice, " ").concat(billingPeriod)
|
|
@@ -21737,18 +21759,18 @@ var SubscriptionChargeUnitPrice = function (_a) {
|
|
|
21737
21759
|
if (displayPriceTiers)
|
|
21738
21760
|
return (jsxRuntime.jsx(antd.Dropdown, __assign({ dropdownRender: function () {
|
|
21739
21761
|
var _a;
|
|
21740
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col rounded border border-solid border-slate-200 p-2", style: {
|
|
21762
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-rounded bunny-border bunny-border-solid bunny-border-slate-200 bunny-p-2", style: {
|
|
21741
21763
|
backgroundColor: darkMode
|
|
21742
21764
|
? "var(--row-background-dark)"
|
|
21743
21765
|
: "var(--row-background)",
|
|
21744
|
-
} }, { children: jsxRuntime.jsx("div", __assign({ className: "grid grid-cols-2", style: { columnGap: "0.5rem" } }, { children: (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.map(function (tier, index) {
|
|
21766
|
+
} }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-grid bunny-grid-cols-2", style: { columnGap: "0.5rem" } }, { children: (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.map(function (tier, index) {
|
|
21745
21767
|
var _a, _b, _c;
|
|
21746
21768
|
var ends = ((_b = (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a[index + 1]) === null || _b === void 0 ? void 0 : _b.starts)
|
|
21747
21769
|
? ((_c = charge.priceTiers[index + 1]) === null || _c === void 0 ? void 0 : _c.starts) - 1
|
|
21748
21770
|
: "∞";
|
|
21749
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " :"] })), jsxRuntime.jsx("div", __assign({ className: "whitespace-nowrap text-right" }, { children: common.formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
|
|
21771
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " :"] })), jsxRuntime.jsx("div", __assign({ className: "bunny-whitespace-nowrap bunny-text-right" }, { children: common.formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
|
|
21750
21772
|
}) })) })));
|
|
21751
|
-
}, 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" })) })));
|
|
21773
|
+
}, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-cursor-pointer bunny-underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "Hide tiers" : "Show tiers" })) })));
|
|
21752
21774
|
else if (charge.chargeType === common.ChargeType.USAGE || charge.trial)
|
|
21753
21775
|
return jsxRuntime.jsx(Text$7, { children: "-" });
|
|
21754
21776
|
else if (isDiscount)
|
|
@@ -21760,13 +21782,13 @@ var SubscriptionChargeUnitPrice = function (_a) {
|
|
|
21760
21782
|
var Text$6 = antd.Typography.Text;
|
|
21761
21783
|
var SubscriptionCardColumnHeaders = function (_a) {
|
|
21762
21784
|
var columns = _a.columns;
|
|
21763
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(Text$6, __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
|
|
21785
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(Text$6, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
|
|
21764
21786
|
};
|
|
21765
21787
|
|
|
21766
21788
|
var Text$5 = antd.Typography.Text;
|
|
21767
21789
|
var SubscriptionsListCell = function (_a) {
|
|
21768
21790
|
var children = _a.children, className = _a.className, gridColumn = _a.gridColumn, right = _a.right, style = _a.style;
|
|
21769
|
-
return (jsxRuntime.jsx(Text$5, __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 })));
|
|
21791
|
+
return (jsxRuntime.jsx(Text$5, __assign({ className: "bunny-flex bunny-items-center bunny-text-sm bunny-whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
|
|
21770
21792
|
};
|
|
21771
21793
|
|
|
21772
21794
|
var CARD_COLUMNS = [
|
|
@@ -21800,11 +21822,11 @@ var SubscriptionCardDesktop = function (_a) {
|
|
|
21800
21822
|
var shadow = react.useContext(SubscriptionsContext).shadow;
|
|
21801
21823
|
// Derived state
|
|
21802
21824
|
var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
|
|
21803
|
-
return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "my-4", style: {
|
|
21825
|
+
return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
|
|
21804
21826
|
gridColumn: "1 / 5",
|
|
21805
21827
|
width: "calc(100% + 32px)",
|
|
21806
21828
|
transform: "translateX(-16px)",
|
|
21807
|
-
} }), jsxRuntime.jsxs("div", __assign({ className: "grid w-full", style: {
|
|
21829
|
+
} }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
|
|
21808
21830
|
gridTemplateColumns: CARD_COLUMNS.map(function (column) { return column.width; }).join(" "),
|
|
21809
21831
|
rowGap: "0.75rem",
|
|
21810
21832
|
} }, { children: [jsxRuntime.jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), subscription.charges.map(function (charge, chargeIndex) {
|
|
@@ -21845,7 +21867,7 @@ var SubscriptionCardDesktopRow = function (_a) {
|
|
|
21845
21867
|
!isDiscount &&
|
|
21846
21868
|
(!isTrial || prevCharge.trial) &&
|
|
21847
21869
|
(isTrial || !prevCharge.trial);
|
|
21848
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? "1/-1" : "1" }, { children: jsxRuntime.jsx("div", __assign({ className: "flex items-center gap-2 ".concat(isDiscount ? "pl-4" : "") }, { children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : "" }) })) }))), jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsxRuntime.jsx("div", { children: chargePeriod }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
|
|
21870
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? "1/-1" : "1" }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isDiscount ? "bunny-pl-4" : "") }, { children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : "" }) })) }))), jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsxRuntime.jsx("div", { children: chargePeriod }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
|
|
21849
21871
|
? ""
|
|
21850
21872
|
: charge.chargeType === common.ChargeType.USAGE
|
|
21851
21873
|
? data && jsxRuntime.jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
|
|
@@ -21886,21 +21908,21 @@ var SubscriptionCard = function (_a) {
|
|
|
21886
21908
|
var backgroundColor = darkMode
|
|
21887
21909
|
? "var(--row-background-dark)"
|
|
21888
21910
|
: "var(--row-background)";
|
|
21889
|
-
return (jsxRuntime.jsx(Card, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "my-4", style: {
|
|
21911
|
+
return (jsxRuntime.jsx(Card, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-p-4" }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
|
|
21890
21912
|
gridColumn: "1 / -1",
|
|
21891
21913
|
width: "calc(100% + 32px)",
|
|
21892
21914
|
transform: "translateX(-16px)",
|
|
21893
|
-
} }), jsxRuntime.jsxs("div", __assign({ className: "grid", style: {
|
|
21915
|
+
} }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid", style: {
|
|
21894
21916
|
columnGap: "0.5rem",
|
|
21895
21917
|
gridTemplateColumns: "1fr auto auto auto",
|
|
21896
21918
|
rowGap: "0.75rem",
|
|
21897
21919
|
backgroundColor: backgroundColor,
|
|
21898
|
-
} }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }), subscription.charges.map(function (charge, chargeIndex) {
|
|
21920
|
+
} }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }), subscription.charges.map(function (charge, chargeIndex) {
|
|
21899
21921
|
if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
|
|
21900
21922
|
return null;
|
|
21901
21923
|
var isRamp = charge.isRamp;
|
|
21902
21924
|
var chargePeriod = "".concat(common.formatDate(charge.startDate), " - ").concat(common.formatDate(charge.endDate));
|
|
21903
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxRuntime.jsxs(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? "1/-1" : "1" } }, { children: [jsxRuntime.jsx("span", { children: charge.name }), !isRamp ? " - ".concat(chargePeriod) : ""] }))), isRamp && (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className }, { children: "- ".concat(chargePeriod) }))), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[1].className }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
|
|
21925
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxRuntime.jsxs(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? "1/-1" : "1" } }, { children: [jsxRuntime.jsx("span", { children: charge.name }), !isRamp ? " - ".concat(chargePeriod) : ""] }))), isRamp && (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className }, { children: "- ".concat(chargePeriod) }))), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[1].className }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
|
|
21904
21926
|
? ""
|
|
21905
21927
|
: charge.quantity })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[2].className }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[3].className }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] }), chargeIndex));
|
|
21906
21928
|
})] }))] })) }));
|
|
@@ -21936,13 +21958,13 @@ var SubscriptionsListContainer = function (_a) {
|
|
|
21936
21958
|
if (subscriptionsAreLoading ||
|
|
21937
21959
|
(Boolean(onChangePlanClick) ? arePriceListChangeOptionsLoading : false))
|
|
21938
21960
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
21939
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink overflow-auto") }, { children: jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, 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") }) })))) }));
|
|
21961
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-".concat(gap, " bunny-shrink bunny-overflow-auto") }, { children: jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions }) }))) : (noSubscriptionsComponent || (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) }));
|
|
21940
21962
|
};
|
|
21941
21963
|
|
|
21942
21964
|
var Text$3 = antd.Typography.Text;
|
|
21943
21965
|
var DrawerHeader = function (_a) {
|
|
21944
21966
|
var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
|
|
21945
|
-
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$3, __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 }))] })));
|
|
21967
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$3, __assign({ className: "bunny-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: "bunny-text-xs" }, { children: description }))] })));
|
|
21946
21968
|
};
|
|
21947
21969
|
|
|
21948
21970
|
var QUOTE_CHARGE_CREATE = "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n quoteChargeCreate(\n endDate: $endDate\n price: $price\n priceListChargeId: $priceListChargeId\n quantity: $quantity\n quoteChangeId: $quoteChangeId\n startDate: $startDate\n subscriptionChargeId: $subscriptionChargeId\n ) {\n quoteCharge {\n quoteChange {\n id\n quoteId\n }\n }\n }\n}\n\n";
|
|
@@ -22140,7 +22162,7 @@ var QuantityInput = function (_a) {
|
|
|
22140
22162
|
return function () { return clearTimeout(debounce); };
|
|
22141
22163
|
// eslint-disable-next-line
|
|
22142
22164
|
}, [editedSubscription]);
|
|
22143
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(antd.Input, { className: "text-right", disabled: quantityDisabled, onBlur: function () {
|
|
22165
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(antd.Input, { className: "bunny-text-right", disabled: quantityDisabled, onBlur: function () {
|
|
22144
22166
|
if (typeof value === "number" && value < charge.quantity) {
|
|
22145
22167
|
showErrorNotification("New value is less than the original quantity. This is not allowed");
|
|
22146
22168
|
}
|
|
@@ -22155,12 +22177,12 @@ var QuantityChangeGridRow = function (_a) {
|
|
|
22155
22177
|
var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge;
|
|
22156
22178
|
if (!canShowQuantitiesInput(subscriptionCharge, subscription))
|
|
22157
22179
|
return null;
|
|
22158
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "font-medium text-orange-600 col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$2, __assign({ className: "font-medium text-base text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$2, __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" })] }));
|
|
22180
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-orange-600 bunny-col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-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: "bunny-col-span-full bunny-my-2" })] }));
|
|
22159
22181
|
};
|
|
22160
22182
|
|
|
22161
22183
|
var QuantityChangeGridTitle = function (_a) {
|
|
22162
22184
|
var children = _a.children, right = _a.right;
|
|
22163
|
-
return (jsxRuntime.jsx("div", __assign({ className: "font-medium text-slate-600 ".concat(right ? "text-right" : "text-left"), style: { fontSize: "11px" } }, { children: children })));
|
|
22185
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-slate-600 ".concat(right ? "bunny-text-right" : "bunny-text-left"), style: { fontSize: "11px" } }, { children: children })));
|
|
22164
22186
|
};
|
|
22165
22187
|
|
|
22166
22188
|
var QuoteChangeSummarySection = function (_a) {
|
|
@@ -22177,7 +22199,7 @@ var QuoteChangeSummarySection = function (_a) {
|
|
|
22177
22199
|
showSuccessNotification("Subscription updated successfully");
|
|
22178
22200
|
},
|
|
22179
22201
|
});
|
|
22180
|
-
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)
|
|
22202
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [editingQuote && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2" }, { children: "TOTAL" })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-right ".concat(isMobile ? "bunny-text-2xl" : "bunny-text-xl") }, { children: common.formatCurrency(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || "") }))] }))), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-end ".concat(isMobile ? "bunny-w-full" : "") }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
|
|
22181
22203
|
? function () { return trialUpgradeMutation.mutate(editingQuoteData.id); }
|
|
22182
22204
|
: openCheckout, disabled: !editingQuoteData, size: isMobile ? "large" : "middle", type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? "Activate Trial" : "Proceed to checkout" })) }))] })));
|
|
22183
22205
|
};
|
|
@@ -22217,14 +22239,14 @@ var QuantityChangeDrawerDesktop = function (_a) {
|
|
|
22217
22239
|
wrapper: {
|
|
22218
22240
|
minWidth: "600px",
|
|
22219
22241
|
},
|
|
22220
|
-
}, 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: {
|
|
22242
|
+
}, 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: "bunny-grid bunny-pb-4", style: {
|
|
22221
22243
|
gridTemplateColumns: "2fr 1fr 1fr",
|
|
22222
22244
|
rowGap: "0.75rem",
|
|
22223
22245
|
columnGap: "1rem",
|
|
22224
|
-
} }, { 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) {
|
|
22246
|
+
} }, { 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: "bunny-col-span-full bunny-py-2" }), subscriptions.map(function (subscription, index) {
|
|
22225
22247
|
var _a;
|
|
22226
22248
|
var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
|
|
22227
|
-
return (jsxRuntime.jsx("div", __assign({ className: "contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
|
|
22249
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
|
|
22228
22250
|
var _a;
|
|
22229
22251
|
if ((isTrial && !charge.trial) ||
|
|
22230
22252
|
(!isTrial && charge.trial) ||
|
|
@@ -22239,7 +22261,7 @@ var HideExpiredToggle = function (_a) {
|
|
|
22239
22261
|
var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired; _a.visible;
|
|
22240
22262
|
var isMobile = common.useIsMobile();
|
|
22241
22263
|
var secondaryColor = react.useContext(BrandContext).secondaryColor;
|
|
22242
|
-
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: {
|
|
22264
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-4 bunny-pl-4" }, { children: [!isMobile && jsxRuntime.jsx(antd.Divider, { className: "bunny-h-5", type: "vertical" }), jsxRuntime.jsx(StyledCheckbox, { children: jsxRuntime.jsx(antd.Checkbox, __assign({ checked: hideExpired, onChange: function (e) { return setHideExpired(e.target.checked); }, style: {
|
|
22243
22265
|
color: secondaryColor,
|
|
22244
22266
|
} }, { children: isMobile ? "Hide inactive" : "Hide inactive subscriptions" })) })] })));
|
|
22245
22267
|
};
|
|
@@ -22263,7 +22285,7 @@ var SubscriptionsNavigation = function (_a) {
|
|
|
22263
22285
|
var canShowChangeQuantitiesButton = canShowChangeQuantities({
|
|
22264
22286
|
subscriptions: subscriptions,
|
|
22265
22287
|
});
|
|
22266
|
-
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 })) }))] }));
|
|
22288
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, visible: expiredSwitchVisible })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-grow bunny-gap-2 ".concat(isMobile ? "bunny-flex-col" : "bunny-justify-end") }, { children: canShowChangeQuantitiesButton && (jsxRuntime.jsx(ChangeQuantitiesButton, { canShowChangeQuantitiesButton: canShowChangeQuantitiesButton, setQuantityDrawerOpen: setQuantityDrawerOpen })) }))] }));
|
|
22267
22289
|
};
|
|
22268
22290
|
|
|
22269
22291
|
var Text$1 = antd.Typography.Text;
|
|
@@ -22428,17 +22450,17 @@ var Subscriptions = function (_a) {
|
|
|
22428
22450
|
setIsChangingPlan(false);
|
|
22429
22451
|
}, handlePortalErrors: handlePortalErrors }));
|
|
22430
22452
|
}
|
|
22431
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: "Subscriptions" }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsxs(Text$1, __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(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod })] })));
|
|
22453
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: "Subscriptions" }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-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: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod })] })));
|
|
22432
22454
|
};
|
|
22433
22455
|
var PageHeaderWithActions = function (_a) {
|
|
22434
22456
|
var children = _a.children, title = _a.title;
|
|
22435
22457
|
var isMobile = common.useIsMobile();
|
|
22436
|
-
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] })));
|
|
22458
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-pb-4 ".concat(isMobile ? "bunny-flex-col bunny-gap-2" : "bunny-items-center bunny-justify-between bunny-h-8") }, { children: [jsxRuntime.jsx(PageSubTitle, { title: title }), children] })));
|
|
22437
22459
|
};
|
|
22438
22460
|
var PageSubTitle = function (_a) {
|
|
22439
22461
|
var title = _a.title;
|
|
22440
22462
|
var secondaryColor = react.useContext(BrandContext).secondaryColor;
|
|
22441
|
-
return (jsxRuntime.jsx("div", __assign({ className: "shrink-0 font-medium", style: { color: secondaryColor } }, { children: title })));
|
|
22463
|
+
return (jsxRuntime.jsx("div", __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: secondaryColor } }, { children: title })));
|
|
22442
22464
|
};
|
|
22443
22465
|
|
|
22444
22466
|
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";
|
|
@@ -22638,13 +22660,13 @@ function BillingDetailsSection(_a) {
|
|
|
22638
22660
|
? common.Lists.COUNTRY_LIST.filter(countryListFilter)
|
|
22639
22661
|
: common.Lists.COUNTRY_LIST;
|
|
22640
22662
|
}, [countryListFilter]);
|
|
22641
|
-
return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? "w-full" : "w-1/2") }, { children: jsxRuntime.jsxs("div", __assign({ className: "px-4" }, { children: [jsxRuntime.jsxs(antd.Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: [jsxRuntime.jsx("div", __assign({ className: "mb-2" }, { children: jsxRuntime.jsx(Text, __assign({ className: "font-medium text-lg" }, { children: (billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.name) || "No company name" })) })), jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [
|
|
22663
|
+
return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? "bunny-w-full" : "bunny-w-1/2") }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-px-4" }, { children: [jsxRuntime.jsxs(antd.Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-mb-2" }, { children: jsxRuntime.jsx(Text, __assign({ className: "bunny-font-medium bunny-text-lg" }, { children: (billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.name) || "No company name" })) })), jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [
|
|
22642
22664
|
{ required: true, message: "Street address is required" },
|
|
22643
|
-
] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsxs("div", __assign({ className: "flex gap-4" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: "City is required" }], className: "flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: "Zipcode is required" }], className: "flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-row pb-2" : "flex-row", " gap-4") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "State", name: "billingState", rules: [
|
|
22665
|
+
] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: "City is required" }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: "Zipcode is required" }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-row bunny-pb-2" : "bunny-flex-row", " bunny-gap-4") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "State", name: "billingState", rules: [
|
|
22644
22666
|
{
|
|
22645
22667
|
required: false,
|
|
22646
22668
|
},
|
|
22647
|
-
] }, { children: jsxRuntime.jsx(antd.Input, {}) })) })), jsxRuntime.jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Country", name: "billingCountry", rules: [{ required: true, message: "Country is required" }] }, { children: jsxRuntime.jsx(antd.Select, { className: "w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
|
|
22669
|
+
] }, { children: jsxRuntime.jsx(antd.Input, {}) })) })), jsxRuntime.jsx("div", __assign({ className: "flex-1 w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Country", name: "billingCountry", rules: [{ required: true, message: "Country is required" }] }, { children: jsxRuntime.jsx(antd.Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
|
|
22648
22670
|
var _a, _b;
|
|
22649
22671
|
return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "")
|
|
22650
22672
|
.toLowerCase()
|
|
@@ -22658,22 +22680,22 @@ function BillingDetailsSection(_a) {
|
|
|
22658
22680
|
message: "Email is required",
|
|
22659
22681
|
type: "email",
|
|
22660
22682
|
},
|
|
22661
|
-
] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }] }, { children: jsxRuntime.jsx(antd.Input, {}) }))] }))] })), jsxRuntime.jsx(antd.Button, __assign({ disabled: !isFormEdited || isUpdatingBillingDetails || !formIsValid, className: "w-full mt-4", type: "primary", onClick: saveBillingDetails }, { children: "Save" }))] })) })));
|
|
22683
|
+
] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }] }, { children: jsxRuntime.jsx(antd.Input, {}) }))] }))] })), jsxRuntime.jsx(antd.Button, __assign({ disabled: !isFormEdited || isUpdatingBillingDetails || !formIsValid, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails }, { children: "Save" }))] })) })));
|
|
22662
22684
|
}
|
|
22663
22685
|
|
|
22664
22686
|
var BillingDetails = function (_a) {
|
|
22665
|
-
var _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ?
|
|
22687
|
+
var _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? 'shadow-md' : _c, className = _a.className, _d = _a.hidePaymentMethodForm, hidePaymentMethodForm = _d === void 0 ? false : _d, _e = _a.hideBillingDetailsForm, hideBillingDetailsForm = _e === void 0 ? false : _e, countryListFilter = _a.countryListFilter;
|
|
22666
22688
|
// Hooks
|
|
22667
22689
|
var isMobile = common.useIsMobile();
|
|
22668
|
-
return (jsxRuntime.jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex p-2 my-2 ".concat(isMobile ?
|
|
22690
|
+
return (jsxRuntime.jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-p-2 bunny-my-2 ".concat(isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row', " bunny-gap-4") }, { children: [!hideBillingDetailsForm ? (jsxRuntime.jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsxRuntime.jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsxRuntime.jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm })) : null] })) })));
|
|
22669
22691
|
};
|
|
22670
22692
|
var WrapperComponent = function (_a) {
|
|
22671
22693
|
var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;
|
|
22672
|
-
return (jsxRuntime.jsx("div", __assign({ className: "".concat(className) }, { children: isCardEnabled ?
|
|
22694
|
+
return (jsxRuntime.jsx("div", __assign({ className: "".concat(className) }, { children: isCardEnabled ? jsxRuntime.jsx(Card, __assign({ className: "".concat(shadow) }, { children: children })) : jsxRuntime.jsx("div", { children: children }) })));
|
|
22673
22695
|
};
|
|
22674
22696
|
var ResponsiveDivider = function () {
|
|
22675
22697
|
var isMobile = common.useIsMobile();
|
|
22676
|
-
return isMobile ? (jsxRuntime.jsx("div", __assign({ className: "mx-4" }, { children: jsxRuntime.jsx(antd.Divider, {}) }))) : (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Divider, { className: "h-full", type: "vertical" }) }));
|
|
22698
|
+
return isMobile ? (jsxRuntime.jsx("div", __assign({ className: "bunny-mx-4" }, { children: jsxRuntime.jsx(antd.Divider, {}) }))) : (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" }) }));
|
|
22677
22699
|
};
|
|
22678
22700
|
var PaymentFormSection = function (_a) {
|
|
22679
22701
|
var hideBillingDetailsForm = _a.hideBillingDetailsForm;
|
|
@@ -22681,10 +22703,10 @@ var PaymentFormSection = function (_a) {
|
|
|
22681
22703
|
var onTokenExpired = react.useContext(BunnyContext).onTokenExpired;
|
|
22682
22704
|
var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
|
|
22683
22705
|
var showSuccessNotification = common.useSuccessNotification();
|
|
22684
|
-
return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ?
|
|
22706
|
+
return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
|
|
22685
22707
|
handleAllErrorFormats(error);
|
|
22686
22708
|
}, onSavePaymentMethod: function () {
|
|
22687
|
-
showSuccessNotification(
|
|
22709
|
+
showSuccessNotification('Your payment method has been saved');
|
|
22688
22710
|
} }) })));
|
|
22689
22711
|
};
|
|
22690
22712
|
|