🔥 Fixed hook state in the webapp when project was null

.changeset/rare-garlics-flow.md

@@ -0,0 +1,6 @@
+---
+"@panora/embedded-card-react": patch
+"@panora/frontend-sdk": patch
+---
+
+Readme patch

apps/embedded-catalog/react/README.md

@@ -21,36 +21,51 @@ or
 yarn add @panora/embedded-card-react
 ```
 
-## Import the component
+## Import the components
 
-```bash
-# Import the css file
+```ts
 import "@panora/embedded-card-react/dist/index.css";
 
-import PanoraProviderCard from "@panora/embedded-card-react";
+import { PanoraDynamicCatalogCard, PanoraProviderCard } from '@panora/embedded-card-react';
 ```
 
 ## Use the component
 
 - The `optionalApiUrl` is an optional prop to use the component with the self-hosted version of Panora.
 
-```bash
+```ts
     <PanoraProviderCard 
     name={"hubspot"} // name of the provider  
-    projectId={"c9a1b1f8-466d-442d-a95e-11cdd00baf49"} // the project id tied to your organization
-    returnUrl={"https://acme.inc"} // the url you want to redirect users to after the connection flow is successful
-    linkedUserId={"b860d6c1-28f9-485c-86cd-fb09e60f10a2"}  // the linked id of the user if already created in Panora system or user's info in your system
-    optionalApiUrl={"http://localhost:3000"} // Only add this prop to use the component with a self-hosted version of Panora. Without this prop, the component uses the cloud version of Panora.
+    projectId={"c9a1b1f8-466d-442d-a95e-11cdd00baf49"} // Copy it from your dahshboard
+    linkedUserId={"b860d6c1-28f9-485c-86cd-fb09e60f10a2"}  // You can copy it from your Panora dahsbord under /configuration tab
+    optionalApiUrl={"http://localhost:3000"} // Optional (only if you are in selfhost mode and want to use localhost:3000), by default: api.panora.dev
+    />
+
+    <PanoraDynamicCatalogCard
+      category={ConnectorCategory.Crm} 
+      projectId={"f9e9601e-d6da-471a-9777-94257e9b4f00"} 
+      linkedUserId={"4c6ca51b-7b23-4e3a-9309-24d2d331a04d"} 
+      optionalApiUrl="http://localhost:3000"
     />
 ```
 
 ```ts
