From a20a2b4c36171c9798a4857d51f29649b4b802b0 Mon Sep 17 00:00:00 2001 From: Eric Lim Date: Thu, 21 Nov 2024 14:46:26 +0100 Subject: [PATCH 1/2] feat(mon-pix): add delete account modal Co-authored-by: Emmanuelle Bonnemay Co-authored-by: Benjamin Petetot --- .../user-account/delete-account-section.gjs | 48 ++++++++++++- .../user-account/delete-account-section.scss | 28 ++++++++ .../user-account/delete-account-test.js | 12 +++- mon-pix/tests/helpers/wait-for.js | 13 ++++ .../delete-account-section-test.gjs | 67 +++++++++++++++++-- mon-pix/translations/en.json | 6 ++ mon-pix/translations/es.json | 6 ++ mon-pix/translations/fr.json | 6 ++ mon-pix/translations/nl.json | 6 ++ 9 files changed, 184 insertions(+), 8 deletions(-) diff --git a/mon-pix/app/components/user-account/delete-account-section.gjs b/mon-pix/app/components/user-account/delete-account-section.gjs index 146357f50b4..eb18614f614 100644 --- a/mon-pix/app/components/user-account/delete-account-section.gjs +++ b/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; + } + } diff --git a/mon-pix/app/components/user-account/delete-account-section.scss b/mon-pix/app/components/user-account/delete-account-section.scss index 760d8031d9c..a1d6c2b831e 100644 --- a/mon-pix/app/components/user-account/delete-account-section.scss +++ b/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); + } + } } diff --git a/mon-pix/tests/acceptance/user-account/delete-account-test.js b/mon-pix/tests/acceptance/user-account/delete-account-test.js index 1711d4b9e66..bc170ef4b6b 100644 --- a/mon-pix/tests/acceptance/user-account/delete-account-test.js +++ b/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(); }); }); diff --git a/mon-pix/tests/helpers/wait-for.js b/mon-pix/tests/helpers/wait-for.js index 0eeb99758d7..f32aba63b3c 100644 --- a/mon-pix/tests/helpers/wait-for.js +++ b/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; + } + }); +} diff --git a/mon-pix/tests/integration/components/user-account/delete-account-section-test.gjs b/mon-pix/tests/integration/components/user-account/delete-account-section-test.gjs index 73c430ecd38..cf85148015a 100644 --- a/mon-pix/tests/integration/components/user-account/delete-account-section-test.gjs +++ b/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,8 +35,8 @@ 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'); @@ -43,6 +44,34 @@ module('Integration | Component | UserAccount | DeleteAccountSection', function 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: 'john.doe@email.com', + profile: { pixScore: 42 }, + }; + const screen = await render(); + + // 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@email.com')).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(); + + // 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); }); }); }); diff --git a/mon-pix/translations/en.json b/mon-pix/translations/en.json index e303198398b..eb4f716b5d0 100644 --- a/mon-pix/translations/en.json +++ b/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", diff --git a/mon-pix/translations/es.json b/mon-pix/translations/es.json index 4c615f9a0ad..a789040d282 100644 --- a/mon-pix/translations/es.json +++ b/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", diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json index 183e7e1a87a..7c0e3e5e42b 100644 --- a/mon-pix/translations/fr.json +++ b/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", diff --git a/mon-pix/translations/nl.json b/mon-pix/translations/nl.json index f599ec67fb8..8d5ac040528 100644 --- a/mon-pix/translations/nl.json +++ b/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", From 5d145887effc82da73cf96bb769ef594c20c7c1d Mon Sep 17 00:00:00 2001 From: Benjamin Petetot Date: Mon, 25 Nov 2024 10:39:06 +0100 Subject: [PATCH 2/2] fix(mon-pix): Add margin bottom between content and footer --- mon-pix/app/styles/components/_user-account.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/mon-pix/app/styles/components/_user-account.scss b/mon-pix/app/styles/components/_user-account.scss index 8a2e286340a..3a6ebaefbfb 100644 --- a/mon-pix/app/styles/components/_user-account.scss +++ b/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;