From 1d9ba3de6dd95573eafab02997819f0b4c14ea08 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 31 Mar 2025 16:52:59 +0200
Subject: [PATCH] ui: split services

---
 frontend/app/Tracker.ts                       |  3 ++
 .../app/components/Client/Billing/Billing.tsx |  3 ++
 frontend/app/components/Client/Client.tsx     | 11 +++++-
 .../Header/HealthStatus/HealthStatus.tsx      |  2 -
 .../SaasHeaderMenuItems.tsx                   |  3 ++
 frontend/app/layout/CrispIframe.tsx           |  3 ++
 frontend/app/layout/SupportModal.tsx          | 16 +-------
 frontend/app/layout/TopRight.tsx              |  4 +-
 frontend/app/routes.ts                        | 16 +-------
 frontend/app/services/BillingService.ts       | 38 +++++++++++++++++++
 frontend/app/services/SignalService.ts        |  9 +++++
 frontend/app/services/index.ts                |  8 ++++
 frontend/app/utils/routeUtils.ts              | 14 +++++++
 13 files changed, 96 insertions(+), 34 deletions(-)
 create mode 100644 frontend/app/Tracker.ts
 create mode 100644 frontend/app/components/Client/Billing/Billing.tsx
 create mode 100644 frontend/app/components/Header/SaasHeaderMenuItems/SaasHeaderMenuItems.tsx
 create mode 100644 frontend/app/layout/CrispIframe.tsx
 create mode 100644 frontend/app/services/BillingService.ts
 create mode 100644 frontend/app/services/SignalService.ts
 create mode 100644 frontend/app/utils/routeUtils.ts

diff --git a/frontend/app/Tracker.ts b/frontend/app/Tracker.ts
new file mode 100644
index 000000000..5c2c71147
--- /dev/null
+++ b/frontend/app/Tracker.ts
@@ -0,0 +1,3 @@
+export default function Tracker() {
+  return null;
+}
diff --git a/frontend/app/components/Client/Billing/Billing.tsx b/frontend/app/components/Client/Billing/Billing.tsx
new file mode 100644
index 000000000..576038aff
--- /dev/null
+++ b/frontend/app/components/Client/Billing/Billing.tsx
@@ -0,0 +1,3 @@
+export default function Billing() {
+  return null;
+}
\ No newline at end of file
diff --git a/frontend/app/components/Client/Client.tsx b/frontend/app/components/Client/Client.tsx
index e24cf9f91..f3a714f28 100644
--- a/frontend/app/components/Client/Client.tsx
+++ b/frontend/app/components/Client/Client.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { Switch, Route, Redirect } from 'react-router';
-import { CLIENT_TABS, client as clientRoute } from 'App/routes';
+import { client as clientRoute } from 'App/routes';
+import { CLIENT_TABS } from 'App/utils/routeUtils';
 import { PANEL_SIZES } from 'App/constants/panelSizes'
 
 import SessionsListingSettings from 'Components/Client/SessionsListingSettings';
@@ -10,7 +11,7 @@ import ProfileSettings from './ProfileSettings';
 import Integrations from './Integrations';
 import UserView from './Users/UsersView';
 import AuditView from './Audit/AuditView';
-import Sites from './Sites';
+import Billing from './Billing/Billing';
 import Projects from './Projects';
 import CustomFields from './CustomFields';
 import Webhooks from './Webhooks';
