Merge pull request #3098 from glific/template-flows-keyword

Added `template` prefix for template flows

src/components/floweditor/FlowEditor.test.tsx

@@ -14,6 +14,7 @@ import {
   getFreeFlow,
   resetFlowCount,
   getFlowTranslations,
+  getTemplateFlow,
 } from 'mocks/Flow';
 import { conversationQuery } from 'mocks/Chat';
 import {
@@ -38,6 +39,10 @@ vi.mock('react-router-dom', async () => {
 vi.mock('axios');
 const mockedAxios = axios as any;
 
+vi.mock('../simulator/Simulator', () => ({
+  default: ({ message }: { message: string }) => <div data-testid="simulator">{message}</div>, // Mocking the component's behavior
+}));
+
 const mocks = [
   messageReceivedSubscription({ organizationId: null }),
   messageSendSubscription({ organizationId: null }),
@@ -58,6 +63,7 @@ const mocks = [
 const activeFlowMocks = [...mocks, getActiveFlow];
 const inActiveFlowMocks = [...mocks, getInactiveFlow];
 const noKeywordMocks = [...mocks, getFlowWithoutKeyword, resetFlowCount];
+const templateFlowMocks = [...mocks, getTemplateFlow, resetFlowCount];
 
 const wrapperFunction = (mocks: any) => (
   <MockedProvider mocks={mocks} addTypename={false}>
@@ -197,12 +203,12 @@ test('start with a keyword message if the simulator opens in floweditor screen',
   await waitFor(() => {
     expect(screen.findByText('help workflow'));
   });
+
   fireEvent.click(screen.getByTestId('previewButton'));
+
   await waitFor(() => {
-    expect(screen.getByTestId('simulator-container'));
+    expect(screen.getByTestId('simulator')).toHaveTextContent('draft:help');
   });
-
-  // need some assertion
 });
 
 test('if the flow the inactive', async () => {
@@ -217,7 +223,9 @@ test('if the flow the inactive', async () => {
     expect(screen.findByTestId('beneficiaryName'));
   });
 
-  // need some assertion
+  await waitFor(() => {
+    expect(screen.getByTestId('simulator')).toHaveTextContent('Sorry, the flow is not active');
+  });
 });
 
 test('flow with no keywords', async () => {
@@ -228,11 +236,10 @@ test('flow with no keywords', async () => {
     expect(screen.findByText('help workflow'));
   });
   fireEvent.click(screen.getByTestId('previewButton'));
+
   await waitFor(() => {
-    expect(screen.findByTestId('beneficiaryName'));
+    expect(screen.getByTestId('simulator')).toHaveTextContent('No keyword found');
   });
-
-  // need some assertion
 });
 
 test('reset flow counts', async () => {
@@ -293,3 +300,17 @@ test('it translates the flow', async () => {
     expect(notificationSpy).toHaveBeenCalled();
   });
 });
+
+test('template words should have template: prefix', async () => {
+  mockedAxios.post.mockImplementation(() => Promise.resolve({ data: {} }));
+  render(wrapperFunction(templateFlowMocks));
+
+  await waitFor(() => {
+    expect(screen.findByText('help workflow'));
+  });
+  fireEvent.click(screen.getByTestId('previewButton'));
+
+  await waitFor(() => {
+    expect(screen.getByTestId('simulator')).toHaveTextContent('template:help workflow');
+  });
+});

src/components/floweditor/FlowEditor.tsx

@@ -9,7 +9,7 @@ import TranslateIcon from 'assets/images/icons/LanguageTranslation.svg?react';
 import PublishIcon from 'assets/images/icons/PublishIcon.svg?react';
 import { Button } from 'components/UI/Form/Button/Button';
 import { APP_NAME } from 'config/index';
-import { Simulator } from 'components/simulator/Simulator';
+import Simulator from 'components/simulator/Simulator';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
 import { setErrorMessage, setNotification } from 'common/notification';
 import { PUBLISH_FLOW, RESET_FLOW_COUNT } from 'graphql/mutations/Flow';
@@ -332,9 +332,9 @@ export const FlowEditor = () => {
   const getFlowKeyword = () => {
     const flows = flowName ? flowName.flows : null;
     if (flows && flows.length > 0) {
-      const { isActive, keywords, isTemplate } = flows[0];
+      const { isActive, keywords, isTemplate, name } = flows[0];
       if (isTemplate) {
-        return 'temp:';
+        return `template:${name}`;
       } else if (isActive && keywords.length > 0) {
         return `draft:${keywords[0]}`;
       } else if (keywords.length === 0) {
@@ -450,7 +450,6 @@ export const FlowEditor = () => {
           hasResetButton
           flowSimulator
           message={getFlowKeyword()}
-          flowId={flowId}
         />
       )}
       {modal}

src/components/simulator/Simulator.test.tsx

@@ -12,7 +12,7 @@ import {
   simulatorReleaseSubscription,
   simulatorSearchQuery,
 } from 'mocks/Simulator';
-import { Simulator } from './Simulator';
+import Simulator from './Simulator';
 import { setUserSession } from 'services/AuthService';
 
 vi.mock('axios');

src/components/simulator/Simulator.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useApolloClient, useLazyQuery, useMutation, useSubscription } from '@apollo/client';
+import { useApolloClient, useLazyQuery, 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,7 +56,6 @@ 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;
@@ -68,7 +67,6 @@ export interface SimulatorProps {
   interactiveMessage?: any;
   showHeader?: boolean;
   hasResetButton?: boolean;
-  flowId?: string;
 }
 
 interface Sender {
@@ -126,15 +124,14 @@ const getSimulatorVariables = (id: any) => ({
   },
 });
 
-export const Simulator = ({
+const Simulator = ({
   setShowSimulator = () => {},
   message,
   isPreviewMessage,
   getSimulatorId = () => {},
   interactiveMessage,
   showHeader = true,
   hasResetButton = false,
-  flowId = '',
 }: SimulatorProps) => {
   const [inputMessage, setInputMessage] = useState('');
   const [simulatedMessages, setSimulatedMessage] = useState<any>();
@@ -158,8 +155,6 @@ export const Simulator = ({
   // 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;
 
@@ -182,15 +177,6 @@ export const Simulator = ({
     } else {
       payload.text = sendMessageText;
     }
-    if (sendMessageText.startsWith('temp:')) {
-      addFlow({
-        variables: {
-          flowId: flowId,
-          contactId: senderDetails.id,
-        },
-      });
-      return;
-    }
 
     axios
       .post(GUPSHUP_CALLBACK_URL, {
@@ -639,3 +625,5 @@ export const Simulator = ({
     <BackdropLoader text="Please wait while the simulator is loading" />
   );
 };
+
+export default Simulator;

src/containers/Chat/ChatInterface/ChatInterface.tsx

@@ -4,7 +4,7 @@ import { useQuery } from '@apollo/client';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-import { Simulator } from 'components/simulator/Simulator';
+import Simulator from 'components/simulator/Simulator';
 import { Loading } from 'components/UI/Layout/Loading/Loading';
 import { SEARCH_QUERY } from 'graphql/queries/Search';
 import { getUserRole } from 'context/role';

src/containers/InteractiveMessage/InteractiveMessage.tsx

@@ -18,7 +18,7 @@ import { FormLayout } from 'containers/Form/FormLayout';
 import { Input } from 'components/UI/Form/Input/Input';
 import { EmojiInput } from 'components/UI/Form/EmojiInput/EmojiInput';
 import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
-import { Simulator } from 'components/simulator/Simulator';
+import  Simulator  from 'components/simulator/Simulator';
 import { LanguageBar } from 'components/UI/LanguageBar/LanguageBar';
 import {
   LIST,

src/containers/Template/Form/HSM/HSM.tsx

@@ -8,7 +8,7 @@ import { GET_HSM_CATEGORIES, GET_SHORTCODES } from 'graphql/queries/Template';
 import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 import { Input } from 'components/UI/Form/Input/Input';
 import { Loading } from 'components/UI/Layout/Loading/Loading';
-import { Simulator } from 'components/simulator/Simulator';
+import Simulator from 'components/simulator/Simulator';
 import Template from '../Template';
 import styles from './HSM.module.css';
 import { Checkbox } from 'components/UI/Form/Checkbox/Checkbox';

src/mocks/Flow.tsx

@@ -267,7 +267,7 @@ export const filterFlowWithNameOrKeywordOrTagQuery = {
   },
 };
 
-const getFlowDetails = (isActive = true, keywords = ['help']) => ({
+const getFlowDetails = (isActive = true, keywords = ['help'], isTemplate = false) => ({
   request: {
     query: GET_FLOW_DETAILS,
     variables: {
@@ -286,7 +286,7 @@ const getFlowDetails = (isActive = true, keywords = ['help']) => ({
           isActive,
           name: 'help workflow',
           keywords,
-          isTemplate: false,
+          isTemplate,
         },
       ],
     },
@@ -296,6 +296,7 @@ const getFlowDetails = (isActive = true, keywords = ['help']) => ({
 export const getActiveFlow = getFlowDetails();
 export const getInactiveFlow = getFlowDetails(false);
 export const getFlowWithoutKeyword = getFlowDetails(true, []);
+export const getTemplateFlow = getFlowDetails(true, [], true);
 
 export const getFlowCountQuery = (filter: any) => ({
   request: {