From b328a2f151d5d471ceb6543a98d7c2fd90d6220d Mon Sep 17 00:00:00 2001
From: mdshamoon <mohdshamoon841@gmail.com>
Date: Thu, 18 Jan 2024 17:25:02 +0530
Subject: [PATCH] added more option

---
 .../Flow/FlowTranslation.module.css           |  9 ++++
 src/containers/Flow/FlowTranslation.tsx       | 47 +++++++++++++++++--
 src/graphql/queries/Flow.ts                   |  4 +-
 src/i18n/en/en.json                           |  7 ++-
 4 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/src/containers/Flow/FlowTranslation.module.css b/src/containers/Flow/FlowTranslation.module.css
index 0e9f90019..7d5b28f5b 100644
--- a/src/containers/Flow/FlowTranslation.module.css
+++ b/src/containers/Flow/FlowTranslation.module.css
@@ -3,3 +3,12 @@
   z-index: 100000;
   font-size: 20px;
 }
+
+.FormHelper {
+  padding-left: 16px;
+  margin-bottom: 10px;
+}
+
+.Radio {
+  padding: 0px 8px;
+}
diff --git a/src/containers/Flow/FlowTranslation.tsx b/src/containers/Flow/FlowTranslation.tsx
index 4a83e6f54..6b590348d 100644
--- a/src/containers/Flow/FlowTranslation.tsx
+++ b/src/containers/Flow/FlowTranslation.tsx
@@ -8,6 +8,7 @@ import {
   Radio,
   Backdrop,
   CircularProgress,
+  FormHelperText,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import styles from './FlowTranslation.module.css';
@@ -82,7 +83,11 @@ export const FlowTranslation = ({ flowId, setDialog, loadFlowEditor }: FlowTrans
   };
 
   const handleExport = async () => {
-    exportFlowTranslations({ variables: { id: flowId } });
+    exportFlowTranslations({ variables: { id: flowId, addTranslation: false } });
+  };
+
+  const handleAutoExport = () => {
+    exportFlowTranslations({ variables: { id: flowId, addTranslation: true } });
   };
 
   const handleOk = () => {
@@ -90,6 +95,8 @@ export const FlowTranslation = ({ flowId, setDialog, loadFlowEditor }: FlowTrans
       handleAuto();
     } else if (action === 'export') {
       handleExport();
+    } else if (action === 'export-auto') {
+      handleAutoExport();
     }
   };
 
@@ -119,6 +126,29 @@ export const FlowTranslation = ({ flowId, setDialog, loadFlowEditor }: FlowTrans
     return <BackdropLoader text="Please wait while the flow is getting translated..." />;
   }
 
+  const translationOptions = [
+    {
+      value: 'auto',
+      label: t('Automatic translation'),
+      description: t('Generate translations for all available languages automatically.'),
+    },
+    {
+      value: 'export-auto',
+      label: t('Export with auto translate'),
+      description: t('Translate the content and export it as a CSV file.'),
+    },
+    {
+      value: 'export',
+      label: t('Export translations'),
+      description: t('Export the content without any automatic translations.'),
+    },
+    {
+      value: 'import',
+      label: t('Import translations'),
+      description: t('Import translations from a CSV file into the application.'),
+    },
+  ];
+
   const dialogContent = (
     <div>
       <FormControl>
@@ -129,9 +159,16 @@ export const FlowTranslation = ({ flowId, setDialog, loadFlowEditor }: FlowTrans
           onChange={handleChange}
           data-testid="translation-options"
         >
-          <FormControlLabel value="auto" control={<Radio />} label={t('Automatic translation')} />
-          <FormControlLabel value="export" control={<Radio />} label={t('Export translations')} />
-          <FormControlLabel value="import" control={<Radio />} label={t('Import translations')} />
+          {translationOptions.map((option) => (
+            <div key={option.value}>
+              <FormControlLabel
+                value={option.value}
+                control={<Radio className={styles.Radio} />}
+                label={option.label}
+              />
+              <FormHelperText className={styles.FormHelper}>{option.description}</FormHelperText>
+            </div>
+          ))}
         </RadioGroup>
         {action === 'import' ? importButton : ''}
       </FormControl>
@@ -140,7 +177,7 @@ export const FlowTranslation = ({ flowId, setDialog, loadFlowEditor }: FlowTrans
 
   return (
     <DialogBox
-      title="Translate Flow"
+      title="Translate Options"
       alignButtons="center"
       buttonOk="Submit"
       buttonCancel="Cancel"
diff --git a/src/graphql/queries/Flow.ts b/src/graphql/queries/Flow.ts
index ba453a7ec..37bb69383 100644
--- a/src/graphql/queries/Flow.ts
+++ b/src/graphql/queries/Flow.ts
@@ -109,8 +109,8 @@ export const RELEASE_FLOW = gql`
 `;
 
 export const EXPORT_FLOW_LOCALIZATIONS = gql`
-  query exportFlowLocalization($id: ID!) {
-    exportFlowLocalization(id: $id) {
+  query exportFlowLocalization($id: ID!, $addTranslation: Boolean) {
+    exportFlowLocalization(id: $id,  addTranslation: $addTranslation) {
       exportData
     }
   }
diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json
index 8a91f6e65..9db8df1b8 100644
--- a/src/i18n/en/en.json
+++ b/src/i18n/en/en.json
@@ -442,5 +442,10 @@
   "Response JSON": "Response JSON",
   "Webhook Logs": "Webhook Logs",
   "Translate": "Translate",
-  "An error occured while translating flows.": "An error occured while translating flows."
+  "An error occured while translating flows.": "An error occured while translating flows.",
+  "Export with auto translate": "Export with auto translate",
+  "Generate translations for all available languages automatically.": "Generate translations for all available languages automatically.",
+  "Translate the content and export it as a CSV file.": "Translate the content and export it as a CSV file.",
+  "Export the content without any automatic translations.": "Export the content without any automatic translations.",
+  "Import translations from a CSV file into the application.": "Import translations from a CSV file into the application."
 }