1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

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

This commit is contained in:
Jaanus Sellin 2024-01-04 14:10:01 +02:00 committed by GitHub
parent 5582339560
commit b24471c1b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 83 additions and 34 deletions

View File

@ -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);

View File

@ -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

View File

@ -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,16 +161,25 @@ const StyledCloseButton = styled(IconButton)(({ theme }) => ({
color: theme.palette.background.paper,
}));
export const FeedbackComponentWrapper = () => {
const { feedbackData, showFeedback, closeFeedback } = useFeedbackContext();
const StyledButtonContainer = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1.25),
alignItems: 'flex-start',
}));
if (!feedbackData) return null;
export const FeedbackComponentWrapper = () => {
const { feedbackData, showFeedback, closeFeedback, feedbackMode } =
useFeedbackContext();
if (!feedbackData || !feedbackMode) return null;
return (
<FeedbackComponent
feedbackData={feedbackData}
showFeedback={showFeedback}
closeFeedback={closeFeedback}
feedbackMode={feedbackMode}
/>
);
};
@ -178,6 +187,7 @@ export const FeedbackComponentWrapper = () => {
interface IFeedbackComponent {
feedbackData: FeedbackData;
showFeedback: boolean;
feedbackMode: FeedbackMode;
closeFeedback: () => void;
}
@ -185,6 +195,7 @@ 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>

View File

@ -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 {

View File

@ -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}

View File

@ -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,7 +28,10 @@ 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);
@ -32,10 +39,13 @@ export const useFeedback = (feedbackCategory: IFeedbackCategory) => {
...context,
hasSubmittedFeedback,
openFeedback: (parameters: OpenFeedbackParams) => {
context.openFeedback({
...parameters,
category: feedbackCategory,
});
context.openFeedback(
{
...parameters,
category: feedbackCategory,
},
mode,
);
},
};
};

View File

@ -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);