From a4b37b6d791698e661249b6ca11d03034eb235c6 Mon Sep 17 00:00:00 2001 From: Samuel Bodin <1637651+bodinsamuel@users.noreply.github.com> Date: Mon, 25 Mar 2024 12:58:33 +0100 Subject: [PATCH] fix(demo): feedbacks --- .../src/pages/InteractiveDemo/ActionBloc.tsx | 16 ++++++++++++++-- .../src/pages/InteractiveDemo/AuthorizeBloc.tsx | 3 +++ .../src/pages/InteractiveDemo/DeployBloc.tsx | 2 ++ .../src/pages/InteractiveDemo/FetchBloc.tsx | 5 ++++- .../webapp/src/pages/InteractiveDemo/index.tsx | 2 +- 5 files changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/webapp/src/pages/InteractiveDemo/ActionBloc.tsx b/packages/webapp/src/pages/InteractiveDemo/ActionBloc.tsx index aa46383269..c91de33ccd 100644 --- a/packages/webapp/src/pages/InteractiveDemo/ActionBloc.tsx +++ b/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.Node); const [title, setTitle] = useState(''); const [error, setError] = useState(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
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" diff --git a/packages/webapp/src/pages/InteractiveDemo/AuthorizeBloc.tsx b/packages/webapp/src/pages/InteractiveDemo/AuthorizeBloc.tsx index 6cc97b9a1f..906df8b805 100644 --- a/packages/webapp/src/pages/InteractiveDemo/AuthorizeBloc.tsx +++ b/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'); } }; diff --git a/packages/webapp/src/pages/InteractiveDemo/DeployBloc.tsx b/packages/webapp/src/pages/InteractiveDemo/DeployBloc.tsx index cea137848a..cbe2e6162b 100644 --- a/packages/webapp/src/pages/InteractiveDemo/DeployBloc.tsx +++ b/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 { diff --git a/packages/webapp/src/pages/InteractiveDemo/FetchBloc.tsx b/packages/webapp/src/pages/InteractiveDemo/FetchBloc.tsx index 6d3ffa056a..10d83320b0 100644 --- a/packages/webapp/src/pages/InteractiveDemo/FetchBloc.tsx +++ b/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[] }; 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(); } } diff --git a/packages/webapp/src/pages/InteractiveDemo/index.tsx b/packages/webapp/src/pages/InteractiveDemo/index.tsx index f7a87ec0ee..fe94b18b0d 100644 --- a/packages/webapp/src/pages/InteractiveDemo/index.tsx +++ b/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';