From 639053679ffe1c45c851dcaa865f79fba1a7ddf0 Mon Sep 17 00:00:00 2001
From: mit-27 <meetsuthar64@gmail.com>
Date: Tue, 21 May 2024 02:19:30 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Fix=20UI=20of=20Dynamic=20integr?=
 =?UTF-8?q?ations=20Catalog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/PanoraDynamicCatalog.tsx   | 189 +++++++++++-------
 apps/embedded-catalog/react/src/global.css    |  36 ++++
 2 files changed, 148 insertions(+), 77 deletions(-)

diff --git a/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx b/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx
index 14214565f..2e12cdf67 100644
--- a/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx
+++ b/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx
@@ -1,6 +1,7 @@
 import React,{useState,useEffect} from 'react'
 import {findProviderByName, providersArray,categoriesVerticals,getLogoURL} from '@panora/shared';
 import useOAuth from '@/hooks/useOAuth';
+import config from '@/helpers/config';
 
 interface DynamicCardProp {
   projectId: string;
@@ -12,11 +13,12 @@ interface DynamicCardProp {
 
 type DataState = { [key: string]: string[] };
 
-const MainCatalog = ({projectId,returnUrl,linkedUserId,optionalApiUrl} : DynamicCardProp) => {
+const DynamicCatalog = ({projectId,returnUrl,linkedUserId,optionalApiUrl} : DynamicCardProp) => {
 
-  const [selectedVertical, setselectedVertical] = useState(''); // Default to the first category
+  const [selectedVertical, setSelectedVertical] = useState(''); // Default to the first category
   const [selectedProvider, setSelectedProvider] = useState('');
-  const [data,setData] = useState<DataState>({})
+  const [data,setData] = useState<DataState>({});
+  const [isLoading,setLoading] = useState(true);
   const [error,setError] = useState(false)
 
   const { open, isReady } = useOAuth({
@@ -33,7 +35,7 @@ const MainCatalog = ({projectId,returnUrl,linkedUserId,optionalApiUrl} : Dynamic
 
     const FetchData = async () => {
       try{
-        const res = await fetch(`http://localhost:3000/catalog-options/single?projectID=${projectId}`,{
+        const res = await fetch(`${optionalApiUrl? optionalApiUrl : config.API_URL!}/catalog-options/single?projectID=${projectId}`,{
         method:'GET',
         headers: {
           'Content-Type': 'application/json',
@@ -43,20 +45,31 @@ const MainCatalog = ({projectId,returnUrl,linkedUserId,optionalApiUrl} : Dynamic
         {
           throw new Error("Not found")
         }
-      const data = await res.json();
-      console.log(data)
-      setData(JSON.parse(data.selected_catalog))
-      setError(false)
-      } catch(error)
+      let data = await res.json();
+
+      data = JSON.parse(data.selected_catalog)
+      // console.log(data)
+      setData(data);
+      if(Object.keys(data).length >0)
+        {
+          setSelectedVertical(Object.keys(data)[0])
+        }
+      setError(false);
+      setLoading(false);
+
+      } 
+      catch(error)
       {
-        setError(true)
+        setError(true);
+        setLoading(false);
         console.log(error)
       }
     }
 
     if(projectId===undefined || !projectId.match('[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}'))
       {
-        setError(true)
+        setError(true);
+        setLoading(false);
         return;
       }
     
@@ -71,7 +84,7 @@ const MainCatalog = ({projectId,returnUrl,linkedUserId,optionalApiUrl} : Dynamic
   };
 
   const handleCategoryClick = (category: string) => {    
-    setselectedVertical(category);
+    setSelectedVertical(category);
   };
 
   const onConnect = () => {
@@ -79,78 +92,100 @@ const MainCatalog = ({projectId,returnUrl,linkedUserId,optionalApiUrl} : Dynamic
       console.log("Auth completed!")
     });
   }
+
+
+  if(isLoading)
+    {
+      return (
+        <>
+        </>
+      )
+    }
     
 
   return (
-    <div className='h-screen flex items-center justify-center'>
-      <div className="w-[26rem] rounded-3xl bg-[#1d1d1d] text-white">
-            {error ? (
-              <>
-              <div>Error</div>
-              </>
-            )
-            :
-            (
-              <>
-              <div className=" flex items-center justify-center">
-                  {/* <img src={img} width={"30px"} className="mx-3 mb-4 w-12 h-12 rounded-xl"/> */}
-                {/* <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Select your Integration</h5> */}
-                </div>
-                <div className="p-4 max-h-[32rem] overflow-auto scrollbar-hide">
-                        <div className="flex mb-4 outline-none flex-wrap">
-                            {data && Object.keys(data).map((vertical) => (
-                            <button
-                                key={vertical}
-                                className={`px-3 py-1 mb-2 mr-1 rounded-full text-white text-xs font-medium transition duration-150 ${selectedVertical === vertical ? 'bg-indigo-600 hover:bg-indigo-500	' : 'bg-neutral-700 hover:bg-neutral-600'}`}
-                                onClick={() => handleCategoryClick(vertical)}
+    <>
+    {error ? 
+      (
+        <div className='w-[21rem] h-[10rem]'>
+        <div 
+        className=" bg-red-500 text-white font-bold rounded-t px-4 py-2 shadow p-4"
+        >
+          Incorrect Attributes!
+        </div>
+        <div className='border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700'>
+          <p>Please enter valid attributes for the Component.</p>
+        </div>
+        </div>
+      )
+      :
+      (
+        <>
+        <div 
+        className="w-[26rem] h-[26rem] p-2 bg-[#1d1d1d] border-[0.007em] border-gray-200 rounded-lg shadow dark:bg-[#1d1d1d] hover:border-gray-200  transition-colors duration-200"
+        >
+              <div className="flex items-center justify-center">
+                {/* <img src={img} width={"30px"} className="mx-3 mb-4 w-12 h-12 rounded-xl"/> */}
+                <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-900 text-white">Select your Integration</h5>
+    
+              </div> 
+
+              <div className="p-4 h-[19rem]">
+                {data && Object.keys(data).length==0 && (
+                  <>
+                    <h4 className='text-white'>Please select providers from dashboard to display in Catalog.</h4>
+                  </>
+                )}
+                      <div className="flex mb-4 outline-none flex-wrap">
+                        {data && Object.keys(data).length>0  && Object.keys(data).map((vertical) => (
+                        <button
+                            key={vertical}
+                            className={`px-3 py-1 mb-2 mr-1 rounded-full text-white text-xs font-medium transition duration-150 ${selectedVertical === vertical ? 'bg-indigo-600 hover:bg-indigo-500	' : 'bg-neutral-700 hover:bg-neutral-600'}`}
+                            onClick={() => handleCategoryClick(vertical)}
+                        >
+                            {vertical}
+                        </button>
+                        ))}
+                      </div>
+                      {(
+                      <>
+                      <div className='h-2/3 no-scrollbar overflow-y-auto px-2'>
+                        {selectedVertical!=='' && data && data[selectedVertical].map((provider)=> (
+                            <div
+                            key={provider}
+                            className={`flex items-center justify-between px-4 py-2 my-2 ${selectedProvider === provider.toLowerCase() ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-neutral-900 hover:bg-neutral-800'} border-black  hover:border-indigo-800 rounded-xl transition duration-150 cursor-pointer`}
+                            onClick={() => handleWalletClick(provider)}
                             >
-                                {vertical}
-                            </button>
-                            ))}
-                        </div>
-                        {(
-                            <>
-                            {selectedVertical!=='' && data && data[selectedVertical].map((provider) => (
-
-                                // <button
-                                // key={provider}
-                                // className={`px-3 py-1 mb-2 mr-1 rounded-full text-white text-xs font-medium transition duration-150 ${selectedProvider === provider ? 'bg-indigo-600 hover:bg-indigo-500	' : 'bg-neutral-700 hover:bg-neutral-600'}`}
-                                // onClick={() => handleWalletClick(provider)}
-                                // >
-                                // {provider.substring(0,1).toUpperCase().concat(provider.substring(1,provider.length))}
-                                // </button>
-
-                                <div
-                                key={provider}
-                                className={`flex items-center justify-between px-4 py-2 my-2 ${selectedProvider === provider.toLowerCase() ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-neutral-900 hover:bg-neutral-800'} border-black  hover:border-indigo-800 rounded-xl transition duration-150 cursor-pointer`}
-                                onClick={() => handleWalletClick(provider)}
-                                >
-                                <div className="flex items-center">
-                                  <img className="w-8 h-8 rounded-lg mr-3" src={getLogoURL(provider)} alt={provider} />
-                                  <span>{provider.substring(0,1).toUpperCase().concat(provider.substring(1,provider.length))}</span>
-                                </div>
-                                
-                                </div>
-                            ))}
+                            <div className="flex items-center">
+                              <img className="w-8 h-8 rounded-lg mr-3" src={getLogoURL(provider.toLowerCase())} alt={provider} />
+                              <span className='text-white'>{provider.substring(0,1).toUpperCase().concat(provider.substring(1,provider.length))}</span>
+                            </div>
                             
-                            </>
-                        )}
-                    </div>
-
-                <div className='flex justify-center items-center m-2'>
-                <button 
+                            </div>
+                        ))}
+                      </div>
+                      </>
+                  )}
+                  </div>
+            
+              <div className='flex m-2'>
+              <button 
                 onClick={() => onConnect()}
                 disabled={selectedProvider==='' || selectedVertical===''}
-                className={`text-white ${(selectedProvider==='' || selectedVertical==='') ? "opacity-50 cursor-not-allowed" : "hover:bg-neutral-800"}  bg-neutral-700  focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700`}>
-                  Click to Connect
-                  </button> 
-                </div>
-              </>
-            )
-          }
-        </div> 
-    </div>
+                
+                className={`text-white ${(selectedProvider==='' || selectedVertical==='') ? "opacity-50 cursor-not-allowed" : ""}  focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded text-sm px-5 py-2.5 me-2 mb-2 bg-indigo-600 hover:bg-indigo-700 focus:ring-gray-700 border-gray-700 w-full`}
+                >
+                  Connect
+              </button>
+              
+              </div>
+            
+          </div> 
+        </>
+      )  
+  }
+    </>
   )
 }
 
-export default MainCatalog
\ No newline at end of file
+export default DynamicCatalog
\ No newline at end of file
diff --git a/apps/embedded-catalog/react/src/global.css b/apps/embedded-catalog/react/src/global.css
index b5c61c956..6e066f761 100644
--- a/apps/embedded-catalog/react/src/global.css
+++ b/apps/embedded-catalog/react/src/global.css
@@ -1,3 +1,39 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+    /* Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+      scrollbar-face-color: #646464;
+      scrollbar-base-color: #646464;
+      scrollbar-3dlight-color: #646464;
+      scrollbar-highlight-color: #646464;
+      scrollbar-track-color: #000;
+      scrollbar-arrow-color: #000;
+      scrollbar-shadow-color: #646464;
+      scrollbar-dark-shadow-color: #646464;
+    }
+  
+    .no-scrollbar {
+      /* -ms-overflow-style: none; IE and Edge */
+      /* scrollbar-width: 1; Firefox */
+      scrollbar-face-color: #646464;
+      scrollbar-base-color: #646464;
+      scrollbar-3dlight-color: #646464;
+      scrollbar-highlight-color: #646464;
+      scrollbar-track-color: #000;
+      scrollbar-arrow-color: #000;
+      scrollbar-shadow-color: #646464;
+      scrollbar-dark-shadow-color: #646464;
+  
+    }
+  
+    ::-webkit-scrollbar { width: 8px; height: 3px;}
+    ::-webkit-scrollbar-button {  background-color: #666; }
+    ::-webkit-scrollbar-track {  background-color: #646464;}
+    ::-webkit-scrollbar-track-piece { background-color: #000;}
+    ::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
+    ::-webkit-scrollbar-corner { background-color: #646464;}
+    ::-webkit-resizer { background-color: #666;}
+  }