beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added delete feedback form

Browse source
This commit is contained in:
Abhinav 2023-03-30 21:11:34 +05:30
parent f099d8355e
commit ff128ae1e1
1 changed files with 144 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

208
src/components/DeleteAccountModal.tsx
View file

@ -1,18 +1,7 @@
import NoAccountsIcon from '@mui/icons-material/NoAccountsOutlined'; import { Button, Link, Stack } from '@mui/material';
import TickIcon from '@mui/icons-material/Done';
import {
Dialog,
DialogContent,
Typography,
Button,
Stack,
Link,
} from '@mui/material';
import { AppContext } from 'pages/_app'; import { AppContext } from 'pages/_app';
import React, { useContext, useEffect, useState } from 'react'; import { useContext, useEffect, useState } from 'react';
import { preloadImage, initiateEmail } from 'utils/common'; import { preloadImage, initiateEmail } from 'utils/common';
import VerticallyCentered from './Container';
import DialogTitleWithCloseButton from './DialogBox/TitleWithCloseButton';
import { import {
deleteAccount, deleteAccount,
getAccountDeleteChallenge, getAccountDeleteChallenge,
@ -23,12 +12,63 @@ import { logError } from 'utils/sentry';
import { decryptDeleteAccountChallenge } from 'utils/crypto'; import { decryptDeleteAccountChallenge } from 'utils/crypto';
import { Trans } from 'react-i18next'; import { Trans } from 'react-i18next';
import { t } from 'i18next'; import { t } from 'i18next';
import { DELETE_ACCOUNT_EMAIL, FEEDBACK_EMAIL } from 'constants/urls'; import { DELETE_ACCOUNT_EMAIL } from 'constants/urls';
import DialogBoxV2 from './DialogBoxV2';
import * as Yup from 'yup';
import { Formik, FormikHelpers } from 'formik';
import DropdownInput, { DropdownOption } from './DropdownInput';
import MultilineInput from './MultilineInput';
import { CheckboxInput } from './CheckboxInput';
interface Iprops { interface Iprops {
onClose: () => void; onClose: () => void;
open: boolean; open: boolean;
} }
interface FormValues {
reason: string;
feedback: string;
}
enum DELETE_REASON {
MISSING_FEATURE = '0',
BROKEN_BEHAVIOR = '1',
FOUND_ANOTHER_SERVICE = '2',
USING_DIFFERENT_ACCOUNT = '3',
NOT_LISTED = '4',
}
const getReasonOptions = (): DropdownOption<DELETE_REASON>[] => {
return [
{
label: t('DELETE_REASON.MISSING_FEATURE'),
value: DELETE_REASON.MISSING_FEATURE,
},
{
label: t('DELETE_REASON.BROKEN_BEHAVIOR'),
value: DELETE_REASON.BROKEN_BEHAVIOR,
},
{
label: t('DELETE_REASON.FOUND_ANOTHER_SERVICE'),
value: DELETE_REASON.FOUND_ANOTHER_SERVICE,
},
{
label: t('DELETE_REASON.USING_DIFFERENT_ACCOUNT'),
value: DELETE_REASON.USING_DIFFERENT_ACCOUNT,
},
{
label: t('DELETE_REASON.NOT_LISTED'),
value: DELETE_REASON.NOT_LISTED,
},
];
};
const REASON_WITH_REQUIRED_FEEDBACK = new Set([
DELETE_REASON.MISSING_FEATURE,
DELETE_REASON.BROKEN_BEHAVIOR,
DELETE_REASON.NOT_LISTED,
]);
const DeleteAccountModal = ({ open, onClose }: Iprops) => { const DeleteAccountModal = ({ open, onClose }: Iprops) => {
const { setDialogMessage, isMobile } = useContext(AppContext); const { setDialogMessage, isMobile } = useContext(AppContext);
const [authenticateUserModalView, setAuthenticateUserModalView] = const [authenticateUserModalView, setAuthenticateUserModalView] =
@ -38,13 +78,12 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
const openAuthenticateUserModal = () => setAuthenticateUserModalView(true); const openAuthenticateUserModal = () => setAuthenticateUserModalView(true);
const closeAuthenticateUserModal = () => const closeAuthenticateUserModal = () =>
setAuthenticateUserModalView(false); setAuthenticateUserModalView(false);
const [acceptDataDeletion, setAcceptDataDeletion] = useState(false);
useEffect(() => { useEffect(() => {
preloadImage('/images/delete-account'); preloadImage('/images/delete-account');
}, []); }, []);
const sendFeedbackMail = () => initiateEmail('feedback@ente.io');
const somethingWentWrong = () => const somethingWentWrong = () =>
setDialogMessage({ setDialogMessage({
title: t('ERROR'), title: t('ERROR'),
@ -52,8 +91,19 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
content: t('UNKNOWN_ERROR'), content: t('UNKNOWN_ERROR'),
}); });
const initiateDelete = async () => { const initiateDelete = async (
{ reason, feedback }: FormValues,
{ setFieldError }: FormikHelpers<FormValues>
) => {
try { try {
console.log({ reason, feedback });
if (
REASON_WITH_REQUIRED_FEEDBACK.has(reason as DELETE_REASON) &&
!feedback?.length
) {
setFieldError('feedback', t('REQUIRED'));
return;
}
const deleteChallengeResponse = await getAccountDeleteChallenge(); const deleteChallengeResponse = await getAccountDeleteChallenge();
setDeleteAccountChallenge( setDeleteAccountChallenge(
deleteChallengeResponse.encryptedChallenge deleteChallengeResponse.encryptedChallenge
@ -120,56 +170,86 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
return ( return (
<> <>
<Dialog <DialogBoxV2
fullWidth fullWidth
open={open} open={open}
onClose={onClose} onClose={onClose}
maxWidth="xs" fullScreen={isMobile}
fullScreen={isMobile}> attributes={{
<DialogTitleWithCloseButton onClose={onClose}> title: t('DELETE_ACCOUNT'),
<Typography variant="h3" fontWeight={'bold'}> secondary: {
{t('DELETE_ACCOUNT')} action: onClose,
</Typography> text: t('CANCEL'),
</DialogTitleWithCloseButton> },
<DialogContent> }}>
<VerticallyCentered> <Formik<FormValues>
<img initialValues={{
height={256} reason: '',
src="/images/delete-account/1x.png" feedback: '',
srcSet="/images/delete-account/2x.png 2x, }}
/images/delete-account/3x.png 3x" validationSchema={Yup.object().shape({
/> reason: Yup.string().required(t('REQUIRED')),
</VerticallyCentered> })}
validateOnChange={false}
<Typography color="text.secondary" px={1.5}> validateOnBlur={false}
<Trans onSubmit={initiateDelete}>
i18nKey="ASK_FOR_FEEDBACK" {({
components={{ values,
a: <Link href={`mailto:${FEEDBACK_EMAIL}`} />, errors,
}} handleChange,
values={{ emailID: FEEDBACK_EMAIL }} handleSubmit,
/> }): JSX.Element => (
</Typography> <form noValidate onSubmit={handleSubmit}>
<Stack spacing={'24px'}>
<Stack spacing={1} px={2} sx={{ width: '100%' }}> <DropdownInput
<Button options={getReasonOptions()}
size="large" label={t('DELETE_ACCOUNT_REASON_LABEL')}
color="accent" placeholder={t(
onClick={sendFeedbackMail} 'DELETE_ACCOUNT_REASON_PLACEHOLDER'
startIcon={<TickIcon />}> )}
{t('SEND_FEEDBACK')} selected={values.reason}
</Button> setSelected={handleChange('reason')}
<Button messageProps={{ color: 'critical.main' }}
size="large" message={errors.reason}
variant="outlined" />
color="danger" <MultilineInput
onClick={initiateDelete} label={t('DELETE_ACCOUNT_FEEDBACK_LABEL')}
startIcon={<NoAccountsIcon />}> placeholder={t(
{t('DELETE_ACCOUNT')} 'DELETE_ACCOUNT_FEEDBACK_PLACEHOLDER'
</Button> )}
</Stack> value={values.feedback}
</DialogContent> onChange={handleChange('feedback')}
</Dialog> message={errors.feedback}
messageProps={{ color: 'critical.main' }}
rowCount={3}
/>
<CheckboxInput
checked={acceptDataDeletion}
onChange={setAcceptDataDeletion}
label={t(
'CONFIRM_DELETE_ACCOUNT_CHECKBOX_LABEL'
)}
/>
<Stack spacing={'8px'}>
<Button
type="submit"
size="large"
color="danger"
disabled={!acceptDataDeletion}>
{t('CONFIRM_DELETE_ACCOUNT')}
</Button>
<Button
size="large"
color={'secondary'}
onClick={onClose}>
{t('CANCEL')}
</Button>
</Stack>
</Stack>
</form>
)}
</Formik>
</DialogBoxV2>
<AuthenticateUserModal <AuthenticateUserModal
open={authenticateUserModalView} open={authenticateUserModalView}
onClose={closeAuthenticateUserModal} onClose={closeAuthenticateUserModal}