Merge branch 'feat/front-fix'

panoratech · Nov 26, 2023 · af9b86c · af9b86c
2 parents a002c9c + b792e6e
commit af9b86c
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 212 deletions.
diff --git a/packages/frontend-snippet/src/App.tsx b/packages/frontend-snippet/src/App.tsx
@@ -1,64 +1,11 @@
-import { useState } from 'react';
 import './App.css'
-import useOAuth from './hooks/useOAuth';
-import ProviderModal from './lib/ProviderModal';
-import { CRM_PROVIDERS } from './helpers/utils';
-import WalletModal from './components/newCatalogue';
+import ProviderModal from './lib/ProviderModal'
 
 function App() {
-  /*const [isModalOpen, setIsModalOpen] = useState(false);
-  const [providerId, setProviderId] = useState("");
-  const [returnUrl, setReturnUrl] = useState("http://127.0.0.1:5173/");
-  const [projectId, setPojectId] = useState("1");
-  const [userId, setUserId] = useState("1");
-
-  const { open, isReady } = useOAuth({
-    //clientId: CLIENT_ID!, not needed as we manage it for now
-    providerName: providerId,
-    returnUrl: returnUrl, //CLIENT WOULD PROVIDER IT
-    projectId: projectId, 
-    linkedUserId: userId, //CLIENT WOULD PROVIDER IT
-    onSuccess: () => console.log('OAuth successful')
-  });
-  const handleProviderSelection = (providerName: string) => {
-    console.log(`Selected provider: ${providerName}`);
-    switch (providerName) {
-      case CRM_PROVIDERS.HUBSPOT:
-        setProviderId("hubspot");
-        //TODO: handle scopes 
-        break;
-
-      case CRM_PROVIDERS.PIPEDRIVE:
-        setProviderId("pipedrive");
-        //TODO: handle scopes 
-        break;
-
-      case CRM_PROVIDERS.ZENDESK:
-        setProviderId("zendesk");
-        //TODO: handle scopes 
-        break;
-
-      case CRM_PROVIDERS.ZOHO:
-        setProviderId("zoho");
-        //TODO: handle scopes 
-        break;
-
-      case CRM_PROVIDERS.FRESHSALES:
-        setProviderId("freshsales");
-        //TODO: handle scopes 
-        break;
-
-      default:
-        break;
-
-    }
-    open();
-    setIsModalOpen(false);
-  };*/
   return (
     <>
       <div className="card">
-        <WalletModal/>
+        <ProviderModal/>
       </div>
     </>
   )

diff --git a/packages/frontend-snippet/src/components/newCatalogue/index.tsx b/packages/frontend-snippet/src/components/newCatalogue/index.tsx
diff --git a/packages/frontend-snippet/src/helpers/utils.ts b/packages/frontend-snippet/src/helpers/utils.ts
@@ -109,6 +109,9 @@ type Provider = {
 };
 
 export function providersArray(vertical: string): Provider[] {
+  if(!providersConfig[vertical]){
+    return [];
+  }
   return Object.entries(providersConfig[vertical]).map(([providerName, config]) => {
     return {
       name: providerName,

diff --git a/packages/frontend-snippet/src/lib/ProviderModal.tsx b/packages/frontend-snippet/src/lib/ProviderModal.tsx
@@ -1,36 +1,125 @@
-import { providersArray } from "../helpers/utils";
+import React, { useEffect, useState } from 'react';
+import { TailSpin } from  'react-loader-spinner'
+import useOAuth from '../hooks/useOAuth';
+import { findProviderByName, providersArray } from '../helpers/utils';
 
-// Assuming you have these types defined
-type ProviderModalProps = {
-  isOpen: boolean;
-  onSelectProvider: (providerName: string) => void;
-  onClose: () => void;
+const categories = ['CRM', 'Ticketing', 'Marketing Automation','ATS', 'Accounting', 'File Storage', 'HR & Payroll'];
+
+
+const LoadingOverlay = ({ providerName }: { providerName: string }) => {
+
+    const provider = findProviderByName(providerName);
+    return (
+      <div className="fixed inset-0 flex justify-center items-center">
+        <div className="text-center p-6 bg-[#1d1d1d] rounded-lg">
+          <div className='icon-wrapper'>
+            <img src={provider!.logoPath} alt={provider!.name} className="mx-auto mb-4 w-14 h-14 rounded-xl" />
+          </div>
+
+          <h4 className="text-lg font-bold mb-2">Continue in {provider!.name}</h4>
+          <p className="text-gray-400 mb-4">Accepting oAuth access to Panora</p>
+          <div className='flex justify-center items-center'>
+          <TailSpin
+            height="40"
+            width="40"
+            color="white"
+            ariaLabel="tail-spin-loading"
+            radius="1"
+            wrapperStyle={{}}
+            wrapperClass=""
+            visible={true}
+           />
+           </div>
+        </div>
+      </div>
+    );
 };
 
-const ProviderModal = ({ isOpen, onSelectProvider, onClose }: ProviderModalProps) => {
-  if (!isOpen) {console.log("null modal"); return null}
-  const PROVIDERS = providersArray('CRM');
+const ProviderModal = () => {
+  const [selectedCategory, setSelectedCategory] = useState(categories[0]); // Default to the first category
+  const [selectedProvider, setSelectedProvider] = useState('');
+  const [loading, setLoading] = useState<{
+    status: boolean; provider: string
+  }>({status: false, provider: ''});
+
+  const { open, isReady } = useOAuth({
+    providerName: selectedProvider, // This will be set when a provider is clicked
+    returnUrl: 'http://127.0.0.1:5173/', // Replace with the actual return URL
+    projectId: '1', // Replace with the actual project ID
+    linkedUserId: '1', // Replace with the actual user ID
+    onSuccess: () => console.log('OAuth successful'),
+  });
+
+  const onWindowClose = () => {
+    setSelectedProvider('');
+    setLoading({
+        status: false,
+        provider: ''
+    })
+  }
+
+  useEffect(() => {
+    if (selectedProvider && isReady) {
+        open(onWindowClose);
+    }
+
+  }, [selectedProvider, isReady, open]);
+
+  const handleWalletClick = (walletName: string) => {
+    console.log(`Wallet selected: ${walletName}`);
+    setSelectedProvider(walletName.toLowerCase());
+    setLoading({status: true, provider: walletName});
+  };
+
+  const handleCategoryClick = (category: string) => {    
+    setSelectedCategory(category);
+  };
+
+  const PROVIDERS = providersArray(selectedCategory);
+
+
   return (
-    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center">
-      <div className="bg-zinc-800 rounded-lg shadow-lg p-5" style={{ width: '80%', maxWidth: '600px' }}>
-        <div className="flex justify-between items-center mb-4">
-          <h6 className="text-xl font-bold">Select CRM Provider</h6>
-          <button onClick={onClose}>X</button>
-        </div>
-        <div className="grid grid-cols-3 gap-4">
-          {PROVIDERS.map(provider => (
-            <button
-              key={provider.name}
-              onClick={() => onSelectProvider(provider.name)}
-              className="aspect-w-1 aspect-h-1 border border-gray-200 rounded-lg flex justify-center items-center hover:shadow-md"
-            >
-              <div className="flex flex-col items-center justify-center p-3">
-                <img src={provider.logoPath} alt={provider.name} className="w-auto rounded-xl" />
-                <span className="mt-2">{provider.name.toUpperCase()}</span>
-              </div>
-            </button>
-          ))}
-        </div>
+    <div className="fixed inset-0 flex justify-center items-center">
+      <div className="w-[26rem] rounded-3xl bg-[#1d1d1d] text-white">
+        {!loading.status && <div className="flex justify-between items-center border-b border-gray-600 p-4">
+          <h3 className="text-lg font-medium">Select Integrations</h3>
+          <button className="text-gray-400 hover:text-white transition duration-150">&times;</button>
+        </div>}
+        {!loading.status ? 
+            <div className="p-4 max-h-[32rem] overflow-auto scrollbar-hide">
+                <div className="flex mb-4 outline-none flex-wrap">
+                    {categories.map((category, index) => (
+                    <button
+                        key={index}
+                        className={`px-3 py-1 mb-2 mr-1 rounded-full text-xs font-medium transition duration-150 ${selectedCategory === category ? 'bg-indigo-600 hover:bg-indigo-500	' : 'bg-neutral-700 hover:bg-neutral-600'}`}
+                        onClick={() => handleCategoryClick(category)}
+                    >
+                        {category}
+                    </button>
+                    ))}
+                </div>
+                {(
+                    <>
+                    {PROVIDERS.map((provider, index) => (
+                        <div
+                        key={index}
+                        className="flex items-center justify-between px-4 py-2 my-2 bg-neutral-900 hover:bg-neutral-800 border-black  hover:border-indigo-800 rounded-xl transition duration-150 cursor-pointer"
+                        onClick={() => handleWalletClick(provider.name)}
+                        >
+                        <div className="flex items-center">
+                        <img className="w-8 h-8 rounded-lg mr-3" src={provider.logoPath} alt={provider.name} />
+                            <span>{provider.name.substring(0,1).toUpperCase().concat(provider.name.substring(1,provider.name.length))}</span>
+                        </div>
+
+                        </div>
+                    ))}
+
+                    </>
+                )}
+            </div>
+            :
+            <LoadingOverlay providerName={loading.provider}/>
+        }
       </div>
     </div>
   );