-These are the types needed for the component.
+These are the types needed for the components.
+
+The `<PanoraProviderCard />` takes this props type:
 
 interface ProviderCardProp {
   name: string;
   projectId: string;
-  returnUrl: string;
-  linkedUserIdOrRemoteUserInfo: string;
+  linkedUserId: string;
+}
+
+The `<PanoraDynamicCatalogCard />` takes this props type:
+
+interface DynamicCardProp {
+  projectId: string;
+  linkedUserId: string;
+  category?: ConnectorCategory;
+  optionalApiUrl?: string,
 }
 ```

apps/frontend-sdk/README.md

@@ -0,0 +1,75 @@
+
+## Frontend SDK (React)
+
+It is a React component aimed to be used in any of your pages so end-users can connect their 3rd parties in 1-click!
+
+## Installation
+
+```bash
+npm i @panora/frontend-sdk
+```
+
+or
+
+```bash
+pnpm i @panora/frontend-sdk
+```
+
+or
+
+```bash
+yarn add @panora/frontend-sdk
+```
+
+## Use the component
+
+```ts
+    import { ConnectorCategory } from '@panora/shared'
+    import Panora from '@panora/frontend-sdk'
+
+    const panora = new Panora({ apiKey: 'YOUR_PRIVATE_API_KEY' });
+
+    // kickstart the connection (OAuth, ApiKey, Basic)
+    panora.connect({
+      providerName: "hubspot",
+      vertical: ConnectorCategory.Crm,
+      linkedUserId: "4c6ca51b-7b23-4e3a-9309-24d2d331a04d",
+    })
+```
+
+```ts
+The Panora SDK must be instantiated with this type:
+
+interface PanoraConfig { 
+  apiKey: string;
+  overrideApiUrl: string; 
+  // Optional (only if you are in selfhost mode and want to use localhost:3000), by default: api.panora.dev
+}
+
+The .connect() function takes this type:
+
+interface ConnectOptions {
+  providerName: string;
+  vertical: ConnectorCategory; // Must be imported from @panora/shared
+  linkedUserId: string; // You can copy it from your Panora dahsbord under /configuration tab
+  credentials?: Credentials; // Optional if you try to use OAuth
+  options?: {
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+    overrideReturnUrl?: string;
+  }
+}
+
+By default, for OAuth we use Panora managed OAuth apps but if we dont have one registered OR you want to use your own, you must register that under /configuration tab from the webapp and it will automatically use these custom credentials !
+
+interface Credentials {
+  username?: string; // Used for Basic Auth
+  password?: string; // Used for Basic Auth
+  apiKey?: string; // Used for Api Key Auth
+}
+
+For Basic Auth some providers may only ask for username or password.
+
+In this case just specify either password or username depending on the 3rd party reference.
+
+```

apps/frontend-sdk/src/index.ts

@@ -17,7 +17,7 @@ interface ConnectOptions {
   vertical: ConnectorCategory;
   linkedUserId: string;
   credentials?: Credentials;
-  options: {
+  options?: {
     onSuccess?: () => void;
     onError?: (error: Error) => void;
     overrideReturnUrl?: string;
@@ -65,7 +65,7 @@ class Panora {
   }
 
   async connect(options: ConnectOptions): Promise<Window | null> {
-    const { providerName, vertical, linkedUserId, credentials, options: {onSuccess, onError, overrideReturnUrl} } = options;
+    const { providerName, vertical, linkedUserId, credentials, options: {onSuccess, onError, overrideReturnUrl} = {} } = options;
 
     try {
       const projectId = await this.fetchProjectId();

apps/magic-link/src/hooks/queries/useProjectConnectors.tsx

@@ -1,16 +1,22 @@
 import { useQuery } from '@tanstack/react-query';
 import config from '@/helpers/config';
 
-const useProjectConnectors = (id: string) => {
+const useProjectConnectors = (id: string | null) => {
   return useQuery({
-    queryKey: ['project-connectors', id], 
+    queryKey: ['project-connectors', id],
     queryFn: async (): Promise<any> => {
+      if (!id) {
+        throw new Error('Project ID is not available');
+      }
       const response = await fetch(`${config.API_URL}/project-connectors?projectId=${id}`);
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        return response.json();
-    }
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      return response.json();
+    },
+    enabled: !!id, // Only run the query if id is truthy
+    retry: false, // Don't retry if the project ID is not available
   });
 };
-export default useProjectConnectors;
+
+export default useProjectConnectors;

apps/magic-link/src/hooks/queries/useUniqueMagicLink.tsx

@@ -4,16 +4,22 @@ import config from '@/helpers/config';
 
 type Mlink = MagicLink & {id_project: string}
 
-const useUniqueMagicLink = (id: string) => {
-  return useQuery({
-    queryKey: ['magic-link', id], 
+const useUniqueMagicLink = (id: string | null) => {
+  return useQuery<Mlink, Error>({
+    queryKey: ['magic-link', id],
     queryFn: async (): Promise<Mlink> => {
+      if (!id) {
+        throw new Error('Magic Link ID is not available');
+      }
       const response = await fetch(`${config.API_URL}/magic-links/single?id=${id.trim()}`);
       if (!response.ok) {
         throw new Error('Network response was not ok');
       }
       return response.json();
-    }
+    },
+    enabled: !!id && id.trim().length > 0, // Only run the query if id is truthy and not just whitespace
+    retry: false, // Don't retry if the magic link ID is not available
   });
 };
-export default useUniqueMagicLink;
+
+export default useUniqueMagicLink;

apps/magic-link/src/lib/ProviderModal.tsx

@@ -50,6 +50,7 @@
   const [openApiKeyDialog,setOpenApiKeyDialog] = useState<boolean>(false);
   const [projectId, setProjectId] = useState<string>("");
   const [data, setData] = useState<Provider[]>([]);
+  const [isProjectIdReady, setIsProjectIdReady] = useState(false);
   const [errorResponse,setErrorResponse] = useState<{
     errorPresent: boolean; errorMessage : string
   }>({errorPresent:false,errorMessage:''})
@@ -58,14 +59,14 @@
     status: boolean; provider: string
   }>({status: false, provider: ''});
 
-  const [uniqueMagicLinkId, setUniqueMagicLinkId] = useState<string>('');
+  const [uniqueMagicLinkId, setUniqueMagicLinkId] = useState<string | null>(null);
   const [openSuccessDialog,setOpenSuccessDialog] = useState<boolean>(false);
   const [currentProviderLogoURL,setCurrentProviderLogoURL] = useState<string>('')
   const [currentProvider,setCurrentProvider] = useState<string>('')
 
   const {mutate : createApiKeyConnection} = useCreateApiKeyConnection();
   const {data: magicLink} = useUniqueMagicLink(uniqueMagicLinkId); 
-  const {data: connectorsForProject} = useProjectConnectors(projectId);
+  const {data: connectorsForProject} = useProjectConnectors(isProjectIdReady ? projectId : null);
 
   // const form = useForm<z.infer<typeof formSchema>>({
   //   resolver: zodResolver(formSchema),
@@ -88,28 +89,28 @@
   useEffect(() => { 
     if (magicLink) {
       setProjectId(magicLink?.id_project);
+      setIsProjectIdReady(true);
     }
   }, [magicLink]);
 
 
   useEffect(()=>{
-    const PROVIDERS = selectedCategory == "All" ? providersArray() : providersArray(selectedCategory);
-    const getConnectorsToDisplay = () => {
-      // First, check if the company selected custom connectors in the UI or not
-      const unwanted_connectors = transformConnectorsStatus(connectorsForProject).filter(connector => connector.status === "false"); 
-      // Filter out the providers present in the unwanted connectors array
-      const filteredProviders = PROVIDERS.filter(provider => {
-          return !unwanted_connectors.some( (unwanted) => 
-            unwanted.category === provider.vertical && unwanted.connector_name === provider.name
-          );
-      });
-      return filteredProviders;
-    }
-
-    if(connectorsForProject) {
-      setData(getConnectorsToDisplay())
+    if (isProjectIdReady && connectorsForProject) { 
+      const PROVIDERS = selectedCategory == "All" ? providersArray() : providersArray(selectedCategory);
+      const getConnectorsToDisplay = () => {
+        // First, check if the company selected custom connectors in the UI or not
+        const unwanted_connectors = transformConnectorsStatus(connectorsForProject).filter(connector => connector.status === "false"); 
+        // Filter out the providers present in the unwanted connectors array
+        const filteredProviders = PROVIDERS.filter(provider => {
+            return !unwanted_connectors.some( (unwanted) => 
+              unwanted.category === provider.vertical && unwanted.connector_name === provider.name
+            );
+        });
+        return filteredProviders;
+      }     
+        setData(getConnectorsToDisplay())
     }
-  }, [connectorsForProject, selectedCategory])
+  }, [connectorsForProject, selectedCategory, isProjectIdReady])
 
   const { open, isReady } = useOAuth({
     providerName: selectedProvider?.provider!,
@@ -159,7 +160,7 @@
         provider: ''
       });
     }
   }, [startFlow, isReady]);
 
 
 

apps/webapp/src/components/shared/data-table-row-actions.tsx

@@ -29,6 +29,7 @@ export function DataTableRowActions<TData>({
 
   const {deleteApiKeyPromise} = useDeleteApiKey();
   const {deleteWebhookPromise} = useDeleteWebhook();
+
   const queryClient = useQueryClient();
 
   const handleDeletion = () => {

docs/mint.json

@@ -414,6 +414,7 @@
     {
       "group": "Recipes",
       "pages": [
+        "recipes/frontend-sdk", 
         "recipes/embed-catalog", 
         "recipes/import-existing-users", 
         "recipes/catch-connection-token",
@@ -433,7 +434,7 @@
       "group": "Devtools",
       "pages": [
         {
-          "group": "SDKs",
+          "group": "Backend SDKs",
           "pages": ["backend-sdk/typescript", "backend-sdk/python"]
         }
       ]

docs/recipes/embed-catalog.mdx

@@ -10,7 +10,7 @@ icon: "square-terminal"
 
 <CodeGroup>
     ```shell React
