@bunnyapp/components 1.0.3 → 1.0.5

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';
@@ -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}";
@@ -3218,21 +3227,19 @@ 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$6 = "\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 ($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 }"; };
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$6,
3232
- token: token,
3233
- vars: vars,
3234
- subdomain: subdomain,
3235
- })];
3237
+ case 0: return [4 /*yield*/, gqlRequest({
3238
+ query: MUTATION$6(),
3239
+ token: token,
3240
+ subdomain: subdomain,
3241
+ vars: { id: id },
3242
+ })];
3236
3243
  case 1:
3237
3244
  response = _b.sent();
3238
3245
  return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedQuote];
@@ -3250,10 +3257,10 @@ function ActualQuote(_a) {
3250
3257
  var isMobile = useIsMobile$1();
3251
3258
  // Queries
3252
3259
  var _e = useQuery({
3253
- queryKey: QueryKeyFactory.default.createQuoteKey(token),
3260
+ queryKey: QueryKeyFactory.default.createQuoteKey(token, id),
3254
3261
  queryFn: function () { return getFormattedQuote({ token: token, subdomain: subdomain, id: id }); },
3255
3262
  placeholderData: keepPreviousData,
3256
- }), data = _e.data; _e.isLoading; _e.isError; _e.error;
3263
+ }), data = _e.data, isLoading = _e.isLoading;
3257
3264
  useQuery({
3258
3265
  queryKey: QueryKeyFactory.default.currentUserKey,
3259
3266
  queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
@@ -3264,7 +3271,7 @@ function ActualQuote(_a) {
3264
3271
  var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
3265
3272
  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
3273
  useSigningComplete({ data: formattedQuote, token: token });
3267
- if (!formattedQuote) {
3274
+ if (!formattedQuote || isLoading) {
3268
3275
  return jsx(Fragment, {});
3269
3276
  }
3270
3277
  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({
@@ -4012,6 +4019,64 @@ function Signup(_a) {
4012
4019
  }
4013
4020
  }
4014
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
+ return [4 /*yield*/, response.json()];
4041
+ case 2:
4042
+ _a = _d.sent(), data = _a.data, errors = _a.errors;
4043
+ if (errors) {
4044
+ throw new Error(errors[0].message);
4045
+ }
4046
+ 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); });
4047
+ return [2 /*return*/, transactions === null || transactions === void 0 ? void 0 : transactions.reverse()];
4048
+ }
4049
+ });
4050
+ }); };
4051
+
4052
+ var pageContentRefState = atom({
4053
+ key: "pageContentRefState",
4054
+ default: undefined,
4055
+ });
4056
+
4057
+ var PageContent = function (_a) {
4058
+ var children = _a.children, className = _a.className, style = _a.style;
4059
+ var pageContentRef = useRef(null);
4060
+ var setPageContentRef = useSetRecoilState(pageContentRefState);
4061
+ useEffect(function () {
4062
+ setPageContentRef(pageContentRef === null || pageContentRef === void 0 ? void 0 : pageContentRef.current);
4063
+ }, [pageContentRef, setPageContentRef]);
4064
+ return (jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
4065
+ };
4066
+
4067
+ var Text$8 = Typography.Text;
4068
+ var PageHeaderWithActions = function (_a) {
4069
+ var children = _a.children, title = _a.title;
4070
+ var isMobile = useIsMobile$1();
4071
+ 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] })));
4072
+ };
4073
+ var PageSubTitle = function (_a) {
4074
+ var title = _a.title;
4075
+ var secondaryColor = useContext(BrandContext).secondaryColor;
4076
+ var darkMode = useContext(BunnyContext).darkMode;
4077
+ return (jsx(Text$8, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
4078
+ };
4079
+
4015
4080
  var StateTag = function (_a) {
4016
4081
  var state = _a.state;
4017
4082
  return jsx(Tag, __assign({ color: getColor(state) }, { children: capitalize(startCase(state)) }));
@@ -4049,22 +4114,24 @@ var TransactionGridCell = styled.div.withConfig({
4049
4114
  })(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);
4050
4115
  var templateObject_1$3;
4051
4116
 
4052
- var Text$8 = Typography.Text;
4117
+ var Text$7 = Typography.Text;
4053
4118
  var TransactionDate = function (_a) {
4054
4119
  var date = _a.date;
4055
- return jsx(Text$8, __assign({ className: "text-sm" }, { children: Misc.formatDate(date) }));
4120
+ return jsx(Text$7, __assign({ className: "text-sm" }, { children: Misc.formatDate(date) }));
4056
4121
  };
4057
4122
 
4058
4123
  var isInvoice = function (transaction) {
4059
4124
  return transaction.kind === "INVOICE";
4060
4125
  };
4126
+ var isQuote = function (transaction) {
4127
+ return transaction.kind === "QUOTE";
4128
+ };
4061
4129
  var TransactionRowTitle = function (_a) {
4062
4130
  var transaction = _a.transaction;
4063
- if (!isInvoice(transaction)) {
4131
+ if (!isInvoice(transaction) && !isQuote(transaction)) {
4064
4132
  return jsx(Fragment, {});
4065
4133
  }
4066
- var invoice = transaction.transactionable;
4067
- return (jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: invoice.number })));
4134
+ return (jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
4068
4135
  };
4069
4136
 
4070
4137
  // TODO: delete
@@ -4073,27 +4140,32 @@ var ArrowDownToLine = function (_a) {
4073
4140
  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" })] })));
4074
4141
  };
4075
4142
 
4143
+ var TransactionsListContext = createContext({});
4144
+
4076
4145
  var TransactionDownload = function (_a) {
4077
4146
  var transaction = _a.transaction, token = _a.token, subdomain = _a.subdomain;
4078
4147
  var darkMode = useContext(BunnyContext).darkMode;
4148
+ var downloadTransactionLink = useContext(TransactionsListContext).downloadTransactionLink;
4079
4149
  var downloadFile = useDownloadFile();
4080
4150
  var isMobile = useIsMobile$1();
4081
- var isClickable = transaction.kind === "INVOICE";
4151
+ var isClickable = transaction.kind === "INVOICE" || downloadTransactionLink !== undefined;
4152
+ var downloadLink = downloadTransactionLink
4153
+ ? downloadTransactionLink(transaction.transactionableId)
4154
+ : "".concat(subdomain, "/api/pdf/invoice/").concat(transaction.transactionableId);
4082
4155
  if (!isClickable)
4083
4156
  return null;
4084
4157
  return (jsx("div", __assign({ onClick: function (e) {
4085
4158
  e.stopPropagation();
4086
- downloadFile("".concat(subdomain, "/api/pdf/invoice/").concat(transaction.transactionableId), token);
4159
+ downloadFile(downloadLink, token);
4087
4160
  } }, { children: jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "show-on-hover"), color: darkMode ? WHITE : SLATE_600 }) })));
