Merge pull request #3185 from glific/feat/wa_polls

WA Polls: Create and manage polls

Author: kurund

src/assets/images/Polls.svg

@@ -0,0 +1,9 @@
+const SvgComponent = ({ color }: { color: string }) => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M13 7C13.2833 7 13.5208 6.90417 13.7125 6.7125C13.9042 6.52083 14 6.28333 14 6C14 5.71667 13.9042 5.47917 13.7125 5.2875C13.5208 5.09583 13.2833 5 13 5H10C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6C9 6.28333 9.09583 6.52083 9.2875 6.7125C9.47917 6.90417 9.71667 7 10 7H13ZM13 13C13.2833 13 13.5208 12.9042 13.7125 12.7125C13.9042 12.5208 14 12.2833 14 12C14 11.7167 13.9042 11.4792 13.7125 11.2875C13.5208 11.0958 13.2833 11 13 11H10C9.71667 11 9.47917 11.0958 9.2875 11.2875C9.09583 11.4792 9 11.7167 9 12C9 12.2833 9.09583 12.5208 9.2875 12.7125C9.47917 12.9042 9.71667 13 10 13H13ZM6 8C6.55 8 7.02083 7.80417 7.4125 7.4125C7.80417 7.02083 8 6.55 8 6C8 5.45 7.80417 4.97917 7.4125 4.5875C7.02083 4.19583 6.55 4 6 4C5.45 4 4.97917 4.19583 4.5875 4.5875C4.19583 4.97917 4 5.45 4 6C4 6.55 4.19583 7.02083 4.5875 7.4125C4.97917 7.80417 5.45 8 6 8ZM6 14C6.55 14 7.02083 13.8042 7.4125 13.4125C7.80417 13.0208 8 12.55 8 12C8 11.45 7.80417 10.9792 7.4125 10.5875C7.02083 10.1958 6.55 10 6 10C5.45 10 4.97917 10.1958 4.5875 10.5875C4.19583 10.9792 4 11.45 4 12C4 12.55 4.19583 13.0208 4.5875 13.4125C4.97917 13.8042 5.45 14 6 14ZM2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H16C16.55 0 17.0208 0.195833 17.4125 0.5875C17.8042 0.979167 18 1.45 18 2V16C18 16.55 17.8042 17.0208 17.4125 17.4125C17.0208 17.8042 16.55 18 16 18H2ZM2 16H16V2H2V16Z"
+      fill={color}
+    />
+  </svg>
+);
+export default SvgComponent;

src/assets/images/icons/Poll.svg

@@ -129,3 +129,8 @@ export const templateStatusInfo: HelpDataProps = {
   ),
   link: 'https://docs.gupshup.io/docs/message-template-approvals-statuses',
 };
+
+export const pollsInfo: HelpDataProps = {
+  heading: 'An overview of all the polls created to date',
+  link: 'https://glific.github.io/docs/docs/WhatsApp%20Groups%20Automation/Sending%20Polls%20To%20WhatsApp%20Groups',
+};

src/assets/images/icons/SideDrawer/WaPolls.tsx

@@ -28,6 +28,7 @@ import WaChatIcon from 'assets/images/icons/SideDrawer/WaGroupChat';
 import WaCollectionIcon from 'assets/images/icons/SideDrawer/WaGroupCollection';
 import WaGroupIcon from 'assets/images/icons/SideDrawer/WhatsAppGroupIcon';
 import Assistant from 'assets/images/icons/SideDrawer/Assistant';
+import WaPolls from 'assets/images/icons/SideDrawer/WaPolls';
 import styles from './ListIcon.module.css';
 import FiberNewIcon from '@mui/icons-material/FiberNew';
 import { Badge } from '@mui/material';
@@ -74,6 +75,7 @@ export const ListIcon = ({ icon = '', selected = false, count }: ListIconProps)
     waGroup: WaGroupIcon,
     assistant: Assistant,
     discord: DiscordIcon,
