@bunnyapp/components 1.0.2 → 1.0.4

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 CHANGED
@@ -1550,14 +1550,14 @@ var BrandContext = React.createContext({
1550
1550
  topNavImageUrl: common.DEFAULT_TOP_NAV_IMAGE_URL,
1551
1551
  });
1552
1552
 
1553
- var MUTATION$8 = "{\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }";
1553
+ var MUTATION$9 = "{\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }";
1554
1554
  var getBranding = function (_a) {
1555
1555
  var token = _a.token, subdomain = _a.subdomain;
1556
1556
  return __awaiter(void 0, void 0, void 0, function () {
1557
1557
  var response;
1558
1558
  return __generator(this, function (_b) {
1559
1559
  switch (_b.label) {
1560
- case 0: return [4 /*yield*/, common.gqlRequest({ query: MUTATION$8, token: token, subdomain: subdomain })];
1560
+ case 0: return [4 /*yield*/, common.gqlRequest({ query: MUTATION$9, token: token, subdomain: subdomain })];
1561
1561
  case 1:
1562
1562
  response = _b.sent();
1563
1563
  return [2 /*return*/, response === null || response === void 0 ? void 0 : response.entityBranding];
@@ -1668,54 +1668,63 @@ function BunnyProvider(_a) {
1668
1668
  document.getElementsByTagName("head")[0].removeChild(script);
1669
1669
  };
1670
1670
  }, []);
1671
- return (jsxRuntime.jsx(BunnyContext.Provider, __assign({ value: {
1671
+ return (jsxRuntime.jsxs(BunnyContext.Provider, __assign({ value: {
1672
1672
  subdomain: subdomain,
1673
1673
  graphQLClient: graphQLClient,
1674
1674
  window: window,
1675
1675
  token: token,
1676
1676
  accountId: accountId,
1677
1677
  darkMode: darkMode,
1678
- } }, { children: jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient$1 }, { children: jsxRuntime.jsx(recoil.RecoilRoot, { children: jsxRuntime.jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsxRuntime.jsx(antd.ConfigProvider, __assign({ theme: {
1679
- algorithm: darkMode
1680
- ? theme__default["default"].darkAlgorithm
1681
- : theme__default["default"].defaultAlgorithm,
1682
- token: {
1683
- borderRadius: 4,
1684
- colorPrimary: entityBranding.brandColor,
1685
- colorLink: entityBranding.brandColor,
1686
- colorLinkActive: entityBranding.brandColor,
1687
- colorLinkHover: entityBranding.brandColor,
1688
- fontFamily: "Inter",
1689
- colorBorder: common.INPUT_BORDER_COLOR,
1690
- },
1691
- components: {
1692
- Drawer: {
1693
- colorBgElevated: darkMode
1694
- ? "var(--row-background-dark)"
1695
- : common.SLATE_50,
1678
+ } }, { children: [jsxRuntime.jsx("div", __assign({ style: { position: "fixed", left: -2000000000 } }, { children: "test" })), jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient$1 }, { children: jsxRuntime.jsx(recoil.RecoilRoot, { children: jsxRuntime.jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsxRuntime.jsx(antd.ConfigProvider, __assign({ theme: {
1679
+ algorithm: darkMode
1680
+ ? theme__default["default"].darkAlgorithm
1681
+ : theme__default["default"].defaultAlgorithm,
1682
+ token: {
1683
+ borderRadius: 4,
1684
+ colorPrimary: entityBranding.brandColor,
1685
+ colorLink: entityBranding.brandColor,
1686
+ colorLinkActive: entityBranding.brandColor,
1687
+ colorLinkHover: entityBranding.brandColor,
1688
+ fontFamily: common.MARK_PRO,
1689
+ colorBorder: common.INPUT_BORDER_COLOR,
1696
1690
  },
1697
- Divider: {
1698
- colorSplit: darkMode ? common.SLATE_400 : common.SLATE_200,
1691
+ components: {
1692
+ Drawer: {
1693
+ colorBgElevated: darkMode
1694
+ ? "var(--row-background-dark)"
1695
+ : common.SLATE_50,
1696
+ },
1697
+ Divider: {
1698
+ colorSplit: darkMode ? common.SLATE_400 : common.SLATE_200,
1699
+ },
1699
1700
  },
1700
- },
1701
- } }, { children: jsxRuntime.jsx(SecondaryWrapper, __assign({ setBranding: setBranding }, { children: children })) })) })) }) })) })));
1701
+ } }, { children: jsxRuntime.jsx(SecondaryWrapper, __assign({ setBranding: setBranding }, { children: children })) })) })) }) }))] })));
1702
1702
  }
1703
1703
  function SecondaryWrapper(_a) {
1704
1704
  var children = _a.children, setBranding = _a.setBranding;
1705
- var _b = React.useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token;
1705
+ var _b = React.useState(false), interFontLoaded = _b[0], setInterFontLoaded = _b[1];
1706
+ var _c = React.useContext(BunnyContext), subdomain = _c.subdomain, token = _c.token;
1706
1707
  var brandingData = reactQuery.useQuery({
1707
1708
  queryKey: common.QueryKeyFactory.default.brandingKey,
1708
1709
  queryFn: function () { return getBranding({ token: token, subdomain: subdomain }); },
1709
1710
  }).data;
1710
- var _c = reactQuery.useQuery({
1711
+ var _d = reactQuery.useQuery({
1711
1712
  queryKey: common.QueryKeyFactory.default.currentUserKey,
1712
1713
  queryFn: function () { return getCurrentUserData({ token: token }); },
1713
- }); _c.data; _c.isLoading;
1714
+ }); _d.data; _d.isLoading;
1714
1715
  React.useEffect(function () {
1715
1716
  if (brandingData) {
1716
1717
  setBranding(brandingData);
1717
1718
  }
1718
1719
  }, [brandingData]);
1720
+ // Check if Inter font is loaded
1721
+ React.useEffect(function () {
1722
+ document.fonts.ready.then(function () {
1723
+ setInterFontLoaded(true);
1724
+ });
1725
+ }, []);
1726
+ if (!interFontLoaded)
1727
+ return null;
1719
1728
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
1720
1729
  }
1721
1730
 
@@ -1762,7 +1771,7 @@ function styleInject(css, ref) {
1762
1771
  }
1763
1772
  }
1764
1773
 
