fix(demo): feedbacks

packages/webapp/src/pages/InteractiveDemo/ActionBloc.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Prism } from '@mantine/prism';
 import { Language, Steps, actionName, endpointAction } from './utils';
 import Button from '../../components/ui/button/Button';
@@ -9,6 +9,7 @@ import { useAnalyticsTrack } from '../../utils/analytics';
 import { CheckCircledIcon, ExternalLinkIcon } from '@radix-ui/react-icons';
 import { curlSnippet, nodeActionSnippet } from '../../utils/language-snippets';
 import { useStore } from '../../store';
+import { useMeta } from '../../hooks/useMeta';
 
 export const ActionBloc: React.FC<{ step: Steps; providerConfigKey: string; connectionId: string; secretKey: string; onProgress: () => void }> = ({
     step,
@@ -18,6 +19,8 @@ export const ActionBloc: React.FC<{ step: Steps; providerConfigKey: string; conn
     onProgress
 }) => {
     const analyticsTrack = useAnalyticsTrack();
+    const { meta } = useMeta();
+
     const [language, setLanguage] = useState<Language>(Language.Node);
     const [title, setTitle] = useState('');
     const [error, setError] = useState<string | null>(null);
@@ -34,6 +37,12 @@ export const ActionBloc: React.FC<{ step: Steps; providerConfigKey: string; conn
         }
     }, [title, providerConfigKey, connectionId, secretKey, language, baseUrl]);
 
+    useEffect(() => {
+        if (meta && title === '') {
+            setTitle(`${meta.email.split('@')[0]}'s example issue`);
+        }
+    }, [meta, title]);
+
     const onDeploy = async () => {
         analyticsTrack('web:demo:action');
         setLoading(true);
@@ -50,14 +59,16 @@ export const ActionBloc: React.FC<{ step: Steps; providerConfigKey: string; conn
             if (res.status !== 200 || 'message' in json || !('action' in json)) {
                 setError('message' in json && json.message ? json.message : 'An unexpected error occurred');
 
-                analyticsTrack('web:demo:deploy_error');
+                analyticsTrack('web:demo:action_error');
                 return;
             }
 
             setError(null);
+            analyticsTrack('web:demo:action_success');
             setUrl(json.action.url);
             onProgress();
         } catch (err) {
+            analyticsTrack('web:demo:action_error');
             setError(err instanceof Error ? `error: ${err.message}` : 'An unexpected error occurred');
             return;
         } finally {
@@ -79,6 +90,7 @@ export const ActionBloc: React.FC<{ step: Steps; providerConfigKey: string; conn
                     <div className="flex-grow">
                         <input
                             type="text"
+                            value={title}
                             placeholder="Enter a GitHub issue title"
                             onChange={(e) => setTitle(e.target.value)}
                             className="border-border-gray bg-bg-black text-text-light-gray focus:border-white focus:ring-white block h-10 w-1/2 appearance-none rounded-md border px-3 py-2 text-sm placeholder-gray-400 shadow-sm focus:outline-none"

packages/webapp/src/pages/InteractiveDemo/AuthorizeBloc.tsx

@@ -43,6 +43,7 @@ export const AuthorizeBloc: React.FC<{
             idTmp = json.id;
             setId(idTmp);
         } catch (err) {
+            analyticsTrack('web:demo:authorize_error');
             setError(err instanceof Error ? `error: ${err.message}` : 'An unexpected error occurred');
             return;
         }
@@ -53,8 +54,10 @@ export const AuthorizeBloc: React.FC<{
             await nango.auth(providerConfigKey, connectionId);
 
             setError(null);
+            analyticsTrack('web:demo:authorize_success');
             void onProgress(idTmp);
         } catch (err: unknown) {
+            analyticsTrack('web:demo:authorize_error');
             setError(err instanceof AuthError ? `${err.type} error: ${err.message}` : 'An unexpected error occurred');
         }
     };

packages/webapp/src/pages/InteractiveDemo/DeployBloc.tsx

@@ -66,8 +66,10 @@ models:
             }
 
             setError(null);
+            analyticsTrack('web:demo:deploy_success');
             onProgress();
         } catch (err) {
+            analyticsTrack('web:demo:deploy_error');
             setError(err instanceof Error ? `error: ${err.message}` : 'An unexpected error occurred');
             return;
         } finally {

packages/webapp/src/pages/InteractiveDemo/FetchBloc.tsx

@@ -65,17 +65,20 @@ export const FetchBloc: React.FC<{
             const json = (await res.json()) as { message?: string };
             setError(json.message ? json.message : 'An unexpected error occurred, please retry');
             analyticsTrack('web:demo:fetch_error');
+            setPollingInterval(undefined);
             return;
         }
 
         const fetchedRecords = (await res.json()) as { records: Record<string, unknown>[] };
         if (fetchedRecords.records.length <= 0) {
             setError('An unexpected error occurred, please retry');
+            setPollingInterval(undefined);
             return;
         }
 
         setError(null);
         onProgress(fetchedRecords.records);
+        setPollingInterval(undefined);
     };
 
     const startPolling = () => {
@@ -106,8 +109,8 @@ export const FetchBloc: React.FC<{
             const data = (await res.json()) as { jobStatus: string };
 
             if (data.jobStatus === 'SUCCESS') {
+                analyticsTrack('web:demo:fetch_success');
                 clearInterval(pollingInterval);
-                setPollingInterval(undefined);
                 void fetchRecords();
             }
         }

packages/webapp/src/pages/InteractiveDemo/index.tsx

@@ -11,7 +11,7 @@ import { Steps, providerConfigKey } from './utils';
 import { NextBloc } from './NextBloc';
 import { ActionBloc } from './ActionBloc';
 import { WebhookBloc } from './WebhookBloc';
-import { OnboardingStatus } from '../../types';
+import type { OnboardingStatus } from '../../types';
 import { DeployBloc } from './DeployBloc';
 import Spinner from '../../components/ui/Spinner';
 import { useEnvironment } from '../../hooks/useEnvironment';