Merge pull request #2700 from glific/feature/translation-flag

Added flag for auto translation

src/components/floweditor/FlowEditor.tsx

@@ -15,7 +15,7 @@ import { DialogBox } from 'components/UI/DialogBox/DialogBox';
 import { setNotification } from 'common/notification';
 import { PUBLISH_FLOW, RESET_FLOW_COUNT } from 'graphql/mutations/Flow';
 import { EXPORT_FLOW, GET_FLOW_DETAILS, GET_FREE_FLOW } from 'graphql/queries/Flow';
-import { setAuthHeaders } from 'services/AuthService';
+import { getOrganizationServices, setAuthHeaders } from 'services/AuthService';
 import { SideDrawerContext } from 'context/session';
 import { Loading } from 'components/UI/Layout/Loading/Loading';
 import Track from 'services/TrackService';
@@ -48,6 +48,7 @@ export const FlowEditor = () => {
   const [currentEditDialogBox, setCurrentEditDialogBox] = useState(false);
   const [dialogMessage, setDialogMessage] = useState('');
   const { drawerOpen } = useContext(SideDrawerContext);
+  const isTranslationEnabled = getOrganizationServices('autoTranslationEnabled');
 
   let modal = null;
   let dialog = null;
@@ -420,16 +421,19 @@ export const FlowEditor = () => {
           >
             <ResetFlowIcon /> Reset flow counts
           </Button>
-          <Button
-            className={styles.Button}
-            variant="outlined"
-            color="primary"
-            data-testid="translateFlow"
-            onClick={() => setShowTranslateFlowModal(true)}
-            aria-hidden="true"
-          >
-            Translation
-          </Button>
+
+          {isTranslationEnabled && (
+            <Button
+              className={styles.Button}
+              variant="outlined"
+              color="primary"
+              data-testid="translateFlow"
+              onClick={() => setShowTranslateFlowModal(true)}
+              aria-hidden="true"
+            >
+              Translation
+            </Button>
+          )}
         </div>
         <div id="flow" />
         {loading && <Loading showTip />}

src/containers/Flow/FlowTranslation.tsx

@@ -47,6 +47,10 @@ export const FlowTranslation = ({ flowId, setDialog, loadFlowEditor }: FlowTrans
         setNotification(inlineFlowLocalization.errors[0].message, 'warning');
       }
     },
+    onError: () => {
+      setDialog(false);
+      setNotification(t('An error occured while translating flows.'));
+    },
   });
 
   const [exportFlowTranslations, { loading: exportLoad }] = useLazyQuery(

src/graphql/queries/Organization.ts

@@ -115,6 +115,7 @@ export const GET_ORGANIZATION_SERVICES = gql`
   query organizationServices {
     organizationServices {
       dialogflow
+      autoTranslationEnabled
       googleCloudStorage
       flowUuidDisplay
       rolesAndPermission

src/i18n/en/en.json

@@ -441,5 +441,6 @@
   "Request JSON": "Request JSON",
   "Response JSON": "Response JSON",
   "Webhook Logs": "Webhook Logs",
-  "Translate": "Translate"
+  "Translate": "Translate",
+  "An error occured while translating flows.": "An error occured while translating flows."
 }

src/services/AuthService.tsx

@@ -9,6 +9,15 @@ interface RegisterRequest {
   token?: string;
 }
 
+type ServiceType =
+  | 'dialogflow'
+  | 'autoTranslationEnabled'
+  | 'googleCloudStorage'
+  | 'flowUuidDisplay'
+  | 'rolesAndPermission'
+  | 'contactProfileEnabled'
+  | 'ticketingEnabled';
+
 // get the current authentication session
 export const getAuthSession = (element?: string) => {
   const session = localStorage.getItem('glific_session');
@@ -172,7 +181,7 @@ export const setOrganizationServices = (services: string) => {
   localStorage.setItem('organizationServices', services);
 };
 
-export const getOrganizationServices = (service: string) => {
+export const getOrganizationServices = (service: ServiceType) => {
   let services: any = localStorage.getItem('organizationServices');
   if (!services) return null;
   services = JSON.parse(services);