@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/esm/index.js CHANGED
@@ -1,10 +1,10 @@
1
- import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
1
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import React__default, { createContext, useContext, useEffect, useState, useMemo, useRef } from 'react';
4
4
  import { Markup } from 'interweave';
5
- import { ConfigProvider, Button, Typography, Checkbox, Input, Divider, Modal, Form, Tag, Popconfirm, Drawer, Select, Image, Dropdown } from 'antd';
5
+ import { ConfigProvider, Button, Typography, Checkbox, Input, Divider, Modal, Form, Tag, Popconfirm, Drawer, Select, Image, Card as Card$1, Dropdown } from 'antd';
6
6
  import styled from 'styled-components';
7
- import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, createGraphQLClient, Misc, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, QueryKeyFactory, useDownloadFile, NotificationUtils, invokePlugin, useIsMobile as useIsMobile$1, GRAY_500, GRAY_200, CHARCOAL_GRAY, StringUtils, usePaymentPlugins, ApiUtils, PAYABLE_INVOICE_STATES, DOCUMENT_NAME as DOCUMENT_NAME$1, QuoteInvoiceUtils, usePlugins, GraphqlUtils, MARK_PRO, Lists, getTaxationRequiredAccountFields, getAccount, useCurrentUserData, SLATE_500, PRIMARY_COLOR, FrontendTransaction, SLATE_600, WHITE, TransactionKind, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
7
+ import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, createGraphQLClient, Misc, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, QueryKeyFactory, useDownloadFile, NotificationUtils, invokePlugin, useIsMobile as useIsMobile$1, GRAY_500, GRAY_200, CHARCOAL_GRAY, StringUtils, usePaymentPlugins, ApiUtils, PAYABLE_INVOICE_STATES, DOCUMENT_NAME as DOCUMENT_NAME$1, QuoteInvoiceUtils, usePlugins, GraphqlUtils, Lists, getTaxationRequiredAccountFields, getAccount, useCurrentUserData, SLATE_500, PRIMARY_COLOR, FrontendTransaction, SLATE_600, WHITE, TransactionKind, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
8
8
  import { QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient, keepPreviousData } from '@tanstack/react-query';
9
9
  import { RecoilRoot, atom, useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
10
10
  import theme from 'antd/lib/theme';
@@ -1521,14 +1521,14 @@ var BrandContext = createContext({
1521
1521
  topNavImageUrl: DEFAULT_TOP_NAV_IMAGE_URL,
1522
1522
  });
1523
1523
 
1524
- var MUTATION$8 = "{\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }";
1524
+ var MUTATION$9 = "{\n entityBranding {\n accentColor\n brandColor\n topNavImageUrl\n }\n }";
1525
1525
  var getBranding = function (_a) {
1526
1526
  var token = _a.token, subdomain = _a.subdomain;
1527
1527
  return __awaiter(void 0, void 0, void 0, function () {
1528
1528
  var response;
1529
1529
  return __generator(this, function (_b) {
1530
1530
  switch (_b.label) {
1531
- case 0: return [4 /*yield*/, gqlRequest({ query: MUTATION$8, token: token, subdomain: subdomain })];
1531
+ case 0: return [4 /*yield*/, gqlRequest({ query: MUTATION$9, token: token, subdomain: subdomain })];
1532
1532
  case 1:
1533
1533
  response = _b.sent();
1534
1534
  return [2 /*return*/, response === null || response === void 0 ? void 0 : response.entityBranding];
@@ -1639,54 +1639,63 @@ function BunnyProvider(_a) {
1639
1639
  document.getElementsByTagName("head")[0].removeChild(script);
1640
1640
  };
1641
1641
  }, []);
1642
- return (jsx(BunnyContext.Provider, __assign({ value: {
1642
+ return (jsxs(BunnyContext.Provider, __assign({ value: {
1643
1643
  subdomain: subdomain,
1644
1644
  graphQLClient: graphQLClient,
1645
1645
  window: window,
1646
1646
  token: token,
1647
1647
  accountId: accountId,
1648
1648
  darkMode: darkMode,
1649
- } }, { children: jsx(QueryClientProvider, __assign({ client: queryClient$1 }, { children: jsx(RecoilRoot, { children: jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsx(ConfigProvider, __assign({ theme: {
1650
- algorithm: darkMode
1651
- ? theme.darkAlgorithm
1652
- : theme.defaultAlgorithm,
1653
- token: {
1654
- borderRadius: 4,
1655
- colorPrimary: entityBranding.brandColor,
1656
- colorLink: entityBranding.brandColor,
1657
- colorLinkActive: entityBranding.brandColor,
1658
- colorLinkHover: entityBranding.brandColor,
1659
- fontFamily: "Inter",
1660
- colorBorder: INPUT_BORDER_COLOR,
1661
- },
1662
- components: {
1663
- Drawer: {
1664
- colorBgElevated: darkMode
1665
- ? "var(--row-background-dark)"
1666
- : SLATE_50,
1649
+ } }, { children: [jsx("div", __assign({ style: { position: "fixed", left: -2000000000 } }, { children: "test" })), jsx(QueryClientProvider, __assign({ client: queryClient$1 }, { children: jsx(RecoilRoot, { children: jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsx(ConfigProvider, __assign({ theme: {
1650
+ algorithm: darkMode
1651
+ ? theme.darkAlgorithm
1652
+ : theme.defaultAlgorithm,
1653
+ token: {
1654
+ borderRadius: 4,
1655
+ colorPrimary: entityBranding.brandColor,
1656
+ colorLink: entityBranding.brandColor,
1657
+ colorLinkActive: entityBranding.brandColor,
1658
+ colorLinkHover: entityBranding.brandColor,
1659
+ fontFamily: MARK_PRO,
1660
+ colorBorder: INPUT_BORDER_COLOR,
1667
1661
  },
1668
- Divider: {
1669
- colorSplit: darkMode ? SLATE_400 : SLATE_200,
1662
+ components: {
1663
+ Drawer: {
1664
+ colorBgElevated: darkMode
1665
+ ? "var(--row-background-dark)"
1666
+ : SLATE_50,
1667
+ },
1668
+ Divider: {
1669
+ colorSplit: darkMode ? SLATE_400 : SLATE_200,
1670
+ },
1670
1671
  },
1671
- },
1672
- } }, { children: jsx(SecondaryWrapper, __assign({ setBranding: setBranding }, { children: children })) })) })) }) })) })));
1672
+ } }, { children: jsx(SecondaryWrapper, __assign({ setBranding: setBranding }, { children: children })) })) })) }) }))] })));
1673
1673
  }
