updated floweditor

glific · Feb 9, 2023 · 8e454cd · 8e454cd
1 parent 1648651
commit 8e454cd
Show file tree

Hide file tree

Showing 5 changed files with 243 additions and 103 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "@draft-js-plugins/mention": "^5.2.1",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
-    "@glific/flow-editor": "^1.17.1-17",
+    "@glific/flow-editor": "^1.19.1",
     "@jumpn/utils-graphql": "^0.6.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",

diff --git a/src/components/floweditor/FlowEditor.helper.ts b/src/components/floweditor/FlowEditor.helper.ts
@@ -3,82 +3,103 @@ import { FLOW_EDITOR_CONFIGURE_LINK, FLOW_EDITOR_API, CONTACT_CHAT_LINK } from '
 
 const glificBase = FLOW_EDITOR_API;
 
-export const setConfig = (uuid: any) => ({
-  flow: uuid,
-  flowType: 'messaging',
-  localStorage: true,
-  mutable: true,
-  showNodeLabel: false,
-  attachmentsEnabled: false,
-  filters: ['whatsapp', 'classifier'],
+export const setConfig = (uuid: any) => {
+  const services = JSON.parse(localStorage.getItem('organizationServices') || '{}');
 
-  excludeTypes: [
-    'add_contact_urn',
-    'send_email',
-    'call_resthook',
-    'start_session',
-    'open_ticket',
-    'transfer_airtime',
-    'split_by_scheme',
-  ],
+  const config = {
+    flow: uuid,
+    flowType: 'messaging',
+    localStorage: true,
+    mutable: true,
+    showNodeLabel: false,
+    attachmentsEnabled: false,
+    filters: ['whatsapp', 'classifier'],
 
-  excludeOperators: [
-    'has_text',
-    'has_number_lt',
-    'has_number_lte',
-    'has_number_gte',
-    'has_number_gt',
-    'has_date',
-    'has_date_category',
-    'has_date_lt',
-    'has_number_lte',
-    'has_number_gte',
-    'has_number_gt',
-    'has_date_eq',
-    'has_date_gt',
-    'has_time',
-    'has_group',
-    'has_category',
-    'has_state',
-    'has_state_category',
-    'has_district',
-    'has_ward',
-    'has_error',
-    'has_value',
-  ],
-  help: {
-    legacy_extra: 'help.html',
-    missing_dependency: 'help.html',
-    invalid_regex: 'help.html',
-  },
-  endpoints: {
-    simulateStart: false,
-    simulateResume: false,
-    globals: `${glificBase}globals`,
-    groups: `${glificBase}groups`,
-    fields: `${glificBase}fields`,
-    labels: `${glificBase}labels`,
-    channels: `${glificBase}channels`,
-    classifiers: `${glificBase}classifiers`,
-    ticketers: `${glificBase}ticketers`,
-    resthooks: `${glificBase}resthooks`,
-    templates: `${glificBase}templates`,
-    languages: `${glificBase}languages`,
-    attachments: `${glificBase}flow-attachment`,
-    environment: `${glificBase}environment`,
-    recipients: `${glificBase}recipients`,
-    completion: `${glificBase}completion`,
-    activity: `${glificBase}activity`,
-    sheets: `${glificBase}sheets`,
-    flows: `${glificBase}flows`,
-    recents: `${glificBase}recents/`,
-    revisions: `${glificBase}revisions/${uuid}`,
-    editor: FLOW_EDITOR_CONFIGURE_LINK,
-    validateMedia: `${glificBase}validate-media`,
-    interactives: `${glificBase}interactive-templates`,
-    contact: CONTACT_CHAT_LINK,
-  },
-});
+    excludeTypes: [
+      'add_contact_urn',
+      'send_email',
+      'call_resthook',
+      'start_session',
+      'open_ticket',
+      'transfer_airtime',
+      'split_by_scheme',
+    ],
+
+    excludeOperators: [
+      'has_text',
+      'has_number_lt',
+      'has_number_lte',
+      'has_number_gte',
+      'has_number_gt',
+      'has_date',
+      'has_date_category',
+      'has_date_lt',
+      'has_number_lte',
+      'has_number_gte',
+      'has_number_gt',
+      'has_date_eq',
+      'has_date_gt',
+      'has_time',
+      'has_group',
+      'has_category',
+      'has_state',
+      'has_state_category',
+      'has_district',
+      'has_ward',
+      'has_error',
+      'has_value',
+    ],
+    help: {
+      legacy_extra: 'help.html',
+      missing_dependency: 'help.html',
+      invalid_regex: 'help.html',
+    },
+    endpoints: {
+      simulateStart: false,
+      simulateResume: false,
+      globals: `${glificBase}globals`,
+      groups: `${glificBase}groups`,
+      fields: `${glificBase}fields`,
+      labels: `${glificBase}labels`,
+      channels: `${glificBase}channels`,
+      classifiers: `${glificBase}classifiers`,
+      ticketers: `${glificBase}ticketers`,
+      resthooks: `${glificBase}resthooks`,
+      templates: `${glificBase}templates`,
+      languages: `${glificBase}languages`,
+      attachments: `${glificBase}flow-attachment`,
+      environment: `${glificBase}environment`,
+      recipients: `${glificBase}recipients`,
+      contacts: `${glificBase}recipients`,
+      completion: `${glificBase}completion`,
+      activity: `${glificBase}activity`,
+      sheets: `${glificBase}sheets`,
+      flows: `${glificBase}flows`,
+      recents: `${glificBase}recents/`,
+      revisions: `${glificBase}revisions/${uuid}`,
+      editor: FLOW_EDITOR_CONFIGURE_LINK,
+      validateMedia: `${glificBase}validate-media`,
+      interactives: `${glificBase}interactive-templates`,
+      contact: CONTACT_CHAT_LINK,
+    },
+  };
+
+  if (services.googleCloudStorage) {
+    config.attachmentsEnabled = true;
+  }
+  if (!services.dialogflow) {
+    config.excludeTypes.push('split_by_intent');
+  }
+  if (services.flowUuidDisplay) {
+    config.showNodeLabel = true;
+  }
+
+  if (services.contactProfileEnabled) {
+    config.filters.push('profile');
+  }
+
+  return config;
+};
 
 export const loadfiles = (startFlowEditor: any) => {
   const files: Array<HTMLScriptElement | HTMLLinkElement> = [];

diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx
@@ -33,6 +33,7 @@ export const FlowEditor = () => {
   const [publishDialog, setPublishDialog] = useState(false);
   const [simulatorId, setSimulatorId] = useState(0);
   const [loading, setLoading] = useState(true);
+  const [flowEditorLoaded, setFlowEditorLoaded] = useState(false);
 
   const config = setConfig(uuid);
   const [published, setPublished] = useState(false);
@@ -55,25 +56,10 @@ export const FlowEditor = () => {
   const [getFreeFlow] = useLazyQuery(GET_FREE_FLOW, {
     fetchPolicy: 'network-only',
     onCompleted: ({ flowGet }) => {
-      if (flowGet.flow) {
-        const services = JSON.parse(localStorage.getItem('organizationServices') || '{}');
-
-        if (services.googleCloudStorage) {
-          config.attachmentsEnabled = true;
-        }
-        if (!services.dialogflow) {
-          config.excludeTypes.push('split_by_intent');
-        }
-        if (services.flowUuidDisplay) {
-          config.showNodeLabel = true;
-        }
-
-        if (services.contactProfileEnabled) {
-          config.filters.push('profile');
-        }
-
+      if (flowGet.flow && !flowEditorLoaded) {
         showFlowEditor(document.getElementById('flow'), config);
         setLoading(false);
+        setFlowEditorLoaded(true);
       } else if (flowGet.errors && flowGet.errors.length) {
         setDialogMessage(flowGet.errors[0].message);
         setCurrentEditDialogBox(true);