Merge pull request #3030 from glific/remove-keywords

Removed keyword for template flows

src/components/floweditor/FlowEditor.tsx

@@ -332,8 +332,10 @@ export const FlowEditor = () => {
   const getFlowKeyword = () => {
     const flows = flowName ? flowName.flows : null;
     if (flows && flows.length > 0) {
-      const { isActive, keywords } = flows[0];
-      if (isActive && keywords.length > 0) {
+      const { isActive, keywords, isTemplate } = flows[0];
+      if (isTemplate) {
+        return 'temp:';
+      } else if (isActive && keywords.length > 0) {
         return `draft:${keywords[0]}`;
       } else if (keywords.length === 0) {
         return 'No keyword found';
@@ -448,6 +450,7 @@ export const FlowEditor = () => {
           hasResetButton
           flowSimulator
           message={getFlowKeyword()}
+          flowId={flowId}
         />
       )}
       {modal}

src/components/simulator/Simulator.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useApolloClient, useLazyQuery, useSubscription } from '@apollo/client';
+import { useApolloClient, useLazyQuery, useMutation, useSubscription } from '@apollo/client';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import { Button, ClickAwayListener } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
@@ -56,6 +56,7 @@ import styles from './Simulator.module.css';
 import { LocationRequestTemplate } from 'containers/Chat/ChatMessages/ChatMessage/LocationRequestTemplate/LocationRequestTemplate';
 import { BackdropLoader } from 'containers/Flow/FlowTranslation';
 import { SIMULATOR_RELEASE_SUBSCRIPTION } from 'graphql/subscriptions/PeriodicInfo';
+import { ADD_FLOW_TO_CONTACT } from 'graphql/mutations/Flow';
 
 export interface SimulatorProps {
   setShowSimulator?: any;
@@ -67,11 +68,13 @@ export interface SimulatorProps {
   interactiveMessage?: any;
   showHeader?: boolean;
   hasResetButton?: boolean;
+  flowId?: string;
 }
 
 interface Sender {
   name: string;
   phone: string;
+  id: string;
 }
 
 const getStyleForDirection = (
@@ -131,6 +134,7 @@ export const Simulator = ({
   interactiveMessage,
   showHeader = true,
   hasResetButton = false,
+  flowId = '',
 }: SimulatorProps) => {
   const [inputMessage, setInputMessage] = useState('');
   const [simulatedMessages, setSimulatedMessage] = useState<any>();
@@ -149,10 +153,13 @@ export const Simulator = ({
   const sender: Sender = {
     name: '',
     phone: '',
+    id: '',
   };
   // chat messages will be shown on simulator
   const isSimulatedMessage = true;
 
+  const [addFlow] = useMutation(ADD_FLOW_TO_CONTACT);
+
   const sendMessage = (senderDetails: Sender, interactivePayload?: any, templateValue?: any) => {
     const sendMessageText = inputMessage === '' && message ? message : inputMessage;
 
@@ -175,6 +182,15 @@ export const Simulator = ({
     } else {
       payload.text = sendMessageText;
     }
+    if (sendMessageText.startsWith('temp:')) {
+      addFlow({
+        variables: {
+          flowId: flowId,
+          contactId: senderDetails.id,
+        },
+      });
+      return;
+    }
 
     axios
       .post(GUPSHUP_CALLBACK_URL, {
@@ -243,6 +259,7 @@ export const Simulator = ({
     simulatorId = simulatedContact[0].contact.id;
     sender.name = simulatedContact[0].contact.name;
     sender.phone = simulatedContact[0].contact.phone;
+    sender.id = simulatedContact[0].contact.id;
   }
 
   const releaseUserSimulator = () => {
@@ -599,6 +616,7 @@ export const Simulator = ({
                 sendMessage({
                   name: searchData.search[0].contact.name,
                   phone: searchData.search[0].contact.phone,
+                  id: searchData.search[0].contact.id,
                 });
               }
             });

src/graphql/queries/Flow.ts

@@ -76,6 +76,7 @@ export const GET_FLOW_DETAILS = gql`
       isActive
       name
       keywords
+      isTemplate
     }
   }
 `;