Merge pull request #846 from JoinColony/ui/15529854-deletion-modal

feat: added deletion modal

src/components/common/Extensions/UserNavigation/partials/WalletConnectedTopMenu/WalletConnectedTopMenu.tsx

@@ -7,6 +7,7 @@ import { WalletConnectedTopMenuProps } from './types';
 import NavigationTools from '~common/Extensions/NavigationTools';
 import { useMobile } from '~hooks';
 import UserAvatarDetails from '~v5/shared/UserAvatarDetails';
+import { USER_EDIT_ROUTE } from '~routes';
 
 const displayName =
   'common.Extensions.UserNavigation.partials.WalletConnectedTopMenu';
@@ -48,7 +49,7 @@ const WalletConnectedTopMenu: FC<WalletConnectedTopMenuProps> = ({
             isVerified={isVerified}
           />
         </div>
-        <Link to="/" className="navigation-link">
+        <Link to={USER_EDIT_ROUTE} className="navigation-link">
           <Icon name="user-circle-gear" appearance={{ size: iconSize }} />
           <p className="ml-2">
             {formatMessage({ id: 'userMenu.menageTitle' })}

src/components/frame/v5/pages/UserAdvancedPage/partials/UserAdvancedSettings/UserAdvancedSettings.tsx

@@ -1,42 +1,97 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
+import { useIntl } from 'react-intl';
 
 import Navigation from '~v5/common/Navigation';
 import TwoColumns from '~v5/frame/TwoColumns';
 import Spinner from '~v5/shared/Spinner';
 import SettingsRow from '~v5/common/SettingsRow';
 import FeesForm from '../FeesForm';
 import RpcForm from '../RpcForm/RpcForm';
+import Modal from '~v5/shared/Modal';
+import InformationList from '~v5/shared/InformationList';
+import { modalInformations } from './consts';
+import Textarea from '~v5/common/Fields/Textarea';
+import Checkbox from '~v5/common/Checkbox';
 
 const displayName = 'v5.pages.UserAdvancedPage.partials.UserAdvancedSettings';
 
-const UserAdvancedSettings: FC = () => (
-  <Spinner loadingText={{ id: 'loading.userAdvancedPage' }}>
-    <TwoColumns aside={<Navigation pageName="profile" />}>
-      <FeesForm />
-      <RpcForm />
-      <div className="border-b border-gray-200">
+const UserAdvancedSettings: FC = () => {
+  const [isChecked, setIsChecked] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const { formatMessage } = useIntl();
+
+  return (
+    <Spinner loadingText={{ id: 'loading.userAdvancedPage' }}>
+      <TwoColumns aside={<Navigation pageName="profile" />}>
+        <FeesForm />
+        <RpcForm />
+        <div className="border-b border-gray-200">
+          <SettingsRow
+            title={{ id: 'advancedSettings.account.title' }}
+            description={{ id: 'advancedSettings.account.description' }}
+            // @TODO: Add functionality to download user data
+            onClick={() => {}}
+            buttonLabel={{ id: 'button.download' }}
+            buttonIcon="file-arrow-down"
+            buttonMode="primaryOutline"
+          />
+        </div>
         <SettingsRow
-          title={{ id: 'advancedSettings.account.title' }}
-          description={{ id: 'advancedSettings.account.description' }}
-          // @TODO: Add functionality to download user data
-          onClick={() => {}}
-          buttonLabel={{ id: 'button.download' }}
-          buttonIcon="file-arrow-down"
-          buttonMode="primaryOutline"
+          title={{ id: 'advancedSettings.delete.title' }}
+          description={{ id: 'advancedSettings.delete.description' }}
+          onClick={() => setIsDeleteModalOpen(true)}
+          buttonLabel={{ id: 'button.deleteAccount' }}
+          buttonIcon="trash"
+          buttonMode="secondaryOutline"
         />
-      </div>
-      <SettingsRow
-        title={{ id: 'advancedSettings.delete.title' }}
-        description={{ id: 'advancedSettings.delete.description' }}
-        // @TODO: Add functionality to delete account
-        onClick={() => {}}
-        buttonLabel={{ id: 'button.deleteAccount' }}
-        buttonIcon="trash"
-        buttonMode="secondaryOutline"
-      />
-    </TwoColumns>
-  </Spinner>
-);
+        <Modal
+          // @TODO: Add functionality onConfirm to delete account
+          isOpen={isDeleteModalOpen}
+          onClose={() => {
+            setIsChecked(false);
+            setIsDeleteModalOpen(false);
+          }}
+          isWarning
+          icon="trash"
+          disabled={!isChecked}
+          confirmMessage={formatMessage({
+            id: 'button.deleteAccountConfirmation',
+          })}
+          closeMessage={formatMessage({ id: 'button.deleteAccountCancel' })}
+        >
+          <h5 className="heading-5 mb-1.5">
+            {formatMessage({ id: 'advancedSettings.delete.modal.title' })}
+          </h5>
+          <p className="text-md text-gray-600 mb-6">
+            {formatMessage(
+              { id: 'advancedSettings.delete.modal.description' },
+              { br: <br /> },
+            )}
+          </p>
+          <InformationList items={modalInformations} className="mb-4" />
+          <div className="mb-4">
+            <Textarea
+              textareaTitle={{
+                id: 'advancedSettings.delete.modal.textarea.label',
+              }}
+            />
+          </div>
+          <Checkbox
+            id="delete-account"
+            name="delete-account"
+            onChange={() => {
+              setIsChecked(!isChecked);
+            }}
+          >
+            {formatMessage({
+              id: 'advancedSettings.delete.modal.checkbox.label',
+            })}
+          </Checkbox>
+        </Modal>
+      </TwoColumns>
+    </Spinner>
+  );
+};
 
 UserAdvancedSettings.displayName = displayName;
 

src/components/frame/v5/pages/UserAdvancedPage/partials/UserAdvancedSettings/consts.ts

@@ -0,0 +1,24 @@
+import { InformationListItemProps } from '~v5/shared/InformationList/types';
+
+export const modalInformations: InformationListItemProps[] = [
+  {
+    title: { id: 'advancedSettings.delete.modal.info1' },
+    id: 'advancedSettings.delete.modal.info1',
+  },
+  {
+    title: { id: 'advancedSettings.delete.modal.info2' },
+    id: 'advancedSettings.delete.modal.info2',
+  },
+  {
+    title: { id: 'advancedSettings.delete.modal.info3' },
+    id: 'advancedSettings.delete.modal.info3',
+  },
+  {
+    title: { id: 'advancedSettings.delete.modal.info4' },
+    id: 'advancedSettings.delete.modal.info4',
+  },
+  {
+    title: { id: 'advancedSettings.delete.modal.info5' },
+    id: 'advancedSettings.delete.modal.info5',
+  },
+];

src/components/v5/shared/InformationList/InformationList.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { useIntl } from 'react-intl';
+import clsx from 'clsx';
+
+import { InformationListProps } from './types';
+
+const displayName = 'v5.InformationList';
+
+const InformationList: FC<InformationListProps> = ({ items, className }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div
+      className={clsx(
+        className,
+        'rounded border bg-negative-100 border-negative-400 p-[1.125rem] text-negative-400',
+      )}
+    >
+      <ul className="text-sm list-disc pl-4">
+        {items.map(({ id, title }) => (
+          <li key={id}>{formatMessage(title)}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+InformationList.displayName = displayName;
+
+export default InformationList;

src/components/v5/shared/InformationList/index.ts

@@ -0,0 +1 @@
+export { default } from './InformationList';

src/components/v5/shared/InformationList/types.ts

@@ -0,0 +1,11 @@
+import { MessageDescriptor } from 'react-intl';
+
+export interface InformationListItemProps {
+  title: MessageDescriptor;
+  id: string;
+}
+
+export interface InformationListProps {
+  items: InformationListItemProps[];
+  className?: string;
+}

src/i18n/en.json

@@ -541,6 +541,15 @@
   "advancedSettings.account.description": "Download your Colony data in a .csv file format",
   "advancedSettings.delete.title": "Account deletion",
   "advancedSettings.delete.description": "This permanently deletes your account",
+  "advancedSettings.delete.modal.title": "We're sorry to see you go",
+  "advancedSettings.delete.modal.description": "Deleting your account means you could potentially lose funds and access to the following areas and account information on Colony. {br} {br} While you can delete your Colony account, you are not able to delete  content on chain. {br} {br} Deleting your Colony account is irreversible and you will need to recreate another Colony account.",
+  "advancedSettings.delete.modal.info1": "You could potentially lose funds",
+  "advancedSettings.delete.modal.info2": "You will lose your account settings",
+  "advancedSettings.delete.modal.info3": "You will lose all of your Colony DAO subscriptions",
+  "advancedSettings.delete.modal.info4": "You will lose your comment history",
+  "advancedSettings.delete.modal.info5": "You will lose access to your username",
+  "advancedSettings.delete.modal.textarea.label": "Help us improve Colony (Optional)",
+  "advancedSettings.delete.modal.checkbox.label": "I understand that deleted accounts aren't recoverable",
   "extensionsPage.title": "Extensions",
   "extensionsPage.description": "Extend the functionality of your Colony",
   "extensionsPage.availableExtensions": "Available Extensions",
@@ -729,6 +738,9 @@
   "description.bio": "Your bio is optional and shows on your Colony profile in under 200 characters",
   "field.location": "Location",
   "description.location": "Your location is optional and only shown on your Colony profile",
+  "button.save.user.profile": "Save changes",
+  "button.deleteAccountConfirmation": "Yes, delete account",
+  "button.deleteAccountCancel": "Cancel deletion",
   "user.profile.toast.title.success": "Action completed successfully",
   "user.profile.toast.description.success": "User profile has been updated",
   "error.displayName.valid.message": "This is not a valid colony username",