Merge pull request #72 from credebl/291-send-invitation-design

Send invitation design: 291

Author: nishad-ayanworks

src/app/NavBarStacked.astro

@@ -8,7 +8,7 @@ import { asset, url } from '../lib/data.js';
 	<div class="container py-3 mx-auto">
 		<div class="flex items-center justify-between">
 			<div class="flex items-center justify-start">
-				<a class="flex mr-4">
+				<a class="flex mr-4" href='/'>
 					<img
 						src='/images/CREDEBL_ICON.png'
 						class="h-8 mr-3"

src/components/AlertComponent/index.tsx

@@ -1,18 +1,27 @@
-import { Alert, Avatar, Spinner } from 'flowbite-react';
+import { Alert } from 'flowbite-react';
+
+export const AlertComponent = ({ message, type, viewButton, onAlertClose }: { message: string | null, type: string, viewButton?: boolean, onAlertClose: () => void }) => {
 
-export const AlertComponent = ({ message, type, onAlertClose }: { message: string | null, type: string, onAlertClose: () => void }) => {
-    
 
     return message !== null ? <Alert
         className='mb-4'
         color={type}
         onDismiss={() => onAlertClose()}
     >
-        <span>
+        <span className='flex flex-wrap justify-between items-center'>
             <p>
                 {message}
             </p>
+
+            {
+                viewButton
+                && <p className='md:w-32 lg:w-48 text-base text-primary-700 text-right'>
+                    View more...
+                </p>
+            }
+           
         </span>
+
     </Alert>
-    : <></>
+        : <></>
 }

src/components/EmptyListComponent/index.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 
 export const EmptyListMessage = ({ message, description, buttonContent, svgComponent, onClick }
     : {
@@ -11,12 +11,12 @@ export const EmptyListMessage = ({ message, description, buttonContent, svgCompo
     }) => {
     return (
         <div className='flex mt-20 justify-start items-center flex-col'>
-            <p className='text-2xl font-bold mb-4'>{message}</p>
-            <p className='text-lg mb-4'>{description}</p>
+            <p className='text-2xl font-bold mb-4 text-gray-900 dark:text-white'>{message}</p>
+            <p className='text-lg mb-4 text-gray-900 dark:text-white'>{description}</p>
             {
                 buttonContent
                 && <button
-                    className='group flex h-min p-3 mt-10 items-center justify-center p-0.5 font-medium focus:z-10 border border-transparent enabled:hover:bg-cyan-800 dark:enabled:hover:bg-cyan-700 text-base font- text-center text-white bg-primary-700 rounded-lg hover:bg-accent-00 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800&quot;'
+                    className='group flex h-min p-3 mt-5 items-center justify-center p-0.5 font-medium focus:z-10 border border-transparent enabled:hover:bg-cyan-800 dark:enabled:hover:bg-cyan-700 text-base font- text-center text-white bg-primary-700 rounded-lg hover:bg-accent-00 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800&quot;'
                     onClick={onClick}>
                     {svgComponent}
                     <span className="ml-2">{buttonContent}</span>

src/components/UserDashBoard.tsx

@@ -1,12 +1,13 @@
-import type { AxiosResponse } from "axios";
 import { useEffect, useState } from "react";
-import { getUserInvitations } from "../api/invitations";
-import { getOrganizations } from "../api/organization";
-import { apiStatusCodes } from "../config/CommonConstant";
-import { pathRoutes } from "../config/pathRoutes";
+
 import { AlertComponent } from "./AlertComponent";
-import type { Organisation } from "./organization/interfaces";
+import type { AxiosResponse } from "axios";
 import CustomAvatar from '../components/Avatar'
+import type { Organisation } from "./organization/interfaces";
+import { apiStatusCodes } from "../config/CommonConstant";
+import { getOrganizations } from "../api/organization";
+import { getUserInvitations } from "../api/invitations";
+import { pathRoutes } from "../config/pathRoutes";
 
 const initialPageState = {
 	pageNumber: 1,
@@ -17,6 +18,7 @@ const initialPageState = {
 const UserDashBoard = () => {
 
 	const [message, setMessage] = useState<string | null>(null)
+	const [viewButton, setViewButton] = useState<boolean>(false)
 	const [error, setError] = useState<string | null>(null)
 	const [currentPage, setCurrentPage] = useState(initialPageState);
 	const [loading, setLoading] = useState<boolean>(false)
@@ -37,6 +39,7 @@ const UserDashBoard = () => {
 
 			if (invitationList.length > 0) {
 				setMessage('You have some pending received invitations')
+				setViewButton(true)
 			}
 
 			setCurrentPage({
@@ -91,6 +94,7 @@ const UserDashBoard = () => {
 				<AlertComponent
 					message={message ? message : error}
 					type={message ? 'warning' : 'failure'}
+					viewButton={viewButton}
 					onAlertClose={() => {
 						setMessage(null)
 						setError(null)

src/components/organization/OrgDropDown.tsx

@@ -12,8 +12,6 @@ import { pathRoutes } from '../../config/pathRoutes';
 const OrgDropDown = () => {
 	const [orgList, setOrgList] = useState<Organisation[]>([]);
 	const [activeOrg, setactiveOrg] = useState<Organisation | null>(null)
-	
-
 
 	useEffect(() => {
 		getAllorgs()
@@ -36,31 +34,34 @@ const OrgDropDown = () => {
 	};
 
 	const setActiveOrg = async (organizations: Organisation[]) => {
-		
+
 		let activeOrg: Organisation | null = null
 
 		const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
 		if (orgId) {
 			activeOrg = organizations?.find(org => org.id === Number(orgId)) as Organisation
 			setactiveOrg(activeOrg || null)
-			await setToLocalStorage(storageKeys.ORG_ID, orgId.toString());
 		} else {
 			activeOrg = organizations && organizations[0]
 			setactiveOrg(activeOrg || null)
-			await setToLocalStorage(storageKeys.ORG_ID, activeOrg.id.toString());
 
 		}
 
-		const roles: string[] = activeOrg?.userOrgRoles.map(role => role.orgRole.name)
-		activeOrg.roles = roles
+		if (activeOrg) {
+
+			await setToLocalStorage(storageKeys.ORG_ID, activeOrg.id.toString());
+			const roles: string[] = activeOrg?.userOrgRoles.map(role => role.orgRole.name)
+			activeOrg.roles = roles
+
+			await setToLocalStorage(storageKeys.ORG_ROLES, roles.toString());
+		}
 
-		await setToLocalStorage(storageKeys.ORG_ROLES, roles.toString());
 
 	}
 
 	const redirectToCreateOrgModal = () => {
 		window.location.href = '/organizations?orgModal=true';
-		
+
 	}
 
 	return (
@@ -75,8 +76,8 @@ const OrgDropDown = () => {
 
 				<>
 					{
-						activeOrg ?
-							<>
+						activeOrg
+							? <>
 								{activeOrg.logoUrl ? (
 									<CustomAvatar size="20" src={activeOrg?.logoUrl} round />
 								) : (
@@ -136,8 +137,8 @@ const OrgDropDown = () => {
 					onClick={redirectToCreateOrgModal}
 				>
 					<svg xmlns="http://www.w3.org/2000/svg" className='pr-2 dark:text-white' width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path fill="currentColor" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
-</svg>
+						<path fill="currentColor" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+					</svg>
 
 
 					Create Organization

src/components/organization/OrganizationsList.tsx

@@ -193,7 +193,7 @@ const OrganizationsList = () => {
                                       return (
                                         <span
                                           key={index}
-                                          className="m-1 bg-primary-50 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-primary-700"
+                                          className="m-1 bg-primary-50 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"
                                         >
                                           {role.charAt(0).toUpperCase() + role.slice(1)}
                                         </span>

src/components/organization/invitations/SendInvitationModal.tsx

@@ -22,12 +22,12 @@ interface Invitations {
 
 
 interface RoleI {
-   id: number
-   name: string
+    id: number
+    name: string
 }
 
 
-const SendInvitationModal = (props: { openModal: boolean;  setMessage: (message: string)=> void ; setOpenModal: (flag: boolean)=> void }) => {
+const SendInvitationModal = (props: { openModal: boolean; setMessage: (message: string) => void; setOpenModal: (flag: boolean) => void }) => {
 
     const [loading, setLoading] = useState<boolean>(false)
 
@@ -47,7 +47,7 @@ const SendInvitationModal = (props: { openModal: boolean;  setMessage: (message:
         const { data } = resRoles as AxiosResponse
 
         if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-            
+
             const roles: Array<RoleI> = data?.data.response
 
             const memberRole = roles.find(role => role.name === 'member')
@@ -89,7 +89,7 @@ const SendInvitationModal = (props: { openModal: boolean;  setMessage: (message:
 
     const sendInvitations = async () => {
 
-         setLoading(true)
+        setLoading(true)
 
         const invitationPayload = invitations.map(invitation => {
             return {
@@ -124,13 +124,13 @@ const SendInvitationModal = (props: { openModal: boolean;  setMessage: (message:
             }>
             <Modal.Header>Send Invitations</Modal.Header>
             <Modal.Body>
-                 <AlertComponent
+                <AlertComponent
                     message={erroMsg}
                     type={'error'}
-                    onAlertClose = {() => {
+                    onAlertClose={() => {
                         setErrMsg(null)
                     }}
-                    />
+                />
                 <Formik
                     initialValues={initialInvitationData}
                     validationSchema={
@@ -180,12 +180,11 @@ const SendInvitationModal = (props: { openModal: boolean;  setMessage: (message:
 
                                 <div className="w-1/3">
                                     <Button type="submit"
-                                        color="gray"
-                                        className='mt-6 float-right text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-700 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
-                                        ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
-                                        <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
-                                      </svg>
-                                                                      
+                                        className='mt-6 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
+                                    ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
+                                            <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+                                        </svg>
+
                                         ADD
                                     </Button>
                                 </div>
@@ -197,10 +196,10 @@ const SendInvitationModal = (props: { openModal: boolean;  setMessage: (message:
                     )}
 
                 </Formik>
-                {
-                    invitations.length > 0 &&
-                    <div>
-                        <div
+
+                <div>
+                    {
+                        invitations.length > 0 && <div
                             className="p-2 my-2 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-2 dark:bg-gray-800"
                         >
                             <ul className="divide-y divide-gray-200 dark:divide-gray-700">
@@ -248,19 +247,19 @@ const SendInvitationModal = (props: { openModal: boolean;  setMessage: (message:
                                 }
                             </ul>
                         </div>
-                        <div className="mt-4 flex justify-end">
-                            <Button
-                                onClick={sendInvitations}
-                                isProcessing={loading}
-                                className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
-                            >
-                                Send
-                            </Button>
-                        </div>
+                    }
+
+                    <div className="mt-4 flex justify-end">
+                        <Button
+                            onClick={sendInvitations}
+                            disabled={invitations.length === 0}
+                            isProcessing={loading}
+                            className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
+                        >
+                            Send
+                        </Button>
                     </div>
-
-                }
-
+                </div>
 
             </Modal.Body>