added delete feedback form
This commit is contained in:
Abhinav
parent
f099d8355e
commit
ff128ae1e1
|
|
@ -1,18 +1,7 @@
|
|||
import NoAccountsIcon from '@mui/icons-material/NoAccountsOutlined';
|
||||
import TickIcon from '@mui/icons-material/Done';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
Typography,
|
||||
Button,
|
||||
Stack,
|
||||
Link,
|
||||
} from '@mui/material';
|
||||
import { Button, Link, Stack } from '@mui/material';
|
||||
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 VerticallyCentered from './Container';
|
||||
import DialogTitleWithCloseButton from './DialogBox/TitleWithCloseButton';
|
||||
import {
|
||||
deleteAccount,
|
||||
getAccountDeleteChallenge,
|
||||
|
|
@ -23,12 +12,63 @@ import { logError } from 'utils/sentry';
|
|||
import { decryptDeleteAccountChallenge } from 'utils/crypto';
|
||||
import { Trans } from 'react-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 {
|
||||
onClose: () => void;
|
||||
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 { setDialogMessage, isMobile } = useContext(AppContext);
|
||||
const [authenticateUserModalView, setAuthenticateUserModalView] =
|
||||
|
|
@ -38,13 +78,12 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
|
|||
const openAuthenticateUserModal = () => setAuthenticateUserModalView(true);
|
||||
const closeAuthenticateUserModal = () =>
|
||||
setAuthenticateUserModalView(false);
|
||||
const [acceptDataDeletion, setAcceptDataDeletion] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
preloadImage('/images/delete-account');
|
||||
}, []);
|
||||
|
||||
const sendFeedbackMail = () => initiateEmail('feedback@ente.io');
|
||||
|
||||
const somethingWentWrong = () =>
|
||||
setDialogMessage({
|
||||
title: t('ERROR'),
|
||||
|
|
@ -52,8 +91,19 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
|
|||
content: t('UNKNOWN_ERROR'),
|
||||
});
|
||||
|
||||
const initiateDelete = async () => {
|
||||
const initiateDelete = async (
|
||||
{ reason, feedback }: FormValues,
|
||||
{ setFieldError }: FormikHelpers<FormValues>
|
||||
) => {
|
||||
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();
|
||||
setDeleteAccountChallenge(
|
||||
deleteChallengeResponse.encryptedChallenge
|
||||
|
|
@ -120,56 +170,86 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
<DialogBoxV2
|
||||
fullWidth
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
maxWidth="xs"
|
||||
fullScreen={isMobile}>
|
||||
<DialogTitleWithCloseButton onClose={onClose}>
|
||||
<Typography variant="h3" fontWeight={'bold'}>
|
||||
{t('DELETE_ACCOUNT')}
|
||||
</Typography>
|
||||
</DialogTitleWithCloseButton>
|
||||
<DialogContent>
|
||||
<VerticallyCentered>
|
||||
<img
|
||||
height={256}
|
||||
src="/images/delete-account/1x.png"
|
||||
srcSet="/images/delete-account/2x.png 2x,
|
||||
/images/delete-account/3x.png 3x"
|
||||
/>
|
||||
</VerticallyCentered>
|
||||
|
||||
<Typography color="text.secondary" px={1.5}>
|
||||
<Trans
|
||||
i18nKey="ASK_FOR_FEEDBACK"
|
||||
components={{
|
||||
a: <Link href={`mailto:${FEEDBACK_EMAIL}`} />,
|
||||
}}
|
||||
values={{ emailID: FEEDBACK_EMAIL }}
|
||||
/>
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={1} px={2} sx={{ width: '100%' }}>
|
||||
<Button
|
||||
size="large"
|
||||
color="accent"
|
||||
onClick={sendFeedbackMail}
|
||||
startIcon={<TickIcon />}>
|
||||
{t('SEND_FEEDBACK')}
|
||||
</Button>
|
||||
<Button
|
||||
size="large"
|
||||
variant="outlined"
|
||||
color="danger"
|
||||
onClick={initiateDelete}
|
||||
startIcon={<NoAccountsIcon />}>
|
||||
{t('DELETE_ACCOUNT')}
|
||||
</Button>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
fullScreen={isMobile}
|
||||
attributes={{
|
||||
title: t('DELETE_ACCOUNT'),
|
||||
secondary: {
|
||||
action: onClose,
|
||||
text: t('CANCEL'),
|
||||
},
|
||||
}}>
|
||||
<Formik<FormValues>
|
||||
initialValues={{
|
||||
reason: '',
|
||||
feedback: '',
|
||||
}}
|
||||
validationSchema={Yup.object().shape({
|
||||
reason: Yup.string().required(t('REQUIRED')),
|
||||
})}
|
||||
validateOnChange={false}
|
||||
validateOnBlur={false}
|
||||
onSubmit={initiateDelete}>
|
||||
{({
|
||||
values,
|
||||
errors,
|
||||
handleChange,
|
||||
handleSubmit,
|
||||
}): JSX.Element => (
|
||||
<form noValidate onSubmit={handleSubmit}>
|
||||
<Stack spacing={'24px'}>
|
||||
<DropdownInput
|
||||
options={getReasonOptions()}
|
||||
label={t('DELETE_ACCOUNT_REASON_LABEL')}
|
||||
placeholder={t(
|
||||
'DELETE_ACCOUNT_REASON_PLACEHOLDER'
|
||||
)}
|
||||
selected={values.reason}
|
||||
setSelected={handleChange('reason')}
|
||||
messageProps={{ color: 'critical.main' }}
|
||||
message={errors.reason}
|
||||
/>
|
||||
<MultilineInput
|
||||
label={t('DELETE_ACCOUNT_FEEDBACK_LABEL')}
|
||||
placeholder={t(
|
||||
'DELETE_ACCOUNT_FEEDBACK_PLACEHOLDER'
|
||||
)}
|
||||
value={values.feedback}
|
||||
onChange={handleChange('feedback')}
|
||||
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
|
||||
open={authenticateUserModalView}
|
||||
onClose={closeAuthenticateUserModal}
|
||||
|
|
|
|||
Loading…
Reference in a new issue