Merge branch 'master' into bug/checkbox-ui

glific · Aug 30, 2022 · ddb6c15 · ddb6c15
2 parents 030f573 + 94aebec
commit ddb6c15
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 19 deletions.
diff --git a/src/components/UI/SearchDialogBox/SearchDialogBox.module.css b/src/components/UI/SearchDialogBox/SearchDialogBox.module.css
@@ -29,3 +29,9 @@
 .Autocomplete {
   margin-bottom: 10px !important;
 }
+
+.Description {
+  font-size: 16px;
+  color: #93a29b;
+  margin-bottom: 8px;
+}
diff --git a/src/components/UI/SearchDialogBox/SearchDialogBox.tsx b/src/components/UI/SearchDialogBox/SearchDialogBox.tsx
@@ -11,7 +11,7 @@ export interface SearchDialogBoxProps {
   handleOk: Function;
   handleCancel: Function;
   options: any;
-  selectedOptions: any;
+  selectedOptions?: any;
   icon?: any;
   optionLabel?: string;
   additionalOptionLabel?: string;
@@ -21,14 +21,17 @@ export interface SearchDialogBoxProps {
   searchLabel?: string;
   renderTags?: boolean;
   textFieldPlaceholder?: any;
+  multiple?: boolean;
+  buttonOk?: string;
+  description?: string;
 }
 
 export const SearchDialogBox = (props: SearchDialogBoxProps) => {
   const {
     asyncSearch,
     icon,
     options,
-    selectedOptions,
+    selectedOptions = null,
     title,
     handleOk,
     optionLabel,
@@ -39,15 +42,22 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => {
     searchLabel = 'Search',
     renderTags = true,
     textFieldPlaceholder = '',
+    multiple = true,
+    buttonOk = 'Save',
+    description = '',
   } = props;
 
-  const [selectedOption, setSelectedOptions] = useState<Array<string>>([]);
+  const [selectedOption, setSelectedOptions] = useState<any>(multiple ? [] : '');
   const [asyncSelectedOptions, setAsyncSelectedOptions] = useState<Array<any>>([]);
   const { t } = useTranslation();
 
   useEffect(() => {
     if (!asyncSearch) {
-      setSelectedOptions(options.filter((option: any) => selectedOptions.includes(option.id)));
+      setSelectedOptions(
+        multiple
+          ? options.filter((option: any) => selectedOptions.includes(option.id))
+          : selectedOptions
+      );
     }
   }, [selectedOptions, options]);
 
@@ -61,21 +71,21 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => {
     setSelectedOptions(value);
   };
 
-  const selectedOptionsIds = selectedOptions.map(({ id }: { id: any }) => id);
+  const selectedOptionsIds = multiple
+    ? selectedOptions.map(({ id }: { id: any }) => id)
+    : selectedOptions?.id;
+
+  const getIds = multiple ? selectedOption?.map((option: any) => option.id) : selectedOption?.id;
 
   return (
     <DialogBox
       title={title}
       handleOk={() =>
-        handleOk(
-          asyncSearch
-            ? asyncSelectedOptions.map((option: any) => option.id)
-            : selectedOption.map((option: any) => option.id)
-        )
+        handleOk(asyncSearch ? asyncSelectedOptions.map((option: any) => option.id) : getIds)
       }
       handleCancel={handleCancel}
       titleAlign="left"
-      buttonOk={t('Save')}
+      buttonOk={t(buttonOk)}
     >
       <div className={styles.DialogBox}>
         <FormControl fullWidth>
@@ -101,8 +111,12 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => {
             chipIcon={icon}
             renderTags={renderTags}
             selectedOptionsIds={selectedOptionsIds}
+            multiple={multiple}
           />
         </FormControl>
+        <div className={styles.Description} data-testid="description">
+          {description}
+        </div>
       </div>
     </DialogBox>
   );

diff --git a/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx b/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx
@@ -46,7 +46,6 @@ import {
   setVariables,
 } from '../../../../common/constants';
 import { Timer } from '../../../../components/UI/Timer/Timer';
-import { DropdownDialog } from '../../../../components/UI/DropdownDialog/DropdownDialog';
 import { DialogBox } from '../../../../components/UI/DialogBox/DialogBox';
 import { Tooltip } from '../../../../components/UI/Tooltip/Tooltip';
 import { CLEAR_MESSAGES } from '../../../../graphql/mutations/Chat';
@@ -247,6 +246,7 @@ export const ContactBar: React.SFC<ContactBarProps> = (props) => {
   }
 
   const handleFlowSubmit = (flowId: any) => {
+    if (!flowId) return;
     const flowVariables: any = {
       flowId,
     };
@@ -274,12 +274,15 @@ export const ContactBar: React.SFC<ContactBarProps> = (props) => {
 
   if (showFlowDialog) {
     dialogBox = (
-      <DropdownDialog
+      <SearchDialogBox
         title={t('Select flow')}
         handleOk={handleFlowSubmit}
         handleCancel={closeFlowDialogBox}
         options={flowOptions}
-        placeholder={t('Select flow')}
+        optionLabel="name"
+        multiple={false}
+        buttonOk="Start"
+        searchLabel={t('Select flow')}
         description={t('The contact will be responded as per the messages planned in the flow.')}
       />
     );

diff --git a/src/mocks/Chat.tsx b/src/mocks/Chat.tsx
@@ -511,6 +511,7 @@ export const conversationQuery = getConversationQuery({
         status: 'VALID',
         bspStatus: 'SESSION_AND_HSM',
         isOrgRead: true,
+        fields: '{}',
       },
       messages: [
         {

diff --git a/src/mocks/Contact.tsx b/src/mocks/Contact.tsx
@@ -301,11 +301,13 @@ export const blockContactQuery = {
   },
   result: {
     data: {
-      contact: {
-        id: '2',
-        name: 'Default Receiver',
-        phone: '99399393303',
-        language: null,
+      updateContact: {
+        contact: {
+          id: '2',
+          name: 'Default Receiver',
+          phone: '99399393303',
+          language: null,
+        },
       },
     },
   },