diff --git a/apps/frontend-snippet/package.json b/apps/frontend-snippet/package.json
index 2b0b6a9b6..a920a38af 100644
--- a/apps/frontend-snippet/package.json
+++ b/apps/frontend-snippet/package.json
@@ -18,7 +18,8 @@
"react-dom": "^18.2.0",
"react-loader-spinner": "^5.4.5",
"tailwind-scrollbar-hide": "^1.1.7",
- "uuid": "^9.0.1"
+ "uuid": "^9.0.1",
+ "shared-types": "workspace:*"
},
"devDependencies": {
"@types/react": "^18.2.15",
diff --git a/apps/frontend-snippet/src/helpers/utils.ts b/apps/frontend-snippet/src/helpers/utils.ts
index 5b8671510..e549ef629 100644
--- a/apps/frontend-snippet/src/helpers/utils.ts
+++ b/apps/frontend-snippet/src/helpers/utils.ts
@@ -1,19 +1,3 @@
-export enum CRM_PROVIDERS {
- ZOHO = 'zoho',
- ZENDESK = 'zendesk',
- HUBSPOT = 'hubspot',
- PIPEDRIVE = 'pipedrive',
- FRESHSALES = 'freshsales',
-}
-
-export enum ACCOUNTING_PROVIDERS {
- PENNYLANE = 'pennylane',
- FRESHBOOKS = 'freshbooks',
- CLEARBOOKS = 'clearbooks',
- FREEAGENT = 'freeagent',
- SAGE = 'sage',
-}
-
type ProviderConfig = {
clientId: string;
scopes: string;
diff --git a/apps/frontend-snippet/src/lib/ProviderModal.tsx b/apps/frontend-snippet/src/lib/ProviderModal.tsx
index 747e94940..092f2cf37 100644
--- a/apps/frontend-snippet/src/lib/ProviderModal.tsx
+++ b/apps/frontend-snippet/src/lib/ProviderModal.tsx
@@ -2,9 +2,7 @@ import { useEffect, useState } from 'react';
import { TailSpin } from 'react-loader-spinner'
import useOAuth from '../hooks/useOAuth';
import { findProviderByName, providersArray } from '../helpers/utils';
-
-const categories = ['CRM', 'Ticketing', 'Marketing Automation','ATS', 'Accounting', 'File Storage', 'HR & Payroll'];
-
+import {categoriesVerticals} from 'shared-types';
const LoadingOverlay = ({ providerName }: { providerName: string }) => {
const provider = findProviderByName(providerName);
@@ -35,7 +33,7 @@ const LoadingOverlay = ({ providerName }: { providerName: string }) => {
};
const ProviderModal = () => {
- const [selectedCategory, setSelectedCategory] = useState(categories[0]); // Default to the first category
+ const [selectedCategory, setSelectedCategory] = useState(categoriesVerticals[0] as string); // Default to the first category
const [selectedProvider, setSelectedProvider] = useState('');
const [loading, setLoading] = useState<{
status: boolean; provider: string
@@ -104,7 +102,7 @@ const ProviderModal = () => {
{!loading.status ?
- {categories.map((category, index) => (
+ {categoriesVerticals.map((category, index) => (