-    npm i @panora/embedded-card-react
+    pnpm i @panora/embedded-card-react
     ```
 </CodeGroup>
 
@@ -20,6 +20,15 @@ icon: "square-terminal"
   [here](/glossary/metadata/category).
 </Note>
 
+<Frame type="glass">
+    <video
+    controls
+    className="block"
+    src="/images/embed-video.mp4"
+    alt="Hero Light"
+    />
+</Frame>
+
 #### Import a single connector card
 
 You must import both `@panora/shared` (which contains the types) and `@panora/embedded-card-react`. 
@@ -34,12 +43,12 @@ Don't forget to import the styles as well `import "@panora/embedded-card-react/d
 
     const MyPage = () => {
         return (
-            <PanoraProviderCard
-                name={"hubspot"} // name of the provider
-                category={ConnectorCategory.Crm} // category where provider belongs to
-                projectId={"c9a1b1f8-466d-442d-a95e-11cdd00baf49"} // the project id tied to your organization
-                returnUrl={"https://acme.inc"} // the url you want to redirect users to after the connection flow is successful
-                linkedUserId={"b860d6c1-28f9-485c-86cd-fb09e60f10a2"}  // the linked id of the user if already created in Panora system or user's info in your system
+            <PanoraProviderCard 
+                name={"hubspot"} // name of the provider  
+                category={ConnectorCategory.Crm} 
+                projectId={"f9e9601e-d6da-471a-9777-94257e9b4f00"} 
+                linkedUserId={"4c6ca51b-7b23-4e3a-9309-24d2d331a04d"} 
+                optionalApiUrl={"http://localhost:3000"} // Optional (only if you are in selfhost mode and want to use localhost:3000), by default: api.panora.dev
             />
         )
     } 
