Skip to content

Commit

Permalink
Merge pull request #333 from credebl/ecosystem-invitation-flow-issues
Browse files Browse the repository at this point in the history 
Ecosystem invitation flow issues
  • Loading branch information
@nishad-ayanworks
nishad-ayanworks authored Oct 11, 2023
2 parents 228df53 + 3217a87 commit c148a79
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 81 deletions.
54 changes: 28 additions & 26 deletions src/components/Ecosystem/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import SendInvitationModal from '../organization/invitations/SendInvitationModal
import { Dropdown } from 'flowbite-react';
import EditPopupModal from '../EditEcosystemOrgModal';
import { getFromLocalStorage, setToLocalStorage } from '../../api/Auth';
import { getEcosytemReceivedInvitations } from '../../api/invitations';
import { getUserEcosystemInvitations } from '../../api/invitations';
import { pathRoutes } from '../../config/pathRoutes';
import type { EcosystemDashboard } from '../organization/interfaces';

Expand Down Expand Up @@ -66,28 +66,25 @@ const Dashboard = () => {
fetchEcosystemDetails()
};

const getAllEcosystemInvitations = async () => {
setLoading(true);
const response = await getEcosytemReceivedInvitations(
currentPage.pageNumber,
currentPage.pageSize,
''
);
const { data } = response as AxiosResponse;

const getAllEcosystemInvitations = async () => {

setLoading(true);
const response = await getUserEcosystemInvitations(
currentPage.pageNumber,
currentPage.pageSize,
'',
);
const { data } = response as AxiosResponse;

if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
const totalPages = data?.data?.totalPages;

const invitationList = data?.data;
const ecoSystemName = invitationList.map((invitations: { name: string; }) => {
return invitations.name
})
const invitationPendingList = data?.data?.invitations && data?.data?.invitations?.filter((invitation: { status: string; }) => {
const totalPages = data?.data?.totalPages;

const invitationPendingList = data?.data?.invitations.filter((invitation: { status: string; }) => {
return invitation.status === 'pending'
})

if (invitationPendingList && invitationPendingList.length > 0) {
setMessage(`You have received invitation to join ${ecoSystemName} ecosystem `)
if (invitationPendingList.length > 0) {
setMessage(`You have received invitation to join ecosystem `)
setViewButton(true);
}
setCurrentPage({
Expand Down Expand Up @@ -147,10 +144,17 @@ const Dashboard = () => {

}

const checkOrgId = async () => {
const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
if (orgId) {
await getAllEcosystemInvitations();
}
};

const getDashboardData = async () => {
await checkOrgId();
await fetchEcosystemDetails();
await fetchEcosystemDashboard();
getAllEcosystemInvitations();
};

useEffect(() => {
Expand Down Expand Up @@ -188,9 +192,9 @@ const Dashboard = () => {
<>
<div className="cursor-pointer">
{<AlertComponent
message={message || error}
type={message ? 'warning' : 'failure'}
viewButton={viewButton}
message={message ? message : error}
type={message ? message==='Ecosystem invitations sent successfully'? 'success' : 'warning' : 'failure'}
viewButton={message==='Ecosystem invitations sent successfully'? false : true}
path={pathRoutes.ecosystem.invitation}
onAlertClose={() => {
setMessage(null);
Expand All @@ -209,8 +213,6 @@ const Dashboard = () => {
}}
/>
)}


</>
}

Expand Down Expand Up @@ -414,4 +416,4 @@ const Dashboard = () => {
);
};

export default Dashboard;
export default Dashboard;
2 changes: 1 addition & 1 deletion src/components/EcosystemInvite/EcoInvitationList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const EcoInvitationList = (props: InvitationProps) => {
<li className="pt-3 sm:pt-3 overflow-auto">
<div className="items-center space-x-4">
<div className="inline-flex items-center text-base font-normal text-gray-900 dark:text-white">
Roles:
Role:{' '}
<span
key={invitationId}
className="m-1 bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"
Expand Down
34 changes: 23 additions & 11 deletions src/components/EcosystemInvite/EcoSystemReceivedInvitations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ const ReceivedInvitations = () => {
if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
setMessage(data?.message);
setLoading(false);
window.location.href = pathRoutes.ecosystem.root
getAllInvitations()
} else {
setError(response as string);
setLoading(false);
Expand Down Expand Up @@ -201,20 +201,33 @@ stroke-linejoin="round"

return (
<div className="px-4 pt-6">
<div className="pl-6 mb-4 col-span-full xl:mb-2">
<BreadCrumbs />
<div className="mb-4 col-span-full xl:mb-2">
<div className="flex justify-between items-center">
<BreadCrumbs />
<Button
type="submit"
color='bg-primary-800'
onClick={() => {
window.location.href = `${pathRoutes.ecosystem.root}`
}}
className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700
ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2
lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black
dark:hover:bg-primary-50'
style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
>
<svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
<path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
</svg>
<span className="min-[320px]:hidden sm:block"> Back</span>
</Button>
</div>
<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
Received Invitations
Received Ecosystem Invitations
</h1>
</div>
<div>
<div className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<SendInvitationModal
openModal={props.openModal}
setMessage={(data) => setMessage(data)}
setOpenModal={props.setOpenModal}
/>

<AlertComponent
message={message ? message : error}
type={message ? 'success' : 'failure'}
Expand All @@ -238,7 +251,6 @@ stroke-linejoin="round"
<div id={invitation.email} className=" xl:mb-4 2xl:mb-0">
<EcoInvitationList
invitationId={invitation.id}
invitationEmail={invitation.email}
ecosytem={invitation.ecosystem}
/>

Expand Down
90 changes: 50 additions & 40 deletions src/components/EcosystemInvite/SentInvitations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const SentInvitations = () => {
if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
setLoading(true);
await getAllSentInvitations();
setMessage('Invitation deleted successfully')
setMessage('Invitation deleted successfully');
} else {
setError(response as string);
}
Expand Down Expand Up @@ -110,8 +110,8 @@ const SentInvitations = () => {
<div className="flow-root">
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
{invitationsList.map((invitation) => (
<li className="p-4">
<div className="flex flex-wrap justify-between xl:block 2xl:flex align-center 2xl:space-x-4">
<li key={invitation.id} className="p-4 min-[320px]:h-52 sm:h-48 md:h-[150px] items-center">
<div className="flex flex-wrap justify-between align-middle 2xl:flex items-center 2xl:space-x-4">
<div className=" xl:mb-4 2xl:mb-0">
<div className="flex space-x-4">
<svg
Expand Down Expand Up @@ -153,7 +153,6 @@ const SentInvitations = () => {
</clipPath>
</defs>
</svg>

<div className="flex-1 min-w-0">
<p className="text-base font-semibold text-gray-900 leading-none truncate mb-0.5 dark:text-white">
{invitation.email}
Expand All @@ -164,9 +163,11 @@ const SentInvitations = () => {
<li className="pt-3 sm:pt-3 overflow-auto">
<div className="items-center space-x-4">
<div className="inline-flex items-center text-base font-normal text-gray-900 dark:text-white">
Roles:{' '}
Role:{' '}
<span
key={invitation.id} >
key={invitation.id}
className="m-1 bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"
>
Ecosystem Member
</span>
</div>
Expand All @@ -176,43 +177,52 @@ const SentInvitations = () => {
</div>
</div>
</div>
</div>

<div className="flex">
<Button
onClick={() => deletInvitations(invitation.id)}
color="bg-white"
className="mx-5 font-normal items-center mt-5 text-xl text-primary-700 border border-blue-700 text-center hover:!bg-primary-800 hover:text-white rounded-lg focus:ring-4 focus:ring-primary-300 sm:w-auto dark:hover:bg-primary-700 dark:text-white dark:bg-primary-700 dark:focus:ring-blue-800"
<div>
<div className="dark:text-white flex items-center justify-end">
Status:
<span
key={invitation.id}
className={`${
invitation.status === 'pending'
? ' bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300'
: invitation.status === 'accepted'
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
} m-1 text-sm font-medium px-2.5 py-0.5 rounded`}
>
<svg
className="w-6 h-6"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="m13 7-6 6m0-6 6 6m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
<span className="text-lg ml-2">
Delete Invitation
</span>
</Button>
{invitation.status}
</span>
</div>
</div>

<div className="dark:text-white">
Status:
<span
key={invitation.id}
className="m-1 text-sm font-medium mr-2 px-2.5 py-0.5 rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
>
{invitation.status}
</span>
{invitation.status === 'pending' && (
<div className="flex">
<Button
onClick={() => deletInvitations(invitation.id)}
color="bg-white"
className="ml-5 font-normal items-center mt-5 text-xl text-primary-700 border border-blue-700 text-center hover:!bg-primary-800 hover:text-white rounded-lg focus:ring-4 focus:ring-primary-300 sm:w-auto dark:hover:bg-primary-700 dark:text-white dark:bg-primary-700 dark:focus:ring-blue-800"
>
<svg
className="w-6 h-6"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="m13 7-6 6m0-6 6 6m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
<span className="text-lg ml-2">
Delete Invitation
</span>
</Button>
</div>
)}
</div>
</div>
</li>
Expand Down
5 changes: 2 additions & 3 deletions src/components/organization/invitations/SendInvitationModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ const SendInvitationModal = (props: {
props.setOpenModal(false);
}}
>
<Modal.Header>Send Invitations</Modal.Header>
<Modal.Header>Send Invitation(s)</Modal.Header>
<Modal.Body>
<AlertComponent
message={erroMsg}
Expand Down Expand Up @@ -193,7 +193,6 @@ const SendInvitationModal = (props: {
id="email"
name="email"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
type="email"
/>
{formikHandlers?.errors?.email &&
formikHandlers?.touched?.email ? (
Expand Down Expand Up @@ -266,7 +265,7 @@ const SendInvitationModal = (props: {
<li className="pt-3 sm:pt-3 overflow-auto">
<div className="items-center space-x-4">
<div className="inline-flex items-center text-base font-normal text-gray-900 dark:text-white">
Roles: Member
Role: Member
</div>
</div>
</li>
Expand Down

0 comments on commit c148a79

Please sign in to comment.