Merge branch 'main' into task-1510-fix-button-padding

jsapp/js/account/organization/InviteModal.tsx

@@ -0,0 +1,33 @@
+import {Group, Modal, Stack, Text, TextInput, ModalProps} from '@mantine/core';
+import ButtonNew from 'jsapp/js/components/common/ButtonNew';
+import {Select} from 'jsapp/js/components/common/Select';
+
+export default function InviteModal(props: ModalProps) {
+  return (
+    <Modal
+      opened={props.opened}
+      onClose={props.onClose}
+      title={t('Invite memebrs to your team')}
+    >
+      <Stack>
+        <Text>
+          {t('Enter the username or email address of the person you wish to invite to your team. They will receive an invitation in their inbox.')}
+        </Text>
+        <Group w='100%' gap='xs'>
+          <TextInput
+            flex={3}
+            placeholder={t('Enter username or email address')}
+          />
+          <Select
+            flex={2}
+            placeholder={'Role'}
+            data={['Owner', 'Admin', 'Member']}
+          />
+        </Group>
+        <Group w='100%' justify='flex-end'>
+          <ButtonNew size='lg'>{t('Send invite')}</ButtonNew>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}

jsapp/js/account/organization/MembersRoute.tsx

@@ -8,28 +8,36 @@ import Avatar from 'js/components/common/avatar';
 import Badge from 'jsapp/js/components/common/badge';
 import MemberActionsDropdown from './MemberActionsDropdown';
 import MemberRoleSelector from './MemberRoleSelector';
+import ButtonNew from 'jsapp/js/components/common/ButtonNew';
+import {Divider, Group, Stack, Text, Title, Box} from '@mantine/core';
+import InviteModal from 'js/account/organization/InviteModal';
 
 // Stores, hooks and utilities
 import {formatTime} from 'js/utils';
 import {OrganizationUserRole, useOrganizationQuery} from './organizationQuery';
 import useOrganizationMembersQuery from './membersQuery';
+import {useDisclosure} from '@mantine/hooks';
 
 // Constants and types
 import type {OrganizationMember} from './membersQuery';
 import type {UniversalTableColumn} from 'jsapp/js/universalTable/universalTable.component';
 
 // Styles
 import styles from './membersRoute.module.scss';
+import {FeatureFlag, useFeatureFlag} from 'jsapp/js/featureFlags';
 
 export default function MembersRoute() {
   const orgQuery = useOrganizationQuery();
+  const [opened, {open, close}] = useDisclosure(false);
 
   if (!orgQuery.data) {
-    return (
-      <LoadingSpinner />
-    );
+    return <LoadingSpinner />;
   }
 
+  const isInviteOrgMembersEnabled = useFeatureFlag(
+    FeatureFlag.orgMemberInvitesEnabled
+  );
+
   const columns: Array<UniversalTableColumn<OrganizationMember>> = [
     {
       key: 'user__extra_details__name',
@@ -63,7 +71,8 @@ export default function MembersRoute() {
       key: 'date_joined',
       label: t('Date added'),
       size: 140,
-      cellFormatter: (member: OrganizationMember) => formatTime(member.date_joined),
+      cellFormatter: (member: OrganizationMember) =>
+        formatTime(member.date_joined),
     },
     {
       key: 'role',
@@ -141,6 +150,30 @@ export default function MembersRoute() {
         <h2 className={styles.headerText}>{t('Members')}</h2>
       </header>
 
+      {isInviteOrgMembersEnabled &&
+        !(orgQuery.data.request_user_role === 'member') && (
+          <Box>
+            <Divider />
+            <Group w='100%' justify='space-between'>
+              <Stack gap='xs' pt='xs' pb='xs'>
+                {/*TODO: 'Roboto' font is not loading correctly. The styling matches the figma but still looks off.*/}
+                <Title fw={600} order={5}>{t('Invite members')}</Title>
+                <Text>
+                  {t('Invite more people to join your team or change their role permissions below.')}
+                </Text>
+              </Stack>
+
+              <Box>
+                <ButtonNew size='lg' onClick={open}>
+                  {t('Invite members')}
+                </ButtonNew>
+                <InviteModal opened={opened} onClose={close} />
+              </Box>
+            </Group>
+            <Divider mb='md' />
+          </Box>
+        )}
+
       <PaginatedQueryUniversalTable<OrganizationMember>
         queryHook={useOrganizationMembersQuery}
         columns={columns}