[FEATURE] Ajout de la modal de suppression de compte (PIX-14908)

 #10613

mon-pix/app/components/user-account/delete-account-section.gjs

@@ -1,10 +1,14 @@
 import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixModal from '@1024pix/pix-ui/components/pix-modal';
+import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { t } from 'ember-intl';
 
 export default class DeleteAccountSection extends Component {
   @service url;
+  @tracked modalOpen = false;
 
   get supportHomeUrl() {
     return this.url.supportHomeUrl;
@@ -14,6 +18,16 @@ export default class DeleteAccountSection extends Component {
     return Boolean(this.args.user.email);
   }
 
+  @action
+  openModal() {
+    this.modalOpen = true;
+  }
+
+  @action
+  closeModal() {
+    this.modalOpen = false;
+  }
+
   <template>
     <section class="delete-account-section">
       <h2>{{t "pages.user-account.delete-account.title"}}</h2>
@@ -44,9 +58,41 @@ export default class DeleteAccountSection extends Component {
         </a>
       </p>
 
-      <PixButton @variant="error">
+      <PixButton @triggerAction={{this.openModal}} @variant="error">
         {{t "pages.user-account.delete-account.actions.delete"}}
       </PixButton>
+
+      <PixModal
+        class="delete-account-modal"
+        @title={{t "pages.user-account.delete-account.modal.title"}}
+        @showModal={{this.modalOpen}}
+        @onCloseButtonClick={{this.closeModal}}
+      >
+        <:content>
+          <p>{{t "pages.user-account.delete-account.modal.question"}}</p>
+          {{#if this.hasEmail}}
+            <p>
+              <strong>{{@user.email}}</strong>
+            </p>
+          {{else}}
+            <p>
+              <strong>
+                {{@user.firstName}}
+                {{@user.lastName}}
+              </strong>
+            </p>
+          {{/if}}
+          <p>{{t "pages.user-account.delete-account.modal.warning-1"}}</p>
+          <p>{{t "pages.user-account.delete-account.modal.warning-2"}}</p>
+        </:content>
+
+        <:footer>
+          <PixButton @variant="secondary" @isBorderVisible={{true}} @triggerAction={{this.closeModal}}>
+            {{t "common.actions.cancel"}}
+          </PixButton>
+          <PixButton @variant="error">{{t "pages.user-account.delete-account.actions.delete"}}</PixButton>
+        </:footer>
+      </PixModal>
     </section>
   </template>
 }

mon-pix/app/components/user-account/delete-account-section.scss

@@ -20,4 +20,32 @@
       color: var(--pix-primary-500);
     }
   }
+
+  .delete-account-modal {
+    width: 560px;
+    border-radius: var(--pix-spacing-2x);
+
+    .pix-modal__header {
+      align-items: center;
+    }
+
+    .pix-modal__content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--pix-spacing-2x);
+
+      p {
+        color: var(--pix-neutral-800);
+      }
+
+
+    }
+
+    .pix-modal__footer {
+      display: flex;
+      gap: var(--pix-spacing-2x);
+      justify-content: end;
+      padding-bottom: var(--pix-spacing-4x);
+    }
+  }
 }

mon-pix/app/styles/components/_user-account.scss

@@ -1,4 +1,5 @@
 .user-account {
+  margin-bottom: var(--pix-spacing-8x);
 
   .pix-background-header__content {
     max-width: 1280px;

mon-pix/tests/acceptance/user-account/delete-account-test.js

@@ -1,4 +1,4 @@
-import { visit } from '@1024pix/ember-testing-library';
+import { clickByName, visit } from '@1024pix/ember-testing-library';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { t } from 'ember-intl/test-support';
 import { setupApplicationTest } from 'ember-qunit';
@@ -28,7 +28,15 @@ module('Acceptance | user-account | delete-account', function (hooks) {
       const screen = await visit('/mon-compte/delete-account');
 
       // then
-      assert.ok(screen.getByRole('heading', { name: t('pages.user-account.delete-account.title') }));
+      const title = await screen.findByRole('heading', { name: t('pages.user-account.delete-account.title') });
+      assert.dom(title).exists();
+
+      await clickByName(t('pages.user-account.delete-account.actions.delete'));
+
+      const modalTitle = await screen.findByRole('heading', {
+        name: t('pages.user-account.delete-account.modal.title'),
+      });
+      assert.dom(modalTitle).exists();
     });
   });
 

mon-pix/tests/helpers/wait-for.js

@@ -13,3 +13,16 @@ export async function waitForDialog() {
     }
   });
 }
+
+export async function waitForDialogClose() {
+  const screen = await getScreen();
+
+  await waitUntil(() => {
+    try {
+      screen.getByRole('dialog');
+      return false;
+    } catch {
+      return true;
+    }
+  });
+}

mon-pix/tests/integration/components/user-account/delete-account-section-test.gjs

@@ -1,9 +1,10 @@
-import { render } from '@1024pix/ember-testing-library';
+import { clickByName, render, within } from '@1024pix/ember-testing-library';
 import { t } from 'ember-intl/test-support';
 import DeleteAccountSection from 'mon-pix/components/user-account/delete-account-section';
 import { module, test } from 'qunit';
 
 import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
