Merge pull request #3168 from glific/feature/wa_groups

whatsapp group fields ui
glific · Dec 15, 2024 · d0ae9c1 · d0ae9c1
2 parents 3e5857e + 69ee39f
commit d0ae9c1
Show file tree

Hide file tree

Showing 10 changed files with 280 additions and 84 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/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/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>
   );
 };
diff --git a/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.module.css b/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.module.css
@@ -65,3 +65,77 @@
   padding: 2px 8px;
   border-radius: 8px;
 }
+
+.Container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: #f8faf5;
+}
+
+.RightContainer {
+  height: 100%;
+  width: 100%;
+}
+
+.Drawer {
+  width: fit-content;
+  border-right: 1px solid #efefef;
+  height: calc(100vh - 110px) !important;
+}
+
+.Tab {
+  border-radius: 10px;
+  width: 200px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  margin: 2px 0;
+  padding: 0px !important;
+  font-weight: 400;
+  font-size: 14px;
+  color: #717971;
+  padding-left: 16px !important;
+}
+
+.Tab:hover {
+  background-color: #71797123;
+  cursor: pointer !important;
+}
+
+.ActiveTab {
+  font-weight: 700 !important;
+  color: #073f24 !important;
+  background-color: #cce6d0 !important;
+}
+
+.GroupHeader {
+  display: flex;
+  box-shadow: 0px 1px 1px 0px #00000029;
+  padding: 15px;
+  align-items: center;
+  gap: 1rem;
+}
+
+.GroupHeaderTitle {
+  font-size: 16px;
+  font-weight: 500;
+  color: #717971;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.GroupHeaderElements {
+  padding: 0.5rem 1rem;
+}
+
+.Table {
+  display: flex;
+}
+
+.BackGround {
+  background-color: #f8faf5 !important;
+  width: 100%;
+  height: 100%;
+}