Added restart option in simulator

src/components/floweditor/FlowEditor.tsx

@@ -511,6 +511,7 @@ export const FlowEditor = (props: FlowEditorProps) => {
       <Simulator
         showSimulator={simulatorId > 0}
         setSimulatorId={setSimulatorId}
+        hasResetButton
         flowSimulator
         message={flowKeyword}
         resetMessage={resetMessage}

src/components/simulator/Simulator.module.css

@@ -104,7 +104,7 @@
   -webkit-filter: drop-shadow(0px 0px 10px #222);
   filter: drop-shadow(0px 0px 10px #222);
   border-radius: 12px;
-  left: -325px;
+  right: 50px;
   top: -50px;
   position: absolute;
   height: 576px;
@@ -253,8 +253,16 @@
 
 .ClearIcon {
   position: absolute;
-  top: -7px;
-  right: 0px;
+  top: -3px;
+  color: #073f24;
+  right: -20px;
+  cursor: pointer;
+}
+
+.ResetIcon {
+  position: absolute;
+  top: 30px;
+  right: -18px;
   cursor: pointer;
 }
 

src/components/simulator/Simulator.test.tsx

@@ -11,9 +11,11 @@ import {
 } from 'mocks/Simulator';
 import { Simulator } from './Simulator';
 import axios from 'axios';
+import { setUserSession } from 'services/AuthService';
 
 jest.mock('axios');
 
+setUserSession(JSON.stringify({ roles: ['Admin'], organization: { id: '1' } }));
 const mockSetShowSimulator = jest.fn();
 
 const mocks = [
@@ -171,6 +173,7 @@ export const searchQuery = {
           id: '2',
           name: 'Effie Cormier',
           phone: '987654321',
+          fields: '{}',
           maskedPhone: '98****321',
           lastMessageAt: new Date(),
           status: 'VALID',
@@ -227,3 +230,26 @@ test('simulator should render template message', () => {
     </ApolloProvider>
   );
 });
+
+const getFlowKeywordMock = jest.fn();
+const props = {
+  showSimulator: true,
+  setSimulatorId: jest.fn(),
+  simulatorIcon: true,
+  isPreviewMessage: false,
+  flowSimulator: false,
+  getFlowKeyword: getFlowKeywordMock,
+  hasResetButton: true,
+};
+
+test('simulator should reset on clicking the reset button message', () => {
+  const { getByTestId } = render(
+    <MockedProvider mocks={mocks}>
+      <Simulator {...props} />
+    </MockedProvider>
+  );
+
+  const resetButton = getByTestId('resetIcon');
+  fireEvent.click(resetButton);
+  expect(getFlowKeywordMock).toBeCalled();
+});

src/components/simulator/Simulator.tsx

@@ -20,6 +20,7 @@ import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';
 import { Button as FormButton } from 'components/UI/Form/Button/Button';
 import DefaultWhatsappImage from 'assets/images/whatsappDefault.jpg';
 import { ReactComponent as SimulatorIcon } from 'assets/images/icons/Simulator.svg';
+import { ReactComponent as ResetIcon } from 'assets/images/icons/Reset/Dark.svg';
 import {
   TIME_FORMAT,
   SAMPLE_MEDIA_FOR_SIMULATOR,
@@ -65,6 +66,7 @@ export interface SimulatorProps {
   getFlowKeyword?: Function;
   interactiveMessage?: any;
   showHeader?: boolean;
+  hasResetButton?: boolean;
 }
 
 const TimeComponent = (direction: any, insertedAt: any) => (
@@ -76,6 +78,16 @@ const TimeComponent = (direction: any, insertedAt: any) => (
   </>
 );
 
+const getSimulatorVariables = (id: any) => ({
+  contactOpts: {
+    limit: 1,
+  },
+  filter: { id },
+  messageOpts: {
+    limit: DEFAULT_MESSAGE_LIMIT,
+  },
+});
+
 export const Simulator: React.FC<SimulatorProps> = ({
   showSimulator,
   setSimulatorId,
@@ -87,6 +99,7 @@ export const Simulator: React.FC<SimulatorProps> = ({
   getFlowKeyword,
   interactiveMessage,
   showHeader = true,
+  hasResetButton = false,
 }: SimulatorProps) => {
   const [inputMessage, setInputMessage] = useState('');
   const [simulatedMessages, setSimulatedMessage] = useState<any>();
@@ -152,17 +165,7 @@ export const Simulator: React.FC<SimulatorProps> = ({
     fetchPolicy: 'network-only',
     onCompleted: (simulatorData) => {
       if (simulatorData.simulatorGet) {
-        loadSimulator({
-          variables: {
-            contactOpts: {
-              limit: 1,
-            },
-            filter: { id: simulatorData.simulatorGet.id },
-            messageOpts: {
-              limit: DEFAULT_MESSAGE_LIMIT,
-            },
-          },
-        });
+        loadSimulator({ variables: getSimulatorVariables(simulatorData.simulatorGet.id) });
         setSimulatorId(simulatorData.simulatorGet.id);
       } else {
         setNotification(
@@ -516,13 +519,26 @@ export const Simulator: React.FC<SimulatorProps> = ({
         <div>
           <div id="simulator" className={styles.Simulator}>
             {!isPreviewMessage && (
-              <ClearIcon
-                className={styles.ClearIcon}
-                onClick={() => {
-                  releaseUserSimulator();
-                }}
-                data-testid="clearIcon"
-              />
+              <>
+                <ClearIcon
+                  className={styles.ClearIcon}
+                  onClick={() => {
+                    releaseUserSimulator();
+                  }}
+                  data-testid="clearIcon"
+                />
+                {hasResetButton && (
+                  <ResetIcon
+                    data-testid="resetIcon"
+                    className={styles.ResetIcon}
+                    onClick={() => {
+                      if (getFlowKeyword) {
+                        getFlowKeyword();
+                      }
+                    }}
+                  />
+                )}
+              </>
             )}
 
             <div className={styles.Screen}>
@@ -631,7 +647,7 @@ export const Simulator: React.FC<SimulatorProps> = ({
             }}
           >
             Preview
-            {showSimulator ? <CancelOutlinedIcon className={styles.CrossIcon} /> : null}
+            {showSimulator && <CancelOutlinedIcon className={styles.CrossIcon} />}
           </FormButton>
         </div>
       )}

src/mocks/Simulator.tsx

@@ -14,11 +14,13 @@ export const simulatorReleaseSubscription = {
 export const simulatorReleaseQuery = {
   request: {
     query: RELEASE_SIMULATOR,
-    variables: {},
+    variables: { organizationId: '1' },
   },
   result: {
-    simulatorRelease: {
-      id: '1',
+    data: {
+      simulatorRelease: {
+        id: '1',
+      },
     },
   },
 };