✨ Making the catalog for embedded in tegration connections

apps/embedded-catalog/react/.env.example

@@ -0,0 +1 @@
+VITE_BACKEND_DOMAIN="http://localhost:3000"

apps/embedded-catalog/package.json → apps/embedded-catalog/react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "embedded-catalog",
+  "name": "react",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -10,18 +10,24 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.12.2",
+    "api": "workspace:*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-loader-spinner": "^5.4.5"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"
   }

apps/embedded-catalog/react/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/embedded-catalog/react/src/App.tsx

@@ -0,0 +1,21 @@
+import './App.css'
+import ProviderCard from './lib'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+
+function App() {
+  const queryClient = new QueryClient();
+  return (
+    <>
+      <QueryClientProvider client={queryClient}>
+      <div>
+        <h1 className="text-sm">
+          <ProviderCard name={"Hubspot"} projectId={"1"} linkedUserIdOrRemoteUserInfo={"1"}  />
+        </h1>
+      </div>
+      </QueryClientProvider>
+    </>
+  )
+}
+
+export default App

apps/embedded-catalog/react/src/helpers/config.ts

@@ -0,0 +1,7 @@
+const config = {
+    API_URL: import.meta.env.VITE_BACKEND_DOMAIN,
+    ML_FRONTEND_URL: import.meta.env.VITE_ML_FRONTEND_URL
+};
+
+export default config;
+

apps/embedded-catalog/react/src/helpers/utils.ts

