Merge pull request #2807 from glific/minor-fixes

Added more help data and import issue fix

src/common/HelpData.tsx

@@ -1,75 +1,103 @@
-interface Item {
+export interface HelpDataProps {
   heading: string;
-  body: JSX.Element;
   link: string;
 }
 
-export const speedSendInfo: Item = {
+export const speedSendInfo: HelpDataProps = {
   heading:
     'Speed Sends is a functionality in Glific to create a message or save the messages and reuse it in future chats.',
-  body: <></>,
+
   link: 'https://glific.github.io/docs/docs/Product%20Features/Speed%20Sends',
 };
 
-export const flowInfo: Item = {
+export const flowInfo: HelpDataProps = {
   heading:
-    'You can configure the flow by clicking on the configure button and the options are as follows:',
-  body: (
-    <ul>
-      <li>Save as Draft</li>
-      <li>Publish Preview</li>
-      <li>Revision history</li>
-      <li>Reset flow counts</li>
-    </ul>
-  ),
+    'Flows are the heart of your Glific chatbot. Design engaging conversational experiences using message blocks, decision nodes, external service calls, and more.',
   link: 'https://glific.github.io/docs/docs/category/flows',
 };
 
-export const triggerInfo: Item = {
+export const triggerInfo: HelpDataProps = {
   heading:
     'Triggers in Glific are used to start a flow with specific contacts in a collection at a scheduled time. Triggers can be used for scheduling periodic tasks and automatically sharing them with required beneficiaries.',
-  body: <></>,
+
   link: 'https://glific.github.io/docs/docs/Product%20Features/Triggers',
 };
 
-export const searchInfo: Item = {
+export const searchInfo: HelpDataProps = {
   heading:
     'Glific provides search functionality to NGO staff to find contacts from a large set of contacts list.',
-  body: <></>,
+
   link: 'https://glific.github.io/docs/docs/Product%20Features/Searches',
 };
 
-export const templateInfo: Item = {
+export const templateInfo: HelpDataProps = {
   heading:
     "HSM (Highly Structured Message) templates are pre-approved messages by Whatsapp which are used to send to the users when their session window is closed (i.e after 24hours of inactive conversation). These templates ensure compliance with WhatsApp's guidelines and allow NGO's to send notifications, customer support messages and alerts with placeholders for personalized information.",
-  body: <></>,
+
   link: 'https://glific.github.io/docs/docs/Product%20Features/Templates',
 };
 
-export const interactiveMessageInfo: Item = {
+export const interactiveMessageInfo: HelpDataProps = {
   heading:
     'Interactive Messages are used by NGOs to create engaging and dynamic conversations with their beneficiaries. This feature helps NGOs to go beyond simple text-based notifications and include interactive elements like buttons, quick replies, list menus etc. It enhances the user experience through guided interactions and helps the NGOs collect cleaner data.',
-  body: <></>,
+
   link: 'https://glific.github.io/docs/docs/Product%20Features/Interactive%20Messages',
 };
 
-export const collectionInfo: Item = {
+export const collectionInfo: HelpDataProps = {
   heading:
     'Collections is a feature in Glific to keep one set of users in one place and use it to communicate with all users in that collection in one go.',
-  body: <></>,
+
   link: 'https://glific.github.io/docs/docs/Product%20Features/Others/Collections',
 };
 
-export const staffManagementInfo: Item = {
+export const staffManagementInfo: HelpDataProps = {
   heading:
     'You can create accounts for yourself and your team to define the level of access each of your staff member has to the Glific account.',
-  body: <></>,
   link: 'https://glific.github.io/docs/docs/Product%20Features/Others/Staff%20Management%20&%20Role%20Management',
 };
 
-export const roleInfo: Item = {
+export const roleInfo: HelpDataProps = {
   heading:
     'Glific also allows you to create specific roles to be assigned to your staff members besides the built-in roles. This feature is disabled by default for all NGOs, but could be enabled on demand. This feature allows you to create specific roles for your staff members like Teacher, Admin, Content Creator etc.',
-  body: <></>,
+
   link: 'https://glific.github.io/docs/docs/Product%20Features/Others/Staff%20Management%20&%20Role%20Management',
 };
+
+// current
+
+export const googleSheetsInfo: HelpDataProps = {
+  heading:
+    'Glific allows you to connect flows to Google Sheets, enabling seamless data transfer between the two platforms.',
+  link: 'https://glific.github.io/docs/docs/Product%20Features/Flows/Flow%20Actions/Link%20Google%20Sheets/', // Replace with the actual Glific documentation link
+};
+
+export const webhookLogsInfo: HelpDataProps = {
+  heading:
+    'Webhook Logs provide a detailed record of all incoming and outgoing webhook events within your Glific flows.',
+  link: 'https://glific.github.io/docs/docs/Product%20Features/Flows/Flow%20Actions/Call%20a%20webhook/#checking-webhook-logs', // Replace with the actual Glific documentation link
+};
+
+export const contactVariablesInfo: HelpDataProps = {
+  heading:
+    'Contact Variables enable you to store and personalize information associated with individual beneficiaries in your Glific chatbot.',
+  link: 'https://glific.github.io/docs/docs/Product%20Features/Flows/Flow%20Variables/Flow%20variables%20vs%20Contact%20variables', // Replace with the actual Glific documentation link
+};
+
+export const ticketsInfo: HelpDataProps = {
+  heading:
+    "Glific's ticketing system allows you to manage support requests, issues, or tasks efficiently. Track, prioritize, and resolve tickets, ensuring seamless communication within your team.",
+  link: 'https://glific.github.io/docs/docs/Product%20Features/Flows/Flow%20Actions/Open%20a%20ticket%20with%20a%20human%20agent/', // Replace with the actual Glific documentation link
+};
+
+export const contactManagementInfo: HelpDataProps = {
+  heading:
+    'Glific offers flexible contact management tools, including the ability to organize contacts into collections and update contact information.',
+  link: 'https://glific.github.io/docs/docs/FAQ/Update%20collection%20with%20bulk%20contacts%20or%20contact%20fields/', // Replace with the actual Glific documentation link
+};
+
+export const blockedContactsInfo: HelpDataProps = {
+  heading:
+    'Glific allows you to block contacts who are sending unwanted or inappropriate messages, ensuring a positive experience for both your beneficiaries and staff.',
+  link: 'https://glific.github.io/docs/docs/Product%20Features/Others/All%20product%20features/#block-contacts', // Replace with the actual Glific documentation link
+};

src/components/UI/Form/Input/Input.module.css

@@ -70,7 +70,16 @@
   color: #aa9677;
 }
 
-.OutlinedInput {
+.OutlinedInput,
+.DarkOutlinedInput {
+  padding: 12.5px 14px;
+}
+
+.DarkOutlinedInput::placeholder {
+  color: #ece9e3;
+}
+
+.DarkOutlinedInput {
   padding: 12.5px 14px;
 }
 

src/components/UI/Form/Input/Input.tsx

@@ -32,6 +32,7 @@ export interface InputProps {
   translation?: string;
   onChange?: any;
   inputLabel?: boolean;
+  darkMode?: boolean;
 }
 
 export const Input = ({
@@ -55,6 +56,7 @@ export const Input = ({
     inputProp,
     translation,
     onChange,
+    darkMode,
   } = props;
 
   let fieldType = type;
@@ -104,6 +106,8 @@ export const Input = ({
     showError = true;
   }
 
+  const inputStyles = darkMode ? styles.DarkOutlinedInput : styles.OutlinedInput;
+
   return (
     <>
       {translation && <div className={styles.Translation}>{translation}</div>}
@@ -120,7 +124,7 @@ export const Input = ({
             inputComponent={editor ? editor.inputComponent : undefined}
             inputProps={editor ? editor.inputProps : inputProp}
             type={fieldType}
-            classes={{ multiline: styles.Multiline, input: !textArea ? styles.OutlinedInput : '' }}
+            classes={{ multiline: styles.Multiline, input: !textArea ? inputStyles : '' }}
             disabled={disabled}
             error={showError}
             multiline={textArea}

src/components/UI/Form/PhoneInput/PhoneInput.module.css

@@ -4,7 +4,6 @@
   padding-bottom: 13px !important;
   padding-left: 48px !important;
   padding-right: 14px !important;
-  /* border-color: rgba(0, 0, 0, 0.23) !important; */
   border-radius: 12px !important;
   border-width: 2px !important;
   background: inherit !important;
@@ -13,7 +12,6 @@
 
 .PhoneNumber:focus {
   border-color: #119656 !important;
-  /* border-color: inherit !important; */
   box-shadow: none !important;
 }
 

src/components/UI/Heading/Heading.module.css

@@ -12,7 +12,6 @@
 }
 
 .HeadingTitle {
-  margin-left: 14px;
   vertical-align: middle;
   color: #191c1a;
   display: flex;
@@ -21,8 +20,11 @@
   font-size: 38px;
 }
 
+.HeadingWrapper {
+  margin-left: 46px;
+}
+
 .TextHeading {
-  margin: 12px 0 0 14px;
   font-weight: 400;
   color: #191c1a;
   font-size: 12px;

src/components/UI/Heading/Heading.tsx

@@ -10,7 +10,7 @@ export interface HeadingProps {
 export const Heading = ({ formTitle, helpData, showHeaderHelp = true }: HeadingProps) => {
   return (
     <div className={styles.Heading} data-testid="heading">
-      <div>
+      <div className={styles.HeadingWrapper}>
         <div className={styles.HeadingTitle}>
           <div className={styles.TitleText}>{formTitle}</div>
           {helpData ? <HelpIcon helpData={helpData} /> : ''}

src/components/UI/HelpIcon/HelpIcon.tsx

@@ -1,12 +1,7 @@
 import styles from './HelpIcon.module.css';
 import InfoIcon from 'assets/images/info.svg?react';
 import { Tooltip } from '@mui/material';
-
-export interface HelpDataProps {
-  heading: string;
-  body: JSX.Element;
-  link: string;
-}
+import { HelpDataProps } from 'common/HelpData';
 
 export interface HelpIconProps {
   helpData?: HelpDataProps;
@@ -15,7 +10,6 @@ export interface HelpIconProps {
 export const HelpIcon = ({
   helpData = {
     heading: '',
-    body: <></>,
     link: '',
   },
 }: HelpIconProps) => {
@@ -32,7 +26,6 @@ export const HelpIcon = ({
             <div>
               <div className={styles.HoverPopUpText}>
                 {helpData.heading}
-                {helpData.body}
                 <div
                   className={styles.HoverLink}
                   onClick={() => {

src/components/UI/ListIcon/ListIcon.tsx

@@ -25,6 +25,7 @@ import LogoutIcon from 'assets/images/icons/SideDrawer/LogoutIcon';
 import OrganizationIcon from 'assets/images/icons/SideDrawer/OrganizationIcon';
 import ConsultingIcon from 'assets/images/icons/SideDrawer/ConsultingIcon';
 import styles from './ListIcon.module.css';
+import FiberNewIcon from '@mui/icons-material/FiberNew';
 import { Badge } from '@mui/material';
 
 export interface ListIconProps {
@@ -63,6 +64,7 @@ export const ListIcon = ({ icon = '', selected = false, count }: ListIconProps)
     logout: LogoutIcon,
     organization: OrganizationIcon,
     consulting: ConsultingIcon,
+    new: FiberNewIcon,
   };
 
   const iconImage = stringsToIcons[icon] && (

src/components/floweditor/FlowEditor.tsx

@@ -118,10 +118,10 @@ export const FlowEditor = () => {
       }
       setPublishLoading(false);
     },
-    onError:()=>{
-      setPublishLoading(false)
-      setNotification("Sorry! An error occurred", 'warning')
-    }
+    onError: () => {
+      setPublishLoading(false);
+      setNotification('Sorry! An error occurred', 'warning');
+    },
   });
 
   const { data: flowName } = useQuery(GET_FLOW_DETAILS, {

src/config/index.ts

@@ -63,3 +63,5 @@ export const SAMPLE_SHEET_LINK =
   'https://docs.google.com/spreadsheets/d/1fRpFyicqrUFxd79u_dGC8UOHEtAT3rA-G2i4tvOgScw';
 export const BULK_APPLY_SAMPLE_LINK =
   'https://docs.google.com/spreadsheets/d/1x04wI9palh1Ag11TrdBbUj9pnyNOw8-I4834qN3idik';
+
+export const NEW_UI_BLOG = 'https://glific.org/glific-new-interface-changes/';

src/config/menu.ts

@@ -1,11 +1,12 @@
 import { organizationHasDynamicRole } from 'common/utils';
-import { ANALYTICS_URL, GLIFIC_DOCS_URL } from 'config';
+import { ANALYTICS_URL, GLIFIC_DOCS_URL, NEW_UI_BLOG } from 'config';
 import { getOrganizationServices } from 'services/AuthService';
 
 const allRoles = ['Staff', 'Manager', 'Admin', 'Dynamic', 'Glific_admin'];
 const adminLevel = ['Admin', 'Glific_admin'];
 const managerLevel = ['Manager', 'Admin', 'Dynamic', 'Glific_admin'];
 const staffLevel = ['Staff', 'Manager', 'Admin', 'Dynamic', 'Glific_admin'];
+
 export interface Menu {
   title: string;
   path: string;
@@ -236,6 +237,15 @@ const menus = (): Menu[] => [
     type: 'sideDrawer',
     roles: staffLevel,
   },
+
+  {
+    title: "What's new",
+    path: '/changelog',
+    url: NEW_UI_BLOG,
+    icon: 'new',
+    type: 'sideDrawer',
+    roles: staffLevel,
+  },
 ];
 
 export const getMenus = (menuType = 'sideDrawer', role = 'Staff') =>

src/containers/Auth/Auth.module.css

@@ -1,4 +1,5 @@
 .Container {
+  overflow: auto;
   width: 100%;
   background: #f8faf5;
   height: 100vh;
@@ -230,7 +231,7 @@
 .RegistrationBox input:hover,
 .OTPBox input,
 .OTPBox input:hover {
-  color: #93a29b;
+  color: #93a29b !important;
 }
 
 .RegistrationBox fieldset,

src/containers/Auth/Registration/Registration.tsx

@@ -8,7 +8,6 @@ import { PhoneInput } from 'components/UI/Form/PhoneInput/PhoneInput';
 import { sendOTP } from 'services/AuthService';
 import { Auth } from '../Auth';
 
-
 export interface User {
   name: string;
   phone: string;
@@ -54,6 +53,7 @@ export const Registration = () => {
       name: 'name',
       type: 'text',
       placeholder: t('Your full name'),
+      darkMode: true,
     },
     {
       component: PhoneInput,
@@ -67,6 +67,7 @@ export const Registration = () => {
       name: 'password',
       type: 'password',
       placeholder: t('Password'),
+      darkMode: true,
     },
   ];
 

src/containers/Chat/ChatMessages/ChatInput/ChatInput.module.css

@@ -165,6 +165,7 @@
 
 .ContactOptOutMessage {
   color: #93a29b;
+  margin-bottom: 20px;
   font-size: 16px;
   display: flex;
   justify-content: center;

src/containers/ContactField/ContactFieldList/ContactFieldList.tsx

@@ -12,6 +12,7 @@ import EditIcon from 'assets/images/icons/GreenEdit.svg?react';
 import { ContactField } from '../ContactField';
 import styles from './ContactFieldList.module.css';
 import { setNotification } from 'common/notification';
+import { contactVariablesInfo } from 'common/HelpData';
 
 interface EditItemShape {
   id: any;
@@ -192,6 +193,7 @@ const ContactFieldList = () => {
     <div className={styles.Container}>
       {dialog}
       <List
+        helpData={contactVariablesInfo}
         title={t('Contact Variables')}
         listItem="contactsFields"
         listItemName="contactField"

src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css

@@ -4,6 +4,7 @@
 }
 
 .Instructions {
+  max-width: 500px;
   color: #93a29b;
   font-size: 16px;
 }