1765
- var css_248z = "@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype');\n}\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf) format('truetype');\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-primary:disabled {\n background: #eef0f2 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n border: none;\n}\n.ant-btn {\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 box-shadow: none;\n text-shadow: none;\n outline: none !important;\n line-height: 1;\n font-size: 0.875rem;\n font-weight: normal;\n}\n.ant-btn > span {\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.ant-btn-lg {\n height: 44px !important;\n}\n.ant-btn-default:disabled {\n border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.ant-btn-link {\n border: none !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}\n.ant-btn-link > span {\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.ant-btn-link:disabled {\n background-color: transparent !important;\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-select-selector {\n box-shadow: none !important;\n background-color: transparent !important;\n border: none !important;\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-divider {\n margin: 0;\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.relative {\n position: relative;\n}\n.absolute {\n position: absolute;\n}\n.fixed {\n position: fixed;\n}\n.top-0 {\n top: 0;\n}\n.right-0 {\n right: 0;\n}\n.bottom-0 {\n bottom: 0;\n}\n.left-0 {\n left: 0;\n}\n.overflow-hidden {\n overflow: hidden !important;\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-visible {\n overflow: visible;\n}\n.z-50 {\n z-index: 50;\n}\n.-top-1\\/10 {\n top: -10%;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-tr {\n border-top-right-radius: 0.25rem;\n}\n.rounded-br {\n border-bottom-right-radius: 0.25rem;\n}\n.rounded-bl {\n border-bottom-left-radius: 0.25rem;\n}\n.rounded-tl {\n border-top-left-radius: 0.25rem;\n}\n.rounded-t {\n border-top-right-radius: 0.25rem;\n border-top-left-radius: 0.25rem;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.flex {\n display: flex;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.grow {\n flex-grow: 1;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.basis-0 {\n flex-basis: 0;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.items-center {\n align-items: center;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-start {\n align-items: flex-start;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.underline {\n text-decoration: underline;\n}\n.no-underline {\n text-decoration: none;\n}\n.text-nowrap {\n white-space: nowrap;\n}\n.text-white {\n color: white;\n}\n.text-xxs {\n font-size: 0.625rem;\n}\n.text-xs {\n font-size: 0.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n}\n.text-base {\n font-size: 1rem;\n}\n.text-lg {\n font-size: 1.125rem;\n}\n.text-xl {\n font-size: 1.25rem;\n}\n.text-2xl {\n font-size: 1.5rem;\n}\n.text-3xl {\n font-size: 2rem;\n}\n.text-4xl {\n font-size: 2.5rem;\n}\n.text-5xl {\n font-size: 3rem;\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.text-gray {\n color: #808080 !important;\n}\n.text-gray-400 {\n color: #9ca3af !important;\n}\n.text-gray-500 {\n color: #6b7280 !important;\n}\n.text-blue-gray {\n color: #717d94;\n}\n.text-primary {\n color: #ff6e1c;\n}\n.text-secondary {\n color: #4956dc;\n}\n.capitalize {\n text-transform: capitalize !important;\n}\n.font-normal {\n font-weight: 400;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-bold {\n font-weight: 700;\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n background-color: white;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.border-t-solid {\n border-top-style: solid;\n}\n.border-b-solid {\n border-bottom-style: solid;\n}\n.border-t-1 {\n border-top-width: 1px;\n}\n.border-b-1 {\n border-bottom-width: 1px;\n}\n.gap-0 {\n gap: 0 !important;\n}\n.gap-0\\.5 {\n gap: 0.125rem;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem !important;\n}\n.gap-5 {\n gap: 1.25rem;\n}\n.gap-6 {\n gap: 1.5rem !important;\n}\n.gap-8 {\n gap: 2rem !important;\n}\n.gap-12 {\n gap: 3rem !important;\n}\n/* Padding Utilities */\n.p-0 {\n padding: 0;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-3 {\n padding: 0.75rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-5 {\n padding: 1.25rem;\n}\n.p-6 {\n padding: 1.5rem;\n}\n.p-8 {\n padding: 2rem;\n}\n/* Padding X Utilities */\n.px-0 {\n padding-right: 0;\n padding-left: 0;\n}\n.px-1 {\n padding-right: 0.25rem;\n padding-left: 0.25rem;\n}\n.px-2 {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n.px-3 {\n padding-right: 0.75rem;\n padding-left: 0.75rem;\n}\n.px-4 {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.px-5 {\n padding-right: 1.25rem;\n padding-left: 1.25rem;\n}\n.px-6 {\n padding-right: 1.5rem;\n padding-left: 1.5rem;\n}\n.px-8 {\n padding-right: 2rem;\n padding-left: 2rem;\n}\n.px-12 {\n padding-right: 3rem;\n padding-left: 3rem;\n}\n/* Padding Y Utilities */\n.py-0 {\n padding-top: 0;\n padding-bottom: 0;\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-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\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/* Padding Top Utilities */\n.pt-0 {\n padding-top: 0;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-3 {\n padding-top: 0.75rem;\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/* Padding Right Utilities */\n.pr-0 {\n padding-right: 0;\n}\n.pr-4 {\n padding-right: 1rem;\n}\n.pr-8 {\n padding-right: 2rem;\n}\n/* Padding Bottom Utilities */\n.pb-0 {\n padding-bottom: 0;\n}\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n/* Padding Left Utilities */\n.pl-0 {\n padding-left: 0;\n}\n.pl-1 {\n padding-left: 0.25rem;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pl-8 {\n padding-left: 2rem;\n}\n/* Space Utilities */\n.space-y-2 {\n gap: 0.5rem;\n}\n.space-y-4 {\n gap: 1rem;\n}\n.space-y-8 {\n gap: 2rem;\n}\n/* Margin Utilities */\n.ml-2 {\n margin-left: 0.5rem;\n}\n.ml-6 {\n margin-left: 1.5rem;\n}\n.ml-8 {\n margin-left: 2rem;\n}\n.mb-0 {\n margin-bottom: 0;\n}\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n.mb-6 {\n margin-bottom: 1.5rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.mr-2 {\n margin-right: 0.5rem;\n}\n.mr-4 {\n margin-right: 1rem;\n}\n.mr-6 {\n margin-right: 1.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-0 {\n margin-top: 0;\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-5 {\n margin-top: 1.25rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\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.my-8 {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.mx-8 {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n.w-full {\n width: 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-14 {\n width: 3.5rem;\n /* 56px */\n}\n.w-20 {\n width: 5rem;\n /* 80px */\n}\n.h-full {\n height: 100%;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-6 {\n height: 1.5rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-14 {\n height: 3.5rem;\n /* 56px */\n}\n.h-80 {\n height: 20rem;\n}\n.h-96 {\n height: 24rem;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.cursor-not-allowed {\n cursor: not-allowed;\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.grid-cols-4 {\n grid-template-columns: repeat(4, minMax(0, 1fr));\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-4 {\n grid-column: span 4 / span 4;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n/* Background colors */\n.bg-black {\n background-color: #000000;\n}\n.bg-slate-50 {\n background-color: #f8fafc;\n}\n.bg-slate-100 {\n background-color: #f1f5f9;\n}\n.bg-slate-200 {\n background-color: #e2e8f0;\n}\n.bg-slate-300 {\n background-color: #cbd5e1;\n}\n.bg-slate-400 {\n background-color: #94a3b8;\n}\n.bg-slate-500 {\n background-color: #64748b;\n}\n.bg-slate-600 {\n background-color: #475569;\n}\n.bg-slate-700 {\n background-color: #334155;\n}\n.bg-slate-800 {\n background-color: #1e293b;\n}\n.bg-slate-900 {\n background-color: #0f172a;\n}\n.bg-slate-950 {\n background-color: #020617;\n}\n.bg-gray-50 {\n background-color: #f9fafb;\n}\n.bg-gray-100 {\n background-color: #f3f4f6;\n}\n.bg-gray-200 {\n background-color: #e5e7eb;\n}\n.bg-gray-300 {\n background-color: #d1d5db;\n}\n.bg-gray-400 {\n background-color: #9ca3af;\n}\n.bg-gray-500 {\n background-color: #6b7280;\n}\n.bg-gray-600 {\n background-color: #4b5563;\n}\n.bg-gray-700 {\n background-color: #374151;\n}\n.bg-gray-800 {\n background-color: #1f2937;\n}\n.bg-gray-900 {\n background-color: #111827;\n}\n.bg-gray-950 {\n background-color: #030712;\n}\n.bg-green-200 {\n background-color: #a7f3d0;\n}\n.bg-green-500 {\n background-color: #10b981;\n}\n.bg-blue-50 {\n background-color: #eff6ff;\n}\n.bg-blue-100 {\n background-color: #dbeafe;\n}\n.bg-blue-200 {\n background-color: #bfdbfe;\n}\n.bg-blue-300 {\n background-color: #93c5fd;\n}\n.bg-blue-400 {\n background-color: #60a5fa;\n}\n.bg-blue-500 {\n background-color: #3b82f6;\n}\n.bg-blue-600 {\n background-color: #2563eb;\n}\n.bg-blue-700 {\n background-color: #1d4ed8;\n}\n.bg-blue-800 {\n background-color: #1e40af;\n}\n.bg-blue-900 {\n background-color: #1e3a8a;\n}\n.bg-blue-950 {\n background-color: #172554;\n}\n.bg-orange-50 {\n background-color: #fff7ed;\n}\n.bg-orange-100 {\n background-color: #ffedd5;\n}\n.bg-orange-200 {\n background-color: #fed7aa;\n}\n.bg-orange-300 {\n background-color: #fdba74;\n}\n.bg-orange-400 {\n background-color: #fb923c;\n}\n.bg-orange-500 {\n background-color: #f97316;\n}\n.bg-orange-600 {\n background-color: #ea580c;\n}\n.bg-orange-700 {\n background-color: #c2410c;\n}\n.bg-orange-800 {\n background-color: #9a3412;\n}\n.bg-orange-900 {\n background-color: #7c2d12;\n}\n.bg-orange-950 {\n background-color: #431407;\n}\n.bg-yellow-200 {\n background-color: #fde68a;\n}\n.bg-red-200 {\n background-color: #fecaca;\n}\n/* Text colors */\n.text-black {\n color: #000000;\n}\n.text-white {\n color: #ffffff;\n}\n.text-slate-50 {\n color: #f8fafc;\n}\n.text-slate-100 {\n color: #f1f5f9;\n}\n.text-slate-200 {\n color: #e2e8f0;\n}\n.text-slate-300 {\n color: #cbd5e1;\n}\n.text-slate-400 {\n color: #94a3b8;\n}\n.text-slate-500 {\n color: #64748b;\n}\n.text-slate-600 {\n color: #475569;\n}\n.text-slate-700 {\n color: #334155;\n}\n.text-slate-800 {\n color: #1e293b;\n}\n.text-slate-900 {\n color: #0f172a;\n}\n.text-slate-950 {\n color: #020617;\n}\n.text-gray-50 {\n color: #f9fafb;\n}\n.text-gray-100 {\n color: #f3f4f6;\n}\n.text-gray-200 {\n color: #e5e7eb;\n}\n.text-gray-300 {\n color: #d1d5db;\n}\n.text-gray-400 {\n color: #9ca3af;\n}\n.text-gray-500 {\n color: #6b7280;\n}\n.text-gray-600 {\n color: #4b5563;\n}\n.text-gray-700 {\n color: #374151;\n}\n.text-gray-800 {\n color: #1f2937;\n}\n.text-gray-900 {\n color: #111827;\n}\n.text-gray-950 {\n color: #030712;\n}\n.text-green-600 {\n color: #059669;\n}\n.text-green-700 {\n color: #047857;\n}\n.text-blue-50 {\n color: #eff6ff;\n}\n.text-blue-100 {\n color: #dbeafe;\n}\n.text-blue-200 {\n color: #bfdbfe;\n}\n.text-blue-300 {\n color: #93c5fd;\n}\n.text-blue-400 {\n color: #60a5fa;\n}\n.text-blue-500 {\n color: #3b82f6;\n}\n.text-blue-600 {\n color: #2563eb;\n}\n.text-blue-700 {\n color: #1d4ed8;\n}\n.text-blue-800 {\n color: #1e40af;\n}\n.text-blue-900 {\n color: #1e3a8a;\n}\n.text-blue-950 {\n color: #172554;\n}\n.text-orange-50 {\n color: #fff7ed;\n}\n.text-orange-100 {\n color: #ffedd5;\n}\n.text-orange-200 {\n color: #fed7aa;\n}\n.text-orange-300 {\n color: #fdba74;\n}\n.text-orange-400 {\n color: #fb923c;\n}\n.text-orange-500 {\n color: #f97316;\n}\n.text-orange-600 {\n color: #ea580c;\n}\n.text-orange-700 {\n color: #c2410c;\n}\n.text-orange-800 {\n color: #9a3412;\n}\n.text-orange-900 {\n color: #7c2d12;\n}\n.text-orange-950 {\n color: #431407;\n}\n.text-yellow-500 {\n color: #f59e0b;\n}\n.text-yellow-700 {\n color: #b45309;\n}\n.text-red-500 {\n color: #ef4444;\n}\n.text-red-700 {\n color: #b91c1c;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-l {\n border-left-width: 1px;\n}\n.border-dashed {\n border-style: dashed;\n}\n.border-solid {\n border-style: solid;\n}\n.border-slate-50 {\n border-color: #f8fafc;\n}\n.border-slate-100 {\n border-color: #f1f5f9;\n}\n.border-slate-200 {\n border-color: #e2e8f0;\n}\n.border-slate-300 {\n border-color: #cbd5e1;\n}\n.border-slate-400 {\n border-color: #94a3b8;\n}\n.border-slate-500 {\n border-color: #64748b;\n}\n.border-slate-600 {\n border-color: #475569;\n}\n.border-slate-700 {\n border-color: #334155;\n}\n.border-slate-800 {\n border-color: #1e293b;\n}\n.border-slate-900 {\n border-color: #0f172a;\n}\n.border-slate-950 {\n border-color: #020617;\n}\n.border-gray-400 {\n border-color: #9ca3af;\n}\n.border-gray-500 {\n border-color: #6b7280;\n}\n.origin-center {\n transform-origin: center;\n}\n.rotate-45 {\n transform: rotate(45deg);\n}\n.translate-x-2\\/4 {\n transform: translateX(50%);\n}\n.-translate-x-2\\/4 {\n transform: translateX(-50%);\n}\n.translate-y-2\\/4 {\n transform: translateY(50%);\n}\n.translate-y-full {\n transform: translateY(100%);\n}\n.-translate-y-full {\n transform: translateY(-100%);\n}\n.shadow-sm {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow {\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n}\n.shadow-md {\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n}\n.shadow-lg {\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n}\n.shadow-xl {\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n}\n.shadow-2xl {\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n}\n.shadow-inner {\n box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow-none {\n box-shadow: 0 0 #0000;\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\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";
1774
+ var css_248z = ".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-primary:disabled {\n background: #eef0f2 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n border: none;\n}\n.ant-btn {\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 box-shadow: none;\n text-shadow: none;\n outline: none !important;\n line-height: 1;\n font-size: 0.875rem;\n font-weight: normal;\n}\n.ant-btn > span {\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.ant-btn-lg {\n height: 44px !important;\n}\n.ant-btn-default:disabled {\n border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.ant-btn-link {\n border: none !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}\n.ant-btn-link > span {\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.ant-btn-link:disabled {\n background-color: transparent !important;\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-select-selector {\n box-shadow: none !important;\n background-color: transparent !important;\n border: none !important;\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-divider {\n margin: 0;\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.relative {\n position: relative;\n}\n.absolute {\n position: absolute;\n}\n.fixed {\n position: fixed;\n}\n.top-0 {\n top: 0;\n}\n.right-0 {\n right: 0;\n}\n.bottom-0 {\n bottom: 0;\n}\n.left-0 {\n left: 0;\n}\n.overflow-hidden {\n overflow: hidden !important;\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-visible {\n overflow: visible;\n}\n.z-50 {\n z-index: 50;\n}\n.-top-1\\/10 {\n top: -10%;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-tr {\n border-top-right-radius: 0.25rem;\n}\n.rounded-br {\n border-bottom-right-radius: 0.25rem;\n}\n.rounded-bl {\n border-bottom-left-radius: 0.25rem;\n}\n.rounded-tl {\n border-top-left-radius: 0.25rem;\n}\n.rounded-t {\n border-top-right-radius: 0.25rem;\n border-top-left-radius: 0.25rem;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.flex {\n display: flex;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.grow {\n flex-grow: 1;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.basis-0 {\n flex-basis: 0;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.items-center {\n align-items: center;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-start {\n align-items: flex-start;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.underline {\n text-decoration: underline;\n}\n.no-underline {\n text-decoration: none;\n}\n.text-nowrap {\n white-space: nowrap;\n}\n.text-white {\n color: white;\n}\n.text-xxs {\n font-size: 0.625rem;\n}\n.text-xs {\n font-size: 0.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n}\n.text-base {\n font-size: 1rem;\n}\n.text-lg {\n font-size: 1.125rem;\n}\n.text-xl {\n font-size: 1.25rem;\n}\n.text-2xl {\n font-size: 1.5rem;\n}\n.text-3xl {\n font-size: 2rem;\n}\n.text-4xl {\n font-size: 2.5rem;\n}\n.text-5xl {\n font-size: 3rem;\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.text-gray {\n color: #808080 !important;\n}\n.text-gray-400 {\n color: #9ca3af !important;\n}\n.text-gray-500 {\n color: #6b7280 !important;\n}\n.text-blue-gray {\n color: #717d94;\n}\n.text-primary {\n color: #ff6e1c;\n}\n.text-secondary {\n color: #4956dc;\n}\n.capitalize {\n text-transform: capitalize !important;\n}\n.font-normal {\n font-weight: 400;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-bold {\n font-weight: 700;\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n background-color: white;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.border-t-solid {\n border-top-style: solid;\n}\n.border-b-solid {\n border-bottom-style: solid;\n}\n.border-t-1 {\n border-top-width: 1px;\n}\n.border-b-1 {\n border-bottom-width: 1px;\n}\n.gap-0 {\n gap: 0 !important;\n}\n.gap-0\\.5 {\n gap: 0.125rem;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem !important;\n}\n.gap-5 {\n gap: 1.25rem;\n}\n.gap-6 {\n gap: 1.5rem !important;\n}\n.gap-8 {\n gap: 2rem !important;\n}\n.gap-12 {\n gap: 3rem !important;\n}\n/* Padding Utilities */\n.p-0 {\n padding: 0;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-3 {\n padding: 0.75rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-5 {\n padding: 1.25rem;\n}\n.p-6 {\n padding: 1.5rem;\n}\n.p-8 {\n padding: 2rem;\n}\n/* Padding X Utilities */\n.px-0 {\n padding-right: 0;\n padding-left: 0;\n}\n.px-1 {\n padding-right: 0.25rem;\n padding-left: 0.25rem;\n}\n.px-2 {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n.px-3 {\n padding-right: 0.75rem;\n padding-left: 0.75rem;\n}\n.px-4 {\n padding-right: 1rem;\n padding-left: 1rem;\n}\n.px-5 {\n padding-right: 1.25rem;\n padding-left: 1.25rem;\n}\n.px-6 {\n padding-right: 1.5rem;\n padding-left: 1.5rem;\n}\n.px-8 {\n padding-right: 2rem;\n padding-left: 2rem;\n}\n.px-12 {\n padding-right: 3rem;\n padding-left: 3rem;\n}\n/* Padding Y Utilities */\n.py-0 {\n padding-top: 0;\n padding-bottom: 0;\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-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\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/* Padding Top Utilities */\n.pt-0 {\n padding-top: 0;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-3 {\n padding-top: 0.75rem;\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/* Padding Right Utilities */\n.pr-0 {\n padding-right: 0;\n}\n.pr-4 {\n padding-right: 1rem;\n}\n.pr-8 {\n padding-right: 2rem;\n}\n/* Padding Bottom Utilities */\n.pb-0 {\n padding-bottom: 0;\n}\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n/* Padding Left Utilities */\n.pl-0 {\n padding-left: 0;\n}\n.pl-1 {\n padding-left: 0.25rem;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pl-8 {\n padding-left: 2rem;\n}\n/* Space Utilities */\n.space-y-2 {\n gap: 0.5rem;\n}\n.space-y-4 {\n gap: 1rem;\n}\n.space-y-8 {\n gap: 2rem;\n}\n/* Margin Utilities */\n.ml-2 {\n margin-left: 0.5rem;\n}\n.ml-6 {\n margin-left: 1.5rem;\n}\n.ml-8 {\n margin-left: 2rem;\n}\n.mb-0 {\n margin-bottom: 0;\n}\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n.mb-6 {\n margin-bottom: 1.5rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.mr-2 {\n margin-right: 0.5rem;\n}\n.mr-4 {\n margin-right: 1rem;\n}\n.mr-6 {\n margin-right: 1.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-0 {\n margin-top: 0;\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-5 {\n margin-top: 1.25rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\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.my-8 {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.mx-8 {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n.w-full {\n width: 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-14 {\n width: 3.5rem;\n /* 56px */\n}\n.w-20 {\n width: 5rem;\n /* 80px */\n}\n.h-full {\n height: 100%;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-6 {\n height: 1.5rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-14 {\n height: 3.5rem;\n /* 56px */\n}\n.h-80 {\n height: 20rem;\n}\n.h-96 {\n height: 24rem;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.cursor-not-allowed {\n cursor: not-allowed;\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.grid-cols-4 {\n grid-template-columns: repeat(4, minMax(0, 1fr));\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-4 {\n grid-column: span 4 / span 4;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n/* Background colors */\n.bg-black {\n background-color: #000000;\n}\n.bg-slate-50 {\n background-color: #f8fafc;\n}\n.bg-slate-100 {\n background-color: #f1f5f9;\n}\n.bg-slate-200 {\n background-color: #e2e8f0;\n}\n.bg-slate-300 {\n background-color: #cbd5e1;\n}\n.bg-slate-400 {\n background-color: #94a3b8;\n}\n.bg-slate-500 {\n background-color: #64748b;\n}\n.bg-slate-600 {\n background-color: #475569;\n}\n.bg-slate-700 {\n background-color: #334155;\n}\n.bg-slate-800 {\n background-color: #1e293b;\n}\n.bg-slate-900 {\n background-color: #0f172a;\n}\n.bg-slate-950 {\n background-color: #020617;\n}\n.bg-gray-50 {\n background-color: #f9fafb;\n}\n.bg-gray-100 {\n background-color: #f3f4f6;\n}\n.bg-gray-200 {\n background-color: #e5e7eb;\n}\n.bg-gray-300 {\n background-color: #d1d5db;\n}\n.bg-gray-400 {\n background-color: #9ca3af;\n}\n.bg-gray-500 {\n background-color: #6b7280;\n}\n.bg-gray-600 {\n background-color: #4b5563;\n}\n.bg-gray-700 {\n background-color: #374151;\n}\n.bg-gray-800 {\n background-color: #1f2937;\n}\n.bg-gray-900 {\n background-color: #111827;\n}\n.bg-gray-950 {\n background-color: #030712;\n}\n.bg-green-200 {\n background-color: #a7f3d0;\n}\n.bg-green-500 {\n background-color: #10b981;\n}\n.bg-blue-50 {\n background-color: #eff6ff;\n}\n.bg-blue-100 {\n background-color: #dbeafe;\n}\n.bg-blue-200 {\n background-color: #bfdbfe;\n}\n.bg-blue-300 {\n background-color: #93c5fd;\n}\n.bg-blue-400 {\n background-color: #60a5fa;\n}\n.bg-blue-500 {\n background-color: #3b82f6;\n}\n.bg-blue-600 {\n background-color: #2563eb;\n}\n.bg-blue-700 {\n background-color: #1d4ed8;\n}\n.bg-blue-800 {\n background-color: #1e40af;\n}\n.bg-blue-900 {\n background-color: #1e3a8a;\n}\n.bg-blue-950 {\n background-color: #172554;\n}\n.bg-orange-50 {\n background-color: #fff7ed;\n}\n.bg-orange-100 {\n background-color: #ffedd5;\n}\n.bg-orange-200 {\n background-color: #fed7aa;\n}\n.bg-orange-300 {\n background-color: #fdba74;\n}\n.bg-orange-400 {\n background-color: #fb923c;\n}\n.bg-orange-500 {\n background-color: #f97316;\n}\n.bg-orange-600 {\n background-color: #ea580c;\n}\n.bg-orange-700 {\n background-color: #c2410c;\n}\n.bg-orange-800 {\n background-color: #9a3412;\n}\n.bg-orange-900 {\n background-color: #7c2d12;\n}\n.bg-orange-950 {\n background-color: #431407;\n}\n.bg-yellow-200 {\n background-color: #fde68a;\n}\n.bg-red-200 {\n background-color: #fecaca;\n}\n/* Text colors */\n.text-black {\n color: #000000;\n}\n.text-white {\n color: #ffffff;\n}\n.text-slate-50 {\n color: #f8fafc;\n}\n.text-slate-100 {\n color: #f1f5f9;\n}\n.text-slate-200 {\n color: #e2e8f0;\n}\n.text-slate-300 {\n color: #cbd5e1;\n}\n.text-slate-400 {\n color: #94a3b8;\n}\n.text-slate-500 {\n color: #64748b;\n}\n.text-slate-600 {\n color: #475569;\n}\n.text-slate-700 {\n color: #334155;\n}\n.text-slate-800 {\n color: #1e293b;\n}\n.text-slate-900 {\n color: #0f172a;\n}\n.text-slate-950 {\n color: #020617;\n}\n.text-gray-50 {\n color: #f9fafb;\n}\n.text-gray-100 {\n color: #f3f4f6;\n}\n.text-gray-200 {\n color: #e5e7eb;\n}\n.text-gray-300 {\n color: #d1d5db;\n}\n.text-gray-400 {\n color: #9ca3af;\n}\n.text-gray-500 {\n color: #6b7280;\n}\n.text-gray-600 {\n color: #4b5563;\n}\n.text-gray-700 {\n color: #374151;\n}\n.text-gray-800 {\n color: #1f2937;\n}\n.text-gray-900 {\n color: #111827;\n}\n.text-gray-950 {\n color: #030712;\n}\n.text-green-600 {\n color: #059669;\n}\n.text-green-700 {\n color: #047857;\n}\n.text-blue-50 {\n color: #eff6ff;\n}\n.text-blue-100 {\n color: #dbeafe;\n}\n.text-blue-200 {\n color: #bfdbfe;\n}\n.text-blue-300 {\n color: #93c5fd;\n}\n.text-blue-400 {\n color: #60a5fa;\n}\n.text-blue-500 {\n color: #3b82f6;\n}\n.text-blue-600 {\n color: #2563eb;\n}\n.text-blue-700 {\n color: #1d4ed8;\n}\n.text-blue-800 {\n color: #1e40af;\n}\n.text-blue-900 {\n color: #1e3a8a;\n}\n.text-blue-950 {\n color: #172554;\n}\n.text-orange-50 {\n color: #fff7ed;\n}\n.text-orange-100 {\n color: #ffedd5;\n}\n.text-orange-200 {\n color: #fed7aa;\n}\n.text-orange-300 {\n color: #fdba74;\n}\n.text-orange-400 {\n color: #fb923c;\n}\n.text-orange-500 {\n color: #f97316;\n}\n.text-orange-600 {\n color: #ea580c;\n}\n.text-orange-700 {\n color: #c2410c;\n}\n.text-orange-800 {\n color: #9a3412;\n}\n.text-orange-900 {\n color: #7c2d12;\n}\n.text-orange-950 {\n color: #431407;\n}\n.text-yellow-500 {\n color: #f59e0b;\n}\n.text-yellow-700 {\n color: #b45309;\n}\n.text-red-500 {\n color: #ef4444;\n}\n.text-red-700 {\n color: #b91c1c;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-l {\n border-left-width: 1px;\n}\n.border-dashed {\n border-style: dashed;\n}\n.border-solid {\n border-style: solid;\n}\n.border-slate-50 {\n border-color: #f8fafc;\n}\n.border-slate-100 {\n border-color: #f1f5f9;\n}\n.border-slate-200 {\n border-color: #e2e8f0;\n}\n.border-slate-300 {\n border-color: #cbd5e1;\n}\n.border-slate-400 {\n border-color: #94a3b8;\n}\n.border-slate-500 {\n border-color: #64748b;\n}\n.border-slate-600 {\n border-color: #475569;\n}\n.border-slate-700 {\n border-color: #334155;\n}\n.border-slate-800 {\n border-color: #1e293b;\n}\n.border-slate-900 {\n border-color: #0f172a;\n}\n.border-slate-950 {\n border-color: #020617;\n}\n.border-gray-400 {\n border-color: #9ca3af;\n}\n.border-gray-500 {\n border-color: #6b7280;\n}\n.origin-center {\n transform-origin: center;\n}\n.rotate-45 {\n transform: rotate(45deg);\n}\n.translate-x-2\\/4 {\n transform: translateX(50%);\n}\n.-translate-x-2\\/4 {\n transform: translateX(-50%);\n}\n.translate-y-2\\/4 {\n transform: translateY(50%);\n}\n.translate-y-full {\n transform: translateY(100%);\n}\n.-translate-y-full {\n transform: translateY(-100%);\n}\n.shadow-sm {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow {\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n}\n.shadow-md {\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n}\n.shadow-lg {\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n}\n.shadow-xl {\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n}\n.shadow-2xl {\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n}\n.shadow-inner {\n box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow-none {\n box-shadow: 0 0 #0000;\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex !important;\n }\n .sm\\:hidden {\n display: none !important;\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";
1766
1775
  styleInject(css_248z);