@@ -0,0 +1,180 @@
+type ProviderConfig = {
+  clientId: string;
+  scopes: string;
+  authBaseUrl: string;
+  logoPath: string;
+  description: string;
+};
+
+type VerticalConfig = {
+  [key: string]: ProviderConfig;
+};
+
+type ProvidersConfig = {
+  [vertical: string]: VerticalConfig;
+};
+
+
+export const providersConfig: ProvidersConfig = {
+  'CRM': {
+    'hubspot': {
+      clientId: 'ba591170-a7c7-4fca-8086-1bd178c6b14d',
+      scopes: 'crm.objects.contacts.read crm.objects.contacts.write crm.schemas.deals.read crm.schemas.deals.write crm.objects.deals.read crm.objects.deals.write crm.objects.companies.read crm.objects.companies.write crm.objects.owners.read settings.users.read settings.users.write settings.users.teams.read settings.users.teams.write',
+      authBaseUrl: 'https://app-eu1.hubspot.com/oauth/authorize',
+      logoPath: './assets/crm/hubspot_logo.png',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+    },
+    'zoho': {
+      clientId: '1000.CWBWAO0XK6QNROXMA2Y0RUZYMGJIGT',
+      scopes: 'ZohoCRM.modules.ALL',
+      authBaseUrl: 'https://accounts.zoho.eu/oauth/v2/auth',
+      logoPath: 'assets/crm/zoho_logo.png',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+
+    },
+    'pipedrive': {
+      clientId: '8a60094f9108f085',
+      scopes: 'Pipedrive_Scope',
+      authBaseUrl: 'https://oauth.pipedrive.com/oauth/authorize',
+      logoPath: 'assets/crm/pipedrive_logo.jpeg',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+
+    },
+    //TODO
+    'freshsales': {
+      clientId: 'Pipedrive_Client_Id',
+      scopes: 'Pipedrive_Scope',
+      authBaseUrl: '',
+      logoPath: 'assets/crm/freshsales_logo.webp',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+
+    },
+    'zendesk': {
+      clientId: 'fbb3125a89f366daf02c09f201522245c4453c1310f07ec2223c614fac130c78',
+      scopes: 'read write',
+      authBaseUrl: 'https://api.getbase.com/oauth2/authorize',
+      logoPath: 'assets/crm/zendesk_logo.png',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+
+    },
+
+  },
+  'Ticketing': {
+    'front': {
+      clientId: '5f1d8d963c77285f339a',
+      scopes: '',
+      authBaseUrl: 'https://app.frontapp.com/oauth/authorize',
+      logoPath: 'assets/ticketing/front.png',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+
+    },
+    'zendesk_tcg': {
+      clientId: 'panora_bbb',
+      scopes: 'read write',
+      authBaseUrl: 'https://panora7548.zendesk.com/oauth/authorizations/new',
+      logoPath: 'assets/crm/zendesk_logo.png',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+
+    },
+  },
+  'Accounting': {
+    'pennylane': {
+      clientId: '',
+      scopes: '',
+      authBaseUrl: '',
+      logoPath: './assets/accounting/pennylanelogo.png',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+
+    },
+    'freshbooks': {
+      clientId: '',
+      scopes: '',
+      authBaseUrl: '',
+      logoPath: './assets/accounting/freshbooks.jpeg',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+
+    },
+    'clearbooks': {
+      clientId: '',
+      scopes: '',
+      authBaseUrl: '',
+      logoPath: './assets/accounting/clearbooksLogo.png',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+
+    },
+    'freeAgent': {
+      clientId: '',
+      scopes: '',
+      authBaseUrl: '',
+      logoPath: './assets/accounting/freeagent.png',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+
+    },
+    'sage': {
+      clientId: '',
+      scopes: '',
+      authBaseUrl: '',
+      logoPath: './assets/accounting/sageLogo.png',
+      description: "Sync & Create contacts, deals, companies, notes, engagements, stages, tasks and users"
+
+    },
+  }
+};
+
+export function getDescription(name: string){
+  const vertical = findProviderVertical(name);
+  if(vertical== null){
+    return null;
+  }
+  return providersConfig[vertical][name].description;
+}
+
+type Provider = {
+  name: string;
+  clientId: string;
+  scopes: string;
+  authBaseUrl: string;
+  logoPath: string;
+  description?: string;
+};
+
+export function providersArray(vertical: string): Provider[] {
+  if(!providersConfig[vertical]){
+    return [];
+  }
+  return Object.entries(providersConfig[vertical]).map(([providerName, config]) => {
+    return {
+      name: providerName,
+      clientId: config.clientId,
+      scopes: config.scopes,
+      authBaseUrl: config.authBaseUrl,
+      logoPath: config.logoPath,
+    };
+  });
+}
+
+export const findProviderVertical = (providerName: string): string | null => {
+  for (const [vertical, providers] of Object.entries(providersConfig)) {
+    if (providers.hasOwnProperty.call(providers, providerName)) {
+      return vertical;
+    }
+  }
+  return null;
+};
+
+export function findProviderByName(providerName: string): Provider | null {
+  for (const vertical in providersConfig) {
+    if (providersConfig.hasOwnProperty.call(providersConfig, vertical)) {
+      const providers = providersConfig[vertical];
+      if (providers.hasOwnProperty.call(providers, providerName)) {
+        const providerDetails = providers[providerName];
+        return {
+          name: providerName,
+          ...providerDetails,
+        };
+      }
+    }
+  }
+  return null;
+}
+

apps/embedded-catalog/react/src/hooks/mutations/useLinkedUserMutation.tsx