4088
4161
  };
4089
4162
 
4090
- var Text$7 = Typography.Text;
4163
+ var Text$6 = Typography.Text;
4091
4164
  var TransactionsEmptyState = function () {
4092
- return (jsx(Text$7, __assign({ className: "flex justify-center p-4 text-base" }, { children: "There are no invoices" })));
4165
+ var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
4166
+ return (jsx(Text$6, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no invoices" })));
4093
4167
  };
4094
4168
 
4095
- var TransactionsListContext = createContext({});
4096
-
4097
4169
  function capitalizeFirstLetter(string) {
4098
4170
  return string.charAt(0).toUpperCase() + string.slice(1);
4099
4171
  }
@@ -4153,7 +4225,7 @@ var useGraphQLRequest = function () { return function (query, token, variables)
4153
4225
  });
4154
4226
  }); }; };
4155
4227
 
4156
- var Text$6 = Typography.Text;
4228
+ var Text$5 = Typography.Text;
4157
4229
  var TransactionsListDesktop = function (_a) {
4158
4230
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
4159
4231
  var columns = useContext(TransactionsListContext).columns;
@@ -4165,18 +4237,19 @@ var TransactionsListDesktop = function (_a) {
4165
4237
  if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
4166
4238
  return jsx(TransactionsEmptyState, {});
4167
4239
  return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
4168
- var isClickable = transaction.kind === TransactionKind.INVOICE;
4240
+ var _a;
4241
+ var isClickable = onTransactionClick !== undefined;
4169
4242
  return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
4170
- onTransactionClick(transaction);
4243
+ onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
4171
4244
  }, style: {
4172
4245
  backgroundColor: index % 2 === 0
4173
4246
  ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
4174
4247
  : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
4175
- } }, { 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));
4248
+ } }, { 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));
4176
4249
  });
