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 ( setShowFeedback(false)} size="large" > Alright, apologies for the disruption. Have a nice day!

} elseShow={

Hi. Do you have 2 minutes to help us improve Unleash?{' '}

} /> Don't show again } elseShow={ <> } />
); };