Merge pull request #2815 from glific/new-ui/fixes

Few fixes in new UI and added promotion page
glific · Mar 14, 2024 · 840ec0a · 840ec0a
2 parents d35c4d2 + 2904d21
commit 840ec0a
Show file tree

Hide file tree

Showing 19 changed files with 122 additions and 80 deletions.
diff --git a/src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.tsx b/src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.tsx
@@ -44,9 +44,7 @@ export const WhatsAppEditor = ({
   };
 
   useEffect(() => {
-    if (readOnly) {
-      editor.setEditable(false);
-    }
+    editor.setEditable(!readOnly);
   }, [readOnly]);
 
   useEffect(() => {

diff --git a/src/components/UI/Heading/Heading.module.css b/src/components/UI/Heading/Heading.module.css
@@ -12,10 +12,9 @@
 }
 
 .HeadingTitle {
-  vertical-align: middle;
   color: #191c1a;
   display: flex;
-  align-items: first baseline;
+  align-items: center;
   font-weight: 700;
   font-size: 38px;
 }
@@ -33,3 +32,9 @@
 .TitleText {
   margin-right: 8px;
 }
+
+.BackIcon {
+  margin-left: -10px;
+  margin-right: 10px;
+  cursor: pointer;
+}
diff --git a/src/components/UI/Heading/Heading.tsx b/src/components/UI/Heading/Heading.tsx
@@ -1,17 +1,28 @@
+import { useNavigate } from 'react-router-dom';
 import HelpIcon from '../HelpIcon/HelpIcon';
 import styles from './Heading.module.css';
+import BackIcon from 'assets/images/icons/BackIconFlow.svg?react';
 
 export interface HeadingProps {
   formTitle: string;
   helpData?: any;
   showHeaderHelp?: boolean;
+  backLink?: string;
 }
 
-export const Heading = ({ formTitle, helpData, showHeaderHelp = true }: HeadingProps) => {
+export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink }: HeadingProps) => {
+  const navigate = useNavigate();
   return (
     <div className={styles.Heading} data-testid="heading">
       <div className={styles.HeadingWrapper}>
         <div className={styles.HeadingTitle}>
+          {backLink && (
+            <BackIcon
+              onClick={() => navigate(backLink)}
+              className={styles.BackIcon}
+              data-testid="back-button"
+            />
+          )}
           <div className={styles.TitleText}>{formTitle}</div>
           {helpData ? <HelpIcon helpData={helpData} /> : ''}
         </div>

diff --git a/src/containers/Auth/Promotion/Promotion.tsx b/src/containers/Auth/Promotion/Promotion.tsx
@@ -3,8 +3,6 @@ import MinimizeIcon from 'assets/images/icons/Minimize.svg?react';
 import MaximizeIcon from 'assets/images/icons/Maximize.svg?react';
 import styles from './Promotion.module.css';
 
-const hostname = location.hostname.replace('.glific.com', '');
-
 export const Promotion = () => {
   const [minimized, setMinimized] = useState(false);
 
@@ -15,7 +13,7 @@ export const Promotion = () => {
         <div className={styles.HeaderText}>NEW!</div>
         {minimized ? (
           <>
-            <div className={styles.GiftCard}>New Website Address!</div>
+            <div className={styles.GiftCard}>New Look Alert!</div>
             <MaximizeIcon
               className={styles.AccordianIcon}
               onClick={() => setMinimized(!minimized)}
@@ -34,27 +32,19 @@ export const Promotion = () => {
             <div className={styles.BodyListText}>
               <span>{1}</span>
               <div>
-                We're Moving: <strong>tides.coloredcow.com</strong> is changing to{' '}
-                <strong>glific.com</strong>! To access your Glific account use{' '}
-                <strong>{hostname}.glific.com </strong>
-                instead of{' '}
-                <strong>
-                  {hostname}
-                  .tides.coloredcow.com
-                </strong>
+                <strong>Big News:</strong> Glific gets a fresh interface starting March 12th! We've
+                improved our design for a better experience.
               </div>
             </div>
             <div className={styles.BodyListText}>
               <span>2</span>
               <div>
-                What this means? <strong>{hostname}.tides.coloredcow.com </strong>
-                page will become inactive on 31st March. Bookmark the new Glific address right away
+                <strong>What It Means:</strong> From March 12th, enjoy Glific's sleek, modern look,
+                making navigation smoother.
               </div>
             </div>
             <div className={styles.BodyListText}>
-              <div>
-                <strong>Note: </strong> Please ignore if you already have a glific.com account
-              </div>
+              <div>Discover the new Glific. We're excited for you to see the updates!</div>
             </div>
           </div>
           {/* <a className={styles.Link} href={LINK} target="_blank" rel="noreferrer">

diff --git a/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx b/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx
@@ -264,7 +264,7 @@ export const ConversationList = ({
     }
 
     return (
-      <Fragment key={contact.id}>
+      <Fragment>
         {index === 0 ? header : null}
         <ChatConversation
           key={contact.id}

diff --git a/src/containers/Chat/ChatInterface/ChatInterface.tsx b/src/containers/Chat/ChatInterface/ChatInterface.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Paper, Tab, Tabs, Typography } from '@mui/material';
 import { useQuery } from '@apollo/client';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { Simulator } from 'components/simulator/Simulator';
@@ -20,15 +20,15 @@ import styles from './ChatInterface.module.css';
 const tabs = [
   {
     label: 'Contacts',
-    link: '/chat/',
+    link: '/chat',
   },
   {
     label: 'Collections',
-    link: '/chat/collection/',
+    link: '/chat/collection',
   },
   {
     label: 'Searches',
-    link: '/chat/saved-searches/',
+    link: '/chat/saved-searches',
   },
 ];
 export interface ChatInterfaceProps {
@@ -42,8 +42,9 @@ export const ChatInterface = ({ savedSearches, collectionType }: ChatInterfacePr
   const [showSimulator, setShowSimulator] = useState(false);
   const [simulatorId, setSimulatorId] = useState(0);
   const { t } = useTranslation();
-  const [value, setValue] = useState(tabs[0].link);
+  const location = useLocation();
   const params = useParams();
+  const [value, setValue] = useState(tabs[0].link);
 
   let selectedContactId = params.contactId;
   let selectedCollectionId: any = params.collectionId;
@@ -70,6 +71,13 @@ export const ChatInterface = ({ savedSearches, collectionType }: ChatInterfacePr
     }
   }, []);
 
+  useEffect(() => {
+    const currentTab = tabs.filter((tab) => location.pathname === tab.link);
+    if (currentTab.length) {
+      setValue(currentTab[0].link);
+    }
+  }, [location]);
+
   if (loading) return <Loading />;
   if (error) {
     setErrorMessage(error);

diff --git a/src/containers/Chat/ChatMessages/AddVariables/AddVariables.module.css b/src/containers/Chat/ChatMessages/AddVariables/AddVariables.module.css
@@ -1,3 +1,7 @@
 .TemplateText {
   margin-bottom: 8px;
 }
+
+.Field {
+  margin-top: 16px;
+}
diff --git a/src/containers/Chat/ChatMessages/AddVariables/AddVariables.tsx b/src/containers/Chat/ChatMessages/AddVariables/AddVariables.tsx
@@ -95,6 +95,7 @@ export const AddVariables = ({
             syncInitialValuesWithFormik(newInputValue, index);
           },
           label: `Variable ${index}`,
+          placeholder: `Variable ${index}`,
         });
       }
 
@@ -143,7 +144,9 @@ export const AddVariables = ({
             <div className={styles.TemplateText}> {template?.body}</div>
             <div data-testid="variablesDialog">
               {formFieldItems.map((field: any) => (
-                <Field {...field} key={field.name} />
+                <div key={field.name} className={styles.Field}>
+                  <Field {...field} />
+                </div>
               ))}
             </div>
           </DialogBox>

diff --git a/src/containers/Chat/ChatMessages/ChatInput/ChatInput.tsx b/src/containers/Chat/ChatMessages/ChatInput/ChatInput.tsx
@@ -416,9 +416,8 @@ export const ChatInput = ({
     >
       {dialog}
 
-
-        {open ? (
-          <div className={styles.SendsContainer} id="popup">
+      {open ? (
+        <div className={styles.SendsContainer} id="popup">
           <Fade in={open} timeout={200}>
             <div className={styles.Popup}>
               <ChatTemplates
@@ -437,9 +436,8 @@ export const ChatInput = ({
               {selectedTab && quickSendButtons(quickSendTypes)}
             </div>
           </Fade>
-          </div>
-        ) : null}
-
+        </div>
+      ) : null}
 
       <div className={styles.ChatInputElements}>
         <ClickAwayListener onClickAway={handleClickAway}>

diff --git a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.module.css b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.module.css
@@ -73,7 +73,7 @@
 }
 
 .Content {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   color: #073f24;

diff --git a/src/containers/Collection/Collection.test.tsx b/src/containers/Collection/Collection.test.tsx
@@ -9,6 +9,7 @@ import { getOrganizationLanguagesQuery, getOrganizationQuery } from 'mocks/Organ
 import * as FormLayout from 'containers/Form/FormLayout';
 import { Collection } from './Collection';
 import { getRoleNamesMock } from 'containers/StaffManagement/StaffManagement.test.helper';
+import { MemoryRouter } from 'react-router';
 
 const mocks = [
   getRoleNamesMock,
@@ -31,9 +32,11 @@ vi.mock('react-router-dom', async () => {
 });
 
 const wrapper = (
-  <MockedProvider mocks={mocks} addTypename={false}>
-    <Collection />
-  </MockedProvider>
+  <MemoryRouter>
+    <MockedProvider mocks={mocks} addTypename={false}>
+      <Collection />
+    </MockedProvider>
+  </MemoryRouter>
 );
 
 describe('<Collection />', () => {

diff --git a/src/containers/ContactField/ContactField.test.tsx b/src/containers/ContactField/ContactField.test.tsx
@@ -3,13 +3,16 @@ import { MockedProvider } from '@apollo/client/testing';
 
 import { setUserSession } from 'services/AuthService';
 import { ContactField } from './ContactField';
+import { MemoryRouter } from 'react-router';
 
 setUserSession(JSON.stringify({ organization: { id: '1' }, roles: ['Admin'] }));
 
 const wrapper = (
-  <MockedProvider mocks={[]} addTypename={false}>
-    <ContactField setOpenDialog={vi.fn()} />
-  </MockedProvider>
+  <MemoryRouter>
+    <MockedProvider mocks={[]} addTypename={false}>
+      <ContactField setOpenDialog={vi.fn()} />
+    </MockedProvider>
+  </MemoryRouter>
 );
 
 test('it renders contact form successfully', async () => {

diff --git a/src/containers/Extensions/Extensions.test.tsx b/src/containers/Extensions/Extensions.test.tsx
@@ -9,6 +9,7 @@ import {
 } from 'mocks/Extension';
 import { setUserSession } from 'services/AuthService';
 import { Extensions } from './Extensions';
+import { MemoryRouter } from 'react-router';
 
 vi.mock('react-router-dom', async () => {
   return {
@@ -26,9 +27,11 @@ const props = {
 };
 
 const wrapper = (
-  <MockedProvider mocks={createMocks} addTypename={false}>
-    <Extensions {...props} />
-  </MockedProvider>
+  <MemoryRouter>
+    <MockedProvider mocks={createMocks} addTypename={false}>
+      <Extensions {...props} />
+    </MockedProvider>
+  </MemoryRouter>
 );
 test('it should render form correctly', async () => {
   render(wrapper);
@@ -65,9 +68,11 @@ test('it should render form correctly', async () => {
 
 test('it should render filled form with extension details', async () => {
   render(
-    <MockedProvider mocks={updateMocks} addTypename={false}>
-      <Extensions {...props} />
-    </MockedProvider>
+    <MemoryRouter>
+      <MockedProvider mocks={updateMocks} addTypename={false}>
+        <Extensions {...props} />
+      </MockedProvider>
+    </MemoryRouter>
   );
   await waitFor(() => {});
 

diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx
@@ -62,27 +62,27 @@ const actionListMap = (item: any, actionList: any, hasMoreOption: boolean) => {
     if (action.link) {
       return (
         <Link to={`${action.link}/${additionalActionParameter}`} key={key}>
-          <IconButton className={styles.additonalButton} data-testid="additionalButton">
-            <Tooltip title={`${action.label}`} placement="top">
+          <Tooltip title={`${action.label}`} placement="top">
+            <IconButton className={styles.additonalButton} data-testid="additionalButton">
               {action.icon}
-            </Tooltip>
-          </IconButton>
+            </IconButton>
+          </Tooltip>
         </Link>
       );
     }
     if (action.dialog) {
       return (
-        <IconButton
-          data-testid="additionalButton"
-          className={styles.additonalButton}
-          id="additionalButton-icon"
-          onClick={() => action.dialog(additionalActionParameter, item)}
-          key={key}
-        >
-          <Tooltip title={`${action.label}`} placement="top" key={key}>
+        <Tooltip title={`${action.label}`} placement="top" key={key}>
+          <IconButton
+            data-testid="additionalButton"
+            className={styles.additonalButton}
+            id="additionalButton-icon"
+            onClick={() => action.dialog(additionalActionParameter, item)}
+            key={key}
+          >
             {action.icon}
-          </Tooltip>
-        </IconButton>
+          </IconButton>{' '}
+        </Tooltip>
       );
     }
     return null;
@@ -485,13 +485,15 @@ export const List = ({
     if (editSupport) {
       editButton = allowedAction.edit && (
         <Link to={`/${pageLink}/${id}/edit`} className={styles.NoTextDecoration}>
-          <IconButton className={styles.additonalButton}>
-            <div aria-label={t('Edit')} data-testid="EditIcon">
-              <div className={styles.IconWithText}>
-                <EditIcon className={styles.IconSize} />
+          <Tooltip title="Edit" placement="top">
+            <IconButton className={styles.additonalButton}>
+              <div aria-label={t('Edit')} data-testid="EditIcon">
+                <div className={styles.IconWithText}>
+                  <EditIcon className={styles.IconSize} />
+                </div>
               </div>
-            </div>
-          </IconButton>
+            </IconButton>
+          </Tooltip>
         </Link>
       );
     }