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 (
+
+
+
+ }
+ />
+ );
+};