feat(mon-pix): remove error message on input

Author: xav-car

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) {
+      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>
+}

mon-pix/app/components/routes/campaigns/invited/fill-in-participant-external-id.hbs

@@ -1,6 +1,5 @@
 import { render } from '@1024pix/ember-testing-library';
-// eslint-disable-next-line no-restricted-imports
-import { find } from '@ember/test-helpers';
+import { fillIn } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { t } from 'ember-intl/test-support';
 import { module, test } from 'qunit';
@@ -28,7 +27,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 +37,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 }));
     });
   });
 
@@ -147,18 +146,39 @@ 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}}
   @onSubmit={{this.onSubmitStub}}
   @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')));
+      });
     });
   });
 });