1674
1674
  function SecondaryWrapper(_a) {
1675
1675
  var children = _a.children, setBranding = _a.setBranding;
1676
- var _b = useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token;
1676
+ var _b = useState(false), interFontLoaded = _b[0], setInterFontLoaded = _b[1];
1677
+ var _c = useContext(BunnyContext), subdomain = _c.subdomain, token = _c.token;
1677
1678
  var brandingData = useQuery({
1678
1679
  queryKey: QueryKeyFactory.default.brandingKey,
1679
1680
  queryFn: function () { return getBranding({ token: token, subdomain: subdomain }); },
1680
1681
  }).data;
1681
- var _c = useQuery({
1682
+ var _d = useQuery({
1682
1683
  queryKey: QueryKeyFactory.default.currentUserKey,
1683
1684
  queryFn: function () { return getCurrentUserData({ token: token }); },
1684
- }); _c.data; _c.isLoading;
1685
+ }); _d.data; _d.isLoading;
1685
1686
  useEffect(function () {
1686
1687
  if (brandingData) {
1687
1688
  setBranding(brandingData);
1688
1689
  }
1689
1690
  }, [brandingData]);
1691
+ // Check if Inter font is loaded
1692
+ useEffect(function () {
1693
+ document.fonts.ready.then(function () {
1694
+ setInterFontLoaded(true);
1695
+ });
1696
+ }, []);
1697
+ if (!interFontLoaded)
1698
+ return null;
1690
1699
  return jsx(Fragment, { children: children });
1691
1700
  }
1692
1701
 
@@ -1733,7 +1742,7 @@ function styleInject(css, ref) {
1733
1742
  }
1734
1743
  }
1735
1744
 
1736
- 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";
1745
+ 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";
1737
1746
  styleInject(css_248z);
1738
1747
 
1739
1748
  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}";
@@ -2760,7 +2769,7 @@ var PaymentForm = function (_a) {
2760
2769
  return (jsx(ActualPaymentForm, { invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, quote: quote, setIsSaving: setIsSaving }));
2761
2770
  };
2762
2771
 
