added connection codes generation on super admin

src/pages/superadmin/header/InviteModal.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { nonWidgetConfigs } from 'people/utils/Constants';
+import { useIsMobile } from 'hooks/uiHooks';
+import { InvoiceForm, InvoiceInput, InvoiceLabel } from 'people/utils/style';
+import styled from 'styled-components';
+import { BudgetButton } from 'people/widgetViews/workspace/style';
+import { useStores } from 'store';
+import { Modal } from '../../../components/common';
+
+interface InviteProps {
+  open: boolean;
+  close: () => void;
+  addToast: (title: string, color: 'success' | 'error') => void;
+}
+
+const WithdrawModalTitle = styled.h3`
+  font-size: 1.9rem;
+  font-weight: bolder;
+  margin-bottom: 20px;
+`;
+
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 40px 50px;
+`;
+
+const InviteModal = (props: InviteProps) => {
+  const isMobile = useIsMobile();
+  const { main } = useStores();
+  const { open, close, addToast } = props;
+  const [loading, setLoading] = useState(false);
+  const [inviteNumber, setInviteNumber] = useState(1);
+  const config = nonWidgetConfigs['workspaceusers'];
+
+  const createConnectionCode = async () => {
+    setLoading(true);
+    const status = await main.createConnectionCodes(inviteNumber);
+
+    if (status === 200) {
+      addToast('Users invite code created successfully', 'success');
+      setInviteNumber(1);
+      close();
+    } else {
+      addToast('Could not create users invite code', 'error');
+    }
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <Modal
+        visible={open}
+        style={{
+          height: '100%',
+          flexDirection: 'column',
+          width: '100%',
+          alignItems: `${isMobile ? '' : 'center'}`,
+          justifyContent: `${isMobile ? '' : 'center'}`,
+          overflowY: 'hidden'
+        }}
+        envStyle={{
+          marginTop: isMobile ? 64 : 0,
+          background: 'white',
+          zIndex: 20,
+          ...(config?.modalStyle ?? {}),
+          maxHeight: '100%',
+          borderRadius: '10px'
+        }}
+        overlayClick={close}
+        bigCloseImage={close}
+        bigCloseImageStyle={{
+          top: '1.6rem',
+          right: `${isMobile ? '0rem' : '-1.25rem'}`,
+          background: '#000',
+          borderRadius: '50%'
+        }}
+      >
+        <Wrapper>
+          <WithdrawModalTitle className="withdraw-title">Invite Users</WithdrawModalTitle>
+          <InvoiceForm>
+            <InvoiceLabel
+              style={{
+                display: 'block'
+              }}
+            >
+              Number of users
+            </InvoiceLabel>
+            <InvoiceInput
+              data-testid="withdrawInvoiceInput"
+              type="text"
+              style={{
+                width: '100%'
+              }}
+              value={inviteNumber}
+              onChange={(e: any) => setInviteNumber(Number(e.target.value))}
+            />
+          </InvoiceForm>
+          <BudgetButton
+            disabled={false}
+            style={{
+              borderRadius: '8px',
+              marginTop: '12px',
+              color: !loading ? '#FFF' : 'rgba(142, 150, 156, 0.85)',
+              background: !loading ? '#9157F6' : 'rgba(0, 0, 0, 0.04)'
+            }}
+            onClick={createConnectionCode}
+          >
+            Confirm
+          </BudgetButton>
+        </Wrapper>
+      </Modal>
+    </>
+  );
+};
+
+export default InviteModal;

src/pages/superadmin/header/index.tsx

@@ -22,6 +22,7 @@ import arrowback from './icons/arrowback.svg';
 import arrowforward from './icons/arrowforward.svg';
 import expand_more from './icons/expand_more.svg';
 import App from './components/Calendar/App';
+import InviteModal from './InviteModal';
 
 interface HeaderProps {
   startDate?: number;
@@ -30,14 +31,16 @@ interface HeaderProps {
   setEndDate: (newDate: number) => void;
   workspace: string;
   setWorkspace: React.Dispatch<React.SetStateAction<string>>;
+  addToast: (title: string, color: 'success' | 'error') => void;
 }
 export const Header = ({
   startDate,
   setStartDate,
   endDate,
   setEndDate,
   workspace,
-  setWorkspace
+  setWorkspace,
+  addToast
 }: HeaderProps) => {
   const [showSelector, setShowSelector] = useState(false);
   const [showWorkspace, setShowWorkspace] = useState(false);
@@ -47,6 +50,7 @@ export const Header = ({
   const [dropdownText, setDropdownText] = useState<string>('Last 7 Days');
   const [workspaceText, setWorkspaceText] = useState<string>('Workspaces ...');
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [openInvite, setOpenInvite] = useState(false);
   const formatUnixDate = (unixDate: number) => {
     const formatString = 'DD MMM YYYY';
     if (startDate !== undefined && endDate !== undefined) {
@@ -81,6 +85,10 @@ export const Header = ({
     }
   };
 
+  const toggleModal = () => {
+    setOpenInvite(!openInvite);
+  };
+
   const exportCsv = async () => {
     setExportLoading(true);
     const csvUrl = await mainStore.exportMetricsBountiesCsv(
@@ -200,6 +208,9 @@ export const Header = ({
           ) : null}
         </LeftWrapper>
         <RightWrapper>
+          <ExportButton onClick={() => toggleModal()}>
+            <ExportText>Invite Users</ExportText>
+          </ExportButton>
           <ExportButton disabled={exportLoading} onClick={() => exportCsv()}>
             <ExportText>{exportLoading ? 'Exporting ...' : 'Export CSV'}</ExportText>
           </ExportButton>
@@ -262,6 +273,7 @@ export const Header = ({
           setShowCalendar={setShowCalendar}
         />
       )}
+      <InviteModal addToast={addToast} open={openInvite} close={toggleModal} />
     </Container>
   );
 };

src/pages/superadmin/index.tsx

@@ -3,7 +3,7 @@
  * To enable colaborations
  */
 import React, { useCallback, useEffect, useState } from 'react';
-import { EuiLoadingSpinner } from '@elastic/eui';
+import { EuiGlobalToastList, EuiLoadingSpinner } from '@elastic/eui';
 import styled from 'styled-components';
 import { BountyMetrics, defaultSuperAdminBountyStatus, Person } from 'store/interface';
 import { useStores } from 'store';
@@ -52,6 +52,7 @@ export const SuperAdmin = () => {
   const [providersCheckboxSelected, setProvidersCheckboxSelected] = useState<Person[]>([]);
   const [selectedProviders, setSelectedProviders] = useState<string>('');
   const [workspace, setWorkspace] = useState<string>('');
+  const [toasts, setToasts]: any = useState([]);
 
   /**
    * Todo use the same date range,
@@ -73,6 +74,20 @@ export const SuperAdmin = () => {
     setIsSuperAdmin(isSuperAdmin);
   }, [main]);
 
+  const addToast = (title: string, color: 'success' | 'error') => {
+    setToasts([
+      {
+        id: `${Math.random()}`,
+        title,
+        color
+      }
+    ]);
+  };
+
+  const removeToast = () => {
+    setToasts([]);
+  };
+
   useEffect(() => {
     getIsSuperAdmin();
   }, [getIsSuperAdmin]);
@@ -276,6 +291,7 @@ export const SuperAdmin = () => {
       ) : (
         <Container>
           <Header
+            addToast={addToast}
             startDate={startDate}
             endDate={endDate}
             setStartDate={setStartDate}
@@ -314,6 +330,7 @@ export const SuperAdmin = () => {
               providersCurrentPage={providersCurrentPage}
             />
           )}
+          <EuiGlobalToastList toasts={toasts} dismissToast={removeToast} toastLifeTimeMs={5000} />
         </Container>
       )}
     </>

src/store/main.ts

@@ -3428,5 +3428,33 @@ export class MainStore {
       return null;
     }
   }
+
+  async createConnectionCodes(users_number: number): Promise<number> {
+    try {
+      if (!uiStore.meInfo) return 406;
+      const info = uiStore.meInfo;
+
+      const data = {
+        number: users_number
+      };
+
+      const body = JSON.stringify(data);
+
+      const response = await fetch(`${TribesURL}/connectioncodes`, {
+        method: 'POST',
+        mode: 'cors',
+        body: body,
+        headers: {
+          'x-jwt': info.tribe_jwt,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      return response.status;
+    } catch (e) {
+      console.log('Error createConnectionCodes', e);
+      return 406;
+    }
+  }
 }
 export const mainStore = new MainStore();