feat: add dont ask me again button (#5753)

Unleash · Jan 4, 2024 · b24471c · b24471c
1 parent 5582339
commit b24471c
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 33 deletions.
diff --git a/...tend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx b/...tend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx
@@ -190,8 +190,10 @@ export const NewFeatureStrategyForm = ({
     setTab,
     StrategyVariants,
 }: IFeatureStrategyFormProps) => {
-    const { openFeedback, hasSubmittedFeedback } =
-        useFeedback(feedbackCategory);
+    const { openFeedback, hasSubmittedFeedback } = useFeedback(
+        feedbackCategory,
+        'manual',
+    );
     const { trackEvent } = usePlausibleTracker();
     const [showProdGuard, setShowProdGuard] = useState(false);
     const hasValidConstraints = useConstraintsValidation(strategy.constraints);

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -71,8 +71,10 @@ const feedbackCategory = 'search';
 
 const FeatureToggleListTableComponent: VFC = () => {
     const theme = useTheme();
-    const { openFeedback, hasSubmittedFeedback } =
-        useFeedback(feedbackCategory);
+    const { openFeedback, hasSubmittedFeedback } = useFeedback(
+        feedbackCategory,
+        'automatic',
+    );
     const { trackEvent } = usePlausibleTracker();
     const { environments } = useEnvironments();
     const enabledEnvironments = environments

diff --git a/frontend/src/component/feedbackNew/FeedbackComponent.tsx b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
@@ -18,7 +18,7 @@ import { useUserSubmittedFeedback } from 'hooks/useSubmittedFeedback';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { IToast } from 'interfaces/toast';
 import { useTheme } from '@mui/material/styles';
-import { FeedbackData } from './FeedbackContext';
+import { FeedbackData, FeedbackMode } from './FeedbackContext';
 
 export const ParentContainer = styled('div')(({ theme }) => ({
     position: 'relative',
@@ -161,30 +161,41 @@ const StyledCloseButton = styled(IconButton)(({ theme }) => ({
     color: theme.palette.background.paper,
 }));
 
+const StyledButtonContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1.25),
+    alignItems: 'flex-start',
+}));
+
 export const FeedbackComponentWrapper = () => {
-    const { feedbackData, showFeedback, closeFeedback } = useFeedbackContext();
+    const { feedbackData, showFeedback, closeFeedback, feedbackMode } =
+        useFeedbackContext();
 
-    if (!feedbackData) return null;
+    if (!feedbackData || !feedbackMode) return null;
 
     return (
         <FeedbackComponent
             feedbackData={feedbackData}
             showFeedback={showFeedback}
             closeFeedback={closeFeedback}
+            feedbackMode={feedbackMode}
         />
     );
 };
 
 interface IFeedbackComponent {
     feedbackData: FeedbackData;
     showFeedback: boolean;
+    feedbackMode: FeedbackMode;
     closeFeedback: () => void;
 }
 
 export const FeedbackComponent = ({
     feedbackData,
     showFeedback,
     closeFeedback,
+    feedbackMode,
 }: IFeedbackComponent) => {
     const { setToastData } = useToast();
     const theme = useTheme();
@@ -207,6 +218,11 @@ export const FeedbackComponent = ({
         );
     }
 
+    const dontAskAgain = () => {
+        closeFeedback();
+        setHasSubmittedFeedback(true);
+    };
+
     const onSubmission = async (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         const formData = new FormData(event.currentTarget);
@@ -357,15 +373,30 @@ export const FeedbackComponent = ({
                                             size='small'
                                         />
                                     </Box>
-
-                                    <StyledButton
-                                        disabled={!selectedScore}
-                                        variant='contained'
-                                        color='primary'
-                                        type='submit'
-                                    >
-                                        Send Feedback
-                                    </StyledButton>
+                                    <StyledButtonContainer>
+                                        <StyledButton
+                                            disabled={!selectedScore}
+                                            variant='contained'
+                                            color='primary'
+                                            type='submit'
+                                        >
+                                            Send Feedback
+                                        </StyledButton>
+                                        <ConditionallyRender
+                                            condition={
+                                                feedbackMode === 'manual'
+                                            }
+                                            show={
+                                                <StyledButton
+                                                    variant='outlined'
+                                                    color='primary'
+                                                    onClick={dontAskAgain}
+                                                >
+                                                    Don't ask me again
+                                                </StyledButton>
+                                            }
+                                        />
+                                    </StyledButtonContainer>
                                 </StyledForm>
                             </StyledContent>
                         </StyledContainer>

diff --git a/frontend/src/component/feedbackNew/FeedbackContext.ts b/frontend/src/component/feedbackNew/FeedbackContext.ts
@@ -1,12 +1,14 @@
 import { createContext } from 'react';
 import { IFeedbackCategory } from 'hooks/useSubmittedFeedback';
 
+export type FeedbackMode = 'automatic' | 'manual';
 export interface IFeedbackContext {
     feedbackData: FeedbackData | undefined;
-    openFeedback: (data: FeedbackData) => void;
+    openFeedback: (data: FeedbackData, mode: FeedbackMode) => void;
     closeFeedback: () => void;
     showFeedback: boolean;
     setShowFeedback: (visible: boolean) => void;
+    feedbackMode: FeedbackMode | undefined;
 }
 
 interface IFeedbackText {

diff --git a/frontend/src/component/feedbackNew/FeedbackProvider.tsx b/frontend/src/component/feedbackNew/FeedbackProvider.tsx
@@ -1,19 +1,20 @@
-import {
-    FeedbackComponent,
-    FeedbackComponentWrapper,
-} from './FeedbackComponent';
-import { FeedbackContext, FeedbackData } from './FeedbackContext';
+import { FeedbackComponentWrapper } from './FeedbackComponent';
+import { FeedbackContext, FeedbackData, FeedbackMode } from './FeedbackContext';
 import { FC, useState } from 'react';
 
 export const FeedbackProvider: FC = ({ children }) => {
-    const [feedbackData, setFeedbackData] = useState<FeedbackData | undefined>(
-        undefined,
-    );
+    const [feedbackData, setFeedbackData] = useState<
+        FeedbackData | undefined
+    >();
 
     const [showFeedback, setShowFeedback] = useState(false);
-    const openFeedback = (data: FeedbackData) => {
+    const [feedbackMode, setFeedbackMode] = useState<
+        FeedbackMode | undefined
+    >();
+    const openFeedback = (data: FeedbackData, mode: FeedbackMode) => {
         setFeedbackData(data);
         setShowFeedback(true);
+        setFeedbackMode(mode);
     };
 
     const closeFeedback = () => {
@@ -29,6 +30,7 @@ export const FeedbackProvider: FC = ({ children }) => {
                 closeFeedback,
                 showFeedback,
                 setShowFeedback,
+                feedbackMode,
             }}
         >
             {children}

diff --git a/frontend/src/component/feedbackNew/useFeedback.tsx b/frontend/src/component/feedbackNew/useFeedback.tsx
@@ -2,7 +2,11 @@ import {
     IFeedbackCategory,
     useUserSubmittedFeedback,
 } from 'hooks/useSubmittedFeedback';
-import { FeedbackContext, IFeedbackContext } from './FeedbackContext';
+import {
+    FeedbackContext,
+    FeedbackMode,
+    IFeedbackContext,
+} from './FeedbackContext';
 import { useContext } from 'react';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
@@ -24,18 +28,24 @@ export const useFeedbackContext = (): IFeedbackContext => {
     return context;
 };
 
-export const useFeedback = (feedbackCategory: IFeedbackCategory) => {
+export const useFeedback = (
+    feedbackCategory: IFeedbackCategory,
+    mode: FeedbackMode,
+) => {
     const context = useFeedbackContext();
     const { hasSubmittedFeedback } = useUserSubmittedFeedback(feedbackCategory);
 
     return {
         ...context,
         hasSubmittedFeedback,
         openFeedback: (parameters: OpenFeedbackParams) => {
-            context.openFeedback({
-                ...parameters,
-                category: feedbackCategory,
-            });
+            context.openFeedback(
+                {
+                    ...parameters,
+                    category: feedbackCategory,
+                },
+                mode,
+            );
         },
     };
 };
diff --git a/frontend/src/hooks/useSubmittedFeedback.ts b/frontend/src/hooks/useSubmittedFeedback.ts
@@ -6,7 +6,7 @@ import { createLocalStorage } from '../utils/createLocalStorage';
 export type IFeedbackCategory = 'search' | 'newStrategyForm';
 
 export const useUserSubmittedFeedback = (category: IFeedbackCategory) => {
-    const key = `${basePath}:unleash-userSubmittedFeedback:${category}`;
+    const key = `unleash-userSubmittedFeedback:${category}`;
 
     const { value: hasSubmittedFeedback, setValue: setHasSubmittedFeedback } =
         createLocalStorage<Boolean>(key, false);