Merge pull request #279 from jwplayer/feat/delete-account-data

feat(user): delete account data

public/locales/en/user.json

@@ -3,6 +3,21 @@
     "about_you": "Profile info",
     "cancel": "Cancel",
     "confirm_password": "Confirm password",
+    "continue": "Continue",
+    "delete_account": {
+      "body": "Permanently delete your account and all of your content.",
+      "error": "An error occurred while deleting your account. Please try again.",
+      "modal": {
+        "placeholder": "Enter your password",
+        "text_cant_be_undone": "Please be aware that this process cannot be undone, so proceed with caution.",
+        "text_contacts": "If you have any further questions or concerns, please do not hesitate to contact our support team.",
+        "text_data_erasure": "Please note that if you choose to proceed with this process, all of your personal data will be erased from our system. This includes any personal information you provided during the registration process, as well as any location and device information that we gathered during the authentication process. Additionally, all other personal information stored in various parts of our database will be deleted as well. However, please be aware that due to some legislations we are required to keep certain personal data as part of transaction and subscription records.",
+        "text_revoked_access": "Once the erasure is complete, all of your active accesses will be revoked, and any active login sessions, including this one, will be terminated. Your account information will no longer be accessible to our staff in any capacity.",
+        "title": "Enter password to continue",
+        "warning": "All active subscriptions that were purchased through a web browser will be automatically canceled upon erasure of personal data. However, if you purchased a subscription through iOS, Android, Roku, or Amazon apps, please be aware that it will not be canceled automatically. In this case, you will need to follow the usual subscription cancelation steps for each respective platform to manually cancel the subscription."
+      },
+      "title": "Delete account"
+    },
     "edit_account": "Edit account",
     "edit_information": "Edit information",
     "edit_password": "Edit password",
@@ -24,6 +39,7 @@
     "firstname": "First name",
     "hide_password": "Hide password",
     "lastname": "Last name",
+    "password": "Password",
     "save": "Save",
     "security": "Password",
     "terms_and_tracking": "Legal & Marketing",
@@ -38,6 +54,9 @@
     "not_found": "Favorites not found!",
     "title": "Favorites"
   },
+  "login": {
+    "field_required": ""
+  },
   "nav": {
     "account": "Account",
     "favorites": "Favorites",

public/locales/en/video.json

@@ -8,7 +8,6 @@
   "current_episode": "Current episode",
   "current_video": "Current video",
   "episode": "episode",
-  "episode_not_found": "Episode not found",
   "episodes": "Episodes",
   "favorite": "Favorite",
   "favorites_warning": "Maximum amount of favorite videos exceeded. You can only add up to {{maxCount}} favorite videos. Please delete one and repeat the operation.",

public/locales/es/user.json

@@ -3,6 +3,21 @@
     "about_you": "Información de perfil",
     "cancel": "Cancelar",
     "confirm_password": "Confirmar contraseña",
+    "continue": "",
+    "delete_account": {
+      "body": "",
+      "error": "",
+      "modal": {
+        "placeholder": "",
+        "text_cant_be_undone": "",
+        "text_contacts": "",
+        "text_data_erasure": "",
+        "text_revoked_access": "",
+        "title": "",
+        "warning": ""
+      },
+      "title": ""
+    },
     "edit_account": "Editar cuenta",
     "edit_information": "Editar información",
     "edit_password": "Editar contraseña",
@@ -24,6 +39,7 @@
     "firstname": "Nombre",
     "hide_password": "Ocultar contraseña",
     "lastname": "Apellido",
+    "password": "",
     "save": "Guardar",
     "security": "Contraseña",
     "terms_and_tracking": "Jurídico y marketing",
@@ -38,6 +54,9 @@
     "not_found": "¡Favoritos no encontrados!",
     "title": "Favoritos"
   },