2763
- 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";
2772
+ 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";
2764
2773
  var checkout = function (_a) {
2765
2774
  var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, subdomain = _a.subdomain;
2766
2775
  return __awaiter(void 0, void 0, void 0, function () {
@@ -2777,7 +2786,7 @@ var checkout = function (_a) {
2777
2786
  mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
2778
2787
  }
2779
2788
  return [4 /*yield*/, gqlRequest({
2780
- query: MUTATION$7,
2789
+ query: MUTATION$8,
2781
2790
  token: token,
2782
2791
  vars: mutationVars,
2783
2792
  subdomain: subdomain,
@@ -2914,7 +2923,7 @@ function InvoicePDF(_a) {
2914
2923
  }, title: "Invoice PDF", width: "100%" }));
2915
2924
  }
2916
2925
 
2917
- 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}";
2926
+ 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}";
2918
2927
  var getFormattedInvoice = function (_a) {
2919
2928
  var id = _a.id, token = _a.token, subdomain = _a.subdomain;
2920
2929
  return __awaiter(void 0, void 0, void 0, function () {
@@ -2924,7 +2933,7 @@ var getFormattedInvoice = function (_a) {
2924
2933
  case 0:
2925
2934
  vars = { id: id };
2926
2935
  return [4 /*yield*/, gqlRequest({
2927
- query: MUTATION$6,
2936
+ query: MUTATION$7,
2928
2937
  token: token,
2929
2938
  vars: vars,
2930
2939
  subdomain: subdomain,
@@ -3218,21 +3227,18 @@ var PandadocPollingModal = function (_a) {
3218
3227
  return (jsxs(Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxs("div", __assign({ className: "py-4 text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsx("div", __assign({ className: "text-center" }, { children: infoMessage }))] })));
3219
3228
  };
3220
3229
 
3221
- 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 }";
3230
+ 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 }"); };
3222
3231
  var getFormattedQuote = function (_a) {
3223
3232
  var id = _a.id, token = _a.token, subdomain = _a.subdomain;
3224
3233
  return __awaiter(void 0, void 0, void 0, function () {
3225
- var vars, response;
3234
+ var response;
3226
3235
  return __generator(this, function (_b) {
3227
3236
  switch (_b.label) {
3228
- case 0:
3229
- vars = { id: id };
3230
- return [4 /*yield*/, gqlRequest({
3231
- query: MUTATION$5,
3232
- token: token,
3233
- vars: vars,
3234
- subdomain: subdomain,
3235
- })];
3237
+ case 0: return [4 /*yield*/, gqlRequest({
3238
+ query: MUTATION$6(id),
3239
+ token: token,
3240
+ subdomain: subdomain,
3241
+ })];
3236
3242
  case 1:
3237
3243
  response = _b.sent();
3238
3244
  return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedQuote];
@@ -3250,10 +3256,10 @@ function ActualQuote(_a) {
3250
3256
  var isMobile = useIsMobile$1();
3251
3257
  // Queries
3252
3258
  var _e = useQuery({
3253
- queryKey: QueryKeyFactory.default.createQuoteKey(token),
3259
+ queryKey: QueryKeyFactory.default.createQuoteKey(token, id),
3254
3260
  queryFn: function () { return getFormattedQuote({ token: token, subdomain: subdomain, id: id }); },
3255
3261
  placeholderData: keepPreviousData,
3256
- }), data = _e.data; _e.isLoading; _e.isError; _e.error;
3262
+ }), data = _e.data, isLoading = _e.isLoading;
3257
3263
  useQuery({
3258
3264
  queryKey: QueryKeyFactory.default.currentUserKey,
3259
3265
  queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
@@ -3264,7 +3270,7 @@ function ActualQuote(_a) {
3264
3270
  var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
3265
3271
  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;
3266
3272
  useSigningComplete({ data: formattedQuote, token: token });
3267
- if (!formattedQuote) {
3273
+ if (!formattedQuote || isLoading) {
3268
3274
  return jsx(Fragment, {});
3269
3275
  }
3270
3276
  return (jsxs(Fragment, { children: [jsxs(Helmet, { children: [jsxs("title", { children: [formattedQuote.vendorName, " ", documentName] }), jsx("meta", { name: "description", content: QuoteInvoiceUtils.quoteMetaDescription(formattedQuote.vendorName) }), jsx("meta", { property: "og:type", content: "website" }), jsx("meta", { property: "og:title", content: QuoteInvoiceUtils.quoteMetaTitle({
@@ -3287,6 +3293,7 @@ function ActualQuote(_a) {
3287
3293
  styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
3288
3294
  function Quote(_a) {
3289
3295
  var id = _a.id;
3296
+ console.log("id", id);
3290
3297
  return (jsx(HelmetProvider, { children: jsx(ActualQuote, { id: id }) }));
3291
3298
  }
3292
3299
  var templateObject_1$5;
@@ -3421,7 +3428,7 @@ function PaymentMethod(_a) {
3421
3428
  return (jsx(PaymentMethodContext.Provider, __assign({ value: { footer: footer, processPublicUrl: processPublicUrl } }, { children: jsx(ActualPaymentMethod, {}) })));
3422
3429
  }
3423
3430
 
3424
- 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";
3431
+ 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";
3425
3432
  var accountUpdate = function (_a) {
3426
3433
  var accountId = _a.accountId, attributes = _a.attributes, token = _a.token;
3427
3434
  return __awaiter(void 0, void 0, void 0, function () {
@@ -3431,7 +3438,7 @@ var accountUpdate = function (_a) {
3431
3438
  switch (_c.label) {
3432
3439
  case 0:
3433
3440
  vars = { id: accountId, attributes: attributes };
3434
- return [4 /*yield*/, gqlRequest({ query: MUTATION$4, token: token, vars: vars })];
3441
+ return [4 /*yield*/, gqlRequest({ query: MUTATION$5, token: token, vars: vars })];
3435
3442
  case 1:
3436
3443
  response = _c.sent();
3437
3444
  errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
@@ -3699,7 +3706,7 @@ var Checkout = function (_a) {
3699
3706
  }, setIsSaving: setIsSaving }))] }))] })) })));
3700
3707
  };
3701
3708
 
3702
- 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}"; };
3709
+ 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}"; };
3703
3710
  var accountSignup = function (_a) {
3704
3711
  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;
3705
3712
  return __awaiter(void 0, void 0, void 0, function () {
@@ -3718,7 +3725,7 @@ var accountSignup = function (_a) {
3718
3725
  priceListCode: priceListCode,
3719
3726
  };
3720
3727
  return [4 /*yield*/, gqlRequest({
3721
- query: MUTATION$3(),
3728
+ query: MUTATION$4(),
3722
3729
  token: token,
3723
3730
  vars: vars,
3724
3731
  subdomain: subdomain,
@@ -3734,7 +3741,7 @@ var accountSignup = function (_a) {
3734
3741
  });
3735
3742
  };
3736
3743
 
3737
- 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}"; };
3744
+ 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}"; };
3738
3745
  var quoteAccountSignup = function (_a) {
3739
3746
  var token = _a.token, subdomain = _a.subdomain, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
3740
3747
  return __awaiter(void 0, void 0, void 0, function () {
@@ -3750,7 +3757,7 @@ var quoteAccountSignup = function (_a) {
3750
3757
  billingContact: billingContact,
3751
3758
  };
3752
3759
  return [4 /*yield*/, gqlRequest({
3753
- query: MUTATION$2(),
3760
+ query: MUTATION$3(),
3754
3761
  token: token,
3755
3762
  vars: vars,
3756
3763
  subdomain: subdomain,
@@ -3766,7 +3773,7 @@ var quoteAccountSignup = function (_a) {
3766
3773
  });
3767
3774
  };
3768
3775
 
3769
- 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}"; };
3776
+ 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}"; };
3770
3777
  var getPriceList = function (_a) {
3771
3778
  var token = _a.token, code = _a.code, subdomain = _a.subdomain;
3772
3779
  return __awaiter(void 0, void 0, void 0, function () {
@@ -3774,7 +3781,7 @@ var getPriceList = function (_a) {
3774
3781
  return __generator(this, function (_b) {
3775
3782
  switch (_b.label) {
3776
3783
  case 0: return [4 /*yield*/, gqlRequest({
3777
- query: MUTATION$1(),
3784
+ query: MUTATION$2(),
3778
3785
  token: token,
3779
3786
  vars: { code: code },
3780
3787
  subdomain: subdomain,
@@ -3866,6 +3873,31 @@ var StyedLink = styled.a(templateObject_1$4 || (templateObject_1$4 = __makeTempl
3866
3873
  var StyledBunnyLink = styled(StyedLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:hover {\n color: ", " !important;\n }\n"], ["\n &:hover {\n color: ", " !important;\n }\n"])), PRIMARY_COLOR);
3867
3874
  var templateObject_1$4, templateObject_2;
3868
3875
 
3876
+ 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";
3877
+ var portalSessionCreate = function (_a) {
3878
+ var tenantCode = _a.tenantCode, expiry = _a.expiry, returnUrl = _a.returnUrl, token = _a.token, subdomain = _a.subdomain;
3879
+ return __awaiter(void 0, void 0, void 0, function () {
3880
+ var response, errors;
3881
+ var _b;
3882
+ return __generator(this, function (_c) {
3883
+ switch (_c.label) {
3884
+ case 0: return [4 /*yield*/, gqlRequest({
3885
+ query: MUTATION$1,
3886
+ token: token,
3887
+ vars: { tenantCode: tenantCode, expiry: expiry, returnUrl: returnUrl },
3888
+ subdomain: subdomain,
3889
+ })];
3890
+ case 1:
3891
+ response = _c.sent();
3892
+ errors = (response === null || response === void 0 ? void 0 : response.portalSessionCreate).errors;
3893
+ if (errors)
3894
+ throw errors;
3895
+ return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.portalSessionCreate) === null || _b === void 0 ? void 0 : _b.token];
3896
+ }
3897
+ });
3898
+ });
3899
+ };
3900
+
3869
3901
  var showErrorNotification = NotificationUtils.useErrorNotification();
3870
3902
  function Signup(_a) {
3871
3903
  var priceListCode = _a.priceListCode, returnUrl = _a.returnUrl;
@@ -3881,10 +3913,11 @@ function Signup(_a) {
3881
3913
  var _c = useState(undefined), quote = _c[0], setQuote = _c[1];
3882
3914
  var _d = useState(undefined), accountId = _d[0], setAccountId = _d[1];
3883
3915
  var _e = useState(undefined), quoteId = _e[0], setQuoteId = _e[1];
3884
- var _f = useState(undefined), formData = _f[0], setFormData = _f[1];
3885
- var _g = useState(false), proceedingToPayment = _g[0], setProceedingToPayment = _g[1];
3886
- var _h = useState(false), paying = _h[0], setIsPaying = _h[1];
3887
- var _j = useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
3916
+ var _f = useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
3917
+ var _g = useState(undefined), formData = _g[0], setFormData = _g[1];
3918
+ var _h = useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
3919
+ var _j = useState(false), paying = _j[0], setIsPaying = _j[1];
3920
+ var _k = useState(false), purchaseSucceeded = _k[0], setPurchaseSucceeded = _k[1];
3888
3921
  // Queries
3889
3922
  var priceListData = useQuery({
3890
3923
  queryKey: ["priceList", priceListCode],
@@ -3892,7 +3925,7 @@ function Signup(_a) {
3892
3925
  }).data;
3893
3926
  function handleSubmit(formData) {
3894
3927
  return __awaiter(this, void 0, void 0, function () {
3895
- var data;
3928
+ var data, portalSessionToken;
3896
3929
  return __generator(this, function (_a) {
3897
3930
  switch (_a.label) {
3898
3931
  case 0:
@@ -3913,11 +3946,21 @@ function Signup(_a) {
3913
3946
  case 1:
3914
3947
  data = _a.sent();
3915
3948
  setAccountId(data.account.id);
3916
- setQuoteId(data.quoteId);
3949
+ return [4 /*yield*/, portalSessionCreate({
3950
+ token: token,
3951
+ subdomain: subdomain,
3952
+ tenantCode: data.tenant.code,
3953
+ expiry: 24,
3954
+ returnUrl: returnUrl || "",
3955
+ })];
3956
+ case 2:
3957
+ portalSessionToken = _a.sent();
3958
+ setPortalSessionToken(portalSessionToken);
3959
+ setQuoteId(data.quote.id);
3917
3960
  setProceedingToPayment(false);
3918
3961
  setQuote({
3919
- amountDue: data.amount,
3920
- currencyId: data.currencyId,
3962
+ amountDue: data.quote.amountDue,
3963
+ currencyId: data.quote.currencyId,
3921
3964
  });
3922
3965
  return [2 /*return*/];
3923
3966
  }
@@ -3942,8 +3985,11 @@ function Signup(_a) {
3942
3985
  if (!accountId) {
3943
3986
  throw new Error("Account ID is required");
3944
3987
  }
3988
+ if (!portalSessionToken) {
3989
+ throw new Error("Portal session token is required");
3990
+ }
3945
3991
  return [4 /*yield*/, accountSignup({
3946
- token: token,
3992
+ token: portalSessionToken,
3947
3993
  subdomain: subdomain,
3948
3994
  entityId: entityId,
3949
3995
  quoteId: quoteId,
@@ -3973,6 +4019,65 @@ function Signup(_a) {
3973
4019
  }
3974
4020
  }
3975
4021
 
4022
+ 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}"); };
4023
+ var getTransactions = function (filter, token, subdomain, kindsToShow) { return __awaiter(void 0, void 0, void 0, function () {
4024
+ var response, _a, data, errors, transactions;
4025
+ var _b, _c;
4026
+ return __generator(this, function (_d) {
4027
+ switch (_d.label) {
4028
+ case 0: return [4 /*yield*/, fetch(subdomain + "/graphql", {
4029
+ method: "POST",
4030
+ headers: {
4031
+ "Content-type": "application/json; charset=utf-8",
4032
+ Authorization: "Bearer ".concat(token),
4033
+ },
4034
+ body: JSON.stringify({
4035
+ query: transactionMutation(filter),
4036
+ }),
4037
+ })];
4038
+ case 1:
4039
+ response = _d.sent();
4040
+ console.log("response", response);
4041
+ return [4 /*yield*/, response.json()];
4042
+ case 2:
4043
+ _a = _d.sent(), data = _a.data, errors = _a.errors;
4044
+ if (errors) {
4045
+ throw new Error(errors[0].message);
4046
+ }
4047
+ 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); });
4048
+ return [2 /*return*/, transactions === null || transactions === void 0 ? void 0 : transactions.reverse()];
4049
+ }
4050
+ });
4051
+ }); };
4052
+
4053
+ var pageContentRefState = atom({
4054
+ key: "pageContentRefState",
4055
+ default: undefined,
4056
+ });
4057
+
4058
+ var PageContent = function (_a) {
4059
+ var children = _a.children, className = _a.className, style = _a.style;
4060
+ var pageContentRef = useRef(null);
4061
+ var setPageContentRef = useSetRecoilState(pageContentRefState);
4062
+ useEffect(function () {
4063
+ setPageContentRef(pageContentRef === null || pageContentRef === void 0 ? void 0 : pageContentRef.current);
4064
+ }, [pageContentRef, setPageContentRef]);
4065
+ return (jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
4066
+ };
4067
+
4068
+ var Text$8 = Typography.Text;
4069
+ var PageHeaderWithActions = function (_a) {
4070
+ var children = _a.children, title = _a.title;
4071
+ var isMobile = useIsMobile$1();
4072
+ return (jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsx(PageSubTitle, { title: title }), children] })));
4073
+ };
4074
+ var PageSubTitle = function (_a) {
4075
+ var title = _a.title;
4076
+ var secondaryColor = useContext(BrandContext).secondaryColor;
4077
+ var darkMode = useContext(BunnyContext).darkMode;
4078
+ return (jsx(Text$8, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
4079
+ };
4080
+
3976
4081
  var StateTag = function (_a) {
3977
4082
  var state = _a.state;
3978
4083
  return jsx(Tag, __assign({ color: getColor(state) }, { children: capitalize(startCase(state)) }));
@@ -4010,22 +4115,25 @@ var TransactionGridCell = styled.div.withConfig({
4010
4115
  })(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"); }, SLATE_600);
4011
4116
  var templateObject_1$3;
4012
4117
 
4013
- var Text$8 = Typography.Text;
4118
+ var Text$7 = Typography.Text;
4014
4119
  var TransactionDate = function (_a) {
4015
4120
  var date = _a.date;
4016
- return jsx(Text$8, __assign({ className: "text-sm" }, { children: Misc.formatDate(date) }));
4121
+ return jsx(Text$7, __assign({ className: "text-sm" }, { children: Misc.formatDate(date) }));
4017
4122
  };
4018
4123
 
4019
4124
  var isInvoice = function (transaction) {
4020
4125
  return transaction.kind === "INVOICE";
4021
4126
  };
4127
+ var isQuote = function (transaction) {
4128
+ return transaction.kind === "QUOTE";
4129
+ };
4022
4130
  var TransactionRowTitle = function (_a) {
4023
4131
  var transaction = _a.transaction;
4024
- if (!isInvoice(transaction)) {
4132
+ console.log("transaction", transaction);
4133
+ if (!isInvoice(transaction) && !isQuote(transaction)) {
4025
4134
  return jsx(Fragment, {});
4026
4135
  }
4027
- var invoice = transaction.transactionable;
4028
- return (jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: invoice.number })));
4136
+ return (jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
4029
4137
  };
4030
4138
 
4031
4139
  // TODO: delete
@@ -4034,27 +4142,32 @@ var ArrowDownToLine = function (_a) {
4034
4142
  return (jsxs("svg", __assign({ className: className, fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M8 11.3333V2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M4 7.33301L8 11.333L12 7.33301", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M12.6654 14H3.33203", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
4035
4143
  };
4036
4144
 
4145
+ var TransactionsListContext = createContext({});
4146
+
4037
4147
  var TransactionDownload = function (_a) {
4038
4148
  var transaction = _a.transaction, token = _a.token, subdomain = _a.subdomain;
4039
4149
  var darkMode = useContext(BunnyContext).darkMode;
4150
+ var downloadTransactionLink = useContext(TransactionsListContext).downloadTransactionLink;
4040
4151
  var downloadFile = useDownloadFile();
4041
4152
  var isMobile = useIsMobile$1();
4042
- var isClickable = transaction.kind === "INVOICE";
4153
+ var isClickable = transaction.kind === "INVOICE" || downloadTransactionLink !== undefined;
4154
+ var downloadLink = downloadTransactionLink
4155
+ ? downloadTransactionLink(transaction.transactionableId)
4156
+ : "".concat(subdomain, "/api/pdf/invoice/").concat(transaction.transactionableId);
4043
4157
  if (!isClickable)
4044
4158
  return null;
4045
4159
  return (jsx("div", __assign({ onClick: function (e) {
4046
4160
  e.stopPropagation();
4047
- downloadFile("".concat(subdomain, "/api/pdf/invoice/").concat(transaction.transactionableId), token);
4161
+ downloadFile(downloadLink, token);
4048
4162
  } }, { children: jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "show-on-hover"), color: darkMode ? WHITE : SLATE_600 }) })));
4049
4163
  };
4050
4164
 
4051
- var Text$7 = Typography.Text;
4165
+ var Text$6 = Typography.Text;
4052
4166
  var TransactionsEmptyState = function () {
4053
- return (jsx(Text$7, __assign({ className: "flex justify-center p-4 text-base" }, { children: "There are no invoices" })));
4167
+ var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
4168
+ return (jsx(Text$6, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no invoices" })));
4054
4169
  };
4055
4170
 
4056
- var TransactionsListContext = createContext({});
4057
-
4058
4171
  function capitalizeFirstLetter(string) {
4059
4172
  return string.charAt(0).toUpperCase() + string.slice(1);
4060
4173
  }
@@ -4114,7 +4227,7 @@ var useGraphQLRequest = function () { return function (query, token, variables)
4114
4227
  });
4115
4228
  }); }; };
4116
4229
 
4117
- var Text$6 = Typography.Text;
4230
+ var Text$5 = Typography.Text;
4118
4231
  var TransactionsListDesktop = function (_a) {
4119
4232
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
4120
4233
  var columns = useContext(TransactionsListContext).columns;
@@ -4126,18 +4239,19 @@ var TransactionsListDesktop = function (_a) {
4126
4239
  if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
4127
4240
  return jsx(TransactionsEmptyState, {});
4128
4241
  return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
4129
- var isClickable = transaction.kind === TransactionKind.INVOICE;
4242
+ var _a;
4243
+ var isClickable = onTransactionClick !== undefined;
4130
4244
  return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
4131
- onTransactionClick(transaction);
4245
+ onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
4132
4246
  }, style: {
4133
4247
  backgroundColor: index % 2 === 0
4134
4248
  ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
4135
4249
  : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
4136
- } }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transaction.createdAt }) })), jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$6, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })), showState && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$6, { children: Misc.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }) })))] }), index));
4250
+ } }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transaction.createdAt }) })), jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$5, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })), showState && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$5, { children: 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));
4137
4251
  });
4138
4252
  };
4139
4253
 
4140
- var Text$5 = Typography.Text;
4254
+ var Text$4 = Typography.Text;
4141
4255
  var TransactionsListMobile = function (_a) {
4142
4256
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
4143
4257
  var columns = useContext(TransactionsListContext).columns;
@@ -4156,94 +4270,63 @@ var TransactionsListMobile = function (_a) {
4156
4270
  backgroundColor: index % 2 === 0
4157
4271
  ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
4158
4272
  : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
4159
- } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(Text$5, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsx(Text$5, { children: "\u00B7" }), showAmount && (jsx(Text$5, { children: Misc.formatCurrency(transaction.transactionable.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })))] }), index));
4160
- });
4161
- };
4162
-
4163
- 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}"); };
4164
- var getTransactions = function (filter, token, subdomain, kindsToShow) { return __awaiter(void 0, void 0, void 0, function () {
4165
- var response, _a, data, errors, transactions;
4166
- var _b, _c;
4167
- return __generator(this, function (_d) {
4168
- switch (_d.label) {
4169
- case 0: return [4 /*yield*/, fetch(subdomain + "/graphql", {
4170
- method: "POST",
4171
- headers: {
4172
- "Content-type": "application/json; charset=utf-8",
4173
- Authorization: "Bearer ".concat(token),
4174
- },
4175
- body: JSON.stringify({
4176
- query: transactionMutation(filter),
4177
- }),
4178
- })];
4179
- case 1:
4180
- response = _d.sent();
4181
- console.log("response", response);
4182
- return [4 /*yield*/, response.json()];
4183
- case 2:
4184
- _a = _d.sent(), data = _a.data, errors = _a.errors;
4185
- if (errors) {
4186
- throw new Error(errors[0].message);
4187
- }
4188
- 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); });
4189
- return [2 /*return*/, transactions === null || transactions === void 0 ? void 0 : transactions.reverse()];
4190
- }
4273
+ } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(Text$4, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsx(Text$4, { children: "\u00B7" }), showAmount && (jsx(Text$4, { children: Misc.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })))] }), index));
4191
4274
  });
