@bunnyapp/components 1.0.15 → 1.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +295 -243
- package/dist/cjs/src/components/BillingDetails/BillingDetails.d.ts +7 -2
- package/dist/cjs/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +3 -2
- package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts +3 -2
- package/dist/cjs/src/components/PaymentForm/Stripe/hooks/usePay.d.ts +3 -2
- package/dist/cjs/src/components/Signup/PaymentForms.d.ts +4 -3
- package/dist/cjs/src/components/Signup/Signup.d.ts +1 -3
- package/dist/cjs/src/contexts/PaymentContext.d.ts +2 -1
- package/dist/cjs/src/hooks/usePaymentMethod.d.ts +1 -1
- package/dist/cjs/src/hooks/useToken.d.ts +2 -0
- package/dist/esm/index.js +296 -244
- package/dist/esm/src/components/BillingDetails/BillingDetails.d.ts +7 -2
- package/dist/esm/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts +3 -2
- package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts +3 -2
- package/dist/esm/src/components/PaymentForm/Stripe/hooks/usePay.d.ts +3 -2
- package/dist/esm/src/components/Signup/PaymentForms.d.ts +4 -3
- package/dist/esm/src/components/Signup/Signup.d.ts +1 -3
- package/dist/esm/src/contexts/PaymentContext.d.ts +2 -1
- package/dist/esm/src/hooks/usePaymentMethod.d.ts +1 -1
- package/dist/esm/src/hooks/useToken.d.ts +2 -0
- package/dist/index.d.ts +9 -6
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -71,7 +71,7 @@ function styleInject(css, ref) {
|
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
var css_248z = ".ant-collapse-header {\n cursor: default !important;\n padding: 0 !important;\n}\n.ant-tag {\n border: none;\n border-radius: 14px;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-weight: 500;\n white-space: nowrap;\n margin: 0;\n}\n.ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.ant-popover {\n z-index: 1050;\n}\n.ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n}\n.ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ant-btn-link:disabled {\n color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n background-color: transparent !important;\n}\n.ant-input-affix-wrapper .ant-input-prefix {\n transition: color 0.3s;\n}\n.ant-form-item-label {\n text-transform: none !important;\n font-size: 0.75rem;\n padding-bottom: 2px !important;\n}\n.ant-form-item-label > label {\n width: 100%;\n color: #4b5563 !important;\n}\n.ant-form-item-explain-error {\n font-size: 11px;\n min-height: 11px;\n line-height: 11px;\n padding-top: 2px;\n}\n.ant-form-item {\n margin-bottom: 0;\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.ant-drawer-title {\n font-weight: 400 !important;\n}\n.ant-drawer-header-title {\n flex-direction: row-reverse !important;\n align-items: start !important ;\n}\n.ant-drawer-close {\n margin-inline-end: 0 !important;\n}\n@media (min-width: 768px) {\n .ant-input,\n .ant-picker,\n .ant-select,\n .ant-input-affix-wrapper {\n font-size: 1rem !important;\n }\n .ant-drawer-header {\n padding-right: 1.5rem !important;\n padding-left: 1.5rem !important;\n }\n}\n:root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n height: 1px;\n min-width: 128px;\n background: #717d94;\n}\n.plan-step-number {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n border: 1px solid #717d94;\n background: white;\n width: 24px;\n height: 24px;\n color: #717d94;\n}\n.plan-step-number.active {\n border: none;\n color: white;\n background: #ff6e1c;\n}\n.hidden {\n display: none;\n}\n.cardElement {\n padding: 8px 11px;\n border: 1px solid #e5e7eb;\n background-color: white;\n font-family: Inter !important;\n}\n.tooltip {\n visibility: hidden;\n position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.show-on-hover {\n opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n opacity: 1;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n color: #717d94 !important;\n font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n height: 34px !important;\n}\n#form-element #finix-form-container .field {\n margin-top: 0 !important;\n padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n font-size: 11px !important;\n color: #ff4d4f !important;\n}\n.icon-path {\n transition: fill 0.3s;\n}\n.shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-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-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-0 {\n flex-shrink: 0;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border {\n border-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-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-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.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@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box !important;\n 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 line-height: 1.15;\n}\nbody {\n color: #232323;\n background-color: #f8fafc;\n}\nth {\n font-weight: normal;\n}\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\n}\n@media only screen and (max-width: 768px) {\n select,\n textarea,\n input[type=\"text\"],\n input[type=\"password\"],\n input[type=\"datetime\"],\n input[type=\"datetime-local\"],\n input[type=\"date\"],\n input[type=\"month\"],\n input[type=\"time\"],\n input[type=\"week\"],\n input[type=\"number\"],\n input[type=\"email\"],\n input[type=\"url\"],\n input[type=\"search\"],\n input[type=\"tel\"],\n input[type=\"color\"] {\n font-size: 16px !important;\n }\n}\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n";
|
|
74
|
+
var css_248z = ".ant-divider-horizontal {\n margin: 0;\n}\n.ant-tag {\n border: none;\n border-radius: 14px;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-weight: 500;\n white-space: nowrap;\n margin: 0;\n}\n.ant-tag-blue {\n color: #3b82f6 !important;\n background: #bfdbfe !important;\n}\n.ant-tag-green {\n color: #059669 !important;\n background: #a7f3d0 !important;\n}\n.ant-tag-red {\n color: #ef4444 !important;\n background: #fecaca !important;\n}\n.ant-tag-orange {\n color: #f97316 !important;\n background: #fed7aa !important;\n}\n.ant-tag-yellow {\n color: #f59e0b !important;\n background: #fde68a !important;\n}\n.ant-tag-purple {\n color: #8b5cf6 !important;\n background: #ddd6fe !important;\n}\n.ant-tag-black {\n color: white !important;\n background: black !important;\n}\n.ant-popover {\n z-index: 1050;\n}\n.ant-popover-inner-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 300px;\n}\n.ant-popover-message-title {\n padding: 0;\n text-align: center;\n font-size: 1rem;\n}\n.ant-popover-buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ant-btn-link:disabled {\n color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n background-color: transparent !important;\n}\n.ant-notification {\n width: min-content;\n}\n.ant-notification-topRight {\n right: 0 !important;\n left: 0 !important;\n margin-left: auto !important;\n margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n width: 350px !important;\n overflow: hidden !important;\n}\n.ant-notification-notice {\n padding: 16px !important;\n width: 350px !important;\n display: flex !important;\n box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n padding: 0 14px 0 0 !important;\n color: #232323 !important;\n font-size: 14px !important;\n word-break: break-all !important;\n overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n color: #ff6e1c !important;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n color: #00b76a !important;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n color: #00b76a !important;\n}\n.ant-notification-notice-message {\n margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n top: 16px !important;\n right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n display: flex !important;\n align-items: center !important;\n}\n.ant-menu-submenu::after {\n display: none !important;\n}\n:root {\n --row-background: #ffffff;\n --row-background-alternate: rgba(100, 116, 139, 0.04);\n --row-background-dark: #121212;\n --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n height: 1px;\n min-width: 128px;\n background: #717d94;\n}\n.plan-step-number {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n border: 1px solid #717d94;\n background: white;\n width: 24px;\n height: 24px;\n color: #717d94;\n}\n.plan-step-number.active {\n border: none;\n color: white;\n background: #ff6e1c;\n}\n.hidden {\n display: none;\n}\n.cardElement {\n padding: 8px 11px;\n border: 1px solid #e5e7eb;\n background-color: white;\n font-family: Inter !important;\n}\n.tooltip {\n visibility: hidden;\n position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n visibility: visible;\n z-index: 100;\n}\n.show-on-hover {\n opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n opacity: 1;\n}\n.pdf-only {\n display: none !important;\n}\n.notes p {\n margin: 0;\n padding: 0;\n padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n color: #717d94 !important;\n font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n height: 34px !important;\n}\n#form-element #finix-form-container .field {\n margin-top: 0 !important;\n padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n font-size: 11px !important;\n color: #ff4d4f !important;\n}\n.icon-path {\n transition: fill 0.3s;\n}\n.shadow-padding-x {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.shadow-padding-xb {\n padding-right: 1rem;\n padding-left: 1rem;\n padding-bottom: 0.5rem;\n}\n.content-container {\n width: 100%;\n margin: 0 auto;\n}\n@media (min-width: 1220px) {\n .content-container {\n width: 1220px !important;\n margin: 0 auto;\n }\n}\n@media (min-width: 768px) {\n .shadow-padding-x {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n .shadow-padding-xb {\n padding-right: 2rem;\n padding-left: 2rem;\n padding-bottom: 0.5rem;\n }\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\n }\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-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-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-0 {\n flex-shrink: 0;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border {\n border-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-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-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.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@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box !important;\n 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 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";
|
|
75
75
|
styleInject(css_248z);
|
|
76
76
|
|
|
77
77
|
/******************************************************************************
|
|
@@ -1710,6 +1710,19 @@ function ContextualWrapper(_a) {
|
|
|
1710
1710
|
colorSplit: darkMode ? common.SLATE_400 : common.SLATE_200,
|
|
1711
1711
|
verticalMarginInline: 0,
|
|
1712
1712
|
},
|
|
1713
|
+
Form: {
|
|
1714
|
+
itemMarginBottom: 0,
|
|
1715
|
+
verticalLabelPadding: "4px",
|
|
1716
|
+
},
|
|
1717
|
+
Input: {
|
|
1718
|
+
fontSize: 16,
|
|
1719
|
+
},
|
|
1720
|
+
Select: {
|
|
1721
|
+
fontSize: 16,
|
|
1722
|
+
},
|
|
1723
|
+
DatePicker: {
|
|
1724
|
+
fontSize: 16,
|
|
1725
|
+
},
|
|
1713
1726
|
} }, configProviderProps) }, { children: children })) })) }));
|
|
1714
1727
|
}
|
|
1715
1728
|
|
|
@@ -1777,13 +1790,24 @@ var useDownloadFile = function (id, onError) {
|
|
|
1777
1790
|
|
|
1778
1791
|
var InvoiceQuoteContext = React.createContext({});
|
|
1779
1792
|
|
|
1793
|
+
var PaymentContext = React.createContext({});
|
|
1794
|
+
|
|
1795
|
+
// Use this hook instead of getting the token from BunnyContext directly
|
|
1796
|
+
// Because we have overrideToken as an option, this token ensures the correct token is used
|
|
1797
|
+
function useToken() {
|
|
1798
|
+
var tokenFromContext = React.useContext(BunnyContext).token;
|
|
1799
|
+
var overrideToken = React.useContext(PaymentContext).overrideToken;
|
|
1800
|
+
return overrideToken || tokenFromContext;
|
|
1801
|
+
}
|
|
1802
|
+
|
|
1780
1803
|
var MarkupContainer = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
|
|
1781
1804
|
var InvoiceQuoteView = function (_a) {
|
|
1782
1805
|
var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError;
|
|
1783
1806
|
var downloadFile = useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
|
|
1784
1807
|
var secondaryColor = React.useContext(BrandContext).secondaryColor;
|
|
1785
|
-
var
|
|
1786
|
-
var
|
|
1808
|
+
var apiHost = React.useContext(BunnyContext).apiHost;
|
|
1809
|
+
var token = useToken();
|
|
1810
|
+
var _b = React.useContext(InvoiceQuoteContext), shadow = _b.shadow, hideDownloadButton = _b.hideDownloadButton;
|
|
1787
1811
|
var isMobile = common.useIsMobile();
|
|
1788
1812
|
var buttonsVisible = formattedInvoice && (!hideDownloadButton || onBackButtonClick);
|
|
1789
1813
|
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 ? "shadow-padding-x" : ""), id: "acceptance" }, { children: [jsxRuntime.jsx("div", { children: onBackButtonClick ? (jsxRuntime.jsx(antd.Button, __assign({ className: "text-xs pl-0", onClick: onBackButtonClick, style: {
|
|
@@ -1846,17 +1870,15 @@ function InvoicePDF(_a) {
|
|
|
1846
1870
|
}, title: "Invoice PDF", width: "100%" }));
|
|
1847
1871
|
}
|
|
1848
1872
|
|
|
1849
|
-
var PaymentContext = React.createContext({});
|
|
1850
|
-
|
|
1851
1873
|
var paymentMethodsQuery = "query paymentMethods ($filter: String, $first: Int, $sort: String) {\n paymentMethods (filter: $filter, first: $first, sort: $sort) {\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 }\n }\n}";
|
|
1852
|
-
var usePaymentMethod = function (graphQLClient
|
|
1874
|
+
var usePaymentMethod = function (graphQLClient) {
|
|
1853
1875
|
var result = reactQuery.useQuery({
|
|
1854
1876
|
queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey,
|
|
1855
1877
|
queryFn: function () {
|
|
1856
1878
|
return graphQLClient
|
|
1857
1879
|
.request(paymentMethodsQuery, {
|
|
1858
1880
|
first: 1,
|
|
1859
|
-
filter: "disabled is false"
|
|
1881
|
+
filter: "disabled is false",
|
|
1860
1882
|
})
|
|
1861
1883
|
.then(function (data) {
|
|
1862
1884
|
var _a, _b;
|
|
@@ -1917,6 +1939,34 @@ var getQuoteAmountDue = function (quote) {
|
|
|
1917
1939
|
return quote.amountDue;
|
|
1918
1940
|
};
|
|
1919
1941
|
|
|
1942
|
+
var DEFAULT_HEADERS = {
|
|
1943
|
+
"Content-type": "application/json; charset=utf-8",
|
|
1944
|
+
};
|
|
1945
|
+
// !!! Duplicated from @bunnyapp/common due to bug in signup. Uses BunnyProvider token instead of apiToken.
|
|
1946
|
+
var gqlRequest = function (_a) {
|
|
1947
|
+
var query = _a.query, _b = _a.vars, vars = _b === void 0 ? {} : _b, headers = _a.headers, token = _a.token, isInPreviewMode = _a.isInPreviewMode, apiHost = _a.apiHost;
|
|
1948
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
1949
|
+
var graphqlEndpoint, requestHeaders, authorizationHeader, error_1;
|
|
1950
|
+
return __generator(this, function (_c) {
|
|
1951
|
+
switch (_c.label) {
|
|
1952
|
+
case 0:
|
|
1953
|
+
_c.trys.push([0, 2, , 3]);
|
|
1954
|
+
graphqlEndpoint = common.DEFAULT_CONFIG.graphqlEndpoint;
|
|
1955
|
+
requestHeaders = headers || DEFAULT_HEADERS;
|
|
1956
|
+
authorizationHeader = "Bearer ".concat(token);
|
|
1957
|
+
if (!requestHeaders.Authorization && !isInPreviewMode)
|
|
1958
|
+
requestHeaders.Authorization = authorizationHeader;
|
|
1959
|
+
return [4 /*yield*/, request__default["default"]("".concat(apiHost).concat(graphqlEndpoint), query, vars, requestHeaders)];
|
|
1960
|
+
case 1: return [2 /*return*/, _c.sent()];
|
|
1961
|
+
case 2:
|
|
1962
|
+
error_1 = _c.sent();
|
|
1963
|
+
throw error_1;
|
|
1964
|
+
case 3: return [2 /*return*/];
|
|
1965
|
+
}
|
|
1966
|
+
});
|
|
1967
|
+
});
|
|
1968
|
+
};
|
|
1969
|
+
|
|
1920
1970
|
var MUTATION$8 = "\n mutation checkout(\n $invoiceId: ID,\n $quoteId: ID,\n $paymentMethodId: ID,\n $paymentMethodData: CheckoutPaymentMethodAttributes\n ) {\n checkout(\n invoiceId: $invoiceId,\n quoteId: $quoteId,\n paymentMethodId: $paymentMethodId,\n paymentMethodData: $paymentMethodData\n ) {\n invoice {\n id\n state\n amount\n amountDue\n }\n payment {\n id\n state\n amount\n }\n paymentApplication {\n id\n invoiceId\n paymentId\n }\n transaction {\n id\n amount\n }\n }\n }\n";
|
|
1921
1971
|
var checkout = function (_a) {
|
|
1922
1972
|
var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
|
|
@@ -1933,7 +1983,7 @@ var checkout = function (_a) {
|
|
|
1933
1983
|
if (paymentMethodData) {
|
|
1934
1984
|
mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
|
|
1935
1985
|
}
|
|
1936
|
-
return [4 /*yield*/,
|
|
1986
|
+
return [4 /*yield*/, gqlRequest({
|
|
1937
1987
|
query: MUTATION$8,
|
|
1938
1988
|
token: token,
|
|
1939
1989
|
vars: mutationVars,
|
|
@@ -1954,10 +2004,12 @@ var checkout = function (_a) {
|
|
|
1954
2004
|
|
|
1955
2005
|
function usePay$1(_a) {
|
|
1956
2006
|
var _this = this;
|
|
1957
|
-
var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice, storedPaymentMethod = _a.storedPaymentMethod;
|
|
1958
|
-
var
|
|
2007
|
+
var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice, storedPaymentMethod = _a.storedPaymentMethod, plugin = _a.plugin;
|
|
2008
|
+
var apiHost = React.useContext(BunnyContext).apiHost;
|
|
2009
|
+
var customCheckoutFunction = React.useContext(PaymentContext).customCheckoutFunction;
|
|
2010
|
+
var token = useToken();
|
|
1959
2011
|
var pay = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
1960
|
-
var amountDue, currencyId, response, error_1;
|
|
2012
|
+
var amountDue, currencyId, response, response, error_1;
|
|
1961
2013
|
return __generator(this, function (_a) {
|
|
1962
2014
|
switch (_a.label) {
|
|
1963
2015
|
case 0:
|
|
@@ -1968,23 +2020,30 @@ function usePay$1(_a) {
|
|
|
1968
2020
|
}
|
|
1969
2021
|
_a.label = 1;
|
|
1970
2022
|
case 1:
|
|
1971
|
-
_a.trys.push([1,
|
|
1972
|
-
return [
|
|
1973
|
-
|
|
1974
|
-
quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
|
|
1975
|
-
paymentMethodId: storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.id,
|
|
1976
|
-
token: token,
|
|
1977
|
-
apiHost: apiHost,
|
|
1978
|
-
})];
|
|
2023
|
+
_a.trys.push([1, 6, , 7]);
|
|
2024
|
+
if (!customCheckoutFunction) return [3 /*break*/, 3];
|
|
2025
|
+
return [4 /*yield*/, customCheckoutFunction(plugin)];
|
|
1979
2026
|
case 2:
|
|
1980
2027
|
response = _a.sent();
|
|
1981
2028
|
onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
|
|
1982
|
-
return [3 /*break*/,
|
|
1983
|
-
case 3:
|
|
2029
|
+
return [3 /*break*/, 5];
|
|
2030
|
+
case 3: return [4 /*yield*/, checkout({
|
|
2031
|
+
invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
|
|
2032
|
+
quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
|
|
2033
|
+
paymentMethodId: storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.id,
|
|
2034
|
+
token: token,
|
|
2035
|
+
apiHost: apiHost,
|
|
2036
|
+
})];
|
|
2037
|
+
case 4:
|
|
2038
|
+
response = _a.sent();
|
|
2039
|
+
onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
|
|
2040
|
+
_a.label = 5;
|
|
2041
|
+
case 5: return [3 /*break*/, 7];
|
|
2042
|
+
case 6:
|
|
1984
2043
|
error_1 = _a.sent();
|
|
1985
2044
|
onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error_1);
|
|
1986
|
-
return [3 /*break*/,
|
|
1987
|
-
case
|
|
2045
|
+
return [3 /*break*/, 7];
|
|
2046
|
+
case 7: return [2 /*return*/];
|
|
1988
2047
|
}
|
|
1989
2048
|
});
|
|
1990
2049
|
}); };
|
|
@@ -1993,31 +2052,40 @@ function usePay$1(_a) {
|
|
|
1993
2052
|
|
|
1994
2053
|
function usePay(_a) {
|
|
1995
2054
|
var _this = this;
|
|
1996
|
-
var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice, storedPaymentMethod = _a.storedPaymentMethod;
|
|
2055
|
+
var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice, storedPaymentMethod = _a.storedPaymentMethod, plugin = _a.plugin;
|
|
1997
2056
|
// Hooks
|
|
1998
|
-
var
|
|
2057
|
+
var apiHost = React.useContext(BunnyContext).apiHost;
|
|
2058
|
+
var customCheckoutFunction = React.useContext(PaymentContext).customCheckoutFunction;
|
|
2059
|
+
var token = useToken();
|
|
1999
2060
|
var pay = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
2000
|
-
var response, error_1;
|
|
2061
|
+
var response, response, error_1;
|
|
2001
2062
|
return __generator(this, function (_a) {
|
|
2002
2063
|
switch (_a.label) {
|
|
2003
2064
|
case 0:
|
|
2004
|
-
_a.trys.push([0,
|
|
2005
|
-
return [
|
|
2006
|
-
|
|
2007
|
-
quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
|
|
2008
|
-
paymentMethodId: storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.id,
|
|
2009
|
-
token: token,
|
|
2010
|
-
apiHost: apiHost,
|
|
2011
|
-
})];
|
|
2065
|
+
_a.trys.push([0, 5, , 6]);
|
|
2066
|
+
if (!customCheckoutFunction) return [3 /*break*/, 2];
|
|
2067
|
+
return [4 /*yield*/, customCheckoutFunction(plugin)];
|
|
2012
2068
|
case 1:
|
|
2013
2069
|
response = _a.sent();
|
|
2014
2070
|
onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
|
|
2015
|
-
return [3 /*break*/,
|
|
2016
|
-
case 2:
|
|
2071
|
+
return [3 /*break*/, 4];
|
|
2072
|
+
case 2: return [4 /*yield*/, checkout({
|
|
2073
|
+
invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
|
|
2074
|
+
quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
|
|
2075
|
+
paymentMethodId: storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.id,
|
|
2076
|
+
token: token,
|
|
2077
|
+
apiHost: apiHost,
|
|
2078
|
+
})];
|
|
2079
|
+
case 3:
|
|
2080
|
+
response = _a.sent();
|
|
2081
|
+
onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
|
|
2082
|
+
_a.label = 4;
|
|
2083
|
+
case 4: return [3 /*break*/, 6];
|
|
2084
|
+
case 5:
|
|
2017
2085
|
error_1 = _a.sent();
|
|
2018
2086
|
onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error_1);
|
|
2019
|
-
return [3 /*break*/,
|
|
2020
|
-
case
|
|
2087
|
+
return [3 /*break*/, 6];
|
|
2088
|
+
case 6: return [2 /*return*/];
|
|
2021
2089
|
}
|
|
2022
2090
|
});
|
|
2023
2091
|
}); };
|
|
@@ -2042,6 +2110,7 @@ var ActualCheckoutFooter = function (_a) {
|
|
|
2042
2110
|
quote: quote,
|
|
2043
2111
|
invoice: invoice,
|
|
2044
2112
|
storedPaymentMethod: storedPaymentMethod,
|
|
2113
|
+
plugin: plugin,
|
|
2045
2114
|
}).pay;
|
|
2046
2115
|
var payStripe = usePay({
|
|
2047
2116
|
onPaymentSuccess: onPaymentSuccess,
|
|
@@ -2052,6 +2121,7 @@ var ActualCheckoutFooter = function (_a) {
|
|
|
2052
2121
|
quote: quote,
|
|
2053
2122
|
invoice: invoice,
|
|
2054
2123
|
storedPaymentMethod: storedPaymentMethod,
|
|
2124
|
+
plugin: plugin,
|
|
2055
2125
|
}).pay;
|
|
2056
2126
|
var handlePaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
2057
2127
|
var _a;
|
|
@@ -2117,13 +2187,13 @@ var PlusIcon = function (_a) {
|
|
|
2117
2187
|
return (jsxRuntime.jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
|
|
2118
2188
|
};
|
|
2119
2189
|
|
|
2120
|
-
var Text$
|
|
2190
|
+
var Text$g = antd.Typography.Text;
|
|
2121
2191
|
var CreditCard = function (_a) {
|
|
2122
2192
|
var _b;
|
|
2123
2193
|
var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d;
|
|
2124
2194
|
var isMobile = common.useIsMobile();
|
|
2125
2195
|
var Wrapper = cardEnabled ? Card : "div";
|
|
2126
|
-
return (jsxRuntime.jsxs(Wrapper, __assign({ className: "".concat(cardEnabled ? shadow : "", " m-0") }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$
|
|
2196
|
+
return (jsxRuntime.jsxs(Wrapper, __assign({ className: "".concat(cardEnabled ? shadow : "", " m-0") }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$g, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier })] })), jsxRuntime.jsx(antd.Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(antd.Divider, {}), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(CardAttribute, { title: "EXPIRATION", value: expirationDate(paymentMethodData) }), isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
|
|
2127
2197
|
};
|
|
2128
2198
|
var MiniCreditCard = function (_a) {
|
|
2129
2199
|
var _b;
|
|
@@ -2135,7 +2205,7 @@ var MiniCreditCard = function (_a) {
|
|
|
2135
2205
|
var backgroundColor = React.useMemo(function () {
|
|
2136
2206
|
return darkMode ? "var(--row-background-alternate)" : "bg-slate-50";
|
|
2137
2207
|
}, [darkMode]);
|
|
2138
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$
|
|
2208
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$g, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier }), jsxRuntime.jsx(antd.Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })) })), !hideRemoveButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove" })) })))] })) : (jsxRuntime.jsxs("div", __assign({ className: "flex flex-row gap-2 items-center" }, { children: [jsxRuntime.jsx(CreditCardOutlined$1, {}), jsxRuntime.jsx(Text$g, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: "No payment method selected" })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" })] }))) })));
|
|
2139
2209
|
};
|
|
2140
2210
|
var CardImage = function (_a) {
|
|
2141
2211
|
var _b, _c;
|
|
@@ -2154,7 +2224,7 @@ var CardImage = function (_a) {
|
|
|
2154
2224
|
};
|
|
2155
2225
|
var CardAttribute = function (_a) {
|
|
2156
2226
|
var title = _a.title, value = _a.value;
|
|
2157
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.jsx(Text$
|
|
2227
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.jsx(Text$g, { children: value })] })));
|
|
2158
2228
|
};
|
|
2159
2229
|
var CardActions = function (_a) {
|
|
2160
2230
|
var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
|
|
@@ -2335,7 +2405,7 @@ function useSave$1(_a) {
|
|
|
2335
2405
|
return { save: save, isSaving: isSaving };
|
|
2336
2406
|
}
|
|
2337
2407
|
|
|
2338
|
-
var Text$
|
|
2408
|
+
var Text$f = antd.Typography.Text;
|
|
2339
2409
|
var TEST_CARD = "4242424242424242";
|
|
2340
2410
|
var DemoPayForm = function (_a) {
|
|
2341
2411
|
var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
|
|
@@ -2396,7 +2466,7 @@ var DemoPayForm = function (_a) {
|
|
|
2396
2466
|
var onCardCvcChange = function (cvc) {
|
|
2397
2467
|
setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
|
|
2398
2468
|
};
|
|
2399
|
-
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$
|
|
2469
|
+
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$f, __assign({ className: "text-xs" }, { children: "DemoPay is for testing only." })), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
|
|
2400
2470
|
};
|
|
2401
2471
|
var StyledInputs = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __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) {
|
|
2402
2472
|
var darkMode = _a.darkMode;
|
|
@@ -2499,7 +2569,8 @@ function useSave(_a) {
|
|
|
2499
2569
|
var _b = React.useState(false), isSaving = _b[0], setIsSaving = _b[1];
|
|
2500
2570
|
var elements = reactStripeJs.useElements();
|
|
2501
2571
|
var stripe = reactStripeJs.useStripe();
|
|
2502
|
-
var
|
|
2572
|
+
var apiHost = React.useContext(BunnyContext).apiHost;
|
|
2573
|
+
var token = useToken();
|
|
2503
2574
|
var accountId = React.useContext(PaymentContext).accountId;
|
|
2504
2575
|
var save = function (_a) {
|
|
2505
2576
|
var plugin = _a.plugin;
|
|
@@ -2633,7 +2704,7 @@ var CardIcon = function () {
|
|
|
2633
2704
|
return (jsxRuntime.jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
|
|
2634
2705
|
};
|
|
2635
2706
|
|
|
2636
|
-
var Text$
|
|
2707
|
+
var Text$e = antd.Typography.Text;
|
|
2637
2708
|
var PaymentMethodSelector = function (_a) {
|
|
2638
2709
|
var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
|
|
2639
2710
|
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)); }) })));
|
|
@@ -2646,7 +2717,7 @@ var PaymentOption = function (_a) {
|
|
|
2646
2717
|
var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
|
|
2647
2718
|
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
|
|
2648
2719
|
? "var(--row-background-dark) border-gray-500"
|
|
2649
|
-
: "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$
|
|
2720
|
+
: "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$e, { children: name })] })), isAch ? (jsxRuntime.jsx(BankOutlined$1, { className: "text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
|
|
2650
2721
|
};
|
|
2651
2722
|
var PaymentOptionContainer = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __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) {
|
|
2652
2723
|
var $brandColor = _a.$brandColor, $selected = _a.$selected;
|
|
@@ -2689,16 +2760,17 @@ function useRemovePaymentMethod(paymentPlugins, token, apiHost, accountId) {
|
|
|
2689
2760
|
|
|
2690
2761
|
var Panel = antd.Collapse.Panel;
|
|
2691
2762
|
var PaymentForm = function (_a) {
|
|
2692
|
-
var entityId = _a.entityId, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient;
|
|
2763
|
+
var entityId = _a.entityId, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient, customCheckoutFunction = _a.customCheckoutFunction;
|
|
2693
2764
|
// Local state
|
|
2694
2765
|
var _b = React.useState(), selectedPaymentMethod = _b[0], setSelectedPaymentMethod = _b[1];
|
|
2695
2766
|
var _c = React.useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
|
|
2696
2767
|
var paying = !!(quote || invoice);
|
|
2697
2768
|
// Hooks
|
|
2698
|
-
var
|
|
2699
|
-
var
|
|
2769
|
+
var apiHost = React.useContext(BunnyContext).apiHost;
|
|
2770
|
+
var token = useToken();
|
|
2771
|
+
var storedPaymentMethod = usePaymentMethod(graphQLClient).data;
|
|
2700
2772
|
var isPaymentMethodFetched = storedPaymentMethod !== undefined;
|
|
2701
|
-
var
|
|
2773
|
+
var _d = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: overrideToken || token }), paymentMethodAllowedPlugins = _d.paymentMethodAllowedPlugins, arePluginsFetched = _d.isFetched;
|
|
2702
2774
|
var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], overrideToken || token, apiHost, accountId);
|
|
2703
2775
|
var queryClient = reactQuery.useQueryClient();
|
|
2704
2776
|
// Set default plugin
|
|
@@ -2744,9 +2816,10 @@ var PaymentForm = function (_a) {
|
|
|
2744
2816
|
accountId: accountId,
|
|
2745
2817
|
overrideToken: overrideToken,
|
|
2746
2818
|
storedPaymentMethod: storedPaymentMethod,
|
|
2819
|
+
customCheckoutFunction: customCheckoutFunction,
|
|
2747
2820
|
} }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectedPaymentMethod, token: token, apiHost: apiHost, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(storedPaymentMethod); }, paymentMethodData: storedPaymentMethod }) })), paying && storedPaymentMethod ? (jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethod }) }))) : (
|
|
2748
2821
|
//if not paying and payment method is saved, show Collapse
|
|
2749
|
-
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: "pt-
|
|
2822
|
+
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: "pt-2" }, { children: jsxRuntime.jsxs(antd.Button, __assign({ onClick: function () {
|
|
2750
2823
|
setShowPaymentMethodForm(true);
|
|
2751
2824
|
}, type: "default", className: "w-full" }, { children: [storedPaymentMethod ? "Update" : "Add", " payment method"] })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsx("div", { children: selectedPaymentMethod ? (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [showPaymentMethodSelector && (jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectedPaymentMethod })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, paymentMethod: selectedPaymentMethod }) }))] }))) : (jsxRuntime.jsx("div", { children: "No payment method selected" })) }) }), "1") })))] }) })) })) })));
|
|
2752
2825
|
};
|
|
@@ -2777,7 +2850,8 @@ function ActualInvoice() {
|
|
|
2777
2850
|
var _a = React.useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick,
|
|
2778
2851
|
// onPaymentSuccess,
|
|
2779
2852
|
entityId = _a.entityId, className = _a.className;
|
|
2780
|
-
var _b = React.useContext(BunnyContext), apiHost = _b.apiHost,
|
|
2853
|
+
var _b = React.useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
|
|
2854
|
+
var token = useToken();
|
|
2781
2855
|
// Local state
|
|
2782
2856
|
var isMobile = common.useIsMobile(common.BreakpointNumbers.lg);
|
|
2783
2857
|
// Hooks
|
|
@@ -2981,7 +3055,8 @@ var useIsExpired = function (expiresAt) {
|
|
|
2981
3055
|
|
|
2982
3056
|
var PandadocPollingModal = function (_a) {
|
|
2983
3057
|
var isVisible = _a.isVisible, setVisible = _a.setVisible, id = _a.id;
|
|
2984
|
-
var _b = React.useContext(BunnyContext),
|
|
3058
|
+
var _b = React.useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired;
|
|
3059
|
+
var token = useToken();
|
|
2985
3060
|
var graphQLMutation = common.useGraphQLmutation(function () {
|
|
2986
3061
|
console.log("graphQLMutation navigateOnTokenExpired not yet implemented");
|
|
2987
3062
|
}, apiHost || "", function () {
|
|
@@ -3067,7 +3142,7 @@ var DOCUMENT_NAME;
|
|
|
3067
3142
|
DOCUMENT_NAME["QUOTE"] = "quote";
|
|
3068
3143
|
})(DOCUMENT_NAME || (DOCUMENT_NAME = {}));
|
|
3069
3144
|
|
|
3070
|
-
var Text$
|
|
3145
|
+
var Text$d = antd.Typography.Text;
|
|
3071
3146
|
var documentName = DOCUMENT_NAME.QUOTE;
|
|
3072
3147
|
styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
|
|
3073
3148
|
function Quote(_a) {
|
|
@@ -3088,7 +3163,8 @@ function ActualQuote(_a) {
|
|
|
3088
3163
|
var _b, _c;
|
|
3089
3164
|
var entityId = _a.entityId;
|
|
3090
3165
|
// Context
|
|
3091
|
-
var _d = React.useContext(BunnyContext),
|
|
3166
|
+
var _d = React.useContext(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired;
|
|
3167
|
+
var token = useToken();
|
|
3092
3168
|
var entityBranding = React.useContext(BrandContext);
|
|
3093
3169
|
var _e = React.useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton;
|
|
3094
3170
|
// Queries
|
|
@@ -3136,7 +3212,7 @@ function ActualQuote(_a) {
|
|
|
3136
3212
|
documentName: documentName,
|
|
3137
3213
|
}) }), jsxRuntime.jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedQuote.vendorName) })] }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
|
|
3138
3214
|
color: entityBranding.secondaryColor,
|
|
3139
|
-
} }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$
|
|
3215
|
+
} }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$d, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile
|
|
3140
3216
|
? "flex w-full justify-end gap-2"
|
|
3141
3217
|
: "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(DownloadOutlined$1, {}), onClick: function () {
|
|
3142
3218
|
return downloadFile(apiHost + "/api/pdf/quote", token);
|
|
@@ -3231,10 +3307,10 @@ var getColor = function (state) {
|
|
|
3231
3307
|
}
|
|
3232
3308
|
};
|
|
3233
3309
|
|
|
3234
|
-
var Text$
|
|
3310
|
+
var Text$c = antd.Typography.Text;
|
|
3235
3311
|
var TransactionDate = function (_a) {
|
|
3236
3312
|
var date = _a.date;
|
|
3237
|
-
return jsxRuntime.jsx(Text$
|
|
3313
|
+
return jsxRuntime.jsx(Text$c, __assign({ className: "text-sm" }, { children: common.formatDate(date) }));
|
|
3238
3314
|
};
|
|
3239
3315
|
|
|
3240
3316
|
// TODO: delete
|
|
@@ -3268,10 +3344,10 @@ var TransactionGridCell = styled__default["default"].div.withConfig({
|
|
|
3268
3344
|
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n ", "\n\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n text-align: ", ";\n white-space: nowrap;\n font-size: 14px;\n color: ", ";\n\n background-color: inherit;\n\n padding: 1rem;\n min-width: 48px;\n"], ["\n ", "\n\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n text-align: ", ";\n white-space: nowrap;\n font-size: 14px;\n color: ", ";\n\n background-color: inherit;\n\n padding: 1rem;\n min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) { return (props.right ? "flex-end" : "flex-start"); }, function (props) { return (props.right ? "right" : "left"); }, common.SLATE_600);
|
|
3269
3345
|
var templateObject_1$3;
|
|
3270
3346
|
|
|
3271
|
-
var Text$
|
|
3347
|
+
var Text$b = antd.Typography.Text;
|
|
3272
3348
|
var TransactionsEmptyState = function () {
|
|
3273
3349
|
var noTransactionsMessage = React.useContext(TransactionsListContext).noTransactionsMessage;
|
|
3274
|
-
return (jsxRuntime.jsx(Text$
|
|
3350
|
+
return (jsxRuntime.jsx(Text$b, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
|
|
3275
3351
|
};
|
|
3276
3352
|
|
|
3277
3353
|
var isInvoice = function (transaction) {
|
|
@@ -3288,11 +3364,12 @@ var TransactionRowTitle = function (_a) {
|
|
|
3288
3364
|
return (jsxRuntime.jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
|
|
3289
3365
|
};
|
|
3290
3366
|
|
|
3291
|
-
var Text$
|
|
3367
|
+
var Text$a = antd.Typography.Text;
|
|
3292
3368
|
var TransactionsListDesktop = function (_a) {
|
|
3293
3369
|
var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
|
|
3294
3370
|
var columns = React.useContext(TransactionsListContext).columns;
|
|
3295
|
-
var _b = React.useContext(BunnyContext),
|
|
3371
|
+
var _b = React.useContext(BunnyContext), apiHost = _b.apiHost, darkMode = _b.darkMode;
|
|
3372
|
+
var token = useToken();
|
|
3296
3373
|
var showAmount = columns.includes("amount");
|
|
3297
3374
|
var showDateAndTitle = columns.includes("date-and-title");
|
|
3298
3375
|
var showDownload = columns.includes("download");
|
|
@@ -3308,15 +3385,16 @@ var TransactionsListDesktop = function (_a) {
|
|
|
3308
3385
|
backgroundColor: index % 2 === 0
|
|
3309
3386
|
? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
|
|
3310
3387
|
: "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
|
|
3311
|
-
} }, { children: [!showDateAndTitle && !showState && !showAmount && !showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$
|
|
3388
|
+
} }, { children: [!showDateAndTitle && !showState && !showAmount && !showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$a, { children: "No columns selected" }) })), showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt }) })), jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(Text$a, { children: lodash.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] }))] })), 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$a, { children: common.formatCurrency(((_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _a === void 0 ? void 0 : _a.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
|
|
3312
3389
|
});
|
|
3313
3390
|
};
|
|
3314
3391
|
|
|
3315
|
-
var Text$
|
|
3392
|
+
var Text$9 = antd.Typography.Text;
|
|
3316
3393
|
var TransactionsListMobile = function (_a) {
|
|
3317
3394
|
var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
|
|
3318
3395
|
var columns = React.useContext(TransactionsListContext).columns;
|
|
3319
|
-
var _b = React.useContext(BunnyContext),
|
|
3396
|
+
var _b = React.useContext(BunnyContext), apiHost = _b.apiHost, darkMode = _b.darkMode;
|
|
3397
|
+
var token = useToken();
|
|
3320
3398
|
var showAmount = columns.includes("amount");
|
|
3321
3399
|
var showDateAndTitle = columns.includes("date-and-title");
|
|
3322
3400
|
var showDownload = columns.includes("download");
|
|
@@ -3331,11 +3409,11 @@ var TransactionsListMobile = function (_a) {
|
|
|
3331
3409
|
backgroundColor: index % 2 === 0
|
|
3332
3410
|
? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
|
|
3333
3411
|
: "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
|
|
3334
|
-
} }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$
|
|
3412
|
+
} }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$9, { children: lodash.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: [showDateAndTitle && (jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsxRuntime.jsx(Text$9, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$9, { children: common.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
|
|
3335
3413
|
});
|
|
3336
3414
|
};
|
|
3337
3415
|
|
|
3338
|
-
var Text$
|
|
3416
|
+
var Text$8 = antd.Typography.Text;
|
|
3339
3417
|
var DISPLAY_WIDTH = 1200;
|
|
3340
3418
|
function Transactions(_a) {
|
|
3341
3419
|
var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date-and-title", "state", "amount", "download"] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? "shadow-md" : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
|
|
@@ -3366,9 +3444,10 @@ function Transactions(_a) {
|
|
|
3366
3444
|
filterTransactions: filterTransactions,
|
|
3367
3445
|
sortTransactions: sortTransactions,
|
|
3368
3446
|
};
|
|
3369
|
-
var
|
|
3447
|
+
var apiHost = React.useContext(BunnyContext).apiHost;
|
|
3448
|
+
var token = useToken();
|
|
3370
3449
|
// Local state
|
|
3371
|
-
var
|
|
3450
|
+
var _l = React.useState(""), search = _l[0], setSearch = _l[1];
|
|
3372
3451
|
var filterValue = filter ||
|
|
3373
3452
|
(search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
|
|
3374
3453
|
// Queries
|
|
@@ -3443,7 +3522,7 @@ function TransactionsDisplay(_a) {
|
|
|
3443
3522
|
onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
|
|
3444
3523
|
setDrawerOpen(false);
|
|
3445
3524
|
}
|
|
3446
|
-
return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full shadow-padding-xb gap-2 ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-1" : "flex-row items-center", " justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$
|
|
3525
|
+
return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full shadow-padding-xb gap-2 ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-1" : "flex-row items-center", " justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$8, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
|
|
3447
3526
|
), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "") }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
|
|
3448
3527
|
? searchBarClassName
|
|
3449
3528
|
: "border border-slate-200", onChange: function (e) {
|
|
@@ -3462,7 +3541,7 @@ function TransactionsDisplay(_a) {
|
|
|
3462
3541
|
}) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: TransactionsListDesktop({
|
|
3463
3542
|
transactions: updatedTransactions,
|
|
3464
3543
|
onTransactionClick: handleTransactionClick,
|
|
3465
|
-
}) })) }))] })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title:
|
|
3544
|
+
}) })) }))] })), 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) || "", entityId: entityId }) }))) : (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, entityId: entityId })) : (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 })] })] }))) })))] })));
|
|
3466
3545
|
}
|
|
3467
3546
|
|
|
3468
3547
|
function Quotes(_a) {
|
|
@@ -3528,10 +3607,11 @@ function Quotes(_a) {
|
|
|
3528
3607
|
return (jsxRuntime.jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsxRuntime.jsx(QuotesWrapper, {}) })));
|
|
3529
3608
|
}
|
|
3530
3609
|
function QuotesWrapper() {
|
|
3531
|
-
var
|
|
3610
|
+
var apiHost = React.useContext(BunnyContext).apiHost;
|
|
3611
|
+
var token = useToken();
|
|
3532
3612
|
var filterFromContext = React.useContext(TransactionsListContext).filter;
|
|
3533
3613
|
// Local state
|
|
3534
|
-
var
|
|
3614
|
+
var _a = React.useState(""), search = _a[0], setSearch = _a[1];
|
|
3535
3615
|
var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : "");
|
|
3536
3616
|
// Queries
|
|
3537
3617
|
var data = reactQuery.useQuery({
|
|
@@ -3559,14 +3639,16 @@ function QuotesWrapper() {
|
|
|
3559
3639
|
return (jsxRuntime.jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
|
|
3560
3640
|
}
|
|
3561
3641
|
|
|
3642
|
+
var Text$7 = antd.Typography.Text;
|
|
3562
3643
|
var DrawerHeader = function (_a) {
|
|
3563
3644
|
var description = _a.description, onClose = _a.onClose, title = _a.title;
|
|
3564
|
-
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(
|
|
3645
|
+
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$7, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), jsxRuntime.jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsxRuntime.jsx(CloseOutlined$1, {}) }))] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
|
|
3565
3646
|
};
|
|
3566
3647
|
|
|
3567
3648
|
var PaymentMethod = function (_a) {
|
|
3568
3649
|
var entityId = _a.entityId, className = _a.className, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, _c = _a.cardEnabled, cardEnabled = _c === void 0 ? true : _c;
|
|
3569
|
-
var _d = React.useContext(BunnyContext),
|
|
3650
|
+
var _d = React.useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient, onTokenExpired = _d.onTokenExpired;
|
|
3651
|
+
var token = useToken();
|
|
3570
3652
|
// Hooks
|
|
3571
3653
|
var queryClient = reactQuery.useQueryClient();
|
|
3572
3654
|
var paymentPlugins = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }).paymentPlugins;
|
|
@@ -3698,10 +3780,11 @@ var TaxationForm = function (_a) {
|
|
|
3698
3780
|
var account = _a.account, quote = _a.quote;
|
|
3699
3781
|
// Hooks
|
|
3700
3782
|
var queryClient = reactQuery.useQueryClient();
|
|
3701
|
-
var
|
|
3783
|
+
var apiHost = React.useContext(BunnyContext).apiHost;
|
|
3784
|
+
var token = useToken();
|
|
3702
3785
|
var form = antd.Form.useForm()[0];
|
|
3703
3786
|
// Mutations
|
|
3704
|
-
var
|
|
3787
|
+
var _b = reactQuery.useMutation({
|
|
3705
3788
|
mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
|
|
3706
3789
|
var account;
|
|
3707
3790
|
return __generator(this, function (_a) {
|
|
@@ -3723,7 +3806,7 @@ var TaxationForm = function (_a) {
|
|
|
3723
3806
|
queryKey: ["getTaxationRequiredAccountFields", token],
|
|
3724
3807
|
});
|
|
3725
3808
|
},
|
|
3726
|
-
}), updateAccount =
|
|
3809
|
+
}), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
|
|
3727
3810
|
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) {
|
|
3728
3811
|
var _a, _b;
|
|
3729
3812
|
return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
|
|
@@ -3739,7 +3822,8 @@ var FormBillingState = function (_a) {
|
|
|
3739
3822
|
|
|
3740
3823
|
var QuoteCheckout = function (_a) {
|
|
3741
3824
|
var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, entityId = _a.entityId;
|
|
3742
|
-
var _b = React.useContext(BunnyContext), apiHost = _b.apiHost,
|
|
3825
|
+
var _b = React.useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
|
|
3826
|
+
var token = useToken();
|
|
3743
3827
|
var isMobile = common.useIsMobile();
|
|
3744
3828
|
var _c = React.useState(false), isSaving = _c[0], setIsSaving = _c[1];
|
|
3745
3829
|
var paymentRequired = getQuoteAmountDue(quote) > 0;
|
|
@@ -3856,37 +3940,6 @@ var Checkout = function (_a) {
|
|
|
3856
3940
|
}, onPaymentSuccess: onSuccess, graphQLClient: graphQLClient }))] }))] })) })));
|
|
3857
3941
|
};
|
|
3858
3942
|
|
|
3859
|
-
var DEFAULT_HEADERS = {
|
|
3860
|
-
"Content-type": "application/json; charset=utf-8",
|
|
3861
|
-
};
|
|
3862
|
-
// !!! Duplicated from @bunnyapp/common due to bug in signup. Uses BunnyProvider token instead of apiToken.
|
|
3863
|
-
var gqlRequest = function (_a) {
|
|
3864
|
-
var query = _a.query, _b = _a.vars, vars = _b === void 0 ? {} : _b, headers = _a.headers, token = _a.token, isInPreviewMode = _a.isInPreviewMode, apiHost = _a.apiHost;
|
|
3865
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
|
3866
|
-
var graphqlEndpoint, requestHeaders, authorizationHeader, error_1;
|
|
3867
|
-
return __generator(this, function (_c) {
|
|
3868
|
-
switch (_c.label) {
|
|
3869
|
-
case 0:
|
|
3870
|
-
console.log("token in gqlRequest", token);
|
|
3871
|
-
_c.label = 1;
|
|
3872
|
-
case 1:
|
|
3873
|
-
_c.trys.push([1, 3, , 4]);
|
|
3874
|
-
graphqlEndpoint = common.DEFAULT_CONFIG.graphqlEndpoint;
|
|
3875
|
-
requestHeaders = headers || DEFAULT_HEADERS;
|
|
3876
|
-
authorizationHeader = "Bearer ".concat(token);
|
|
3877
|
-
if (!requestHeaders.Authorization && !isInPreviewMode)
|
|
3878
|
-
requestHeaders.Authorization = authorizationHeader;
|
|
3879
|
-
return [4 /*yield*/, request__default["default"]("".concat(apiHost).concat(graphqlEndpoint), query, vars, requestHeaders)];
|
|
3880
|
-
case 2: return [2 /*return*/, _c.sent()];
|
|
3881
|
-
case 3:
|
|
3882
|
-
error_1 = _c.sent();
|
|
3883
|
-
throw error_1;
|
|
3884
|
-
case 4: return [2 /*return*/];
|
|
3885
|
-
}
|
|
3886
|
-
});
|
|
3887
|
-
});
|
|
3888
|
-
};
|
|
3889
|
-
|
|
3890
3943
|
var MUTATION$4 = function () { return "\nmutation AccountSignup (\n $entityId: ID!,\n $pluginId: String!,\n $paymentMethodId: String,\n $priceListCode: String!,\n $accountId: ID!,\n $quoteId: ID!\n) {\n accountSignup(\n entityId: $entityId,\n pluginId: $pluginId,\n paymentMethodId: $paymentMethodId,\n priceListCode: $priceListCode,\n accountId: $accountId,\n quoteId: $quoteId\n ) {\n errors\n quote {\n acceptedByName\n acceptedByTitle\n accountId\n amount\n amountDue\n applicationDate\n applied\n backdatedPeriods\n backdatedQuote\n billingDay\n contactId\n createdAt\n credits\n currencyId\n dealId\n discount\n discountValue\n endDate\n evergreen\n expiresAt\n id\n invoiceImmediately\n invoiceImmediatelyAvailable\n invoiceUntil\n isPendingApprovalRequest\n kind\n message\n name\n netPaymentDays\n notes\n number\n ownerId\n payableId\n periodAmount\n poNumber\n requiresApproval\n smallUnitAmountDue\n splitInvoice\n startDate\n state\n subtotal\n taxAmount\n taxCode\n updatedAt\n uuid\n }\n }\n}"; };
|
|
3891
3944
|
var accountSignup = function (_a) {
|
|
3892
3945
|
var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
|
|
@@ -3930,14 +3983,12 @@ var portalSessionCreate = function (_a) {
|
|
|
3930
3983
|
var _b;
|
|
3931
3984
|
return __generator(this, function (_c) {
|
|
3932
3985
|
switch (_c.label) {
|
|
3933
|
-
case 0:
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
apiHost: apiHost,
|
|
3940
|
-
})];
|
|
3986
|
+
case 0: return [4 /*yield*/, gqlRequest({
|
|
3987
|
+
query: MUTATION$3,
|
|
3988
|
+
token: token,
|
|
3989
|
+
vars: { tenantCode: tenantCode, expiry: expiry, returnUrl: returnUrl },
|
|
3990
|
+
apiHost: apiHost,
|
|
3991
|
+
})];
|
|
3941
3992
|
case 1:
|
|
3942
3993
|
response = _c.sent();
|
|
3943
3994
|
errors = (response === null || response === void 0 ? void 0 : response.portalSessionCreate).errors;
|
|
@@ -4003,41 +4054,24 @@ var getPriceList = function (_a) {
|
|
|
4003
4054
|
};
|
|
4004
4055
|
|
|
4005
4056
|
function PaymentForms(_a) {
|
|
4006
|
-
var quote = _a.quote,
|
|
4057
|
+
var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, entityId = _a.entityId, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction;
|
|
4007
4058
|
var apiHost = React.useContext(BunnyContext).apiHost;
|
|
4008
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess:
|
|
4059
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, graphQLClient: createGraphQLClient(overrideToken, apiHost), customCheckoutFunction: customCheckoutFunction })) : null })) : (jsxRuntime.jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
|
|
4009
4060
|
}
|
|
4010
4061
|
function InitialSignupForm(_a) {
|
|
4011
4062
|
var onSubmit = _a.onSubmit, submitting = _a.submitting;
|
|
4012
|
-
var
|
|
4013
|
-
|
|
4014
|
-
|
|
4015
|
-
|
|
4016
|
-
|
|
4017
|
-
}
|
|
4018
|
-
|
|
4019
|
-
var _a;
|
|
4020
|
-
var _b = e.target, name = _b.name, value = _b.value;
|
|
4021
|
-
setFormData(__assign(__assign({}, formData), (_a = {}, _a[name] = value, _a)));
|
|
4022
|
-
};
|
|
4023
|
-
return (jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col justify-between h-full w-full", onFinish: function () { return onSubmit(formData); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [{ required: true, message: "Please input your first name!" }], initialValue: formData.firstName }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name", value: formData.firstName, onChange: function (e) {
|
|
4024
|
-
handleInputChange(e);
|
|
4025
|
-
setFormData(__assign(__assign({}, formData), { firstName: e.target.value }));
|
|
4026
|
-
} }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [{ required: true, message: "Please input your last name!" }], initialValue: formData.lastName }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name", value: formData.lastName, onChange: function (e) {
|
|
4027
|
-
handleInputChange(e);
|
|
4028
|
-
setFormData(__assign(__assign({}, formData), { lastName: e.target.value }));
|
|
4029
|
-
} }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [
|
|
4063
|
+
var form = antd.Form.useForm()[0];
|
|
4064
|
+
function handleSubmit() {
|
|
4065
|
+
form.validateFields({ validateOnly: true }).then(function () {
|
|
4066
|
+
onSubmit(form.getFieldsValue());
|
|
4067
|
+
});
|
|
4068
|
+
}
|
|
4069
|
+
return (jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col justify-between h-full w-full", onFinish: handleSubmit, form: form }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-2" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ name: "firstName", validateTrigger: "onBlur", 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", validateTrigger: "onBlur", 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", validateTrigger: "onBlur", rules: [
|
|
4030
4070
|
{ required: true, message: "Please input your email!" },
|
|
4031
4071
|
{ type: "email", message: "Please enter a valid email!" },
|
|
4032
|
-
]
|
|
4033
|
-
handleInputChange(e);
|
|
4034
|
-
setFormData(__assign(__assign({}, formData), { email: e.target.value }));
|
|
4035
|
-
} }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ rules: [
|
|
4072
|
+
] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", validateTrigger: "onBlur", rules: [
|
|
4036
4073
|
{ required: true, message: "Please input your account name!" },
|
|
4037
|
-
]
|
|
4038
|
-
handleInputChange(e);
|
|
4039
|
-
setFormData(__assign(__assign({}, formData), { accountName: e.target.value }));
|
|
4040
|
-
} }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", htmlType: "submit", loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
|
|
4074
|
+
] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Account name" }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", htmlType: "submit", loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
|
|
4041
4075
|
}
|
|
4042
4076
|
|
|
4043
4077
|
var Title = antd.Typography.Title, Text$6 = antd.Typography.Text;
|
|
@@ -4051,32 +4085,31 @@ function PriceListDisplay(_a) {
|
|
|
4051
4085
|
var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
|
|
4052
4086
|
if (!priceListData)
|
|
4053
4087
|
return null;
|
|
4054
|
-
|
|
4088
|
+
console.log("topNavImageUrl", topNavImageUrl);
|
|
4089
|
+
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$5, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$5, __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$5, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$5, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
|
|
4055
4090
|
}
|
|
4056
4091
|
|
|
4057
4092
|
var showErrorNotification = common.useErrorNotification();
|
|
4058
4093
|
function Signup(_a) {
|
|
4059
|
-
var
|
|
4094
|
+
var companyName = _a.companyName, entityId = _a.entityId, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, style = _a.style;
|
|
4060
4095
|
// Hooks
|
|
4061
4096
|
var _d = React.useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
|
|
4097
|
+
var token = useToken();
|
|
4062
4098
|
var isMobile = common.useIsMobile();
|
|
4063
4099
|
var topNavImageUrl = React.useContext(BrandContext).topNavImageUrl;
|
|
4100
|
+
console.log("topNavImageUrl in signup", topNavImageUrl);
|
|
4064
4101
|
var _e = React.useState(undefined), quote = _e[0], setQuote = _e[1];
|
|
4065
4102
|
var _f = React.useState(undefined), accountId = _f[0], setAccountId = _f[1];
|
|
4066
|
-
var _g = React.useState(undefined),
|
|
4067
|
-
var _h = React.useState(
|
|
4068
|
-
var _j = React.useState(
|
|
4069
|
-
var _k = React.useState(
|
|
4070
|
-
var
|
|
4071
|
-
var _m = React.useState(undefined), paymentMethodGraphQLClient = _m[0], setPaymentMethodGraphQLClient = _m[1];
|
|
4072
|
-
var paymentMethod = usePaymentMethod(paymentMethodGraphQLClient || graphQLClient, accountId).data;
|
|
4103
|
+
var _g = React.useState(undefined), portalSessionToken = _g[0], setPortalSessionToken = _g[1];
|
|
4104
|
+
var _h = React.useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
|
|
4105
|
+
var _j = React.useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
|
|
4106
|
+
var _k = React.useState(undefined), paymentMethodGraphQLClient = _k[0], setPaymentMethodGraphQLClient = _k[1];
|
|
4107
|
+
var paymentMethod = usePaymentMethod(paymentMethodGraphQLClient || graphQLClient).data;
|
|
4073
4108
|
var queryClient = reactQuery.useQueryClient();
|
|
4074
4109
|
// Queries
|
|
4075
4110
|
var priceListData = reactQuery.useQuery({
|
|
4076
4111
|
queryKey: ["priceList", priceListCode],
|
|
4077
|
-
queryFn: function () {
|
|
4078
|
-
return getPriceList({ token: apiToken, apiHost: apiHost, code: priceListCode });
|
|
4079
|
-
},
|
|
4112
|
+
queryFn: function () { return getPriceList({ token: token, apiHost: apiHost, code: priceListCode }); },
|
|
4080
4113
|
}).data;
|
|
4081
4114
|
function handleSubmit(formData) {
|
|
4082
4115
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -4086,9 +4119,8 @@ function Signup(_a) {
|
|
|
4086
4119
|
case 0:
|
|
4087
4120
|
_a.trys.push([0, 3, , 4]);
|
|
4088
4121
|
setProceedingToPayment(true);
|
|
4089
|
-
setFormData(formData);
|
|
4090
4122
|
return [4 /*yield*/, quoteAccountSignup({
|
|
4091
|
-
token:
|
|
4123
|
+
token: token,
|
|
4092
4124
|
apiHost: apiHost,
|
|
4093
4125
|
entityId: entityId,
|
|
4094
4126
|
priceListCode: priceListCode,
|
|
@@ -4102,9 +4134,8 @@ function Signup(_a) {
|
|
|
4102
4134
|
case 1:
|
|
4103
4135
|
data = _a.sent();
|
|
4104
4136
|
setAccountId(data.account.id);
|
|
4105
|
-
console.log("apiToken", apiToken);
|
|
4106
4137
|
return [4 /*yield*/, portalSessionCreate({
|
|
4107
|
-
token:
|
|
4138
|
+
token: token,
|
|
4108
4139
|
apiHost: apiHost,
|
|
4109
4140
|
tenantCode: data.tenant.code,
|
|
4110
4141
|
expiry: 24,
|
|
@@ -4119,12 +4150,8 @@ function Signup(_a) {
|
|
|
4119
4150
|
queryClient.invalidateQueries({
|
|
4120
4151
|
queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey,
|
|
4121
4152
|
});
|
|
4122
|
-
setQuoteId(data.quote.id);
|
|
4123
4153
|
setProceedingToPayment(false);
|
|
4124
|
-
setQuote(
|
|
4125
|
-
amountDue: data.quote.amountDue,
|
|
4126
|
-
currencyId: data.quote.currencyId,
|
|
4127
|
-
});
|
|
4154
|
+
setQuote(data.quote);
|
|
4128
4155
|
return [3 /*break*/, 4];
|
|
4129
4156
|
case 3:
|
|
4130
4157
|
error_1 = _a.sent();
|
|
@@ -4136,39 +4163,39 @@ function Signup(_a) {
|
|
|
4136
4163
|
});
|
|
4137
4164
|
});
|
|
4138
4165
|
}
|
|
4139
|
-
function
|
|
4166
|
+
function handlePaymentSuccess() {
|
|
4167
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
4168
|
+
return __generator(this, function (_a) {
|
|
4169
|
+
setPurchaseSucceeded(true);
|
|
4170
|
+
return [2 /*return*/];
|
|
4171
|
+
});
|
|
4172
|
+
});
|
|
4173
|
+
}
|
|
4174
|
+
function accountSignupFunction(plugin) {
|
|
4140
4175
|
return __awaiter(this, void 0, void 0, function () {
|
|
4141
|
-
var plugin;
|
|
4142
4176
|
return __generator(this, function (_a) {
|
|
4143
4177
|
switch (_a.label) {
|
|
4144
4178
|
case 0:
|
|
4145
|
-
if (!
|
|
4146
|
-
throw new Error("
|
|
4147
|
-
}
|
|
4148
|
-
plugin = { id: "" };
|
|
4149
|
-
if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
|
|
4150
|
-
throw new Error("Plugin ID is required");
|
|
4179
|
+
if (!portalSessionToken) {
|
|
4180
|
+
throw new Error("Portal session token is required");
|
|
4151
4181
|
}
|
|
4152
4182
|
if (!accountId) {
|
|
4153
4183
|
throw new Error("Account ID is required");
|
|
4154
4184
|
}
|
|
4155
|
-
if (!
|
|
4156
|
-
throw new Error("
|
|
4185
|
+
if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
|
|
4186
|
+
throw new Error("Plugin ID is required");
|
|
4157
4187
|
}
|
|
4158
4188
|
return [4 /*yield*/, accountSignup({
|
|
4159
4189
|
token: portalSessionToken,
|
|
4160
4190
|
apiHost: apiHost,
|
|
4161
4191
|
entityId: entityId,
|
|
4162
|
-
quoteId:
|
|
4192
|
+
quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
|
|
4163
4193
|
paymentMethodId: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
|
|
4164
|
-
pluginId: plugin.id.toString(),
|
|
4194
|
+
pluginId: plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(),
|
|
4165
4195
|
priceListCode: priceListCode,
|
|
4166
4196
|
accountId: accountId,
|
|
4167
4197
|
})];
|
|
4168
|
-
case 1:
|
|
4169
|
-
_a.sent();
|
|
4170
|
-
setPurchaseSucceeded(true);
|
|
4171
|
-
return [2 /*return*/];
|
|
4198
|
+
case 1: return [2 /*return*/, _a.sent()];
|
|
4172
4199
|
}
|
|
4173
4200
|
});
|
|
4174
4201
|
});
|
|
@@ -4182,7 +4209,7 @@ function Signup(_a) {
|
|
|
4182
4209
|
};
|
|
4183
4210
|
return (jsxRuntime.jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl })) : (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
|
|
4184
4211
|
? "items-center justify-center my-12"
|
|
4185
|
-
: "w-1/2 items-center justify-center my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { entityId: entityId, quote: quote,
|
|
4212
|
+
: "w-1/2 items-center justify-center my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
|
|
4186
4213
|
}
|
|
4187
4214
|
|
|
4188
4215
|
// WARNING: There is a preview button on APP that will need to be changed if this query is changed
|
|
@@ -4611,8 +4638,9 @@ var SubscriptionCardActions = function (_a) {
|
|
|
4611
4638
|
var _b, _c;
|
|
4612
4639
|
var planChangeOptions = _a.planChangeOptions, subscription = _a.subscription, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible;
|
|
4613
4640
|
// Context
|
|
4614
|
-
var
|
|
4615
|
-
var
|
|
4641
|
+
var apiHost = React.useContext(BunnyContext).apiHost;
|
|
4642
|
+
var token = useToken();
|
|
4643
|
+
var _d = React.useContext(SubscriptionsContext), onChangePlanClick = _d.onChangePlanClick, onClickUpgrade = _d.onClickUpgrade, isTempViewOnly = _d.isTempViewOnly;
|
|
4616
4644
|
// Hooks
|
|
4617
4645
|
common.useSuccessNotification();
|
|
4618
4646
|
// const cancelSubscription = useCancelSubscription();
|
|
@@ -4800,7 +4828,8 @@ var SubscriptionCardDesktop = function (_a) {
|
|
|
4800
4828
|
var SubscriptionCardDesktopRow = function (_a) {
|
|
4801
4829
|
var charge = _a.charge, chargeIndex = _a.chargeIndex, subscription = _a.subscription;
|
|
4802
4830
|
// Context
|
|
4803
|
-
var
|
|
4831
|
+
var apiHost = React.useContext(BunnyContext).apiHost;
|
|
4832
|
+
var token = useToken();
|
|
4804
4833
|
// Derived state
|
|
4805
4834
|
var isRamp = charge.isRamp;
|
|
4806
4835
|
var prevCharge = subscription.charges[chargeIndex - 1];
|
|
@@ -4921,7 +4950,8 @@ var SubscriptionsNavigation = function (_a) {
|
|
|
4921
4950
|
var Subscriptions = function (_a) {
|
|
4922
4951
|
var companyName = _a.companyName, entityId = _a.entityId, gap = _a.gap, shadow = _a.shadow, _b = _a.showTitle, showTitle = _b === void 0 ? true : _b, className = _a.className;
|
|
4923
4952
|
// Context
|
|
4924
|
-
var _c = React.useContext(BunnyContext),
|
|
4953
|
+
var _c = React.useContext(BunnyContext), apiHost = _c.apiHost, onTokenExpired = _c.onTokenExpired;
|
|
4954
|
+
var token = useToken();
|
|
4925
4955
|
// Recoil state
|
|
4926
4956
|
// const [updatingChargeQuantityId, setUpdatingChargeQuantityId] =
|
|
4927
4957
|
// useRecoilState(updatingChargeQuantityIdState);
|
|
@@ -8199,39 +8229,53 @@ var getAccount = function (_a) {
|
|
|
8199
8229
|
};
|
|
8200
8230
|
|
|
8201
8231
|
var BillingDetails = function (_a) {
|
|
8202
|
-
var entityId = _a.entityId,
|
|
8203
|
-
var _d = React.useContext(BunnyContext),
|
|
8232
|
+
var entityId = _a.entityId, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, className = _a.className, accountIdProp = _a.accountId, hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
|
|
8233
|
+
var _d = React.useContext(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired, graphQLClient = _d.graphQLClient;
|
|
8234
|
+
var token = useToken();
|
|
8204
8235
|
// Hooks
|
|
8205
8236
|
var isMobile = common.useIsMobile();
|
|
8206
8237
|
var queryClient = reactQuery.useQueryClient();
|
|
8207
|
-
var form = antd.Form.useForm()[0];
|
|
8208
|
-
var _e = React.useState(false), isFormEdited = _e[0], setIsFormEdited = _e[1];
|
|
8209
8238
|
var showSuccessNotification = common.useSuccessNotification();
|
|
8210
8239
|
var showErrorNotification = common.useErrorNotification();
|
|
8211
8240
|
var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
|
|
8241
|
+
var paymentMethod = usePaymentMethod(graphQLClient).data;
|
|
8242
|
+
// State
|
|
8243
|
+
var form = antd.Form.useForm()[0];
|
|
8244
|
+
var _e = React.useState(false), isFormEdited = _e[0], setIsFormEdited = _e[1];
|
|
8245
|
+
var _f = React.useState(accountIdProp), accountId = _f[0], setAccountId = _f[1];
|
|
8246
|
+
var filteredCountryList = React.useMemo(function () {
|
|
8247
|
+
return countryListFilter
|
|
8248
|
+
? common.Lists.COUNTRY_LIST.filter(countryListFilter)
|
|
8249
|
+
: common.Lists.COUNTRY_LIST;
|
|
8250
|
+
}, [countryListFilter]);
|
|
8212
8251
|
// Queries
|
|
8213
|
-
var
|
|
8252
|
+
var _g = reactQuery.useQuery({
|
|
8214
8253
|
queryKey: ["account", accountId],
|
|
8215
8254
|
queryFn: function () { return getAccount({ token: token, apiHost: apiHost, id: accountId }); },
|
|
8216
|
-
|
|
8217
|
-
|
|
8255
|
+
enabled: !!accountId,
|
|
8256
|
+
}), account = _g.data, isLoadingAccount = _g.isLoading;
|
|
8257
|
+
var _h = reactQuery.useMutation({
|
|
8218
8258
|
mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
|
|
8219
8259
|
var account;
|
|
8220
8260
|
return __generator(this, function (_a) {
|
|
8221
8261
|
switch (_a.label) {
|
|
8222
|
-
case 0:
|
|
8223
|
-
|
|
8224
|
-
|
|
8225
|
-
|
|
8226
|
-
|
|
8227
|
-
|
|
8228
|
-
|
|
8229
|
-
|
|
8230
|
-
|
|
8231
|
-
|
|
8232
|
-
|
|
8233
|
-
|
|
8234
|
-
|
|
8262
|
+
case 0:
|
|
8263
|
+
if (!accountId) {
|
|
8264
|
+
throw new Error("Account ID is required");
|
|
8265
|
+
}
|
|
8266
|
+
return [4 /*yield*/, accountUpdate({
|
|
8267
|
+
accountId: accountId,
|
|
8268
|
+
attributes: {
|
|
8269
|
+
name: changedFormData.name,
|
|
8270
|
+
billingStreet: changedFormData.billingStreet,
|
|
8271
|
+
billingCity: changedFormData.billingCity,
|
|
8272
|
+
billingZip: changedFormData.billingZip,
|
|
8273
|
+
billingState: changedFormData.billingState,
|
|
8274
|
+
billingCountry: changedFormData.billingCountry,
|
|
8275
|
+
},
|
|
8276
|
+
token: token,
|
|
8277
|
+
apiHost: apiHost,
|
|
8278
|
+
})];
|
|
8235
8279
|
case 1:
|
|
8236
8280
|
account = _a.sent();
|
|
8237
8281
|
queryClient.setQueryData(["account", accountId], function (old) {
|
|
@@ -8242,11 +8286,17 @@ var BillingDetails = function (_a) {
|
|
|
8242
8286
|
});
|
|
8243
8287
|
}); },
|
|
8244
8288
|
onSuccess: function () {
|
|
8289
|
+
showSuccessNotification("Your account details have been saved");
|
|
8245
8290
|
queryClient.invalidateQueries({
|
|
8246
8291
|
queryKey: ["getTaxationRequiredAccountFields", token],
|
|
8247
8292
|
});
|
|
8248
8293
|
},
|
|
8249
|
-
}), updateAccount =
|
|
8294
|
+
}), updateAccount = _h.mutate, isUpdatingAccount = _h.isPending;
|
|
8295
|
+
React.useEffect(function () {
|
|
8296
|
+
if (paymentMethod) {
|
|
8297
|
+
setAccountId(paymentMethod.accountId);
|
|
8298
|
+
}
|
|
8299
|
+
}, [paymentMethod]);
|
|
8250
8300
|
React.useEffect(function () {
|
|
8251
8301
|
if (account) {
|
|
8252
8302
|
form.setFieldsValue({
|
|
@@ -8263,33 +8313,35 @@ var BillingDetails = function (_a) {
|
|
|
8263
8313
|
showSuccessNotification("Your payment method has been saved");
|
|
8264
8314
|
}, [queryClient]);
|
|
8265
8315
|
var savePaymentPreCondition = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
8266
|
-
var error_1;
|
|
8267
8316
|
return __generator(this, function (_a) {
|
|
8268
|
-
|
|
8269
|
-
|
|
8270
|
-
|
|
8271
|
-
|
|
8272
|
-
|
|
8273
|
-
|
|
8274
|
-
|
|
8275
|
-
|
|
8276
|
-
|
|
8277
|
-
|
|
8278
|
-
|
|
8279
|
-
|
|
8280
|
-
|
|
8281
|
-
|
|
8282
|
-
|
|
8283
|
-
|
|
8284
|
-
|
|
8317
|
+
form.validateFields({ validateOnly: true }).then(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
8318
|
+
var error_1;
|
|
8319
|
+
return __generator(this, function (_a) {
|
|
8320
|
+
switch (_a.label) {
|
|
8321
|
+
case 0:
|
|
8322
|
+
_a.trys.push([0, 2, 3, 4]);
|
|
8323
|
+
return [4 /*yield*/, form.validateFields()];
|
|
8324
|
+
case 1:
|
|
8325
|
+
_a.sent();
|
|
8326
|
+
updateAccount(form.getFieldsValue());
|
|
8327
|
+
return [2 /*return*/, true];
|
|
8328
|
+
case 2:
|
|
8329
|
+
error_1 = _a.sent();
|
|
8330
|
+
if (error_1 instanceof Error) {
|
|
8331
|
+
showErrorNotification("Failed to update account", error_1.message);
|
|
8332
|
+
}
|
|
8333
|
+
else {
|
|
8334
|
+
showErrorNotification("Please fill out all required fields");
|
|
8335
|
+
}
|
|
8336
|
+
return [2 /*return*/, false];
|
|
8337
|
+
case 3:
|
|
8338
|
+
setIsFormEdited(false);
|
|
8339
|
+
return [7 /*endfinally*/];
|
|
8340
|
+
case 4: return [2 /*return*/];
|
|
8285
8341
|
}
|
|
8286
|
-
|
|
8287
|
-
|
|
8288
|
-
|
|
8289
|
-
showSuccessNotification("Your account details have been saved");
|
|
8290
|
-
return [7 /*endfinally*/];
|
|
8291
|
-
case 5: return [2 /*return*/];
|
|
8292
|
-
}
|
|
8342
|
+
});
|
|
8343
|
+
}); });
|
|
8344
|
+
return [2 /*return*/];
|
|
8293
8345
|
});
|
|
8294
8346
|
}); };
|
|
8295
8347
|
function handleValuesChange(changedValues) {
|
|
@@ -8304,13 +8356,13 @@ var BillingDetails = function (_a) {
|
|
|
8304
8356
|
};
|
|
8305
8357
|
setIsFormEdited(isFormEdited());
|
|
8306
8358
|
}
|
|
8307
|
-
return (jsxRuntime.jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex p-2 my-2 ".concat(isMobile ? "flex-col space-y-4" : "flex-row", " gap-4") }, { children: [jsxRuntime.jsxs("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2", " px-4") }, { children: [jsxRuntime.jsx(ReactQueryDevtools2, {}), jsxRuntime.jsx(antd.Skeleton, __assign({ loading: isLoadingAccount }, { children: jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical", disabled: isUpdatingAccount, onValuesChange: function (changedValues) {
|
|
8359
|
+
return (jsxRuntime.jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex p-2 my-2 ".concat(isMobile ? "flex-col space-y-4" : "flex-row", " gap-4") }, { children: [jsxRuntime.jsxs("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? "w-full" : "w-1/2", " px-4") }, { children: [jsxRuntime.jsx(ReactQueryDevtools2, {}), jsxRuntime.jsx(antd.Skeleton, __assign({ loading: isLoadingAccount }, { children: jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical", disabled: isUpdatingAccount, onValuesChange: function (changedValues) {
|
|
8308
8360
|
handleValuesChange(changedValues);
|
|
8309
8361
|
} }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Account name", name: "name", rules: [
|
|
8310
8362
|
{ required: true, message: "Account name is required" },
|
|
8311
8363
|
] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [
|
|
8312
8364
|
{ required: true, message: "Street address is required" },
|
|
8313
|
-
] }, { 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-col pb-2" : "flex-row", " gap-4") }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "State", name: "billingState", className: "flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Country", name: "billingCountry", className: "flex-1", rules: [{ required: true, message: "Country is required" }] }, { children: jsxRuntime.jsx(antd.Select, { options:
|
|
8365
|
+
] }, { 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-col pb-2" : "flex-row", " gap-4") }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "State", name: "billingState", className: "flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Country", name: "billingCountry", className: "flex-1", rules: [{ required: true, message: "Country is required" }] }, { children: jsxRuntime.jsx(antd.Select, { options: filteredCountryList, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
|
|
8314
8366
|
var _a, _b;
|
|
8315
8367
|
return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "")
|
|
8316
8368
|
.toLowerCase()
|
|
@@ -8318,13 +8370,13 @@ var BillingDetails = function (_a) {
|
|
|
8318
8370
|
((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "")
|
|
8319
8371
|
.toLowerCase()
|
|
8320
8372
|
.includes(input.toLowerCase());
|
|
8321
|
-
} }) }))] })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Email", name: "email" }, { children: jsxRuntime.jsx(antd.Input, { disabled: true }) }))] })) })), jsxRuntime.jsx(antd.Button, __assign({ disabled: !isFormEdited || isUpdatingAccount, className: "w-full mt-4", type: "primary", onClick: function () {
|
|
8373
|
+
} }) }))] })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Email", name: "email" }, { children: jsxRuntime.jsx(antd.Input, { disabled: true, placeholder: "Available soon" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Tax ID", name: "taxId", tooltip: "Tax ID will be printed on quotes and invoices below the account's address" }, { children: jsxRuntime.jsx(antd.Input, { disabled: true, placeholder: "Available soon" }) }))] })) })), jsxRuntime.jsx(antd.Button, __assign({ disabled: !isFormEdited || isUpdatingAccount, className: "w-full mt-4", type: "primary", onClick: function () {
|
|
8322
8374
|
savePaymentPreCondition();
|
|
8323
|
-
} }, { children: "Save" }))] })), 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" }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2 pt-4", " flex justify-center") }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
|
|
8324
|
-
|
|
8325
|
-
|
|
8326
|
-
|
|
8327
|
-
|
|
8375
|
+
} }, { children: "Save" }))] })), !hidePaymentMethodForm ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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" }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2 pt-4", " flex justify-center") }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
|
|
8376
|
+
handleAllErrorFormats(error);
|
|
8377
|
+
}, onSavePaymentMethod: function () {
|
|
8378
|
+
onSuccess();
|
|
8379
|
+
}, graphQLClient: graphQLClient }) }))] })) : null] })) })));
|
|
8328
8380
|
};
|
|
8329
8381
|
var WrapperComponent = function (_a) {
|
|
8330
8382
|
var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;
|