From 793221524c09d3fab1c2f1375613b7433ab33a3c Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Thu, 17 Oct 2024 10:49:17 +0200
Subject: [PATCH] feat: prompt for feedback after second flag created (#8467)

---
 .../CreateFeatureDialog.tsx                   | 14 ++++---------
 .../hooks/useFeatureCreatedFeedback.ts        | 21 +++++++++++++++++++
 2 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/hooks/useFeatureCreatedFeedback.ts

diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
index 178f8c3c0e..12abbcc15a 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
@@ -2,20 +2,13 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import useToast from 'hooks/useToast';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
-import {
-    type ReactNode,
-    useState,
-    useContext,
-    type FormEvent,
-    useMemo,
-} from 'react';
+import { type ReactNode, useState, type FormEvent, useMemo } from 'react';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useNavigate } from 'react-router-dom';
 import { Dialog, styled } from '@mui/material';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { Limit } from 'component/common/Limit/Limit';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import UIContext from 'contexts/UIContext';
 import useFeatureForm from 'component/feature/hooks/useFeatureForm';
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import FlagIcon from '@mui/icons-material/Flag';
@@ -36,6 +29,7 @@ import { MultiSelectConfigButton } from 'component/common/DialogFormTemplate/Con
 import type { ITag } from 'interfaces/tags';
 import { ToggleConfigButton } from 'component/common/DialogFormTemplate/ConfigButtons/ToggleConfigButton';
 import { useFlagLimits } from './useFlagLimits';
+import { useFeatureCreatedFeedback } from './hooks/useFeatureCreatedFeedback';
 
 interface ICreateFeatureDialogProps {
     open: boolean;
@@ -104,9 +98,9 @@ const CreateFeatureDialogContent = ({
     onSuccess,
 }: ICreateFeatureDialogProps) => {
     const { setToastData, setToastApiError } = useToast();
-    const { setShowFeedback } = useContext(UIContext);
     const { uiConfig, isOss } = useUiConfig();
     const navigate = useNavigate();
+    const openFeatureCreatedFeedback = useFeatureCreatedFeedback();
 
     const {
         type,
@@ -177,7 +171,7 @@ const CreateFeatureDialogContent = ({
                 });
                 onClose();
                 onSuccess?.();
-                setShowFeedback(true);
+                openFeatureCreatedFeedback();
             } catch (error: unknown) {
                 setToastApiError(formatUnknownError(error));
             }
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/hooks/useFeatureCreatedFeedback.ts b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/hooks/useFeatureCreatedFeedback.ts
new file mode 100644
index 0000000000..6eeb34ba19
--- /dev/null
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/hooks/useFeatureCreatedFeedback.ts
@@ -0,0 +1,21 @@
+import { useCallback, useContext } from 'react';
+import UIContext from 'contexts/UIContext';
+import { createLocalStorage } from 'utils/createLocalStorage';
+
+export const useFeatureCreatedFeedback = () => {
+    const { setShowFeedback } = useContext(UIContext);
+
+    return useCallback(() => {
+        const { value, setValue } = createLocalStorage<string>(
+            'flagsCreated',
+            '0',
+        );
+        const flagsCount = Number.parseInt(value) + 1;
+
+        setValue(`${flagsCount}`);
+
+        if (flagsCount > 1) {
+            setShowFeedback(true);
+        }
+    }, [setShowFeedback]);
+};