From d236494c0b1c6e74637599132f023d3bf118d6c5 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Mon, 3 Oct 2022 19:44:26 +0200
Subject: [PATCH] feat(ChooseAppAndEventSubstep): add translations

---
 .../components/ChooseAppAndEventSubstep/index.tsx   | 13 ++++++++-----
 packages/web/src/locales/en.json                    |  8 +++++++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx b/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
index 5afdb7f9..e54d1d3b 100644
--- a/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
+++ b/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
@@ -8,6 +8,7 @@ import ListItem from '@mui/material/ListItem';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 
+import useFormatMessage from 'hooks/useFormatMessage';
 import { EditorContext } from 'contexts/Editor';
 import { GET_APPS } from 'graphql/queries/get-apps';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
@@ -41,6 +42,7 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
     onChange,
   } = props;
 
+  const formatMessage = useFormatMessage();
   const editorContext = React.useContext(EditorContext);
 
   const isTrigger = step.type === 'trigger';
@@ -117,7 +119,7 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
             disableClearable
             disabled={editorContext.readOnly}
             options={appOptions}
-            renderInput={(params) => <TextField {...params} label="Choose an app" />}
+            renderInput={(params) => <TextField {...params} label={formatMessage('flowEditor.chooseApp')} />}
             value={getOption(appOptions, step.appKey)}
             onChange={onAppChange}
           />
@@ -125,7 +127,8 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
           {step.appKey && (
             <Box display="flex" width="100%" pt={2} flexDirection="column">
               <Typography variant="subtitle2" pb={2} gutterBottom>
-                Action event
+                {isTrigger && formatMessage('flowEditor.triggerEvent')}
+                {!isTrigger && formatMessage('flowEditor.actionEvent')}
               </Typography>
 
               <Autocomplete
@@ -134,7 +137,7 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
                 disableClearable
                 disabled={editorContext.readOnly}
                 options={actionOptions}
-                renderInput={(params) => <TextField {...params} label="Choose an event" />}
+                renderInput={(params) => <TextField {...params} label={formatMessage('flowEditor.chooseEvent')} />}
                 value={getOption(actionOptions, step.key)}
                 onChange={onEventChange}
               />
@@ -143,8 +146,8 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
 
           {isTrigger && selectedActionOrTrigger?.pollInterval && (
             <TextField
-              label="Poll interval"
-              value={`Every ${selectedActionOrTrigger.pollInterval} minutes`}
+              label={formatMessage('flowEditor.pollIntervalLabel')}
+              value={formatMessage('flowEditor.pollIntervalValue', { minutes: selectedActionOrTrigger.pollInterval })}
               sx={{ mt: 2 }}
               fullWidth
               disabled
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index b3c1e9a3..cbe8c1c0 100644
--- a/packages/web/src/locales/en.json
+++ b/packages/web/src/locales/en.json
@@ -51,6 +51,12 @@
   "flowEditor.noTestDataMessage": "Create a sample in the associated service and test the step again.",
   "flowEditor.testAndContinue": "Test & Continue",
   "flowEditor.continue": "Continue",
+  "flowEditor.chooseApp": "Choose an app",
+  "flowEditor.chooseEvent": "Choose an event",
+  "flowEditor.pollIntervalLabel": "Poll interval",
+  "flowEditor.pollIntervalValue": "Every {minutes} minutes",
+  "flowEditor.triggerEvent": "Trigger event",
+  "flowEditor.actionEvent": "Action event",
   "flow.createdAt": "created {datetime}",
   "flow.updatedAt": "updated {datetime}",
   "flow.view": "View",
@@ -77,4 +83,4 @@
   "profileSettings.updatePassword": "Update password",
   "notifications.title": "Notifications",
   "notification.releasedAt": "Released {relativeDate}"
-}
+}
\ No newline at end of file