4192
- }); };
4193
-
4194
- var pageContentRefState = atom({
4195
- key: "pageContentRefState",
4196
- default: undefined,
4197
- });
4198
-
4199
- var PageContent = function (_a) {
4200
- var children = _a.children, className = _a.className, style = _a.style;
4201
- var pageContentRef = useRef(null);
4202
- var setPageContentRef = useSetRecoilState(pageContentRefState);
4203
- useEffect(function () {
4204
- setPageContentRef(pageContentRef === null || pageContentRef === void 0 ? void 0 : pageContentRef.current);
4205
- }, [pageContentRef, setPageContentRef]);
4206
- return (jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
4207
- };
4208
-
4209
- var Text$4 = Typography.Text;
4210
- var PageHeaderWithActions = function (_a) {
4211
- var children = _a.children, title = _a.title;
4212
- var isMobile = useIsMobile$1();
4213
- return (jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsx(PageSubTitle, { title: title }), children] })));
4214
- };
4215
- var PageSubTitle = function (_a) {
4216
- var title = _a.title;
4217
- var secondaryColor = useContext(BrandContext).secondaryColor;
4218
- var darkMode = useContext(BunnyContext).darkMode;
4219
- return (jsx(Text$4, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
4220
4275
  };
4221
4276
 
4222
- function ActualTransactions() {
4223
- var _a = 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;
4224
- // Context
4225
- var columns = useContext(TransactionsListContext).columns;
4277
+ // Create a client
4278
+ var queryClient = new QueryClient();
4279
+ function Transactions(_a) {
4280
+ 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 ? [
4281
+ TransactionKind.INVOICE,
4282
+ TransactionKind.PAYMENT,
4283
+ TransactionKind.REFUND,
4284
+ TransactionKind.WRITE_OFF,
4285
+ ] : _h, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage;
4286
+ var contextValues = {
4287
+ showSearchBar: showSearchBar,
4288
+ showTitle: showTitle,
4289
+ transactionComponent: transactionComponent,
4290
+ columns: columns,
4291
+ className: className,
4292
+ searchBarClassName: searchBarClassName,
4293
+ shadow: shadow,
4294
+ useModal: useModal,
4295
+ onTransactionClick: onTransactionClick,
4296
+ suppressTransactionDisplay: suppressTransactionDisplay,
4297
+ kindsToShow: kindsToShow,
4298
+ style: style,
4299
+ filter: filter,
4300
+ noTransactionsMessage: noTransactionsMessage,
4301
+ };
4302
+ return (jsx(QueryClientProvider, __assign({ client: queryClient }, { children: jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsWrapper, {}) })) })));
4303
+ }
4304
+ function TransactionsWrapper() {
4305
+ var _a = useContext(TransactionsListContext), kindsToShow = _a.kindsToShow, filterFromContext = _a.filter;
4226
4306
  var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
4227
4307
  // Local state
4228
4308
  var _c = useState(""), search = _c[0], setSearch = _c[1];
4229
- var _d = useState(null), selectedTransaction = _d[0], setSelectedTransaction = _d[1];
4230
- var _e = useState(false), drawerOpen = _e[0], setDrawerOpen = _e[1];
4231
- // Hooks
4232
- var isMobile = useIsMobile$1();
4233
- var filter = search
4234
- ? "filter: \"transaction.transactionableId is ".concat(search, "\"")
4235
- : "";
4309
+ var filter = filterFromContext ||
4310
+ (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
4236
4311
  // Queries
4237
4312
  var data = useQuery({
4238
4313
  queryKey: ["transactions", token, filter],
4239
4314
  queryFn: function () { return getTransactions(filter, token, subdomain, kindsToShow); },
4240
4315
  placeholderData: keepPreviousData,
4241
4316
  }).data;
4242
- var transactions = data;
4317
+ return (jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }));
4318
+ }
4319
+ function TransactionsDisplay(_a) {
4320
+ var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search, title = _a.title;
4321
+ var _b = 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;
4322
+ var columns = useContext(TransactionsListContext).columns;
4323
+ var darkMode = useContext(BunnyContext).darkMode;
4324
+ // Local state
4325
+ var _c = useState(null), selectedTransaction = _c[0], setSelectedTransaction = _c[1];
4326
+ var _d = useState(false), drawerOpen = _d[0], setDrawerOpen = _d[1];
4327
+ // Hooks
4328
+ var isMobile = useIsMobile$1();
4243
4329
  function handleTransactionClick(transaction) {
4244
- if (transaction.kind !== TransactionKind.INVOICE) {
4245
- return;
4246
- }
4247
4330
  if (onTransactionClick) {
4248
4331
  onTransactionClick(transaction);
4249
4332
  }
@@ -4281,59 +4364,31 @@ function ActualTransactions() {
4281
4364
  }
4282
4365
  return templateColumns.join(" ");
4283
4366
  };
4284
- return (jsxs("div", __assign({ style: style }, { children: [jsx(PageHeaderWithActions, __assign({ title: showTitle ? "Past transactions" : undefined }, { children: showSearchBar && (jsx("div", { children: jsx(Input
4285
- // className={
4286
- // searchBarClassName
4287
- // ? searchBarClassName
4288
- // : "border border-slate-200"
4289
- // }
4290
- , {
4291
- // className={
4292
- // searchBarClassName
4293
- // ? searchBarClassName
4294
- // : "border border-slate-200"
4295
- // }
4296
- onChange: function (e) {
4367
+ var drawerTitle = function () {
4368
+ if (!selectedTransaction)
4369
+ return "";
4370
+ var kind = selectedTransaction.kind.toLowerCase();
4371
+ return kind.charAt(0).toUpperCase() + kind.slice(1);
4372
+ };
4373
+ return (jsxs("div", __assign({ style: style }, { children: [jsx(PageHeaderWithActions, __assign({ title: title || (showTitle ? "Past transactions" : undefined) }, { children: showSearchBar && (jsx("div", { children: jsx(Input, { className: searchBarClassName
4374
+ ? searchBarClassName
4375
+ : "border border-slate-200", onChange: function (e) {
4297
4376
  if (isNaN(Number(e.target.value))) {
4298
4377
  return;
4299
4378
  }
4300
- setSearch(e.target.value);
4379
+ onSearchValueChanged(e.target.value);
4301
4380
  }, prefix: jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
4302
4381
  minWidth: "300px",
4303
4382
  }, value: search }) })) })), jsx(PageContent, __assign({ className: "flex w-full shadow-padding-xb ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: jsx("div", __assign({ className: "grid w-full rounded-md overflow-auto ".concat("shadow-".concat(shadow)), style: {
4304
4383
  gridTemplateColumns: gridTemplateColumns(),
4384
+ backgroundColor: "var(--row-background".concat(darkMode ? "-dark" : "", ")"),
4305
4385
  } }, { children: isMobile ? (jsx(Fragment, { children: TransactionsListMobile({
4306
4386
  transactions: transactions,
4307
4387
  onTransactionClick: handleTransactionClick,
4308
4388
  }) })) : (jsx(Fragment, { children: TransactionsListDesktop({
4309
4389
  transactions: transactions,
4310
4390
  onTransactionClick: handleTransactionClick,
4311
- }) })) })) })), useModal ? (jsx(Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsx(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" ? (jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsx("div", { children: "Not an invoice, or no transaction selected" })) })))] })));
4312
- }
4313
- // Create a client
4314
- var queryClient = new QueryClient();
4315
- function Transactions(_a) {
4316
- 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 ? [
4317
- TransactionKind.INVOICE,
4318
- TransactionKind.PAYMENT,
4319
- TransactionKind.REFUND,
4320
- TransactionKind.WRITE_OFF,
4321
- ] : _h, style = _a.style;
4322
- var contextValues = {
4323
- showSearchBar: showSearchBar,
4324
- showTitle: showTitle,
4325
- transactionComponent: transactionComponent,
4326
- columns: columns,
4327
- className: className,
4328
- searchBarClassName: searchBarClassName,
4329
- shadow: shadow,
4330
- useModal: useModal,
4331
- onTransactionClick: onTransactionClick,
4332
- suppressTransactionDisplay: suppressTransactionDisplay,
4333
- kindsToShow: kindsToShow,
4334
- style: style,
4335
- };
4336
- return (jsx(QueryClientProvider, __assign({ client: queryClient }, { children: jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(ActualTransactions, {}) })) })));
4391
+ }) })) })) })), useModal ? (jsx(Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsx(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" ? (jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxs(Card$1, __assign({ className: "shadow-md" }, { children: [jsx(Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Amount:" }), " ", jsx(Typography.Text, { children: Misc.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Description:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Kind:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "State:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
4337
4392
  }
4338
4393
 
4339
4394
  var updatingChargeQuantityIdState = atom({