From ff128ae1e1ae49386354eb5fd4a197b757ac64e6 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Thu, 30 Mar 2023 21:11:34 +0530
Subject: [PATCH] added delete feedback form

---
 src/components/DeleteAccountModal.tsx | 208 ++++++++++++++++++--------
 1 file changed, 144 insertions(+), 64 deletions(-)

diff --git a/src/components/DeleteAccountModal.tsx b/src/components/DeleteAccountModal.tsx
index 0e462137d..64ec6a831 100644
--- a/src/components/DeleteAccountModal.tsx
+++ b/src/components/DeleteAccountModal.tsx
@@ -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}