+import { waitForDialog, waitForDialogClose } from '../../../helpers/wait-for.js';
 
 const I18N_KEYS = {
   title: 'pages.user-account.delete-account.title',
@@ -34,15 +35,43 @@ module('Integration | Component | UserAccount | DeleteAccountSection', function
       const pixScore = screen.getByText(/42 pix/i);
       assert.dom(pixScore).exists();
 
-      const email = screen.getByText(/john.doe@email.com/i);
-      assert.dom(email).exists();
+      const emails = screen.getAllByText(/john.doe@email.com/i);
+      assert.strictEqual(emails.length, 2);
 
       const supportLink = screen.getByRole('link', { name: t(I18N_KEYS.contactSupport) });
       assert.dom(supportLink).hasAttribute('href', 'https://pix.org/fr/support');
 
       const button = screen.getByRole('button', { name: t(I18N_KEYS.buttonLabel) });
       assert.dom(button).exists();
     });
+
+    test('it opens and close the modal', async function (assert) {
+      //given
+      const user = {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: '[email protected]',
+        profile: { pixScore: 42 },
+      };
+      const screen = await render(<template><DeleteAccountSection @user={{user}} /></template>);
+
+      // when
+      await clickByName(t('pages.user-account.delete-account.actions.delete'));
+
+      // then
+      await waitForDialog();
+      const dialog = screen.getByRole('dialog');
+
+      assert.dom(within(dialog).getByText('[email protected]')).exists();
+
+      // when
+      await clickByName(t('common.actions.cancel'));
+
+      // then
+      await waitForDialogClose();
+
+      assert.ok(true);
+    });
   });
 
   module('when user does not have an email', function () {
@@ -65,8 +94,36 @@ module('Integration | Component | UserAccount | DeleteAccountSection', function
       const pixScore = screen.getByText(/42 pix/i);
       assert.dom(pixScore).exists();
 
-      const fullname = screen.getByText(/John Doe/i);
-      assert.dom(fullname).exists();
+      const fullnames = screen.getAllByText(/John Doe/i);
+      assert.strictEqual(fullnames.length, 2);
+    });
+
+    test('it opens and close the modal', async function (assert) {
+      //given
+      const user = {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: null,
+        profile: { pixScore: 42 },
+      };
+      const screen = await render(<template><DeleteAccountSection @user={{user}} /></template>);
+
+      // when
+      await clickByName(t('pages.user-account.delete-account.actions.delete'));
+
+      // then
+      await waitForDialog();
+      const dialog = screen.getByRole('dialog');
+
+      assert.dom(within(dialog).getByText('John Doe')).exists();
+
+      // when
+      await clickByName(t('common.actions.cancel'));
+
+      // then
+      await waitForDialogClose();
+
+      assert.ok(true);
     });
   });
 });

mon-pix/translations/en.json

@@ -2128,6 +2128,12 @@
           "delete": "Delete my account"
         },
         "menu-link-title": "Delete my account",
+        "modal": {
+          "question": "Are you sure you want to delete your account?",
+          "title": "You’re about to delete your account",
+          "warning-1": "Please note that the account cannot be recovered after deletion.",
+          "warning-2": "As soon as you confirm, you will be automatically disconnected and your request will be taken into account immediately."
+        },
         "more-information": "For more information, ",
         "more-information-contact-support": "please contact support.",
         "title": "Delete my account permanently",

mon-pix/translations/es.json

@@ -2139,6 +2139,12 @@
           "delete": "Delete my account"
         },
         "menu-link-title": "Delete my account",
+        "modal": {
+          "title": "You’re about to delete your account",
+          "question": "Are you sure you want to delete your account?",
+          "warning-1": "Please note that the account cannot be recovered after deletion.",
+          "warning-2": "As soon as you confirm, you will be automatically disconnected and your request will be taken into account immediately."
+        },
         "more-information": "For more information, ",
         "more-information-contact-support": "please contact support.",
         "title": "Delete my account permanently",

mon-pix/translations/fr.json

@@ -2129,6 +2129,12 @@
           "delete": "Supprimer mon compte"
         },
         "menu-link-title": "Supprimer mon compte",
+        "modal": {
+          "question": "Êtes-vous sûr(e) de vouloir supprimer votre compte ?",
+          "title": "Vous êtes sur le point de supprimer votre compte",
+          "warning-1": "Veuillez noter que le compte ne pourra pas être récupéré après la suppression.",
+          "warning-2": "Dès votre confirmation, vous serez déconnecté automatiquement et votre demande sera prise en compte immédiatement."
+        },
         "more-information": "Pour plus d’informations, ",
         "more-information-contact-support": "vous pouvez contacter le support.",
         "title": "Supprimer mon compte définitivement",

mon-pix/translations/nl.json

@@ -2135,6 +2135,12 @@
           "delete": "Delete my account"
         },
         "menu-link-title": "Delete my account",
+        "modal": {
+          "title": "You’re about to delete your account",
+          "question": "Are you sure you want to delete your account?",
+          "warning-1": "Please note that the account cannot be recovered after deletion.",
+          "warning-2": "As soon as you confirm, you will be automatically disconnected and your request will be taken into account immediately."
+        },
         "more-information": "For more information, ",
         "more-information-contact-support": "please contact support.",
         "title": "Delete my account permanently",