#421 Inviting user by role and email (#450)

* Pagination re-design  #408

* feat(invitation):admin should invite user by role and email

- ensure that a user should be invited by providing email and role.
-ensure that a user that invited should recieve invitation email containing the link to register to any organization.

[Deliver #421]

---------

Co-authored-by: Bananayosostene <[email protected]>

Author: niyobertin

package-lock.json

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const SEND_INVITATION = gql`
+  mutation SendInvitation($invitees: [InviteeInput!]!, $orgToken: String!) {
+    sendInvitation(invitees: $invitees, orgToken: $orgToken) {
+      status
+      invitees {
+        email
+        role
+      }
+      orgToken
+      createdAt
+    }
+  }
+`;

src/Mutations/invitationMutation.tsx

@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from 'react';
+import { useMutation } from '@apollo/client';
+import { toast } from 'react-toastify';
+import { IoIosCloseCircleOutline, IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
+import { BsExclamationCircleFill } from "react-icons/bs";
+import {SEND_INVITATION} from '../Mutations/invitationMutation'
+import ButtonLoading from './ButtonLoading';
+import validateEmail from '../utils/emailValidation';
+
+const roles: ('trainee' | 'admin' | 'ttl' | 'coordinator')[] = ['trainee', 'admin', 'ttl', 'coordinator'];
+interface InviteFormProps {
+  onClose: () => void;
+}
+function InviteForm({ onClose }: InviteFormProps) {
+  const [email, setEmail] = useState<string>('');
+  const [role, setRole] = useState<string>('Role');
+  const [orgToken, setOrgToken] = useState<string>('');
+  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+  const [emailError, setEmailError] = useState<string>('');
+  const [sendInvitation, { loading, error }] = useMutation(SEND_INVITATION);
+
+  const organisationToken = localStorage.getItem('orgToken');
+
+  useEffect(() => {
+    if (organisationToken) {
+      setOrgToken(organisationToken);
+    }
+  }, [organisationToken]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateEmail(email)) {
+      setEmailError('Please enter a valid email address.');
+      return;
+    }
+
+    setEmailError('');
+
+    try {
+      await sendInvitation({
+        variables: {
+          invitees: [{ email, role }],
+          orgToken,
+        },
+      });
+      toast.success('Invitation sent successfully!');
+      setEmail('');
+      setRole('Role');
+      setOrgToken('');
+    } catch (e: any) {
+      toast.error(`Error sending invitation: ${e.message}`);
+    }
+  };
+
+  const toggleDropdown = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const handleRoleSelect = (selectedRole: string) => {
+    setRole(selectedRole);
+    setIsDropdownOpen(true);
+  };
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    setEmailError('');
+  };
+
+  return (
+    <div className="relative bg-white dark:bg-[#020917]  p-6 rounded-lg shadow-lg max-w-sm w-full">
+      <h2 className="text-xl font-bold mb-4">Invite users</h2>
+      <button
+      type='button'
+        className="absolute top-2 right-2 text-black dark:text-white hover:text-gray-800"
+        onClick={onClose}
+        aria-label="Toggle role dropdown"
+      >
+        <IoIosCloseCircleOutline size={24} />
+      </button>
+      <form onSubmit={handleSubmit} className=" pb-12 sm:pb-16">
+        <div className="text-black dark:text-white py-2 mb-2">
+          Anyone you invite will be able to access the dashboard of this application.
+        </div>
+        <input
+          value={email}
+          type='emai'
+          onChange={handleEmailChange}
+          placeholder="Email address"
+          className="border border-[#d9d0fb] px-1 py-1 text-sm dark:bg-[#020917] rounded-md w-full mb-1 focus:outline-none focus:border-[#d9d0fb]"
+        />
+        {emailError && (
+          <p className="text-red-600 text-sm mb-4">{emailError}</p>
+        )}
+        <div>
+          <label className="pb-2">
+            <div className='flex justify-between pt-2 mb-8'>
+              <div className="relative w-[50%]">
+                <button
+                  type="button"
+                   aria-label="Toggle role dropdown"
+                  onClick={toggleDropdown}
+                  className="border border-[#d9d0fb] dark:bg-[#020917] py-1 rounded-md w-full focus:outline-none focus:border-[#d9d0fb] bg-white px-2 text-sm flex justify-between items-center"
+                >
+                  {role}
+                  {isDropdownOpen ? (
+                    <IoIosArrowUp size={20} />
+                  ) : (
+                    <IoIosArrowDown size={20} />
+                  )}
+                </button>
+                {isDropdownOpen && (
+                  <div className="absolute mt-1 w-full bg-[#f3f0fe] dark:bg-[#04122F] border border-[#d9d0fb] dark:border-[#020917] rounded-md shadow-lg z-10">
+                    {roles.map((roleOption) => (
+                      <div
+                        key={roleOption}
+                        onClick={() => handleRoleSelect(roleOption)}
+                        className="px-4 hover:bg-[#8667f2] cursor-pointer"
+                      >
+                        {roleOption.charAt(0).toUpperCase() + roleOption.slice(1)}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <div>
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="ml-4 py-1 flex justify-center bg-[#7a5edc] text-white px-4 rounded"
+                >
+                  {loading ?  <ButtonLoading
+                      style="rounded-md inline-block w-full sm:px-4 py-1 sm:py-0 opacity-50"
+                    /> : 'Invite'}
+                </button>
+              </div>
+            </div>
+          </label>
+        </div>
+      </form>
+      <div className="border-t-[1px] border-[#d9d0fb] m-0" />
+      <div className="flex justify-between pt-2">
+        <p className='flex justify-center items-center text-gray-400 gap-1'><BsExclamationCircleFill />Learn more</p>
+        <button
+          type="button"
+          aria-label="Toggle role dropdown"
+          disabled={loading}
+          className="flex justify-center bg-[#7a5edc] text-white px-4 py-1 rounded"
+        >
+          Upload users file
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default InviteForm;

src/components/invitationModal.tsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import '@testing-library/jest-dom';
+import AdminSission from '../Sessions';
+import { GET_SESSIONS,
+     CREATE_SESSION,
+      DELETE_SESSION,
+       EDIT_SESSION } from '../../../Mutations/session';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+jest.mock('../../../components/DataTable', () => {
+  return function MockDataTable({ data, columns }: any) {
+    return (
+      <div data-testid="data-table">
+        {data.map((item: any, index: number) => (
+          <div key={item.id}>
+            {columns.map((column: any) => (
+              <span key={column.accessor}>
+                {column.Cell ? column.Cell({ row: { original: item } }) : item[column.accessor]}
+              </span>
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  };
+});
+
+const mocks = [
+  {
+    request: {
+      query: GET_SESSIONS,
+    },
+    result: {
+      data: {
+        getAllSessions: [
+          {
+            id: '1',
+            Sessionname: 'Test Session',
+            description: 'Test Description',
+            platform: 'Test Platform',
+            duration: '1:00',
+            organizer: 'Test Organizer',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_SESSION,
+      variables: {
+        sessionInput: {
+          Sessionname: 'New Session',
+          description: 'New Description',
+          platform: 'New Platform',
+          duration: '2:00',
+          organizer: 'New Organizer',
+        },
+      },
+    },
+    result: {
+      data: {
+        createSession: {
+          id: '2',
+          Sessionname: 'New Session',
+          description: 'New Description',
+          platform: 'New Platform',
+          duration: '2:00',
+          organizer: 'New Organizer',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_SESSION,
+      variables: {
+        ID: '1',
+      },
+    },
+    result: {
+      data: {
+        deleteSession: {
+          id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: EDIT_SESSION,
+      variables: {
+        ID: '1',
+        editSessionInput: {
+          Sessionname: 'Updated Session',
+          description: 'Updated Description',
+          platform: 'Updated Platform',
+          duration: '3:00',
+          organizer: 'Updated Organizer',
+        },
+      },
+    },
+    result: {
+      data: {
+        editSession: {
+          id: '1',
+          Sessionname: 'Updated Session',
+          description: 'Updated Description',
+          platform: 'Updated Platform',
+          duration: '3:00',
+          organizer: 'Updated Organizer',
+        },
+      },
+    },
+  },
+];
+
+describe('AdminSission Component', () => {
+
+  it('displays session data in the table', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <AdminSission />
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Session')).toBeInTheDocument();
+      expect(screen.getByText('Test Description')).toBeInTheDocument();
+      expect(screen.getByText('Test Platform')).toBeInTheDocument();
+      expect(screen.getByText('1:00')).toBeInTheDocument();
+      expect(screen.getByText('Test Organizer')).toBeInTheDocument();
+    });
+  });
+
+  it('opens add session modal when register button is clicked', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <AdminSission />
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByText('register +'));
+    });
+
+    expect(screen.getByText('AddSession')).toBeInTheDocument();
+  });
+
+  it('opens delete session modal when delete icon is clicked', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <AdminSission />
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      const deleteIcon = screen.getByTestId('deleteIcon');
+      fireEvent.click(deleteIcon);
+    });
+
+    expect(screen.getByText('DeleteSession')).toBeInTheDocument();
+  });
+
+  it('opens update session modal when update icon is clicked', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <AdminSission />
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      const updateIcon = screen.getByTestId('updateIcon');
+      fireEvent.click(updateIcon);
+    });
+
+    expect(screen.getByText('UpdateSession')).toBeInTheDocument();
+  });
+});