import { useContext, useMemo, useState } from 'react';
import { Box, Button, IconButton, Tooltip, useTheme } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { ReactComponent as Logo } from 'assets/icons/logoPlain.svg';
import AnimateOnMount from 'component/common/AnimateOnMount/AnimateOnMount';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import {
contentSpacingY,
fadeInTopEnter,
fadeInTopLeave,
fadeInTopStart,
} from 'themes/themeStyles';
import UIContext from 'contexts/UIContext';
import {
PNPS_FEEDBACK_ID,
showNPSFeedback,
} from 'component/feedback/FeedbackNPS/showNPSFeedback';
import { useAuthFeedback } from 'hooks/api/getters/useAuth/useAuthFeedback';
import { useAuthFeedbackApi } from 'hooks/api/actions/useAuthFeedbackApi/useAuthFeedbackApi';
interface IFeedbackNPSProps {
openUrl: string;
}
export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
const { showFeedback, setShowFeedback } = useContext(UIContext);
const { createFeedback, updateFeedback } = useAuthFeedbackApi();
const { feedback } = useAuthFeedback();
const [answeredNotNow, setAnsweredNotNow] = useState(false);
const theme = useTheme();
const feedbackId = PNPS_FEEDBACK_ID;
const animations = useMemo(
() => ({
start: { ...fadeInTopStart(theme), zIndex: theme.zIndex.tooltip },
enter: fadeInTopEnter,
leave: fadeInTopLeave,
}),
[theme]
);
const onConfirm = async () => {
try {
await createFeedback({ feedbackId });
} catch (err) {
console.warn(err);
setShowFeedback(false);
}
// Await api call to register confirmation
window.open(openUrl, '_blank');
setTimeout(() => {
setShowFeedback(false);
}, 200);
};
const onDontShowAgain = async () => {
try {
await updateFeedback({ feedbackId, neverShow: true });
} catch (err) {
console.warn(err);
setShowFeedback(false);
}
setTimeout(() => {
setShowFeedback(false);
}, 100);
};
if (!showNPSFeedback(feedback)) {
return null;
}
return (
Hi. Do you have 2 minutes to help us improve Unleash?{' '}
} />