+  "login": {
+    "field_required": ""
+  },
   "nav": {
     "account": "Cuenta",
     "favorites": "Favoritos",

public/locales/es/video.json

@@ -8,7 +8,6 @@
   "current_episode": "Episodio actual",
   "current_video": "Video actual",
   "episode": "episodio",
-  "episode_not_found": "Episodio no encontrado",
   "episodes": "Episodios",
   "favorite": "Favorito",
   "favorites_warning": "Se ha alcanzado el máximo de videos favoritos. Solo puedes agregar hasta {{maxCount}} videos favoritos. Por favor, elimina uno y repite la operación.",

src/components/Account/Account.module.scss

@@ -1,4 +1,4 @@
-.exportDataContainer {
+.textWithButtonContainer {
   display: flex;
   flex-direction: column;
   gap: 1rem;

src/components/Account/Account.tsx

@@ -21,7 +21,7 @@ import useToggle from '#src/hooks/useToggle';
 import { formatConsentsFromValues, formatConsentValues } from '#src/utils/collection';
 import { addQueryParam } from '#src/utils/location';
 import { useAccountStore } from '#src/stores/AccountStore';
-import { logDev } from '#src/utils/common';
+import { isTruthy, logDev } from '#src/utils/common';
 import { exportAccountData, updateConsents, updateUser } from '#src/stores/AccountController';
 
 type Props = {
@@ -53,13 +53,14 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
     }
   }, [exportData.isSuccess, exportData.isError]);
 
-  const { customer, customerConsents, publisherConsents, canChangePasswordWithOldPassword, canExportAccountData } = useAccountStore(
-    ({ user, customerConsents, publisherConsents, canChangePasswordWithOldPassword, canExportAccountData }) => ({
+  const { customer, customerConsents, publisherConsents, canChangePasswordWithOldPassword, canExportAccountData, canDeleteAccount } = useAccountStore(
+    ({ user, customerConsents, publisherConsents, canChangePasswordWithOldPassword, canExportAccountData, canDeleteAccount }) => ({
       customer: user,
       customerConsents,
       publisherConsents,
       canChangePasswordWithOldPassword,
       canExportAccountData,
+      canDeleteAccount,
     }),
     shallow,
   );
@@ -258,31 +259,47 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
               </>
             ),
           }),
-          ...(canExportAccountData
-            ? [
-                formSection({
-                  label: t('account.export_data_title'),
-                  content: (section) => (
-                    <div className={styles.exportDataContainer}>
-                      <div>
-                        <Trans t={t} i18nKey="account.export_data_body" values={{ email: section.values.email }} />
-                      </div>
-                      <div>
-                        <Button
-                          label={t('account.export_data_title')}
-                          type="button"
-                          disabled={exportData.isLoading}
-                          onClick={async () => {
-                            exportData.mutate();
-                          }}
-                        />
-                      </div>
-                    </div>
-                  ),
-                }),
-              ]
-            : []),
-        ]}
+          canExportAccountData &&
+            formSection({
+              label: t('account.export_data_title'),
+              content: (section) => (
+                <div className={styles.textWithButtonContainer}>
+                  <div>
+                    <Trans t={t} i18nKey="account.export_data_body" values={{ email: section.values.email }} />
+                  </div>
+                  <div>
+                    <Button
+                      label={t('account.export_data_title')}
+                      type="button"
+                      disabled={exportData.isLoading}
+                      onClick={async () => {
+                        exportData.mutate();
+                      }}
+                    />
+                  </div>
+                </div>
+              ),
+            }),
+          canDeleteAccount &&
+            formSection({
+              label: t('account.delete_account.title'),
+              content: () => (
+                <div className={styles.textWithButtonContainer}>
+                  <div>{t('account.delete_account.body')}</div>
+                  <div>
+                    <Button
+                      label={t('account.delete_account.title')}
+                      type="button"
+                      variant="danger"
+                      onClick={() => {
+                        navigate(addQueryParam(location, 'u', 'delete-account'));
+                      }}
+                    />
+                  </div>
+                </div>
+              ),
+            }),
+        ].filter(isTruthy)}
       </Form>
       {canExportAccountData && (
         <Alert open={isAlertVisible} message={exportDataMessage} onClose={() => setIsAlertVisible(false)} isSuccess={exportData.isSuccess} />

src/components/Button/Button.module.scss

@@ -98,6 +98,18 @@ $large-button-height: 40px;
     }
   }
 
+  &.danger {
+    color: theme.$btn-danger-color;
+    background-color: theme.$btn-danger-bg;
+    outline: theme.$btn-danger-outline;
+  }
+
+  &.delete {
+    color: theme.$btn-delete-color;
+    background-color: theme.$btn-delete-bg;
+    outline: none;
+  }
+
   &.fullWidth {
     justify-content: center;
     width: 100%;

src/components/Button/Button.tsx

@@ -8,7 +8,7 @@ import Spinner from '#components/Spinner/Spinner';
 
 type Color = 'default' | 'primary';
 
-type Variant = 'contained' | 'outlined' | 'text';
+type Variant = 'contained' | 'outlined' | 'text' | 'danger' | 'delete';
 
 type Props = {
   children?: React.ReactNode;

src/components/DeleteAccountModal/DeleteAccountModal.module.scss

@@ -0,0 +1,70 @@
+@use 'src/styles/variables';
+
+.formContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  align-items: center;
+  padding: 30px;
+}
+
+.formContainerSmall {
+  gap: 20px;
+}
+
+.innerContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+}
+
+.passwordButtonsContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.buttonsContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  gap: 16px;
+}
+
+.heading {
+  width: 50%;
+  margin-bottom: 20px;
+  color: variables.$gray-white;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 28px;
+  text-align: center;
+}
+
+.paragraph {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  color: variables.$gray-white;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+}
+
+.button {
+  margin: auto;
+}
+
+.warningBox {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 16px 8px 16px;
+  background-color: variables.$brown-dark;
+  border-radius: 4px;
+  gap: 16px;
+}