1767
1776
 
1768
1777
  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}";
@@ -2789,7 +2798,7 @@ var PaymentForm = function (_a) {
2789
2798
  return (jsxRuntime.jsx(ActualPaymentForm, { invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, quote: quote, setIsSaving: setIsSaving }));
2790
2799
  };
2791
2800
 
2792
- var MUTATION$7 = "\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";
2801
+ 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";
2793
2802
  var checkout = function (_a) {
2794
2803
  var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, subdomain = _a.subdomain;
2795
2804
  return __awaiter(void 0, void 0, void 0, function () {
@@ -2806,7 +2815,7 @@ var checkout = function (_a) {
2806
2815
  mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
2807
2816
  }
2808
2817
  return [4 /*yield*/, common.gqlRequest({
2809
- query: MUTATION$7,
2818
+ query: MUTATION$8,
2810
2819
  token: token,
2811
2820
  vars: mutationVars,
2812
2821
  subdomain: subdomain,
@@ -2943,7 +2952,7 @@ function InvoicePDF(_a) {
2943
2952
  }, title: "Invoice PDF", width: "100%" }));
2944
2953
  }
2945
2954
 
2946
- var MUTATION$6 = "\nquery FormattedInvoice($id: ID) {\n formattedInvoice(id: $id) {\n amount\n amountDue\n amountPaid\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n createdAt\n credits\n currency\n currencyId\n currencySymbol\n customerBillingCity\n customerBillingContact\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n dueAt\n html\n id\n isLegacy\n netPaymentDays\n number\n payableId\n poNumber\n printedState\n smallUnitAmountDue\n state\n subscriptionEndDate\n subscriptionStartDate\n subtotal\n taxAmount\n taxNumber\n uuid\n vendorName\n formattedLines {\n amount\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n lineText\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListName\n prorationRate\n quantity\n unitOfMeasure\n priceTiers {\n price\n starts\n }\n }\n }\n}";
2955
+ var MUTATION$7 = "\nquery FormattedInvoice($id: ID) {\n formattedInvoice(id: $id) {\n amount\n amountDue\n amountPaid\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n createdAt\n credits\n currency\n currencyId\n currencySymbol\n customerBillingCity\n customerBillingContact\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n dueAt\n html\n id\n isLegacy\n netPaymentDays\n number\n payableId\n poNumber\n printedState\n smallUnitAmountDue\n state\n subscriptionEndDate\n subscriptionStartDate\n subtotal\n taxAmount\n taxNumber\n uuid\n vendorName\n formattedLines {\n amount\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n lineText\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListName\n prorationRate\n quantity\n unitOfMeasure\n priceTiers {\n price\n starts\n }\n }\n }\n}";
2947
2956
  var getFormattedInvoice = function (_a) {
2948
2957
  var id = _a.id, token = _a.token, subdomain = _a.subdomain;
2949
2958
  return __awaiter(void 0, void 0, void 0, function () {
@@ -2953,7 +2962,7 @@ var getFormattedInvoice = function (_a) {
2953
2962
  case 0:
2954
2963
  vars = { id: id };
2955
2964
  return [4 /*yield*/, common.gqlRequest({
2956
- query: MUTATION$6,
2965
+ query: MUTATION$7,
2957
2966
  token: token,
2958
2967
  vars: vars,
2959
2968
  subdomain: subdomain,
@@ -3247,21 +3256,18 @@ var PandadocPollingModal = function (_a) {
3247
3256
  return (jsxRuntime.jsxs(antd.Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxRuntime.jsxs("div", __assign({ className: "py-4 text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsxRuntime.jsx("div", __assign({ className: "text-center" }, { children: infoMessage }))] })));
3248
3257
  };
3249
3258
 
3250
- var MUTATION$5 = "\n query formattedQuote ($id: ID) {\n formattedQuote (id: $id) {\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n object { documents { id filename size date url } }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }";
3259
+ var MUTATION$6 = function (id) { return "\n query formattedQuote {\n formattedQuote (id: \"".concat(id, "\") {\n payableId\n acceptedAt\n acceptedByName\n amount\n amountDue\n amountsByPeriod {\n id\n name\n amount\n }\n object { documents { id filename size date url } }\n billingCity\n billingCountry\n billingState\n billingStreet\n billingZip\n contactName\n currency\n customerBillingCity\n customerBillingCountry\n customerBillingState\n customerBillingStreet\n customerBillingZip\n customerName\n discount\n discountValue\n duration\n endDate\n expiresAt\n html\n formattedLines {\n amount\n amountsByPeriod {\n quantity\n id\n name\n startDate\n endDate\n amount\n amountsByTier {\n id\n tier {\n starts\n ends\n price\n }\n quantity\n amount\n }\n prorationRate\n }\n billingPeriodEnd\n billingPeriodStart\n chargeType\n discount\n frequency\n isRamp\n periods\n planName\n position\n price\n priceDecimals\n priceListChargeId\n priceListChargeName\n priceListId\n priceListName\n priceTiers {\n price\n starts\n }\n pricingModel\n productName\n prorationRate\n quantity\n showProductNameOnLineItem\n taxCode\n trialEndDate\n trialStartDate\n unitOfMeasure\n vatCode\n }\n netPaymentDays\n notes\n number\n poNumberRequired\n salesContactEmail\n sharedAt\n startDate\n state\n subtotal\n taxAmount\n taxNumberLabel\n taxNumberRequired\n vendorName\n }\n }"); };
3251
3260
  var getFormattedQuote = function (_a) {
3252
3261
  var id = _a.id, token = _a.token, subdomain = _a.subdomain;
3253
3262
  return __awaiter(void 0, void 0, void 0, function () {
3254
- var vars, response;
3263
+ var response;
3255
3264
  return __generator(this, function (_b) {
3256
3265
  switch (_b.label) {
3257
- case 0:
3258
- vars = { id: id };
3259
- return [4 /*yield*/, common.gqlRequest({
3260
- query: MUTATION$5,
3261
- token: token,
3262
- vars: vars,
3263
- subdomain: subdomain,
3264
- })];
3266
+ case 0: return [4 /*yield*/, common.gqlRequest({
3267
+ query: MUTATION$6(id),
3268
+ token: token,
3269
+ subdomain: subdomain,
3270
+ })];
3265
3271
  case 1:
3266
3272
  response = _b.sent();
3267
3273
  return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedQuote];
@@ -3279,10 +3285,10 @@ function ActualQuote(_a) {
3279
3285
  var isMobile = common.useIsMobile();
3280
3286
  // Queries
3281
3287
  var _e = reactQuery.useQuery({
3282
- queryKey: common.QueryKeyFactory.default.createQuoteKey(token),
3288
+ queryKey: common.QueryKeyFactory.default.createQuoteKey(token, id),
3283
3289
  queryFn: function () { return getFormattedQuote({ token: token, subdomain: subdomain, id: id }); },
3284
3290
  placeholderData: reactQuery.keepPreviousData,
3285
- }), data = _e.data; _e.isLoading; _e.isError; _e.error;
3291
+ }), data = _e.data, isLoading = _e.isLoading;
3286
3292
  reactQuery.useQuery({
3287
3293
  queryKey: common.QueryKeyFactory.default.currentUserKey,
3288
3294
  queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
@@ -3293,7 +3299,7 @@ function ActualQuote(_a) {
3293
3299
  var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
3294
3300
  var _f = useSendAcceptQuote(token, subdomain, id), acceptBoxVisible = _f.acceptBoxVisible, isAccepting = _f.isAccepting, sendAccept = _f.sendAccept, setAcceptBoxVisible = _f.setAcceptBoxVisible, setIsAccepting = _f.setIsAccepting, startAcceptance = _f.startAcceptance, pandadocPollingModalVisible = _f.pandadocPollingModalVisible, setPandadocPollingModalVisible = _f.setPandadocPollingModalVisible;
3295
3301
  useSigningComplete({ data: formattedQuote, token: token });
3296
- if (!formattedQuote) {
3302
+ if (!formattedQuote || isLoading) {
3297
3303
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
3298
3304
  }
3299
3305
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(reactHelmetAsync.Helmet, { children: [jsxRuntime.jsxs("title", { children: [formattedQuote.vendorName, " ", documentName] }), jsxRuntime.jsx("meta", { name: "description", content: common.QuoteInvoiceUtils.quoteMetaDescription(formattedQuote.vendorName) }), jsxRuntime.jsx("meta", { property: "og:type", content: "website" }), jsxRuntime.jsx("meta", { property: "og:title", content: common.QuoteInvoiceUtils.quoteMetaTitle({
@@ -3316,6 +3322,7 @@ function ActualQuote(_a) {
3316
3322
  styled__default["default"].div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
3317
3323
  function Quote(_a) {
3318
3324
  var id = _a.id;
3325
+ console.log("id", id);
3319
3326
  return (jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(ActualQuote, { id: id }) }));
3320
3327
  }
3321
3328
  var templateObject_1$5;
@@ -3450,7 +3457,7 @@ function PaymentMethod(_a) {
3450
3457
  return (jsxRuntime.jsx(PaymentMethodContext.Provider, __assign({ value: { footer: footer, processPublicUrl: processPublicUrl } }, { children: jsxRuntime.jsx(ActualPaymentMethod, {}) })));
3451
3458
  }
3452
3459
 
3453
- var MUTATION$4 = "\nmutation accountUpdate(\n $id: ID!,\n $attributes: AccountAttributes!) {\n accountUpdate(\n id: $id,\n attributes: $attributes\n ) {\n account { id }\n errors\n }\n }\n";
3460
+ var MUTATION$5 = "\nmutation accountUpdate(\n $id: ID!,\n $attributes: AccountAttributes!) {\n accountUpdate(\n id: $id,\n attributes: $attributes\n ) {\n account { id }\n errors\n }\n }\n";
3454
3461
  var accountUpdate = function (_a) {
3455
3462
  var accountId = _a.accountId, attributes = _a.attributes, token = _a.token;
3456
3463
  return __awaiter(void 0, void 0, void 0, function () {
@@ -3460,7 +3467,7 @@ var accountUpdate = function (_a) {
3460
3467
  switch (_c.label) {
3461
3468
  case 0:
3462
3469
  vars = { id: accountId, attributes: attributes };
3463
- return [4 /*yield*/, common.gqlRequest({ query: MUTATION$4, token: token, vars: vars })];
3470
+ return [4 /*yield*/, common.gqlRequest({ query: MUTATION$5, token: token, vars: vars })];
3464
3471
  case 1:
3465
3472
  response = _c.sent();
3466
3473
  errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
@@ -3728,7 +3735,7 @@ var Checkout = function (_a) {
3728
3735
  }, setIsSaving: setIsSaving }))] }))] })) })));
3729
3736
  };
3730
3737
 
3731
- var MUTATION$3 = 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}"; };
3738
+ 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}"; };
3732
3739
  var accountSignup = function (_a) {
3733
3740
  var token = _a.token, subdomain = _a.subdomain, entityId = _a.entityId, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
3734
3741
  return __awaiter(void 0, void 0, void 0, function () {
@@ -3747,7 +3754,7 @@ var accountSignup = function (_a) {
3747
3754
  priceListCode: priceListCode,
3748
3755
  };
3749
3756
  return [4 /*yield*/, common.gqlRequest({
3750
- query: MUTATION$3(),
3757
+ query: MUTATION$4(),
3751
3758
  token: token,
3752
3759
  vars: vars,
3753
3760
  subdomain: subdomain,
@@ -3763,7 +3770,7 @@ var accountSignup = function (_a) {
3763
3770
  });
3764
3771
  };
3765
3772
 
3766
- var MUTATION$2 = function () { return "\nmutation QuoteAccountSignup (\n $accountName: String!,\n $billingContact: ContactAttributes!,\n $entityId: ID!,\n $priceListCode: String!\n) {\n quoteAccountSignup(\n entityId: $entityId,\n priceListCode: $priceListCode,\n accountName: $accountName,\n billingContact: $billingContact\n ) {\n account {\n id\n }\n amount\n currencyId\n quoteId\n errors\n }\n}"; };
3773
+ var MUTATION$3 = function () { return "\nmutation QuoteAccountSignup (\n $accountName: String!,\n $billingContact: ContactAttributes!,\n $entityId: ID!,\n $priceListCode: String!\n) {\n quoteAccountSignup(\n entityId: $entityId,\n priceListCode: $priceListCode,\n accountName: $accountName,\n billingContact: $billingContact\n ) {\n account {\n id\n }\n amount\n currencyId\n quote {\n id\n }\n tenant {\n code\n }\n errors\n }\n}"; };
3767
3774
  var quoteAccountSignup = function (_a) {
3768
3775
  var token = _a.token, subdomain = _a.subdomain, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
3769
3776
  return __awaiter(void 0, void 0, void 0, function () {
@@ -3779,7 +3786,7 @@ var quoteAccountSignup = function (_a) {
3779
3786
  billingContact: billingContact,
3780
3787
  };
3781
3788
  return [4 /*yield*/, common.gqlRequest({
3782
- query: MUTATION$2(),
3789
+ query: MUTATION$3(),
3783
3790
  token: token,
3784
3791
  vars: vars,
3785
3792
  subdomain: subdomain,
@@ -3795,7 +3802,7 @@ var quoteAccountSignup = function (_a) {
3795
3802
  });
3796
3803
  };
3797
3804
 
3798
- var MUTATION$1 = function () { return "\nquery PriceList($code: String!) {\n priceList (code: $code) {\n basePrice\n code\n createdAt\n currencyId\n id\n isVisible\n name\n periodMonths\n planId\n priceDescription\n productId\n sku\n trialAllowed\n trialLengthDays\n updatedAt\n }\n}"; };
3805
+ var MUTATION$2 = function () { return "\nquery PriceList($code: String!) {\n priceList (code: $code) {\n basePrice\n code\n createdAt\n currencyId\n id\n isVisible\n name\n periodMonths\n planId\n priceDescription\n productId\n sku\n trialAllowed\n trialLengthDays\n updatedAt\n }\n}"; };
3799
3806
  var getPriceList = function (_a) {
3800
3807
  var token = _a.token, code = _a.code, subdomain = _a.subdomain;
3801
3808
  return __awaiter(void 0, void 0, void 0, function () {
@@ -3803,7 +3810,7 @@ var getPriceList = function (_a) {
3803
3810
  return __generator(this, function (_b) {
3804
3811
  switch (_b.label) {
3805
3812
  case 0: return [4 /*yield*/, common.gqlRequest({
3806
- query: MUTATION$1(),
3813
+ query: MUTATION$2(),
3807
3814
  token: token,
3808
3815
  vars: { code: code },
3809
3816
  subdomain: subdomain,
@@ -3895,6 +3902,31 @@ var StyedLink = styled__default["default"].a(templateObject_1$4 || (templateObje
3895
3902
  var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:hover {\n color: ", " !important;\n }\n"], ["\n &:hover {\n color: ", " !important;\n }\n"])), common.PRIMARY_COLOR);
3896
3903
  var templateObject_1$4, templateObject_2;
3897
3904
 
3905
+ var MUTATION$1 = "\n mutation portalSessionCreate ($tenantCode: String!, $expiry: Int!, $returnUrl: String!) {\n portalSessionCreate (tenantCode: $tenantCode, expiry: $expiry, returnUrl: $returnUrl) {\n errors\n token\n }\n }\n";
3906
+ var portalSessionCreate = function (_a) {
3907
+ var tenantCode = _a.tenantCode, expiry = _a.expiry, returnUrl = _a.returnUrl, token = _a.token, subdomain = _a.subdomain;
3908
+ return __awaiter(void 0, void 0, void 0, function () {
3909
+ var response, errors;
3910
+ var _b;
3911
+ return __generator(this, function (_c) {
3912
+ switch (_c.label) {
3913
+ case 0: return [4 /*yield*/, common.gqlRequest({
3914
+ query: MUTATION$1,
3915
+ token: token,
3916
+ vars: { tenantCode: tenantCode, expiry: expiry, returnUrl: returnUrl },
3917
+ subdomain: subdomain,
3918
+ })];
3919
+ case 1:
3920
+ response = _c.sent();
3921
+ errors = (response === null || response === void 0 ? void 0 : response.portalSessionCreate).errors;
3922
+ if (errors)
3923
+ throw errors;
3924
+ return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.portalSessionCreate) === null || _b === void 0 ? void 0 : _b.token];
3925
+ }
3926
+ });
3927
+ });
3928
+ };
3929
+
3898
3930
  var showErrorNotification = common.NotificationUtils.useErrorNotification();
3899
3931
  function Signup(_a) {
3900
3932
  var priceListCode = _a.priceListCode, returnUrl = _a.returnUrl;
@@ -3910,10 +3942,11 @@ function Signup(_a) {
3910
3942
  var _c = React.useState(undefined), quote = _c[0], setQuote = _c[1];
3911
3943
  var _d = React.useState(undefined), accountId = _d[0], setAccountId = _d[1];
3912
3944
  var _e = React.useState(undefined), quoteId = _e[0], setQuoteId = _e[1];
3913
- var _f = React.useState(undefined), formData = _f[0], setFormData = _f[1];
3914
- var _g = React.useState(false), proceedingToPayment = _g[0], setProceedingToPayment = _g[1];
3915
- var _h = React.useState(false), paying = _h[0], setIsPaying = _h[1];
3916
- var _j = React.useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
3945
+ var _f = React.useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
3946
+ var _g = React.useState(undefined), formData = _g[0], setFormData = _g[1];
3947
+ var _h = React.useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
3948
+ var _j = React.useState(false), paying = _j[0], setIsPaying = _j[1];
3949
+ var _k = React.useState(false), purchaseSucceeded = _k[0], setPurchaseSucceeded = _k[1];
3917
3950
  // Queries
3918
3951
  var priceListData = reactQuery.useQuery({
3919
3952
  queryKey: ["priceList", priceListCode],
@@ -3921,7 +3954,7 @@ function Signup(_a) {
3921
3954
  }).data;
3922
3955
  function handleSubmit(formData) {
3923
3956
  return __awaiter(this, void 0, void 0, function () {
3924
- var data;
3957
+ var data, portalSessionToken;
3925
3958
  return __generator(this, function (_a) {
3926
3959
  switch (_a.label) {
3927
3960
  case 0:
@@ -3942,11 +3975,21 @@ function Signup(_a) {
3942
3975
  case 1:
3943
3976
  data = _a.sent();
3944
3977
  setAccountId(data.account.id);
3945
- setQuoteId(data.quoteId);
3978
+ return [4 /*yield*/, portalSessionCreate({
3979
+ token: token,
3980
+ subdomain: subdomain,
3981
+ tenantCode: data.tenant.code,
3982
+ expiry: 24,
3983
+ returnUrl: returnUrl || "",
3984
+ })];
3985
+ case 2:
3986
+ portalSessionToken = _a.sent();
3987
+ setPortalSessionToken(portalSessionToken);
3988
+ setQuoteId(data.quote.id);
3946
3989
  setProceedingToPayment(false);
3947
3990
  setQuote({
3948
- amountDue: data.amount,
3949
- currencyId: data.currencyId,
3991
+ amountDue: data.quote.amountDue,
3992
+ currencyId: data.quote.currencyId,
3950
3993
  });
3951
3994
  return [2 /*return*/];
3952
3995
  }
@@ -3971,8 +4014,11 @@ function Signup(_a) {
3971
4014
  if (!accountId) {
3972
4015
  throw new Error("Account ID is required");
3973
4016
  }
4017
+ if (!portalSessionToken) {
4018
+ throw new Error("Portal session token is required");
4019
+ }
3974
4020
  return [4 /*yield*/, accountSignup({
3975
- token: token,
4021
+ token: portalSessionToken,
3976
4022
  subdomain: subdomain,
3977
4023
  entityId: entityId,
3978
4024
  quoteId: quoteId,
@@ -4002,6 +4048,65 @@ function Signup(_a) {
4002
4048
  }
4003
4049
  }
4004
4050
 
4051
+ var transactionMutation = function (filter) { return "\nquery transactions {\n transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n nodes {\n amount\n createdAt\n currencyId\n description\n id\n kind\n state\n transactionableId\n transactionable {\n ...on Payment { amount }\n ...on Invoice { amount number }\n }\n }\n }\n}"); };
4052
+ var getTransactions = function (filter, token, subdomain, kindsToShow) { return __awaiter(void 0, void 0, void 0, function () {
4053
+ var response, _a, data, errors, transactions;
4054
+ var _b, _c;
4055
+ return __generator(this, function (_d) {
4056
+ switch (_d.label) {
4057
+ case 0: return [4 /*yield*/, fetch(subdomain + "/graphql", {
4058
+ method: "POST",
4059
+ headers: {
4060
+ "Content-type": "application/json; charset=utf-8",
4061
+ Authorization: "Bearer ".concat(token),
4062
+ },
4063
+ body: JSON.stringify({
4064
+ query: transactionMutation(filter),
4065
+ }),
4066
+ })];
4067
+ case 1:
4068
+ response = _d.sent();
4069
+ console.log("response", response);
4070
+ return [4 /*yield*/, response.json()];
4071
+ case 2:
4072
+ _a = _d.sent(), data = _a.data, errors = _a.errors;
4073
+ if (errors) {
4074
+ throw new Error(errors[0].message);
4075
+ }
4076
+ transactions = (_c = (_b = data === null || data === void 0 ? void 0 : data.transactions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.filter(function (transaction) { return kindsToShow.includes(transaction.kind); });
4077
+ return [2 /*return*/, transactions === null || transactions === void 0 ? void 0 : transactions.reverse()];
4078
+ }
4079
+ });
4080
+ }); };
4081
+
4082
+ var pageContentRefState = recoil.atom({
4083
+ key: "pageContentRefState",
4084
+ default: undefined,
4085
+ });
4086
+
4087
+ var PageContent = function (_a) {
4088
+ var children = _a.children, className = _a.className, style = _a.style;
4089
+ var pageContentRef = React.useRef(null);
4090
+ var setPageContentRef = recoil.useSetRecoilState(pageContentRefState);
4091
+ React.useEffect(function () {
4092
+ setPageContentRef(pageContentRef === null || pageContentRef === void 0 ? void 0 : pageContentRef.current);
4093
+ }, [pageContentRef, setPageContentRef]);
4094
+ return (jsxRuntime.jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
4095
+ };
4096
+
4097
+ var Text$8 = antd.Typography.Text;
4098
+ var PageHeaderWithActions = function (_a) {
4099
+ var children = _a.children, title = _a.title;
4100
+ var isMobile = common.useIsMobile();
4101
+ return (jsxRuntime.jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsxRuntime.jsx(PageSubTitle, { title: title }), children] })));
4102
+ };
4103
+ var PageSubTitle = function (_a) {
4104
+ var title = _a.title;
4105
+ var secondaryColor = React.useContext(BrandContext).secondaryColor;
4106
+ var darkMode = React.useContext(BunnyContext).darkMode;
4107
+ return (jsxRuntime.jsx(Text$8, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
4108
+ };
4109
+
4005
4110
  var StateTag = function (_a) {
4006
4111
  var state = _a.state;
4007
4112
  return jsxRuntime.jsx(antd.Tag, __assign({ color: getColor(state) }, { children: lodash.capitalize(lodash.startCase(state)) }));
@@ -4039,22 +4144,25 @@ var TransactionGridCell = styled__default["default"].div.withConfig({
4039
4144
  })(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);
4040
4145
  var templateObject_1$3;
4041
4146
 
4042
- var Text$8 = antd.Typography.Text;
4147
+ var Text$7 = antd.Typography.Text;
4043
4148
  var TransactionDate = function (_a) {
4044
4149
  var date = _a.date;
4045
- return jsxRuntime.jsx(Text$8, __assign({ className: "text-sm" }, { children: common.Misc.formatDate(date) }));
4150
+ return jsxRuntime.jsx(Text$7, __assign({ className: "text-sm" }, { children: common.Misc.formatDate(date) }));
4046
4151
  };
4047
4152
 
4048
4153
  var isInvoice = function (transaction) {
4049
4154
  return transaction.kind === "INVOICE";
4050
4155
  };
4156
+ var isQuote = function (transaction) {
4157
+ return transaction.kind === "QUOTE";
4158
+ };
4051
4159
  var TransactionRowTitle = function (_a) {
4052
4160
  var transaction = _a.transaction;
4053
- if (!isInvoice(transaction)) {
4161
+ console.log("transaction", transaction);
4162
+ if (!isInvoice(transaction) && !isQuote(transaction)) {
4054
4163
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
4055
4164
  }
4056
- var invoice = transaction.transactionable;
4057
- return (jsxRuntime.jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: invoice.number })));
4165
+ return (jsxRuntime.jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
4058
4166
  };
4059
4167
 
4060
4168
  // TODO: delete
@@ -4063,27 +4171,32 @@ var ArrowDownToLine = function (_a) {
4063
4171
  return (jsxRuntime.jsxs("svg", __assign({ className: className, fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M8 11.3333V2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M4 7.33301L8 11.333L12 7.33301", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M12.6654 14H3.33203", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
4064
4172
  };
4065
4173
 
4174
+ var TransactionsListContext = React.createContext({});
4175
+
4066
4176
  var TransactionDownload = function (_a) {
4067
4177
  var transaction = _a.transaction, token = _a.token, subdomain = _a.subdomain;
4068
4178
  var darkMode = React.useContext(BunnyContext).darkMode;
4179
+ var downloadTransactionLink = React.useContext(TransactionsListContext).downloadTransactionLink;
4069
4180
  var downloadFile = common.useDownloadFile();
4070
4181
  var isMobile = common.useIsMobile();
4071
- var isClickable = transaction.kind === "INVOICE";
4182
+ var isClickable = transaction.kind === "INVOICE" || downloadTransactionLink !== undefined;
4183
+ var downloadLink = downloadTransactionLink
4184
+ ? downloadTransactionLink(transaction.transactionableId)
4185
+ : "".concat(subdomain, "/api/pdf/invoice/").concat(transaction.transactionableId);
4072
4186
  if (!isClickable)
4073
4187
  return null;
4074
4188
  return (jsxRuntime.jsx("div", __assign({ onClick: function (e) {
4075
4189
  e.stopPropagation();
4076
- downloadFile("".concat(subdomain, "/api/pdf/invoice/").concat(transaction.transactionableId), token);
4190
+ downloadFile(downloadLink, token);
4077
4191
  } }, { children: jsxRuntime.jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "show-on-hover"), color: darkMode ? common.WHITE : common.SLATE_600 }) })));
4078
4192
  };
4079
4193
 
4080
- var Text$7 = antd.Typography.Text;
4194
+ var Text$6 = antd.Typography.Text;
4081
4195
  var TransactionsEmptyState = function () {
4082
- return (jsxRuntime.jsx(Text$7, __assign({ className: "flex justify-center p-4 text-base" }, { children: "There are no invoices" })));
4196
+ var noTransactionsMessage = React.useContext(TransactionsListContext).noTransactionsMessage;
4197
+ return (jsxRuntime.jsx(Text$6, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no invoices" })));
4083
4198
  };
4084
4199
 
4085
- var TransactionsListContext = React.createContext({});
4086
-
4087
4200
  function capitalizeFirstLetter(string) {
4088
4201
  return string.charAt(0).toUpperCase() + string.slice(1);
4089
4202
  }
@@ -4143,7 +4256,7 @@ var useGraphQLRequest = function () { return function (query, token, variables)
4143
4256
  });
4144
4257
  }); }; };
4145
4258
 
4146
- var Text$6 = antd.Typography.Text;
4259
+ var Text$5 = antd.Typography.Text;
4147
4260
  var TransactionsListDesktop = function (_a) {
4148
4261
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
4149
4262
  var columns = React.useContext(TransactionsListContext).columns;
@@ -4155,18 +4268,19 @@ var TransactionsListDesktop = function (_a) {
4155
4268
  if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
4156
4269
  return jsxRuntime.jsx(TransactionsEmptyState, {});
4157
4270
  return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
4158
- var isClickable = transaction.kind === common.TransactionKind.INVOICE;
4271
+ var _a;
4272
+ var isClickable = onTransactionClick !== undefined;
4159
4273
  return (jsxRuntime.jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
4160
- onTransactionClick(transaction);
4274
+ onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
4161
4275
  }, style: {
4162
4276
  backgroundColor: index % 2 === 0
4163
4277
  ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
4164
4278
  : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
4165
- } }, { children: [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$6, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })), showState && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$6, { children: common.Misc.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }) })))] }), index));
4279
+ } }, { children: [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$5, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })), showState && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$5, { children: common.Misc.formatCurrency(((_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _a === void 0 ? void 0 : _a.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
4166
4280
  });
4167
4281
  };
4168
4282
 
4169
- var Text$5 = antd.Typography.Text;
4283
+ var Text$4 = antd.Typography.Text;
4170
4284
  var TransactionsListMobile = function (_a) {
4171
4285
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
4172
4286
  var columns = React.useContext(TransactionsListContext).columns;
@@ -4185,94 +4299,63 @@ var TransactionsListMobile = function (_a) {
4185
4299
  backgroundColor: index % 2 === 0
4186
4300
  ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
4187
4301
  : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
4188
- } }, { 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$5, { children: capitalizeFirstLetter(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$5, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$5, { children: common.Misc.formatCurrency(transaction.transactionable.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })))] }), index));
4189
- });
4190
- };
4191
-
4192
- var transactionMutation = function (filter) { return "\nquery transactions {\n transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n nodes {\n amount\n createdAt\n currencyId\n description\n id\n kind\n state\n transactionableId\n transactionable {\n ...on Payment { amount }\n ...on Invoice { amount number }\n }\n }\n }\n}"); };
4193
- var getTransactions = function (filter, token, subdomain, kindsToShow) { return __awaiter(void 0, void 0, void 0, function () {
4194
- var response, _a, data, errors, transactions;
4195
- var _b, _c;
4196
- return __generator(this, function (_d) {
4197
- switch (_d.label) {
4198
- case 0: return [4 /*yield*/, fetch(subdomain + "/graphql", {
4199
- method: "POST",
4200
- headers: {
4201
- "Content-type": "application/json; charset=utf-8",
4202
- Authorization: "Bearer ".concat(token),
4203
- },
4204
- body: JSON.stringify({
4205
- query: transactionMutation(filter),
4206
- }),
4207
- })];
4208
- case 1:
4209
- response = _d.sent();
4210
- console.log("response", response);
4211
- return [4 /*yield*/, response.json()];
4212
- case 2:
4213
- _a = _d.sent(), data = _a.data, errors = _a.errors;
4214
- if (errors) {
4215
- throw new Error(errors[0].message);
4216
- }
4217
- transactions = (_c = (_b = data === null || data === void 0 ? void 0 : data.transactions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.filter(function (transaction) { return kindsToShow.includes(transaction.kind); });
4218
- return [2 /*return*/, transactions === null || transactions === void 0 ? void 0 : transactions.reverse()];
4219
- }
4302
+ } }, { 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$4, { children: capitalizeFirstLetter(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$4, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$4, { children: common.Misc.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })))] }), index));
4220
4303
  });
4221
- }); };
4222
-
4223
- var pageContentRefState = recoil.atom({
4224
- key: "pageContentRefState",
4225
- default: undefined,
4226
- });
4227
-
4228
- var PageContent = function (_a) {
4229
- var children = _a.children, className = _a.className, style = _a.style;
4230
- var pageContentRef = React.useRef(null);
4231
- var setPageContentRef = recoil.useSetRecoilState(pageContentRefState);
4232
- React.useEffect(function () {
4233
- setPageContentRef(pageContentRef === null || pageContentRef === void 0 ? void 0 : pageContentRef.current);
4234
- }, [pageContentRef, setPageContentRef]);
4235
- return (jsxRuntime.jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
4236
- };
4237
-
4238
- var Text$4 = antd.Typography.Text;
4239
- var PageHeaderWithActions = function (_a) {
4240
- var children = _a.children, title = _a.title;
4241
- var isMobile = common.useIsMobile();
4242
- return (jsxRuntime.jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsxRuntime.jsx(PageSubTitle, { title: title }), children] })));
4243
- };
4244
- var PageSubTitle = function (_a) {
4245
- var title = _a.title;
4246
- var secondaryColor = React.useContext(BrandContext).secondaryColor;
4247
- var darkMode = React.useContext(BunnyContext).darkMode;
4248
- return (jsxRuntime.jsx(Text$4, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
4249
4304
  };
4250
4305
 
4251
- function ActualTransactions() {
4252
- var _a = React.useContext(TransactionsListContext), showSearchBar = _a.showSearchBar, showTitle = _a.showTitle, transactionComponent = _a.transactionComponent, useModal = _a.useModal, onTransactionClick = _a.onTransactionClick, suppressTransactionDisplay = _a.suppressTransactionDisplay, kindsToShow = _a.kindsToShow, className = _a.className, shadow = _a.shadow; _a.searchBarClassName; var style = _a.style;
4253
- // Context
4254
- var columns = React.useContext(TransactionsListContext).columns;
4306
+ // Create a client
4307
+ var queryClient = new reactQuery.QueryClient();
4308
+ function Transactions(_a) {
4309
+ var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.columns, columns = _d === void 0 ? ["date-and-title", "state", "amount"] : _d, className = _a.className, _e = _a.shadow, shadow = _e === void 0 ? "md" : _e, searchBarClassName = _a.searchBarClassName, _f = _a.useModal, useModal = _f === void 0 ? false : _f, onTransactionClick = _a.onTransactionClick, _g = _a.suppressTransactionDisplay, suppressTransactionDisplay = _g === void 0 ? false : _g, _h = _a.kindsToShow, kindsToShow = _h === void 0 ? [
4310
+ common.TransactionKind.INVOICE,
4311
+ common.TransactionKind.PAYMENT,
4312
+ common.TransactionKind.REFUND,
4313
+ common.TransactionKind.WRITE_OFF,
4314
+ ] : _h, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage;
4315
+ var contextValues = {
4316
+ showSearchBar: showSearchBar,
4317
+ showTitle: showTitle,
4318
+ transactionComponent: transactionComponent,
4319
+ columns: columns,
4320
+ className: className,
4321
+ searchBarClassName: searchBarClassName,
4322
+ shadow: shadow,
4323
+ useModal: useModal,
4324
+ onTransactionClick: onTransactionClick,
4325
+ suppressTransactionDisplay: suppressTransactionDisplay,
4326
+ kindsToShow: kindsToShow,
4327
+ style: style,
4328
+ filter: filter,
4329
+ noTransactionsMessage: noTransactionsMessage,
4330
+ };
4331
+ return (jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient }, { children: jsxRuntime.jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsxRuntime.jsx(TransactionsWrapper, {}) })) })));
4332
+ }
4333
+ function TransactionsWrapper() {
4334
+ var _a = React.useContext(TransactionsListContext), kindsToShow = _a.kindsToShow, filterFromContext = _a.filter;
4255
4335
  var _b = React.useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
4256
4336
  // Local state
4257
4337
  var _c = React.useState(""), search = _c[0], setSearch = _c[1];
4258
- var _d = React.useState(null), selectedTransaction = _d[0], setSelectedTransaction = _d[1];
4259
- var _e = React.useState(false), drawerOpen = _e[0], setDrawerOpen = _e[1];
4260
- // Hooks
4261
- var isMobile = common.useIsMobile();
4262
- var filter = search
4263
- ? "filter: \"transaction.transactionableId is ".concat(search, "\"")
4264
- : "";
4338
+ var filter = filterFromContext ||
4339
+ (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
4265
4340
  // Queries
4266
4341
  var data = reactQuery.useQuery({
4267
4342
  queryKey: ["transactions", token, filter],
4268
4343
  queryFn: function () { return getTransactions(filter, token, subdomain, kindsToShow); },
4269
4344
  placeholderData: reactQuery.keepPreviousData,
4270
4345
  }).data;
4271
- var transactions = data;
4346
+ return (jsxRuntime.jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }));
4347
+ }
4348
+ function TransactionsDisplay(_a) {
4349
+ var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search, title = _a.title;
4350
+ var _b = React.useContext(TransactionsListContext), showSearchBar = _b.showSearchBar, showTitle = _b.showTitle, transactionComponent = _b.transactionComponent, useModal = _b.useModal, suppressTransactionDisplay = _b.suppressTransactionDisplay, className = _b.className, shadow = _b.shadow, searchBarClassName = _b.searchBarClassName, style = _b.style, onTransactionClick = _b.onTransactionClick;
4351
+ var columns = React.useContext(TransactionsListContext).columns;
4352
+ var darkMode = React.useContext(BunnyContext).darkMode;
4353
+ // Local state
4354
+ var _c = React.useState(null), selectedTransaction = _c[0], setSelectedTransaction = _c[1];
4355
+ var _d = React.useState(false), drawerOpen = _d[0], setDrawerOpen = _d[1];
4356
+ // Hooks
4357
+ var isMobile = common.useIsMobile();
4272
4358
  function handleTransactionClick(transaction) {
4273
- if (transaction.kind !== common.TransactionKind.INVOICE) {
4274
- return;
4275
- }
4276
4359
  if (onTransactionClick) {
4277
4360
  onTransactionClick(transaction);
4278
4361
  }
@@ -4310,59 +4393,31 @@ function ActualTransactions() {
4310
4393
  }
4311
4394
  return templateColumns.join(" ");
4312
4395
  };
4313
- return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: showTitle ? "Past transactions" : undefined }, { children: showSearchBar && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Input
4314
- // className={
4315
- // searchBarClassName
4316
- // ? searchBarClassName
4317
- // : "border border-slate-200"
4318
- // }
4319
- , {
4320
- // className={
4321
- // searchBarClassName
4322
- // ? searchBarClassName
4323
- // : "border border-slate-200"
4324
- // }
4325
- onChange: function (e) {
4396
+ var drawerTitle = function () {
4397
+ if (!selectedTransaction)
4398
+ return "";
4399
+ var kind = selectedTransaction.kind.toLowerCase();
4400
+ return kind.charAt(0).toUpperCase() + kind.slice(1);
4401
+ };
4402
+ return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: title || (showTitle ? "Past transactions" : undefined) }, { children: showSearchBar && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
4403
+ ? searchBarClassName
4404
+ : "border border-slate-200", onChange: function (e) {
4326
4405
  if (isNaN(Number(e.target.value))) {
4327
4406
  return;
4328
4407
  }
4329
- setSearch(e.target.value);
4408
+ onSearchValueChanged(e.target.value);
4330
4409
  }, prefix: jsxRuntime.jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
4331
4410
  minWidth: "300px",
4332
4411
  }, value: search }) })) })), jsxRuntime.jsx(PageContent, __assign({ className: "flex w-full shadow-padding-xb ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: jsxRuntime.jsx("div", __assign({ className: "grid w-full rounded-md overflow-auto ".concat("shadow-".concat(shadow)), style: {
4333
4412
  gridTemplateColumns: gridTemplateColumns(),
4413
+ backgroundColor: "var(--row-background".concat(darkMode ? "-dark" : "", ")"),
4334
4414
  } }, { children: isMobile ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: TransactionsListMobile({
4335
4415
  transactions: transactions,
4336
4416
  onTransactionClick: handleTransactionClick,
4337
4417
  }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: TransactionsListDesktop({
4338
4418
  transactions: transactions,
4339
4419
  onTransactionClick: handleTransactionClick,
4340
- }) })) })) })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsxRuntime.jsx(antd.Drawer, __assign({ title: "Invoice", onClose: function () { return setDrawerOpen(false); }, open: drawerOpen, width: 900 }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxRuntime.jsx("div", { children: "Not an invoice, or no transaction selected" })) })))] })));
4341
- }
4342
- // Create a client
4343
- var queryClient = new reactQuery.QueryClient();
4344
- function Transactions(_a) {
4345
- var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.columns, columns = _d === void 0 ? ["date-and-title", "state", "amount"] : _d, className = _a.className, _e = _a.shadow, shadow = _e === void 0 ? "md" : _e, searchBarClassName = _a.searchBarClassName, _f = _a.useModal, useModal = _f === void 0 ? false : _f, onTransactionClick = _a.onTransactionClick, _g = _a.suppressTransactionDisplay, suppressTransactionDisplay = _g === void 0 ? false : _g, _h = _a.kindsToShow, kindsToShow = _h === void 0 ? [
4346
- common.TransactionKind.INVOICE,
4347
- common.TransactionKind.PAYMENT,
4348
- common.TransactionKind.REFUND,
4349
- common.TransactionKind.WRITE_OFF,
4350
- ] : _h, style = _a.style;
4351
- var contextValues = {
4352
- showSearchBar: showSearchBar,
4353
- showTitle: showTitle,
4354
- transactionComponent: transactionComponent,
4355
- columns: columns,
4356
- className: className,
4357
- searchBarClassName: searchBarClassName,
4358
- shadow: shadow,
4359
- useModal: useModal,
4360
- onTransactionClick: onTransactionClick,
4361
- suppressTransactionDisplay: suppressTransactionDisplay,
4362
- kindsToShow: kindsToShow,
4363
- style: style,
4364
- };
4365
- return (jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient }, { children: jsxRuntime.jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsxRuntime.jsx(ActualTransactions, {}) })) })));
4420
+ }) })) })) })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsxRuntime.jsx(antd.Drawer, __assign({ title: drawerTitle(), onClose: function () { return setDrawerOpen(false); }, open: drawerOpen, width: 900 }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxRuntime.jsxs(antd.Card, __assign({ className: "shadow-md" }, { children: [jsxRuntime.jsx(antd.Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Amount:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: common.Misc.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 })] })] }))) })))] })));
4366
4421
  }
4367
4422
 
4368
4423
  var updatingChargeQuantityIdState = recoil.atom({