Merge pull request #263 from weni-ai/fix/simulator

[RS-264] - Fix: The simulator doesn't recognize WhatsApp card messages.
weni-ai · Oct 17, 2024 · 760ed1f · 760ed1f
2 parents 2fabce8 + 0205c6d
commit 760ed1f
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 5 deletions.
diff --git a/src/components/simulator/LogEvent.tsx b/src/components/simulator/LogEvent.tsx
@@ -33,6 +33,12 @@ interface MsgProps {
   urn: string;
   attachments?: string[];
   quick_replies?: string[];
+  list_message?: {
+    list_items: {
+      title: string;
+      uuid: string;
+    }[];
+  };
 }
 
 interface WebRequestLog {
@@ -458,6 +464,14 @@ export default class LogEvent extends React.Component<
           Direction.MT,
           logStyle,
         );
+
+      case 'msg_wpp_created':
+        return renderMessage(
+          this.props.msg.text,
+          this.props.msg.attachments,
+          Direction.MT,
+          logStyle,
+        );
       case 'ivr_created':
         return renderMessage(
           this.props.msg.text,

diff --git a/src/components/simulator/Simulator.tsx b/src/components/simulator/Simulator.tsx
@@ -99,6 +99,7 @@ enum DrawerType {
   digit = 'digit',
   digits = 'digits',
   quickReplies = 'quickReplies',
+  optionList = 'optionList',
 }
 
 interface SimulatorState {
@@ -114,6 +115,7 @@ interface SimulatorState {
   keypadEntry: string;
 
   quickReplies?: string[];
+  optionList?: string[];
 
   // are we currently simulating a sprint
   sprinting: boolean;
@@ -320,6 +322,7 @@ export class Simulator extends React.Component<SimulatorProps, SimulatorState> {
       const toAdd = [];
 
       let quickReplies: string[] = null;
+      let optionList: string[] = null;
 
       let messageFound = false;
       while (events.length > 0 && !messageFound) {
@@ -363,6 +366,10 @@ export class Simulator extends React.Component<SimulatorProps, SimulatorState> {
             // save off any quick replies we might have
             if (event.msg.quick_replies) {
               quickReplies = event.msg.quick_replies;
+            } else if (event.msg.list_message) {
+              optionList = event.msg.list_message.list_items.map(
+                item => item.title,
+              );
             }
           }
         }
@@ -378,6 +385,9 @@ export class Simulator extends React.Component<SimulatorProps, SimulatorState> {
       if (quickReplies !== null) {
         newState.quickReplies = quickReplies;
       }
+      if (optionList !== null) {
+        newState.optionList = optionList;
+      }
 
       this.scrollToBottom();
 
@@ -398,7 +408,7 @@ export class Simulator extends React.Component<SimulatorProps, SimulatorState> {
   private updateRunContext(runContext: RunContext, msg?: PostMessage): void {
     const wasJustActive =
       this.state.active || (runContext.events && runContext.events.length > 0);
-    this.setState({ quickReplies: [] }, () => {
+    this.setState({ quickReplies: [], optionList: [] }, () => {
       if (!runContext.events || (runContext.events.length === 0 && msg)) {
         const runs = runContext.session.runs;
         const run = runs[runs.length - 1];
@@ -486,6 +496,11 @@ export class Simulator extends React.Component<SimulatorProps, SimulatorState> {
             drawerOpen = true;
           }
 
+          if (!drawerType && this.hasOptions()) {
+            drawerType = DrawerType.optionList;
+            drawerOpen = true;
+          }
+
           this.setState(
             {
               active,
@@ -837,6 +852,24 @@ export class Simulator extends React.Component<SimulatorProps, SimulatorState> {
     );
   }
 
+  private getOptionsDrawer(): JSX.Element {
+    return (
+      <div className={styles.quick_replies}>
+        {this.state.optionList.map(option => (
+          <div
+            className={styles.quick_reply}
+            onClick={() => {
+              this.resume(option);
+            }}
+            key={`option_${option}`}
+          >
+            {option}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
   private handleKeyPress(btn: string, multiple: boolean): void {
     if (!multiple) {
       this.resume(btn);
@@ -900,6 +933,8 @@ export class Simulator extends React.Component<SimulatorProps, SimulatorState> {
         return this.getVideoDrawer();
       case DrawerType.quickReplies:
         return this.getQuickRepliesDrawer();
+      case DrawerType.optionList:
+        return this.getOptionsDrawer();
       case DrawerType.digits:
       case DrawerType.digit:
         return this.getKeypadDrawer(
@@ -950,6 +985,10 @@ export class Simulator extends React.Component<SimulatorProps, SimulatorState> {
     return (this.state.quickReplies || []).length > 0;
   }
 
+  private hasOptions(): boolean {
+    return (this.state.optionList || []).length > 0;
+  }
+
   private handleHideAttachments(): void {
     this.setState(
       {
@@ -961,6 +1000,10 @@ export class Simulator extends React.Component<SimulatorProps, SimulatorState> {
           window.setTimeout(() => {
             this.showAttachmentDrawer(DrawerType.quickReplies);
           }, 300);
+        } else if (this.hasOptions()) {
+          window.setTimeout(() => {
+            this.showAttachmentDrawer(DrawerType.optionList);
+          }, 300);
         }
       },
     );

diff --git a/src/components/simulator/helpers.ts b/src/components/simulator/helpers.ts
@@ -87,13 +87,18 @@ export const getSimulationAssets = (
 };
 
 export const isMessage = (event: EventProps): boolean => {
-  return !!['msg_created', 'msg_received', 'ivr_created'].find(
-    type => type === event.type,
-  );
+  return !![
+    'msg_created',
+    'msg_wpp_created',
+    'msg_received',
+    'ivr_created',
+  ].find(type => type === event.type);
 };
 
 export const isMT = (event: EventProps): boolean => {
-  return !!['msg_created', 'ivr_created'].find(type => type === event.type);
+  return !!['msg_created', 'msg_wpp_created', 'ivr_created'].find(
+    type => type === event.type,
+  );
 };
 
 export const hasPopulatedKey = (obj: any): boolean => {