From c46c13ae55993334108bc27996ab92fe0f72fffd Mon Sep 17 00:00:00 2001
From: Xavier Carron <33637571+xav-car@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:56:03 +0100
Subject: [PATCH 1/3] chore(api): add seeds with externalId of type email

---
 api/db/seeds/data/common/tooling/campaign-tooling.js   | 9 ++++++++-
 api/db/seeds/data/team-prescription/build-campaigns.js | 6 ++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/api/db/seeds/data/common/tooling/campaign-tooling.js b/api/db/seeds/data/common/tooling/campaign-tooling.js
index 993222888cb..7adb4bc70a8 100644
--- a/api/db/seeds/data/common/tooling/campaign-tooling.js
+++ b/api/db/seeds/data/common/tooling/campaign-tooling.js
@@ -24,6 +24,7 @@ export { createAssessmentCampaign, createProfilesCollectionCampaign };
  * @param {string} code
  * @param {string} title
  * @param {string} idPixLabel
+ * @param {string} idPixLabelType
  * @param {string} externalIdHelpImageUrl
  * @param {string} alternativeTextToExternalIdHelpImage
  * @param {string} customLandingPageText
@@ -62,6 +63,7 @@ async function createAssessmentCampaign({
   code,
   title,
   idPixLabel,
+  idPixLabelType,
   externalIdHelpImageUrl,
   alternativeTextToExternalIdHelpImage,
   customLandingPageText,
@@ -87,6 +89,7 @@ async function createAssessmentCampaign({
     code,
     title,
     idPixLabel,
+    idPixLabelType,
     externalIdHelpImageUrl,
     alternativeTextToExternalIdHelpImage,
     customLandingPageText,
@@ -443,6 +446,7 @@ function _buildCampaign({
   code,
   title,
   idPixLabel,
+  idPixLabelType,
   externalIdHelpImageUrl,
   alternativeTextToExternalIdHelpImage,
   customLandingPageText,
@@ -490,10 +494,13 @@ function _buildCampaign({
     assessmentMethod,
   });
   if (idPixLabel) {
+    const type = Object.values(CampaignExternalIdTypes).includes(idPixLabelType)
+      ? idPixLabelType
+      : CampaignExternalIdTypes.STRING;
     databaseBuilder.factory.buildCampaignFeature({
       campaignId: realCampaignId,
       featureId: FEATURE_CAMPAIGN_EXTERNAL_ID,
-      params: { type: CampaignExternalIdTypes.STRING, label: idPixLabel },
+      params: { type, label: idPixLabel },
     });
   }
   return { realCampaignId, realOrganizationId, realCreatedAt };
diff --git a/api/db/seeds/data/team-prescription/build-campaigns.js b/api/db/seeds/data/team-prescription/build-campaigns.js
index ad7753cee7d..7d7530f7cee 100644
--- a/api/db/seeds/data/team-prescription/build-campaigns.js
+++ b/api/db/seeds/data/team-prescription/build-campaigns.js
@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 
+import { CampaignExternalIdTypes } from '../../../../src/prescription/shared/domain/constants.js';
 import {
   PRO_MANAGING_ORGANIZATION_ID,
   PRO_ORGANIZATION_ID,
@@ -184,9 +185,10 @@ async function _createProCampaigns(databaseBuilder) {
     targetProfileId: TARGET_PROFILE_NO_BADGES_NO_STAGES_ID,
     organizationId: PRO_ORGANIZATION_ID,
     ownerId: USER_ID_ADMIN_ORGANIZATION,
-    name: "Campagne d'évaluation PRO envoi multiple",
+    name: "Campagne d'évaluation PRO envoi multiple - ExternalId EMAIL",
     code: 'PROASSMUL',
-    idPixLabel: 'IdPixLabel',
+    idPixLabel: 'gimme gimme gimme your email buddy',
+    idPixLabelType: CampaignExternalIdTypes.EMAIL,
     multipleSendings: true,
     createdAt: dayjs().subtract(30, 'days').toDate(),
     configCampaign: {

From 7546953bcee5029dba105f882a6da73ab96d3434 Mon Sep 17 00:00:00 2001
From: Xavier Carron <33637571+xav-car@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:29:01 +0100
Subject: [PATCH 2/3] refactor?(mon-pix): remove invalid test no unit test on
 component please

---
 .../fill-in-participant-external-id-test.js   | 84 -------------------
 1 file changed, 84 deletions(-)
 delete mode 100644 mon-pix/tests/unit/components/routes/campaigns/invited/fill-in-participant-external-id-test.js

diff --git a/mon-pix/tests/unit/components/routes/campaigns/invited/fill-in-participant-external-id-test.js b/mon-pix/tests/unit/components/routes/campaigns/invited/fill-in-participant-external-id-test.js
deleted file mode 100644
index ff63f44f822..00000000000
--- a/mon-pix/tests/unit/components/routes/campaigns/invited/fill-in-participant-external-id-test.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { module, test } from 'qunit';
-import sinon from 'sinon';
-
-import createComponent from '../../../../../helpers/create-glimmer-component';
-import setupIntlRenderingTest from '../../../../../helpers/setup-intl-rendering';
-
-module('Unit | Component | routes/campaigns/invited/fill-in-participant-external-id', function (hooks) {
-  setupIntlRenderingTest(hooks);
-
-  const campaign = {
-    id: 1243,
-    code: 'CODECAMPAIGN',
-    idPixLabel: 'Identifiant professionnel',
-  };
-  const participantExternalId = 'matricule123';
-
-  let component;
-  let onSubmitStub;
-  let onCancelStub;
-  let eventStub;
-
-  hooks.beforeEach(function () {
-    onSubmitStub = sinon.stub();
-    onCancelStub = sinon.stub();
-    eventStub = { preventDefault: sinon.stub() };
-    component = createComponent('routes/campaigns/invited/fill-in-participant-external-id', {
-      campaign,
-      onSubmit: onSubmitStub,
-      onCancel: onCancelStub,
-    });
-  });
-
-  module('#submit', function () {
-    test('should succeed when participantExternalId is correct', async function (assert) {
-      // given
-      component.participantExternalId = participantExternalId;
-
-      // when
-      await component.actions.submit.call(component, eventStub);
-
-      // then
-      sinon.assert.calledWith(onSubmitStub, participantExternalId);
-      sinon.assert.called(eventStub.preventDefault);
-      assert.ok(true);
-    });
-
-    test('should display error when participant external id is empty', async function (assert) {
-      // given
-      component.participantExternalId = '';
-
-      // when
-      await component.actions.submit.call(component, eventStub);
-
-      // then
-      assert.strictEqual(component.errorMessage, `Merci de renseigner votre ${component.args.campaign.idPixLabel}.`);
-    });
-
-    test('should display error when participant external id exceed 255 characters', async function (assert) {
-      // given
-      component.participantExternalId =
-        '0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef';
-
-      // when
-      await component.actions.submit.call(component, eventStub);
-
-      // then
-      assert.strictEqual(
-        component.errorMessage,
-        `Votre ${component.args.campaign.idPixLabel} ne doit pas dépasser les 255 caractères.`,
-      );
-    });
-  });
-
-  module('#cancel', function () {
-    test('should abort and call its parent method', async function (assert) {
-      // when
-      await component.actions.cancel.call(component);
-
-      // then
-      sinon.assert.called(onCancelStub);
-      assert.ok(true);
-    });
-  });
-});

From f5a5048ca7b7d16413483b300e1b67d3599adfa0 Mon Sep 17 00:00:00 2001
From: Xavier Carron <33637571+xav-car@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:29:31 +0100
Subject: [PATCH 3/3] feat(mon-pix): remove error message on input

---
 .../fill-in-participant-external-id.gjs       | 139 +++++++++++++++++
 .../fill-in-participant-external-id.hbs       |  47 ------
 .../fill-in-participant-external-id.js        |  76 ---------
 .../fill-in-participant-external-id-test.js   | 147 +++++++++++++++++-
 4 files changed, 281 insertions(+), 128 deletions(-)
 create mode 100644 mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.gjs
 delete mode 100644 mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.hbs
 delete mode 100644 mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.js

diff --git a/mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.gjs b/mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.gjs
new file mode 100644
index 00000000000..b5e78abf0de
--- /dev/null
+++ b/mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.gjs
@@ -0,0 +1,139 @@
+import PixBackgroundHeader from '@1024pix/pix-ui/components/pix-background-header';
+import PixBlock from '@1024pix/pix-ui/components/pix-block';
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixInput from '@1024pix/pix-ui/components/pix-input';
+import { on } from '@ember/modifier';
+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';
+
+const ERROR_MESSAGE = {
+  INVALID_EMAIL: 'pages.fill-in-participant-external-id.errors.invalid-external-id-email',
+  INVALID_EXTERNAL_ID: 'pages.fill-in-participant-external-id.errors.invalid-external-id',
+  MISSING_EXTERNAL_ID: 'pages.fill-in-participant-external-id.errors.missing-external-id',
+};
+export default class FillInParticipantExternalId extends Component {
+  @service intl;
+  @service campaignStorage;
+
+  @tracked participantExternalId = this.previousParticipantExternalId || null;
+  @tracked isLoading = false;
+  @tracked errorMessage = ERROR_MESSAGE[this.previousError] ? this.intl.t(ERROR_MESSAGE[this.previousError]) : null;
+
+  get previousError() {
+    return this.campaignStorage.get(this.args.campaign.code, 'error');
+  }
+  get previousParticipantExternalId() {
+    return this.campaignStorage.get(this.args.campaign.code, 'previousParticipantExternalId');
+  }
+
+  @action
+  submit(event) {
+    event.preventDefault();
+
+    if (!this.participantExternalId.trim()) {
+      this.errorMessage = this.intl.t('pages.fill-in-participant-external-id.errors.missing-external-id', {
+        idPixLabel: this.args.campaign.idPixLabel,
+      });
+      return;
+    }
+
+    if (this.participantExternalId.length > 255) {
+      this.errorMessage = this.intl.t('pages.fill-in-participant-external-id.errors.max-length-external-id', {
+        idPixLabel: this.args.campaign.idPixLabel,
+      });
+      return;
+    }
+
+    this.errorMessage = null;
+    return this.args.onSubmit(this.participantExternalId);
+  }
+
+  @action
+  updateParticipantExternalId(event) {
+    this.participantExternalId = event.target.value;
+  }
+
+  @action
+  resetErrorMessage() {
+    if (!this.errorMessage) return;
+
+    this.errorMessage = null;
+  }
+
+  @action
+  cancel() {
+    this.errorMessage = null;
+    return this.args.onCancel();
+  }
+
+  get idPixInputType() {
+    if (this.args.campaign.idPixType === 'EMAIL') {
+      return 'email';
+    } else if (this.args.campaign.idPixType === 'STRING') {
+      return 'text';
+    }
+    return null;
+  }
+
+  get idPixInputSubLabel() {
+    if (this.args.campaign.idPixType === 'EMAIL') {
+      return this.intl.t('pages.sign-up.fields.email.help');
+    } else if (this.args.campaign.idPixInputType === 'STRING') {
+      return '';
+    }
+    return null;
+  }
+
+  <template>
+    {{! template-lint-disable no-action require-input-label no-unknown-arguments-for-builtin-components }}
+    <main role="main">
+      <PixBackgroundHeader>
+        <PixBlock class="fill-in-participant-external-id">
+          <h1 class="fill-in-participant-external-id__title">{{t "pages.fill-in-participant-external-id.first-title"}}
+          </h1>
+          <p class="fill-in-participant-external-id__announcement">
+            {{t "pages.fill-in-participant-external-id.announcement"}}
+          </p>
+
+          <form {{on "submit" this.submit}} class="fill-in-participant-external-id__form">
+            <PixInput
+              @id="external-id"
+              @value={{this.participantExternalId}}
+              @errorMessage={{this.errorMessage}}
+              @validationStatus={{if this.errorMessage "error"}}
+              @requiredLabel={{true}}
+              {{on "input" this.resetErrorMessage}}
+              {{on "change" this.updateParticipantExternalId}}
+              @subLabel={{this.idPixInputSubLabel}}
+              type={{this.idPixInputType}}
+              aria-autocomplete="none"
+            >
+              <:label>{{@campaign.idPixLabel}}</:label>
+            </PixInput>
+
+            {{#if @campaign.externalIdHelpImageUrl}}
+              <img
+                class="fill-in-participant-external-id__help"
+                src={{@campaign.externalIdHelpImageUrl}}
+                alt={{@campaign.alternativeTextToExternalIdHelpImage}}
+              />
+            {{/if}}
+
+            <div class="fill-in-participant-external-id__buttonbar">
+              <PixButton @variant="secondary" @triggerAction={{this.cancel}}>
+                {{t "pages.fill-in-participant-external-id.buttons.cancel"}}
+              </PixButton>
+
+              <PixButton @type="submit">
+                {{t "pages.fill-in-participant-external-id.buttons.continue"}}
+              </PixButton>
+            </div>
+          </form>
+        </PixBlock>
+      </PixBackgroundHeader>
+    </main>
+  </template>
+}
diff --git a/mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.hbs b/mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.hbs
deleted file mode 100644
index f089c48f155..00000000000
--- a/mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.hbs
+++ /dev/null
@@ -1,47 +0,0 @@
-{{! template-lint-disable no-action require-input-label no-unknown-arguments-for-builtin-components }}
-<main role="main">
-  <PixBackgroundHeader>
-    <PixBlock class="fill-in-participant-external-id">
-      <h1 class="fill-in-participant-external-id__title">{{t "pages.fill-in-participant-external-id.first-title"}}
-      </h1>
-      <p class="fill-in-participant-external-id__announcement">
-        {{t "pages.fill-in-participant-external-id.announcement"}}
-      </p>
-
-      <form {{on "submit" this.submit}} class="fill-in-participant-external-id__form">
-        <PixInput
-          @id="external-id"
-          @value={{this.participantExternalId}}
-          @errorMessage={{this.errorMessage}}
-          @validationStatus={{if this.errorMessage "error"}}
-          @requiredLabel={{true}}
-          {{on "change" this.updateParticipantExternalId}}
-          @subLabel={{this.idPixInputSubLabel}}
-          type={{this.idPixInputType}}
-          aria-autocomplete="none"
-        >
-          <:label>{{@campaign.idPixLabel}}</:label>
-        </PixInput>
-
-        {{#if @campaign.externalIdHelpImageUrl}}
-          <img
-            class="fill-in-participant-external-id__help"
-            src={{@campaign.externalIdHelpImageUrl}}
-            alt={{@campaign.alternativeTextToExternalIdHelpImage}}
-          />
-        {{/if}}
-
-        <div class="fill-in-participant-external-id__buttonbar">
-          <PixButton @variant="secondary" @triggerAction={{this.cancel}}>
-            {{t "pages.fill-in-participant-external-id.buttons.cancel"}}
-          </PixButton>
-
-          <PixButton @type="submit">
-            {{t "pages.fill-in-participant-external-id.buttons.continue"}}
-          </PixButton>
-        </div>
-      </form>
-    </PixBlock>
-  </PixBackgroundHeader>
-
-</main>
\ No newline at end of file
diff --git a/mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.js b/mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.js
deleted file mode 100644
index 3143e86d3cf..00000000000
--- a/mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { action } from '@ember/object';
-import { service } from '@ember/service';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-const ERROR_MESSAGE = {
-  INVALID_EMAIL: 'pages.fill-in-participant-external-id.errors.invalid-external-id-email',
-  INVALID_EXTERNAL_ID: 'pages.fill-in-participant-external-id.errors.invalid-external-id',
-  MISSING_EXTERNAL_ID: 'pages.fill-in-participant-external-id.errors.missing-external-id',
-};
-export default class FillInParticipantExternalId extends Component {
-  @service intl;
-  @service campaignStorage;
-
-  @tracked participantExternalId = this.previousParticipantExternalId || null;
-  @tracked isLoading = false;
-  @tracked errorMessage = ERROR_MESSAGE[this.previousError] ? this.intl.t(ERROR_MESSAGE[this.previousError]) : null;
-
-  get previousError() {
-    return this.campaignStorage.get(this.args.campaign.code, 'error');
-  }
-  get previousParticipantExternalId() {
-    return this.campaignStorage.get(this.args.campaign.code, 'previousParticipantExternalId');
-  }
-
-  @action
-  submit(event) {
-    event.preventDefault();
-
-    if (!this.participantExternalId) {
-      this.errorMessage = this.intl.t('pages.fill-in-participant-external-id.errors.missing-external-id', {
-        idPixLabel: this.args.campaign.idPixLabel,
-      });
-      return;
-    }
-
-    if (this.participantExternalId.length > 255) {
-      this.errorMessage = this.intl.t('pages.fill-in-participant-external-id.errors.max-length-external-id', {
-        idPixLabel: this.args.campaign.idPixLabel,
-      });
-      return;
-    }
-
-    this.errorMessage = null;
-    return this.args.onSubmit(this.participantExternalId);
-  }
-
-  @action
-  updateParticipantExternalId(event) {
-    this.participantExternalId = event.target.value;
-  }
-
-  @action
-  cancel() {
-    this.errorMessage = null;
-    return this.args.onCancel();
-  }
-
-  get idPixInputType() {
-    if (this.args.campaign.idPixType === 'EMAIL') {
-      return 'email';
-    } else if (this.args.campaign.idPixType === 'STRING') {
-      return 'text';
-    }
-    return null;
-  }
-
-  get idPixInputSubLabel() {
-    if (this.args.campaign.idPixType === 'EMAIL') {
-      return this.intl.t('pages.sign-up.fields.email.help');
-    } else if (this.args.campaign.idPixInputType === 'STRING') {
-      return '';
-    }
-    return null;
-  }
-}
diff --git a/mon-pix/tests/integration/components/routes/campaigns/invited/fill-in-participant-external-id-test.js b/mon-pix/tests/integration/components/routes/campaigns/invited/fill-in-participant-external-id-test.js
index 455ee9f0830..ea631d08ee2 100644
--- a/mon-pix/tests/integration/components/routes/campaigns/invited/fill-in-participant-external-id-test.js
+++ b/mon-pix/tests/integration/components/routes/campaigns/invited/fill-in-participant-external-id-test.js
@@ -1,9 +1,9 @@
 import { render } from '@1024pix/ember-testing-library';
-// eslint-disable-next-line no-restricted-imports
-import { find } from '@ember/test-helpers';
+import { click, fillIn } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { t } from 'ember-intl/test-support';
 import { module, test } from 'qunit';
+import sinon from 'sinon';
 
 import setupIntlRenderingTest from '../../../../../helpers/setup-intl-rendering';
 
@@ -14,6 +14,8 @@ module('Integration | Component | routes/campaigns/invited/fill-in-participant-e
   let onCancelStub;
 
   hooks.beforeEach(function () {
+    onCancelStub = sinon.stub();
+    onSubmitStub = sinon.stub();
     this.set('onSubmitStub', onSubmitStub);
     this.set('onCancelStub', onCancelStub);
   });
@@ -28,7 +30,7 @@ module('Integration | Component | routes/campaigns/invited/fill-in-participant-e
       this.set('campaign', campaign);
 
       // given
-      await render(
+      const screen = await render(
         hbs`<Routes::Campaigns::Invited::FillInParticipantExternalId
   @campaign={{this.campaign}}
   @onSubmit={{this.onSubmitStub}}
@@ -38,7 +40,7 @@ module('Integration | Component | routes/campaigns/invited/fill-in-participant-e
 
       // then
       assert.dom('img').exists();
-      assert.ok(find('img').getAttribute('alt').includes(campaign.alternativeTextToExternalIdHelpImage));
+      assert.ok(screen.getByRole('img', { name: campaign.alternativeTextToExternalIdHelpImage }));
     });
   });
 
@@ -64,6 +66,120 @@ module('Integration | Component | routes/campaigns/invited/fill-in-participant-e
     });
   });
 
+  test('should called on submit button', async function (assert) {
+    // given
+    const campaign = {
+      idPixLabel: 'idpix',
+      idPixType: 'STRING',
+    };
+
+    this.set('campaign', campaign);
+    const screen = await render(
+      hbs`<Routes::Campaigns::Invited::FillInParticipantExternalId
+  @campaign={{this.campaign}}
+  @onSubmit={{this.onSubmitStub}}
+  @onCancel={{this.onCancelStub}}
+/>`,
+    );
+
+    // when
+    await fillIn(screen.getByLabelText(/idpix/), '1234');
+    await click(screen.getByRole('button', { name: t('pages.fill-in-participant-external-id.buttons.continue') }));
+
+    // then
+    assert.ok(onSubmitStub.called);
+    assert.ok(onCancelStub.notCalled);
+  });
+
+  test('should called on cancel button', async function (assert) {
+    // given
+    const campaign = {
+      idPixLabel: 'idpix',
+      idPixType: 'STRING',
+    };
+
+    this.set('campaign', campaign);
+    const screen = await render(
+      hbs`<Routes::Campaigns::Invited::FillInParticipantExternalId
+  @campaign={{this.campaign}}
+  @onSubmit={{this.onSubmitStub}}
+  @onCancel={{this.onCancelStub}}
+/>`,
+    );
+
+    // when
+    await click(screen.getByRole('button', { name: t('pages.fill-in-participant-external-id.buttons.cancel') }));
+
+    // then
+    assert.ok(onSubmitStub.notCalled);
+    assert.ok(onCancelStub.called);
+  });
+
+  module('when fill participant externalId', function () {
+    test('should display basic error when participantExternalId is empty', async function (assert) {
+      // given
+      const campaign = {
+        idPixLabel: 'idpix',
+        idPixType: 'STRING',
+      };
+
+      this.set('campaign', campaign);
+      const screen = await render(
+        hbs`<Routes::Campaigns::Invited::FillInParticipantExternalId
+  @campaign={{this.campaign}}
+  @onSubmit={{this.onSubmitStub}}
+  @onCancel={{this.onCancelStub}}
+/>`,
+      );
+
+      // when
+      await fillIn(screen.getByLabelText(/idpix/), ' ');
+      await click(screen.getByRole('button', { name: t('pages.fill-in-participant-external-id.buttons.continue') }));
+
+      // then
+      assert.ok(
+        screen.getByText(
+          t('pages.fill-in-participant-external-id.errors.missing-external-id', {
+            idPixLabel: campaign.idPixLabel,
+          }),
+        ),
+      );
+    });
+
+    test('should display basic error when participantExternalId is over than 255 character', async function (assert) {
+      // given
+      const campaign = {
+        idPixLabel: 'idpix',
+        idPixType: 'STRING',
+      };
+
+      this.set('campaign', campaign);
+      const screen = await render(
+        hbs`<Routes::Campaigns::Invited::FillInParticipantExternalId
+  @campaign={{this.campaign}}
+  @onSubmit={{this.onSubmitStub}}
+  @onCancel={{this.onCancelStub}}
+/>`,
+      );
+
+      // when
+      await fillIn(
+        screen.getByLabelText(/idpix/),
+        '0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef',
+      );
+      await click(screen.getByRole('button', { name: t('pages.fill-in-participant-external-id.buttons.continue') }));
+
+      // then
+      assert.ok(
+        screen.getByText(
+          t('pages.fill-in-participant-external-id.errors.max-length-external-id', {
+            idPixLabel: campaign.idPixLabel,
+          }),
+        ),
+      );
+    });
+  });
+
   module('with idPixLabel and idPixType', function () {
     module('idPixInputType', function () {
       Object.entries({ STRING: 'text', EMAIL: 'email' }).forEach(function ([idPixType, inputType]) {
@@ -147,7 +263,7 @@ module('Integration | Component | routes/campaigns/invited/fill-in-participant-e
       test(`initialize error and previous external id`, async function (assert) {
         this.set('campaign', campaign);
 
-        // given
+        // given & when
         const screen = await render(
           hbs`<Routes::Campaigns::Invited::FillInParticipantExternalId
   @campaign={{this.campaign}}
@@ -155,10 +271,31 @@ module('Integration | Component | routes/campaigns/invited/fill-in-participant-e
   @onCancel={{this.onCancelStub}}
 />`,
         );
+
+        // then
         const input = screen.getByLabelText(/idpix/);
         assert.strictEqual(input.value, '1234TOTO');
         assert.ok(screen.getByText(t('pages.fill-in-participant-external-id.errors.invalid-external-id-email')));
       });
+
+      test(`remove error message when update input`, async function (assert) {
+        this.set('campaign', campaign);
+
+        // given
+        const screen = await render(
+          hbs`<Routes::Campaigns::Invited::FillInParticipantExternalId
+  @campaign={{this.campaign}}
+  @onSubmit={{this.onSubmitStub}}
+  @onCancel={{this.onCancelStub}}
+/>`,
+        );
+
+        // when
+        await fillIn(screen.getByLabelText(/idpix/), '1234');
+
+        // then
+        assert.notOk(screen.queryByText(t('pages.fill-in-participant-external-id.errors.invalid-external-id-email')));
+      });
     });
   });
 });