@@ -65,6 +66,12 @@ export default class Client extends React.PureComponent {
         path={clientRoute(CLIENT_TABS.CUSTOM_FIELDS)}
         component={CustomFields}
       />
+      <Route
+        exact
+        strict
+        path={clientRoute(CLIENT_TABS.BILLING)}
+        component={Billing}
+      />
       <Route
         exact
         strict
diff --git a/frontend/app/components/Header/HealthStatus/HealthStatus.tsx b/frontend/app/components/Header/HealthStatus/HealthStatus.tsx
index 08fd3c892..9b9d53b63 100644
--- a/frontend/app/components/Header/HealthStatus/HealthStatus.tsx
+++ b/frontend/app/components/Header/HealthStatus/HealthStatus.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import { Icon } from 'UI';
 import HealthModal from 'Components/Header/HealthStatus/HealthModal/HealthModal';
 import HealthWidget from 'Components/Header/HealthStatus/HealthWidget';
-import UserMenu from 'Components/Header/UserMenu/UserMenu';
 import { Popover, Button } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { getHealthRequest } from './getHealth';
diff --git a/frontend/app/components/Header/SaasHeaderMenuItems/SaasHeaderMenuItems.tsx b/frontend/app/components/Header/SaasHeaderMenuItems/SaasHeaderMenuItems.tsx
new file mode 100644
index 000000000..e49ba983d
--- /dev/null
+++ b/frontend/app/components/Header/SaasHeaderMenuItems/SaasHeaderMenuItems.tsx
@@ -0,0 +1,3 @@
+export default function SaasHeaderMenuItems() {
+  return null;
+}
diff --git a/frontend/app/layout/CrispIframe.tsx b/frontend/app/layout/CrispIframe.tsx
new file mode 100644
index 000000000..4b4b5baf3
--- /dev/null
+++ b/frontend/app/layout/CrispIframe.tsx
@@ -0,0 +1,3 @@
+export default function CrispIframe({ WEBSITE_ID }: { WEBSITE_ID?: string }) {
+  return null;
+}
diff --git a/frontend/app/layout/SupportModal.tsx b/frontend/app/layout/SupportModal.tsx
index c6013e3dd..76c419381 100644
--- a/frontend/app/layout/SupportModal.tsx
+++ b/frontend/app/layout/SupportModal.tsx
@@ -2,7 +2,7 @@ import { ArrowRightOutlined } from '@ant-design/icons';
 import { Button, Drawer, Space, Typography } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
+import CrispIframe from './CrispIframe';
 import { Icon } from 'UI';
 
 const { Text } = Typography;
@@ -126,19 +126,7 @@ function SupportModal(props: Props) {
           </div>
         </div>
 
-        {!!WEBSITE_ID && (
-          <div className="flex rounded border w-full">
-            <iframe
-              src={`https://go.crisp.chat/chat/embed/?website_id=${WEBSITE_ID}`}
-              style={{
-                height: '415px',
-                margin: '0',
-                padding: '0',
-                width: '100%',
-              }}
-            />
-          </div>
-        )}
+        <CrispIframe WEBSITE_ID={WEBSITE_ID} />
       </div>
     </Drawer>
   );
diff --git a/frontend/app/layout/TopRight.tsx b/frontend/app/layout/TopRight.tsx
index 34fb83fcc..4e2450a88 100644
--- a/frontend/app/layout/TopRight.tsx
+++ b/frontend/app/layout/TopRight.tsx
@@ -4,8 +4,7 @@ import { getInitials } from 'App/utils';
 import Notifications from 'Components/Alerts/Notifications/Notifications';
 import HealthStatus from 'Components/Header/HealthStatus';
 import UserMenu from 'Components/Header/UserMenu/UserMenu';
-import LanguageSwitcher from 'Components/LanguageSwitcher/LanguageSwitcher';
-
+import SaasHeaderMenuItems from 'Components/Header/SaasHeaderMenuItems/SaasHeaderMenuItems';
 import GettingStartedProgress from 'Shared/GettingStarted/GettingStartedProgress';
 import ProjectDropdown from 'Shared/ProjectDropdown';
 import { useStore } from 'App/mstore';
@@ -20,6 +19,7 @@ function TopRight() {
     <Space style={{ lineHeight: '0' }}>
       {spotOnly ? null : (
         <>
+          <SaasHeaderMenuItems />
           <ProjectDropdown />
           <GettingStartedProgress />
 
diff --git a/frontend/app/routes.ts b/frontend/app/routes.ts
index 2ffd1c279..ad29a496f 100644
--- a/frontend/app/routes.ts
+++ b/frontend/app/routes.ts
@@ -1,3 +1,5 @@
+import { CLIENT_TABS } from './utils/routeUtils'
+
 const hashed = (path: string, hash?: string | number): string => {
   if ((typeof hash === 'string' && hash !== '') || typeof hash === 'number') {
     return `${path}#${hash}`;
@@ -77,20 +79,6 @@ export const signup = (): string => '/signup';
 
 export const forgotPassword = (): string => '/reset-password';
 
-export const CLIENT_TABS = {
-  INTEGRATIONS: 'integrations',
-  PROFILE: 'account',
-  SESSIONS_LISTING: 'sessions-listing',
-  MANAGE_USERS: 'team',
-  MANAGE_ROLES: 'roles',
-  SITES: 'projects',
-  CUSTOM_FIELDS: 'metadata',
-  WEBHOOKS: 'webhooks',
-  NOTIFICATIONS: 'notifications',
-  AUDIT: 'audit',
-  BILLING: 'billing',
-  MODULES: 'modules',
-};
 export const CLIENT_DEFAULT_TAB = CLIENT_TABS.PROFILE;
 const routerClientTabString = `:activeTab(${Object.values(CLIENT_TABS).join('|')})`;
 export const client = (tab = routerClientTabString): string => `/client/${tab}`;
diff --git a/frontend/app/services/BillingService.ts b/frontend/app/services/BillingService.ts
new file mode 100644
index 000000000..26a1bb1ef
--- /dev/null
+++ b/frontend/app/services/BillingService.ts
@@ -0,0 +1,38 @@
+export default class BillingService {
+  initClient(arg: any) {
+    return;
+  }
+
+  fetchPlan = async () => {
+    return Promise.resolve()
+  }
+
+  fetchInvoices = async (period: {
+    startTimestamp: number,
+    endTimestamp: number,
+    limit: number,
+    page: number,
+  }) => {
+    return Promise.resolve()
+  }
+
+  upgradePlan = async (instance: any) => {
+    return Promise.resolve()
+  }
+
+  updatePlan = async (instance: any) => {
+    return Promise.resolve()
+  }
+
+  cancelPlan = async () => {
+    return Promise.resolve()
+  }
+
+  enablePlan = async () => {
+    return Promise.resolve()
+  }
+
+  getOnboard = async () => {
+    return Promise.resolve()
+  }
+}
diff --git a/frontend/app/services/SignalService.ts b/frontend/app/services/SignalService.ts
new file mode 100644
index 000000000..b5a54d560
--- /dev/null
+++ b/frontend/app/services/SignalService.ts
@@ -0,0 +1,9 @@
+export default class SignalService {
+  initClient(arg: any) {
+    return;
+  }
+
+  send(...args: any[]): Promise<any> {
+    return Promise.resolve()
+  }
+}
diff --git a/frontend/app/services/index.ts b/frontend/app/services/index.ts
index 10c2ded87..925bec403 100644
--- a/frontend/app/services/index.ts
+++ b/frontend/app/services/index.ts
@@ -18,6 +18,7 @@ import SessionService from './SessionService';
 import UserService from './UserService';
 import UxtestingService from './UxtestingService';
 import WebhookService from './WebhookService';
+
 import SpotService from './spotService';
 import LoginService from './loginService';
 import FilterService from './FilterService';
@@ -26,6 +27,8 @@ import CustomFieldService from './CustomFieldService';
 import IntegrationsService from './IntegrationsService';
 import ProjectsService from './ProjectsService';
 import KaiService from '@/components/Kai/KaiService';
+import SignalService from './SignalService';
+import BillingService from '@/services/BillingService';
 
 export const dashboardService = new DashboardService();
 export const metricService = new MetricService();
@@ -39,6 +42,8 @@ export const recordingsService = new RecordingsService();
 export const configService = new ConfigService();
 export const alertsService = new AlertsService();
 export const webhookService = new WebhookService();
+export const signalService = new SignalService();
+
 export const healthService = new HealthService();
 export const fflagsService = new FFlagsService();
 export const assistStatsService = new AssistStatsService();
@@ -54,6 +59,7 @@ export const integrationsService = new IntegrationsService();
 export const searchService = new SearchService();
 export const projectsService = new ProjectsService();
 export const kaiService = new KaiService();
+export const billingService = new BillingService();
 
 export const services = [
   projectsService,
@@ -69,6 +75,7 @@ export const services = [
   configService,
   alertsService,
   webhookService,
+  signalService,
   healthService,
   fflagsService,
   assistStatsService,
@@ -83,4 +90,5 @@ export const services = [
   integrationsService,
   searchService,
   kaiService,
+  billingService,
 ];
diff --git a/frontend/app/utils/routeUtils.ts b/frontend/app/utils/routeUtils.ts
new file mode 100644
index 000000000..4cc46785f
--- /dev/null
+++ b/frontend/app/utils/routeUtils.ts
@@ -0,0 +1,14 @@
+export const CLIENT_TABS = {
+  INTEGRATIONS: 'integrations',
+  PROFILE: 'account',
+  SESSIONS_LISTING: 'sessions-listing',
+  MANAGE_USERS: 'team',
+  MANAGE_ROLES: 'roles',
+  SITES: 'projects',
+  CUSTOM_FIELDS: 'metadata',
+  WEBHOOKS: 'webhooks',
+  NOTIFICATIONS: 'notifications',
+  AUDIT: 'audit',
+  BILLING: '$_this_url_does_not_exist',
+  MODULES: 'modules',
+};