@@ -0,0 +1,40 @@
+import config from '@/helpers/config';
+import { useMutation } from '@tanstack/react-query';
+interface ICreateTargetFieldDto {
+    linked_user_origin_id: string;
+    alias: string;
+    id_project: string;
+}
+const useLinkedUserMutation = () => {
+    const addLinkedUser = async (linkedUserData: ICreateTargetFieldDto) => {
+        const response = await fetch(`${config.API_URL}/linked-users/create`, {
+            method: 'POST',
+            body: JSON.stringify(linkedUserData),
+            headers: {
+            'Content-Type': 'application/json',
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to add linked user');
+        }
+
+        return response.json();
+    };
+    return useMutation({
+        mutationFn: addLinkedUser,
+        onMutate: () => {
+            console.log('Adding linked user...');
+        },
+        onError: (error) => {
+            console.log(`Error: ${error}`);
+        },
+        onSuccess: () => {
+            console.log('Linked user added successfully!');
+        },
+        onSettled: () => {
+        },
+    });
+};
+
+export default useLinkedUserMutation;

apps/embedded-catalog/react/src/hooks/queries/useLinkedUserId.tsx

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { linked_users as LinkedUser } from 'api';
+import config from '@/helpers/config';
+
+const useLinkedUser = (originId: string) => {
+  return useQuery({
+    queryKey: ['linked-users', originId], 
+    queryFn: async (): Promise<LinkedUser> => {
+      const response = await fetch(`${config.API_URL}/linked-users/single?originId=${originId}`);
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+    }
+  });
+};
+export default useLinkedUser;

apps/embedded-catalog/react/src/hooks/useOAuth.tsx

@@ -0,0 +1,83 @@
+import { useState, useEffect } from 'react';
+import { findProviderVertical, providersConfig } from '@/helpers/utils';
+import config from '@/helpers/config';
+
+type UseOAuthProps = {
+  clientId?: string;
+  providerName: string;           // Name of the OAuth provider
+  returnUrl: string;              // Return URL after OAuth flow
+  projectId: string | undefined;              // Project ID
+  linkedUserId: string | undefined;           // Linked User ID
+  onSuccess: () => void;
+};
+
+
+const useOAuth = ({ providerName, returnUrl, projectId, linkedUserId, onSuccess }: UseOAuthProps) => {
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    // Perform any setup logic here
+    setTimeout(() => setIsReady(true), 1000); // Simulating async operation
+  }, []);
+
+  const constructAuthUrl = () => {
+    const encodedRedirectUrl = encodeURIComponent(`${config.API_URL}/connections/oauth/callback`);
+    const state = encodeURIComponent(JSON.stringify({ projectId, linkedUserId, providerName, returnUrl }));
+
+    const vertical = findProviderVertical(providerName);
+    if(vertical == null) {
+      return null;
+    }
+
+    const config_ = providersConfig[vertical][providerName];
+    if (!config_) {
+      throw new Error(`Unsupported provider: ${providerName}`);
+    }
+
+    const { clientId, scopes } = config_;
+
+    const baseUrl = config_.authBaseUrl;
+    if (!baseUrl) {
+      throw new Error(`Unsupported provider: ${providerName}`);
+    }
+    const addScope = providerName == "pipedrive" ? false : true;
+    let finalAuth = '';
+    if ( providerName == 'zoho' ) {
+      finalAuth = `${baseUrl}?response_type=code&client_id=${encodeURIComponent(clientId)}&scope=${encodeURIComponent(scopes)}&redirect_uri=${encodedRedirectUrl}&access_type=offline&state=${state}`
+      console.log(finalAuth);
+    } else if(providerName == "zendesk"){
+      finalAuth = `${baseUrl}?client_id=${encodeURIComponent(clientId)}&response_type=code&redirect_uri=${encodedRedirectUrl}&state=${state}`
+    } else if(providerName == "zendesk_tcg" ||  providerName=="front") {
+      finalAuth = `${baseUrl}?client_id=${encodeURIComponent(clientId)}&response_type=code&redirect_uri=${encodedRedirectUrl}&scope=${encodeURIComponent(scopes)}&state=${state}`
+    }else{ 
+      finalAuth = addScope ? 
+      `${baseUrl}?client_id=${encodeURIComponent(clientId)}&redirect_uri=${encodedRedirectUrl}&scope=${encodeURIComponent(scopes)}&state=${state}`
+      : `${baseUrl}?client_id=${encodeURIComponent(clientId)}&redirect_uri=${encodedRedirectUrl}&state=${state}`;
+    }
+    return finalAuth;
+  };
+
+  const openModal = (onWindowClose: () => void) => {
+    const authUrl = constructAuthUrl();
+    const width = 600, height = 600;
+    const left = (window.innerWidth - width) / 2;
+    const top = (window.innerHeight - height) / 2;
+    const authWindow = window.open(authUrl as string, 'OAuth', `width=${width},height=${height},top=${top},left=${left}`);
+
+    const interval = setInterval(() => {
+      if (authWindow!.closed) {
+        clearInterval(interval);
+        if (onWindowClose) {
+          onWindowClose();
+        }
+        onSuccess();
+      }
+    }, 500);
+
+    return authWindow;
+  };
+
+  return { open: openModal, isReady };
+};
+
+export default useOAuth;