diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx index 0f6bb7a29a..aa87a5f720 100644 --- a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx +++ b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx @@ -1,17 +1,20 @@ import { VFC } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { Box, Button, Typography } from '@mui/material'; -import useLoading from 'hooks/useLoading'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useInviteTokens } from 'hooks/api/getters/useInviteTokens/useInviteTokens'; -import { LinkField } from '../LinkField/LinkField'; -import { add, formatDistanceToNowStrict, isAfter, parseISO } from 'date-fns'; -import { formatDateYMD } from 'utils/formatDate'; -import { useLocationSettings } from 'hooks/useLocationSettings'; +import { Box } from '@mui/material'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { InviteLinkBarContent } from './InviteLinkBarContent'; export const InviteLinkBar: VFC = () => { + const { trackEvent } = usePlausibleTracker(); + const onInviteLinkActionClick = (inviteLink?: string) => { + trackEvent('invite', { + props: { + eventType: inviteLink + ? 'link bar action: edit' + : 'link bar action: create', + }, + }); + }; + return ( ({ @@ -21,12 +24,15 @@ export const InviteLinkBar: VFC = () => { mb: 2, borderRadius: `${theme.shape.borderRadiusLarge}px`, display: 'flex', - flexDirection: { xs: 'column', md: 'row' }, + flexDirection: { + xs: 'column', + md: 'row', + }, border: '2px solid', borderColor: theme.palette.background.alternative, })} > - + ); }; diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx index c4cc222f51..f3011b7bdd 100644 --- a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx +++ b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx @@ -10,7 +10,7 @@ import { useLocationSettings } from 'hooks/useLocationSettings'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; interface IInviteLinkBarContentProps { - onActionClick?: () => void; + onActionClick?: (inviteLink?: string) => void; } export const StyledBox = styled(Box)(() => ({ @@ -64,15 +64,8 @@ export const InviteLinkBarContent = ({ ); const onInviteLinkActionClick = () => { - trackEvent('invite', { - props: { - eventType: inviteLink - ? 'link bar action: edit' - : 'link bar action: create', - }, - }); + onActionClick?.(inviteLink); navigate('/admin/invite-link'); - onActionClick?.(); }; return ( <> diff --git a/frontend/src/component/menu/Header/InviteLink/InviteLinkButton/InviteLinkButton.tsx b/frontend/src/component/menu/Header/InviteLink/InviteLinkButton/InviteLinkButton.tsx index 99efef1262..0ea0239784 100644 --- a/frontend/src/component/menu/Header/InviteLink/InviteLinkButton/InviteLinkButton.tsx +++ b/frontend/src/component/menu/Header/InviteLink/InviteLinkButton/InviteLinkButton.tsx @@ -5,7 +5,7 @@ import { focusable } from 'themes/themeStyles'; import AccessContext from 'contexts/AccessContext'; import { PersonAdd } from '@mui/icons-material'; import { InviteLinkContent } from '../InviteLinkContent'; -import { useUiFlag } from '../../../../../hooks/useUiFlag'; +import { useUiFlag } from 'hooks/useUiFlag'; const StyledContainer = styled('div')(() => ({ position: 'relative', diff --git a/frontend/src/component/menu/Header/InviteLink/InviteLinkContent.tsx b/frontend/src/component/menu/Header/InviteLink/InviteLinkContent.tsx index 37a73e71ce..3831fadd46 100644 --- a/frontend/src/component/menu/Header/InviteLink/InviteLinkContent.tsx +++ b/frontend/src/component/menu/Header/InviteLink/InviteLinkContent.tsx @@ -1,12 +1,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { Button, Paper, Typography, styled, Link } from '@mui/material'; -import { basePath } from 'utils/formatPath'; -import { IUser } from 'interfaces/user'; -import OpenInNew from '@mui/icons-material/OpenInNew'; -import { Link as RouterLink } from 'react-router-dom'; -import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; -import { InviteLinkBar } from '../../../admin/users/InviteLinkBar/InviteLinkBar'; -import { InviteLinkBarContent } from '../../../admin/users/InviteLinkBar/InviteLinkBarContent'; +import { Paper, styled } from '@mui/material'; +import { InviteLinkBarContent } from 'component/admin/users/InviteLinkBar/InviteLinkBarContent'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const StyledPaper = styled(Paper)(({ theme }) => ({ display: 'flex', @@ -36,17 +31,29 @@ export const InviteLinkContent = ({ id, showInviteLinkContent, setShowInviteLinkContent, -}: IInviteLinkContentProps) => ( - - { - setShowInviteLinkContent(false); - }} - /> - - } - /> -); +}: IInviteLinkContentProps) => { + const { trackEvent } = usePlausibleTracker(); + + const onInviteLinkActionClick = (inviteLink?: string) => { + setShowInviteLinkContent(false); + trackEvent('invite', { + props: { + eventType: inviteLink + ? 'header link bar action: edit' + : 'header link bar action: create', + }, + }); + }; + return ( + + + + } + /> + ); +};