4177
4250
  };
4178
4251
 
4179
- var Text$5 = Typography.Text;
4252
+ var Text$4 = Typography.Text;
4180
4253
  var TransactionsListMobile = function (_a) {
4181
4254
  var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
4182
4255
  var columns = useContext(TransactionsListContext).columns;
@@ -4195,94 +4268,63 @@ var TransactionsListMobile = function (_a) {
4195
4268
  backgroundColor: index % 2 === 0
4196
4269
  ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
4197
4270
  : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
4198
- } }, { 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));
4271
+ } }, { 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));
4199
4272
  });
4200
4273
  };
4201
4274
 
4202
- 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}"); };
4203
- var getTransactions = function (filter, token, subdomain, kindsToShow) { return __awaiter(void 0, void 0, void 0, function () {
4204
- var response, _a, data, errors, transactions;
4205
- var _b, _c;
4206
- return __generator(this, function (_d) {
4207
- switch (_d.label) {
4208
- case 0: return [4 /*yield*/, fetch(subdomain + "/graphql", {
4209
- method: "POST",
4210
- headers: {
4211
- "Content-type": "application/json; charset=utf-8",
4212
- Authorization: "Bearer ".concat(token),
4213
- },
4214
- body: JSON.stringify({
4215
- query: transactionMutation(filter),
4216
- }),
4217
- })];
4218
- case 1:
4219
- response = _d.sent();
4220
- console.log("response", response);
4221
- return [4 /*yield*/, response.json()];
4222
- case 2:
4223
- _a = _d.sent(), data = _a.data, errors = _a.errors;
4224
- if (errors) {
4225
- throw new Error(errors[0].message);
4226
- }
4227
- 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); });
4228
- return [2 /*return*/, transactions === null || transactions === void 0 ? void 0 : transactions.reverse()];
4229
- }
4230
- });
4231
- }); };
4232
-
4233
- var pageContentRefState = atom({
4234
- key: "pageContentRefState",
4235
- default: undefined,
4236
- });
4237
-
4238
- var PageContent = function (_a) {
4239
- var children = _a.children, className = _a.className, style = _a.style;
4240
- var pageContentRef = useRef(null);
4241
- var setPageContentRef = useSetRecoilState(pageContentRefState);
4242
- useEffect(function () {
4243
- setPageContentRef(pageContentRef === null || pageContentRef === void 0 ? void 0 : pageContentRef.current);
4244
- }, [pageContentRef, setPageContentRef]);
4245
- return (jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
4246
- };
4247
-
4248
- var Text$4 = Typography.Text;
4249
- var PageHeaderWithActions = function (_a) {
4250
- var children = _a.children, title = _a.title;
4251
- var isMobile = useIsMobile$1();
4252
- 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] })));
4253
- };
4254
- var PageSubTitle = function (_a) {
4255
- var title = _a.title;
4256
- var secondaryColor = useContext(BrandContext).secondaryColor;
4257
- var darkMode = useContext(BunnyContext).darkMode;
4258
- return (jsx(Text$4, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
4259
- };
4260
-
4261
- function ActualTransactions() {
4262
- 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;
4263
- // Context
4264
- var columns = useContext(TransactionsListContext).columns;
4275
+ // Create a client
4276
+ var queryClient = new QueryClient();
4277
+ function Transactions(_a) {
4278
+ 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 ? [
4279
+ TransactionKind.INVOICE,
4280
+ TransactionKind.PAYMENT,
4281
+ TransactionKind.REFUND,
4282
+ TransactionKind.WRITE_OFF,
4283
+ ] : _h, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage;
4284
+ var contextValues = {
4285
+ showSearchBar: showSearchBar,
4286
+ showTitle: showTitle,
4287
+ transactionComponent: transactionComponent,
4288
+ columns: columns,
4289
+ className: className,
4290
+ searchBarClassName: searchBarClassName,
4291
+ shadow: shadow,
4292
+ useModal: useModal,
4293
+ onTransactionClick: onTransactionClick,
4294
+ suppressTransactionDisplay: suppressTransactionDisplay,
4295
+ kindsToShow: kindsToShow,
4296
+ style: style,
4297
+ filter: filter,
4298
+ noTransactionsMessage: noTransactionsMessage,
4299
+ };
4300
+ return (jsx(QueryClientProvider, __assign({ client: queryClient }, { children: jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsWrapper, {}) })) })));
4301
+ }
4302
+ function TransactionsWrapper() {
4303
+ var _a = useContext(TransactionsListContext), kindsToShow = _a.kindsToShow, filterFromContext = _a.filter;
4265
4304
  var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
4266
4305
  // Local state
4267
4306
  var _c = useState(""), search = _c[0], setSearch = _c[1];
4268
- var _d = useState(null), selectedTransaction = _d[0], setSelectedTransaction = _d[1];
4269
- var _e = useState(false), drawerOpen = _e[0], setDrawerOpen = _e[1];
4270
- // Hooks
4271
- var isMobile = useIsMobile$1();
4272
- var filter = search
4273
- ? "filter: \"transaction.transactionableId is ".concat(search, "\"")
4274
- : "";
4307
+ var filter = filterFromContext ||
4308
+ (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
4275
4309
  // Queries
4276
4310
  var data = useQuery({
4277
4311
  queryKey: ["transactions", token, filter],
4278
4312
  queryFn: function () { return getTransactions(filter, token, subdomain, kindsToShow); },
4279
4313
  placeholderData: keepPreviousData,
4280
4314
  }).data;
4281
- var transactions = data;
4315
+ return (jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }));
4316
+ }
4317
+ function TransactionsDisplay(_a) {
4318
+ var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search, title = _a.title;
4319
+ 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;
4320
+ var columns = useContext(TransactionsListContext).columns;
4321
+ var darkMode = useContext(BunnyContext).darkMode;
4322
+ // Local state
4323
+ var _c = useState(null), selectedTransaction = _c[0], setSelectedTransaction = _c[1];
4324
+ var _d = useState(false), drawerOpen = _d[0], setDrawerOpen = _d[1];
4325
+ // Hooks
4326
+ var isMobile = useIsMobile$1();
4282
4327
  function handleTransactionClick(transaction) {
4283
- if (transaction.kind !== TransactionKind.INVOICE) {
4284
- return;
4285
- }
4286
4328
  if (onTransactionClick) {
4287
4329
  onTransactionClick(transaction);
4288
4330
  }
@@ -4320,59 +4362,31 @@ function ActualTransactions() {
4320
4362
  }
4321
4363
  return templateColumns.join(" ");
4322
4364
  };
4323
- return (jsxs("div", __assign({ style: style }, { children: [jsx(PageHeaderWithActions, __assign({ title: showTitle ? "Past transactions" : undefined }, { children: showSearchBar && (jsx("div", { children: jsx(Input
4324
- // className={
4325
- // searchBarClassName
4326
- // ? searchBarClassName
4327
- // : "border border-slate-200"
4328
- // }
4329
- , {
4330
- // className={
4331
- // searchBarClassName
4332
- // ? searchBarClassName
4333
- // : "border border-slate-200"
4334
- // }
4335
- onChange: function (e) {
4365
+ var drawerTitle = function () {
4366
+ if (!selectedTransaction)
4367
+ return "";
4368
+ var kind = selectedTransaction.kind.toLowerCase();
4369
+ return kind.charAt(0).toUpperCase() + kind.slice(1);
4370
+ };
4371
+ 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
4372
+ ? searchBarClassName
4373
+ : "border border-slate-200", onChange: function (e) {
4336
4374
  if (isNaN(Number(e.target.value))) {
4337
4375
  return;
4338
4376
  }
4339
- setSearch(e.target.value);
4377
+ onSearchValueChanged(e.target.value);
4340
4378
  }, prefix: jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
4341
4379
  minWidth: "300px",
4342
4380
  }, 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: {
4343
4381
  gridTemplateColumns: gridTemplateColumns(),
4382
+ backgroundColor: "var(--row-background".concat(darkMode ? "-dark" : "", ")"),
4344
4383
  } }, { children: isMobile ? (jsx(Fragment, { children: TransactionsListMobile({
4345
4384
  transactions: transactions,
4346
4385
  onTransactionClick: handleTransactionClick,
4347
4386
  }) })) : (jsx(Fragment, { children: TransactionsListDesktop({
4348
4387
  transactions: transactions,
4349
4388
  onTransactionClick: handleTransactionClick,
4350
- }) })) })) })), 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" })) })))] })));
4351
- }
4352
- // Create a client
4353
- var queryClient = new QueryClient();
4354
- function Transactions(_a) {
4355
- 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 ? [
4356
- TransactionKind.INVOICE,
4357
- TransactionKind.PAYMENT,
4358
- TransactionKind.REFUND,
4359
- TransactionKind.WRITE_OFF,
4360
- ] : _h, style = _a.style;
4361
- var contextValues = {
4362
- showSearchBar: showSearchBar,
4363
- showTitle: showTitle,
4364
- transactionComponent: transactionComponent,
4365
- columns: columns,
4366
- className: className,
4367
- searchBarClassName: searchBarClassName,
4368
- shadow: shadow,
4369
- useModal: useModal,
4370
- onTransactionClick: onTransactionClick,
4371
- suppressTransactionDisplay: suppressTransactionDisplay,
4372
- kindsToShow: kindsToShow,
4373
- style: style,
4374
- };
4375
- return (jsx(QueryClientProvider, __assign({ client: queryClient }, { children: jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(ActualTransactions, {}) })) })));
4389
+ }) })) })) })), 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 })] })] }))) })))] })));
4376
4390
  }
