diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenProgress/LastSeenProgress.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenProgress/LastSeenProgress.tsx index 31a53b1475..940c275de3 100644 --- a/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenProgress/LastSeenProgress.tsx +++ b/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenProgress/LastSeenProgress.tsx @@ -29,7 +29,7 @@ export const LastSeenProgress = ({ yes, no }: ILastSeenProgressProps) => { return ; } - const progress = (yes / (yes + no)) * 100; + const progress = Math.round((yes / (yes + no)) * 100); return ( diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx index e579bd52f0..df870baf4f 100644 --- a/frontend/src/component/project/Project/ProjectOverview.tsx +++ b/frontend/src/component/project/Project/ProjectOverview.tsx @@ -1,4 +1,4 @@ -import { type FC, useEffect } from 'react'; +import { type FC, useEffect, useState } from 'react'; import { Box, styled } from '@mui/material'; import ProjectInfo from './ProjectInfo/ProjectInfo'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; @@ -11,6 +11,7 @@ import { usePageTitle } from 'hooks/usePageTitle'; import { useLastViewedProject } from 'hooks/useLastViewedProject'; import { useUiFlag } from 'hooks/useUiFlag'; import { ProjectOverviewChangeRequests } from './ProjectOverviewChangeRequests'; +import { useFeedback } from '../../feedbackNew/useFeedback'; import { OldProjectFeatureToggles } from './PaginatedProjectFeatureToggles/OldProjectFeatureToggles'; const refreshInterval = 15 * 1000; @@ -99,6 +100,31 @@ const OldProjectOverview: FC<{ ); }; +const useDelayedFeedbackPrompt = () => { + const { openFeedback, hasSubmittedFeedback } = useFeedback( + 'newProjectOverview', + 'manual', + ); + + const [seenFeedback, setSeenFeedback] = useState(false); + useEffect(() => { + const timer = setTimeout(() => { + if (!seenFeedback && !hasSubmittedFeedback) { + openFeedback({ + title: 'How easy was it to work with the project overview in Unleash?', + positiveLabel: + 'What do you like most about the updated project overview?', + areasForImprovementsLabel: + 'What improvements are needed in the project overview?', + }); + setSeenFeedback(true); + } + }, 30000); + + return () => clearTimeout(timer); + }, [hasSubmittedFeedback, openFeedback, seenFeedback]); +}; + const NewProjectOverview: FC<{ storageKey?: string; }> = ({ storageKey = 'project-overview-v2' }) => { @@ -108,6 +134,7 @@ const NewProjectOverview: FC<{ const { project } = useProjectOverview(projectId, { refreshInterval, }); + useDelayedFeedbackPrompt(); usePageTitle(`Project overview – ${projectName}`); const { setLastViewed } = useLastViewedProject(); diff --git a/frontend/src/hooks/useSubmittedFeedback.ts b/frontend/src/hooks/useSubmittedFeedback.ts index 169f6c80c9..e70cc95b3f 100644 --- a/frontend/src/hooks/useSubmittedFeedback.ts +++ b/frontend/src/hooks/useSubmittedFeedback.ts @@ -4,7 +4,8 @@ export type IFeedbackCategory = | 'search' | 'newStrategyForm' | 'insights' - | 'applicationOverview'; + | 'applicationOverview' + | 'newProjectOverview'; export const useUserSubmittedFeedback = (category: IFeedbackCategory) => { const key = `unleash-userSubmittedFeedback:${category}`;