+    waPolls: WaPolls,
   };
 
   const iconImage = stringsToIcons[icon] && (

src/common/HelpData.tsx

@@ -29,6 +29,7 @@
   background: white;
   width: 200px;
   margin-top: 4px;
+  overflow-x: hidden;
 }
 
 .StickerReceivedMessage {

src/components/UI/ListIcon/ListIcon.tsx

@@ -52,6 +52,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 { PollMessage } from 'containers/Chat/ChatMessages/ChatMessage/PollMessage/PollMessage';
 
 export interface SimulatorProps {
   setShowSimulator?: any;
@@ -63,6 +64,7 @@ export interface SimulatorProps {
   interactiveMessage?: any;
   showHeader?: boolean;
   hasResetButton?: boolean;
+  pollContent?: any;
 }
 
 interface Sender {
@@ -124,6 +126,7 @@ const Simulator = ({
   interactiveMessage,
   showHeader = true,
   hasResetButton = false,
+  pollContent,
 }: SimulatorProps) => {
   const [inputMessage, setInputMessage] = useState('');
   const [simulatedMessages, setSimulatedMessage] = useState<any>();
@@ -268,7 +271,13 @@ const Simulator = ({
       });
   };
 
-  const renderMessage = (messageObject: any, direction: string, index: number, isInteractive: boolean = false) => {
+  const renderMessage = (
+    messageObject: any,
+    direction: string,
+    index: number,
+    isInteractive: boolean,
+    isPollContent: boolean = false
+  ) => {
     const { insertedAt, type, media, location, interactiveContent, bspMessageId, templateType } = messageObject;
 
     const messageType = isInteractive ? templateType : type;
@@ -320,26 +329,31 @@ const Simulator = ({
       }
     }
 
+    let messageBody: any = (
+      <>
+        <ChatMessageType
+          type={messageType}
+          media={media}
+          body={body}
+          location={location}
+          isSimulatedMessage={isSimulatedMessage}
+        />
+        <TimeComponent direction={direction} insertedAt={insertedAt} />
+      </>
+    );
+    if (isInteractiveContentPresent && direction !== 'send') {
+      messageBody = template;
+    } else if (isPollContent) {
+      messageBody = <PollMessage pollContent={pollContent} isSimulator />;
+    }
+
     return (
       <div key={index}>
         <div
           className={getStyleForDirection(direction, isInteractiveContentPresent, messageType)}
           data-testid="simulatorMessage"
         >
-          {isInteractiveContentPresent && direction !== 'send' ? (
-            template
-          ) : (
-            <>
-              <ChatMessageType
-                type={messageType}
-                media={media}
-                body={body}
-                location={location}
-                isSimulatedMessage={isSimulatedMessage}
-              />
-              <TimeComponent direction={direction} insertedAt={insertedAt} />
-            </>
-          )}
+          {messageBody}
         </div>
         <div className={styles.TemplateButtons}>
           <TemplateButtons
@@ -356,17 +370,17 @@ const Simulator = ({
     const chatMessage = messages
       .map((simulatorMessage: any, index: number) => {
         if (simulatorMessage.receiver.id === simulatorId) {
-          return renderMessage(simulatorMessage, 'received', index);
+          return renderMessage(simulatorMessage, 'received', index, false);
         }
-        return renderMessage(simulatorMessage, 'send', index);
+        return renderMessage(simulatorMessage, 'send', index, false);
       })
       .reverse();
     setSimulatedMessage(chatMessage);
   };
 
   const getPreviewMessage = () => {
     if (message && message.type) {
-      const previewMessage = renderMessage(message, 'received', 0);
+      const previewMessage = renderMessage(message, 'received', 0, false);
       if (['STICKER', 'AUDIO'].includes(message.type)) {
         setSimulatedMessage(previewMessage);
       } else if (message.body || message.media?.caption) {
@@ -380,6 +394,7 @@ const Simulator = ({
     if (interactiveMessage) {
       const { templateType, interactiveContent } = interactiveMessage;
       const previewMessage = renderMessage(interactiveMessage, 'received', 0, true);
+
       setSimulatedMessage(previewMessage);
       if (templateType === LIST) {
         const { items } = JSON.parse(interactiveContent);
@@ -388,6 +403,11 @@ const Simulator = ({
         setIsDrawerOpen(false);
       }
     }
+
+    if (pollContent) {
+      const previewMessage = renderMessage(pollContent, 'received', 0, false, true);
+      setSimulatedMessage(previewMessage);
+    }
   };
 
   useEffect(() => {

src/components/simulator/Simulator.module.css

@@ -51,6 +51,13 @@ const menus = (): Menu[] => [
         type: 'sideDrawer',
         roles: allRoles,
       },
+      {
+        title: 'Group Polls',
+        path: '/group/polls',
+        icon: 'waPolls',
+        type: 'sideDrawer',
+        roles: allRoles,
+      },
     ],
   },
   {

src/components/simulator/Simulator.tsx

@@ -10,6 +10,7 @@ import AudioIconDark from 'assets/images/icons/Audio/Dark.svg?react';
 import DocumentIconDark from 'assets/images/icons/Document/Dark.svg?react';
 import StickerIconDark from 'assets/images/icons/Sticker/Dark.svg?react';
 import LocationIconDark from 'assets/images/icons/Location/Dark.svg?react';
+import PollIcon from 'assets/images/icons/Poll.svg?react';
 
 import styles from './MessageType.module.css';
 
@@ -26,6 +27,7 @@ const lightIcons: any = {
   DOCUMENT: <DocumentIcon />,
   STICKER: <StickerIcon />,
   LOCATION: <LocationIcon />,
+  POLL: <PollIcon />,
 };
 
 const darkIcons: any = {
@@ -51,6 +53,7 @@ export const MessageType = ({ type, body = '', color = 'light' }: MessageTypePro
     QUICK_REPLY: 'Quick Reply',
     LIST: 'List',
     LOCATION_REQUEST_MESSAGE: 'Location Request',
+    POLL: body,
   };
 
   const option = (

src/config/menu.ts

@@ -150,6 +150,7 @@
 .Inline {
   display: flex;
 }
+
 .SendBy {
   display: flex;
   align-items: flex-end;
@@ -298,3 +299,7 @@
   padding-bottom: 8px;
   font-weight: bold;
 }
+
+.NoIcon {
+  margin: 0 1rem;
+}