4377
4391
 
4378
4392
  var updatingChargeQuantityIdState = atom({
@@ -4735,7 +4749,7 @@ var getPlanChangeOptions = function (_a) {
4735
4749
  });
4736
4750
  };
4737
4751
 
4738
- var QUOTE_QUERY = function (id) { return "\n query quote {\n quote(id: ".concat(id, ") {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n amountsByPeriod {\n amount\n startDate\n }\n quoteChanges {\n currencyId\n id\n charges {\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n quantity\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
4752
+ var QUOTE_QUERY = function () { return "\n query quote($id: ID) {\n quote(id: $id) {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n amountsByPeriod {\n amount\n startDate\n }\n quoteChanges {\n currencyId\n id\n charges {\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n quantity\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"; };
4739
4753
  var getQuote = function (_a) {
4740
4754
  var id = _a.id, token = _a.token, subdomain = _a.subdomain;
4741
4755
  return __awaiter(void 0, void 0, void 0, function () {
@@ -4743,9 +4757,9 @@ var getQuote = function (_a) {
4743
4757
  return __generator(this, function (_b) {
4744
4758
  switch (_b.label) {
4745
4759
  case 0: return [4 /*yield*/, gqlRequest({
4746
- query: QUOTE_QUERY(id),
4760
+ query: QUOTE_QUERY(),
4747
4761
  token: token,
4748
- vars: {},
4762
+ vars: { id: id },
4749
4763
  subdomain: subdomain,
4750
4764
  })];
4751
4765
  case 1: