create and manage polls

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

@@ -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/common/HelpData.tsx

@@ -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/category/flows',
+};

src/components/UI/ListIcon/ListIcon.tsx

@@ -29,10 +29,11 @@ import WaCollectionIcon from 'assets/images/icons/SideDrawer/WaGroupCollection';
 import WaGroupIcon from 'assets/images/icons/SideDrawer/WhatsAppGroupIcon';
 import KnowledgeBaseIcon from 'assets/images/icons/SideDrawer/KnowledgeBaseIcon';
 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';
-import DiscordIcon from 'assets/images/icons/Discord/DiscordIcon'
+import DiscordIcon from 'assets/images/icons/Discord/DiscordIcon';
 export interface ListIconProps {
   icon: string | undefined;
   count?: number;
@@ -75,7 +76,8 @@ export const ListIcon = ({ icon = '', selected = false, count }: ListIconProps)
     waGroup: WaGroupIcon,
     knowledgeBase: KnowledgeBaseIcon,
     assistant: Assistant,
-    discord:DiscordIcon
+    discord: DiscordIcon,
+    waPolls: WaPolls,
   };
 
   const iconImage = stringsToIcons[icon] && (

src/config/menu.ts

@@ -51,6 +51,13 @@ const menus = (): Menu[] => [
         type: 'sideDrawer',
         roles: allRoles,
       },
+      {
+        title: 'WhatsApp Polls',
+        path: '/group/polls',
+        icon: 'waPolls',
+        type: 'sideDrawer',
+        roles: allRoles,
+      },
     ],
   },
   {
@@ -279,22 +286,22 @@ const menus = (): Menu[] => [
     roles: staffLevel,
   },
 
-    // {
-    //   title: "What's new",
-    //   path: '/changelog',
-    //   url: NEW_UI_BLOG,
-    //   icon: 'new',
-    //   type: 'sideDrawer',
-    //   roles: staffLevel,
-    // },
-    {
-      title: "Discord",
-      path: '/discord',
-      url: DISCORD_URL,
-      icon: 'discord',
-      type: 'sideDrawer',
-      roles: staffLevel,
-    },
+  // {
+  //   title: "What's new",
+  //   path: '/changelog',
+  //   url: NEW_UI_BLOG,
+  //   icon: 'new',
+  //   type: 'sideDrawer',
+  //   roles: staffLevel,
+  // },
+  {
+    title: 'Discord',
+    path: '/discord',
+    url: DISCORD_URL,
+    icon: 'discord',
+    type: 'sideDrawer',
+    roles: staffLevel,
+  },
 ];
 
 export const getMenus = (menuType = 'sideDrawer', role = 'Staff') =>

src/containers/WaGroups/WaPolls/WaPollOptions/WaPollOptions.module.css