@@ -55,10 +64,10 @@ Don't forget to import the styles as well `import "@panora/embedded-card-react/d
     const MyPage = () => {
         return (
             <PanoraDynamicCatalogCard
-                category={ConnectorCategory.Crm} // optional but if provided it returns only connectors of the category
-                projectId={"c9a1b1f8-466d-442d-a95e-11cdd00baf49"} // the project id tied to your organization
-                returnUrl={"https://acme.inc"} // the url you want to redirect users to after the connection flow is successful
-                linkedUserId={"b860d6c1-28f9-485c-86cd-fb09e60f10a2"}  // the linked id of the user if already created in Panora system or user's info in your system
+                category={ConnectorCategory.Crm} 
+                projectId={"f9e9601e-d6da-471a-9777-94257e9b4f00"} 
+                linkedUserId={"4c6ca51b-7b23-4e3a-9309-24d2d331a04d"} 
+                optionalApiUrl="http://localhost:3000"
             />
         )
     }
@@ -67,9 +76,12 @@ Don't forget to import the styles as well `import "@panora/embedded-card-react/d
 
 Congrats ! You should be able to see the displayed connectors !
 
+
 # Step 2 (optional): Select your own connectors
 
-**insert**video
+ <Frame type="glass">
+    <img src="/images/custom-connectors-widget.png" />
+</Frame>
 
 You have the ability to choose which connectors will be rendered (also applied to magic-link).