Merge branch 'master' into enhancement/dropdown_side_pannel

glific · Dec 15, 2024 · 8e55a78 · 8e55a78
2 parents 67fa5d7 + bfbb7cc
commit 8e55a78
Show file tree

Hide file tree

Showing 14 changed files with 318 additions and 96 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@glific/flow-editor": "^1.26.3-17",
+    "@glific/flow-editor": "^1.26.3-18",
     "@lexical/react": "^0.17.1",
     "@mui/icons-material": "^6.1.1",
     "@mui/material": "^6.1.1",

diff --git a/src/assets/images/icons/Discord/DiscordIcon.tsx b/src/assets/images/icons/Discord/DiscordIcon.tsx
@@ -0,0 +1,14 @@
+const SvgComponent = ({ color }: any) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={22} height={22}>
+  <title>{'Discord Icon'}</title>
+  <g fill="none" fillRule="evenodd">
+    <path
+      fill={color}
+      fillRule="nonzero"
+      d="M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z"
+    />
+  </g>
+</svg>
+  );
+  export default SvgComponent;
+
diff --git a/src/components/UI/ListIcon/ListIcon.tsx b/src/components/UI/ListIcon/ListIcon.tsx
@@ -32,7 +32,7 @@ import Assistant from 'assets/images/icons/SideDrawer/Assistant';
 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'
 export interface ListIconProps {
   icon: string | undefined;
   count?: number;
@@ -75,6 +75,7 @@ export const ListIcon = ({ icon = '', selected = false, count }: ListIconProps)
     waGroup: WaGroupIcon,
     knowledgeBase: KnowledgeBaseIcon,
     assistant: Assistant,
+    discord:DiscordIcon
   };
 
   const iconImage = stringsToIcons[icon] && (

diff --git a/src/components/floweditor/FlowEditor.helper.ts b/src/components/floweditor/FlowEditor.helper.ts
@@ -52,7 +52,8 @@ export const setConfig = (uuid: any, isTemplate: boolean) => {
       simulateResume: false,
       globals: `${glificBase}globals`,
       groups: `${glificBase}groups`,
-      fields: `${glificBase}fields`,
+      fields: `${glificBase}fields?scope=contact`,
+      waGroupFields: `${glificBase}fields?scope=wa_group`,
       labels: `${glificBase}labels`,
       channels: `${glificBase}channels`,
       classifiers: `${glificBase}classifiers`,
@@ -98,6 +99,9 @@ export const setConfig = (uuid: any, isTemplate: boolean) => {
     config.filters.push('ticketer');
   }
 
+  if (services.whatsappGroupEnabled) {
+    config.filters.push('groups');
+  }
   return config;
 };
 

diff --git a/src/config/index.ts b/src/config/index.ts
@@ -53,8 +53,11 @@ export const ONBOARD_URL_UPDATE = `${GLIFIC_API_URL}/v1/onboard/update-registrat
 export const ONBOARD_URL_REACT_OUT = `${GLIFIC_API_URL}/v1/onboard/reachout`;
 export const ONBOARD_URL = `${GLIFIC_API_URL}/v1/onboard/setup`;
 export const RECAPTCHA_CLIENT_KEY = envVariables.VITE_RECAPTCHA_CLIENT_KEY;
-export const UPLOAD_CONTACTS_SAMPLE = 'https://storage.googleapis.com/cc-tides/sample_contacts_import.csv';
-export const UPLOAD_CONTACTS_ADMIN_SAMPLE = 'https://storage.googleapis.com/cc-tides/sample_import_admin.csv';
+export const DISCORD_URL='https://discord.gg/kyqsZAJEPK';
+export const UPLOAD_CONTACTS_SAMPLE =
+  'https://storage.googleapis.com/cc-tides/sample_contacts_import.csv';
+export const UPLOAD_CONTACTS_ADMIN_SAMPLE =
+  'https://storage.googleapis.com/cc-tides/sample_import_admin.csv';
 export const REGISTRATION_HELP_LINK =
   'https://glific.slab.com/public/posts/02-managing-staff-members-creating-account-on-glific-gg6fkw8h';
 export const CONTACT_MANAGE_HELP_LINK =

diff --git a/src/config/menu.ts b/src/config/menu.ts
@@ -1,5 +1,5 @@
 import { organizationHasDynamicRole } from 'common/utils';
-import { ANALYTICS_URL, GLIFIC_DOCS_URL } from 'config';
+import { ANALYTICS_URL, GLIFIC_DOCS_URL, DISCORD_URL } from 'config';
 import { getOrganizationServices } from 'services/AuthService';
 
 const allRoles = ['Staff', 'Manager', 'Admin', 'Dynamic', 'Glific_admin'];
@@ -279,14 +279,22 @@ const menus = (): Menu[] => [
     roles: staffLevel,
   },
 
-  // {
-  //   title: "What's new",
-  //   path: '/changelog',
-  //   url: NEW_UI_BLOG,
-  //   icon: 'new',
-  //   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') =>

diff --git a/src/containers/List/List.module.css b/src/containers/List/List.module.css
@@ -274,6 +274,10 @@
   background-color: #f8faf5;
 }
 
+.FullHeight {
+  height: 100vh;
+}
+
 .Checkbox {
   min-width: 50px;
   padding: 1rem;

diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx
@@ -790,7 +790,7 @@ export const List = ({
   ) : null;
 
   return (
-    <div className={styles.ListContainer}>
+    <div className={`${showHeader ? styles.FullHeight : ''} ${styles.ListContainer}`}>
       {showHeader && (
         <>
           <div className={styles.Header} data-testid="listHeader">

diff --git a/src/containers/Profile/Contact/ContactDescription/ContactDescription.tsx b/src/containers/Profile/Contact/ContactDescription/ContactDescription.tsx
@@ -9,12 +9,14 @@ import styles from './ContactDescription.module.css';
 
 export interface ContactDescriptionProps {
   fields: any;
-  settings: any;
-  phone: string;
-  maskedPhone: string;
+  settings?: any;
+  phone?: string;
+  maskedPhone?: string;
   collections: any;
-  lastMessage: string;
-  statusMessage: string;
+  lastMessage?: string;
+  statusMessage?: string;
+  groups?: boolean;
+  customStyles?: string;
 }
 
 export const ContactDescription = ({
@@ -25,6 +27,8 @@ export const ContactDescription = ({
   statusMessage,
   fields,
   settings,
+  groups = false,
+  customStyles,
 }: ContactDescriptionProps) => {
   const [showPlainPhone, setShowPlainPhone] = useState(false);
   const { t } = useTranslation();
@@ -45,16 +49,19 @@ export const ContactDescription = ({
   // list of collections that the contact belongs
   const collectionList = collections.map((collection: any) => collection.label).join(', ');
 
-  const collectionDetails = [
-    { label: t('Collections'), value: collectionList || t('None') },
-    {
-      label: t('Assigned to'),
-      value: assignedToCollection || t('None'),
-    },
-  ];
+  let collectionDetails = [{ label: t('Collections'), value: collectionList || t('None') }];
+  if (!groups) {
+    collectionDetails = [
+      ...collectionDetails,
+      {
+        label: t('Assigned to'),
+        value: assignedToCollection || t('None'),
+      },
+    ];
+  }
 
   let settingsValue: any = '';
-  if (typeof settings === 'string') {
+  if (settings && typeof settings === 'string') {
     settingsValue = JSON.parse(settings);
   }
 
@@ -106,23 +113,30 @@ export const ContactDescription = ({
     );
   }
 
-  return (
-    <div className={styles.DescriptionContainer} data-testid="contactDescription">
-      <div className={styles.DetailBlock}>
-        <Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
-          Number
-        </Typography>
-        <div className={styles.Description}>
-          {phoneDisplay}
-          <div className={styles.SessionTimer}>
-            <span>{t('Session Timer')}</span>
-            <Timer time={lastMessage} variant="secondary" />
+  const numberBlock = (
+    <>
+      {!groups && (
+        <>
+          <div className={styles.DetailBlock}>
+            <Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
+              Number
+            </Typography>
+            <div className={styles.Description}>
+              {phoneDisplay}
+              <div className={styles.SessionTimer}>
+                <span>{t('Session Timer')}</span>
+                <Timer time={lastMessage} variant="secondary" />
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-
-      <div className={styles.Divider} />
+          <div className={styles.Divider} />
+        </>
+      )}
+    </>
+  );
 
+  const collectionBlock = (
+    <>
       <div className={styles.DetailBlock}>
         {collectionDetails.map((collectionItem: any) => (
           <div key={collectionItem.label}>
@@ -135,38 +149,65 @@ export const ContactDescription = ({
       </div>
 
       <div className={styles.Divider} />
+    </>
+  );
 
-      <div className={styles.DetailBlock}>
-        <div>
-          <div className={styles.FieldLabel}>Status</div>
-          <div className={styles.DescriptionItemValue}>{statusMessage}</div>
-        </div>
-        <div className={styles.Divider} />
-        {settingsValue &&
-          typeof settingsValue === 'object' &&
-          Object.keys(settingsValue).map((key) => (
-            <div key={key}>
-              <div className={styles.FieldLabel}>{key}</div>
-              <div className={styles.DescriptionItemValue}>
-                {Object.keys(settingsValue[key])
-                  .filter((settingKey) => settingsValue[key][settingKey] === true)
-                  .join(', ')}
-              </div>
-              <div className={styles.Divider} />
+  const settingsBlock = (
+    <>
+      {settingsValue &&
+        !groups &&
+        typeof settingsValue === 'object' &&
+        Object.keys(settingsValue).map((key) => (
+          <div key={key}>
+            <div className={styles.FieldLabel}>{key}</div>
+            <div className={styles.DescriptionItemValue}>
+              {Object.keys(settingsValue[key])
+                .filter((settingKey) => settingsValue[key][settingKey] === true)
+                .join(', ')}
             </div>
-          ))}
-        {fieldsValue &&
-          typeof fieldsValue === 'object' &&
-          Object.keys(fieldsValue).map((key) => (
-            <div key={key}>
-              <div className={styles.FieldLabel}>
-                {fieldsValue[key].label ? fieldsValue[key].label : key.replace('_', ' ')}
-              </div>
-              <div className={styles.DescriptionItemValue}>{fieldsValue[key].value}</div>
-              <div className={styles.Divider} />
+            <div className={styles.Divider} />
+          </div>
+        ))}
+    </>
+  );
+
+  const statusBlock = (
+    <>
+      {!groups && (
+        <div className={styles.DetailBlock}>
+          <div>
+            <div className={styles.FieldLabel}>Status</div>
+            <div className={styles.DescriptionItemValue}>{statusMessage}</div>
+          </div>
+          <div className={styles.Divider} />
+        </div>
+      )}
+    </>
+  );
+
+  const fieldsBlock = (
+    <div className={styles.DetailBlock}>
+      {fieldsValue &&
+        typeof fieldsValue === 'object' &&
+        Object.keys(fieldsValue).map((key) => (
+          <div key={key}>
+            <div className={styles.FieldLabel}>
+              {fieldsValue[key].label ? fieldsValue[key].label : key.replace('_', ' ')}
             </div>
-          ))}
-      </div>
+            <div className={styles.DescriptionItemValue}>{fieldsValue[key].value}</div>
+            <div className={styles.Divider} />
+          </div>
+        ))}
+    </div>
+  );
+
+  return (
+    <div className={`${styles.DescriptionContainer} ${customStyles}`} data-testid="contactDescription">
+      {numberBlock}
+      {collectionBlock}
+      {settingsBlock}
+      {statusBlock}
+      {fieldsBlock}
     </div>
   );
 };