@@ -0,0 +1,46 @@
+.Container {
+  background-color: #f8faf5;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  margin: 1rem 0;
+  padding: 1rem;
+}
+
+.Title {
+  color: #555555;
+  font-weight: 500;
+  line-height: 18px;
+  font-size: 16px;
+  margin-bottom: 1rem;
+}
+
+.OptionField {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.TextField {
+  width: 100%;
+  background-color: #ffffff;
+  border-radius: 12px;
+}
+
+.Options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.Options button {
+  width: 40%;
+  align-self: flex-end;
+}
+
+.RemoveIcon {
+  cursor: pointer;
+}
+
+.EmojiButton {
+  margin-right: -1rem;
+}

src/containers/WaGroups/WaPolls/WaPollOptions/WaPollOptions.tsx

@@ -0,0 +1,146 @@
+import { ClickAwayListener, FormControl, FormHelperText, IconButton, TextField, Typography } from '@mui/material';
+import styles from './WaPollOptions.module.css';
+import { Button } from 'components/UI/Form/Button/Button';
+import CrossIcon from 'assets/images/icons/Cross.svg?react';
+import EmojiPicker from 'components/UI/EmojiPicker/EmojiPicker';
+import { useState } from 'react';
+import EmojiEmotionsOutlinedIcon from '@mui/icons-material/EmojiEmotionsOutlined';
+
+interface WaPollOptionsProps {
+  form: { field: any; errors: any; touched: any; values: any; setFieldValue: any };
+  options: string[];
+}
+
+const emojiStyles = {
+  position: 'absolute',
+  bottom: '25px',
+  right: '-150px',
+  zIndex: 100,
+};
+
+export const WaPollOptions = ({ form: { values, setFieldValue, errors, touched } }: WaPollOptionsProps) => {
+  const handleAddOption = () => {
+    setFieldValue('options', [...values.options, '']);
+  };
+
+  const handleInput = (value: any, ind: any) => {
+    const newOptions = [...values.options];
+    newOptions[ind] = value;
+    setFieldValue('options', newOptions);
+  };
+
+  const handleEmojiAdd = (emoji: any, ind: number) => {
+    console.log(emoji);
+
+    const newOptions = [...values.options];
+    const value = newOptions[ind] + emoji?.native;
+    newOptions[ind] = value;
+    setFieldValue('options', newOptions);
+  };
+
+  const handleRemoveClick = (index: any) => {
+    const newOptions = [...values.options];
+    setFieldValue(
+      'options',
+      newOptions.filter((_, ind: any) => ind !== index)
+    );
+  };
+
+  return (
+    <div className={styles.Container}>
+      <Typography className={styles.Title} variant="h6">
+        Poll Options
+      </Typography>
+      <div className={styles.Options}>
+        {values.options.map((option: any, ind: number) => (
+          <PollOption
+            key={ind}
+            ind={ind}
+            option={option}
+            options={values.options}
+            handleInput={handleInput}
+            handleRemoveClick={handleRemoveClick}
+            handleEmojiAdd={handleEmojiAdd}
+            errors={errors['options']}
+            touched={touched['options']}
+          />
+        ))}
+        {values.options.length < 10 && (
+          <Button variant="outlined" onClick={handleAddOption}>
+            Add Option
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface PollOptionProps {
+  option: string;
+  ind: number;
+  options: any;
+  errors: any;
+  touched: any;
+  handleInput: any;
+  handleRemoveClick: any;
+  handleEmojiAdd: any;
+}
+
+const PollOption = ({
+  option,
+  ind,
+  options,
+  errors,
+  touched,
+  handleInput,
+  handleRemoveClick,
+  handleEmojiAdd,
+}: PollOptionProps) => {
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const hasError = errors && touched && errors[ind] && touched[ind];
+
+  return (
+    <FormControl key={ind} fullWidth error={hasError} color={hasError ? 'error' : 'primary'}>
+      <div className={styles.OptionField}>
+        <TextField
+          className={styles.TextField}
+          variant="outlined"
+          placeholder={`Option ${ind + 1}`}
+          value={option}
+          onChange={(event) => handleInput(event.target.value, ind)}
+          slotProps={{
+            input: {
+              endAdornment: (
+                <ClickAwayListener onClickAway={() => setShowEmojiPicker(false)}>
+                  <IconButton
+                    data-testid="emoji-picker"
+                    color="primary"
+                    aria-label="pick emoji"
+                    component="span"
+                    className={styles.EmojiButton}
+                    onClick={() => setShowEmojiPicker(!showEmojiPicker)}
+                  >
+                    <EmojiEmotionsOutlinedIcon className={styles.EmojiIcon} role="img" aria-label="pick emoji" />
+                  </IconButton>
+                </ClickAwayListener>
+              ),
+            },
+          }}
+        />
+
+        {options.length !== 2 && (
+          <CrossIcon
+            className={styles.RemoveIcon}
+            title="Remove"
+            data-testid="cross-icon"
+            onClick={() => handleRemoveClick(ind)}
+          />
+        )}
+        {showEmojiPicker && (
+          <EmojiPicker onEmojiSelect={(emoji: any) => handleEmojiAdd(emoji, ind)} displayStyle={emojiStyles} />
+        )}
+      </div>
+      {hasError ? <FormHelperText>{errors[ind]}</FormHelperText> : null}
+    </FormControl>
+  );
+};

src/containers/WaGroups/WaPolls/WaPolls.module.css

@@ -0,0 +1,7 @@
+.AllowMultiple {
+  color: #555555;
+  font-weight: 400;
+  line-height: 18px;
+  font-size: 16px;
+  padding: 1rem 0;
+}